feat(pie-storybook): DSW-2593 improve logic for conditional rendering of stories

.changeset/loud-turkeys-rest.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/generator-pie-component": minor
+---
+
+[Updated] - structure to follow new testing best practices via rendering in Storybook

apps/pie-storybook/.storybook/main.ts

@@ -5,12 +5,11 @@ const isBrowserTesting = process.env.BROWSER_TESTING === 'true';
 const config: StorybookConfig = {
     stories: isBrowserTesting 
         ? [
-            "../stories/**/*.test.mdx",
-            "../stories/**/*.test.stories.@(js|ts|tsx)"
-        ] 
+            "../stories/testing/**/*.test.stories.ts"
+        ]
         : [
             "../stories/**/*.mdx",
-            "../stories/**/!(*.test).stories.@(js|ts|tsx)"
+            "../stories/*.stories.@(js|ts|tsx)",
           ],
     addons: [
         "@storybook/addon-essentials",

apps/pie-storybook/.storybook/styles/component-status.scss

@@ -19,3 +19,9 @@
 .c-componentStatus--top {
     inset-block-start: var(--dt-spacing-c);
 }
+
+@media only percy {
+  .percyHidden {
+    display: none;
+  }
+}

apps/pie-storybook/decorators/component-status.ts

@@ -26,7 +26,7 @@ export const ComponentStatus = (story: () => TemplateResult, storybookContext: S
         <div class="pie-sb-status-wrapper">
             ${story()}
 
-            <div class="${`c-componentStatus ${positionClass}`}">
+            <div class="${`c-componentStatus ${positionClass} percyHidden`}">
                 <pie-tag variant="${tagVariant}">
                     Status: ${componentStatus}
                     <a

apps/pie-storybook/package.json

@@ -9,7 +9,8 @@
     "build": "storybook build --output-dir dist && cp -R ./static ./dist",
     "build:testing": "BROWSER_TESTING=true storybook build --output-dir dist && cp -R ./static ./dist",
     "lint:scripts": "run -T eslint .",
-    "lint:scripts:fix": "run -T eslint . --fix"
+    "lint:scripts:fix": "run -T eslint . --fix",
+    "test": "run -T vitest run test"
   },
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
@@ -45,23 +46,23 @@
   "devDependencies": {
     "@justeattakeaway/pie-icons-configs": "4.5.1",
     "@justeattakeaway/pie-monorepo-utils": "0.2.0",
-    "@storybook/addon-a11y": "8.3.0",
-    "@storybook/addon-designs": "8.0.3",
-    "@storybook/addon-essentials": "8.3.0",
-    "@storybook/addon-links": "8.3.0",
-    "@storybook/blocks": "8.3.0",
-    "@storybook/components": "8.3.0",
-    "@storybook/manager-api": "8.3.0",
-    "@storybook/preview-api": "8.3.0",
-    "@storybook/theming": "8.3.0",
-    "@storybook/types": "8.3.0",
-    "@storybook/web-components": "8.3.0",
-    "@storybook/web-components-vite": "8.3.0",
+    "@storybook/addon-a11y": "8.4.5",
+    "@storybook/addon-designs": "8.0.4",
+    "@storybook/addon-essentials": "8.4.5",
+    "@storybook/addon-links": "8.4.5",
+    "@storybook/blocks": "8.4.5",
+    "@storybook/components": "8.4.5",
+    "@storybook/manager-api": "8.4.5",
+    "@storybook/preview-api": "8.4.5",
+    "@storybook/theming": "8.4.5",
+    "@storybook/types": "8.4.5",
+    "@storybook/web-components": "8.4.5",
+    "@storybook/web-components-vite": "8.4.5",
     "@types/dompurify": "3.0.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "serve": "14.2.0",
-    "storybook": "8.3.0",
+    "storybook": "8.4.5",
     "storybook-dark-mode": "4.0.2"
   },
   "volta": {

apps/pie-storybook/stories/pie-chip.stories.ts

@@ -117,8 +117,9 @@ const Template: TemplateFunction<ChipProps> = ({
                     ${sanitizeAndRenderHTML(slot)}
            </pie-chip>`;
 
-const createCardStory = createStory<ChipProps>(Template, defaultArgs);
+const createChipStory = createStory<ChipProps>(Template, defaultArgs);
 
-export const Default = createCardStory();
-export const Outline = createCardStory({ variant: 'outline' });
-export const Ghost = createCardStory({ variant: 'ghost' });
+export const Default = createChipStory();
+export const Outline = createChipStory({ variant: 'outline' });
+
+export const Ghost = createChipStory({ variant: 'ghost' });

apps/pie-storybook/stories/testing/pie-chip.test.stories.ts

@@ -0,0 +1,148 @@
+import { html, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { action } from '@storybook/addon-actions';
+import { type Meta } from '@storybook/web-components';
+
+import '@justeattakeaway/pie-chip';
+import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip';
+import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js';
+
+import { type SlottedComponentProps } from '../../types';
+import {
+    createStory, createVariantStory, type TemplateFunction, sanitizeAndRenderHTML,
+} from '../../utilities';
+
+type ChipProps = SlottedComponentProps<ChipPropsBase> & { showIcon: boolean };
+type ChipStoryMeta = Meta<ChipProps>;
+
+const defaultArgs: ChipProps = {
+    ...defaultProps,
+    aria: {
+        label: 'Chip Label',
+        close: 'Chip Close',
+    },
+    showIcon: false,
+    slot: 'String',
+};
+
+const chipStoryMeta: ChipStoryMeta = {
+    title: 'Chip',
+    component: 'pie-chip',
+    argTypes: {
+        aria: {
+            description: 'The ARIA labels used for various parts of the chip.',
+            control: 'object',
+        },
+        variant: {
+            description: 'Set the variant of the chip.',
+            control: 'select',
+            options: variants,
+            defaultValue: {
+                summary: defaultProps.variant,
+            },
+        },
+        disabled: {
+            description: 'If `true`, disables the chip.',
+            control: 'boolean',
+            defaultValue: {
+                summary: defaultProps.disabled,
+            },
+        },
+        isSelected: {
+            description: 'If `true`, the chip element will apply the selected styles.',
+            control: 'boolean',
+            defaultValue: {
+                summary: defaultProps.isSelected,
+            },
+        },
+        isLoading: {
+            description: 'If `true`, displays a loading indicator inside the chip.',
+            control: 'boolean',
+            defaultValue: {
+                summary: defaultProps.isLoading,
+            },
+        },
+        isDismissible: {
+            description: 'If `true`, displays a close icon to dismiss the chip component. <br /><br /> Can be only used if `isSelected` is set to true',
+            control: 'boolean',
+            defaultValue: {
+                summary: defaultProps.isDismissible,
+            },
+            if: { arg: 'isSelected', eq: true },
+        },
+        showIcon: {
+            description: 'Enable to see the example of Chip with icon.',
+            control: 'boolean',
+            defaultValue: {
+                summary: defaultArgs.showIcon,
+            },
+        },
+        slot: {
+            description: 'Content to place within the chip',
+            control: 'text',
+        },
+    },
+    args: defaultArgs,
+};
+
+export default chipStoryMeta;
+
+const clickAction = action('clicked');
+const closeAction = action('pie-chip-close');
+
+const Template: TemplateFunction<ChipProps> = ({
+    aria,
+    disabled,
+    isSelected,
+    isLoading,
+    isDismissible,
+    showIcon,
+    slot,
+    variant,
+}) => html`
+           <pie-chip
+                .aria="${aria}"
+                ?disabled="${disabled}"
+                ?isSelected="${isSelected}"
+                ?isLoading="${isLoading}"
+                ?isDismissible="${isDismissible}"
+                variant="${ifDefined(variant)}"
+                @pie-chip-close="${closeAction}"
+                @click="${clickAction}">
+                    ${showIcon ? html`<icon-heart-filled slot="icon"></icon-heart-filled>` : nothing}
+                    ${sanitizeAndRenderHTML(slot)}
+           </pie-chip>`;
+const createChipStory = createStory<ChipProps>(Template, defaultArgs);
+
+export const Default = createChipStory();
+export const Outline = createChipStory({ variant: 'outline' });
+export const Ghost = createChipStory({ variant: 'ghost' });
+
+// Define the prop options for the matrix
+const sharedPropOptions = {
+    disabled: [true, false],
+    isSelected: [true, false],
+    isLoading: [true, false],
+    isDismissible: [true, false],
+    showIcon: [true, false],
+    slot: ['Hello World'],
+};
+
+const defaultPropOptions = {
+    ...sharedPropOptions,
+    variant: ['default'],
+};
+
+const ghostPropOptions = {
+    ...sharedPropOptions,
+    variant: ['ghost'],
+};
+
+const outlinePropOptions = {
+    ...sharedPropOptions,
+    variant: ['outline'],
+};
+
+export const DefaultPropVariations = createVariantStory<Omit<ChipProps, 'aria'> >(Template, defaultPropOptions);
+export const GhostPropVariations = createVariantStory<Omit<ChipProps, 'aria'>>(Template, ghostPropOptions);
+export const OutlinePropVariations = createVariantStory<Omit<ChipProps, 'aria'>>(Template, outlinePropOptions);