pr suggestions

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

@@ -8,7 +8,7 @@ const config: StorybookConfig = {
         ? getTestingStoryFiles()
         : [
             "../stories/**/*.mdx",
-            "../stories/**/*.stories.@(js|ts|tsx)"
+            "../stories/*.stories.@(js|ts|tsx)",
           ],
     addons: [
         "@storybook/addon-essentials",

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

@@ -20,6 +20,8 @@
     inset-block-start: var(--dt-spacing-c);
 }
 
-.percyHidden {
+@media only percy {
+  .percyHidden {
     display: none;
+  }
 }

apps/pie-storybook/stories/pie-assistive-text.stories.ts

@@ -1,15 +1,15 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import '@justeattakeaway/pie-assistive-text';
+import { type Meta } from '@storybook/web-components';
 
+import '@justeattakeaway/pie-assistive-text';
 import { type AssistiveTextProps as AssistiveTextBaseProps, variants, defaultProps } from '@justeattakeaway/pie-assistive-text';
-import { type ExtendedMeta } from '../types/ExtendedMeta';
 
 import { type SlottedComponentProps } from '../types';
 import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities';
 
 type AssistiveTextProps = SlottedComponentProps<AssistiveTextBaseProps>;
-type AssistiveTextStoryMeta = ExtendedMeta<AssistiveTextProps>;
+type AssistiveTextStoryMeta = Meta<AssistiveTextProps>;
 
 const defaultArgs: AssistiveTextProps = {
     ...defaultProps,
@@ -18,7 +18,6 @@ const defaultArgs: AssistiveTextProps = {
 
 const assistiveTextStoryMeta: AssistiveTextStoryMeta = {
     title: 'Assistive Text',
-    showInTestingDeployment: true,
     component: 'pie-assistive-text',
     argTypes: {
         variant: {

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

@@ -1,18 +1,18 @@
 import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import '@justeattakeaway/pie-button';
+import { type Meta } from '@storybook/web-components';
 
+import '@justeattakeaway/pie-button';
 import {
     type ButtonProps as ButtonPropsBase, defaultProps, iconPlacements, responsiveSizes, sizes, types, variants,
 } from '@justeattakeaway/pie-button';
-import { type ExtendedMeta } from '../types/ExtendedMeta';
 import '@justeattakeaway/pie-icons-webc/dist/IconPlusCircle.js';
 
 import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities';
 import { type SlottedComponentProps } from '../types';
 
 type ButtonProps = SlottedComponentProps<ButtonPropsBase>;
-type ButtonStoryMeta = ExtendedMeta<ButtonProps>;
+type ButtonStoryMeta = Meta<ButtonProps>;
 
 const defaultArgs: ButtonProps = {
     ...defaultProps,
@@ -22,7 +22,6 @@ const defaultArgs: ButtonProps = {
 
 const buttonStoryMeta: ButtonStoryMeta = {
     title: 'Button',
-    showInTestingDeployment: true,
     component: 'pie-button',
     argTypes: {
         tag: {

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

@@ -1,20 +1,19 @@
 import { nothing } from 'lit';
 import { html } from 'lit/static-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import '@justeattakeaway/pie-card';
-
+import { type Meta } from '@storybook/web-components';
 import { action } from '@storybook/addon-actions';
 
+import '@justeattakeaway/pie-card';
 import {
     type CardProps as CardPropsBase, variants, tags, paddingValues, defaultProps,
 } from '@justeattakeaway/pie-card';
-import { type ExtendedMeta } from '../types/ExtendedMeta';
 
 import { type SlottedComponentProps } from '../types';
 import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities';
 
 type CardProps = SlottedComponentProps<CardPropsBase>;
-type CardStoryMeta = ExtendedMeta<CardProps>;
+type CardStoryMeta = Meta<CardProps>;
 
 const defaultArgs: CardProps = {
     ...defaultProps,
@@ -41,7 +40,6 @@ const defaultArgs: CardProps = {
 
 const cardStoryMeta: CardStoryMeta = {
     title: 'Card',
-    showInTestingDeployment: true,
     component: 'pie-card',
     argTypes: {
         tag: {

apps/pie-storybook/stories/pie-checkbox-group.stories.ts

@@ -1,12 +1,12 @@
 import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { type Meta } from '@storybook/web-components';
+
+import '@justeattakeaway/pie-checkbox-group';
+import { type CheckboxGroupProps as CheckboxGroupPropsBase, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group';
 import '@justeattakeaway/pie-link';
 import '@justeattakeaway/pie-checkbox';
 import '@justeattakeaway/pie-form-label';
-import '@justeattakeaway/pie-checkbox-group';
-
-import { type CheckboxGroupProps as CheckboxGroupPropsBase, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group';
-import { type ExtendedMeta } from '../types/ExtendedMeta';
 
 import { createStory } from '../utilities';
 
@@ -15,7 +15,7 @@ type CheckboxGroupProps = CheckboxGroupPropsBase & {
     labelSlot: keyof typeof labelSlotOptions;
 };
 
-type CheckboxGroupStoryMeta = ExtendedMeta<CheckboxGroupProps>;
+type CheckboxGroupStoryMeta = Meta<CheckboxGroupProps>;
 
 const defaultArgs: CheckboxGroupProps = {
     ...defaultProps,
@@ -29,7 +29,6 @@ const labelSlotOptions = {
 
 const checkboxGroupStoryMeta: CheckboxGroupStoryMeta = {
     title: 'Checkbox Group',
-    showInTestingDeployment: true,
     component: 'pie-checkbox-group',
     argTypes: {
         name: {

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

@@ -1,16 +1,16 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import '@justeattakeaway/pie-checkbox';
+import { type Meta } from '@storybook/web-components';
 
+import '@justeattakeaway/pie-checkbox';
 import { type CheckboxProps as CheckboxBaseProps, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox';
 
 import { action } from '@storybook/addon-actions';
-import { type ExtendedMeta } from '../types/ExtendedMeta';
 import { type SlottedComponentProps } from '../types';
 import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities';
 
 type CheckboxProps = SlottedComponentProps<CheckboxBaseProps>;
-type CheckboxStoryMeta = ExtendedMeta<CheckboxProps>;
+type CheckboxStoryMeta = Meta<CheckboxProps>;
 
 const defaultArgs: CheckboxProps = {
     ...defaultProps,
@@ -21,7 +21,6 @@ const defaultArgs: CheckboxProps = {
 const checkboxStoryMeta: CheckboxStoryMeta = {
     title: 'Checkbox',
     component: 'pie-checkbox',
-    showInTestingDeployment: true,
     argTypes: {
         value: {
             description: 'The value of the checkbox (used as a key/value pair in HTML forms with `name`).',

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

@@ -5,15 +5,15 @@ import '@justeattakeaway/pie-chip';
 import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js';
 
 import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip';
-import { type ExtendedMeta } from '../types/ExtendedMeta';
+import { type Meta } from '@storybook/web-components';
 import { type SlottedComponentProps } from '../types';
 
 import {
     createStory, createVariantStory, type TemplateFunction, sanitizeAndRenderHTML,
 } from '../utilities';
 
 type ChipProps = SlottedComponentProps<ChipPropsBase> & { showIcon: boolean };
-type ChipStoryMeta = ExtendedMeta<ChipProps>;
+type ChipStoryMeta = Meta<ChipProps>;
 
 const defaultArgs: ChipProps = {
     ...defaultProps,
@@ -27,7 +27,7 @@ const defaultArgs: ChipProps = {
 
 const chipStoryMeta: ChipStoryMeta = {
     title: 'Chip',
-    showInTestingDeployment: true,
+
     component: 'pie-chip',
     argTypes: {
         aria: {
@@ -125,34 +125,4 @@ 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],
-    aria: [defaultArgs.aria],
-    slot: ['Hello World'],
-};
-
-const defaultPropOptions = {
-    ...sharedPropOptions,
-    variant: ['default'],
-};
-
-const ghostPropOptions = {
-    ...sharedPropOptions,
-    variant: ['ghost'],
-};
-
-const outlinePropOptions = {
-    ...sharedPropOptions,
-    variant: ['outline'],
-};
-
-export const DefaultPropVariations = createVariantStory<ChipProps>(Template, defaultPropOptions);
-export const GhostPropVariations = createVariantStory<ChipProps>(Template, ghostPropOptions);
-export const OutlinePropVariations = createVariantStory<ChipProps>(Template, outlinePropOptions);
+export const Ghost = createChipStory({ variant: 'ghost' });

apps/pie-storybook/stories/pie-cookie-banner.stories.ts

@@ -1,16 +1,16 @@
 import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
-import '@justeattakeaway/pie-cookie-banner';
+import { type Meta } from '@storybook/web-components';
 
+import '@justeattakeaway/pie-cookie-banner';
 import { type CookieBannerProps, defaultProps } from '@justeattakeaway/pie-cookie-banner';
 import {
     Country,
     Language,
 } from '@justeattakeaway/pie-cookie-banner/src/defs';
-import { type ExtendedMeta } from '../types/ExtendedMeta';
 import { createStory } from '../utilities';
 
-type CookieBannerStoryMeta = ExtendedMeta<CookieBannerProps>;
+type CookieBannerStoryMeta = Meta<CookieBannerProps>;
 
 const defaultArgs: CookieBannerProps = {
     ...defaultProps,
@@ -25,7 +25,6 @@ const defaultArgs: CookieBannerProps = {
 
 const cookieBannerStoryMeta: CookieBannerStoryMeta = {
     title: 'Cookie Banner',
-    showInTestingDeployment: true,
     component: 'pie-cookie-banner',
     argTypes: {
         hasPrimaryActionsOnly: {

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

@@ -1,22 +1,21 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import '@justeattakeaway/pie-divider';
+import { type Meta } from '@storybook/web-components';
 
+import '@justeattakeaway/pie-divider';
 import {
     type DividerProps, variants, orientations, defaultProps,
 } from '@justeattakeaway/pie-divider';
-import { type ExtendedMeta } from '../types/ExtendedMeta';
 
 import { createStory, type TemplateFunction } from '../utilities';
 
-type DividerStoryMeta = ExtendedMeta<DividerProps>;
+type DividerStoryMeta = Meta<DividerProps>;
 
 const defaultArgs: DividerProps = { ...defaultProps };
 
 const dividerStoryMeta: DividerStoryMeta = {
     title: 'Divider',
     component: 'pie-divider',
-    showInTestingDeployment: true,
     argTypes: {
         variant: {
             description: 'Set the variant of the divider. To change this, view the other story.',

apps/pie-storybook/stories/pie-form-label.stories.ts

@@ -1,14 +1,14 @@
 import { html, nothing } from 'lit';
-import '@justeattakeaway/pie-form-label';
+import { type Meta } from '@storybook/web-components';
 
+import '@justeattakeaway/pie-form-label';
 import { type FormLabelProps as FormLabelPropsBase } from '@justeattakeaway/pie-form-label';
-import { type ExtendedMeta } from '../types/ExtendedMeta';
-import { type SlottedComponentProps } from '../types';
 
+import { type SlottedComponentProps } from '../types';
 import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities';
 
 type FormLabelProps = SlottedComponentProps<FormLabelPropsBase>;
-type FormLabelStoryMeta = ExtendedMeta<FormLabelProps>;
+type FormLabelStoryMeta = Meta<FormLabelProps>;
 
 const defaultArgs: FormLabelProps = {
     for: 'form-label',
@@ -19,7 +19,6 @@ const defaultArgs: FormLabelProps = {
 
 const formLabelStoryMeta: FormLabelStoryMeta = {
     title: 'Form Label',
-    showInTestingDeployment: true,
     component: 'pie-form-label',
     argTypes: {
         for: {

apps/pie-storybook/stories/pie-icon-button.stories.ts

@@ -1,21 +1,21 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { type Meta } from '@storybook/web-components';
+
 import '@justeattakeaway/pie-icon-button';
-import '@justeattakeaway/pie-icons-webc/dist/IconClose.js';
 import {
     type IconButtonProps, sizes, variants, defaultProps,
 } from '@justeattakeaway/pie-icon-button';
-import { type ExtendedMeta } from '../types/ExtendedMeta';
+import '@justeattakeaway/pie-icons-webc/dist/IconClose.js';
 
 import { createStory, type TemplateFunction } from '../utilities';
 
-type IconButtonStoryMeta = ExtendedMeta<IconButtonProps>;
+type IconButtonStoryMeta = Meta<IconButtonProps>;
 
 const defaultArgs: IconButtonProps = { ...defaultProps, aria: { label: 'Test Label ' } };
 
 const iconButtonStoryMeta: IconButtonStoryMeta = {
     title: 'Icon Button',
-    showInTestingDeployment: true,
     component: 'pie-icon-button',
     argTypes: {
         aria: {

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

@@ -1,18 +1,18 @@
 import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import '@justeattakeaway/pie-link';
-import '@justeattakeaway/pie-icons-webc/dist/IconPlusCircle.js';
+import { type Meta } from '@storybook/web-components';
 
+import '@justeattakeaway/pie-link';
 import {
     type LinkProps as LinkBaseProps, sizes, variants, iconPlacements, tags, buttonTypes, underlineTypes, defaultProps,
 } from '@justeattakeaway/pie-link';
-import { type ExtendedMeta } from '../types/ExtendedMeta';
+import '@justeattakeaway/pie-icons-webc/dist/IconPlusCircle.js';
 
 import { type SlottedComponentProps } from '../types';
 import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities';
 
 type LinkProps = SlottedComponentProps<LinkBaseProps>;
-type LinkStoryMeta = ExtendedMeta<LinkProps>;
+type LinkStoryMeta = Meta<LinkProps>;
 
 const defaultArgs: LinkProps = {
     ...defaultProps,
@@ -24,7 +24,6 @@ const defaultArgs: LinkProps = {
 
 const linkStoryMeta: LinkStoryMeta = {
     title: 'Link',
-    showInTestingDeployment: true,
     component: 'pie-link',
     argTypes: {
         tag: {

apps/pie-storybook/stories/pie-lottie-player.stories.ts

@@ -1,15 +1,15 @@
 import { html } from 'lit';
+import { type Meta } from '@storybook/web-components';
 
 import '@justeattakeaway/pie-lottie-player';
 import {
     type LottiePlayerProps as LottiePlayerBaseProps, type PieLottiePlayer, defaultProps, directions,
 } from '@justeattakeaway/pie-lottie-player';
 
-import { type ExtendedMeta } from '../types/ExtendedMeta';
 import { createStory } from '../utilities';
 
 type LottiePlayerProps = Omit<LottiePlayerBaseProps, 'play' | 'stop'>
-type LottiePlayerStoryMeta = ExtendedMeta<LottiePlayerProps>;
+type LottiePlayerStoryMeta = Meta<LottiePlayerProps>;
 
 const defaultArgs: LottiePlayerProps = { ...defaultProps };
 
@@ -27,7 +27,6 @@ const animationSrcLabels = animationSrcOptions.reduce<Record<string, string>>((a
 
 const lottiePlayerStoryMeta: LottiePlayerStoryMeta = {
     title: 'Lottie Player',
-    showInTestingDeployment: true,
     component: 'pie-lottie-player',
     argTypes: {
         animationSrc:  {