-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(pie-docs): DSW-2616 add the code section of the thumbnail component
- Loading branch information
Showing
5 changed files
with
274 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"pie-docs": minor | ||
--- | ||
|
||
[Added] - the thumbnail code section |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
--- | ||
eleventyNavigation: | ||
key: Code | ||
parent: Thumbnail | ||
order: 3 | ||
shouldShowContents: true | ||
eleventyComputed: | ||
props: "{% include './props.json' %}" | ||
--- | ||
|
||
## Overview | ||
|
||
<p> | ||
<a href="https://www.npmjs.com/@justeattakeaway/pie-thumbnail" style="text-decoration: none"> | ||
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-thumbnail.svg?label=pie-thumbnail"> | ||
</a> | ||
|
||
<a href="https://www.npmjs.com/package/@justeattakeaway/pie-webc"> | ||
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-webc.svg?label=pie-webc"> | ||
</a> | ||
</p> | ||
|
||
`pie-thumbnail` is a Web Component built using [Lit](https://lit.dev/). It offers a simple and accessible thumbnail component for web applications. | ||
|
||
This component can be easily integrated into various frontend frameworks and customised through a set of properties. | ||
|
||
{% notification { | ||
type: "information", | ||
iconName: "engineers", | ||
message: "You can try out this component on our [Storybook](https://webc.pie.design/?path=/docs/thumbnail) instance!" | ||
} %} | ||
|
||
## Installation | ||
|
||
To install `pie-thumbnail` in your application, run the following on your command line: | ||
|
||
```shell | ||
npm i @justeattakeaway/pie-webc | ||
``` | ||
|
||
```shell | ||
yarn add @justeattakeaway/pie-webc | ||
``` | ||
|
||
{% notification { | ||
type: "neutral", | ||
iconName: "link", | ||
message: "For more information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components)." | ||
} %} | ||
|
||
## Props | ||
|
||
{% componentDetailsTable { | ||
tableData: props | ||
} %} | ||
|
||
## Examples | ||
|
||
For HTML: | ||
|
||
```js | ||
// import as module into a js file e.g. main.js | ||
import '@justeattakeaway/pie-webc/components/thumbnail.js' | ||
``` | ||
|
||
```html | ||
<!-- pass js file into <script> tag --> | ||
<pie-thumbnail src="" alt=""></pie-thumbnail> | ||
<script type="module" src="/main.js"></script> | ||
``` | ||
|
||
For Native JS Applications, Vue, Angular, Svelte etc.: | ||
|
||
```js | ||
// Vue templates (using Nuxt 3) | ||
import '@justeattakeaway/pie-webc/components/thumbnail.js'; | ||
|
||
<pie-thumbnail src="" alt=""></pie-thumbnail> | ||
``` | ||
|
||
For React Applications: | ||
|
||
```jsx | ||
import { PieThumbnail } from '@justeattakeaway/pie-webc/react/thumbnail.js'; | ||
|
||
<PieThumbnail src="" alt=""></PieThumbnail> | ||
``` | ||
|
||
{% notification { | ||
type: "neutral", | ||
iconName: "link", | ||
message: "For more examples, see [here](https://github.com/justeattakeaway/pie-aperture/tree/main)." | ||
} %} | ||
|
||
## Changelog | ||
|
||
{% notification { | ||
type: "neutral", | ||
iconName: "link", | ||
message: "See [here](https://github.com/justeattakeaway/pie/blob/main/packages/components/pie-thumbnail/CHANGELOG.md)." | ||
} %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,166 @@ | ||
{ | ||
"headings": [ | ||
"Prop", | ||
"Options", | ||
"Description", | ||
"Default" | ||
], | ||
"rows": [ | ||
[ | ||
"src", | ||
"", | ||
"The `src` attribute for the underlying image tag.", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"\"\"" | ||
] | ||
} | ||
], | ||
[ | ||
"alt", | ||
"", | ||
"The `alt` attribute for the underlying image tag.", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"\"\"" | ||
] | ||
} | ||
], | ||
[ | ||
"variant", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"\"default\"", | ||
"\"outline\"" | ||
] | ||
}, | ||
"Sets the variant of the thumbnail.", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"\"default\"" | ||
] | ||
} | ||
], | ||
[ | ||
"backgroundColor", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"\"default\"", | ||
"\"subtle\"", | ||
"\"strong\"", | ||
"\"dark\"", | ||
"\"inverse\"", | ||
"\"inverse-alternative\"" | ||
] | ||
}, | ||
"Sets the background color of the thumbnail container.", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"\"default\"" | ||
] | ||
} | ||
], | ||
[ | ||
"size", | ||
"A number between 24 and 128, in multiples of 8.", | ||
"Sets the size of the thumbnail.", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
48 | ||
] | ||
} | ||
], | ||
[ | ||
"aspectRatio", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"\"1by1\"", | ||
"\"4by3\"", | ||
"\"16by9\"" | ||
] | ||
}, | ||
"Sets the aspect-ratio of the thumbnail image.", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"\"1by1\"" | ||
] | ||
} | ||
], | ||
[ | ||
"disabled", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"true", | ||
"false" | ||
] | ||
}, | ||
"When true, the disabled styles are applied.", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"false" | ||
] | ||
} | ||
], | ||
[ | ||
"hasPadding", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"true", | ||
"false" | ||
] | ||
}, | ||
"When true, an extra spacing around the thumbnail container is applied.", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"false" | ||
] | ||
} | ||
], | ||
[ | ||
"hideDefaultPlaceholder", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"true", | ||
"false" | ||
] | ||
}, | ||
"When true, hides the component default placeholder on image load failure.", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"false" | ||
] | ||
} | ||
], | ||
[ | ||
"placeholder", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"{ src?: string, alt?: string }" | ||
] | ||
}, | ||
"Overrides the component default placeholder with a custom one on image load failure.", | ||
{ | ||
"type": "code", | ||
"item": [ | ||
"{}" | ||
] | ||
} | ||
] | ||
] | ||
} |