Moving Breadcrumb to a component

frontend/src/components/breadcrumb/index.js

@@ -0,0 +1,100 @@
+const Container = require('@ui/components/container');
+const PropTypes = require('@root/prop-types');
+const React = require('react');
+const ReactRouter = require('react-router');
+const Styled = require('styled-components');
+const flatten = require('lodash.flatten');
+const fns = require('@ui/shared/functions');
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+// Main Contonent Wrapper Styles
+const StyledDiv = styled.div`
+  background-color: #FAFAFA;
+  height: ${remcalc(91)};
+  border-bottom: solid ${remcalc(1)} #d8d8d8;
+`;
+
+const BreadcrumbA = styled.a`
+  text-decoration: none !important;
+`;
+
+const BreadcrumbSpan = styled.span`
+  color: #646464;
+`;
+
+const H1 = styled.h1`
+  margin: 0 0 0 0;
+  padding-top: ${remcalc(31)};
+  padding-bottom: ${remcalc(31)};
+`;
+
+const {
+  Link
+} = ReactRouter;
+
+function getNameLink(name) {
+  return flatten(name.map((part, i) => {
+    if (!part.name) {
+      return null;
+    }
+
+    const link = (
+      <Link key={part.pathname} to={part.pathname}>
+        {
+          ({
+            href,
+            onClick,
+          }) =>
+            <BreadcrumbA href={href} onClick={onClick}>
+              {part.name}
+            </BreadcrumbA>
+        }
+      </Link>
+    );
+
+    const key = `${part.pathname}${i}`;
+    const slash = (
+      <BreadcrumbSpan key={key}> / </BreadcrumbSpan>
+    );
+
+    return (i === 0) ? link : [
+      slash,
+      link
+    ];
+  }));
+}
+
+const Breadcrumb = ({
+  children,
+  links = [],
+  name = []
+}) => {
+  return (
+    <Container>
+      <StyledDiv>
+        <H1
+          style={{
+            fontSize: remcalc(24)
+          }}
+        >
+          {getNameLink(name)}
+        </H1>
+      </StyledDiv>
+    </Container>
+  );
+};
+
+Breadcrumb.propTypes = {
+  children: React.PropTypes.node,
+  links: React.PropTypes.arrayOf(PropTypes.link),
+  name: React.PropTypes.arrayOf(PropTypes.link)
+};
+
+module.exports = Breadcrumb;

frontend/src/components/section/index.js

@@ -1,30 +1,11 @@
-const flatten = require('lodash.flatten');
 const React = require('react');
 const ReactIntl = require('react-intl');
-const Styled = require('styled-components');
 const ReactRouter = require('react-router');
 
-const H1 = require('@ui/components/base-elements').H1;
 const Li = require('@ui/components/horizontal-list/li');
 const PropTypes = require('@root/prop-types');
 const Ul = require('@ui/components/horizontal-list/ul');
-const fns = require('@ui/shared/functions');
-
-const {
-  default: styled
-} = Styled;
-
-const BreadcrumbA = styled.a`
-  text-decoration: none !important;
-`;
-
-const BreadcrumbSpan = styled.span`
-  color: #646464;
-`;
-
-const {
-  remcalc
-} = fns;
+const Breadcrumb = require('@components/breadcrumb');
 
 const {
   FormattedMessage
@@ -34,11 +15,12 @@ const {
   Link
 } = ReactRouter;
 
-const Section = ({
-  children,
-  links = [],
-  name = []
-}) => {
+const Section = (props) => {
+  const {
+    children,
+    links = [],
+  } = props;
+
   const navLinks = links.map((link) => (
     <Li key={link.name}>
       <Link activeClassName='active' to={link.pathname}>
@@ -47,44 +29,9 @@ const Section = ({
     </Li>
   ));
 
-  const nameLinks = flatten(name.map((part, i) => {
-    if (!part.name) {
-      return null;
-    }
-
-    const link = (
-      <Link key={part.pathname} to={part.pathname}>
-        {
-          ({
-            href,
-            onClick,
-          }) =>
-            <BreadcrumbA href={href} onClick={onClick}>
-              {part.name}
-            </BreadcrumbA>
-        }
-      </Link>
-    );
-
-    const slash = (
-      <BreadcrumbSpan key={`${part.pathname}${i}`}> / </BreadcrumbSpan>
-    );
-
-    return (i === 0) ? link : [
-      slash,
-      link
-    ];
-  }));
-
   return (
     <div>
-      <H1
-        style={{
-          fontSize: remcalc(24)
-        }}
-      >
-        {nameLinks}
-      </H1>
+      <Breadcrumb {...props} />
       <Ul>
         {navLinks}
       </Ul>
@@ -95,8 +42,7 @@ const Section = ({
 
 Section.propTypes = {
   children: React.PropTypes.node,
-  links: React.PropTypes.arrayOf(PropTypes.link),
-  name: React.PropTypes.arrayOf(PropTypes.link)
+  links: React.PropTypes.arrayOf(PropTypes.link)
 };
 
 module.exports = Section;