Extracted breadcrumbs into a shared component, added it to project settings page

client/src/Project/Board/Header/Styles.js

@@ -1,18 +1,6 @@
 import styled from 'styled-components';
 
-import { color, font } from 'shared/utils/styles';
-
-export const Breadcrumbs = styled.div`
-  color: ${color.textMedium};
-  ${font.size(15)};
-`;
-
-export const Divider = styled.span`
-  position: relative;
-  top: 2px;
-  margin: 0 10px;
-  ${font.size(18)};
-`;
+import { font } from 'shared/utils/styles';
 
 export const Header = styled.div`
   margin-top: 6px;

client/src/Project/Board/Header/index.jsx

@@ -1,31 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { CopyLinkButton } from 'shared/components';
 
-import { Breadcrumbs, Divider, Header, BoardName } from './Styles';
+import { Header, BoardName } from './Styles';
 
-const propTypes = {
-  projectName: PropTypes.string.isRequired,
-};
-
-const ProjectBoardHeader = ({ projectName }) => (
-  <>
-    <Breadcrumbs>
-      Projects
-      <Divider>/</Divider>
-      {projectName}
-      <Divider>/</Divider>
-      Kanban Board
-    </Breadcrumbs>
-
-    <Header>
-      <BoardName>Kanban board</BoardName>
-      <CopyLinkButton />
-    </Header>
-  </>
+const ProjectBoardHeader = () => (
+  <Header>
+    <BoardName>Kanban board</BoardName>
+    <CopyLinkButton />
+  </Header>
 );
 
-ProjectBoardHeader.propTypes = propTypes;
-
 export default ProjectBoardHeader;

client/src/Project/Board/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import useMergeState from 'shared/hooks/mergeState';
+import { Breadcrumbs } from 'shared/components';
 
 import Header from './Header';
 import Filters from './Filters';
@@ -24,7 +25,8 @@ const ProjectBoard = ({ project, updateLocalProjectIssues }) => {
 
   return (
     <>
-      <Header projectName={project.name} />
+      <Breadcrumbs items={['Projects', project.name, 'Kanban Board']} />
+      <Header />
       <Filters
         projectUsers={project.users}
         defaultFilters={defaultFilters}