feat(breadcrumbs): add breadcrumbs

src/atoms/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,52 @@
+// @flow
+/* eslint-disable react/jsx-key */
+import React, { Fragment } from 'react';
+
+import { createStyledTag, createTheme } from '../../utils';
+import type { BreadcrumbsRoutes, BreadcrumbsMatchPath } from './Breadcrumbs.types';
+import { getBreadcrumbs } from './Breadcrumbs.utils';
+import { BreadcrumbsItem } from './BreadcrumbsItem';
+import { BreadcrumbsDivider } from './BreadcrumbsDivider';
+
+type BreadcrumbsProps = {|
+  /* the location pathname */
+  pathname: string,
+  /* list of breadcrumbs routes */
+  routes: BreadcrumbsRoutes,
+  /* custom match path function */
+  matchPath?: BreadcrumbsMatchPath,
+  /* custom breadcrum's item tag */
+  itemTagName?: string | React$ComponentType<*>,
+|};
+
+const name = 'breadcrumbs';
+
+const theme = createTheme(name, {
+  modifiers: {
+  },
+  defaults: {
+  },
+});
+
+const BreadcrumbsTag = createStyledTag(name, {});
+
+const Breadcrumbs = ({ itemTagName, pathname, routes, matchPath, ...rest }: BreadcrumbsProps) => {
+  const breadcrumbs = getBreadcrumbs(pathname, routes, matchPath);
+
+  return (
+    <BreadcrumbsTag { ...rest }>
+      {
+        React.Children.toArray(
+          breadcrumbs.map((item, index) => (
+            <Fragment>
+              <BreadcrumbsItem to={ item.originalPath } { ...{ ...rest, ...item, tagName: itemTagName } } />
+              { index !== breadcrumbs.length - 1 && <BreadcrumbsDivider>></BreadcrumbsDivider> }
+            </Fragment>
+          )),
+        )
+      }
+    </BreadcrumbsTag>
+  );
+};
+
+export { Breadcrumbs, theme };

src/atoms/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const routes = [
+  { path: '/', label: 'Dashboard' },
+  { path: '/app', component: ({ param }) => param },
+  { path: '/app/settings', label: 'Settings' },
+  { path: '/app/settings/security', label: 'Security' },
+];
+
+export default (asStory) => {
+  asStory('ATOMS/Breadcrumbs', module, (story, { Breadcrumbs, Button, Link, Row }) => {
+    story
+      .add('with default modifiers', () => (
+        <Breadcrumbs pathname="/app/settings/security" routes={ routes } param={ 1 } />
+      ));
+    story
+      .add('with custom tagName', () => (
+        <Breadcrumbs
+          tagName={ Row }
+          pathname="/app/settings/security"
+          routes={ routes }
+          param={ 1 }
+          itemTagName={ ({ label, ...rest }) => <Button tagName={ Link } { ...rest } text={ label } /> }
+        />
+      ));
+  });
+};

src/atoms/Breadcrumbs/Breadcrumbs.types.js

@@ -0,0 +1,8 @@
+export type BreadcrumbsRoutes = Array<{
+  path: string,
+  component?: React$ComponentType<*>,
+  label?: string,
+  matchOptions?: Object,
+}>;
+
+export type BreadcrumbsMatchPath = (path: string, options: Object) => boolean;

src/atoms/Breadcrumbs/Breadcrumbs.utils.js

@@ -0,0 +1,37 @@
+// @flow
+import type { BreadcrumbsRoutes, BreadcrumbsMatchPath } from './Breadcrumbs.types';
+
+const getPaths = (pathname: string) => pathname.replace(/\/$/, '').split('/').reduce((result, path, index) => [
+  ...result,
+  index < 2 ? `/${path}` : `${result[result.length - 1]}/${path}`,
+], []);
+
+
+const matchPathDefault: BreadcrumbsMatchPath = (path: string, options = {}) => path === options.path;
+
+const getBreadcrumbs = (
+  pathname: string,
+  routes: BreadcrumbsRoutes,
+  matchPath: BreadcrumbsMatchPath = matchPathDefault,
+) => {
+  const paths = getPaths(pathname);
+
+  const breadcrumbs = paths.reduce((result, path) => {
+    const matchedRoute = routes.find(
+      (route) => matchPath ? matchPath(path, { path: route.path, ...(route.matchOptions || {}) }) : route.path === path,
+    );
+
+    if (matchedRoute) {
+      const match = matchPath(path, { path: matchedRoute.path, ...(matchedRoute.matchOptions || {}) });
+
+      result = [...result, { ...matchedRoute, originalPath: path, match }];
+    }
+
+    return result;
+  }, []);
+
+  return breadcrumbs;
+};
+
+
+export { getBreadcrumbs };

src/atoms/Breadcrumbs/BreadcrumbsDivider.js

@@ -0,0 +1,10 @@
+// @flow
+import styled from 'react-emotion';
+
+const BreadcrumbsDivider = styled('span')({
+  padding: '0 1rem',
+  fontSize: '1.6rem',
+  fontFamily: 'Poppins',
+});
+
+export { BreadcrumbsDivider };

src/atoms/Breadcrumbs/BreadcrumbsItem.js

@@ -0,0 +1,25 @@
+// @flow
+import React from 'react';
+
+import { Link } from '../typography/Link';
+
+type BreadcrumbsItemProps = {|
+  tagName: string | React$ComponentType<*>,
+  to: string,
+  label?: string,
+  component?: React$ComponentType<*>,
+|};
+
+const BreadcrumbsItem = ({ tagName, to, label, component: Component, ...rest }: BreadcrumbsItemProps) => React.createElement(
+  tagName,
+  {
+    to,
+  },
+  Component ? <Component { ...rest } to={ to } label={ label } /> : label,
+);
+
+BreadcrumbsItem.defaultProps = {
+  tagName: Link,
+};
+
+export { BreadcrumbsItem };

src/atoms/Breadcrumbs/index.js

@@ -0,0 +1 @@
+export * from './Breadcrumbs';

src/atoms/atoms.js

@@ -2,6 +2,7 @@
 
 export { Avatar } from './Avatar';
 export { Button } from './Button';
+export { Breadcrumbs } from './Breadcrumbs';
 export { Card } from './Card';
 export { Checkbox } from './dataEntry/Checkbox';
 export { CheckboxField } from './dataEntry/CheckboxField';

src/atoms/theme.js

@@ -2,6 +2,7 @@
 
 import { theme as avatarTheme } from './Avatar';
 import { theme as buttonTheme } from './Button';
+import { theme as breadcrumbsTheme } from './Breadcrumbs';
 import { theme as cardTheme } from './Card';
 import { theme as checkboxTheme } from './dataEntry/Checkbox';
 import { theme as dialogTheme } from './Dialog';
@@ -32,6 +33,7 @@ import { theme as textTheme } from './typography/Text';
 export const theme = {
   ...avatarTheme,
   ...buttonTheme,
+  ...breadcrumbsTheme,
   ...cardTheme,
   ...checkboxTheme,
   ...dialogTheme,