From 6dc9e4ef71acd050102c84cafa24418237daef4b Mon Sep 17 00:00:00 2001
From: Martin Hofmann <martin@martinhofmann.com>
Date: Thu, 17 Oct 2019 21:27:28 -0700
Subject: [PATCH 1/5] stubbing out layout with material UI. Adding material ui
 to storybook for comparison

---
 src/App.js                         | 12 ++--
 src/components/contact-us/index.js | 38 ++++++++----
 src/components/header/index.js     | 44 ++++++++++++--
 src/components/home/index.js       |  9 ++-
 stories/11-Buttons.stories.js      | 28 +++++++++
 stories/12-Cards.stories.js        | 45 +++++++++++++++
 yarn.lock                          | 92 ++++++++++++++++++++++++++++--
 7 files changed, 243 insertions(+), 25 deletions(-)
 create mode 100644 stories/11-Buttons.stories.js
 create mode 100644 stories/12-Cards.stories.js

diff --git a/src/App.js b/src/App.js
index 8fd13f2..d7d04f3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,16 +5,18 @@ import ContactUs from './components/contact-us';
 import Home from './components/home';
 import Header from './components/header';
 import './App.css';
-import Button from '@material-ui/core/Button';
+import Container from '@material-ui/core/Container';
 
 function App() {
   return (
     <Fragment>
       <Header />
-      <Router>
-        <Home path='/' />
-        <ContactUs path='contact-us' />
-      </Router>
+      <Container maxWidth="md" style={{padding: `40px 10px`}} component="main">
+        <Router>
+          <Home path='/' />
+          <ContactUs path='contact-us' />
+        </Router>
+      </Container>
     </Fragment>
   );
 }
diff --git a/src/components/contact-us/index.js b/src/components/contact-us/index.js
index 17edad8..c232b5b 100644
--- a/src/components/contact-us/index.js
+++ b/src/components/contact-us/index.js
@@ -1,9 +1,19 @@
 import React from 'react';
 import { Formik } from 'formik';
+import {
+  Typography,
+  Button,
+  FormControl,
+  InputLabel,
+  Input,
+  FormHelperText
+} from '@material-ui/core';
 
 const ContactUs = () => (
   <div>
-    <h1>Formik Basic Example</h1>
+    <Typography variant="h3" component="h1" gutterBottom>
+      Formik Basic Example
+    </Typography>
     <Formik
       initialValues={{ name: 'Jean Luc Picard' }}
       onSubmit={(values, actions) => {
@@ -14,15 +24,23 @@ const ContactUs = () => (
       }}
       render={props => (
         <form onSubmit={props.handleSubmit}>
-          <input
-            type='text'
-            onChange={props.handleChange}
-            onBlur={props.handleBlur}
-            value={props.values.name}
-            name='name'
-          />
-          {props.errors.name && <div id='feedback'>{props.errors.name}</div>}
-          <button type='submit'>Submit</button>
+          <FormControl>
+            <InputLabel htmlFor="fullname">Full Name</InputLabel>
+            <Input
+              type='text'
+              onChange={props.handleChange}
+              onBlur={props.handleBlur}
+              value={props.values.name}
+              name='name'
+            />
+            <FormHelperText>We'll never share your name.</FormHelperText>
+          </FormControl>
+          {props.errors.name && <FormHelperText id='feedback' error>{props.errors.name}</FormHelperText>}
+          <div style={{marginTop: `20px`}}>
+            <Button variant="contained" color="primary" type="submit">
+              Submit
+            </Button>
+          </div>
         </form>
       )}
     />
diff --git a/src/components/header/index.js b/src/components/header/index.js
index 4954a3a..09f618e 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -1,12 +1,48 @@
 import React from 'react';
 import { Link } from '@reach/router';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  Button,
+  Container
+} from '@material-ui/core';
+
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    title: {
+      flexGrow: 1,
+    },
+    button: {
+      '&:hover': {
+        color: `#FFFFFF`
+      }
+    }
+  }),
+);
 
 function Home() {
+  const classes = useStyles();
+
   return (
-    <header data-testid="app">
-      <Link to='/'>Home</Link>
-      <Link to='contact-us'>Contact Us</Link>
-    </header>
+    <div className={classes.root}>
+      <AppBar position="static">
+        <Container maxWidth="lg">
+          <Toolbar>
+            <Typography variant="h6" className={classes.title}>
+              Bend Community Site
+            </Typography>
+            <Button color="inherit" component={ Link } to="/" className={classes.button}>Home</Button>
+            <Button color="inherit" component={ Link } to="/contact-us" className={classes.button}>Contact Us</Button>
+          </Toolbar>
+        </Container>
+      </AppBar>
+    </div>
   );
 }
 export default Home;
diff --git a/src/components/home/index.js b/src/components/home/index.js
index 6214c67..8ada555 100644
--- a/src/components/home/index.js
+++ b/src/components/home/index.js
@@ -1,5 +1,12 @@
 import React from 'react';
+import Typography from '@material-ui/core/Typography';
 
-const Home = () => <div>Content Home Page</div>;
+const Home = () => (
+    <div>
+      <Typography variant="h3" component="h1" gutterBottom>
+        Content Home Page
+      </Typography>
+    </div>
+);
 
 export default Home;
diff --git a/stories/11-Buttons.stories.js b/stories/11-Buttons.stories.js
new file mode 100644
index 0000000..3e26a81
--- /dev/null
+++ b/stories/11-Buttons.stories.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  Button
+} from '@material-ui/core';
+
+export default {
+  title: `Material | Buttons`,
+};
+
+export const KitchenSink = () => (
+  <div>
+    <Button variant="contained">
+      Default
+    </Button>
+    <Button variant="contained" color="primary">
+      Primary
+    </Button>
+    <Button variant="contained" color="secondary">
+      Secondary
+    </Button>
+    <Button variant="contained" color="secondary" disabled>
+      Disabled
+    </Button>
+    <Button variant="contained" href="#contained-buttons">
+      Link
+    </Button>
+  </div>
+);
diff --git a/stories/12-Cards.stories.js b/stories/12-Cards.stories.js
new file mode 100644
index 0000000..6ad5308
--- /dev/null
+++ b/stories/12-Cards.stories.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Button,
+  Typography
+} from '@material-ui/core';
+
+export default {
+  title: `Material | Cards`,
+};
+
+export const KitchenSink = () => (
+  <div style={{width: `288px`, margin: `20px`}}>
+    <Card>
+      <CardActionArea>
+        <CardMedia
+          style={{height: `150px`}}
+          image="https://material-ui.com/static/images/cards/contemplative-reptile.jpg"
+          title="Contemplative Reptile"
+        />
+        <CardContent>
+          <Typography gutterBottom variant="h5" component="h2">
+            Lizard
+          </Typography>
+          <Typography variant="body2" color="textSecondary" component="p">
+            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
+            across all continents except Antarctica
+          </Typography>
+        </CardContent>
+      </CardActionArea>
+      <CardActions>
+        <Button size="small" color="primary">
+          Share
+        </Button>
+        <Button size="small" color="primary">
+          Learn More
+        </Button>
+      </CardActions>
+    </Card>
+  </div>
+);
diff --git a/yarn.lock b/yarn.lock
index 18560f6..4cae1c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -923,7 +923,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2":
   version "7.6.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.3.tgz#935122c74c73d2240cafd32ddb5fc2a6cd35cf1f"
   integrity sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==
@@ -3183,6 +3183,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bootstrap@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
+  integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
+
 boxen@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-3.2.0.tgz#fbdff0de93636ab4450886b6ff45b92d098f45eb"
@@ -6202,6 +6207,18 @@ highlight.js@~9.12.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
   integrity sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -6211,7 +6228,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
   integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
@@ -6975,6 +6992,11 @@ is-wsl@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
   integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -7956,7 +7978,7 @@ loglevel@^1.4.1:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.4.tgz#f408f4f006db8354d0577dcf6d33485b3cb90d56"
   integrity sha512-p0b6mOGKcGa+7nnmKbpzR6qloPbrgLcnio++E+14Vo/XffOGwZtRpUhr8dTH/x2oCMmEoIU0Zwm3ZauhvYD17g==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -8230,6 +8252,15 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
   integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=
 
+mini-create-react-context@^0.3.0:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189"
+  integrity sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==
+  dependencies:
+    "@babel/runtime" "^7.4.0"
+    gud "^1.0.0"
+    tiny-warning "^1.0.2"
+
 mini-css-extract-plugin@0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz#81d41ec4fe58c713a96ad7c723cdb2d0bd4d70e1"
@@ -9106,6 +9137,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  integrity sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
@@ -10421,7 +10459,7 @@ react-inspector@^3.0.2:
     is-dom "^1.0.9"
     prop-types "^15.6.1"
 
-react-is@^16.3.2, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.3, react-is@^16.8.4, react-is@^16.8.6:
+react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.3, react-is@^16.8.4, react-is@^16.8.6:
   version "16.10.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab"
   integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==
@@ -10465,6 +10503,35 @@ react-popper@^1.3.2, react-popper@^1.3.4:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
+react-router-dom@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
+  integrity sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.1.2"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.2.tgz#6ea51d789cb36a6be1ba5f7c0d48dd9e817d3418"
+  integrity sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.3.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-scripts@3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.2.0.tgz#58ccd6b4ffa27f1b4d2986cbdcaa916660e9e33c"
@@ -10925,6 +10992,11 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url-loader@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.0.tgz#54d8181d33cd1b66a59544d05cadf8e4aa7d37cc"
@@ -12025,7 +12097,12 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
-tiny-warning@^1.0.2:
+tiny-invariant@^1.0.2:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
+  integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -12436,6 +12513,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"

From 9445be84258777a795f25db96c4cd960a3c99c28 Mon Sep 17 00:00:00 2001
From: Martin Hofmann <martin@martinhofmann.com>
Date: Fri, 18 Oct 2019 14:47:00 -0700
Subject: [PATCH 2/5] fixes failing test

---
 src/__snapshots__/App.test.js.snap | 64 ++++++++++++++++++++++++------
 src/components/header/index.js     |  5 ++-
 2 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/src/__snapshots__/App.test.js.snap b/src/__snapshots__/App.test.js.snap
index 8f21195..b48239b 100644
--- a/src/__snapshots__/App.test.js.snap
+++ b/src/__snapshots__/App.test.js.snap
@@ -1,19 +1,59 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`App renders without crashing 1`] = `
-<header
+<div
+  class="makeStyles-root-1"
   data-testid="app"
 >
-  <a
-    aria-current="page"
-    href="/"
+  <header
+    class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic MuiAppBar-colorPrimary"
   >
-    Home
-  </a>
-  <a
-    href="/contact-us"
-  >
-    Contact Us
-  </a>
-</header>
+    <div
+      class="MuiContainer-root MuiContainer-maxWidthLg"
+    >
+      <div
+        class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+      >
+        <h6
+          class="MuiTypography-root makeStyles-title-2 MuiTypography-h6"
+        >
+          Bend Community Site
+        </h6>
+        <a
+          aria-current="page"
+          aria-disabled="false"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-button-3 MuiButton-colorInherit"
+          href="/"
+          role="button"
+          tabindex="0"
+        >
+          <span
+            class="MuiButton-label"
+          >
+            Home
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </a>
+        <a
+          aria-disabled="false"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-button-3 MuiButton-colorInherit"
+          href="/contact-us"
+          role="button"
+          tabindex="0"
+        >
+          <span
+            class="MuiButton-label"
+          >
+            Contact Us
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </a>
+      </div>
+    </div>
+  </header>
+</div>
 `;
diff --git a/src/components/header/index.js b/src/components/header/index.js
index 09f618e..b89dc37 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -30,7 +30,10 @@ function Home() {
   const classes = useStyles();
 
   return (
-    <div className={classes.root}>
+    <div
+      className={classes.root}
+      data-testid="app"
+    >
       <AppBar position="static">
         <Container maxWidth="lg">
           <Toolbar>

From 3ef5bfdcaede9f52a97a74167732065bd80659b3 Mon Sep 17 00:00:00 2001
From: Martin Hofmann <martin@martinhofmann.com>
Date: Fri, 18 Oct 2019 14:54:57 -0700
Subject: [PATCH 3/5] updating storybook overview content

---
 stories/0-README.stories.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/stories/0-README.stories.js b/stories/0-README.stories.js
index 2f46678..9e457e8 100644
--- a/stories/0-README.stories.js
+++ b/stories/0-README.stories.js
@@ -8,8 +8,15 @@ export const Overview = () => (
   <div>
     <h1>Bend Community Site</h1>
     <p>
-      These Storybook stories show examples of Bootstrap UI components using the <a href="https://react-bootstrap.github.io/components/alerts/" target="_blank">React Bootstrap
-      </a> port.
+      These Storybook stories show examples of:
     </p>
+    <ul>
+      <li>
+        Bootstrap UI components using the <a href="https://react-bootstrap.github.io/components/alerts/" target="_blank">React Bootstrap</a> port.
+      </li>
+      <li>
+        Material UI components using the <a href="https://material-ui.com/" target="_blank">React Material Design</a> port.
+      </li>
+    </ul>
   </div>
 );

From 7231691241f241170eb3a8ac983c8f7264ce18ed Mon Sep 17 00:00:00 2001
From: Martin Hofmann <martin@martinhofmann.com>
Date: Fri, 18 Oct 2019 15:04:02 -0700
Subject: [PATCH 4/5] adding onclick to Material stories

---
 stories/11-Buttons.stories.js | 6 +++---
 stories/12-Cards.stories.js   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/stories/11-Buttons.stories.js b/stories/11-Buttons.stories.js
index 3e26a81..eb11892 100644
--- a/stories/11-Buttons.stories.js
+++ b/stories/11-Buttons.stories.js
@@ -9,13 +9,13 @@ export default {
 
 export const KitchenSink = () => (
   <div>
-    <Button variant="contained">
+    <Button variant="contained" onClick={()  => {alert('Default Button Clicked!')}}>
       Default
     </Button>
-    <Button variant="contained" color="primary">
+    <Button variant="contained" color="primary" onClick={()  => {alert('Primary Button Clicked!')}}>
       Primary
     </Button>
-    <Button variant="contained" color="secondary">
+    <Button variant="contained" color="secondary" onClick={()  => {alert('Secondary Button Clicked!')}}>
       Secondary
     </Button>
     <Button variant="contained" color="secondary" disabled>
diff --git a/stories/12-Cards.stories.js b/stories/12-Cards.stories.js
index 6ad5308..3120438 100644
--- a/stories/12-Cards.stories.js
+++ b/stories/12-Cards.stories.js
@@ -13,7 +13,7 @@ export default {
   title: `Material | Cards`,
 };
 
-export const KitchenSink = () => (
+export const Example = () => (
   <div style={{width: `288px`, margin: `20px`}}>
     <Card>
       <CardActionArea>
@@ -33,10 +33,10 @@ export const KitchenSink = () => (
         </CardContent>
       </CardActionArea>
       <CardActions>
-        <Button size="small" color="primary">
+        <Button size="small" color="primary" onClick={()  => {alert('Card Share Button Clicked!')}}>
           Share
         </Button>
-        <Button size="small" color="primary">
+        <Button size="small" color="primary" onClick={()  => {alert('Card Learn More Button Clicked!')}}>
           Learn More
         </Button>
       </CardActions>

From 81e8a5b4cdf097082683e5bdf7e62b54887f1d2a Mon Sep 17 00:00:00 2001
From: Martin Hofmann <martin@martinhofmann.com>
Date: Fri, 18 Oct 2019 15:05:32 -0700
Subject: [PATCH 5/5] adding onclick to Material stories

---
 stories/12-Cards.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/12-Cards.stories.js b/stories/12-Cards.stories.js
index 3120438..be2aee8 100644
--- a/stories/12-Cards.stories.js
+++ b/stories/12-Cards.stories.js
@@ -16,7 +16,7 @@ export default {
 export const Example = () => (
   <div style={{width: `288px`, margin: `20px`}}>
     <Card>
-      <CardActionArea>
+      <CardActionArea onClick={()  => {alert('Card Action Area Clicked!')}}>
         <CardMedia
           style={{height: `150px`}}
           image="https://material-ui.com/static/images/cards/contemplative-reptile.jpg"