Skip to content

Commit 2339637

Browse files
siggerzzsiggerzz
authored
Merge branch 'main' into wcp-000-update-playwright
2 parents 259dc72 + 8f706e2 commit 2339637

18 files changed

+685
-560
lines changed

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

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type { StoryBackgrounds } from '../types/StoryOptions';
2+
3+
const CUSTOM_BACKGROUNDS : StoryBackgrounds = {
4+
default: 'light (container-default)',
5+
values: [
6+
{
7+
name: 'light (container-default)',
8+
value: '#ffffff',
9+
},
10+
{
11+
name: 'dark (container-dark)',
12+
value: '#262626',
13+
},
14+
{
15+
name: 'background-subtle',
16+
value: '#f5f3f1',
17+
},
18+
{
19+
name: 'background-dark',
20+
value: '#1a1a19',
21+
},
22+
{
23+
name: 'brand orange',
24+
value: '#f36805',
25+
},
26+
{
27+
name: 'saddlebrown',
28+
value: 'saddlebrown',
29+
},
30+
{
31+
name: 'aquamarine',
32+
value: 'aquamarine',
33+
},
34+
]
35+
};
36+
37+
export default CUSTOM_BACKGROUNDS;

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

+2-34
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import './styles/component-status.scss';
44
import './styles/icons.scss';
55

66
import { WritingDirection, ComponentStatus } from '../decorators';
7-
import { type StoryBackgrounds } from '../types/StoryOptions';
87
import CUSTOM_VIEWPORTS from './viewports';
8+
import backgrounds from './backgrounds';
99

1010
export default {
1111
decorators: [ComponentStatus, WritingDirection],
@@ -50,39 +50,7 @@ export default {
5050
],
5151
},
5252
},
53-
backgrounds: {
54-
default: 'light (container-default)',
55-
values: [
56-
{
57-
name: 'light (container-default)',
58-
value: '#ffffff',
59-
},
60-
{
61-
name: 'dark (container-dark)',
62-
value: '#262626',
63-
},
64-
{
65-
name: 'background-subtle',
66-
value: '#f5f3f1',
67-
},
68-
{
69-
name: 'background-dark',
70-
value: '#1a1a19',
71-
},
72-
{
73-
name: 'brand orange',
74-
value: '#f36805',
75-
},
76-
{
77-
name: 'saddlebrown',
78-
value: 'saddlebrown',
79-
},
80-
{
81-
name: 'aquamarine',
82-
value: 'aquamarine',
83-
},
84-
]
85-
} satisfies StoryBackgrounds,
53+
backgrounds,
8654
controls: {
8755
expanded: true,
8856
sort: 'alpha',

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

+253
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
import { nothing } from 'lit';
2+
import { html } from 'lit/static-html.js';
3+
import { ifDefined } from 'lit/directives/if-defined.js';
4+
import { type Meta } from '@storybook/web-components';
5+
import { action } from '@storybook/addon-actions';
6+
7+
import '@justeattakeaway/pie-card';
8+
import {
9+
type CardProps as CardPropsBase, variants, tags, paddingValues, defaultProps,
10+
} from '@justeattakeaway/pie-card';
11+
12+
import { type SlottedComponentProps } from '../../types';
13+
import {
14+
createStory, createVariantStory, type TemplateFunction, sanitizeAndRenderHTML,
15+
} from '../../utilities';
16+
17+
type CardProps = SlottedComponentProps<CardPropsBase>;
18+
type CardStoryMeta = Meta<CardProps>;
19+
20+
const defaultArgs: CardProps = {
21+
...defaultProps,
22+
href: '',
23+
padding: '' as CardProps['padding'],
24+
rel: '',
25+
target: '',
26+
aria: {
27+
label: 'Click to go to restaurant',
28+
},
29+
// This is just an arbitrary example of some markup a user may pass into the card
30+
slot: ` <div data-test-id="slot-content" style="font-size: calc(var(--dt-font-body-l-size) * 1px); font-family: var(--dt-font-interactive-l-family);">
31+
<h2 style="margin-top: 0"> Card title </h2>
32+
<p> Card content </p>
33+
<p style="margin-bottom: 0"> Lorem ipsum dolor sit amet
34+
consectetur adipisicing elit.
35+
Fugiat dolore dolorem maxime,
36+
quod, in minima esse fugit
37+
distinctio, officia et soluta
38+
dicta consequuntur commodi officiis
39+
tempora asperiores aspernatur atque quas.</p>
40+
</div>`,
41+
};
42+
43+
const cardStoryMeta: CardStoryMeta = {
44+
title: 'Card',
45+
component: 'pie-card',
46+
argTypes: {
47+
tag: {
48+
description: 'Set the HTML tag of the card.',
49+
control: 'select',
50+
options: tags,
51+
defaultValue: {
52+
summary: defaultProps.tag,
53+
},
54+
},
55+
variant: {
56+
description: 'Set the variant of the card.',
57+
control: 'select',
58+
options: variants,
59+
defaultValue: {
60+
summary: defaultProps.variant,
61+
},
62+
},
63+
padding: {
64+
description: `Set the padding of the card. <br/> Can be either a single value or two values separated by a comma (paddingX, paddingY) e.g 'a' or 'a,b'.
65+
<br /> valid values are: \`${paddingValues.filter((i) => !i.includes(',')).join(', ')}\``,
66+
control: {
67+
type: 'text',
68+
},
69+
},
70+
disabled: {
71+
description: 'If `true`, disables the card.',
72+
control: 'boolean',
73+
defaultValue: {
74+
summary: defaultProps.disabled,
75+
},
76+
},
77+
href: {
78+
description: 'The URL that the card should point to (this will not take effect unless the card is a link).',
79+
control: 'text',
80+
if: { arg: 'tag', eq: 'a' },
81+
},
82+
target: {
83+
description: 'Where to display the linked URL such as _self, _blank, _parent or _top (this will not take effect unless the card is a link).',
84+
control: 'text',
85+
if: { arg: 'tag', eq: 'a' },
86+
},
87+
rel: {
88+
description: 'What the relationship of the linked URL is (this will not take effect unless the card is a link).',
89+
control: 'text',
90+
if: { arg: 'tag', eq: 'a' },
91+
},
92+
slot: {
93+
description: 'Content to place within the card',
94+
control: 'text',
95+
},
96+
aria: {
97+
description: 'The ARIA labels used for various parts of the card.',
98+
control: 'object',
99+
},
100+
isDraggable: {
101+
control: 'boolean',
102+
defaultValue: {
103+
summary: defaultProps.isDraggable,
104+
},
105+
},
106+
},
107+
args: defaultArgs,
108+
};
109+
110+
export default cardStoryMeta;
111+
112+
const clickAction = action('clicked');
113+
114+
const Template: TemplateFunction<CardProps> = ({
115+
tag,
116+
href,
117+
target,
118+
rel,
119+
disabled,
120+
slot,
121+
aria,
122+
variant,
123+
padding,
124+
isDraggable,
125+
}) => {
126+
const isButton = tag === 'button';
127+
128+
return html`
129+
<pie-card
130+
tag="${ifDefined(tag)}"
131+
variant="${ifDefined(variant)}"
132+
href="${href || nothing}"
133+
target="${target || nothing}"
134+
rel="${rel || nothing}"
135+
?disabled="${disabled}"
136+
.aria="${aria}"
137+
padding="${padding || nothing}"
138+
?isDraggable="${isDraggable}"
139+
@click="${isButton ? clickAction : nothing}">
140+
${sanitizeAndRenderHTML(slot)}
141+
</pie-card>`;
142+
};
143+
144+
const createCardStory = createStory<CardProps>(Template, defaultArgs);
145+
146+
export const Default = createCardStory();
147+
export const Outline = createCardStory({ variant: 'outline' });
148+
export const Inverse = createCardStory({ variant: 'inverse' }, { bgColor: 'dark (container-dark)' });
149+
export const OutlineInverse = createCardStory({ variant: 'outline-inverse' }, { bgColor: 'dark (container-dark)' });
150+
export const CardWithImage = createCardStory({
151+
...defaultArgs,
152+
slot: `<div data-test-id="slot-content" style="font-size: calc(var(--dt-font-body-l-size) * 1px); font-family: var(--dt-font-interactive-l-family);">
153+
<h2 style="margin-top: 0"> Card title </h2>
154+
<p> Card content </p>
155+
<p style="margin-bottom: 0"> Lorem ipsum dolor sit amet
156+
consectetur adipisicing elit.
157+
Fugiat dolore dolorem maxime,
158+
quod, in minima esse fugit
159+
distinctio, officia et soluta
160+
dicta consequuntur commodi officiis
161+
tempora asperiores aspernatur atque quas.</p>
162+
<img src="https://picsum.photos/200/300?image=0" alt="Sample image" />
163+
</div>`,
164+
});
165+
166+
const variantSlotContent = '<div><h2>Card title</h2><p>Card content</p></div>';
167+
168+
const sharedVariantProps: Partial<Record<keyof CardProps, unknown[]>> = {
169+
tag: ['a', 'button'],
170+
disabled: [true, false],
171+
slot: [variantSlotContent],
172+
};
173+
174+
const defaultVariantProps: Partial<Record<keyof CardProps, unknown[]>> = {
175+
variant: ['default'],
176+
...sharedVariantProps,
177+
};
178+
179+
const outlineVariantProps: Partial<Record<keyof CardProps, unknown[]>> = {
180+
variant: ['outline'],
181+
...sharedVariantProps,
182+
};
183+
184+
const inverseVariantProps: Partial<Record<keyof CardProps, unknown[]>> = {
185+
variant: ['inverse'],
186+
...sharedVariantProps,
187+
};
188+
189+
const outlineInverseVariantProps: Partial<Record<keyof CardProps, unknown[]>> = {
190+
variant: ['outline-inverse'],
191+
...sharedVariantProps,
192+
};
193+
194+
const paddingAVariantProps: Partial<Record<keyof CardProps, unknown[]>> = {
195+
padding: ['a', 'a,a', 'a,b', 'a,c', 'a,d', 'a,e', 'a,f', 'a,g'],
196+
disabled: [false],
197+
tag: ['button'],
198+
slot: [variantSlotContent],
199+
};
200+
201+
const paddingBVariantProps: Partial<Record<keyof CardProps, unknown[]>> = {
202+
padding: ['b', 'b,a', 'b,b', 'b,c', 'b,d', 'b,e', 'b,f', 'b,g'],
203+
disabled: [false],
204+
tag: ['button'],
205+
slot: [variantSlotContent],
206+
};
207+
208+
const paddingCVariantProps: Partial<Record<keyof CardProps, unknown[]>> = {
209+
padding: ['c', 'c,a', 'c,b', 'c,c', 'c,d', 'c,e', 'c,f', 'c,g'],
210+
disabled: [false],
211+
tag: ['button'],
212+
slot: [variantSlotContent],
213+
};
214+
215+
const paddingDVariantProps: Partial<Record<keyof CardProps, unknown[]>> = {
216+
padding: ['d', 'd,a', 'd,b', 'd,c', 'd,d', 'd,e', 'd,f', 'd,g'],
217+
disabled: [false],
218+
tag: ['button'],
219+
slot: [variantSlotContent],
220+
};
221+
222+
const paddingEVariantProps: Partial<Record<keyof CardProps, unknown[]>> = {
223+
padding: ['e', 'e,a', 'e,b', 'e,c', 'e,d', 'e,e', 'e,f', 'e,g'],
224+
disabled: [false],
225+
tag: ['button'],
226+
slot: [variantSlotContent],
227+
};
228+
229+
const paddingFVariantProps: Partial<Record<keyof CardProps, unknown[]>> = {
230+
padding: ['f', 'f,a', 'f,b', 'f,c', 'f,d', 'f,e', 'f,f', 'f,g'],
231+
disabled: [false],
232+
tag: ['button'],
233+
slot: [variantSlotContent],
234+
};
235+
236+
const paddingGVariantProps: Partial<Record<keyof CardProps, unknown[]>> = {
237+
padding: ['g', 'g,a', 'g,b', 'g,c', 'g,d', 'g,e', 'g,f', 'g,g'],
238+
disabled: [false],
239+
tag: ['button'],
240+
slot: [variantSlotContent],
241+
};
242+
243+
export const DefaultVariants = createVariantStory<CardProps>(Template, defaultVariantProps, {});
244+
export const OutlineVariants = createVariantStory<CardProps>(Template, outlineVariantProps, {});
245+
export const InverseVariants = createVariantStory<CardProps>(Template, inverseVariantProps, { bgColor: 'dark (container-dark)' });
246+
export const OutlineInverseVariants = createVariantStory<CardProps>(Template, outlineInverseVariantProps, { bgColor: 'dark (container-dark)' });
247+
export const PaddingAVariants = createVariantStory<CardProps>(Template, paddingAVariantProps, {});
248+
export const PaddingBVariants = createVariantStory<CardProps>(Template, paddingBVariantProps, {});
249+
export const PaddingCVariants = createVariantStory<CardProps>(Template, paddingCVariantProps, {});
250+
export const PaddingDVariants = createVariantStory<CardProps>(Template, paddingDVariantProps, {});
251+
export const PaddingEVariants = createVariantStory<CardProps>(Template, paddingEVariantProps, {});
252+
export const PaddingFVariants = createVariantStory<CardProps>(Template, paddingFVariantProps, {});
253+
export const PaddingGVariants = createVariantStory<CardProps>(Template, paddingGVariantProps, {});

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,7 @@ const defaultPropOptions = {
8686
const inversePropOptions = {
8787
...sharedPropOptions,
8888
variant: ['inverse'],
89-
darkBackground: ['true'],
9089
};
9190

9291
export const DefaultPropVariations = createVariantStory(VariantsTemplate, defaultPropOptions);
93-
export const InversePropVariations = createVariantStory(VariantsTemplate, inversePropOptions);
92+
export const InversePropVariations = createVariantStory(VariantsTemplate, inversePropOptions, { bgColor: 'dark (container-dark)' });

‎apps/pie-storybook/types/StoryOptions.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ type BackgroundColor = 'light (container-default)' |
66
'saddlebrown' |
77
'aquamarine';
88

9-
type BackgroundValue = {
9+
export type BackgroundValue = {
1010
name: BackgroundColor,
1111
value: string,
1212
};

0 commit comments

Comments
 (0)