fix linting

justeattakeaway · Nov 29, 2024 · 5874b3c · 5874b3c
1 parent 8462cda
commit 5874b3c
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 81 deletions.
diff --git a/apps/pie-storybook/.storybook/main.ts b/apps/pie-storybook/.storybook/main.ts
@@ -1,5 +1,4 @@
 import type { StorybookConfig } from '@storybook/web-components-vite';
-import { getTestingStoryFiles } from './story-utils';
 
 const isBrowserTesting = process.env.BROWSER_TESTING === 'true';
 

diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts
@@ -122,4 +122,4 @@ const createChipStory = createStory<ChipProps>(Template, defaultArgs);
 export const Default = createChipStory();
 export const Outline = createChipStory({ variant: 'outline' });
 
-export const Ghost = createChipStory({ variant: 'ghost' });
+export const Ghost = createChipStory({ variant: 'ghost' });
diff --git a/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts b/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts
@@ -1,29 +1,88 @@
 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 ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip';
-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 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'
+    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;
@@ -53,6 +112,11 @@ const Template: TemplateFunction<ChipProps> = ({
                     ${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 = {
@@ -79,12 +143,6 @@ const outlinePropOptions = {
     variant: ['outline'],
 };
 
-const createChipStory = createStory<ChipProps>(Template, defaultArgs);
-
-export const Default = createChipStory();
-export const Outline = createChipStory({ variant: 'outline' });
-export const Ghost = createChipStory({ variant: 'ghost' });
-
 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);
+export const OutlinePropVariations = createVariantStory<Omit<ChipProps, 'aria'>>(Template, outlinePropOptions);
diff --git a/apps/pie-storybook/test/utilities/index.test.ts b/apps/pie-storybook/test/utilities/index.test.ts
@@ -13,73 +13,73 @@ const template: (props: ComponentProps) => ReturnType<typeof html> = ({ size, va
 `;
 
 describe('createStory', () => {
-  it('should create a story with default args', () => {
-    const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' };
-    const story = createStory(template, defaultArgs);
-
-    const result = story();
-    expect(result.args).toEqual(defaultArgs);
-    expect(result.render(defaultArgs)).toHaveProperty('strings');
-  });
-
-  it('should override default args with prop overrides', () => {
-    const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' };
-    const story = createStory(template, defaultArgs);
-
-    const propOverrides = { variant: 'secondary' };
-    const result = story(propOverrides);
-    expect(result.args).toEqual({ size: 'medium', variant: 'secondary' });
-  });
-
-  it('should apply story options correctly', () => {
-    const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' };
-    const storyOpts: StoryOptions = {
-      bgColor: 'background-subtle',
-    };
-    const story = createStory(template, defaultArgs);
-
-    const result = story({}, storyOpts);
-    expect(result.parameters.backgrounds.default).toBe('background-subtle');
-  });
+    it('should create a story with default args', () => {
+        const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' };
+        const story = createStory(template, defaultArgs);
+
+        const result = story();
+        expect(result.args).toEqual(defaultArgs);
+        expect(result.render(defaultArgs)).toHaveProperty('strings');
+    });
+
+    it('should override default args with prop overrides', () => {
+        const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' };
+        const story = createStory(template, defaultArgs);
+
+        const propOverrides = { variant: 'secondary' };
+        const result = story(propOverrides);
+        expect(result.args).toEqual({ size: 'medium', variant: 'secondary' });
+    });
+
+    it('should apply story options correctly', () => {
+        const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' };
+        const storyOpts: StoryOptions = {
+            bgColor: 'background-subtle',
+        };
+        const story = createStory(template, defaultArgs);
+
+        const result = story({}, storyOpts);
+        expect(result.parameters.backgrounds.default).toBe('background-subtle');
+    });
 });
 
 describe('createVariantStory', () => {
-  it('should generate all combinations of prop options', () => {
-    const propOptions = {
-      size: ['small', 'medium', 'large'],
-      variant: ['primary', 'secondary'],
-    };
-
-    const story = createVariantStory(template, propOptions);
-    const renderResult = story.render();
-
-    // Render the template to a DOM element
-    const container = document.createElement('div');
-    render(renderResult, container);
-
-    // Count the number of pie-component elements
-    const renderedCombinations = container.querySelectorAll('pie-component');
-    const expectedCombinationsCount = propOptions.size.length * propOptions.variant.length;
-    expect(renderedCombinations.length).toBe(expectedCombinationsCount);
-  });
-
-  it('should apply story options correctly', () => {
-    const propOptions = {
-      size: ['small'],
-      variant: ['primary'],
-    };
-
-    const storyOpts: StoryOptions = {
-      bgColor: 'background-subtle',
-      argTypes: { size: { control: 'text' } },
-    };
-
-    const story = createVariantStory(template, propOptions, storyOpts);
-
-    // Check if the parameters include the background color
-    expect(story.parameters.backgrounds.default).toBe('background-subtle');
-
-    // Check if argTypes are applied
-    expect(story.argTypes).toEqual(storyOpts.argTypes);
-  });
-}); 
+    it('should generate all combinations of prop options', () => {
+        const propOptions = {
+            size: ['small', 'medium', 'large'],
+            variant: ['primary', 'secondary'],
+        };
+
+        const story = createVariantStory(template, propOptions);
+        const renderResult = story.render();
+
+        // Render the template to a DOM element
+        const container = document.createElement('div');
+        render(renderResult, container);
+
+        // Count the number of pie-component elements
+        const renderedCombinations = container.querySelectorAll('pie-component');
+        const expectedCombinationsCount = propOptions.size.length * propOptions.variant.length;
+        expect(renderedCombinations.length).toBe(expectedCombinationsCount);
+    });
+
+    it('should apply story options correctly', () => {
+        const propOptions = {
+            size: ['small'],
+            variant: ['primary'],
+        };
+
+        const storyOpts: StoryOptions = {
+            bgColor: 'background-subtle',
+            argTypes: { size: { control: 'text' } },
+        };
+
+        const story = createVariantStory(template, propOptions, storyOpts);
+
+        // Check if the parameters include the background color
+        expect(story.parameters.backgrounds.default).toBe('background-subtle');
+
+        // Check if argTypes are applied
+        expect(story.argTypes).toEqual(storyOpts.argTypes);
+    });
+});