@justeattakeaway/pie-thumbnail 0.8.0 → 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.
Files changed (3) hide show
  1. package/README.md +60 -57
  2. package/dist/index.js +1 -1
  3. package/package.json +2 -2
package/README.md CHANGED
@@ -1,91 +1,94 @@
1
- <p align="center">
2
- <img align="center" src="../../../readme_image.png" height="200" alt="">
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 align="center">
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
- # Table of Contents
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
- ## pie-thumbnail
12
+ ## Table of Contents
21
13
 
22
- `pie-thumbnail` is a Web Component built using the Lit library.
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
- This component can be easily integrated into various frontend frameworks and customized through a set of properties.
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
- ## Installation
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
- To install `pie-thumbnail` in your application, run the following on your command line:
30
+ ## Documentation
30
31
 
31
- ```bash
32
- # npm
33
- $ npm i @justeattakeaway/pie-thumbnail
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
- # yarn
36
- $ yarn add @justeattakeaway/pie-thumbnail
37
- ```
46
+ ### Slots
47
+ This component does not have any slots. All content is controlled through properties.
38
48
 
39
- For full 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).
49
+ ### CSS Variables
50
+ This component does not expose any CSS variables for style overrides.
40
51
 
52
+ ### Events
41
53
 
42
- ### Importing the component
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
- #### JavaScript
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
- // If you don't need to reference the imported object, you can simply
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
- // React
57
- // For React, you will need to import our React-specific component build
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
- > [!NOTE]
63
- > When using the React version of the component, please make sure to also
64
- > include React as a [peer dependency](#peer-dependencies) in your project.
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
- ## Peer Dependencies
71
+ **For Native JS Applications, Vue, Angular, Svelte etc.:**
68
72
 
69
- > [!IMPORTANT]
70
- > When using `pie-thumbnail`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
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
- ## Props
80
+ **For React Applications:**
74
81
 
75
- | Property | Type | Default | Description |
76
- |---|---|---|---|
77
- | - | - | - | - |
82
+ ```jsx
83
+ import { PieThumbnail } from '@justeattakeaway/pie-webc/react/thumbnail.js';
78
84
 
79
- In your markup or JSX, you can then use these to set the properties for the `pie-thumbnail` component:
85
+ <PieThumbnail src="" alt=""></PieThumbnail>
86
+ ```
80
87
 
81
- ```html
82
- <!-- Native HTML -->
83
- <pie-thumbnail></pie-thumbnail>
88
+ ## Questions and Support
84
89
 
85
- <!-- JSX -->
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/dist/index.js CHANGED
@@ -7,7 +7,7 @@ const h = class h extends _ {
7
7
  this.getAttribute("v") || this.setAttribute("v", h.v);
8
8
  }
9
9
  };
10
- h.v = "0.8.0";
10
+ h.v = "0.8.2";
11
11
  let m = h;
12
12
  const D = [
13
13
  "default",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-thumbnail",
3
3
  "description": "PIE Design System Thumbnail built using Web Components",
4
- "version": "0.8.0",
4
+ "version": "0.8.2",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -45,7 +45,7 @@
45
45
  "cem-plugin-module-file-extensions": "0.0.5"
46
46
  },
47
47
  "dependencies": {
48
- "@justeattakeaway/pie-webc-core": "0.26.0"
48
+ "@justeattakeaway/pie-webc-core": "1.0.0"
49
49
  },
50
50
  "volta": {
51
51
  "extends": "../../../package.json"