[docs] Add Breadcrumbs TypeScript demos

docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
+
+interface CollapsedBreadcrumbsProps extends WithStyles<typeof styles> {}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      justifyContent: 'center',
+      flexWrap: 'wrap',
+    },
+    paper: {
+      padding: theme.spacing(1, 2),
+    },
+  });
+
+function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+}
+
+function CollapsedBreadcrumbs(props: CollapsedBreadcrumbsProps) {
+  const { classes } = props;
+
+  return (
+    <Paper elevation={0} className={classes.paper}>
+      <Breadcrumbs maxItems={2} aria-label="Breadcrumb">
+        <Link color="inherit" href="#" onClick={handleClick}>
+          Home
+        </Link>
+        <Link color="inherit" href="#" onClick={handleClick}>
+          Catalog
+        </Link>
+        <Link color="inherit" href="#" onClick={handleClick}>
+          Accessories
+        </Link>
+        <Link color="inherit" href="#" onClick={handleClick}>
+          New Collection
+        </Link>
+        <Typography color="textPrimary">Belts</Typography>
+      </Breadcrumbs>
+    </Paper>
+  );
+}
+
+CollapsedBreadcrumbs.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(CollapsedBreadcrumbs);

docs/src/pages/demos/breadcrumbs/CustomSeparator.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
+import NavigateNextIcon from '@material-ui/icons/NavigateNext';
+
+interface CustomSeparatorProps extends WithStyles<typeof styles> {}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      justifyContent: 'center',
+      flexWrap: 'wrap',
+    },
+    paper: {
+      padding: theme.spacing(1, 2),
+    },
+  });
+
+function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+}
+
+function CustomSeparator(props: CustomSeparatorProps) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      <Paper elevation={0} className={classes.paper}>
+        <Breadcrumbs separator="›" aria-label="Breadcrumb">
+          <Link color="inherit" href="/" onClick={handleClick}>
+            Material-UI
+          </Link>
+          <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>
+            Core
+          </Link>
+          <Typography color="textPrimary">Breadcrumb</Typography>
+        </Breadcrumbs>
+      </Paper>
+      <br />
+      <Paper elevation={0} className={classes.paper}>
+        <Breadcrumbs separator="-" aria-label="Breadcrumb">
+          <Link color="inherit" href="/" onClick={handleClick}>
+            Material-UI
+          </Link>
+          <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>
+            Core
+          </Link>
+          <Typography color="textPrimary">Breadcrumb</Typography>
+        </Breadcrumbs>
+      </Paper>
+      <br />
+      <Paper elevation={0} className={classes.paper}>
+        <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />} aria-label="Breadcrumb">
+          <Link color="inherit" href="/" onClick={handleClick}>
+            Material-UI
+          </Link>
+          <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>
+            Core
+          </Link>
+          <Typography color="textPrimary">Breadcrumb</Typography>
+        </Breadcrumbs>
+      </Paper>
+    </div>
+  );
+}
+
+CustomSeparator.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(CustomSeparator);

docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles';
+import { emphasize } from '@material-ui/core/styles/colorManipulator';
+import Paper from '@material-ui/core/Paper';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Chip from '@material-ui/core/Chip';
+import Avatar from '@material-ui/core/Avatar';
+import HomeIcon from '@material-ui/icons/Home';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+interface CustomBreadcrumbProps extends WithStyles<typeof styles> {}
+
+interface CustomizedBreadcrumbsProps extends WithStyles<typeof styles> {}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      padding: theme.spacing(1),
+    },
+    chip: {
+      backgroundColor: theme.palette.grey[100],
+      height: 24,
+      color: theme.palette.grey[800],
+      fontWeight: theme.typography.fontWeightRegular,
+      '&:hover, &:focus': {
+        backgroundColor: theme.palette.grey[300],
+      },
+      '&:active': {
+        boxShadow: theme.shadows[1],
+        backgroundColor: emphasize(theme.palette.grey[300], 0.12),
+      },
+    },
+    avatar: {
+      background: 'none',
+      marginRight: -theme.spacing(1.5),
+    },
+  });
+
+function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+}
+
+function CustomBreadcrumb(props: CustomBreadcrumbProps) {
+  const { classes, ...rest } = props;
+  return <Chip className={classes.chip} {...rest} />;
+}
+
+CustomBreadcrumb.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+const StyledBreadcrumb = withStyles(styles)(CustomBreadcrumb);
+
+function CustomizedBreadcrumbs(props: CustomizedBreadcrumbsProps) {
+  const { classes } = props;
+
+  return (
+    <Paper elevation={0} className={classes.root}>
+      <Breadcrumbs aria-label="Breadcrumb">
+        <StyledBreadcrumb
+          component="a"
+          href="#"
+          label="Home"
+          avatar={
+            <Avatar className={classes.avatar}>
+              <HomeIcon />
+            </Avatar>
+          }
+          onClick={handleClick}
+        />
+        <StyledBreadcrumb component="a" href="#" label="Catalog" onClick={handleClick} />
+        <StyledBreadcrumb
+          label="Accessories"
+          deleteIcon={<ExpandMoreIcon />}
+          onClick={handleClick}
+          onDelete={handleClick}
+        />
+      </Breadcrumbs>
+    </Paper>
+  );
+}
+
+CustomizedBreadcrumbs.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(CustomizedBreadcrumbs);

docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Link from '@material-ui/core/Link';
+import HomeIcon from '@material-ui/icons/Home';
+import WhatshotIcon from '@material-ui/icons/Whatshot';
+import GrainIcon from '@material-ui/icons/Grain';
+
+interface IconBreadcrumbsProps extends WithStyles<typeof styles> {}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      padding: theme.spacing(1, 2),
+    },
+    link: {
+      display: 'flex',
+    },
+    icon: {
+      marginRight: theme.spacing(0.5),
+      width: 20,
+      height: 20,
+    },
+  });
+
+function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+}
+
+function IconBreadcrumbs(props: IconBreadcrumbsProps) {
+  const { classes } = props;
+  return (
+    <Paper elevation={0} className={classes.root}>
+      <Breadcrumbs aria-label="Breadcrumb">
+        <Link color="inherit" href="/" onClick={handleClick} className={classes.link}>
+          <HomeIcon className={classes.icon} />
+          Material-UI
+        </Link>
+        <Link
+          color="inherit"
+          href="/getting-started/installation/"
+          onClick={handleClick}
+          className={classes.link}
+        >
+          <WhatshotIcon className={classes.icon} />
+          Core
+        </Link>
+        <Typography color="textPrimary" className={classes.link}>
+          <GrainIcon className={classes.icon} />
+          Breadcrumb
+        </Typography>
+      </Breadcrumbs>
+    </Paper>
+  );
+}
+
+IconBreadcrumbs.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(IconBreadcrumbs);

docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.js

@@ -58,6 +58,8 @@ const styles = theme => ({
   },
 });
 
+const LinkRouter = props => <Link {...props} component={RouterLink} />;
+
 class RouterBreadcrumbs extends React.Component {
   state = {
     open: true,
@@ -81,9 +83,9 @@ class RouterBreadcrumbs extends React.Component {
 
                 return (
                   <Breadcrumbs aria-label="Breadcrumb">
-                    <Link component={RouterLink} color="inherit" to="/">
+                    <LinkRouter color="inherit" to="/">
                       Home
-                    </Link>
+                    </LinkRouter>
                     {pathnames.map((value, index) => {
                       const last = index === pathnames.length - 1;
                       const to = `/${pathnames.slice(0, index + 1).join('/')}`;
@@ -93,9 +95,9 @@ class RouterBreadcrumbs extends React.Component {
                           {breadcrumbNameMap[to]}
                         </Typography>
                       ) : (
-                        <Link component={RouterLink} color="inherit" to={to} key={to}>
+                        <LinkRouter color="inherit" to={to} key={to}>
                           {breadcrumbNameMap[to]}
-                        </Link>
+                        </LinkRouter>
                       );
                     })}
                   </Breadcrumbs>
@@ -106,7 +108,7 @@ class RouterBreadcrumbs extends React.Component {
               <List component="nav">
                 <ListItemLink to="/inbox" open={this.state.open} onClick={this.handleClick} />
                 <Collapse in={this.state.open} timeout="auto" unmountOnExit>
-                  <List component="div" disablePadding>
+                  <List component={'div'} disablePadding>
                     <ListItemLink to="/inbox/important" className={classes.nested} />
                   </List>
                 </Collapse>