feat(pie-lottie-player): DSW-2365 add pie-lottie-player

nextjs-app-v13/package.json

@@ -16,7 +16,7 @@
     "@justeattakeaway/pie-cookie-banner": "0.26.3",
     "@justeattakeaway/pie-css": "0.12.1",
     "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.29",
+    "@justeattakeaway/pie-webc": "0.5.32",
     "@lit-labs/nextjs": "0.1.4",
     "@lit/react": "1.0.2",
     "next": "13.5.6",

nextjs-app-v13/src/pages/components/lottie-player.tsx

@@ -0,0 +1,32 @@
+import NavigationLayout from "@/layout/navigation";
+import { PieLottiePlayer } from '@justeattakeaway/pie-webc/react/lottie-player.js';
+import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';
+import { useState } from "react";
+import { isServer } from 'lit';
+
+const animations = [
+    "/animations/preparing.json",
+    "/animations/courier.json",
+    "/animations/order-confirmed.json",
+]
+
+export default function Page() {
+    const [animationIndex, setAnimationIndex] = useState(0);
+
+    function handleLoadAnimationClick() {
+        setAnimationIndex(animationIndex + 1);
+    }
+
+    const animationPath = animations[animationIndex% animations.length];
+
+    const isRunningInPercy = isServer ? false : document.location.search.indexOf('PERCY=true') > -1;
+
+    return (
+        <NavigationLayout title="Lottie Player">
+            <div>
+                <PieButton size="xsmall" onClick={handleLoadAnimationClick}>load another animation</PieButton>
+            </div>
+            <PieLottiePlayer animationSrc={animationPath} autoPlayDisabled={isRunningInPercy} />
+        </NavigationLayout>
+    );
+}

nextjs-app-v13/src/pages/index.tsx

@@ -25,6 +25,7 @@ export default function Home() {
       <li><PieLink onClick={() => router.push('/components/icon')} tag="button">Icon</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/icon-button')} tag="button">Icon Button</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/link')} tag="button">Link</PieLink></li>
+      <li><PieLink onClick={() => router.push('/components/lottie-player')} tag="button">Lottie Player</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/modal')} tag="button">Modal</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/notification')} tag="button">Notification</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/spinner')} tag="button">Spinner</PieLink></li>

nextjs-app-v13/test/visual/nextjs.spec.js

@@ -16,6 +16,7 @@ describe('NextJS Aperture App', () => {
         { url: '/components/icon.html', name: 'Icon' },
         { url: '/components/icon-button.html', name: 'Icon Button' },
         { url: '/components/link.html', name: 'Link' },
+        { url: '/components/lottie-player.html', name: 'Lottie Player', pauseBeforeScreenshot: true },
         { url: '/components/modal.html', name: 'Modal' },
         { url: '/components/notification.html', name: 'Notification' },
         { url: '/components/spinner.html', name: 'Spinner' },
@@ -27,8 +28,11 @@ describe('NextJS Aperture App', () => {
 
     pages.forEach((page) => {
         it(`should navigate to the ${page.name} page.`, async () => {
-            await browser.url(page.url);
+            await browser.url(`${page.url}?PERCY=true`);
             await waitForPageTitleToBe(page.name);
+            // Some components might require extra time to mount and load its dependencies.
+            // Delaying the screenshot helps to avoid false negatives in diffs.
+            if (page.pauseBeforeScreenshot) await browser.pause(5000);
             await percyScreenshot(page.name);
         });
     });

nextjs-app-v14/package.json

@@ -17,7 +17,7 @@
     "@justeattakeaway/pie-cookie-banner": "0.26.3",
     "@justeattakeaway/pie-css": "0.12.1",
     "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.29",
+    "@justeattakeaway/pie-webc": "0.5.32",
     "@lit-labs/nextjs": "0.2.0",
     "@lit/react": "1.0.5",
     "next": "14.2.3",

nextjs-app-v14/src/app/components/home-page.tsx

@@ -27,6 +27,7 @@ export default function HomePage() {
       <li><PieLink onClick={() => router.push('/components/icon')} tag="button">Icon</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/icon-button')} tag="button">Icon Button</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/link')} tag="button">Link</PieLink></li>
+      <li><PieLink onClick={() => router.push('/components/lottie-player')} tag="button">Lottie Player</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/modal')} tag="button">Modal</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/notification')} tag="button">Notification</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/spinner')} tag="button">Spinner</PieLink></li>

nextjs-app-v14/src/app/components/lottie-player/lottie-player.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { PieLottiePlayer } from '@justeattakeaway/pie-webc/react/lottie-player.js';
+import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';
+import { useState } from "react";
+import { isServer } from 'lit';
+
+const animations = [
+    "/animations/preparing.json",
+    "/animations/courier.json",
+    "/animations/order-confirmed.json",
+]
+
+export default function Page() {
+    const [animationIndex, setAnimationIndex] = useState(0);
+
+    function handleLoadAnimationClick() {
+        setAnimationIndex(animationIndex + 1);
+    }
+
+    const animationPath = animations[animationIndex% animations.length];
+
+    const isRunningInPercy = isServer ? false : document.location.search.indexOf('PERCY=true') > -1;
+
+    return (
+        <>
+            <div>
+                <PieButton size="xsmall" onClick={handleLoadAnimationClick}>load another animation</PieButton>
+            </div>
+            <PieLottiePlayer animationSrc={animationPath} autoPlayDisabled={isRunningInPercy} />
+        </>
+    );
+}

nextjs-app-v14/src/app/components/lottie-player/page.tsx

@@ -0,0 +1,16 @@
+import NavigationLayout from "@/app/layout/navigation";
+import  LottiePlayer  from './lottie-player';
+import { Metadata } from 'next'
+
+const title = 'Lottie Player'
+export const metadata: Metadata = {
+    title,
+}
+
+export default function Page() {
+    return (
+        <NavigationLayout title={title}>
+            <LottiePlayer/>
+        </NavigationLayout>
+    )
+}

nextjs-app-v14/test/visual/nextjs.spec.js

@@ -16,6 +16,7 @@ describe('NextJS Aperture App', () => {
         { url: '/components/icon', name: 'Icon' },
         { url: '/components/icon-button', name: 'Icon Button' },
         { url: '/components/link', name: 'Link' },
+        { url: '/components/lottie-player', name: 'Lottie Player', pauseBeforeScreenshot: true },
         { url: '/components/modal', name: 'Modal' },
         { url: '/components/notification', name: 'Notification' },
         { url: '/components/spinner', name: 'Spinner' },
@@ -27,8 +28,11 @@ describe('NextJS Aperture App', () => {
 
     pages.forEach((page) => {
         it(`should navigate to the ${page.name} page.`, async () => {
-            await browser.url(page.url);
+            await browser.url(`${page.url}?PERCY=true`);
             await waitForPageTitleToBe(page.name);
+            // Some components might require extra time to mount and load its dependencies.
+            // Delaying the screenshot helps to avoid false negatives in diffs.
+            if (page.pauseBeforeScreenshot) await browser.pause(5000);
             await percyScreenshot(page.name);
         });
     });

nuxt-app/package.json

@@ -22,7 +22,7 @@
     "@justeattakeaway/pie-cookie-banner": "0.26.3",
     "@justeattakeaway/pie-css": "0.12.1",
     "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.29",
+    "@justeattakeaway/pie-webc": "0.5.32",
     "just-kebab-case": "4.2.0",
     "nuxt-ssr-lit": "1.6.16"
   },

nuxt-app/pages/components/lottie-player.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <pie-button size="xsmall" @click="handleLoadAnimationClick">
+      load another animation
+    </pie-button>
+    <pie-lottie-player 
+      :animationSrc="animationPath"
+      :autoPlayDisabled="autoPlayDisabled"
+    ></pie-lottie-player>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { definePageMeta } from '#imports';
+import '@justeattakeaway/pie-webc/components/button.js';
+import '@justeattakeaway/pie-webc/components/lottie-player.js';
+
+const animations = [
+    "/animations/preparing.json",
+    "/animations/courier.json",
+    "/animations/order-confirmed.json",
+]
+
+definePageMeta({
+    title: 'PIE Lottie Player',
+});
+
+let animationIndex = ref(0);
+let animationPath = ref(animations[animationIndex.value % animations.length]);
+const autoPlayDisabled = ref(false);
+
+function handleLoadAnimationClick () {
+  animationIndex.value++;
+  animationPath.value = animations[animationIndex.value % animations.length];
+}
+
+onMounted(() => {
+  const isRunningInPercy = document && document?.location?.search.indexOf('PERCY=true') > -1
+  autoPlayDisabled.value = isRunningInPercy ? true : undefined;
+});
+
+</script>

nuxt-app/pages/index.vue

@@ -16,6 +16,7 @@
       <li><pie-link href="/components/form-label">Form Label</pie-link></li>
       <li><pie-link href="/components/icon">Icon</pie-link></li>
       <li><pie-link href="/components/icon-button">Icon Button</pie-link></li>
+      <li><pie-link href="/components/lottie-player">Lottie Player</pie-link></li>
       <li><pie-link href="/components/link">Link</pie-link></li>
       <li><pie-link href="/components/modal">Modal</pie-link></li>
       <li><pie-link href="/components/notification">Notification</pie-link></li>

nuxt-app/test/visual/nuxt.spec.js

@@ -16,6 +16,7 @@ describe('Nuxt Aperture App', () => {
         { url: '/components/icon.html', name: 'Icon' },
         { url: '/components/icon-button.html', name: 'Icon Button' },
         { url: '/components/link.html', name: 'Link' },
+        { url: '/components/lottie-player.html', name: 'Lottie Player', pauseBeforeScreenshot: true },
         { url: '/components/modal.html', name: 'Modal' },
         { url: '/components/notification.html', name: 'Notification' },
         { url: '/components/spinner.html', name: 'Spinner' },
@@ -27,8 +28,11 @@ describe('Nuxt Aperture App', () => {
 
     pages.forEach((page) => {
         it(`should navigate to the ${page.name} page.`, async () => {
-            await browser.url(page.url);
+            await browser.url(`${page.url}?PERCY=true`);
             await waitForPageTitleToBe(page.name);
+            // Some components might require extra time to mount and load its dependencies.
+            // Delaying the screenshot helps to avoid false negatives in diffs.
+            if (page.pauseBeforeScreenshot) await browser.pause(5000);
             await percyScreenshot(page.name);
         });
     });

test/ssr/ssr.spec.ts

@@ -21,6 +21,7 @@ const components = [
     'icon',
     'icon-button',
     'link',
+    'lottie-player',
     'modal',
     'spinner',
     'switch',

vanilla-app/components/lottie-player.html

@@ -0,0 +1,5 @@
+<load
+    src="partials/page.html"
+    title="Lottie Player"
+    module="../js/lottie-player.js"
+/>

vanilla-app/js/index.js

@@ -19,6 +19,7 @@ document.querySelector('#navigation').innerHTML = `
         <li><pie-link href="/components/icon.html">Icon</pie-link></li>
         <li><pie-link href="/components/icon-button.html">Icon Button</pie-link></li>
         <li><pie-link href="/components/link.html">Link</pie-link></li>
+        <li><pie-link href="/components/lottie-player.html">Lottie Player</pie-link></li>
         <li><pie-link href="/components/modal.html">Modal</pie-link></li>
         <li><pie-link href="/components/notification.html">Notification</pie-link></li>
         <li><pie-link href="/components/spinner.html">Spinner</pie-link></li>

vanilla-app/js/lottie-player.js

@@ -0,0 +1,31 @@
+import '@justeattakeaway/pie-webc/components/lottie-player.js';
+import '@justeattakeaway/pie-webc/components/button.js';
+import './shared.js';
+import './utils/navigation.js';
+
+let animationIndex = 0;
+const animations = [
+    "/animations/preparing.json",
+    "/animations/courier.json",
+    "/animations/order-confirmed.json",
+]
+
+function handleLoadAnimationClick() {
+    animationIndex++;
+    const animationPath = animations[animationIndex% animations.length];
+    document.querySelector('pie-lottie-player')
+        .animationSrc = animationPath;
+}
+
+const isRunningInPercy = document.location.search.indexOf('PERCY=true') > -1;
+const autoplay = isRunningInPercy ? 'autoPlayDisabled' : '';
+
+// Set initial HTML structure
+document.querySelector('#app').innerHTML = `
+    <div>
+        <pie-button class="load" size="xsmall">load another animation</pie-button>
+    </div>
+    <pie-lottie-player animationSrc="${animations[animationIndex% animations.length]}" ${autoplay}></pie-lottie-player>
+`;
+
+document.querySelector('.load').addEventListener('click', handleLoadAnimationClick);

vanilla-app/package.json

@@ -21,7 +21,7 @@
     "@justeattakeaway/pie-cookie-banner": "0.26.3",
     "@justeattakeaway/pie-css": "0.12.1",
     "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.29"
+    "@justeattakeaway/pie-webc": "0.5.32"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"

vanilla-app/test/visual/vanilla.spec.js

@@ -16,6 +16,7 @@ describe('Vanilla Aperture App', () => {
         { url: '/components/icon.html', name: 'Icon' },
         { url: '/components/icon-button.html', name: 'Icon Button' },
         { url: '/components/link.html', name: 'Link' },
+        { url: '/components/lottie-player.html', name: 'Lottie Player', pauseBeforeScreenshot: true },
         { url: '/components/modal.html', name: 'Modal' },
         { url: '/components/notification.html', name: 'Notification' },
         { url: '/components/spinner.html', name: 'Spinner' },
@@ -27,8 +28,11 @@ describe('Vanilla Aperture App', () => {
 
     pages.forEach((page) => {
         it(`should navigate to the ${page.name} page.`, async () => {
-            await browser.url(page.url);
+            await browser.url(`${page.url}?PERCY=true`);
             await waitForPageTitleToBe(page.name);
+            // Some components might require extra time to mount and load its dependencies.
+            // Delaying the screenshot helps to avoid false negatives in diffs.
+            if (page.pauseBeforeScreenshot) await browser.pause(5000);
             await percyScreenshot(page.name);
         });
     });