Skip to content

Commit 50c4fd3

Browse files
snowystingerdannify
snowystinger
and
dannify
authored
More chromatic stories (#1781)
* Add more components to chromatic * Add a few more * Add more chromatic stories * Add more chromatic stories * fix lint * comment out unsupported props help picker get right position * give a few chromatic stories more time Co-authored-by: Danni <[email protected]>
1 parent 24fd1a5 commit 50c4fd3

File tree

13 files changed

+761
-13
lines changed

13 files changed

+761
-13
lines changed

‎packages/@react-spectrum/accordion/chromatic/Accordion.chromatic.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*
2+
* Copyright 2020 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {Accordion, Item} from '../';
14+
import {Meta, Story} from '@storybook/react';
15+
import React from 'react';
16+
import {SpectrumAccordionProps} from '@react-types/accordion';
17+
18+
const meta: Meta<SpectrumAccordionProps<object>> = {
19+
title: 'Accordion',
20+
component: Accordion
21+
};
22+
23+
export default meta;
24+
25+
26+
const Template = <T extends object>(): Story<SpectrumAccordionProps<T>> => (args) => (
27+
<Accordion {...args}>
28+
<Item key="files" title="Your files">
29+
files
30+
</Item>
31+
<Item key="shared" title="Shared with you">
32+
shared
33+
</Item>
34+
<Item key="last" title="Last item">
35+
last
36+
</Item>
37+
</Accordion>
38+
);
39+
40+
41+
export const Default = Template().bind({});
42+
Default.args = {};
43+
44+
export const ExpandedKeys = Template().bind({});
45+
ExpandedKeys.args = {defaultExpandedKeys: ['shared']};
46+
47+
export const DisabledKeys = Template().bind({});
48+
DisabledKeys.args = {disabledKeys: ['shared']};

‎packages/@react-spectrum/breadcrumbs/chromatic/Breadcrumbs.chromatic.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*
2+
* Copyright 2020 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {Breadcrumbs, Item} from '../';
14+
import {Meta, Story} from '@storybook/react';
15+
import React from 'react';
16+
import {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs';
17+
18+
const meta: Meta<SpectrumBreadcrumbsProps<object>> = {
19+
title: 'Breadcrumbs',
20+
component: Breadcrumbs
21+
};
22+
23+
export default meta;
24+
25+
26+
const Template = <T extends object>(): Story<SpectrumBreadcrumbsProps<T>> => (args) => (
27+
<Breadcrumbs {...args}>
28+
<Item key="Folder 1">The quick brown fox jumps over</Item>
29+
<Item key="Folder 2">My Documents</Item>
30+
<Item key="Folder 3">Kangaroos jump high</Item>
31+
<Item key="Folder 4">Koalas are very cute</Item>
32+
<Item key="Folder 5">Wombat's noses</Item>
33+
<Item key="Folder 6">Wattle trees</Item>
34+
<Item key="Folder 7">April 7</Item>
35+
</Breadcrumbs>
36+
);
37+
38+
39+
export const Default = Template().bind({});
40+
Default.args = {};
41+
42+
export const IsMultiline = Template().bind({});
43+
IsMultiline.args = {isMultiline: true};
44+
45+
export const SizeS = Template().bind({});
46+
SizeS.args = {size: 'S'};
47+
48+
export const SizeM = Template().bind({});
49+
SizeM.args = {size: 'M'};
50+
51+
export const Truncated = Template().bind({});
52+
Truncated.args = {truncated: true};
53+
Truncated.decorators = [(Story) => <div style={{width: '100px'}}><Story /></div>];
54+
55+
export const ShowRoot = Template().bind({});
56+
ShowRoot.args = {showRoot: true};

‎packages/@react-spectrum/link/chromatic/Link.chromatic.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/*
2+
* Copyright 2020 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {Link} from '../';
14+
import {Meta, Story} from '@storybook/react';
15+
import React from 'react';
16+
import {SpectrumLinkProps} from '@react-types/link';
17+
18+
const meta: Meta<SpectrumLinkProps> = {
19+
title: 'Link',
20+
component: Link
21+
};
22+
23+
export default meta;
24+
25+
26+
const Template = (): Story<SpectrumLinkProps> => (args) => (
27+
<Link {...args}>
28+
This is a React Spectrum Link
29+
</Link>
30+
);
31+
32+
33+
export const Default = Template().bind({});
34+
Default.args = {};
35+
36+
export const Secondary = Template().bind({});
37+
Secondary.args = {variant: 'secondary'};
38+
39+
export const Quiet = Template().bind({});
40+
Quiet.args = {isQuiet: true};
41+
42+
export const QuietSecondary = Template().bind({});
43+
QuietSecondary.args = {...Secondary.args, ...Quiet.args};

‎packages/@react-spectrum/meter/chromatic/Meter.chromatic.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/*
2+
* Copyright 2020 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {Meta, Story} from '@storybook/react';
14+
import {Meter} from '../';
15+
import React from 'react';
16+
import {SpectrumMeterProps} from '@react-types/meter';
17+
18+
const meta: Meta<SpectrumMeterProps> = {
19+
title: 'Meter',
20+
component: Meter
21+
};
22+
23+
export default meta;
24+
25+
26+
const Template = (): Story<SpectrumMeterProps> => (args) => (
27+
<Meter {...args} />
28+
);
29+
30+
31+
export const Default = Template().bind({});
32+
Default.args = {label: 'Meter label', value: 50, variant: 'positive'};
33+
34+
export const SizeS = Template().bind({});
35+
SizeS.args = {...Default.args, size: 'S'};
36+
37+
export const ShowValueLabelFalse = Template().bind({});
38+
ShowValueLabelFalse.args = {...Default.args, showValueLabel: false};
39+
40+
export const LabelPositionSide = Template().bind({});
41+
LabelPositionSide.args = {...Default.args, labelPosition: 'side'};
42+
43+
export const Critical = Template().bind({});
44+
Critical.args = {...Default.args, variant: 'critical'};
45+
46+
export const Warning = Template().bind({});
47+
Warning.args = {...Default.args, variant: 'warning'};
48+
49+
export const Value0 = Template().bind({});
50+
Value0.args = {...Default.args, value: 0};
51+
52+
export const Value100 = Template().bind({});
53+
Value100.args = {...Default.args, value: 100};

‎packages/@react-spectrum/picker/chromatic/Picker.chromatic.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/*
2+
* Copyright 2020 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import AlignCenter from '@spectrum-icons/workflow/AlignCenter';
14+
import AlignLeft from '@spectrum-icons/workflow/AlignLeft';
15+
import AlignRight from '@spectrum-icons/workflow/AlignRight';
16+
import Copy from '@spectrum-icons/workflow/Copy';
17+
import Cut from '@spectrum-icons/workflow/Cut';
18+
import {Item, Picker, Section} from '../';
19+
import {Meta, Story} from '@storybook/react';
20+
import Paste from '@spectrum-icons/workflow/Paste';
21+
import React from 'react';
22+
import {SpectrumPickerProps} from '@react-types/select';
23+
import {Text} from '@react-spectrum/text';
24+
25+
const meta: Meta<SpectrumPickerProps<object>> = {
26+
title: 'Picker',
27+
component: Picker,
28+
parameters: {
29+
chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['medium'], disableAnimations: true},
30+
// chromatic needs a bit more time than disableAnimations allows
31+
chromatic: {delay: 300}
32+
},
33+
decorators: [Story => <div style={{height: '400px'}}><Story /></div>]
34+
};
35+
36+
export default meta;
37+
38+
39+
const Template = <T extends object>(): Story<SpectrumPickerProps<T>> => (args) => (
40+
<Picker {...args}>
41+
<Section title="Animals">
42+
<Item key="Aardvark">Aardvark</Item>
43+
<Item key="Kangaroo">Kangaroo</Item>
44+
<Item key="Snake">Snake</Item>
45+
</Section>
46+
<Section title="People">
47+
<Item key="Danni">Danni</Item>
48+
<Item key="Devon">Devon</Item>
49+
<Item key="Ross">Ross</Item>
50+
</Section>
51+
</Picker>
52+
);
53+
54+
const ComplexItemsTemplate = <T extends object>(): Story<SpectrumPickerProps<T>> => (args) => (
55+
<Picker {...args}>
56+
<Section title="Section 1">
57+
<Item textValue="Copy">
58+
<Copy />
59+
<Text>Copy</Text>
60+
</Item>
61+
<Item textValue="Cut">
62+
<Cut />
63+
<Text>Cut</Text>
64+
</Item>
65+
<Item textValue="Paste">
66+
<Paste />
67+
<Text>Paste</Text>
68+
</Item>
69+
</Section>
70+
<Section title="Section 2">
71+
<Item textValue="Puppy">
72+
<AlignLeft />
73+
<Text>Puppy</Text>
74+
<Text slot="description">Puppy description super long as well geez</Text>
75+
</Item>
76+
<Item textValue="Doggo with really really really long long long text">
77+
<AlignCenter />
78+
<Text>Doggo with really really really long long long text</Text>
79+
</Item>
80+
<Item textValue="Floof">
81+
<AlignRight />
82+
<Text>Floof</Text>
83+
</Item>
84+
</Section>
85+
</Picker>
86+
);
87+
88+
89+
export const Default = Template().bind({});
90+
Default.args = {label: 'Pick your favorite', isOpen: true};
91+
92+
// should probably fix this one
93+
export const Disabled = Template().bind({});
94+
Disabled.args = {...Default.args, isDisabled: true};
95+
96+
export const LabelAlignEnd = Template().bind({});
97+
LabelAlignEnd.args = {...Default.args, labelAlign: 'end'};
98+
99+
export const LabelPositionSide = Template().bind({});
100+
LabelPositionSide.args = {...Default.args, labelPosition: 'side'};
101+
102+
export const ValidationStateInvalid = Template().bind({});
103+
ValidationStateInvalid.args = {...Default.args, validationState: 'invalid'};
104+
105+
export const ValidationStateValid = Template().bind({});
106+
ValidationStateValid.args = {...Default.args, validationState: 'valid'};
107+
108+
export const ComplexItems = ComplexItemsTemplate().bind({});
109+
ComplexItems.args = {...Default.args};

‎packages/@react-spectrum/progress/chromatic/ProgressBar.chromatic.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/*
2+
* Copyright 2020 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {Meta, Story} from '@storybook/react';
14+
import {ProgressBar} from '../';
15+
import React, {CSSProperties} from 'react';
16+
import {SpectrumProgressBarProps} from '@react-types/progress';
17+
18+
const meta: Meta<SpectrumProgressBarProps> = {
19+
title: 'ProgressBar',
20+
component: ProgressBar
21+
};
22+
23+
export default meta;
24+
25+
const grayedBoxStyle: CSSProperties = {
26+
width: '250px',
27+
height: '60px',
28+
backgroundColor: 'rgba(0,0,0,0.4)',
29+
display: 'flex',
30+
alignItems: 'center',
31+
justifyContent: 'center'
32+
};
33+
34+
const Template = (): Story<SpectrumProgressBarProps> => (args) => (
35+
<ProgressBar {...args} />
36+
);
37+
38+
39+
export const Default = Template().bind({});
40+
Default.args = {label: 'Progress label', value: 50};
41+
42+
export const SizeS = Template().bind({});
43+
SizeS.args = {...Default.args, size: 'S'};
44+
45+
export const ShowValueLabelFalse = Template().bind({});
46+
ShowValueLabelFalse.args = {...Default.args, showValueLabel: false};
47+
48+
export const LabelPositionSide = Template().bind({});
49+
LabelPositionSide.args = {...Default.args, labelPosition: 'side'};
50+
51+
export const OverBackground = Template().bind({});
52+
OverBackground.args = {...Default.args, variant: 'overBackground'};
53+
OverBackground.decorators = [(Story) => <div style={grayedBoxStyle}><Story /></div>];
54+
55+
export const Value0 = Template().bind({});
56+
Value0.args = {...Default.args, value: 0};
57+
58+
export const Value100 = Template().bind({});
59+
Value100.args = {...Default.args, value: 100};

0 commit comments

Comments
 (0)