Merge branch 'main' into DSW-000-component-status

justeattakeaway · Dec 17, 2024 · 46a6871 · 46a6871
2 parents 43846ab + 0cc6853
commit 46a6871
Show file tree

Hide file tree

Showing 30 changed files with 755 additions and 69 deletions.
diff --git a/apps/examples/wc-angular12/CHANGELOG.md b/apps/examples/wc-angular12/CHANGELOG.md
@@ -1,5 +1,12 @@
 # wc-angular12
 
+## 0.5.45
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @justeattakeaway/pie-webc@0.5.59
+
 ## 0.5.44
 
 ### Patch Changes

diff --git a/apps/examples/wc-angular12/package.json b/apps/examples/wc-angular12/package.json
@@ -1,6 +1,6 @@
 {
     "name": "wc-angular12",
-    "version": "0.5.44",
+    "version": "0.5.45",
     "private": true,
     "scripts": {
         "ng": "ng",
@@ -18,7 +18,7 @@
         "@angular/platform-browser-dynamic": "15.2.0",
         "@angular/router": "15.2.0",
         "@justeattakeaway/pie-css": "0.13.1",
-        "@justeattakeaway/pie-webc": "0.5.58",
+        "@justeattakeaway/pie-webc": "0.5.59",
         "rxjs": "7.8.0",
         "tslib": "2.3.0",
         "zone.js": "0.12.0"

diff --git a/apps/examples/wc-nuxt2/CHANGELOG.md b/apps/examples/wc-nuxt2/CHANGELOG.md
@@ -1,5 +1,12 @@
 # wc-nuxt2
 
+## 0.7.46
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @justeattakeaway/pie-webc@0.5.59
+
 ## 0.7.45
 
 ### Patch Changes

diff --git a/apps/examples/wc-nuxt2/package.json b/apps/examples/wc-nuxt2/package.json
@@ -1,7 +1,7 @@
 {
   "name": "wc-nuxt2",
   "author": "Just Eat Takeaway.com - Design System Team",
-  "version": "0.7.45",
+  "version": "0.7.46",
   "private": true,
   "scripts": {
     "dev": "nuxt",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "0.13.1",
-    "@justeattakeaway/pie-webc": "0.5.58",
+    "@justeattakeaway/pie-webc": "0.5.59",
     "core-js": "3.30.0",
     "nuxt": "2.17.0",
     "vue": "2.7.16",

diff --git a/apps/examples/wc-react17/CHANGELOG.md b/apps/examples/wc-react17/CHANGELOG.md
@@ -1,5 +1,12 @@
 # wc-react17
 
+## 0.5.44
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @justeattakeaway/pie-webc@0.5.59
+
 ## 0.5.43
 
 ### Patch Changes

diff --git a/apps/examples/wc-react17/package.json b/apps/examples/wc-react17/package.json
@@ -1,7 +1,7 @@
 {
   "name": "wc-react17",
   "private": true,
-  "version": "0.5.43",
+  "version": "0.5.44",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "0.13.1",
-    "@justeattakeaway/pie-webc": "0.5.58",
+    "@justeattakeaway/pie-webc": "0.5.59",
     "@lit/react": "1.0.5",
     "react": "17.0.2",
     "react-dom": "17.0.2"

diff --git a/apps/examples/wc-react18/CHANGELOG.md b/apps/examples/wc-react18/CHANGELOG.md
@@ -1,5 +1,12 @@
 # wc-react18
 
+## 0.6.44
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @justeattakeaway/pie-webc@0.5.59
+
 ## 0.6.43
 
 ### Patch Changes

diff --git a/apps/examples/wc-react18/package.json b/apps/examples/wc-react18/package.json
@@ -1,7 +1,7 @@
 {
   "name": "wc-react18",
   "private": true,
-  "version": "0.6.43",
+  "version": "0.6.44",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "0.13.1",
-    "@justeattakeaway/pie-webc": "0.5.58",
+    "@justeattakeaway/pie-webc": "0.5.59",
     "@lit/react": "1.0.5",
     "react": "18.3.1",
     "react-dom": "18.3.1"

diff --git a/apps/examples/wc-vue3/CHANGELOG.md b/apps/examples/wc-vue3/CHANGELOG.md
@@ -1,5 +1,12 @@
 # wc-vue3
 
+## 0.5.46
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @justeattakeaway/pie-webc@0.5.59
+
 ## 0.5.45
 
 ### Patch Changes

diff --git a/apps/examples/wc-vue3/package.json b/apps/examples/wc-vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wc-vue3",
-  "version": "0.5.45",
+  "version": "0.5.46",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "0.13.1",
-    "@justeattakeaway/pie-webc": "0.5.58",
+    "@justeattakeaway/pie-webc": "0.5.59",
     "@vitejs/plugin-vue": "4.0.0",
     "vite": "5.3.6",
     "vue": "3.2.47"

diff --git a/apps/pie-storybook/CHANGELOG.md b/apps/pie-storybook/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.16.4
+
+### Patch Changes
+
+- Updated dependencies [[`c926464`](https://github.com/justeattakeaway/pie/commit/c926464254ff33fdd116435151194bc9e2ed581c), [`c926464`](https://github.com/justeattakeaway/pie/commit/c926464254ff33fdd116435151194bc9e2ed581c)]:
+  - @justeattakeaway/pie-radio@0.6.0
+  - @justeattakeaway/pie-radio-group@0.4.0
+
 ## 1.16.3
 
 ### Patch Changes

diff --git a/apps/pie-storybook/package.json b/apps/pie-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pie-storybook",
-  "version": "1.16.3",
+  "version": "1.16.4",
   "private": true,
   "description": "Storybook for PIE Design System components",
   "scripts": {
@@ -32,8 +32,8 @@
     "@justeattakeaway/pie-lottie-player": "0.0.5",
     "@justeattakeaway/pie-modal": "1.0.2",
     "@justeattakeaway/pie-notification": "0.12.7",
-    "@justeattakeaway/pie-radio": "0.5.0",
-    "@justeattakeaway/pie-radio-group": "0.3.1",
+    "@justeattakeaway/pie-radio": "0.6.0",
+    "@justeattakeaway/pie-radio-group": "0.4.0",
     "@justeattakeaway/pie-spinner": "1.0.0",
     "@justeattakeaway/pie-switch": "1.0.1",
     "@justeattakeaway/pie-tag": "0.12.0",

diff --git a/apps/pie-storybook/stories/testing/pie-cookie-banner.test.stories.ts b/apps/pie-storybook/stories/testing/pie-cookie-banner.test.stories.ts
@@ -17,9 +17,9 @@ const defaultArgs: CookieBannerProps = {
     cookieTechnologiesLink: `${Language.ENGLISH}/technologies`,
     cookieStatementLink: `${Language.ENGLISH}/cookiestatement`,
     defaultPreferences: {
-        functional: true,
-        personalized: true,
-        analytical: true,
+        functional: false,
+        personalized: false,
+        analytical: false,
     },
 };
 
@@ -92,24 +92,4 @@ const BaseStoryTemplate = (props: CookieBannerProps) => {
             @pie-cookie-banner-prefs-saved="${prefsSavedAction}"></pie-cookie-banner>`;
 };
 
-/**
- * Creates a 'page' of scrollable HTML. Useful for testing scroll behaviours in a Story.
- */
-const createScrollablePageHTML = () => {
-    const items = [];
-    for (let i = 0; i < 200; i++) {
-        items.push(html`<li>Item ${i}</li>`);
-    }
-
-    return html`
-        <h1>Test Page</h1>
-        <p>Test copy</p>
-        <ul>${items}</ul>`;
-};
-
-const ScrollablePageStoryTemplate = (props: CookieBannerProps) => html`
-    ${BaseStoryTemplate(props)}
-    ${createScrollablePageHTML()}`;
-
 export const Default = createStory<CookieBannerProps>(BaseStoryTemplate, defaultArgs)();
-export const ScrollablePage = createStory<CookieBannerProps>(ScrollablePageStoryTemplate, defaultArgs)();
diff --git a/apps/pie-storybook/stories/testing/pie-radio-group.test.stories.ts b/apps/pie-storybook/stories/testing/pie-radio-group.test.stories.ts
@@ -0,0 +1,72 @@
+import { html, nothing } from 'lit';
+import { type Meta } from '@storybook/web-components';
+
+import '@justeattakeaway/pie-radio-group';
+import {
+    defaultProps,
+    type RadioGroupProps as RadioGroupPropsBase,
+} from '@justeattakeaway/pie-radio-group';
+import '@justeattakeaway/pie-link';
+import '@justeattakeaway/pie-radio';
+import '@justeattakeaway/pie-form-label';
+import '@justeattakeaway/pie-button';
+
+import { createStory } from '../../utilities';
+
+type RadioGroupProps = RadioGroupPropsBase & {
+    labelSlot: keyof typeof labelSlotOptions;
+};
+
+type RadioGroupStoryMeta = Meta<RadioGroupProps>;
+
+const defaultArgs: RadioGroupProps = {
+    ...defaultProps,
+    labelSlot: 'None',
+};
+
+const labelSlotOptions = {
+    None: nothing,
+    Label: html`<pie-form-label slot="label">Radio Group Label</pie-form-label>`,
+};
+
+const radioGroupStoryMeta: RadioGroupStoryMeta = {
+    title: 'Radio Group',
+    component: 'pie-radio-group',
+    parameters: {
+        controls: {
+            disable: true,
+        },
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/pPSC73rPin4csb8DiK1CRr/branch/6u3sopt3trAp9wdJi7lUfY/%E2%9C%A8-%5BCore%5D-Web-Components-%5BPIE-3%5D?node-id=6369-3799&node-type=frame&t=pbk7ibGYRutGCO3z-0',
+        },
+    },
+};
+
+export default radioGroupStoryMeta;
+
+const KeyboardNavigationTemplate = () => html`
+    <h2>Radio group 1</h2>
+    <p><pie-button size="small-productive" data-test-id="btn-1">Button 1</pie-button></p>
+    <pie-radio-group data-test-id="radio-group-1">
+        <pie-radio data-test-id="radio-1" value="chinese">Chinese</pie-radio>
+        <pie-radio data-test-id="radio-2" value="shawarma">Shawarma</pie-radio>
+        <pie-radio data-test-id="radio-3" value="pizza">Pizza</pie-radio>
+        <pie-radio data-test-id="radio-4" value="fish-and-chips">Fish and Chips</pie-radio>
+        <pie-radio data-test-id="radio-5" value="indian">Indian</pie-radio>
+    </pie-radio-group>
+    <p><pie-button size="small-productive" variant="secondary" data-test-id="btn-2">Button 2</pie-button></p>
+
+    <h2>Radio group 2</h2>
+    <p><pie-button size="small-productive" data-test-id="btn-3">Button 3</pie-button></p>
+    <pie-radio-group data-test-id="radio-group-2" value="fish-and-chips">
+        <pie-radio data-test-id="radio-6" value="chinese">Chinese</pie-radio>
+        <pie-radio data-test-id="radio-7" value="shawarma">Shawarma</pie-radio>
+        <pie-radio data-test-id="radio-8" value="pizza">Pizza</pie-radio>
+        <pie-radio data-test-id="radio-9" value="fish-and-chips">Fish and Chips</pie-radio>
+        <pie-radio data-test-id="radio-10" value="indian">Indian</pie-radio>
+    </pie-radio-group>
+    <p><pie-button size="small-productive" variant="secondary" data-test-id="btn-4">Button 4</pie-button></p>
+    `;
+
+export const KeyboardNavigation = createStory<RadioGroupProps>(KeyboardNavigationTemplate, defaultArgs)();
diff --git a/apps/pie-storybook/turbo.json b/apps/pie-storybook/turbo.json
@@ -15,7 +15,7 @@
       "cache": false,
       "dependsOn": [
         "^build",
-        "generate:component-statuses"
+        "^generate:component-statuses"
       ]
     },
     "build": {
@@ -39,4 +39,4 @@
       "dependsOn": []
     }
   }
-}
+}
diff --git a/bundlewatch.config.json b/bundlewatch.config.json
@@ -130,7 +130,7 @@
     },
     {
       "path": "./packages/components/pie-radio-group/dist/index.js",
-      "maxSize": "2.5 KB"
+      "maxSize": "5 KB"
     },
     {
       "path": "./packages/components/pie-radio-group/dist/react.js",
@@ -199,4 +199,4 @@
       "main"
     ]
   }
-}
+}
diff --git a/packages/components/pie-cookie-banner/playwright-lit-visual.config.ts b/packages/components/pie-cookie-banner/playwright-lit-visual.config.ts
@@ -1,5 +1,4 @@
-import { defineConfig } from '@sand4rt/experimental-ct-web';
-import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
-
-export default defineConfig(getPlaywrightVisualConfig());
+import { defineConfig } from '@playwright/test';
+import { getPlaywrightNativeVisualConfig } from '@justeattakeaway/pie-components-config';
 
+export default defineConfig(getPlaywrightNativeVisualConfig());
diff --git a/packages/components/pie-cookie-banner/test/visual/pie-cookie-banner.spec.ts b/packages/components/pie-cookie-banner/test/visual/pie-cookie-banner.spec.ts
@@ -1,30 +1,36 @@
-import { test } from '@sand4rt/experimental-ct-web';
+import { test } from '@justeattakeaway/pie-webc-testing/src/playwright/playwright-fixtures.ts';
+import { CookieBannerComponent } from 'test/helpers/page-object/pie-cookie-banner.page.ts';
 import percySnapshot from '@percy/playwright';
 
-import { PieCookieBanner, type CookieBannerProps } from '../../src/index.ts';
-
-const managePrefsSelector = '[data-test-id="actions-manage-prefs"]';
+let pieCookieBannerComponent: CookieBannerComponent;
 
 test.describe('PieCookieBanner - Visual tests`', () => {
-    test('should display the PieCookieBanner component successfully', async ({ page, mount }) => {
-        await mount(PieCookieBanner);
+    test.beforeEach(async ({ page }) => {
+        pieCookieBannerComponent = new CookieBannerComponent(page);
+    });
+
+    test('should display the PieCookieBanner component successfully', async ({ page }) => {
+        await pieCookieBannerComponent.load();
 
         await percySnapshot(page, 'PieCookieBanner - Visual Test');
     });
 
-    test('should display the manage preferences modal after clicking `"Manage preferences"`', async ({ page, mount }) => {
-        await mount(PieCookieBanner);
+    test('should display the manage preferences modal after clicking `"Manage preferences"`', async ({ page }) => {
+        await pieCookieBannerComponent.load();
 
-        await page.click(managePrefsSelector);
+        await pieCookieBannerComponent.clickManagePreferencesAction();
+
+        // This fixes modal being pushed down in screenshots
+        await page.$eval('dialog', (el) => {
+            el.style.top = '20px';
+        });
 
         await percySnapshot(page, 'PieCookieBanner Manage preferences - Visual Test');
     });
 
     [true, false].forEach((hasPrimaryActionsOnly) => {
-        test(`should display the correct button variants for hasPrimaryActionsOnly = ${hasPrimaryActionsOnly}`, async ({ mount, page }) => {
-            await mount(PieCookieBanner, {
-                props: { hasPrimaryActionsOnly } as CookieBannerProps,
-            });
+        test(`should display the correct button variants for hasPrimaryActionsOnly = ${hasPrimaryActionsOnly}`, async ({ page }) => {
+            await pieCookieBannerComponent.load({ hasPrimaryActionsOnly });
 
             await percySnapshot(page, `PieCookieBanner hasPrimaryActionsOnly = ${hasPrimaryActionsOnly}`);
         });