Skip to content
This repository was archived by the owner on Dec 6, 2022. It is now read-only.

Commit cb15576

Browse files
SiAdcockSiAdcock
authored
Merge pull request #1100 from guardian/standardise-themes-in-stories
Standardise themes in stories
2 parents 9b66349 + 8a9b87c commit cb15576

File tree

20 files changed

+495
-575
lines changed

20 files changed

+495
-575
lines changed

‎packages/@guardian/src-accordion/Accordion.stories.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,13 @@ asPlayground(Playground);
3232

3333
// *****************************************************************************
3434

35-
export const WithCTALabels = Template.bind({});
36-
asChromaticStory(WithCTALabels);
35+
export const WithCTALabelsDefaultTheme = Template.bind({});
36+
asChromaticStory(WithCTALabelsDefaultTheme);
3737

3838
// *****************************************************************************
3939

40-
export const WithoutCTALabels = Template.bind({});
41-
WithoutCTALabels.args = {
40+
export const WithoutCTALabelsDefaultTheme = Template.bind({});
41+
WithoutCTALabelsDefaultTheme.args = {
4242
hideToggleLabel: true,
4343
};
44-
asChromaticStory(WithoutCTALabels);
44+
asChromaticStory(WithoutCTALabelsDefaultTheme);

‎packages/@guardian/src-button/Button.stories.tsx‎

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,10 @@ asPlayground(Playground);
9999
// *****************************************************************************
100100

101101
export const [
102-
PrimaryPriorityLightTheme,
103-
SecondaryPriorityLightTheme,
104-
TertiaryPriorityLightTheme,
105-
SubduedPriorityLightTheme,
102+
PrimaryPriorityDefaultTheme,
103+
SecondaryPriorityDefaultTheme,
104+
TertiaryPriorityDefaultTheme,
105+
SubduedPriorityDefaultTheme,
106106
] = priorityArgs.map((priority) =>
107107
createStory({ priority }, themeParameters.default),
108108
);
@@ -158,105 +158,105 @@ export const [
158158

159159
// *****************************************************************************
160160

161-
export const DefaultSizeLightTheme = Template.bind({});
162-
asChromaticStory(DefaultSizeLightTheme);
161+
export const DefaultSizeDefaultTheme = Template.bind({});
162+
asChromaticStory(DefaultSizeDefaultTheme);
163163

164164
// *****************************************************************************
165165

166-
export const SmallSizeLightTheme = Template.bind({});
167-
SmallSizeLightTheme.args = {
166+
export const SmallSizeDefaultTheme = Template.bind({});
167+
SmallSizeDefaultTheme.args = {
168168
size: 'small',
169169
};
170-
asChromaticStory(SmallSizeLightTheme);
170+
asChromaticStory(SmallSizeDefaultTheme);
171171

172172
// *****************************************************************************
173173

174-
export const XSmallSizeLightTheme = Template.bind({});
175-
XSmallSizeLightTheme.args = {
174+
export const XSmallSizeDefaultTheme = Template.bind({});
175+
XSmallSizeDefaultTheme.args = {
176176
size: 'xsmall',
177177
};
178-
asChromaticStory(XSmallSizeLightTheme);
178+
asChromaticStory(XSmallSizeDefaultTheme);
179179

180180
// *****************************************************************************
181181

182-
export const TextAndIconLeftDefaultSizeLightTheme = Template.bind({});
183-
TextAndIconLeftDefaultSizeLightTheme.args = {
182+
export const TextAndIconLeftDefaultSizeDefaultTheme = Template.bind({});
183+
TextAndIconLeftDefaultSizeDefaultTheme.args = {
184184
icon: <SvgCross />,
185185
};
186-
asChromaticStory(TextAndIconLeftDefaultSizeLightTheme);
186+
asChromaticStory(TextAndIconLeftDefaultSizeDefaultTheme);
187187

188188
// *****************************************************************************
189189

190-
export const TextAndIconRightDefaultSizeLightTheme = Template.bind({});
191-
TextAndIconRightDefaultSizeLightTheme.args = {
190+
export const TextAndIconRightDefaultSizeDefaultTheme = Template.bind({});
191+
TextAndIconRightDefaultSizeDefaultTheme.args = {
192192
icon: <SvgCross />,
193193
iconSide: 'right',
194194
};
195-
asChromaticStory(TextAndIconRightDefaultSizeLightTheme);
195+
asChromaticStory(TextAndIconRightDefaultSizeDefaultTheme);
196196

197197
// *****************************************************************************
198198

199-
export const TextAndIconLeftSmallSizeLightTheme = Template.bind({});
200-
TextAndIconLeftSmallSizeLightTheme.args = {
199+
export const TextAndIconLeftSmallSizeDefaultTheme = Template.bind({});
200+
TextAndIconLeftSmallSizeDefaultTheme.args = {
201201
icon: <SvgCross />,
202202
size: 'small',
203203
};
204-
asChromaticStory(TextAndIconLeftSmallSizeLightTheme);
204+
asChromaticStory(TextAndIconLeftSmallSizeDefaultTheme);
205205

206206
// *****************************************************************************
207207

208-
export const TextAndIconRightSmallSizeLightTheme = Template.bind({});
209-
TextAndIconRightSmallSizeLightTheme.args = {
208+
export const TextAndIconRightSmallSizeDefaultTheme = Template.bind({});
209+
TextAndIconRightSmallSizeDefaultTheme.args = {
210210
icon: <SvgCross />,
211211
iconSide: 'right',
212212
size: 'small',
213213
};
214-
asChromaticStory(TextAndIconRightSmallSizeLightTheme);
214+
asChromaticStory(TextAndIconRightSmallSizeDefaultTheme);
215215

216216
// *****************************************************************************
217217

218-
export const TextAndIconLeftXSmallSizeLightTheme = Template.bind({});
219-
TextAndIconLeftXSmallSizeLightTheme.args = {
218+
export const TextAndIconLeftXSmallSizeDefaultTheme = Template.bind({});
219+
TextAndIconLeftXSmallSizeDefaultTheme.args = {
220220
icon: <SvgCross />,
221221
size: 'xsmall',
222222
};
223-
asChromaticStory(TextAndIconLeftXSmallSizeLightTheme);
223+
asChromaticStory(TextAndIconLeftXSmallSizeDefaultTheme);
224224

225225
// *****************************************************************************
226226

227-
export const TextAndIconRightXSmallSizeLightTheme = Template.bind({});
228-
TextAndIconRightXSmallSizeLightTheme.args = {
227+
export const TextAndIconRightXSmallSizeDefaultTheme = Template.bind({});
228+
TextAndIconRightXSmallSizeDefaultTheme.args = {
229229
icon: <SvgCross />,
230230
iconSide: 'right',
231231
size: 'xsmall',
232232
};
233-
asChromaticStory(TextAndIconRightXSmallSizeLightTheme);
233+
asChromaticStory(TextAndIconRightXSmallSizeDefaultTheme);
234234

235235
// *****************************************************************************
236236

237-
export const IconOnlyDefaultSizeLightTheme = Template.bind({});
238-
IconOnlyDefaultSizeLightTheme.args = {
237+
export const IconOnlyDefaultSizeDefaultTheme = Template.bind({});
238+
IconOnlyDefaultSizeDefaultTheme.args = {
239239
icon: <SvgCross />,
240240
hideLabel: true,
241241
};
242-
asChromaticStory(IconOnlyDefaultSizeLightTheme);
242+
asChromaticStory(IconOnlyDefaultSizeDefaultTheme);
243243

244244
// *****************************************************************************
245245

246-
export const IconOnlySmallSizeLightTheme = Template.bind({});
247-
IconOnlySmallSizeLightTheme.args = {
246+
export const IconOnlySmallSizeDefaultTheme = Template.bind({});
247+
IconOnlySmallSizeDefaultTheme.args = {
248248
icon: <SvgCross />,
249249
hideLabel: true,
250250
size: 'small',
251251
};
252-
asChromaticStory(IconOnlySmallSizeLightTheme);
252+
asChromaticStory(IconOnlySmallSizeDefaultTheme);
253253

254254
// *****************************************************************************
255255

256-
export const IconOnlyXSmallSizeLightTheme = Template.bind({});
257-
IconOnlyXSmallSizeLightTheme.args = {
256+
export const IconOnlyXSmallSizeDefaultTheme = Template.bind({});
257+
IconOnlyXSmallSizeDefaultTheme.args = {
258258
icon: <SvgCross />,
259259
hideLabel: true,
260260
size: 'xsmall',
261261
};
262-
asChromaticStory(IconOnlyXSmallSizeLightTheme);
262+
asChromaticStory(IconOnlyXSmallSizeDefaultTheme);

‎packages/@guardian/src-button/LinkButton.stories.tsx‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ asPlayground(Playground);
4343
// *****************************************************************************
4444

4545
export const [
46-
PrimaryPriorityLightTheme,
47-
SecondaryPriorityLightTheme,
48-
TertiaryPriorityLightTheme,
49-
SubduedPriorityLightTheme,
46+
PrimaryPriorityDefaultTheme,
47+
SecondaryPriorityDefaultTheme,
48+
TertiaryPriorityDefaultTheme,
49+
SubduedPriorityDefaultTheme,
5050
] = priorityArgs.map((priority) => {
5151
const story = Template.bind({});
5252

@@ -60,103 +60,103 @@ export const [
6060

6161
// *****************************************************************************
6262

63-
export const TextAndIconLeftDefaultSizeLightTheme = Template.bind({});
64-
TextAndIconLeftDefaultSizeLightTheme.args = {
63+
export const TextAndIconLeftDefaultSizeDefaultTheme = Template.bind({});
64+
TextAndIconLeftDefaultSizeDefaultTheme.args = {
6565
icon: <SvgArrowRightStraight />,
6666
};
67-
asChromaticStory(TextAndIconLeftDefaultSizeLightTheme);
67+
asChromaticStory(TextAndIconLeftDefaultSizeDefaultTheme);
6868

6969
// *****************************************************************************
7070

71-
export const TextAndIconRightDefaultSizeLightTheme = Template.bind({});
72-
TextAndIconRightDefaultSizeLightTheme.args = {
71+
export const TextAndIconRightDefaultSizeDefaultTheme = Template.bind({});
72+
TextAndIconRightDefaultSizeDefaultTheme.args = {
7373
icon: <SvgArrowRightStraight />,
7474
iconSide: 'right',
7575
};
76-
asChromaticStory(TextAndIconRightDefaultSizeLightTheme);
76+
asChromaticStory(TextAndIconRightDefaultSizeDefaultTheme);
7777

7878
// *****************************************************************************
7979

80-
export const TextAndIconLeftSmallSizeLightTheme = Template.bind({});
81-
TextAndIconLeftSmallSizeLightTheme.args = {
80+
export const TextAndIconLeftSmallSizeDefaultTheme = Template.bind({});
81+
TextAndIconLeftSmallSizeDefaultTheme.args = {
8282
icon: <SvgArrowRightStraight />,
8383
size: 'small',
8484
};
85-
asChromaticStory(TextAndIconLeftSmallSizeLightTheme);
85+
asChromaticStory(TextAndIconLeftSmallSizeDefaultTheme);
8686

8787
// *****************************************************************************
8888

89-
export const TextAndIconRightSmallSizeLightTheme = Template.bind({});
90-
TextAndIconRightSmallSizeLightTheme.args = {
89+
export const TextAndIconRightSmallSizeDefaultTheme = Template.bind({});
90+
TextAndIconRightSmallSizeDefaultTheme.args = {
9191
icon: <SvgArrowRightStraight />,
9292
iconSide: 'right',
9393
size: 'small',
9494
};
95-
asChromaticStory(TextAndIconRightSmallSizeLightTheme);
95+
asChromaticStory(TextAndIconRightSmallSizeDefaultTheme);
9696

9797
// *****************************************************************************
9898

99-
export const TextAndIconLeftXSmallSizeLightTheme = Template.bind({});
100-
TextAndIconLeftXSmallSizeLightTheme.args = {
99+
export const TextAndIconLeftXSmallSizeDefaultTheme = Template.bind({});
100+
TextAndIconLeftXSmallSizeDefaultTheme.args = {
101101
icon: <SvgArrowRightStraight />,
102102
size: 'xsmall',
103103
};
104-
asChromaticStory(TextAndIconLeftXSmallSizeLightTheme);
104+
asChromaticStory(TextAndIconLeftXSmallSizeDefaultTheme);
105105

106106
// *****************************************************************************
107107

108-
export const TextAndIconRightXSmallSizeLightTheme = Template.bind({});
109-
TextAndIconRightXSmallSizeLightTheme.args = {
108+
export const TextAndIconRightXSmallSizeDefaultTheme = Template.bind({});
109+
TextAndIconRightXSmallSizeDefaultTheme.args = {
110110
icon: <SvgArrowRightStraight />,
111111
iconSide: 'right',
112112
size: 'xsmall',
113113
};
114-
asChromaticStory(TextAndIconRightXSmallSizeLightTheme);
114+
asChromaticStory(TextAndIconRightXSmallSizeDefaultTheme);
115115

116116
// *****************************************************************************
117117

118-
export const TextAndIconLeftWithNudgeLightTheme = Template.bind({});
119-
TextAndIconLeftWithNudgeLightTheme.args = {
118+
export const TextAndIconLeftWithNudgeDefaultTheme = Template.bind({});
119+
TextAndIconLeftWithNudgeDefaultTheme.args = {
120120
icon: <SvgArrowRightStraight />,
121121
nudgeIcon: true,
122122
};
123-
asChromaticStory(TextAndIconLeftWithNudgeLightTheme);
123+
asChromaticStory(TextAndIconLeftWithNudgeDefaultTheme);
124124

125125
// *****************************************************************************
126126

127-
export const TextAndIconRightWithNudgeLightTheme = Template.bind({});
128-
TextAndIconRightWithNudgeLightTheme.args = {
127+
export const TextAndIconRightWithNudgeDefaultTheme = Template.bind({});
128+
TextAndIconRightWithNudgeDefaultTheme.args = {
129129
icon: <SvgArrowRightStraight />,
130130
iconSide: 'right',
131131
nudgeIcon: true,
132132
};
133-
asChromaticStory(TextAndIconRightWithNudgeLightTheme);
133+
asChromaticStory(TextAndIconRightWithNudgeDefaultTheme);
134134

135135
// *****************************************************************************
136136

137-
export const IconOnlyDefaultSizeLightTheme = Template.bind({});
138-
IconOnlyDefaultSizeLightTheme.args = {
137+
export const IconOnlyDefaultSizeDefaultTheme = Template.bind({});
138+
IconOnlyDefaultSizeDefaultTheme.args = {
139139
icon: <SvgArrowRightStraight />,
140140
hideLabel: true,
141141
};
142-
asChromaticStory(IconOnlyDefaultSizeLightTheme);
142+
asChromaticStory(IconOnlyDefaultSizeDefaultTheme);
143143

144144
// *****************************************************************************
145145

146-
export const IconOnlySmallSizeLightTheme = Template.bind({});
147-
IconOnlySmallSizeLightTheme.args = {
146+
export const IconOnlySmallSizeDefaultTheme = Template.bind({});
147+
IconOnlySmallSizeDefaultTheme.args = {
148148
icon: <SvgArrowRightStraight />,
149149
size: 'small',
150150
hideLabel: true,
151151
};
152-
asChromaticStory(IconOnlySmallSizeLightTheme);
152+
asChromaticStory(IconOnlySmallSizeDefaultTheme);
153153

154154
// *****************************************************************************
155155

156-
export const IconOnlyXSmallSizeLightTheme = Template.bind({});
157-
IconOnlyXSmallSizeLightTheme.args = {
156+
export const IconOnlyXSmallSizeDefaultTheme = Template.bind({});
157+
IconOnlyXSmallSizeDefaultTheme.args = {
158158
icon: <SvgArrowRightStraight />,
159159
size: 'xsmall',
160160
hideLabel: true,
161161
};
162-
asChromaticStory(IconOnlyXSmallSizeLightTheme);
162+
asChromaticStory(IconOnlyXSmallSizeDefaultTheme);

‎packages/@guardian/src-checkbox/Checkbox.stories.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ asPlayground(Playground);
3737

3838
// *****************************************************************************
3939

40-
export const DefaultLightTheme = Template.bind({});
41-
asChromaticStory(DefaultLightTheme);
40+
export const DefaultDefaultTheme = Template.bind({});
41+
asChromaticStory(DefaultDefaultTheme);
4242

4343
// *****************************************************************************
4444

@@ -53,11 +53,11 @@ asChromaticStory(DefaultBrandTheme);
5353

5454
// *****************************************************************************
5555

56-
export const SupportingTextLightTheme = Template.bind({});
57-
SupportingTextLightTheme.args = {
56+
export const SupportingTextDefaultTheme = Template.bind({});
57+
SupportingTextDefaultTheme.args = {
5858
supporting: 'Supporting text',
5959
};
60-
asChromaticStory(SupportingTextLightTheme);
60+
asChromaticStory(SupportingTextDefaultTheme);
6161

6262
// *****************************************************************************
6363

@@ -75,12 +75,12 @@ asChromaticStory(SupportingTextBrandTheme);
7575

7676
// *****************************************************************************
7777

78-
export const SupportingTextOnlyLightTheme = Template.bind({});
79-
SupportingTextOnlyLightTheme.args = {
78+
export const SupportingTextOnlyDefaultTheme = Template.bind({});
79+
SupportingTextOnlyDefaultTheme.args = {
8080
label: null,
8181
supporting: 'Supporting text',
8282
};
83-
asChromaticStory(SupportingTextOnlyLightTheme);
83+
asChromaticStory(SupportingTextOnlyDefaultTheme);
8484

8585
// *****************************************************************************
8686

@@ -99,11 +99,11 @@ asChromaticStory(SupportingTextOnlyBrandTheme);
9999

100100
// *****************************************************************************
101101

102-
export const IndeterminateLightTheme = Template.bind({});
103-
IndeterminateLightTheme.args = {
102+
export const IndeterminateDefaultTheme = Template.bind({});
103+
IndeterminateDefaultTheme.args = {
104104
indeterminate: true,
105105
};
106-
asChromaticStory(IndeterminateLightTheme);
106+
asChromaticStory(IndeterminateDefaultTheme);
107107

108108
// *****************************************************************************
109109

@@ -121,9 +121,9 @@ asChromaticStory(IndeterminateBrandTheme);
121121

122122
// *****************************************************************************
123123

124-
export const UnlabelledLightTheme = Template.bind({});
125-
UnlabelledLightTheme.args = {
124+
export const UnlabelledDefaultTheme = Template.bind({});
125+
UnlabelledDefaultTheme.args = {
126126
label: null,
127127
'aria-label': 'Checkbox',
128128
};
129-
asChromaticStory(UnlabelledLightTheme);
129+
asChromaticStory(UnlabelledDefaultTheme);

0 commit comments

Comments
 (0)