Skip to content

Commit c353e15

Browse files
yihuiliaodevongovett
yihuiliao
and
devongovett
authored
Remove S2 prefix from docs storybook (#7089)
* disable snapshot for regular stories, remove s2 from title * add chromatic stories from missing components * fix lint * add more chromatic stories for missing components and remove s2 prefix * remove disable snapshot, update chromatic-fc * Some docs improvements --------- Co-authored-by: Devon Govett <[email protected]>
1 parent 8ee13f3 commit c353e15

File tree

98 files changed

+2993
-134
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+2993
-134
lines changed

‎.chromatic-fc/main.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ module.exports = {
66
},
77
stories: [
88
'../packages/**/chromatic-fc/**/*.stories.{js,jsx,ts,tsx}',
9-
'../packages/@react-spectrum/s2/stories/*.stories.@(js|jsx|mjs|ts|tsx)'
9+
'../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)'
1010
],
1111
addons: process.env.NODE_ENV === 'production' ? [] : [
1212
'@storybook/addon-actions',

‎.chromatic/main.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ module.exports = {
66
},
77
stories: [
88
'../packages/**/chromatic/**/*.stories.@(js|jsx|ts|tsx)',
9-
'../packages/@react-spectrum/s2/stories/*.stories.@(js|jsx|mjs|ts|tsx)',
109
'../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)'
1110
],
1211
addons: process.env.NODE_ENV === 'production' ? [] : [

‎.storybook-s2/preview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const preview = {
2727
channel.on(DARK_MODE_EVENT_NAME, setDark);
2828
return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
2929
}, []);
30-
return <DocsContainer {...props} theme={dark ? themes.dark : themes.light} />;
30+
return <DocsContainer {...props} theme={{...(dark ? themes.dark : themes.light), appContentBg: 'var(--s2-container-bg)'}} />;
3131
},
3232
source: {
3333
// code: null, // Will disable code button, and show "No code available"

‎packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
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, Disclosure, DisclosureHeader, DisclosurePanel, TextField} from '../src';
14+
import type {Meta, StoryObj} from '@storybook/react';
15+
import React from 'react';
16+
import {style} from '../style/spectrum-theme' with { type: 'macro' };
17+
18+
const meta: Meta<typeof Accordion> = {
19+
component: Accordion,
20+
parameters: {
21+
chromaticProvider: {disableAnimations: true}
22+
},
23+
title: 'S2 Chromatic/Accordion'
24+
};
25+
26+
export default meta;
27+
type Story = StoryObj<typeof Accordion>;
28+
29+
export const Example: Story = {
30+
render: (args) => {
31+
return (
32+
<div className={style({minHeight: 240})}>
33+
<Accordion {...args}>
34+
<Disclosure id="files">
35+
<DisclosureHeader>
36+
Files
37+
</DisclosureHeader>
38+
<DisclosurePanel>
39+
Files content
40+
</DisclosurePanel>
41+
</Disclosure>
42+
<Disclosure id="people">
43+
<DisclosureHeader>
44+
People
45+
</DisclosureHeader>
46+
<DisclosurePanel>
47+
<TextField label="Name" styles={style({maxWidth: 176})} />
48+
</DisclosurePanel>
49+
</Disclosure>
50+
</Accordion>
51+
</div>
52+
);
53+
}
54+
};
55+
56+
export const WithLongTitle: Story = {
57+
render: (args) => {
58+
return (
59+
<div className={style({minHeight: 224})}>
60+
<Accordion styles={style({maxWidth: 224})} {...args}>
61+
<Disclosure>
62+
<DisclosureHeader>
63+
Files
64+
</DisclosureHeader>
65+
<DisclosurePanel>
66+
Files content
67+
</DisclosurePanel>
68+
</Disclosure>
69+
<Disclosure>
70+
<DisclosureHeader>
71+
People
72+
</DisclosureHeader>
73+
<DisclosurePanel>
74+
People content
75+
</DisclosurePanel>
76+
</Disclosure>
77+
<Disclosure>
78+
<DisclosureHeader>
79+
Very very very very very long title that wraps
80+
</DisclosureHeader>
81+
<DisclosurePanel>
82+
Accordion content
83+
</DisclosurePanel>
84+
</Disclosure>
85+
</Accordion>
86+
</div>
87+
);
88+
}
89+
};
90+
91+
export const WithDisabledDisclosure: Story = {
92+
render: (args) => {
93+
return (
94+
<div className={style({minHeight: 240})}>
95+
<Accordion {...args}>
96+
<Disclosure>
97+
<DisclosureHeader>
98+
Files
99+
</DisclosureHeader>
100+
<DisclosurePanel>
101+
Files content
102+
</DisclosurePanel>
103+
</Disclosure>
104+
<Disclosure isDisabled>
105+
<DisclosureHeader>
106+
People
107+
</DisclosureHeader>
108+
<DisclosurePanel>
109+
<TextField label="Name" />
110+
</DisclosurePanel>
111+
</Disclosure>
112+
</Accordion>
113+
</div>
114+
);
115+
}
116+
};
117+
118+
WithLongTitle.parameters = {
119+
docs: {
120+
disable: true
121+
}
122+
};
123+
124+
WithDisabledDisclosure.parameters = {
125+
docs: {
126+
disable: true
127+
}
128+
};
129+

‎packages/@react-spectrum/s2/chromatic/AvatarGroup.stories.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/*
2+
* Copyright 2024 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 {AvatarGroup} from '../src';
14+
import {Example, WithLabel, WithProviderBackground} from '../stories/AvatarGroup.stories';
15+
import type {Meta} from '@storybook/react';
16+
17+
const meta: Meta<typeof AvatarGroup> = {
18+
component: AvatarGroup,
19+
parameters: {
20+
chromaticProvider: {backgrounds: ['base', 'layer-1', 'layer-2'], disableAnimations: true}
21+
},
22+
title: 'S2 Chromatic/AvatarGroup'
23+
};
24+
25+
export default meta;
26+
27+
export {Example, WithLabel, WithProviderBackground};

0 commit comments

Comments
 (0)