Skip to content

Commit 8c1796f

Browse files
author
Lucas Akira Uehara
committed
docs: Add decorator strategy for improved readability
1 parent bcc430f commit 8c1796f

8 files changed

Lines changed: 281 additions & 284 deletions

File tree

‎src/__stories__/accordion-story.tsx‎

Lines changed: 65 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,15 @@ export default {
3535
control: {type: 'select'},
3636
},
3737
},
38+
decorators: [
39+
(Story: any, context: any) => (
40+
<ResponsiveLayout fullWidth variant={context.args.variantOutside || 'default'}>
41+
<Box padding={16}>
42+
<Story />
43+
</Box>
44+
</ResponsiveLayout>
45+
),
46+
],
3847
};
3948

4049
type Args = {
@@ -55,7 +64,6 @@ const Template: StoryComponent<BoxedArgs & {type?: 'boxed'}> = ({
5564
right,
5665
singleOpen,
5766
variant,
58-
variantOutside,
5967
type,
6068
}) => {
6169
const content = <Placeholder height={100} />;
@@ -79,66 +87,62 @@ const Template: StoryComponent<BoxedArgs & {type?: 'boxed'}> = ({
7987
};
8088

8189
return (
82-
<ResponsiveLayout fullWidth variant={variantOutside}>
83-
<Box padding={16}>
84-
<AccordionComponent singleOpen={singleOpen} dataAttributes={{testid: 'accordion'}}>
85-
<ItemComponent
86-
{...getAccordionItemContentProps()}
87-
dataAttributes={{testid: 'accordion-item-1'}}
88-
/>
89-
<ItemComponent
90-
{...getAccordionItemContentProps()}
91-
asset={<IconThumbUpFilled size={24} />}
92-
dataAttributes={{testid: 'accordion-item-2'}}
93-
/>
94-
<ItemComponent
95-
{...getAccordionItemContentProps()}
96-
asset={
97-
<Circle backgroundColor={skinVars.colors.brandLow} size={40}>
98-
<IconMobileDeviceRegular color={skinVars.colors.brand} />
99-
</Circle>
100-
}
101-
dataAttributes={{testid: 'accordion-item-3'}}
102-
/>
103-
104-
<ItemComponent
105-
{...getAccordionItemContentProps()}
106-
asset={<Circle size={40} backgroundImage={laptopImg} />}
107-
dataAttributes={{testid: 'accordion-item-4'}}
108-
/>
109-
110-
<ItemComponent
111-
{...getAccordionItemContentProps()}
112-
asset={<Image src={usingVrImg} height={80} aspectRatio="16:9" />}
113-
dataAttributes={{testid: 'accordion-item-5'}}
114-
/>
115-
116-
<ItemComponent
117-
{...getAccordionItemContentProps()}
118-
asset={<Image src={personPortraitImg} width={80} aspectRatio="7:10" />}
119-
dataAttributes={{testid: 'accordion-item-6'}}
120-
/>
121-
122-
<ItemComponent
123-
{...getAccordionItemContentProps()}
124-
asset={<Image src={touchImg} width={80} aspectRatio="1:1" />}
125-
dataAttributes={{testid: 'accordion-item-7'}}
126-
/>
127-
128-
<ItemComponent
129-
{...getAccordionItemContentProps()}
130-
asset={<Avatar size={40} src={avatarImg} />}
131-
dataAttributes={{testid: 'accordion-item-8'}}
132-
/>
133-
134-
<ItemComponent
135-
{...getAccordionItemContentProps()}
136-
asset={<Avatar size={40} initials="MS" />}
137-
dataAttributes={{testid: 'accordion-item-9'}}
138-
/>
139-
</AccordionComponent>
140-
</Box>
141-
</ResponsiveLayout>
90+
<AccordionComponent singleOpen={singleOpen} dataAttributes={{testid: 'accordion'}}>
91+
<ItemComponent
92+
{...getAccordionItemContentProps()}
93+
dataAttributes={{testid: 'accordion-item-1'}}
94+
/>
95+
<ItemComponent
96+
{...getAccordionItemContentProps()}
97+
asset={<IconThumbUpFilled size={24} />}
98+
dataAttributes={{testid: 'accordion-item-2'}}
99+
/>
100+
<ItemComponent
101+
{...getAccordionItemContentProps()}
102+
asset={
103+
<Circle backgroundColor={skinVars.colors.brandLow} size={40}>
104+
<IconMobileDeviceRegular color={skinVars.colors.brand} />
105+
</Circle>
106+
}
107+
dataAttributes={{testid: 'accordion-item-3'}}
108+
/>
109+
110+
<ItemComponent
111+
{...getAccordionItemContentProps()}
112+
asset={<Circle size={40} backgroundImage={laptopImg} />}
113+
dataAttributes={{testid: 'accordion-item-4'}}
114+
/>
115+
116+
<ItemComponent
117+
{...getAccordionItemContentProps()}
118+
asset={<Image src={usingVrImg} height={80} aspectRatio="16:9" />}
119+
dataAttributes={{testid: 'accordion-item-5'}}
120+
/>
121+
122+
<ItemComponent
123+
{...getAccordionItemContentProps()}
124+
asset={<Image src={personPortraitImg} width={80} aspectRatio="7:10" />}
125+
dataAttributes={{testid: 'accordion-item-6'}}
126+
/>
127+
128+
<ItemComponent
129+
{...getAccordionItemContentProps()}
130+
asset={<Image src={touchImg} width={80} aspectRatio="1:1" />}
131+
dataAttributes={{testid: 'accordion-item-7'}}
132+
/>
133+
134+
<ItemComponent
135+
{...getAccordionItemContentProps()}
136+
asset={<Avatar size={40} src={avatarImg} />}
137+
dataAttributes={{testid: 'accordion-item-8'}}
138+
/>
139+
140+
<ItemComponent
141+
{...getAccordionItemContentProps()}
142+
asset={<Avatar size={40} initials="MS" />}
143+
dataAttributes={{testid: 'accordion-item-9'}}
144+
/>
145+
</AccordionComponent>
142146
);
143147
};
144148

‎src/__stories__/align-story.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,13 @@ export default {
1919
control: {type: 'range', min: 200, max: 400, step: 20},
2020
},
2121
},
22+
decorators: [
23+
(Story: any) => (
24+
<div style={{display: 'inline-block', border: '1px solid red'}}>
25+
<Story />
26+
</div>
27+
),
28+
],
2229
};
2330

2431
type Props = {
@@ -30,11 +37,9 @@ type Props = {
3037

3138
export const Default: StoryComponent<Props> = ({x, y, width, height}) => {
3239
return (
33-
<div style={{display: 'inline-block', border: '1px solid red'}}>
34-
<Align width={width} height={height} x={x} y={y} dataAttributes={{testid: 'story'}}>
35-
<Text2 regular>Content</Text2>
36-
</Align>
37-
</div>
40+
<Align width={width} height={height} x={x} y={y} dataAttributes={{testid: 'story'}}>
41+
<Text2 regular>Content</Text2>
42+
</Align>
3843
);
3944
};
4045

‎src/__stories__/avatar-story.tsx‎

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,50 @@
11
import * as React from 'react';
2-
import {Avatar, IconBrainRegular, IconFireRegular, IconStarFilled, ResponsiveLayout, Box} from '..';
2+
import { Avatar, IconBrainRegular, IconFireRegular, IconStarFilled, ResponsiveLayout, Box } from '..';
33
import avatarImg from './images/avatar.jpg';
44

5-
import type {Variant} from '../theme-variant-context';
5+
import type { Variant } from '../theme-variant-context';
66

77
const badgeOptions = ['true', 'false', 'undefined', '0', '1', '5', '10'];
88

99
export default {
1010
title: 'Components/Avatar',
1111
argTypes: {
1212
size: {
13-
control: {type: 'range', min: 24, max: 128, step: 4},
13+
control: { type: 'range', min: 24, max: 128, step: 4 },
1414
},
1515
badge: {
1616
options: badgeOptions,
17-
control: {type: 'select'},
17+
control: { type: 'select' },
1818
},
1919
icon: {
2020
options: ['undefined', 'IconStarFilled', 'IconFireRegular', 'IconBrainRegular'],
21-
control: {type: 'select'},
21+
control: { type: 'select' },
2222
},
2323
variantOutside: {
2424
options: ['default', 'brand', 'negative', 'alternative'],
25-
control: {type: 'select'},
25+
control: { type: 'select' },
2626
},
2727
},
2828
parameters: {
2929
fullScreen: true,
3030
},
31+
decorators: [
32+
(Story: any, context: any) => (
33+
<ResponsiveLayout variant={context.args.variantOutside || 'default'} fullWidth>
34+
<Box padding={16} width="fit-content" dataAttributes={{ testid: 'avatar' }}>
35+
<div
36+
style={{
37+
// prevent line-height from affecting the height of the container;
38+
// happens when changing the base font size
39+
lineHeight: 0,
40+
}}
41+
>
42+
<Story />
43+
</div>
44+
</Box>
45+
</ResponsiveLayout>
46+
),
47+
],
3148
};
3249

3350
type Args = {
@@ -49,38 +66,25 @@ export const Default: StoryComponent<Args> = ({
4966
badge,
5067
src,
5168
icon,
52-
variantOutside,
5369
hideImage,
5470
hideInitials,
5571
ariaLabel,
5672
border,
5773
}) => {
5874
// eslint-disable-next-line no-eval
5975
const badgeValue = badgeOptions.includes(badge) ? eval(badge) : undefined;
60-
const Icon = {IconStarFilled, IconFireRegular, IconBrainRegular}[icon];
76+
const Icon = { IconStarFilled, IconFireRegular, IconBrainRegular }[icon];
6177

6278
return (
63-
<ResponsiveLayout variant={variantOutside} fullWidth>
64-
<Box padding={16} width="fit-content" dataAttributes={{testid: 'avatar'}}>
65-
<div
66-
style={{
67-
// prevent line-height from affecting the height of the container;
68-
// happens when changing the base font size
69-
lineHeight: 0,
70-
}}
71-
>
72-
<Avatar
73-
size={size}
74-
src={hideImage ? undefined : src || undefined}
75-
initials={hideInitials ? undefined : initials}
76-
badge={badgeValue}
77-
Icon={Icon}
78-
aria-label={ariaLabel}
79-
border={border}
80-
/>
81-
</div>
82-
</Box>
83-
</ResponsiveLayout>
79+
<Avatar
80+
size={size}
81+
src={hideImage ? undefined : src || undefined}
82+
initials={hideInitials ? undefined : initials}
83+
badge={badgeValue}
84+
Icon={Icon}
85+
aria-label={ariaLabel}
86+
border={border}
87+
/>
8488
);
8589
};
8690

‎src/__stories__/badge-story.tsx‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,28 +16,33 @@ export default {
1616
},
1717
},
1818
parameters: {fullScreen: true},
19+
decorators: [
20+
(Story: any, context: any) => (
21+
<ResponsiveLayout variant={context.args.variantOutside || 'default'} fullWidth>
22+
<Box padding={16} width="fit-content" dataAttributes={{testid: 'content'}}>
23+
<Story />
24+
</Box>
25+
</ResponsiveLayout>
26+
),
27+
],
1928
};
2029

2130
type Args = {
2231
variantOutside: Variant;
2332
value: string;
2433
};
2534

26-
export const Default: StoryComponent<Args> = ({variantOutside, value}) => {
35+
export const Default: StoryComponent<Args> = ({value}) => {
2736
return (
28-
<ResponsiveLayout variant={variantOutside} fullWidth>
29-
<Box padding={16} width="fit-content" dataAttributes={{testid: 'content'}}>
30-
<Badge value={value !== 'undefined' ? +value : undefined}>
31-
<Touchable
32-
style={{display: 'inline-block', width: 24, height: 24}}
33-
onPress={() => {}}
34-
aria-label="Read notifications"
35-
>
36-
<IconBellFilled />
37-
</Touchable>
38-
</Badge>
39-
</Box>
40-
</ResponsiveLayout>
37+
<Badge value={value !== 'undefined' ? +value : undefined}>
38+
<Touchable
39+
style={{display: 'inline-block', width: 24, height: 24}}
40+
onPress={() => {}}
41+
aria-label="Read notifications"
42+
>
43+
<IconBellFilled />
44+
</Touchable>
45+
</Badge>
4146
);
4247
};
4348

‎src/__stories__/boxed-story.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,29 @@ import {Box, Boxed, Text8, ResponsiveLayout} from '..';
44
export default {
55
title: 'Components/Primitives/Boxed',
66
parameters: {fullScreen: true},
7+
decorators: [
8+
(Story: any, context: any) => (
9+
<ResponsiveLayout dataAttributes={{testid: 'boxed'}} fullWidth variant={context.args.variantOutside || 'default'}>
10+
<Box padding={16}>
11+
<Story />
12+
</Box>
13+
</ResponsiveLayout>
14+
),
15+
],
716
};
817

918
type Args = {
1019
variant: 'default' | 'brand' | 'negative' | 'alternative';
1120
variantOutside: 'default' | 'brand' | 'negative' | 'alternative';
1221
};
1322

14-
export const Default: StoryComponent<Args> = ({variant, variantOutside}) => {
23+
export const Default: StoryComponent<Args> = ({variant}) => {
1524
return (
16-
<ResponsiveLayout dataAttributes={{testid: 'boxed'}} fullWidth variant={variantOutside}>
25+
<Boxed variant={variant}>
1726
<Box padding={16}>
18-
<Boxed variant={variant}>
19-
<Box padding={16}>
20-
<Text8>Text</Text8>
21-
</Box>
22-
</Boxed>
27+
<Text8>Text</Text8>
2328
</Box>
24-
</ResponsiveLayout>
29+
</Boxed>
2530
);
2631
};
2732

0 commit comments

Comments
 (0)