Adds custom breadcrumb component

packages/components/Breadcrumb/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Breadcrumb from 'react-bootstrap/Breadcrumb';
+import { LinkContainer } from 'react-router-bootstrap';
+
+const CustomBreadcrumb = (props) => {
+
+  const breadcrumbs = props.items.map((item) => {
+    if (item.link) {
+      return (
+        <LinkContainer key={ item.name } to={ item.link }>
+          <Breadcrumb.Item>{item.name}</Breadcrumb.Item>
+        </LinkContainer>
+      );
+    } else {
+      return (
+        <Breadcrumb.Item key={ item.name } active>
+          {item.name}
+        </Breadcrumb.Item>
+      );
+    }
+  });
+
+  return (
+    <div>
+      <Breadcrumb>
+        {breadcrumbs}
+      </Breadcrumb>
+    </div>
+  );
+};
+
+CustomBreadcrumb.propTypes = {
+  items: PropTypes.list,
+};
+
+CustomBreadcrumb.defaultProps = {
+  items: [ {
+    name: 'Projects',
+    link: '/projects',
+  }, {
+    name: 'Sample Project Name'
+  } ] };
+
+export default CustomBreadcrumb;

packages/components/Breadcrumb/stories/index.stories.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import StoryRouter from 'storybook-react-router';
+import Breadcrumb from '../index.js';
+
+export const breadcrumbItems = {
+  projects: [ {
+    name: 'Projects',
+    link: '/projects',
+  }, {
+    name: 'Example project name'
+  } ], paperEdits: [ {
+    name: 'Projects',
+    link: '/projects'
+  },
+  {
+    name: 'Project: The Sample',
+    link: '/projects/the-sample'
+  },
+  {
+    name: 'PaperEdits',
+  },
+  {
+    name: 'Example programme title'
+  }
+  ]
+};
+
+storiesOf('Breadcrumb', module)
+  .addDecorator(StoryRouter())
+  .add('Projects', () => {
+    return (
+      <section style={ { height: '90vh', overflow: 'scroll' } }>
+        <Breadcrumb
+          items = { breadcrumbItems.projects }
+        />
+      </section>
+    );
+  })
+  .add('Paper Edits', () => {
+    return (
+      <section style={ { height: '90vh', overflow: 'scroll' } }>
+        <Breadcrumb
+          items={ breadcrumbItems.paperEdits }
+        />
+      </section>
+
+    );
+  });