Skip to content

Commit d3487b8

Browse files
arturbienarturbien
committed
fixed theme not changing on certain stories
1 parent a4baaff commit d3487b8

File tree

8 files changed

+94
-99
lines changed

8 files changed

+94
-99
lines changed

‎src/components/Button/Button.stories.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@ import { withInfo } from "@storybook/addon-info";
33
import { storiesOf } from "@storybook/react";
44
import { action } from "@storybook/addon-actions";
55

6-
import styled from "styled-components";
6+
import styled, {ThemeProvider} from "styled-components";
77

88
import { Button, Window, WindowContent, Cutout, Toolbar } from "../";
99
export const actions = { onClick: action("onClick") };
1010

11+
const StyledCutout = styled(Cutout)`
12+
background: ${({theme})=>theme.canvas};
13+
`;
14+
1115
storiesOf("Button", module)
1216
.addDecorator(story => (
1317
<div
@@ -53,8 +57,8 @@ storiesOf("Button", module)
5357
.add("flat button", () => (
5458
<Window>
5559
<WindowContent>
56-
<Cutout
57-
style={{ padding: "1rem", background: "white", width: "300px" }}
60+
<StyledCutout
61+
style={{ padding: "1rem", width: "300px" }}
5862
>
5963
<p style={{ lineHeight: 1.3 }}>
6064
When you want to use Buttons on a light background (like scrollable
@@ -74,7 +78,7 @@ storiesOf("Button", module)
7478
</Button>
7579
</Toolbar>
7680
</div>
77-
</Cutout>
81+
</StyledCutout>
7882
</WindowContent>
7983
</Window>
8084
));

‎src/components/Checkbox/Checkbox.stories.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import React from "react";
22
import { storiesOf } from "@storybook/react";
3+
import styled from "styled-components";
34

45
import { Checkbox, Fieldset, Toolbar, Button, Cutout } from "../";
6+
7+
const StyledCutout = styled(Cutout)`
8+
background: ${({ theme }) => theme.canvas};
9+
`;
10+
const Wrapper = styled.div`
11+
background: ${({ theme }) => theme.material};
12+
padding: 5rem;
13+
`;
514
storiesOf("Checkbox", module)
6-
.addDecorator(story => (
7-
<div
8-
style={{
9-
padding: "5rem",
10-
background: "#ced0cf"
11-
}}
12-
>
13-
{story()}
14-
</div>
15-
))
15+
.addDecorator(story => <Wrapper>{story()}</Wrapper>)
1616
.add("controlled group", () => <ControlledCheckboxGroupExample />)
1717
.add("uncontrolled", () => (
1818
<Checkbox
@@ -22,7 +22,7 @@ storiesOf("Checkbox", module)
2222
/>
2323
))
2424
.add("flat", () => (
25-
<Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
25+
<StyledCutout style={{ padding: "1rem", width: "300px" }}>
2626
<p style={{ lineHeight: 1.3 }}>
2727
When you want to add input field on a light background (like scrollable
2828
content), just use the flat variant:
@@ -42,7 +42,7 @@ storiesOf("Checkbox", module)
4242
disabled
4343
/>
4444
</div>
45-
</Cutout>
45+
</StyledCutout>
4646
));
4747

4848
class ControlledCheckboxGroupExample extends React.Component {

‎src/components/Cutout/Cutout.stories.js‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import React from "react";
22
import { storiesOf } from "@storybook/react";
33

4-
import Cutout from "./Cutout";
4+
import { Cutout, Window, WindowContent } from "../";
55

6-
storiesOf("Cutout", module)
7-
.addDecorator(story => (
8-
<div
9-
style={{
10-
padding: "5rem",
11-
background: "#ced0cf"
12-
}}
13-
>
14-
{story()}
15-
</div>
16-
))
17-
.add("default", () => (
18-
<Cutout>
19-
<h1>swag </h1>
20-
</Cutout>
21-
));
6+
storiesOf("Cutout", module).add("default", () => (
7+
<Window>
8+
<WindowContent>
9+
<Cutout style={{ width: "300px", height: "200px" }}>
10+
<h1
11+
style={{
12+
fontFamily: "times new roman",
13+
textAlign: "center",
14+
fontSize: "3rem",
15+
marginTop: "0.5rem"
16+
}}
17+
>
18+
React95
19+
</h1>
20+
</Cutout>
21+
</WindowContent>
22+
</Window>
23+
));

‎src/components/NumberField/NumberField.stories.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import React from "react";
22
import { storiesOf } from "@storybook/react";
3+
import styled from "styled-components";
34

45
import { NumberField, Cutout } from "../";
56

7+
const StyledCutout = styled(Cutout)`
8+
background: ${({ theme }) => theme.canvas};
9+
`;
10+
const Wrapper = styled.div`
11+
background: ${({ theme }) => theme.material};
12+
padding: 5rem;
13+
`;
14+
615
storiesOf("NumberField", module)
7-
.addDecorator(story => (
8-
<div
9-
style={{
10-
padding: "5rem",
11-
background: "#ced0cf"
12-
}}
13-
>
14-
{story()}
15-
</div>
16-
))
16+
.addDecorator(story => <Wrapper>{story()}</Wrapper>)
1717
.add("default", () => (
1818
<NumberField value={1991} onChange={value => console.log(value)} />
1919
))
@@ -42,7 +42,7 @@ storiesOf("NumberField", module)
4242
/>
4343
))
4444
.add("flat", () => (
45-
<Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
45+
<StyledCutout style={{ padding: "2rem", width: "300px" }}>
4646
<p style={{ lineHeight: 1.3, marginBottom: "1rem" }}>
4747
When you want to use NumberField on a light background (like scrollable
4848
content), just use the flat variant:
@@ -53,5 +53,5 @@ storiesOf("NumberField", module)
5353
value={1991}
5454
onChange={value => console.log(value)}
5555
/>
56-
</Cutout>
56+
</StyledCutout>
5757
));

‎src/components/Progress/Progress.stories.js‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
import React from "react";
22
import { storiesOf } from "@storybook/react";
33

4-
import Progress from "./Progress";
4+
import styled from "styled-components";
55

6+
import { Progress } from "../";
7+
8+
const Wrapper = styled.div`
9+
background: ${({ theme }) => theme.material};
10+
padding: 5rem;
11+
`;
612
storiesOf("Progress", module)
7-
.addDecorator(story => (
8-
<div
9-
style={{
10-
padding: "5rem",
11-
background: "#ced0cf"
12-
}}
13-
>
14-
{story()}
15-
</div>
16-
))
13+
.addDecorator(story => <Wrapper>{story()}</Wrapper>)
1714
.add("default", () => <Progress percent={52} />)
1815
.add("no shadow", () => <Progress percent={52} shadow={false} />);

‎src/components/Select/Select.stories.js‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import { storiesOf } from "@storybook/react";
33
import { action } from "@storybook/addon-actions";
4+
import styled from "styled-components";
45

56
import { Select, Window, WindowContent, Cutout } from "../";
67

@@ -15,18 +16,13 @@ const items = [
1516
{ value: 6, label: "🛌🏻 Snorlax" },
1617
{ value: 7, label: "⛰ Geodude" }
1718
];
19+
const Wrapper = styled.div`
20+
background: ${({ theme }) => theme.material};
21+
padding: 5rem;
22+
`;
1823
const onChange = value => console.log(value);
1924
storiesOf("Select", module)
20-
.addDecorator(story => (
21-
<div
22-
style={{
23-
padding: "5rem",
24-
background: "#ced0cf"
25-
}}
26-
>
27-
{story()}
28-
</div>
29-
))
25+
.addDecorator(story => <Wrapper>{story()}</Wrapper>)
3026
.add("fixed width", () => (
3127
<Select items={items} onChange={onChange} width={150} />
3228
))

‎src/components/TextArea/TextArea.stories.js‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,20 @@ import React from "react";
22
import { storiesOf } from "@storybook/react";
33
import { action } from "@storybook/addon-actions";
44

5-
import TextArea from "./TextArea";
6-
import { Button, Cutout } from "../";
5+
import styled from "styled-components";
76

8-
const onChange = e => console.log(e.target.value);
7+
import { TextArea, Button, Cutout } from "../";
98

9+
const onChange = e => console.log(e.target.value);
10+
const StyledCutout = styled(Cutout)`
11+
background: ${({ theme }) => theme.canvas};
12+
`;
13+
const Wrapper = styled.div`
14+
background: ${({ theme }) => theme.material};
15+
padding: 5rem;
16+
`;
1017
storiesOf("TextArea", module)
11-
.addDecorator(story => (
12-
<div
13-
style={{
14-
padding: "5rem",
15-
background: "#ced0cf"
16-
}}
17-
>
18-
{story()}
19-
</div>
20-
))
18+
.addDecorator(story => <Wrapper>{story()}</Wrapper>)
2119
.add("default", () => (
2220
<TextArea
2321
defaultValue="User ReactGirl was the first one to find 🐛 here."
@@ -42,7 +40,7 @@ storiesOf("TextArea", module)
4240
<TextArea shadow={false} placeholder="Type in here.." onChange={onChange} />
4341
))
4442
.add("flat", () => (
45-
<Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
43+
<StyledCutout style={{ padding: "2rem", width: "300px" }}>
4644
<p style={{ lineHeight: 1.3 }}>
4745
When you want to add text area on a light background (like scrollable
4846
content), just use the flat variant:
@@ -56,10 +54,10 @@ storiesOf("TextArea", module)
5654
onChange={onChange}
5755
/>
5856
</div>
59-
</Cutout>
57+
</StyledCutout>
6058
))
6159
.add("flat disabled", () => (
62-
<Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
60+
<StyledCutout style={{ padding: "2rem", width: "300px" }}>
6361
<p style={{ lineHeight: 1.3 }}>
6462
When you want to add text area on a light background (like scrollable
6563
content), just use the flat variant:
@@ -74,7 +72,7 @@ storiesOf("TextArea", module)
7472
onChange={onChange}
7573
/>
7674
</div>
77-
</Cutout>
75+
</StyledCutout>
7876
));
7977
class ControlledTextAreaExample extends React.Component {
8078
state = {

‎src/components/TextField/TextField.stories.js‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
11
import React from "react";
22
import { storiesOf } from "@storybook/react";
33

4-
import TextField from "./TextField";
4+
import styled from "styled-components";
55

6-
import { Button, Toolbar, Cutout } from "../";
6+
import { TextField, Button, Toolbar, Cutout } from "../";
77

88
const onChange = e => console.log(e.target.value);
99

10+
const StyledCutout = styled(Cutout)`
11+
background: ${({ theme }) => theme.canvas};
12+
`;
13+
const Wrapper = styled.div`
14+
background: ${({ theme }) => theme.material};
15+
padding: 5rem;
16+
`;
1017
storiesOf("TextField", module)
11-
.addDecorator(story => (
12-
<div
13-
style={{
14-
padding: "5rem",
15-
background: "#ced0cf"
16-
}}
17-
>
18-
{story()}
19-
</div>
20-
))
18+
.addDecorator(story => <Wrapper>{story()}</Wrapper>)
2119
.add("default", () => <TextField defaultValue="" onChange={onChange} />)
2220
.add("controlled", () => <ControlledTextFieldExample />)
2321
.add("no shadow", () => (
@@ -30,7 +28,7 @@ storiesOf("TextField", module)
3028
<TextField defaultValue="Custom width" width={150} onChange={onChange} />
3129
))
3230
.add("flat", () => (
33-
<Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
31+
<StyledCutout style={{ padding: "2rem", width: "300px" }}>
3432
<p style={{ lineHeight: 1.3 }}>
3533
When you want to add input field on a light background (like scrollable
3634
content), just use the flat variant:
@@ -46,10 +44,10 @@ storiesOf("TextField", module)
4644
onChange={onChange}
4745
/>
4846
</div>
49-
</Cutout>
47+
</StyledCutout>
5048
))
5149
.add("flat disabled", () => (
52-
<Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
50+
<StyledCutout style={{ padding: "2rem", width: "300px" }}>
5351
<p style={{ lineHeight: 1.3 }}>
5452
When you want to add input field on a light background (like scrollable
5553
content), just use the flat variant:
@@ -66,7 +64,7 @@ storiesOf("TextField", module)
6664
onChange={onChange}
6765
/>
6866
</div>
69-
</Cutout>
67+
</StyledCutout>
7068
));
7169

7270
class ControlledTextFieldExample extends React.Component {

0 commit comments

Comments
 (0)