Skip to content

Commit 656d9a3

Browse files
gcornutgcornut
committed
chore(storybook): use theme context in storybook theme switcher
1 parent e7108ca commit 656d9a3

File tree

13 files changed

+70
-113
lines changed

13 files changed

+70
-113
lines changed

‎packages/lumx-react/.storybook/story-block/StoryBlock.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { ElementType } from 'react';
22
import classNames from 'classnames';
33
import isChromatic from 'chromatic/isChromatic';
44
import { toggleMaterialTheme } from './toggleMaterialTheme';
5+
import { ThemeProvider } from '@lumx/react';
56

67
import '@lumx/core/scss/lumx.scss';
78
import './index.scss';
@@ -18,21 +19,22 @@ const CLASSNAME = 'story-block';
1819
export const StoryBlock: React.FC<StoryBlockProps> = (props) => {
1920
const { Story, context } = props;
2021
const { theme, materialTheme } = context.globals;
21-
const args = { theme, ...context.args };
22-
if (args['theme'] === undefined || args['theme'] === '') delete args['theme'];
22+
const appliedTheme = context.args.theme || theme;
2323

2424
// Hard code today date for stable chromatic stories snapshots.
2525
context.parameters.today = isChromatic() ? new Date('May 25 2021 01:00') : new Date();
2626

27-
if (isChromatic()) return <Story args={args} />;
27+
if (isChromatic()) return <Story />;
2828

2929
React.useEffect(() => {
3030
toggleMaterialTheme(materialTheme !== 'true')
3131
}, [materialTheme])
3232

3333
return (
34-
<div className={classNames(CLASSNAME, context.parameters.hasGreyBackground && `${CLASSNAME}--has-grey-background`, `${CLASSNAME}--theme-${theme}`)}>
35-
<Story args={args} />
34+
<div className={classNames(CLASSNAME, context.parameters.hasGreyBackground && `${CLASSNAME}--has-grey-background`, `${CLASSNAME}--theme-${appliedTheme}`)}>
35+
<ThemeProvider value={appliedTheme || undefined}>
36+
<Story />
37+
</ThemeProvider>
3638
</div>
3739
);
3840
};

‎packages/lumx-react/src/components/autocomplete/Autocomplete.stories.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default { title: 'LumX components/autocomplete/Autocomplete' };
88

99
const cityNames = CITIES.map((city) => city.text);
1010

11-
export const Simple = ({ theme, ...args }: any) => {
11+
export const Simple = (args: any) => {
1212
const [showSuggestions, setShowSuggestions] = useState(false);
1313
const [value, setValue] = useState('');
1414
const inputRef = useRef(null);
@@ -43,7 +43,6 @@ export const Simple = ({ theme, ...args }: any) => {
4343

4444
return (
4545
<Autocomplete
46-
theme={theme}
4746
isOpen={showSuggestions && hasSuggestions}
4847
onClose={close}
4948
value={value}

‎packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.stories.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ interface City {
1313
text: string;
1414
}
1515

16-
export const Simple = ({ theme }: any) => {
16+
export const Simple = () => {
1717
const INITIAL_STATE_SHOW_SUGGESTIONS = false;
1818
const INITIAL_STATE_NAVIGATION_SUGGESTION = '';
1919

@@ -119,7 +119,6 @@ export const Simple = ({ theme }: any) => {
119119

120120
const renderChip = (city: City, index: number) => (
121121
<Chip
122-
theme={theme}
123122
isClickable
124123
key={index}
125124
after={<Icon icon={mdiClose} size={Size.xxs} />}
@@ -134,7 +133,6 @@ export const Simple = ({ theme }: any) => {
134133

135134
return (
136135
<AutocompleteMultiple
137-
theme={theme}
138136
isOpen={showSuggestions && hasSuggestions}
139137
onClose={closeAutocomplete}
140138
value={navigationSuggestionValue || filterValue}
@@ -149,13 +147,12 @@ export const Simple = ({ theme }: any) => {
149147
icon={mdiFlag}
150148
label="Label"
151149
>
152-
<List isClickable theme={theme}>
150+
<List isClickable>
153151
{filteredCities.map((city, index) => {
154152
const onItemSelected = () => setSelectedCity(city);
155153
return (
156154
<ListItem
157155
size={Size.tiny}
158-
theme={theme}
159156
key={city.id}
160157
isHighlighted={index === activeItemIndex}
161158
onItemSelected={onItemSelected}

‎packages/lumx-react/src/components/comment-block/CommentBlock.stories.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,21 +42,18 @@ export const FullFeatured = {
4242
fullDate: 'Monday, March 30, 2021 at 4:06 PM',
4343
hasActions: true,
4444
},
45-
render: ({ theme, ...props }: any) => (
45+
render: (props: any) => (
4646
<CommentBlock
47-
theme={theme}
4847
{...props}
4948
actions={[
50-
<Button theme={theme} emphasis="low" size="s" leftIcon={mdiHeart}>
49+
<Button emphasis="low" size="s" leftIcon={mdiHeart}>
5150
24 likes
5251
</Button>,
53-
<Button theme={theme} emphasis="low" size="s" leftIcon={mdiReply}>
52+
<Button emphasis="low" size="s" leftIcon={mdiReply}>
5453
Reply
5554
</Button>,
5655
]}
57-
headerActions={
58-
<IconButton label="Actions" icon={mdiDotsHorizontal} theme={theme} emphasis="low" size="s" />
59-
}
56+
headerActions={<IconButton label="Actions" icon={mdiDotsHorizontal} emphasis="low" size="s" />}
6057
/>
6158
),
6259
};

‎packages/lumx-react/src/components/navigation/Navigation.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@ export default {
3232
* Demonstrate a full-featured navigation
3333
*/
3434
export const FullFeatured = {
35-
render({ theme, itemProps, orientation }: any) {
35+
render({ itemProps, orientation }: any) {
3636
return (
37-
<Navigation theme={theme} aria-label="navigation" orientation={orientation}>
37+
<Navigation aria-label="navigation" orientation={orientation}>
3838
<Navigation.Item isCurrentPage label="Homepage" icon={mdiHome} href="#" {...itemProps} />
3939
<Navigation.Item
4040
label="Some very very very very very very very very very very very very very very very very very very very very very very very very very very very long text"

‎packages/lumx-react/src/components/popover/Popover.stories.tsx

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export const Placements = {
110110
],
111111
};
112112

113-
export const WithUpdatingChildren = ({ theme }: any) => {
113+
export const WithUpdatingChildren = () => {
114114
const anchorRef = useRef(null);
115115
const [isOpen, setIsOpen] = useState(false);
116116

@@ -142,7 +142,6 @@ export const WithUpdatingChildren = ({ theme }: any) => {
142142
<Popover
143143
closeOnClickAway
144144
closeOnEscape
145-
theme={theme}
146145
isOpen={isOpen}
147146
anchorRef={anchorRef}
148147
placement={Placement.BOTTOM_END}
@@ -159,7 +158,7 @@ export const WithUpdatingChildren = ({ theme }: any) => {
159158
);
160159
};
161160

162-
export const WithScrollingPopover = ({ theme }: any) => {
161+
export const WithScrollingPopover = () => {
163162
const anchorRef = useRef(null);
164163
const [isOpen, setIsOpen] = useState(false);
165164

@@ -179,7 +178,6 @@ export const WithScrollingPopover = ({ theme }: any) => {
179178
<Popover
180179
closeOnClickAway
181180
closeOnEscape
182-
theme={theme}
183181
isOpen={isOpen}
184182
anchorRef={anchorRef}
185183
placement={Placement.BOTTOM}
@@ -204,7 +202,7 @@ export const WithScrollingPopover = ({ theme }: any) => {
204202
);
205203
};
206204

207-
export const FitToAnchorWidth = ({ theme }: any) => {
205+
export const FitToAnchorWidth = () => {
208206
const demoPopperStyle = {
209207
alignItems: 'center',
210208
display: 'flex',
@@ -231,43 +229,43 @@ export const FitToAnchorWidth = ({ theme }: any) => {
231229
return (
232230
<div style={container}>
233231
<div>
234-
<Chip ref={maxWidthAnchorRef} theme={theme} size={Size.s}>
232+
<Chip ref={maxWidthAnchorRef} size={Size.s}>
235233
Anchor
236234
</Chip>
237235
</div>
238-
<Popover theme={theme} anchorRef={maxWidthAnchorRef} fitToAnchorWidth="maxWidth" isOpen placement="top">
236+
<Popover anchorRef={maxWidthAnchorRef} fitToAnchorWidth="maxWidth" isOpen placement="top">
239237
<div style={demoPopperStyle}>Popover maxWidth</div>
240238
</Popover>
241239
<div>
242-
<Chip ref={widthSmallAnchorRef} theme={theme} size={Size.s}>
240+
<Chip ref={widthSmallAnchorRef} size={Size.s}>
243241
Anchor
244242
</Chip>
245243
</div>
246-
<Popover theme={theme} anchorRef={widthSmallAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
244+
<Popover anchorRef={widthSmallAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
247245
<div style={demoPopperStyle}>Popover width small anchor</div>
248246
</Popover>
249247
<div>
250-
<Chip ref={widthLargeAnchorRef} theme={theme} size={Size.s}>
248+
<Chip ref={widthLargeAnchorRef} size={Size.s}>
251249
VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
252250
</Chip>
253251
</div>
254-
<Popover theme={theme} anchorRef={widthLargeAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
252+
<Popover anchorRef={widthLargeAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
255253
<div style={demoPopperStyle}>Popover width large anchor</div>
256254
</Popover>
257255
<div>
258-
<Chip ref={minWidthAnchorRef} theme={theme} size={Size.s}>
256+
<Chip ref={minWidthAnchorRef} size={Size.s}>
259257
VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
260258
</Chip>
261259
</div>
262-
<Popover theme={theme} anchorRef={minWidthAnchorRef} fitToAnchorWidth="minWidth" isOpen placement="top">
260+
<Popover anchorRef={minWidthAnchorRef} fitToAnchorWidth="minWidth" isOpen placement="top">
263261
<div style={demoPopperStyle}>Popover minWidth</div>
264262
</Popover>
265263
<div>
266-
<Chip ref={defaultWidthAnchorRef} theme={theme} size={Size.s}>
264+
<Chip ref={defaultWidthAnchorRef} size={Size.s}>
267265
VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
268266
</Chip>
269267
</div>
270-
<Popover theme={theme} anchorRef={defaultWidthAnchorRef} isOpen placement="top">
268+
<Popover anchorRef={defaultWidthAnchorRef} isOpen placement="top">
271269
<div style={demoPopperStyle}>Popover default</div>
272270
</Popover>
273271
</div>

‎packages/lumx-react/src/components/radio-button/RadioGroup.stories.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
33

44
export default { title: 'LumX components/radio-button/Radio Group' };
55

6-
export const Simple = ({ theme }: any) => {
6+
export const Simple = () => {
77
const [value, onChange] = useState('lorem');
88

99
return (
@@ -13,7 +13,6 @@ export const Simple = ({ theme }: any) => {
1313
helper="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur."
1414
label="Radio button with help 1"
1515
name="test2"
16-
theme={theme}
1716
value="lorem"
1817
onChange={onChange as any}
1918
/>
@@ -23,7 +22,6 @@ export const Simple = ({ theme }: any) => {
2322
helper="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur."
2423
label="Radio button with help 2"
2524
name="test2"
26-
theme={theme}
2725
value="ipsum"
2826
onChange={onChange as any}
2927
/>
@@ -33,7 +31,6 @@ export const Simple = ({ theme }: any) => {
3331
helper="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur."
3432
label="Radio button with help 3"
3533
name="test2"
36-
theme={theme}
3734
value="dolor"
3835
onChange={onChange as any}
3936
/>

0 commit comments

Comments
 (0)