Skip to content

Commit 3cdb96c

Browse files
author
Ben Siggery
committed
fix linting
1 parent 9059ced commit 3cdb96c

File tree

4 files changed

+138
-81
lines changed

4 files changed

+138
-81
lines changed

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

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { StorybookConfig } from '@storybook/web-components-vite';
2-
import { getTestingStoryFiles } from './story-utils';
32

43
const isBrowserTesting = process.env.BROWSER_TESTING === 'true';
54

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -122,4 +122,4 @@ const createChipStory = createStory<ChipProps>(Template, defaultArgs);
122122
export const Default = createChipStory();
123123
export const Outline = createChipStory({ variant: 'outline' });
124124

125-
export const Ghost = createChipStory({ variant: 'ghost' });
125+
export const Ghost = createChipStory({ variant: 'ghost' });

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

+70-12
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,88 @@
11
import { html, nothing } from 'lit';
22
import { ifDefined } from 'lit/directives/if-defined.js';
33
import { action } from '@storybook/addon-actions';
4+
import { type Meta } from '@storybook/web-components';
5+
46
import '@justeattakeaway/pie-chip';
7+
import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip';
58
import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js';
69

7-
import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip';
8-
import { type Meta } from '@storybook/web-components';
910
import { type SlottedComponentProps } from '../../types';
10-
1111
import {
1212
createStory, createVariantStory, type TemplateFunction, sanitizeAndRenderHTML,
1313
} from '../../utilities';
1414

15-
type ChipProps = SlottedComponentProps<ChipPropsBase> & {showIcon: boolean };
15+
type ChipProps = SlottedComponentProps<ChipPropsBase> & { showIcon: boolean };
1616
type ChipStoryMeta = Meta<ChipProps>;
1717

1818
const defaultArgs: ChipProps = {
1919
...defaultProps,
20+
aria: {
21+
label: 'Chip Label',
22+
close: 'Chip Close',
23+
},
2024
showIcon: false,
2125
slot: 'String',
2226
};
2327

2428
const chipStoryMeta: ChipStoryMeta = {
2529
title: 'Chip',
26-
component: 'pie-chip'
30+
component: 'pie-chip',
31+
argTypes: {
32+
aria: {
33+
description: 'The ARIA labels used for various parts of the chip.',
34+
control: 'object',
35+
},
36+
variant: {
37+
description: 'Set the variant of the chip.',
38+
control: 'select',
39+
options: variants,
40+
defaultValue: {
41+
summary: defaultProps.variant,
42+
},
43+
},
44+
disabled: {
45+
description: 'If `true`, disables the chip.',
46+
control: 'boolean',
47+
defaultValue: {
48+
summary: defaultProps.disabled,
49+
},
50+
},
51+
isSelected: {
52+
description: 'If `true`, the chip element will apply the selected styles.',
53+
control: 'boolean',
54+
defaultValue: {
55+
summary: defaultProps.isSelected,
56+
},
57+
},
58+
isLoading: {
59+
description: 'If `true`, displays a loading indicator inside the chip.',
60+
control: 'boolean',
61+
defaultValue: {
62+
summary: defaultProps.isLoading,
63+
},
64+
},
65+
isDismissible: {
66+
description: 'If `true`, displays a close icon to dismiss the chip component. <br /><br /> Can be only used if `isSelected` is set to true',
67+
control: 'boolean',
68+
defaultValue: {
69+
summary: defaultProps.isDismissible,
70+
},
71+
if: { arg: 'isSelected', eq: true },
72+
},
73+
showIcon: {
74+
description: 'Enable to see the example of Chip with icon.',
75+
control: 'boolean',
76+
defaultValue: {
77+
summary: defaultArgs.showIcon,
78+
},
79+
},
80+
slot: {
81+
description: 'Content to place within the chip',
82+
control: 'text',
83+
},
84+
},
85+
args: defaultArgs,
2786
};
2887

2988
export default chipStoryMeta;
@@ -53,6 +112,11 @@ const Template: TemplateFunction<ChipProps> = ({
53112
${showIcon ? html`<icon-heart-filled slot="icon"></icon-heart-filled>` : nothing}
54113
${sanitizeAndRenderHTML(slot)}
55114
</pie-chip>`;
115+
const createChipStory = createStory<ChipProps>(Template, defaultArgs);
116+
117+
export const Default = createChipStory();
118+
export const Outline = createChipStory({ variant: 'outline' });
119+
export const Ghost = createChipStory({ variant: 'ghost' });
56120

57121
// Define the prop options for the matrix
58122
const sharedPropOptions = {
@@ -79,12 +143,6 @@ const outlinePropOptions = {
79143
variant: ['outline'],
80144
};
81145

82-
const createChipStory = createStory<ChipProps>(Template, defaultArgs);
83-
84-
export const Default = createChipStory();
85-
export const Outline = createChipStory({ variant: 'outline' });
86-
export const Ghost = createChipStory({ variant: 'ghost' });
87-
88146
export const DefaultPropVariations = createVariantStory<Omit<ChipProps, 'aria'> >(Template, defaultPropOptions);
89147
export const GhostPropVariations = createVariantStory<Omit<ChipProps, 'aria'>>(Template, ghostPropOptions);
90-
export const OutlinePropVariations = createVariantStory<Omit<ChipProps, 'aria'>>(Template, outlinePropOptions);
148+
export const OutlinePropVariations = createVariantStory<Omit<ChipProps, 'aria'>>(Template, outlinePropOptions);

‎apps/pie-storybook/test/utilities/index.test.ts

+67-67
Original file line numberDiff line numberDiff line change
@@ -13,73 +13,73 @@ const template: (props: ComponentProps) => ReturnType<typeof html> = ({ size, va
1313
`;
1414

1515
describe('createStory', () => {
16-
it('should create a story with default args', () => {
17-
const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' };
18-
const story = createStory(template, defaultArgs);
19-
20-
const result = story();
21-
expect(result.args).toEqual(defaultArgs);
22-
expect(result.render(defaultArgs)).toHaveProperty('strings');
23-
});
24-
25-
it('should override default args with prop overrides', () => {
26-
const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' };
27-
const story = createStory(template, defaultArgs);
28-
29-
const propOverrides = { variant: 'secondary' };
30-
const result = story(propOverrides);
31-
expect(result.args).toEqual({ size: 'medium', variant: 'secondary' });
32-
});
33-
34-
it('should apply story options correctly', () => {
35-
const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' };
36-
const storyOpts: StoryOptions = {
37-
bgColor: 'background-subtle',
38-
};
39-
const story = createStory(template, defaultArgs);
40-
41-
const result = story({}, storyOpts);
42-
expect(result.parameters.backgrounds.default).toBe('background-subtle');
43-
});
16+
it('should create a story with default args', () => {
17+
const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' };
18+
const story = createStory(template, defaultArgs);
19+
20+
const result = story();
21+
expect(result.args).toEqual(defaultArgs);
22+
expect(result.render(defaultArgs)).toHaveProperty('strings');
23+
});
24+
25+
it('should override default args with prop overrides', () => {
26+
const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' };
27+
const story = createStory(template, defaultArgs);
28+
29+
const propOverrides = { variant: 'secondary' };
30+
const result = story(propOverrides);
31+
expect(result.args).toEqual({ size: 'medium', variant: 'secondary' });
32+
});
33+
34+
it('should apply story options correctly', () => {
35+
const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' };
36+
const storyOpts: StoryOptions = {
37+
bgColor: 'background-subtle',
38+
};
39+
const story = createStory(template, defaultArgs);
40+
41+
const result = story({}, storyOpts);
42+
expect(result.parameters.backgrounds.default).toBe('background-subtle');
43+
});
4444
});
4545

4646
describe('createVariantStory', () => {
47-
it('should generate all combinations of prop options', () => {
48-
const propOptions = {
49-
size: ['small', 'medium', 'large'],
50-
variant: ['primary', 'secondary'],
51-
};
52-
53-
const story = createVariantStory(template, propOptions);
54-
const renderResult = story.render();
55-
56-
// Render the template to a DOM element
57-
const container = document.createElement('div');
58-
render(renderResult, container);
59-
60-
// Count the number of pie-component elements
61-
const renderedCombinations = container.querySelectorAll('pie-component');
62-
const expectedCombinationsCount = propOptions.size.length * propOptions.variant.length;
63-
expect(renderedCombinations.length).toBe(expectedCombinationsCount);
64-
});
65-
66-
it('should apply story options correctly', () => {
67-
const propOptions = {
68-
size: ['small'],
69-
variant: ['primary'],
70-
};
71-
72-
const storyOpts: StoryOptions = {
73-
bgColor: 'background-subtle',
74-
argTypes: { size: { control: 'text' } },
75-
};
76-
77-
const story = createVariantStory(template, propOptions, storyOpts);
78-
79-
// Check if the parameters include the background color
80-
expect(story.parameters.backgrounds.default).toBe('background-subtle');
81-
82-
// Check if argTypes are applied
83-
expect(story.argTypes).toEqual(storyOpts.argTypes);
84-
});
85-
});
47+
it('should generate all combinations of prop options', () => {
48+
const propOptions = {
49+
size: ['small', 'medium', 'large'],
50+
variant: ['primary', 'secondary'],
51+
};
52+
53+
const story = createVariantStory(template, propOptions);
54+
const renderResult = story.render();
55+
56+
// Render the template to a DOM element
57+
const container = document.createElement('div');
58+
render(renderResult, container);
59+
60+
// Count the number of pie-component elements
61+
const renderedCombinations = container.querySelectorAll('pie-component');
62+
const expectedCombinationsCount = propOptions.size.length * propOptions.variant.length;
63+
expect(renderedCombinations.length).toBe(expectedCombinationsCount);
64+
});
65+
66+
it('should apply story options correctly', () => {
67+
const propOptions = {
68+
size: ['small'],
69+
variant: ['primary'],
70+
};
71+
72+
const storyOpts: StoryOptions = {
73+
bgColor: 'background-subtle',
74+
argTypes: { size: { control: 'text' } },
75+
};
76+
77+
const story = createVariantStory(template, propOptions, storyOpts);
78+
79+
// Check if the parameters include the background color
80+
expect(story.parameters.backgrounds.default).toBe('background-subtle');
81+
82+
// Check if argTypes are applied
83+
expect(story.argTypes).toEqual(storyOpts.argTypes);
84+
});
85+
});

0 commit comments

Comments
 (0)