@justeattakeaway/pie-lottie-player 0.2.1 → 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.
- package/README.md +56 -76
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,117 +1,97 @@
|
|
|
1
|
-
|
|
2
|
-
<img align="center" src="../../../readme_image.png" height="200" alt="">
|
|
3
|
-
</p>
|
|
1
|
+
# @justeattakeaway/pie-lottie-player
|
|
4
2
|
|
|
5
|
-
|
|
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
|
-
|
|
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
|
-
|
|
12
|
+
## Table of Contents
|
|
24
13
|
|
|
25
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
36
|
-
$ yarn add @justeattakeaway/pie-lottie-player
|
|
37
|
-
```
|
|
31
|
+
## Documentation
|
|
38
32
|
|
|
39
|
-
|
|
33
|
+
### Properties
|
|
40
34
|
|
|
41
|
-
|
|
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
|
-
|
|
44
|
+
### Slots
|
|
45
|
+
This component does not have any slots. All content is controlled through properties.
|
|
44
46
|
|
|
45
|
-
|
|
46
|
-
|
|
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
|
-
|
|
50
|
-
|
|
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
|
-
|
|
53
|
+
## Usage Examples
|
|
54
|
+
|
|
55
|
+
**For HTML:**
|
|
55
56
|
|
|
56
57
|
```js
|
|
57
|
-
//
|
|
58
|
-
|
|
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
|
-
|
|
64
|
-
|
|
65
|
-
|
|
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
|
-
|
|
68
|
+
**For Native JS Applications, Vue, Angular, Svelte, etc.:**
|
|
84
69
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
## Props
|
|
70
|
+
```js
|
|
71
|
+
// Vue templates (using Nuxt 3)
|
|
72
|
+
import '@justeattakeaway/pie-webc/components/pie-lottie-player.js';
|
|
89
73
|
|
|
90
|
-
|
|
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
|
-
|
|
77
|
+
**For React Applications:**
|
|
100
78
|
|
|
101
|
-
```
|
|
102
|
-
|
|
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
|
-
##
|
|
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/dist/index.js
CHANGED
package/package.json
CHANGED