fixed theme not changing on certain stories

Mrpanquecas · May 22, 2019 · d3487b8 · d3487b8
1 parent a4baaff
commit d3487b8
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 99 deletions.
diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
@@ -3,11 +3,15 @@ import { withInfo } from "@storybook/addon-info";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
-import styled from "styled-components";
+import styled, {ThemeProvider} from "styled-components";
 
 import { Button, Window, WindowContent, Cutout, Toolbar } from "../";
 export const actions = { onClick: action("onClick") };
 
+const StyledCutout = styled(Cutout)`
+  background: ${({theme})=>theme.canvas};
+`;
+
 storiesOf("Button", module)
   .addDecorator(story => (
     <div
@@ -53,8 +57,8 @@ storiesOf("Button", module)
   .add("flat button", () => (
     <Window>
       <WindowContent>
-        <Cutout
-          style={{ padding: "1rem", background: "white", width: "300px" }}
+        <StyledCutout
+          style={{ padding: "1rem", width: "300px" }}
         >
           <p style={{ lineHeight: 1.3 }}>
             When you want to use Buttons on a light background (like scrollable
@@ -74,7 +78,7 @@ storiesOf("Button", module)
               </Button>
             </Toolbar>
           </div>
-        </Cutout>
+        </StyledCutout>
       </WindowContent>
     </Window>
   ));
diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
@@ -1,18 +1,18 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
+import styled from "styled-components";
 
 import { Checkbox, Fieldset, Toolbar, Button, Cutout } from "../";
+
+const StyledCutout = styled(Cutout)`
+  background: ${({ theme }) => theme.canvas};
+`;
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.material};
+  padding: 5rem;
+`;
 storiesOf("Checkbox", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "#ced0cf"
-      }}
-    >
-      {story()}
-    </div>
-  ))
+  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
   .add("controlled group", () => <ControlledCheckboxGroupExample />)
   .add("uncontrolled", () => (
     <Checkbox
@@ -22,7 +22,7 @@ storiesOf("Checkbox", module)
     />
   ))
   .add("flat", () => (
-    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+    <StyledCutout style={{ padding: "1rem", width: "300px" }}>
       <p style={{ lineHeight: 1.3 }}>
         When you want to add input field on a light background (like scrollable
         content), just use the flat variant:
@@ -42,7 +42,7 @@ storiesOf("Checkbox", module)
           disabled
         />
       </div>
-    </Cutout>
+    </StyledCutout>
   ));
 
 class ControlledCheckboxGroupExample extends React.Component {

diff --git a/src/components/Cutout/Cutout.stories.js b/src/components/Cutout/Cutout.stories.js
@@ -1,21 +1,23 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 
-import Cutout from "./Cutout";
+import { Cutout, Window, WindowContent } from "../";
 
-storiesOf("Cutout", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "#ced0cf"
-      }}
-    >
-      {story()}
-    </div>
-  ))
-  .add("default", () => (
-    <Cutout>
-      <h1>swag </h1>
-    </Cutout>
-  ));
+storiesOf("Cutout", module).add("default", () => (
+  <Window>
+    <WindowContent>
+      <Cutout style={{ width: "300px", height: "200px" }}>
+        <h1
+          style={{
+            fontFamily: "times new roman",
+            textAlign: "center",
+            fontSize: "3rem",
+            marginTop: "0.5rem"
+          }}
+        >
+          React95
+        </h1>
+      </Cutout>
+    </WindowContent>
+  </Window>
+));
diff --git a/src/components/NumberField/NumberField.stories.js b/src/components/NumberField/NumberField.stories.js
@@ -1,19 +1,19 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
+import styled from "styled-components";
 
 import { NumberField, Cutout } from "../";
 
+const StyledCutout = styled(Cutout)`
+  background: ${({ theme }) => theme.canvas};
+`;
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.material};
+  padding: 5rem;
+`;
+
 storiesOf("NumberField", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "#ced0cf"
-      }}
-    >
-      {story()}
-    </div>
-  ))
+  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
   .add("default", () => (
     <NumberField value={1991} onChange={value => console.log(value)} />
   ))
@@ -42,7 +42,7 @@ storiesOf("NumberField", module)
     />
   ))
   .add("flat", () => (
-    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+    <StyledCutout style={{ padding: "2rem", width: "300px" }}>
       <p style={{ lineHeight: 1.3, marginBottom: "1rem" }}>
         When you want to use NumberField on a light background (like scrollable
         content), just use the flat variant:
@@ -53,5 +53,5 @@ storiesOf("NumberField", module)
         value={1991}
         onChange={value => console.log(value)}
       />
-    </Cutout>
+    </StyledCutout>
   ));
diff --git a/src/components/Progress/Progress.stories.js b/src/components/Progress/Progress.stories.js
@@ -1,18 +1,15 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 
-import Progress from "./Progress";
+import styled from "styled-components";
 
+import { Progress } from "../";
+
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.material};
+  padding: 5rem;
+`;
 storiesOf("Progress", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "#ced0cf"
-      }}
-    >
-      {story()}
-    </div>
-  ))
+  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
   .add("default", () => <Progress percent={52} />)
   .add("no shadow", () => <Progress percent={52} shadow={false} />);
diff --git a/src/components/Select/Select.stories.js b/src/components/Select/Select.stories.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
+import styled from "styled-components";
 
 import { Select, Window, WindowContent, Cutout } from "../";
 
@@ -15,18 +16,13 @@ const items = [
   { value: 6, label: "🛌🏻 Snorlax" },
   { value: 7, label: "⛰ Geodude" }
 ];
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.material};
+  padding: 5rem;
+`;
 const onChange = value => console.log(value);
 storiesOf("Select", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "#ced0cf"
-      }}
-    >
-      {story()}
-    </div>
-  ))
+  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
   .add("fixed width", () => (
     <Select items={items} onChange={onChange} width={150} />
   ))

diff --git a/src/components/TextArea/TextArea.stories.js b/src/components/TextArea/TextArea.stories.js
@@ -2,22 +2,20 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
-import TextArea from "./TextArea";
-import { Button, Cutout } from "../";
+import styled from "styled-components";
 
-const onChange = e => console.log(e.target.value);
+import { TextArea, Button, Cutout } from "../";
 
+const onChange = e => console.log(e.target.value);
+const StyledCutout = styled(Cutout)`
+  background: ${({ theme }) => theme.canvas};
+`;
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.material};
+  padding: 5rem;
+`;
 storiesOf("TextArea", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "#ced0cf"
-      }}
-    >
-      {story()}
-    </div>
-  ))
+  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
   .add("default", () => (
     <TextArea
       defaultValue="User ReactGirl was the first one to find 🐛 here."
@@ -42,7 +40,7 @@ storiesOf("TextArea", module)
     <TextArea shadow={false} placeholder="Type in here.." onChange={onChange} />
   ))
   .add("flat", () => (
-    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+    <StyledCutout style={{ padding: "2rem", width: "300px" }}>
       <p style={{ lineHeight: 1.3 }}>
         When you want to add text area on a light background (like scrollable
         content), just use the flat variant:
@@ -56,10 +54,10 @@ storiesOf("TextArea", module)
           onChange={onChange}
         />
       </div>
-    </Cutout>
+    </StyledCutout>
   ))
   .add("flat disabled", () => (
-    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+    <StyledCutout style={{ padding: "2rem", width: "300px" }}>
       <p style={{ lineHeight: 1.3 }}>
         When you want to add text area on a light background (like scrollable
         content), just use the flat variant:
@@ -74,7 +72,7 @@ storiesOf("TextArea", module)
           onChange={onChange}
         />
       </div>
-    </Cutout>
+    </StyledCutout>
   ));
 class ControlledTextAreaExample extends React.Component {
   state = {

diff --git a/src/components/TextField/TextField.stories.js b/src/components/TextField/TextField.stories.js
@@ -1,23 +1,21 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 
-import TextField from "./TextField";
+import styled from "styled-components";
 
-import { Button, Toolbar, Cutout } from "../";
+import { TextField, Button, Toolbar, Cutout } from "../";
 
 const onChange = e => console.log(e.target.value);
 
+const StyledCutout = styled(Cutout)`
+  background: ${({ theme }) => theme.canvas};
+`;
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.material};
+  padding: 5rem;
+`;
 storiesOf("TextField", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "#ced0cf"
-      }}
-    >
-      {story()}
-    </div>
-  ))
+  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
   .add("default", () => <TextField defaultValue="" onChange={onChange} />)
   .add("controlled", () => <ControlledTextFieldExample />)
   .add("no shadow", () => (
@@ -30,7 +28,7 @@ storiesOf("TextField", module)
     <TextField defaultValue="Custom width" width={150} onChange={onChange} />
   ))
   .add("flat", () => (
-    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+    <StyledCutout style={{ padding: "2rem", width: "300px" }}>
       <p style={{ lineHeight: 1.3 }}>
         When you want to add input field on a light background (like scrollable
         content), just use the flat variant:
@@ -46,10 +44,10 @@ storiesOf("TextField", module)
           onChange={onChange}
         />
       </div>
-    </Cutout>
+    </StyledCutout>
   ))
   .add("flat disabled", () => (
-    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+    <StyledCutout style={{ padding: "2rem", width: "300px" }}>
       <p style={{ lineHeight: 1.3 }}>
         When you want to add input field on a light background (like scrollable
         content), just use the flat variant:
@@ -66,7 +64,7 @@ storiesOf("TextField", module)
           onChange={onChange}
         />
       </div>
-    </Cutout>
+    </StyledCutout>
   ));
 
 class ControlledTextFieldExample extends React.Component {