Add breadcrumbs component to header

packages/core/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -13,12 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Popover, Typography, Box, List, ListItem } from '@material-ui/core';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { Box, List, ListItem, Popover, Typography } from '@material-ui/core';
 import ExpandLessIcon from '@material-ui/icons/ExpandLess';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import React, { Fragment } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { Breadcrumbs } from '.';
+import { Header, Page } from '..';
 import { Link } from '../../components/Link';
 
 export default {
@@ -26,7 +27,19 @@ export default {
   component: Breadcrumbs,
 };
 
-// export const InHeader = () => <Breadcrumbs pages={pages} />;
+export const InHeader = () => (
+  <MemoryRouter>
+    <h2>Standard breadcrumbs</h2>
+    <p>
+      Underlined pages are links. This should show a hierarchical relationship.
+    </p>
+
+    <Page themeId="other">
+      <Header title="Current Page" type="General Page" typeLink="/" />
+    </Page>
+  </MemoryRouter>
+);
+
 export const OutsideOfHeader = () => {
   const [anchorEl, setAnchorEl] = React.useState<HTMLAnchorElement | null>(
     null,
@@ -47,23 +60,20 @@ export const OutsideOfHeader = () => {
         the header. In that case, they should be positioned above the title of
         the page.
       </p>
+
       <h2>Standard breadcrumbs</h2>
       <p>
         Underlined pages are links. This should show a hierarchical
         relationship.
       </p>
-      <Breadcrumbs>
+
+      <Breadcrumbs color="primaryText" />
+
+      <Breadcrumbs color="primaryText">
         <Link to="/">General Page</Link>
         <Link to="/">Second Page</Link>
         <Typography>Current page</Typography>
       </Breadcrumbs>
-      <Breadcrumbs>
-        <Link to="/">General Page</Link>
-        <Typography>Current page</Typography>
-      </Breadcrumbs>
-      <Breadcrumbs>
-        <Typography>Current page</Typography>
-      </Breadcrumbs>
 
       <h2>Hidden breadcrumbs</h2>
       <p>
@@ -71,7 +81,7 @@ export const OutsideOfHeader = () => {
         ellipses, expand the breadcrumbs out.
       </p>
 
-      <Breadcrumbs>
+      <Breadcrumbs color="primaryText">
         <Link to="/">General Page</Link>
         <Link to="/">Second Page</Link>
         <Link to="/">Third Page</Link>
@@ -86,7 +96,7 @@ export const OutsideOfHeader = () => {
       </p>
 
       <Fragment>
-        <Breadcrumbs>
+        <Breadcrumbs color="primaryText">
           <Link to="/">General Page</Link>
           <Link to="/" onClick={handleClick}>
             <Box display="flex" alignItems="center">
@@ -102,11 +112,11 @@ export const OutsideOfHeader = () => {
           anchorEl={anchorEl}
           anchorOrigin={{
             vertical: 'bottom',
-            horizontal: 'center',
+            horizontal: 'left',
           }}
           transformOrigin={{
             vertical: 'top',
-            horizontal: 'center',
+            horizontal: 'left',
           }}
         >
           <List>

packages/core/src/layout/Breadcrumbs/Breadcrumbs.tsx

@@ -34,12 +34,12 @@ const ClickableText = withStyles({
   },
 })(Typography);
 
-const StyledBox = withStyles(theme => ({
+const StyledBox = withStyles({
   root: {
     textDecoration: 'underline',
-    color: theme.palette.text.primary,
+    color: 'inherit',
   },
-}))(Box);
+})(Box);
 
 export const Breadcrumbs = ({ children, ...props }: Props) => {
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
@@ -71,9 +71,7 @@ export const Breadcrumbs = ({ children, ...props }: Props) => {
         {hasHiddenBreadcrumbs && (
           <ClickableText onClick={handleClick}>...</ClickableText>
         )}
-        <Box style={{ fontStyle: 'italic' }} color="text.primary">
-          {currentPage}
-        </Box>
+        <Box style={{ fontStyle: 'italic' }}>{currentPage}</Box>
       </MaterialBreadcrumbs>
       <Popover
         open={open}
@@ -81,7 +79,7 @@ export const Breadcrumbs = ({ children, ...props }: Props) => {
         onClose={handleClose}
         anchorOrigin={{
           vertical: 'bottom',
-          horizontal: 'center',
+          horizontal: 'left',
         }}
         transformOrigin={{
           vertical: 'top',

packages/core/src/layout/Header/Header.tsx

@@ -16,15 +16,10 @@
 
 import React, { ReactNode, CSSProperties, PropsWithChildren } from 'react';
 import { Helmet } from 'react-helmet';
-import {
-  Link,
-  Typography,
-  Tooltip,
-  makeStyles,
-  Breadcrumbs,
-} from '@material-ui/core';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import { Typography, Tooltip, makeStyles } from '@material-ui/core';
 import { BackstageTheme } from '@backstage/theme';
+import { Breadcrumbs } from '..';
+import { Link } from '../../components';
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   header: {
@@ -136,15 +131,9 @@ const TypeFragment = ({
   }
 
   return (
-    <Breadcrumbs
-      aria-label="breadcrumb"
-      separator={<ChevronRightIcon fontSize="small" />}
-      className={classes.breadcrumb}
-    >
-      <Link href={typeLink} color="inherit">
-        <Typography className={classes.breadcrumbType}> {type}</Typography>
-      </Link>
-      <Typography className={classes.breadcrumbTitle}>{pageTitle}</Typography>
+    <Breadcrumbs className={classes.breadcrumb}>
+      <Link to={typeLink}>{type}</Link>
+      <Typography>{pageTitle}</Typography>
     </Breadcrumbs>
   );
 };