@justeattakeaway/pie-lottie-player 0.2.10 → 0.3.0

package/README.md

@@ -32,14 +32,16 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 
 ### Properties
 
-| Prop               | Options                          | Description                                                                                                                             | Default     |
-|--------------------|----------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|-------------|
-| `animationSrc`     | —                                | Lottie animation JSON file URL or relative path. `animationSrc` and `animationData` are mutually exclusive.                           | `-`         |
-| `animationData`    | —                                | Object with Lottie animation data. `animationSrc` and `animationData` are mutually exclusive.                                           | `-`         |
-| `loopDisabled`     | `true`, `false`                  | By default, animations loop. Setting this prop to `true` will prevent that behavior.                                                   | `false`     |
-| `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`     |
-| `speed`            | —                                | Determines the animation playback speed. `1` is normal speed, `2` is twice as fast, etc.                                                | `1`         |
-| `direction`        | `"forward"`, `"reverse"`         | Sets the animation playback direction.                                                                                                 | `"forward"` |
+| Prop | Options | Description | Default |
+| --- | --- | --- | --- |
+| `animationSrc` | — | Lottie animation JSON file URL or relative path. `animationSrc` and `animationData` are mutually exclusive. | `-` |
+| `animationData` | — | Object with Lottie animation data. `animationSrc` and `animationData` are mutually exclusive. | `-` |
+| `loopDisabled` | `true`, `false` | By default, animations loop. Setting this prop to `true` will prevent that behavior. | `false` |
+| `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` |
+| `speed` | — | Determines the animation playback speed. `1` is normal speed, `2` is twice as fast, etc. | `1` |
+| `direction` | `"forward"`, `"reverse"` | Sets the animation playback direction. | `"forward"` |
+
+> **Note:** If you want to change the height or width of the animation, you should pass a class that sets the desired values as the animation will scale to its container size automatically.
 
 ### Slots
 This component does not have any slots. All content is controlled through properties.

package/dist/index.js

@@ -6,18 +6,18 @@ const d = class d extends m {
     this.getAttribute("v") || this.setAttribute("v", d.v);
   }
 };
-d.v = "0.2.10";
+d.v = "0.3.0";
 let p = d;
-const v = ["forward", "reverse"], l = {
+const A = ["forward", "reverse"], l = {
   loopDisabled: !1,
   autoPlayDisabled: !1,
   speed: 1,
   direction: "forward"
-};
-var b = Object.defineProperty, P = Object.getOwnPropertyDescriptor, s = (t, e, r, n) => {
-  for (var a = n > 1 ? void 0 : n ? P(e, r) : e, c = t.length - 1, h; c >= 0; c--)
+}, b = ":host{display:block}.c-lottiePlayer{width:100%;height:100%}";
+var P = Object.defineProperty, I = Object.getOwnPropertyDescriptor, s = (t, e, r, n) => {
+  for (var a = n > 1 ? void 0 : n ? I(e, r) : e, c = t.length - 1, h; c >= 0; c--)
     (h = t[c]) && (a = (n ? h(e, r, a) : h(a)) || a);
-  return n && a && b(e, r, a), a;
+  return n && a && P(e, r, a), a;
 };
 let i = class extends p {
   constructor() {
@@ -112,11 +112,10 @@ let i = class extends p {
     this._animationInstance && this._animationInstance.stop();
   }
   render() {
-    return y`<div aria-hidden="true" data-test-id="pie-lottie-player"></div>`;
+    return y`<div class="c-lottiePlayer" aria-hidden="true" data-test-id="pie-lottie-player"></div>`;
   }
-  // Kept as empty to ensure it will be present during SSR testing
 };
-i.styles = u("");
+i.styles = u(b);
 s([
   f("div")
 ], i.prototype, "_hostElement", 2);
@@ -144,5 +143,5 @@ i = s([
 export {
   i as PieLottiePlayer,
   l as defaultProps,
-  v as directions
+  A as directions
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-lottie-player",
   "description": "PIE Design System Lottie Player built using Web Components",
-  "version": "0.2.10",
+  "version": "0.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -41,12 +41,12 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.24.0",
+    "@justeattakeaway/pie-css": "0.25.0",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "4.0.0",
+    "@justeattakeaway/pie-webc-core": "5.0.0",
     "lottie-web": "5.12.2"
   },
   "volta": {

package/src/index.ts

@@ -197,11 +197,11 @@ export class PieLottiePlayer extends PieElement implements LottiePlayerProps {
     }
 
     render () {
-        return html`<div aria-hidden="true" data-test-id="pie-lottie-player"></div>`;
+        return html`<div class="c-lottiePlayer" aria-hidden="true" data-test-id="pie-lottie-player"></div>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite
-    static styles = unsafeCSS(''); // Kept as empty to ensure it will be present during SSR testing
+    static styles = unsafeCSS(styles);
 }
 
 declare global {

package/src/lottie-player.scss

@@ -1,3 +1,8 @@
 :host {
     display: block;
 }
+
+.c-lottiePlayer {
+    width: 100%;
+    height: 100%;
+}