prepare styled-variants exercise

Author: Horacio Herrera

src/components/patterns/Variants/exercise/index.js

@@ -1,28 +1,33 @@
 import React from "react";
 import styled, { ThemeProvider } from "styled-components";
 import theme from "./theme";
-import { variant } from 'styled-system'
+// import { variant } from 'styled-system'
 
-const alertStyle = variant({
- key: 'alertStyles'
-})
+// TODO: create a variant called `alertStyle`
+/*
+ in order to add these new variant styles to your component,
+ you need to add it to your styles AT THE END.
+
+ *if you have questions why at the end ask us!
+*/
 
 const Alert = styled("div")`
  border-radius: 8px;
  padding: 8px;
- box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+ box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+ 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  font-size: 18px;
  margin: 24px;
  font-weight: 800;
  text-align: center;
- ${alertStyle}
 `;
 
 const Wrapper = styled("div")`
  background-color: ${props => props.theme.colors.background};
  padding: 40px;
 `;
 
+// TODO: here you have hints on how the variants should be named...
 const VariantsExercise = () => (
  <ThemeProvider theme={theme}>
  <Wrapper>

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

@@ -4,24 +4,7 @@ const theme = {
  secondary: "#f6f6ff",
  background: "papayawhip"
  },
- alertStyles: {
- default: {
- backgroundColor: "#f6f6ff",
- color: "#00f"
- },
- success: {
- backgroundColor: "#a4d167",
- color: '#fff'
- },
- warning: {
- backgroundColor: "#eecd02",
- color: '#000'
- },
- error: {
- backgroundColor: "#f00",
- color: "#fff"
- }
- }
+ // add some variants for your alerts here
 }
 
 export default theme;