Stubbing out page layout with material UI

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>
  );
 }

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>
 `;

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>
  )}
  />

src/components/header/index.js

@@ -1,12 +1,51 @@
 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}
+ data-testid="app"
+ >
+ <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;

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;

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>
 );

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" onClick={() => {alert('Default Button Clicked!')}}>
+ Default
+ </Button>
+ <Button variant="contained" color="primary" onClick={() => {alert('Primary Button Clicked!')}}>
+ Primary
+ </Button>
+ <Button variant="contained" color="secondary" onClick={() => {alert('Secondary Button Clicked!')}}>
+ Secondary
+ </Button>
+ <Button variant="contained" color="secondary" disabled>
+ Disabled
+ </Button>
+ <Button variant="contained" href="#contained-buttons">
+ Link
+ </Button>
+ </div>
+);

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 Example = () => (
+ <div style={{width: `288px`, margin: `20px`}}>
+ <Card>
+ <CardActionArea onClick={() => {alert('Card Action Area Clicked!')}}>
+ <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" onClick={() => {alert('Card Share Button Clicked!')}}>
+ Share
+ </Button>
+ <Button size="small" color="primary" onClick={() => {alert('Card Learn More Button Clicked!')}}>
+ Learn More
+ </Button>
+ </CardActions>
+ </Card>
+ </div>
+);