a new demo

mui · Nov 16, 2018 · ef367d5 · ef367d5
1 parent 1cd659c
commit ef367d5
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 33 deletions.
diff --git a/docs/src/pages/demos/dividers/MiddleDividers.js b/docs/src/pages/demos/dividers/MiddleDividers.js
@@ -1,48 +1,66 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import Avatar from '@material-ui/core/Avatar';
-import ImageIcon from '@material-ui/icons/Image';
-import WorkIcon from '@material-ui/icons/Work';
-import BeachAccessIcon from '@material-ui/icons/BeachAccess';
+import Chip from '@material-ui/core/Chip';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
 
 const styles = theme => ({
   root: {
     width: '100%',
     maxWidth: 360,
     backgroundColor: theme.palette.background.paper,
   },
+  chip: {
+    marginRight: theme.spacing.unit,
+  },
+  section1: {
+    margin: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`,
+  },
+  section2: {
+    margin: theme.spacing.unit * 2,
+  },
+  section3: {
+    margin: `${theme.spacing.unit * 6}px ${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px`,
+  },
 });
 
 function MiddleDividers(props) {
   const { classes } = props;
   return (
-    <List className={classes.root}>
-      <ListItem>
-        <Avatar>
-          <ImageIcon />
-        </Avatar>
-        <ListItemText primary="Photos" secondary="Jan 9, 2014" />
-      </ListItem>
-      <Divider component="li" variant="middle" />
-      <ListItem>
-        <Avatar>
-          <WorkIcon />
-        </Avatar>
-        <ListItemText primary="Work" secondary="Jan 7, 2014" />
-      </ListItem>
-      <Divider variant="middle" component="li" />
-      <ListItem>
-        <Avatar>
-          <BeachAccessIcon />
-        </Avatar>
-        <ListItemText primary="Vacation" secondary="July 20, 2014" />
-      </ListItem>
-    </List>
+    <div className={classes.root}>
+      <div className={classes.section1}>
+        <Grid container alignItems="center">
+          <Grid item xs>
+            <Typography gutterBottom variant="h4">Toothbrush</Typography>
+          </Grid>
+          <Grid item>
+            <Typography gutterBottom variant="h6">$4.50</Typography>
+          </Grid>
+        </Grid>
+        <Typography color="textSecondary">
+          Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the
+          hall.
+        </Typography>
+      </div>
+      <Divider variant="middle" />
+      <div className={classes.section2}>
+        <Typography gutterBottom variant="body1">Select type</Typography>
+        <div>
+          <Chip className={classes.chip} label="Extra Soft" />
+          <Chip className={classes.chip} label="Soft" />
+          <Chip className={classes.chip} label="Medium" />
+          <Chip className={classes.chip} label="Hard" />
+        </div>
+      </div>
+      <div className={classes.section3}>
+        <Button variant="contained" color="primary" fullWidth>
+          Add to cart
+        </Button>
+      </div>
+    </div>
   );
 }
 

diff --git a/docs/src/pages/demos/dividers/dividers.md b/docs/src/pages/demos/dividers/dividers.md
@@ -27,10 +27,10 @@ The `inset` property has now been deprecated. You should now use `variant="inset
 
 {{"demo": "pages/demos/dividers/InsetDividers.js"}}
 
-## Middle Dividers
+## Subheader Dividers
 
-{{"demo": "pages/demos/dividers/MiddleDividers.js"}}
+{{"demo": "pages/demos/dividers/SubheaderDividers.js"}}
 
-## Subheader Dividers
+## Middle Dividers
 
-{{"demo": "pages/demos/dividers/SubheaderDividers.js"}}
+{{"demo": "pages/demos/dividers/MiddleDividers.js"}}