themeing exercise preparation

Author: Horacio Herrera

src/components/patterns/Theming/Page.jsx

@@ -24,6 +24,7 @@ const Page = props => (
  <Example />
  <hr />
  <h3>Exercise</h3>
+ <p>go to <code>src/components/patterns/Theming/exercise/index.jsx</code> and start doing the TODOs mentioned in that file!</p>
  <Exercise />
  <hr />
  <h3>Bonus</h3>

src/components/patterns/Theming/bonus/components/App.jsx

@@ -1,18 +1,18 @@
 import React from "react";
-import { ThemeConsumer } from "./ThemeContext";
+// import { ThemeConsumer } from "./ThemeContext";
 import Button from "./Button";
 import Hero from "./Hero";
 
+/*
+ TODO:
+ - import the ThemeConsumer you exported from `ThemeContext`
+ - Wrap your Button with these consumer, and implement the `onClick` function in the button. (using render props + the `setValue` function)
+*/
+
 const App = () => (
- <ThemeConsumer>
- {({ setValue }) => (
- <Hero>
- <Button variant="secondary" onClick={setValue}>
- Theme Toggle
- </Button>
- </Hero>
- )}
- </ThemeConsumer>
+ <Hero>
+ <Button variant="secondary">Theme Toggle</Button>
+ </Hero>
 );
 
 export default App;

src/components/patterns/Theming/bonus/components/Button.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import styled from 'styled-components'
 
+// TODO: change the background-color of this button depending on the theme selected
 const StyledButton = styled.button`
  padding: 8px 16px;
  border-radius: 3px;
  border: none;
-
- background-color: ${({variant, theme}) => theme.colors[variant] || "white"};
- color: white;
+ color: black;
+ background: #dedede;
 `
 
 const Button = ({onClick, children, ...rest}) => (

src/components/patterns/Theming/bonus/components/Hero.jsx

@@ -1,19 +1,19 @@
 import React from 'react'
 import styled from 'styled-components'
 
+// TODO: add the theme background color to the Wrapper as `background-color`
 const Wrapper = styled("div")`
  padding: 100px 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
- background-color: ${({theme}) => theme.colors.background};
 `
 
+// TODO: add the primary color as the heading `color`
 const Heading = styled.h1`
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
- color: ${({theme}) => theme.colors.primary};
 `
 
 const Hero = ({children}) => (

src/components/patterns/Theming/bonus/components/Root.jsx

@@ -2,33 +2,39 @@ import React from 'react'
 import themes from '../theme'
 import { ThemeProvider as StyledProvider } from 'styled-components'
 
-const ThemeContext = React.createContext({});
+// First you need to create your `ThemeContext` (use React.CreateContext());
 
 class ThemeProvider extends React.Component {
+
+ // You should heep track of some sort of state to toggle the theme from `light` to `dark`
+ // (see the themes.js file)
  state = {
- theme: "light"
+ theme: "???"
  }
 
  handleThemeToggle = () => {
- this.setState(prevState => ({theme: prevState.theme === 'light' ? 'dark' : 'light'}))
+ /*
+ Toggle the theme state using `this.setState`.
+ remember you can call this function with a funcion as a parameter:
+ `this.setState(prevState => {}); // prevState is a reference to the actual previous state.
+ remember that `this.setState` is asynchronous
+ TODO: link to setState documentation!
+ */
  }
 
  render() {
- const { theme } = this.state;
- const { children } = this.props;
- console.log('theme => ', themes[theme]);
+ const { children } = this.props
  return (
- <ThemeContext.Provider value={{theme, setValue: this.handleThemeToggle}}>
- <StyledProvider theme={themes[theme]}>
- {children}
- </StyledProvider>
- </ThemeContext.Provider>
+ <div>
+ {children}
+ </div>
  )
  }
 }
-const ThemeConsumer = ThemeContext.Consumer;
+
+const ThemeConsumer = "???"
 
 export {
  ThemeProvider,
- ThemeConsumer
-}
+ ThemeConsumer // what should be the value of this variable ?? ThemeContext.???
+ }

src/components/patterns/Theming/bonus/components/ThemeContext.jsx

@@ -1,6 +1,6 @@
 import React from "react";
-import styled, { ThemeProvider } from "styled-components";
-import theme from "./theme";
+import styled from "styled-components";
+// import theme from "./theme";
 
 /*
  Exercise TODO:
@@ -16,28 +16,24 @@ import theme from "./theme";
 const Card = styled("div")`
  border-radius: 8px;
  padding: 16px;
- box-shadow: 0 0 8px 4px rgba(0,0,0,0.1);
+ box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);
  font-size: 18px;
  font-weight: 800;
  text-align: center;
- color: ${props => props.theme.colors.primary};
  background-color: white;
 `;
 
 /*
  in this component just use the background color from the theme and asign it to this component
 */
 const Wrapper = styled("div")`
- background-color: ${props => props.theme.colors.background};
  padding: 40px;
 `;
 
 const ThemingExercise = () => (
- <ThemeProvider theme={theme}>
- <Wrapper>
- <Card>Hallo I'm a Card</Card>
- </Wrapper>
- </ThemeProvider>
+ <Wrapper>
+ <Card>Hallo I'm a Card</Card>
+ </Wrapper>
 );
 
 export default ThemingExercise;

src/components/patterns/Theming/exercise/index.jsx

@@ -1,9 +1,5 @@
 const theme = {
- colors: {
- primary: "peru",
- secondary: "#f6f6ff",
- background: "papayawhip"
- }
+ // add some `colors` here maybe??
 }
 
 export default theme;

src/components/patterns/Theming/exercise/theme.js

@@ -1,3 +1,7 @@
+html, body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
 #page-wrap > div:first-child {
  position: absolute;
  height: 100%;