Styled-components

chapter07/package.json

@@ -17,28 +17,30 @@
         "flow": "^0.2.3",
         "flow-bin": "^0.75.0",
         "flow-typed": "^2.4.0",
+        "node-sass-chokidar": "^1.3.0",
+        "npm-run-all": "^4.1.3",
         "react-app-rewire-eslint": "^0.2.3",
         "react-app-rewire-scss": "^1.0.2",
         "react-app-rewired": "^1.5.2"
     },
     "dependencies": {
-        "node-sass-chokidar": "^1.3.0",
-        "npm-run-all": "^4.1.3",
+        "color": "^3.0.0",
         "react": "^16.4.1",
-        "react-dom": "^16.4.1"
+        "react-dom": "^16.4.1",
+        "styled-components": "^3.3.3"
     },
     "scripts": {
-        "build-css": "node-sass-chokidar src/ -o src/",
-        "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
+        "build-scss": "node-sass-chokidar src/ -o src/",
+        "watch-scss": "npm run build-scss && node-sass-chokidar src/ -o src/ --watch --recursive",
         "start-js": "react-app-rewired start",
         "build-js": "react-app-rewired build",
-        "start": "npm-run-all -p watch-css start-js",
-        "build": "npm-run-all build-css build-js",
+        "storybook-js": "start-storybook -p 9001 -c .storybook",
+        "start": "npm-run-all -p watch-scss start-js",
+        "build": "npm-run-all build-scss build-js",
+        "storybook": "npm-run-all -p watch-scss storybook-js",
+        "build-storybook": "build-storybook -c .storybook -o out_sb",
         "test": "react-app-rewired test --env=jsdom",
         "eject": "react-app-rewired eject",
-        "storybook-js": "start-storybook -p 9001 -c .storybook",
-        "storybook": "npm-run-all -p watch-css storybook-js",
-        "build-storybook": "build-storybook -c .storybook -o out_sb",
         "flow": "flow",
         "addTypes": "flow-typed install"
     }

chapter07/src/components/sassButton/index.js

@@ -15,17 +15,13 @@ export class SassButton extends React.PureComponent<{
         onSelect: PropTypes.func.isRequired
     };
 
-    onSelect() {
-        this.props.onSelect();
-    }
-
     render() {
         return (
             <div
                 className={
                     this.props.normal ? "normalButton" : "alertButton"
                 }
-                onClick={this.onSelect.bind(this)}
+                onClick={this.props.onSelect}
             >
                 <span>{this.props.buttonText}</span>
             </div>

chapter07/src/components/sassButton/styles.css

@@ -4,6 +4,9 @@
   padding: 5px 10px;
   border-radius: 3px; }
 
+/*
+    A simple button for normal situations
+*/
 .normalButton {
   background-color: green; }
   .normalButton:hover {
@@ -13,6 +16,9 @@
     color: yellow;
     font-weight: bold; }
 
+/*
+    An alert button for warnings or errors
+*/
 .alertButton {
   background-color: red; }
   .alertButton:hover {

chapter07/src/components/sassButton/styles.scss

@@ -1,6 +1,4 @@
 @import "_constants.scss";
-// @import "_darken.scss";
-// @import "_coloredText.scss";
 @import "_mixins.scss";
 
 %baseButton {
@@ -10,6 +8,9 @@
     border-radius: 3px;
 }
 
+/*
+    A simple button for normal situations
+*/
 .normalButton {
     @extend %baseButton;
     @include darkenBackground($normalColor);
@@ -19,6 +20,9 @@
     }
 }
 
+/*
+    An alert button for warnings or errors
+*/
 .alertButton {
     @extend %baseButton;
     @include darkenBackground($alertColor);

chapter07/src/components/styledButton/constants.js

@@ -0,0 +1,5 @@
+export const NORMAL_COLOR = "green";
+export const NORMAL_TEXT = "yellow";
+
+export const ALERT_COLOR = "red";
+export const ALERT_TEXT = "white";

chapter07/src/components/styledButton/index.js

@@ -0,0 +1,63 @@
+/* @flow */
+
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import Color from "color";
+
+import {
+    NORMAL_TEXT,
+    NORMAL_COLOR,
+    ALERT_TEXT,
+    ALERT_COLOR
+} from "./constants";
+
+const makeSpan = props => `
+    span {
+        color: ${props.normal ? NORMAL_TEXT : ALERT_TEXT};
+        font-weight: bold;
+    }
+`;
+
+const BasicStyledDiv = styled.div`
+    display: inline-block;
+    text-decoration: none;
+    padding: 5px 10px;
+    border-radius: 3px;
+`;
+
+const StyledDiv = BasicStyledDiv.extend`
+    background-color: ${props =>
+        props.normal ? NORMAL_COLOR : ALERT_COLOR};
+    &:hover {
+        background-color: ${props =>
+            Color(props.normal ? NORMAL_COLOR : ALERT_COLOR)
+                .darken(0.25)
+                .string()};
+        transition: all 0.5s ease;
+    }
+    ${props => makeSpan(props)};
+`;
+
+export class StyledButton extends React.PureComponent<{
+    normal: boolean,
+    buttonText: string,
+    onSelect: void => void
+}> {
+    static propTypes = {
+        normal: PropTypes.bool.isRequired,
+        buttonText: PropTypes.string.isRequired,
+        onSelect: PropTypes.func.isRequired
+    };
+
+    render() {
+        return (
+            <StyledDiv
+                normal={this.props.normal}
+                onClick={this.props.onSelect}
+            >
+                <span>{this.props.buttonText}</span>
+            </StyledDiv>
+        );
+    }
+}

chapter07/src/components/styledButton/styledButton.story.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { StyledButton } from "./";
+
+storiesOf("Styled-Components buttons", module)
+    .add("normal style", () => (
+        <StyledButton
+            normal
+            buttonText={"A normal Styled-Components button!"}
+            onSelect={action("click:normal")}
+        />
+    ))
+    .add("alert style", () => (
+        <StyledButton
+            normal={false}
+            buttonText={"An alert Styled-Components button!"}
+            onSelect={action("click:alert")}
+        />
+    ));