update header et remove les tests

- fix down des versions des libraries
- revert des configurations de codestyle
- ajout des fichiers de templates à utilser
- update du style du header ajout du bouton d'ouverture des mentions légales
- update de la page index pour l'affichage des mentions legales
- ajout de popup mentions legales + remove du composant box avant upgrade 4.0.2
- update de l'affichage des mentsion légales
- update des font du header
- ajout du snapshot pour le header
- suppr du style sur les span du header (vs bold)

.kiss/dumb.jsx

+/* eslint
+  indent: [2, 2],
+  semi: [2, "always"],
+  react/jsx-indent: [2, 2,{indentLogicalExpressions: false}],
+  react/jsx-indent-props: [2, 2]
+*/
+import { PureComponent } from "react"
+import PropTypes from "prop-types"
+import { withStyles } from "@material-ui/core/styles"
+
+const styles = {
+  container: {},
+}
+
+function MyComponent({ classes }) {
+  return <div className={classes.container} />
+}
+
+MyComponent.propTypes = {
+  classes: PropTypes.shape().isRequired,
+}
+
+export default withStyles(styles)(MyComponent)

.kiss/jest.jsx

+/* eslint
+    indent: [2, 2],
+    semi: [2, "always"],
+    react/jsx-indent: [2, 2],
+    react/jsx-indent-props: [2, 2]
+    max-nested-callbacks: [2, { "max": 4 }]
+*/
+import { createShallow } from "@material-ui/core/test-utils"
+
+import MyComponent from "../index"
+
+describe("components | path | to | index", () => {
+  let shallow
+  beforeAll(() => {
+    const options = { dive: true }
+    shallow = createShallow(options)
+  })
+
+  describe("snapshot", () => {
+    it("doit correspondre avec les props requises", () => {
+      const props = {}
+      const wrapper = shallow(<MyComponent {...props} />)
+      expect(wrapper).toBeDefined()
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+})

.kiss/pure.jsx

+/* eslint
+  indent: [2, 2],
+  semi: [2, "always"],
+  react/jsx-indent: [2, 2,{indentLogicalExpressions: false}],
+  react/jsx-indent-props: [2, 2]
+*/
+import { PureComponent } from "react"
+import PropTypes from "prop-types"
+import { withStyles } from "@material-ui/core/styles"
+
+const styles = {
+  container: {},
+}
+
+class MyComponent extends PureComponent {
+  render() {
+    const { classes } = this.props
+    return <div className={classes.container} />
+  }
+}
+
+MyComponent.propTypes = {
+  classes: PropTypes.shape().isRequired,
+}
+
+export default withStyles(styles)(MyComponent)

components/app-header/index.jsx

+/* eslint
+  indent: [2, 2],
+  semi: [2, "always"],
+  react/jsx-indent: [2, 2,{indentLogicalExpressions: false}],
+  react/jsx-indent-props: [2, 2]
+*/
+import { PureComponent } from "react";
+import PropTypes from "prop-types";
+import { withStyles } from "@material-ui/core/styles";
+import {
+  AppBar, Button, Toolbar, Typography,
+} from "@material-ui/core";
+import { Menu as MenuIcon } from "@material-ui/icons";
+import Router from "next/router";
+
+const styles = () => ({
+  toolbarRoot: {
+    justifyContent: "space-between",
+  },
+  menuButtonRoot: {
+    color: "#FFFFFF",
+  },
+  titleRoot: {
+    color: "#FFFFFF",
+    fontSize: "36px",
+    fontFamily: "Lato",
+    textTransform: "uppercase",
+  },
+  lighterTitle: {
+    fontWeight: "lighter",
+  },
+  bolderTitle: {
+    fontWeight: "bold",
+  },
+});
+
+class HeaderContainer extends PureComponent {
+  handleMenuButtonClick = () => {
+    Router.push({
+      pathname: "/",
+      query: { showMentionsLegales: "1" },
+    });
+  }
+
+  render() {
+    const { classes, isUserLogged } = this.props;
+    return (
+      <AppBar position="static">
+        <Toolbar classes={{ root: classes.toolbarRoot }}>
+          <Button
+            classes={{ root: classes.menuButtonRoot }}
+            onClick={this.handleMenuButtonClick}
+          >
+            <MenuIcon fontSize="small" />
+            &nbsp;Menu
+          </Button>
+          <Typography classes={{ root: classes.titleRoot }} component="div">
+            {!isUserLogged && (
+              <span>
+                <span className={classes.bolderTitle}>OPEN&nbsp;</span>
+                <span className={classes.lighterTitle}>LEXIMPACT</span>
+              </span>
+            )}
+            {isUserLogged && (
+              <span>
+                <span className={classes.lighterTitle}>LEXIMPACT&nbsp;</span>
+                <span className={classes.bolderTitle}>POP</span>
+              </span>
+            )}
+          </Typography>
+          <div>{/* LoginButton */}</div>
+        </Toolbar>
+      </AppBar>
+    );
+  }
+}
+
+HeaderContainer.defaultProps = {
+  isUserLogged: false,
+};
+
+HeaderContainer.propTypes = {
+  classes: PropTypes.shape().isRequired,
+  isUserLogged: PropTypes.bool,
+};
+
+export default withStyles(styles)(HeaderContainer);

components/app-header/tests/__snapshots__/index.test.jsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components | app-header | index snapshot doit correspondre quand l'user est connecté 1`] = `
+<WithStyles(AppBar)
+  position="static"
+>
+  <WithStyles(Toolbar)
+    classes={
+      Object {
+        "root": "HeaderContainer-toolbarRoot-1",
+      }
+    }
+  >
+    <WithStyles(Button)
+      classes={
+        Object {
+          "root": "HeaderContainer-menuButtonRoot-2",
+        }
+      }
+      onClick={[Function]}
+    >
+      <pure(MenuIcon)
+        fontSize="small"
+      />
+       Menu
+    </WithStyles(Button)>
+    <WithStyles(Typography)
+      classes={
+        Object {
+          "root": "HeaderContainer-titleRoot-3",
+        }
+      }
+      component="div"
+    >
+      <span>
+        <span
+          className="HeaderContainer-lighterTitle-4"
+        >
+          LEXIMPACT 
+        </span>
+        <span
+          className="HeaderContainer-bolderTitle-5"
+        >
+          POP
+        </span>
+      </span>
+    </WithStyles(Typography)>
+    <div />
+  </WithStyles(Toolbar)>
+</WithStyles(AppBar)>
+`;
+
+exports[`components | app-header | index snapshot doit correspondre quand l'user n'est pas connecté 1`] = `
+<WithStyles(AppBar)
+  position="static"
+>
+  <WithStyles(Toolbar)
+    classes={
+      Object {
+        "root": "HeaderContainer-toolbarRoot-1",
+      }
+    }
+  >
+    <WithStyles(Button)
+      classes={
+        Object {
+          "root": "HeaderContainer-menuButtonRoot-2",
+        }
+      }
+      onClick={[Function]}
+    >
+      <pure(MenuIcon)
+        fontSize="small"
+      />
+       Menu
+    </WithStyles(Button)>
+    <WithStyles(Typography)
+      classes={
+        Object {
+          "root": "HeaderContainer-titleRoot-3",
+        }
+      }
+      component="div"
+    >
+      <span>
+        <span
+          className="HeaderContainer-bolderTitle-5"
+        >
+          OPEN 
+        </span>
+        <span
+          className="HeaderContainer-lighterTitle-4"
+        >
+          LEXIMPACT
+        </span>
+      </span>
+    </WithStyles(Typography)>
+    <div />
+  </WithStyles(Toolbar)>
+</WithStyles(AppBar)>
+`;

components/app-header/tests/index.test.jsx

+/* eslint
+    indent: [2, 2],
+    semi: [2, "always"],
+    react/jsx-indent: [2, 2],
+    react/jsx-indent-props: [2, 2]
+    max-nested-callbacks: [2, { "max": 4 }]
+*/
+import { createShallow } from "@material-ui/core/test-utils";
+
+import HeaderContainer from "../index";
+
+describe("components | app-header | index", () => {
+  let shallow;
+  beforeAll(() => {
+    const options = { dive: true };
+    shallow = createShallow(options);
+  });
+
+  describe("snapshot", () => {
+    it("doit correspondre quand l'user n'est pas connecté", () => {
+      const props = { isUserLogged: false };
+      const wrapper = shallow(<HeaderContainer {...props} />);
+      expect(wrapper).toBeDefined();
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it("doit correspondre quand l'user est connecté", () => {
+      const props = { isUserLogged: true };
+      const wrapper = shallow(<HeaderContainer {...props} />);
+      expect(wrapper).toBeDefined();
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

components/header/contact.jsx

-/* eslint
-    indent: [2, 2],
-    semi: [2, "always"],
-    react/jsx-indent: [2, 2],
-    react/jsx-indent-props: [2, 2]
-    max-nested-callbacks: [2, { "max": 4 }]
-*/
-import Button from "@material-ui/core/Button";
-
-function Contact() {
-  return (
-    <a
-      href="mailto:leximpact@openfisca.org"
-      style={{ color: "white", textDecoration: "none" }}
-    >
-      <Button color="inherit">
-        <p>Vos Retours !</p>
-      </Button>
-    </a>
-  );
-}
-
-export default Contact;

components/header/header-container.jsx

-/* eslint
-    indent: [2, 2],
-    semi: [2, "always"],
-    react/jsx-indent: [2, 2],
-    react/jsx-indent-props: [2, 2]
-    max-nested-callbacks: [2, { "max": 4 }]
-*/
-import PropTypes from "prop-types";
-import { withStyles } from "@material-ui/core/styles";
-import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "@material-ui/core/Toolbar";
-import Home from "components/header/home";
-import Links from "components/header/links";
-import MenuContainer from "components/header/menu-container";
-
-const styles = {
-  header: {
-    width: "100%",
-  },
-  header__space: {
-    flexGrow: 1,
-  },
-};
-
-function HeaderContainer({ classes }) {
-  return (
-    <div className={classes.header}>
-      <AppBar position="static">
-        <Toolbar>
-          <Home />
-          <Links />
-          <div className={classes.header__space} />
-          <MenuContainer />
-        </Toolbar>
-      </AppBar>
-    </div>
-  );
-}
-
-HeaderContainer.propTypes = {
-  classes: PropTypes.shape().isRequired,
-};
-
-export default withStyles(styles)(HeaderContainer);

components/header/home.jsx

-/* eslint
-    indent: [2, 2],
-    semi: [2, "always"],
-    react/jsx-indent: [2, 2],
-    react/jsx-indent-props: [2, 2]
-    max-nested-callbacks: [2, { "max": 4 }]
-*/
-import Breakpoint, { BreakpointProvider } from "react-socks";
-import Typography from "@material-ui/core/Typography";
-
-function Home() {
-  return (
-    <BreakpointProvider>
-      <Breakpoint medium up>
-        <Typography variant="h1" color="inherit" noWrap>
-          LexImpact
-        </Typography>
-      </Breakpoint>
-    </BreakpointProvider>
-  );
-}
-
-export default Home;

components/header/links.jsx

-/* eslint
-    indent: [2, 2],
-    semi: [2, "always"],
-    react/jsx-indent: [2, 2],
-    react/jsx-indent-props: [2, 2]
-    max-nested-callbacks: [2, { "max": 4 }]
-*/
-import PropTypes from "prop-types";
-import { withStyles } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
-
-const styles = {
-  links: {
-    fontSize: "16px",
-    fontWeight: "light",
-    textTransform: "uppercase",
-    textDecoration: "underline",
-    textUnderlinePosition: "under",
-    paddingleft: 30,
-    paddingRight: 30,
-    marginLeft: 30,
-  },
-};
-
-function Links({ classes }) {
-  return (
-    <div>
-      <Button color="inherit" className={classes.links}>
-        Impôt sur le revenu
-      </Button>
-    </div>
-  );
-}
-
-Links.propTypes = {
-  classes: PropTypes.shape().isRequired,
-};
-
-export default withStyles(styles)(Links);

components/header/login.jsx

-/* eslint
-    indent: [2, 2],
-    semi: [2, "always"],
-    react/jsx-indent: [2, 2],
-    react/jsx-indent-props: [2, 2]
-    max-nested-callbacks: [2, { "max": 4 }]
-*/
-import Button from "@material-ui/core/Button";
-
-function Login() {
-  return (
-    <Button color="inherit">
-      <p>Connexion</p>
-    </Button>
-  );
-}
-
-export default Login;

components/header/menu-container.jsx

-/* eslint
-    indent: [2, 2],
-    semi: [2, "always"],
-    react/jsx-indent: [2, 2],
-    react/jsx-indent-props: [2, 2]
-    max-nested-callbacks: [2, { "max": 4 }]
-*/
-import { useReducer } from "react";
-import { flow } from "lodash/fp";
-import Menu from "components/header/menu";
-import Login from "components/header/login";
-import Signup from "components/header/signup";
-import Contact from "components/header/contact";
-import {
-  open,
-  close,
-  reducer,
-  initialState,
-} from "components/header/menu-reducer";
-
-function MenuContainer() {
-  const [state, dispatch] = useReducer(reducer, initialState());
-
-  function openMenu({ currentTarget }) {
-    return flow([open, dispatch])(currentTarget);
-  }
-
-  function closeMenu() {
-    return dispatch(close());
-  }
-
-  return (
-    <Menu state={state} actions={{ openMenu, closeMenu }}>
-      <Contact />
-      <Login />
-      <Signup />
-    </Menu>
-  );
-}
-
-export default MenuContainer;

components/header/menu-reducer.jsx

-/* eslint
-    indent: [2, 2],
-    semi: [2, "always"],
-    react/jsx-indent: [2, 2],
-    react/jsx-indent-props: [2, 2]
-    max-nested-callbacks: [2, { "max": 4 }]
-*/
-function initialState() {
-  return { isOpen: false };
-}
-
-function open(anchorEl = false) {
-  return {
-    type: "header/menu/open",
-    anchorEl,
-  };
-}
-
-function close() {
-  return { type: "header/menu/close" };
-}
-
-function reducer(state, { type, anchorEl }) {
-  if (type === open().type) {
-    return {
-      isOpen: true,
-      anchorEl,
-    };
-  }
-
-  if (type === close().type) {
-    return { isOpen: false };
-  }
-
-  return state;
-}
-
-export {
-  open, close, reducer, initialState,
-};

components/header/menu.jsx

-/* eslint
-    indent: [2, 2],
-    semi: [2, "always"],
-    react/jsx-indent: [2, 2],
-    react/jsx-indent-props: [2, 2]
-    max-nested-callbacks: [2, { "max": 4 }]
-*/
-import PropTypes from "prop-types";
-import { withStyles } from "@material-ui/core/styles";
-import Breakpoint, { BreakpointProvider } from "react-socks";
-import MaterialMenu from "@material-ui/core/Menu";
-import MaterialMoreIcon from "@material-ui/icons/MoreVert";
-import MaterialMenuItem from "@material-ui/core/MenuItem";
-import MaterialIconButton from "@material-ui/core/IconButton";
-
-const styles = {
-  menu: {
-    display: "flex",
-  },
-};
-
-function Menu({
-  classes, state, actions, children,
-}) {
-  const { isOpen, anchorEl } = state;
-  const { openMenu, closeMenu } = actions;
-
-  return (
-    <BreakpointProvider>
-      <Breakpoint medium up>
-        <div className={classes.menu}>{children}</div>
-      </Breakpoint>
-      <Breakpoint small down>
-        <div className={classes.menu}>
-          <MaterialIconButton
-            aria-owns={isOpen && "material-appbar"}
-            aria-haspopup="true"
-            onClick={openMenu}
-            color="inherit"
-          >
-            <MaterialMoreIcon />
-          </MaterialIconButton>
-          <MaterialMenu anchorEl={anchorEl} open={isOpen} onClose={closeMenu}>
-            {children.map(child => (
-              <MaterialMenuItem key={child.type} onClick={closeMenu}>
-                {child}
-              </MaterialMenuItem>
-            ))}
-          </MaterialMenu>
-        </div>
-      </Breakpoint>
-    </BreakpointProvider>
-  );
-}
-
-Menu.propTypes = {
-  actions: PropTypes.shape().isRequired,
-  children: PropTypes.shape().isRequired,
-  classes: PropTypes.shape().isRequired,
-  state: PropTypes.shape().isRequired,
-};
-
-export default withStyles(styles)(Menu);

components/header/signup.jsx

-/* eslint
-    indent: [2, 2],
-    semi: [2, "always"],
-    react/jsx-indent: [2, 2],
-    react/jsx-indent-props: [2, 2]
-    max-nested-callbacks: [2, { "max": 4 }]
-*/
-import Button from "@material-ui/core/Button";
-
-function Signup() {
-  return (
-    <Button color="inherit">
-      <p>S’enregistrer</p>
-    </Button>
-  );
-}
-
-export default Signup;

components/mentions-legales/index.jsx

+/* eslint
+  indent: [2, 2],
+  semi: [2, "always"],
+  react/jsx-indent: [2, 2,{indentLogicalExpressions: false}],
+  react/jsx-indent-props: [2, 2]
+*/
+import { PureComponent } from "react";
+import PropTypes from "prop-types";
+import { withStyles } from "@material-ui/core/styles";
+import { Grid, Typography } from "@material-ui/core";
+
+const styles = theme => ({
+  container: {
+    flexGrow: 1,
+    padding: theme.spacing.unit * 4,
+  },
+});
+
+class MentionsLegales extends PureComponent {
+  render() {
+    const { classes } = this.props;
+    return (
+      <div className={classes.container}>
+        <Grid
+          container
+          direction="row"
+          alignItems="flex-start"
+          justify="space-between"
+        >
+          <Grid item xs={6}>
+            <Typography>
+              LexImpact POP est un service dédié aux collaborateurs
+              parlementaires et à leurs députés. Il permet d&apos;évaluer, de
+              façon rapide, l&apos;impact des réformes socio-fiscales ; au
+              travers d&apos;un simulateur dédié à l&apos;impôt sur le revenu et
+              d&apos;un service de conciergerie.
+            </Typography>
+          </Grid>
+          <Grid item xs={6}>
+            <div>
+              <button type="button">En savoir plus sur LexImpact</button>
+              <button type="button">Nos conditions d&apos;utilisation</button>
+              <button type="button">Vos données: notre priorités</button>
+              <button type="button">Vos retours sont précieux</button>
+            </div>
+          </Grid>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+MentionsLegales.propTypes = {
+  classes: PropTypes.shape().isRequired,
+};
+
+export default withStyles(styles)(MentionsLegales);

components/mentions-legales/tests/__snapshots__/index.test.jsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components | app-header | index snapshot doit correspondre quand l'user n'est pas connecté 1`] = `
+<div
+  className="MentionsLegales-container-1"
+>
+  <WithStyles(Grid)
+    alignItems="flex-start"
+    container={true}
+    direction="row"
+    justify="space-between"
+  >
+    <WithStyles(Grid)
+      item={true}
+      xs={6}
+    >
+      <WithStyles(Typography)>
+        LexImpact POP est un service dédié aux collaborateurs parlementaires et à leurs députés. Il permet d'évaluer, de façon rapide, l'impact des réformes socio-fiscales ; au travers d'un simulateur dédié à l'impôt sur le revenu et d'un service de conciergerie.
+      </WithStyles(Typography)>
+    </WithStyles(Grid)>
+    <WithStyles(Grid)
+      item={true}
+      xs={6}
+    >
+      <div>
+        <button
+          type="button"
+        >
+          En savoir plus sur LexImpact
+        </button>
+        <button
+          type="button"
+        >
+          Nos conditions d'utilisation
+        </button>
+        <button
+          type="button"
+        >
+          Vos données: notre priorités
+        </button>
+        <button
+          type="button"
+        >
+          Vos retours sont précieux
+        </button>
+      </div>
+    </WithStyles(Grid)>
+  </WithStyles(Grid)>
+</div>
+`;

components/mentions-legales/tests/index.test.jsx

+/* eslint
+    indent: [2, 2],
+    semi: [2, "always"],
+    react/jsx-indent: [2, 2],
+    react/jsx-indent-props: [2, 2]
+    max-nested-callbacks: [2, { "max": 4 }]
+*/
+import { createShallow } from "@material-ui/core/test-utils";
+
+import MentionsLegales from "../index";
+
+describe("components | app-header | index", () => {
+  let shallow;
+  beforeAll(() => {
+    const options = { dive: true };
+    shallow = createShallow(options);
+  });
+
+  describe("snapshot", () => {
+    it("doit correspondre quand l'user n'est pas connecté", () => {
+      const props = {};
+      const wrapper = shallow(<MentionsLegales {...props} />);
+      expect(wrapper).toBeDefined();
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

jest.config.js

 const jestConfig = {
     moduleFileExtensions: ["js", "jsx"],
     setupFilesAfterEnv: ["<rootDir>tests/enzyme.config.js"],
-    testMatch: ["**/tests/**/*.test.js?(x)"],
+    testMatch: ["**/tests/**/*.(test|spec).{js,jsx}"],
     testPathIgnorePatterns: ["<rootDir>/build/", "<rootDir>/node_modules/"],
+    snapshotSerializers: ["enzyme-to-json/serializer"],
 }
 
 module.exports = jestConfig

package-lock.json

@@ -1059,6 +1059,11 @@
                 }
             }
         },
+        "@emotion/hash": {
+            "version": "0.7.2",
+            "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.2.tgz",
+            "integrity": "sha512-RMtr1i6E8MXaBWwhXL3yeOU8JXRnz8GNxHvaUfVvwxokvayUY0zoBeWbKw1S9XkufmGEEdQd228pSZXFkAln8Q=="
+        },
         "@iconify/icons-twemoji": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/@iconify/icons-twemoji/-/icons-twemoji-1.0.0.tgz",
@@ -1562,6 +1567,53 @@
                 "recompose": "0.28.0 - 0.30.0"
             }
         },
+        "@material-ui/styles": {
+            "version": "4.0.0-rc.0",
+            "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.0.0-rc.0.tgz",
+            "integrity": "sha512-TUb0j9gIZDPoIzEr4TEOVCWo3EeDW4J61B3CR2VVgXiaLneU/l0wzRg1KzalVBjw6Bq/97D+wPBTL+uE4wD3xg==",
+            "requires": {
+                "@babel/runtime": "^7.2.0",
+                "@emotion/hash": "^0.7.1",
+                "@material-ui/types": "^4.0.0-rc.0",
+                "@material-ui/utils": "^4.0.0-rc.0",
+                "clsx": "^1.0.2",
+                "deepmerge": "^3.0.0",
+                "hoist-non-react-statics": "^3.2.1",
+                "jss": "^10.0.0-alpha.16",
+                "jss-plugin-camel-case": "^10.0.0-alpha.16",
+                "jss-plugin-default-unit": "^10.0.0-alpha.16",
+                "jss-plugin-global": "^10.0.0-alpha.16",
+                "jss-plugin-nested": "^10.0.0-alpha.16",
+                "jss-plugin-props-sort": "^10.0.0-alpha.16",
+                "jss-plugin-rule-value-function": "^10.0.0-alpha.16",
+                "jss-plugin-vendor-prefixer": "^10.0.0-alpha.16",
+                "prop-types": "^15.7.2",
+                "warning": "^4.0.1"
+            },
+            "dependencies": {
+                "@material-ui/utils": {
+                    "version": "4.3.0",
+                    "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.3.0.tgz",
+                    "integrity": "sha512-tK3Z/ap5ifPQwIryuGQ+AHLh2hEyBLRPj4NCMcqVrQfD+0KH2IP5BXR4A+wGVsyamKfLaOc8tz1fzxZblsztpw==",
+                    "requires": {
+                        "@babel/runtime": "^7.4.4",
+                        "prop-types": "^15.7.2",
+                        "react-is": "^16.8.6"
+                    }
+                },
+                "jss": {
+                    "version": "10.0.0-alpha.23",
+                    "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz",
+                    "integrity": "sha512-r3fg6nrNdqxhaE4s3ZkyEmpVTb2UUmSu0uhKrvfSAy+N45MmlLmhgyFFaUyJOvFJzm69XYXM2Q62VhGccV6qMA==",
+                    "requires": {
+                        "@babel/runtime": "^7.3.1",
+                        "csstype": "^2.6.5",
+                        "is-in-browser": "^1.1.3",
+                        "tiny-warning": "^1.0.2"
+                    }
+                }
+            }
+        },
         "@material-ui/system": {
             "version": "3.0.0-alpha.2",
             "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.2.tgz",
@@ -1573,6 +1625,14 @@
                 "warning": "^4.0.1"
             }
         },
+        "@material-ui/types": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-4.1.1.tgz",
+            "integrity": "sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ==",
+            "requires": {
+                "@types/react": "*"
+            }
+        },
         "@material-ui/utils": {
             "version": "3.0.0-alpha.3",
             "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-3.0.0-alpha.3.tgz",
@@ -3966,6 +4026,11 @@
                 }
             }
         },
+        "clsx": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.0.4.tgz",
+            "integrity": "sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg=="
+        },
         "co": {
             "version": "4.6.0",
             "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -5400,6 +5465,15 @@
                 "semver": "^5.6.0"
             }
         },
+        "enzyme-to-json": {
+            "version": "3.3.5",
+            "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.3.5.tgz",
+            "integrity": "sha512-DmH1wJ68HyPqKSYXdQqB33ZotwfUhwQZW3IGXaNXgR69Iodaoj8TF/D9RjLdz4pEhGq2Tx2zwNUIjBuqoZeTgA==",
+            "dev": true,
+            "requires": {
+                "lodash": "^4.17.4"
+            }
+        },
         "errno": {
             "version": "0.1.7",
             "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -10687,6 +10761,172 @@
                 }
             }
         },
+        "jss-plugin-camel-case": {
+            "version": "10.0.0-alpha.23",
+            "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.23.tgz",
+            "integrity": "sha512-QaXi/t4Efx0BhwbVf6GCcpn/IDAP9cK/GJoWBoAIVM9BAj7RXBU0UifFojRbeDGDtpf5djDWCOMviydYiWYYWg==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "hyphenate-style-name": "^1.0.3",
+                "jss": "10.0.0-alpha.23"
+            },
+            "dependencies": {
+                "jss": {
+                    "version": "10.0.0-alpha.23",
+                    "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz",
+                    "integrity": "sha512-r3fg6nrNdqxhaE4s3ZkyEmpVTb2UUmSu0uhKrvfSAy+N45MmlLmhgyFFaUyJOvFJzm69XYXM2Q62VhGccV6qMA==",
+                    "requires": {
+                        "@babel/runtime": "^7.3.1",
+                        "csstype": "^2.6.5",
+                        "is-in-browser": "^1.1.3",
+                        "tiny-warning": "^1.0.2"
+                    }
+                }
+            }
+        },
+        "jss-plugin-default-unit": {
+            "version": "10.0.0-alpha.23",
+            "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.23.tgz",
+            "integrity": "sha512-XE4CcrQMF2rI6TL+/bJUDVlmgIqOax8uCPLZxZnqUFTbH0cM9f66OhRIe51yECfAb1nAiHalZtkUv2kfycLVjQ==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.0.0-alpha.23"
+            },
+            "dependencies": {
+                "jss": {
+                    "version": "10.0.0-alpha.23",
+                    "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz",
+                    "integrity": "sha512-r3fg6nrNdqxhaE4s3ZkyEmpVTb2UUmSu0uhKrvfSAy+N45MmlLmhgyFFaUyJOvFJzm69XYXM2Q62VhGccV6qMA==",
+                    "requires": {
+                        "@babel/runtime": "^7.3.1",
+                        "csstype": "^2.6.5",
+                        "is-in-browser": "^1.1.3",
+                        "tiny-warning": "^1.0.2"
+                    }
+                }
+            }
+        },
+        "jss-plugin-global": {
+            "version": "10.0.0-alpha.23",
+            "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.23.tgz",
+            "integrity": "sha512-uaoO4yp24dtvKiMd8fLzy2Of3rDSzA9e1y8mHw4vNDTPDSF39pYfpAxxnGnvRadsAVlZGgj4Ro+LveLz8ZUHgw==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.0.0-alpha.23"
+            },
+            "dependencies": {
+                "jss": {
+                    "version": "10.0.0-alpha.23",
+                    "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz",
+                    "integrity": "sha512-r3fg6nrNdqxhaE4s3ZkyEmpVTb2UUmSu0uhKrvfSAy+N45MmlLmhgyFFaUyJOvFJzm69XYXM2Q62VhGccV6qMA==",
+                    "requires": {
+                        "@babel/runtime": "^7.3.1",
+                        "csstype": "^2.6.5",
+                        "is-in-browser": "^1.1.3",
+                        "tiny-warning": "^1.0.2"
+                    }
+                }
+            }
+        },
+        "jss-plugin-nested": {
+            "version": "10.0.0-alpha.23",
+            "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.23.tgz",
+            "integrity": "sha512-xHoBBUz9U8INvizthl0k9u79z+ObzY0HvzPy7+BKxySQzHSTLG40iRYizJo7Antq7uH8i8uI/5RgS/7dy+YVSQ==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.0.0-alpha.23",
+                "tiny-warning": "^1.0.2"
+            },
+            "dependencies": {
+                "jss": {
+                    "version": "10.0.0-alpha.23",
+                    "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz",
+                    "integrity": "sha512-r3fg6nrNdqxhaE4s3ZkyEmpVTb2UUmSu0uhKrvfSAy+N45MmlLmhgyFFaUyJOvFJzm69XYXM2Q62VhGccV6qMA==",
+                    "requires": {
+                        "@babel/runtime": "^7.3.1",
+                        "csstype": "^2.6.5",
+                        "is-in-browser": "^1.1.3",
+                        "tiny-warning": "^1.0.2"
+                    }
+                }
+            }
+        },
+        "jss-plugin-props-sort": {
+            "version": "10.0.0-alpha.23",
+            "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.23.tgz",
+            "integrity": "sha512-/h6epoQ/ta61e6rG3/Pq47qPlg9YX5t2rSKJBLzaASEe/KfxjVvnbJKC8tE27lG6TjwbeWpKONuJfZxjWKLnDg==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.0.0-alpha.23"
+            },
+            "dependencies": {
+                "jss": {
+                    "version": "10.0.0-alpha.23",
+                    "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz",
+                    "integrity": "sha512-r3fg6nrNdqxhaE4s3ZkyEmpVTb2UUmSu0uhKrvfSAy+N45MmlLmhgyFFaUyJOvFJzm69XYXM2Q62VhGccV6qMA==",
+                    "requires": {
+                        "@babel/runtime": "^7.3.1",
+                        "csstype": "^2.6.5",
+                        "is-in-browser": "^1.1.3",
+                        "tiny-warning": "^1.0.2"
+                    }
+                }
+            }
+        },
+        "jss-plugin-rule-value-function": {
+            "version": "10.0.0-alpha.23",
+            "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.23.tgz",
+            "integrity": "sha512-N0g7x6RzeEj+GI5303JOUTyo5x7/F+0SRJv3R0lAUSS782mZipcvpFzHlEz3q5g+0t/bhbOLT6i0RYAhN3IW7g==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "jss": "10.0.0-alpha.23"
+            },
+            "dependencies": {
+                "jss": {
+                    "version": "10.0.0-alpha.23",
+                    "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz",
+                    "integrity": "sha512-r3fg6nrNdqxhaE4s3ZkyEmpVTb2UUmSu0uhKrvfSAy+N45MmlLmhgyFFaUyJOvFJzm69XYXM2Q62VhGccV6qMA==",
+                    "requires": {
+                        "@babel/runtime": "^7.3.1",
+                        "csstype": "^2.6.5",
+                        "is-in-browser": "^1.1.3",
+                        "tiny-warning": "^1.0.2"
+                    }
+                }
+            }
+        },
+        "jss-plugin-vendor-prefixer": {
+            "version": "10.0.0-alpha.23",
+            "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.23.tgz",
+            "integrity": "sha512-WtTXR+H1tGGhmEP3kqDawxnV1tbXboxtJ93A1O9p+7OLseafIaQoPkMPKEh5a+P4jzETIqmQoJJoG5KmT/Tgsg==",
+            "requires": {
+                "@babel/runtime": "^7.3.1",
+                "css-vendor": "^2.0.5",
+                "jss": "10.0.0-alpha.23"
+            },
+            "dependencies": {
+                "css-vendor": {
+                    "version": "2.0.5",
+                    "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.5.tgz",
+                    "integrity": "sha512-36w+4Cg0zqFIt5TAkaM3proB6XWh5kSGmbddRCPdrRLQiYNfHPTgaWPOlCrcuZIO0iAtrG+5wsHJZ6jj8AUULA==",
+                    "requires": {
+                        "@babel/runtime": "^7.3.1",
+                        "is-in-browser": "^1.0.2"
+                    }
+                },
+                "jss": {
+                    "version": "10.0.0-alpha.23",
+                    "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.23.tgz",
+                    "integrity": "sha512-r3fg6nrNdqxhaE4s3ZkyEmpVTb2UUmSu0uhKrvfSAy+N45MmlLmhgyFFaUyJOvFJzm69XYXM2Q62VhGccV6qMA==",
+                    "requires": {
+                        "@babel/runtime": "^7.3.1",
+                        "csstype": "^2.6.5",
+                        "is-in-browser": "^1.1.3",
+                        "tiny-warning": "^1.0.2"
+                    }
+                }
+            }
+        },
         "jss-preset-default": {
             "version": "4.5.0",
             "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.5.0.tgz",
@@ -16561,6 +16801,11 @@
             "resolved": "https://registry.npmjs.org/tiny-sdf/-/tiny-sdf-1.0.2.tgz",
             "integrity": "sha1-KOdphcRMTlhMS2fY7N2bM6HKwow="
         },
+        "tiny-warning": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+            "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+        },
         "tinycolor2": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",