Rethink component structure to be more flexible

- Following MUI's Breadcrumbs component design

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

@@ -15,31 +15,21 @@
  */
 import React from 'react';
 import { Breadcrumbs } from '.';
+import { MemoryRouter } from 'react-router-dom';
+import { Link } from '../../components/Link';
 
 export default {
   title: 'Layout/Breadcrumbs',
   component: Breadcrumbs,
 };
 
-const pages = [
-  {
-    href: '/',
-    name: 'A',
-  },
-  {
-    href: '/',
-    name: 'B',
-  },
-  {
-    href: '/',
-    name: 'C',
-  },
-  {
-    href: '/',
-    name: 'D',
-  },
-];
-
 // export const InHeader = () => <Breadcrumbs pages={pages} />;
-export const OutsideOfHeader = () => <Breadcrumbs pages={pages} />;
+export const OutsideOfHeader = () => (
+  <MemoryRouter>
+    <Breadcrumbs>
+      <Link to="/">Home</Link>
+      <Link to="/">Home</Link>
+    </Breadcrumbs>
+  </MemoryRouter>
+);
 // export const ExampleUsage = () => <Breadcrumbs pages={pages} />;

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

@@ -14,80 +14,75 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import {
-  Link,
   Typography,
   Breadcrumbs as MUIBreadcrumbs,
   Popover,
   withStyles,
 } from '@material-ui/core';
 
-type BreadcrumbPage = {
-  href: string;
-  name: string;
-};
-
 type BreadcrumbsProps = {
-  pages: (BreadcrumbPage | BreadcrumbPage)[];
+  children?: React.ReactNode;
 };
 
 const UnderlinedText = withStyles({ root: { textDecoration: 'underline' } })(
   Typography,
 );
 
-const Breadcrumb = ({ page }: { page: BreadcrumbPage }) => (
-  <Link
-    underline={page.href ? 'always' : 'none'}
-    color="inherit"
-    href={page.href}
-  >
-    {page.name}
-  </Link>
-);
+const StyledBreadcrumbs = withStyles({
+  root: {},
+  li: { textDecoration: 'underline' },
+})(MUIBreadcrumbs);
 
-// Should propbably take Routes instead, to work with the react-router
-export const Breadcrumbs = ({ pages }: BreadcrumbsProps) => {
+export const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
     null,
   );
-  const hasHiddenBreadcrumbs = pages.length > 3;
-  const [firstPage, secondPage, ...expandablePages] = pages;
-  const currentPage = pages[pages.length - 1];
 
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
+  if (children instanceof Array) {
+    const [firstPage, secondPage, ...expandablePages] = children;
+    const currentPage = children[children.length - 1];
+    const hasHiddenBreadcrumbs = children.length > 3;
 
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
 
-  const open = Boolean(anchorEl);
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
 
+    const open = Boolean(anchorEl);
+    return (
+      <Fragment>
+        <StyledBreadcrumbs aria-label="breadcrumb">
+          {children.length > 1 && firstPage}
+          {children.length > 2 && secondPage}
+          {hasHiddenBreadcrumbs && (
+            <UnderlinedText onClick={handleClick}>...</UnderlinedText>
+          )}
+          {currentPage}
+        </StyledBreadcrumbs>
+        <Popover
+          open={open}
+          anchorEl={anchorEl}
+          onClose={handleClose}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'center',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'left',
+          }}
+        >
+          The content of the Popover.
+        </Popover>
+      </Fragment>
+    );
+  }
   return (
-    <MUIBreadcrumbs aria-label="breadcrumb">
-      {firstPage && pages.length > 1 && <Breadcrumb page={firstPage} />}
-      {secondPage && pages.length > 2 && <Breadcrumb page={secondPage} />}
-      {hasHiddenBreadcrumbs && (
-        <UnderlinedText onClick={handleClick}>...</UnderlinedText>
-      )}
-      {currentPage && <Typography>{currentPage.name}</Typography>}
-      <Popover
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'center',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
-        }}
-      >
-        The content of the Popover.
-      </Popover>
-    </MUIBreadcrumbs>
+    <StyledBreadcrumbs aria-label="breadcrumb">{children}</StyledBreadcrumbs>
   );
 };