@justeattakeaway/pie-lottie-player 0.2.0 → 0.2.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 (4) hide show
  1. package/README.md +56 -76
  2. package/custom-elements.json +1 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -1,117 +1,97 @@
1
- <p align="center">
2
- <img align="center" src="../../../readme_image.png" height="200" alt="">
3
- </p>
1
+ # @justeattakeaway/pie-lottie-player
4
2
 
5
- <p align="center">
3
+ [Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-lottie-player) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-lottie-player)
4
+ <p>
6
5
  <a href="https://www.npmjs.com/@justeattakeaway/pie-lottie-player">
7
6
  <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-lottie-player.svg">
8
7
  </a>
9
8
  </p>
10
9
 
11
- # Table of Contents
12
-
13
- 1. [Introduction](#pie-lottie-player)
14
- 2. [Installation](#installation)
15
- 3. [Importing the component](#importing-the-component)
16
- 4. [Peer Dependencies](#peer-dependencies)
17
- 5. [Props](#props)
18
- 5. [Acessibility](#acessibility)
19
- 6. [Contributing](#contributing)
20
-
21
- ## pie-lottie-player
10
+ `@justeattakeaway/pie-lottie-player` is a Web Component built using the Lit library. It offers a simple and accessible wrapper component for the animation library, [Lottie](https://github.com/airbnb/lottie-web), for web applications.
22
11
 
23
- `pie-lottie-player` is a Web Component built using the Lit library.
12
+ ## Table of Contents
24
13
 
25
- This component can be easily integrated into various frontend frameworks and customized through a set of properties.
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
+ - [Accessibility](#accessibility)
22
+ - [Questions and Support](#questions-and-support)
23
+ - [Contributing](#contributing)
26
24
 
27
25
  ## Installation
28
26
 
29
- To install `pie-lottie-player` in your application, run the following on your command line:
27
+ > 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.
30
28
 
31
- ```bash
32
- # npm
33
- $ npm i @justeattakeaway/pie-lottie-player
29
+ 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.
34
30
 
35
- # yarn
36
- $ yarn add @justeattakeaway/pie-lottie-player
37
- ```
31
+ ## Documentation
38
32
 
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).
33
+ ### Properties
40
34
 
41
- ### Importing the component
35
+ | Prop | Options | Description | Default |
36
+ |--------------------|----------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|-------------|
37
+ | `animationSrc` | — | Lottie animation JSON file URL or relative path. `animationSrc` and `animationData` are mutually exclusive. | `-` |
38
+ | `animationData` | — | Object with Lottie animation data. `animationSrc` and `animationData` are mutually exclusive. | `-` |
39
+ | `loopDisabled` | `true`, `false` | By default, animations loop. Setting this prop to `true` will prevent that behavior. | `false` |
40
+ | `autoPlayDisabled` | `true`, `false` | By default, animations start playing as soon as their data is available. Setting this prop to `true` will prevent that behavior. | `false` |
41
+ | `speed` | — | Determines the animation playback speed. `1` is normal speed, `2` is twice as fast, etc. | `1` |
42
+ | `direction` | `"forward"`, `"reverse"` | Sets the animation playback direction. | `"forward"` |
42
43
 
43
- #### JavaScript
44
+ ### Slots
45
+ This component does not have any slots. All content is controlled through properties.
44
46
 
45
- ```js
46
- // Default – for Native JS Applications, Vue, Angular, Svelte, etc.
47
- import { PieLottiePlayer } from '@justeattakeaway/pie-lottie-player';
47
+ ### CSS Variables
48
+ This component does not expose any CSS variables for style overrides.
48
49
 
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-lottie-player';
52
- ```
50
+ ### Events
51
+ 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.
53
52
 
54
- #### React
53
+ ## Usage Examples
54
+
55
+ **For HTML:**
55
56
 
56
57
  ```js
57
- // React
58
- // For React, you will need to import our React-specific component build
59
- // which wraps the web component using ​@lit/react
60
- import { PieLottiePlayer } from '@justeattakeaway/pie-lottie-player/dist/react';
58
+ // import as module into a js file e.g. main.js
59
+ import '@justeattakeaway/pie-webc/components/pie-lottie-player.js';
61
60
  ```
62
61
 
63
- > [!NOTE]
64
- > When using the React version of the component, please make sure to also
65
- > include React as a [peer dependency](#peer-dependencies) in your project.
66
-
67
- #### Nuxt and SSR
68
-
69
- When adding this component to a Nuxt application in combination with SSR settings, it might happen to receive the error "500 customElements.get(...) is not a constructor" during the preview of the built application.
70
-
71
- That is likely due [a known issue](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/137) with the module that enables using Lit components in Nuxt with SSR, `nuxt-ssr-lit`.
72
-
73
- To solve the issue, update or add the `nitro.moduleSideEffects` array in `nuxt.config.ts`:
74
-
75
- ```
76
- nitro: {
77
- moduleSideEffects: [
78
- '@justeattakeaway/pie-lottie-player',
79
- ],
80
- },
62
+ ```html
63
+ <!-- pass js file into <script> tag -->
64
+ <pie-lottie-player animationSrc="./animation-file.json"></pie-lottie-player>
65
+ <script type="module" src="/main.js"></script>
81
66
  ```
82
67
 
83
- ## Peer Dependencies
68
+ **For Native JS Applications, Vue, Angular, Svelte, etc.:**
84
69
 
85
- > [!IMPORTANT]
86
- > When using `pie-lottie-player`, 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.
87
-
88
- ## Props
70
+ ```js
71
+ // Vue templates (using Nuxt 3)
72
+ import '@justeattakeaway/pie-webc/components/pie-lottie-player.js';
89
73
 
90
- | Property | Type | Default | Description |
91
- | ---------------- | --------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- |
92
- | animationSrc | `String` | - | Lottie animation JSON file URL or relative path. animationSrc and animationData are mutually exclusive. |
93
- | animationData | `Object` | - | Object with Lottie animation data. animationSrc and animationData are mutually exclusive. |
94
- | loopDisabled | `Boolean` | false | By the default animations loop, setting this prop as true will prevent such behaviour. |
95
- | autoPlayDisabled | `Boolean` | false | By default animations start playing as soon as its data is available, setting this prop as true will prevent such behaviour. |
96
- | speed | `Number` | 1 | Determines the animation reproduction speed. 1 is the regular speed, 2 is twice as fast. |
97
- | direction | `String` | forward | Sets the animation reproduction direction. |
74
+ <pie-lottie-player animationSrc="./animation-file.json"></pie-lottie-player>
75
+ ```
98
76
 
99
- In your markup or JSX, you can then use these to set the properties for the `pie-lottie-player` component:
77
+ **For React Applications:**
100
78
 
101
- ```html
102
- <!-- Native HTML -->
103
- <pie-lottie-player animationSrc="./animation-file.json"></pie-lottie-player>
79
+ ```jsx
80
+ import { PieLottiePlayer } from '@justeattakeaway/pie-webc/react/lottie-player.js';
104
81
 
105
- <!-- JSX -->
106
82
  <PieLottiePlayer animationSrc="./animation-file.json"></PieLottiePlayer>
107
83
  ```
108
84
 
109
- ## Acessibility
85
+ ## Accessibility
110
86
 
111
87
  Currently the component is always hidden from screen readers because animations should only be decorative and supplementary. Any important meaning and context should be presented alongside the animation as text.
112
88
 
113
89
  For the users with the "Reduce motion" setting enabled, the animation will be paused on the first frame.
114
90
 
91
+ ## Questions and Support
92
+
93
+ 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).
94
+
115
95
  ## Contributing
116
96
 
117
97
  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
@@ -26,7 +26,7 @@
26
26
  "type": {
27
27
  "text": "DefaultProps"
28
28
  },
29
- "default": "{\n loopDisabled: false,\n autoPlayDisabled: false,\n speed: 1,\n direction: 'forward',\n}"
29
+ "default": "{\r\n loopDisabled: false,\r\n autoPlayDisabled: false,\r\n speed: 1,\r\n direction: 'forward',\r\n}"
30
30
  }
31
31
  ],
32
32
  "exports": [
package/dist/index.js CHANGED
@@ -6,7 +6,7 @@ const d = class d extends m {
6
6
  this.getAttribute("v") || this.setAttribute("v", d.v);
7
7
  }
8
8
  };
9
- d.v = "0.2.0";
9
+ d.v = "0.2.2";
10
10
  let p = d;
11
11
  const v = ["forward", "reverse"], l = {
12
12
  loopDisabled: !1,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-lottie-player",
3
3
  "description": "PIE Design System Lottie Player built using Web Components",
4
- "version": "0.2.0",
4
+ "version": "0.2.2",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -37,7 +37,7 @@
37
37
  "cem-plugin-module-file-extensions": "0.0.5"
38
38
  },
39
39
  "dependencies": {
40
- "@justeattakeaway/pie-webc-core": "0.26.0",
40
+ "@justeattakeaway/pie-webc-core": "1.0.0",
41
41
  "lottie-web": "5.12.2"
42
42
  },
43
43
  "volta": {