@justeattakeaway/pie-thumbnail 0.8.1 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +60 -57
- package/custom-elements.json +9 -9
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,91 +1,94 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
</p>
|
|
1
|
+
# @justeattakeaway/pie-thumbnail
|
|
2
|
+
[Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-thumbnail) | [Design Documentation](https://pie.design/components/thumbnail) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-thumbnail)
|
|
4
3
|
|
|
5
|
-
<p
|
|
4
|
+
<p>
|
|
6
5
|
<a href="https://www.npmjs.com/@justeattakeaway/pie-thumbnail">
|
|
7
6
|
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-thumbnail.svg">
|
|
8
7
|
</a>
|
|
9
8
|
</p>
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
1. [Introduction](#pie-thumbnail)
|
|
14
|
-
2. [Installation](#installation)
|
|
15
|
-
3. [Importing the component](#importing-the-component)
|
|
16
|
-
4. [Peer Dependencies](#peer-dependencies)
|
|
17
|
-
5. [Props](#props)
|
|
18
|
-
6. [Contributing](#contributing)
|
|
10
|
+
`@justeattakeaway/pie-thumbnail` is a Web Component built using the Lit library. It offers a simple and accessible thumbnail component for web applications.
|
|
19
11
|
|
|
20
|
-
##
|
|
12
|
+
## Table of Contents
|
|
21
13
|
|
|
22
|
-
|
|
14
|
+
- [Installation](#installation)
|
|
15
|
+
- [Documentation](#documentation)
|
|
16
|
+
- [Properties](#properties)
|
|
17
|
+
- [Slots](#slots)
|
|
18
|
+
- [CSS Variables](#css-variables)
|
|
19
|
+
- [Events](#events)
|
|
20
|
+
- [Usage Examples](#usage-examples)
|
|
21
|
+
- [Questions and Support](#questions-and-support)
|
|
22
|
+
- [Contributing](#contributing)
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
## Installation
|
|
25
25
|
|
|
26
|
+
> To install any of our web components in your application, we would suggest following the [getting started guide](https://webc.pie.design/?path=/docs/introduction-getting-started--docs) to set up your project.
|
|
26
27
|
|
|
27
|
-
|
|
28
|
+
Ideally, you should install the component using the **`@justeattakeaway/pie-webc`** package, which includes all of the components. Or you can install the individual component package.
|
|
28
29
|
|
|
29
|
-
|
|
30
|
+
## Documentation
|
|
30
31
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
### Properties
|
|
33
|
+
| Prop | Options | Description | Default |
|
|
34
|
+
|------------------------|---------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------|-------------|
|
|
35
|
+
| `src` | — | The `src` attribute for the underlying image tag. | `""` |
|
|
36
|
+
| `alt` | — | The `alt` attribute for the underlying image tag. | `""` |
|
|
37
|
+
| `variant` | `"default"`, `"outline"` | Sets the variant of the thumbnail. | `"default"` |
|
|
38
|
+
| `backgroundColor` | `"default"`, `"subtle"`, `"strong"`, `"dark"`, `"inverse"`, `"inverse-alternative"` | Sets the background color of the thumbnail container. | `"default"` |
|
|
39
|
+
| `size` | A number between 24 and 128, in multiples of 8 | Sets the size of the thumbnail. | `48` |
|
|
40
|
+
| `aspectRatio` | `"1by1"`, `"4by3"`, `"16by9"` | Sets the aspect-ratio of the thumbnail image. | `"1by1"` |
|
|
41
|
+
| `disabled` | `true`, `false` | When true, the disabled styles are applied. | `false` |
|
|
42
|
+
| `hasPadding` | `true`, `false` | When true, extra spacing around the thumbnail container is applied. | `false` |
|
|
43
|
+
| `hideDefaultPlaceholder` | `true`, `false` | When true, hides the component default placeholder on image load failure. | `false` |
|
|
44
|
+
| `placeholder` | `{ src?: string, alt?: string }` | Overrides the component default placeholder with a custom one on image load failure. | `{}` |
|
|
34
45
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
```
|
|
46
|
+
### Slots
|
|
47
|
+
This component does not have any slots. All content is controlled through properties.
|
|
38
48
|
|
|
39
|
-
|
|
49
|
+
### CSS Variables
|
|
50
|
+
This component does not expose any CSS variables for style overrides.
|
|
40
51
|
|
|
52
|
+
### Events
|
|
41
53
|
|
|
42
|
-
|
|
54
|
+
This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.
|
|
43
55
|
|
|
44
|
-
|
|
45
|
-
```js
|
|
46
|
-
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
|
|
47
|
-
import { PieThumbnail } from '@justeattakeaway/pie-thumbnail';
|
|
56
|
+
## Usage Examples
|
|
48
57
|
|
|
49
|
-
|
|
50
|
-
// import the module which registers the component as a custom element.
|
|
51
|
-
import '@justeattakeaway/pie-thumbnail';
|
|
52
|
-
```
|
|
58
|
+
**For HTML:**
|
|
53
59
|
|
|
54
|
-
#### React
|
|
55
60
|
```js
|
|
56
|
-
//
|
|
57
|
-
|
|
58
|
-
// which wraps the web component using @lit/react
|
|
59
|
-
import { PieThumbnail } from '@justeattakeaway/pie-thumbnail/dist/react';
|
|
61
|
+
// import as module into a js file e.g. main.js
|
|
62
|
+
import '@justeattakeaway/pie-webc/components/thumbnail.js'
|
|
60
63
|
```
|
|
61
64
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
65
|
+
```html
|
|
66
|
+
<!-- pass js file into <script> tag -->
|
|
67
|
+
<pie-thumbnail src="" alt=""></pie-thumbnail>
|
|
68
|
+
<script type="module" src="/main.js"></script>
|
|
69
|
+
```
|
|
66
70
|
|
|
67
|
-
|
|
71
|
+
**For Native JS Applications, Vue, Angular, Svelte etc.:**
|
|
68
72
|
|
|
69
|
-
|
|
70
|
-
|
|
73
|
+
```js
|
|
74
|
+
// Vue templates (using Nuxt 3)
|
|
75
|
+
import '@justeattakeaway/pie-webc/components/thumbnail.js';
|
|
71
76
|
|
|
77
|
+
<pie-thumbnail src="" alt=""></pie-thumbnail>
|
|
78
|
+
```
|
|
72
79
|
|
|
73
|
-
|
|
80
|
+
**For React Applications:**
|
|
74
81
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
| - | - | - | - |
|
|
82
|
+
```jsx
|
|
83
|
+
import { PieThumbnail } from '@justeattakeaway/pie-webc/react/thumbnail.js';
|
|
78
84
|
|
|
79
|
-
|
|
85
|
+
<PieThumbnail src="" alt=""></PieThumbnail>
|
|
86
|
+
```
|
|
80
87
|
|
|
81
|
-
|
|
82
|
-
<!-- Native HTML -->
|
|
83
|
-
<pie-thumbnail></pie-thumbnail>
|
|
88
|
+
## Questions and Support
|
|
84
89
|
|
|
85
|
-
|
|
86
|
-
<PieThumbnail></PieThumbnail>
|
|
87
|
-
```
|
|
90
|
+
If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).
|
|
88
91
|
|
|
89
92
|
## Contributing
|
|
90
93
|
|
|
91
|
-
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
|
94
|
+
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
package/custom-elements.json
CHANGED
|
@@ -16,17 +16,17 @@
|
|
|
16
16
|
"kind": "variable",
|
|
17
17
|
"name": "variants",
|
|
18
18
|
"type": {
|
|
19
|
-
"text": "[\
|
|
19
|
+
"text": "[\n 'default', 'outline',\n]"
|
|
20
20
|
},
|
|
21
|
-
"default": "[\
|
|
21
|
+
"default": "[\n 'default', 'outline',\n]"
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
"kind": "variable",
|
|
25
25
|
"name": "backgroundColors",
|
|
26
26
|
"type": {
|
|
27
|
-
"text": "[\
|
|
27
|
+
"text": "[\n 'default', 'subtle', 'strong', 'dark', 'inverse', 'inverse-alternative'\n]"
|
|
28
28
|
},
|
|
29
|
-
"default": "[\
|
|
29
|
+
"default": "[\n 'default', 'subtle', 'strong', 'dark', 'inverse', 'inverse-alternative'\n]"
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
32
|
"kind": "variable",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"type": {
|
|
35
35
|
"text": "Record<typeof backgroundColors[number], string>"
|
|
36
36
|
},
|
|
37
|
-
"default": "{\
|
|
37
|
+
"default": "{\n default: 'c-thumbnail--backgroundDefault',\n subtle: 'c-thumbnail--backgroundSubtle',\n strong: 'c-thumbnail--backgroundStrong',\n dark: 'c-thumbnail--backgroundDark',\n inverse: 'c-thumbnail--backgroundInverse',\n 'inverse-alternative': 'c-thumbnail--backgroundInverseAlternative',\n}"
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
"kind": "variable",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
{
|
|
48
48
|
"kind": "variable",
|
|
49
49
|
"name": "sizes",
|
|
50
|
-
"default": "Object.freeze(Array.from(\
|
|
50
|
+
"default": "Object.freeze(Array.from(\n { length: (SIZE_MAX - SIZE_MIN) / SIZE_INCREMENT_BY + 1 },\n (_, i) => SIZE_MIN + i * SIZE_INCREMENT_BY,\n))"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"kind": "variable",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"type": {
|
|
56
56
|
"text": "DefaultProps"
|
|
57
57
|
},
|
|
58
|
-
"default": "{\
|
|
58
|
+
"default": "{\n variant: 'default',\n size: 48,\n src: '',\n alt: '',\n disabled: false,\n hasPadding: false,\n hideDefaultPlaceholder: false,\n backgroundColor: 'default',\n aspectRatio: '1by1',\n placeholder: {\n src: '',\n alt: '',\n },\n}"
|
|
59
59
|
}
|
|
60
60
|
],
|
|
61
61
|
"exports": [
|
|
@@ -215,7 +215,7 @@
|
|
|
215
215
|
"text": "string"
|
|
216
216
|
},
|
|
217
217
|
"privacy": "private",
|
|
218
|
-
"description": "Returns the appropriate image props based on the following order:\
|
|
218
|
+
"description": "Returns the appropriate image props based on the following order:\n1. If there is no error, return the provided image props.\n2. If there is an error and a custom placeholder is provided, return the placeholder props.\n3. If there is an error and no custom placeholder is provided, return the component default placeholder.\n4. Otherwise, fall back to the provided src (resulting in a broken image).",
|
|
219
219
|
"readonly": true
|
|
220
220
|
},
|
|
221
221
|
{
|
|
@@ -253,7 +253,7 @@
|
|
|
253
253
|
"kind": "method",
|
|
254
254
|
"name": "_checkImageError",
|
|
255
255
|
"privacy": "private",
|
|
256
|
-
"description": "Checks the image load status and triggers error handling if needed.\
|
|
256
|
+
"description": "Checks the image load status and triggers error handling if needed.\nThis is needed as the `onerror` event is not triggered in SSR."
|
|
257
257
|
}
|
|
258
258
|
],
|
|
259
259
|
"attributes": [
|
package/dist/index.js
CHANGED
package/package.json
CHANGED