Skip to content

Commit 7b0e2f8

Browse files
LFDanLuGitHub Enterprise
LFDanLu
authored and
GitHub Enterprise
committed
Adding contextual help stories to docs build (#191)
1 parent c360e01 commit 7b0e2f8

File tree

4 files changed

+142
-28
lines changed

4 files changed

+142
-28
lines changed

‎packages/@react-spectrum/s2/stories/ComboBox.stories.tsx

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,48 @@ ContextualHelpExample.args = {
165165

166166
ContextualHelpExample.parameters = {
167167
docs: {
168-
disable: true
168+
source: {
169+
transform: () => {
170+
return `
171+
<ComboBox
172+
contextualHelp={
173+
<ContextualHelp>
174+
<Heading>
175+
What is a ice cream?
176+
</Heading>
177+
<Content>
178+
<Text>
179+
A combination of sugar, eggs, milk, and cream is cooked to make a custard base. Then, flavorings are added, and this flavored mixture is carefully churned and frozen to make ice cream.
180+
</Text>
181+
</Content>
182+
<Footer>
183+
<Link
184+
href="https://en.wikipedia.org/wiki/Ice_cream"
185+
isStandalone
186+
target="_blank">
187+
Learn more about ice cream
188+
</Link>
189+
</Footer>
190+
</ContextualHelp>
191+
}
192+
label="Ice cream flavor">
193+
<ComboBoxItem>
194+
Chocolate
195+
</ComboBoxItem>
196+
<ComboBoxItem>
197+
Mint
198+
</ComboBoxItem>
199+
<ComboBoxItem>
200+
Strawberry
201+
</ComboBoxItem>
202+
<ComboBoxItem>
203+
Vanilla
204+
</ComboBoxItem>
205+
<ComboBoxItem>
206+
Chocolate Chip Cookie Dough
207+
</ComboBoxItem>
208+
</ComboBox>`;
209+
}
210+
}
169211
}
170212
};

‎packages/@react-spectrum/s2/stories/RangeSlider.stories.tsx

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,37 @@ ContextualHelpExample.args = {
7070

7171
ContextualHelpExample.parameters = {
7272
docs: {
73-
disable: true
73+
source: {
74+
transform: () => {
75+
return `
76+
<RangeSlider
77+
contextualHelp={
78+
<ContextualHelp>
79+
<Heading>
80+
What is a ice cream?
81+
</Heading>
82+
<Content>
83+
<Text>
84+
A combination of sugar, eggs, milk, and cream is cooked to make a custard base. Then, flavorings are added, and this flavored mixture is carefully churned and frozen to make ice cream.
85+
</Text>
86+
</Content>
87+
<Footer>
88+
<Link
89+
href="https://en.wikipedia.org/wiki/Ice_cream"
90+
isStandalone
91+
target="_blank">
92+
Learn more about ice cream
93+
</Link>
94+
</Footer>
95+
</ContextualHelp>
96+
}
97+
defaultValue={{
98+
end: 60,
99+
start: 30
100+
}}
101+
label="Range"
102+
/>`;
103+
}
104+
}
74105
}
75106
};

‎packages/@react-spectrum/s2/stories/Slider.stories.tsx

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const meta: Meta<typeof Slider> = {
2121
component: Slider,
2222
parameters: {
2323
layout: 'centered',
24-
controls: {exclude: ['onChange']} // purposely excluded this control because it was slowing slider down a lot
24+
controls: {exclude: ['onChange']} // purposely excluded this control because it was slowing slider down a lot
2525
},
2626
tags: ['autodocs'],
2727
argTypes: {
@@ -102,6 +102,42 @@ ContextualHelpExample.args = {
102102

103103
ContextualHelpExample.parameters = {
104104
docs: {
105-
disable: true
105+
source: {
106+
transform: () => {
107+
return `
108+
<div
109+
style={{
110+
alignItems: 'start',
111+
display: 'flex',
112+
flexDirection: 'column',
113+
gap: 8
114+
}}>
115+
<Slider
116+
contextualHelp={
117+
<ContextualHelp>
118+
<Heading>
119+
What is a ice cream?
120+
</Heading>
121+
<Content>
122+
<Text>
123+
A combination of sugar, eggs, milk, and cream is cooked to make a custard base. Then, flavorings are added, and this flavored mixture is carefully churned and frozen to make ice cream.
124+
</Text>
125+
</Content>
126+
<Footer>
127+
<Link
128+
href="https://en.wikipedia.org/wiki/Ice_cream"
129+
isStandalone
130+
target="_blank">
131+
Learn more about ice cream
132+
</Link>
133+
</Footer>
134+
</ContextualHelp>
135+
}
136+
defaultValue={30}
137+
label="Cookies"
138+
/>
139+
</div>`;
140+
}
141+
}
106142
}
107143
};

‎packages/@react-spectrum/s2/stories/TextField.stories.tsx

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -49,29 +49,7 @@ Validation.args = {
4949
};
5050

5151
export const ContextualHelpExample = (args: any) => (
52-
<div
53-
className={style({
54-
width: 256,
55-
display: 'flex',
56-
flexDirection: 'column',
57-
rowGap: 12
58-
})}>
59-
<TextField {...args} size="S" />
60-
<TextField label="Segment" size="S" />
61-
<TextField {...args} size="M" />
62-
<TextField label="Segment" size="M" />
63-
<TextField {...args} size="L" />
64-
<TextField label="Segment" size="L" />
65-
<TextField {...args} size="XL" />
66-
<TextField label="Segment" size="XL" />
67-
<TextField
68-
{...args}
69-
size="M"
70-
label="Segments identify who your visitors are and much more." />
71-
<TextField
72-
size="M"
73-
label="Segments identify who your visitors are and much more." />
74-
</div>
52+
<TextField {...args} />
7553
);
7654

7755
ContextualHelpExample.args = {
@@ -97,7 +75,34 @@ ContextualHelpExample.args = {
9775

9876
ContextualHelpExample.parameters = {
9977
docs: {
100-
disable: true
78+
source: {
79+
transform: () => {
80+
return `
81+
<TextField
82+
contextualHelp={
83+
<ContextualHelp>
84+
<Heading>
85+
What is a segment?
86+
</Heading>
87+
<Content>
88+
<Text>
89+
Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.
90+
</Text>
91+
</Content>
92+
<Footer>
93+
<Link
94+
href="https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/administering/personalization/campaign-segmentation"
95+
isStandalone
96+
target="_blank">
97+
Learn more about segments
98+
</Link>
99+
</Footer>
100+
</ContextualHelp>
101+
}
102+
label="Segment"
103+
/>`;
104+
}
105+
}
101106
}
102107
};
103108

0 commit comments

Comments
 (0)