const React = require('react'); const Styled = require('styled-components'); const flatten = require('lodash.flatten'); const Container = require('@ui/components/container'); const Row = require('@ui/components/row'); const Column = require('@ui/components/column'); const BaseElements = require('@ui/components/base-elements'); const NavLink = require('@ui/components/nav-link'); const PropTypes = require('@root/prop-types'); const fns = require('@ui/shared/functions'); const constants = require('@ui/shared/constants'); const { remcalc, unitcalc } = fns; const { colors } = constants; const { H2 } = BaseElements; const { default: styled } = Styled; // Main Contonent Wrapper Styles const StyledDiv = styled.div` border-bottom: solid ${remcalc(1)} ${colors.base.grey}; padding: ${unitcalc(4.5)} 0 ${unitcalc(4.5)} 0; `; const BreadcrumbA = styled(NavLink)` text-decoration: none; `; const BreadcrumbSpan = styled.span` color: ${colors.base.secondaryDark}; `; function getNameLink(name) { return flatten(name.map((part, i) => { if (!part.name) { return null; } const link = ( {part.name} ); const key = `${part.pathname}${i}`; const slash = ( / ); return (i === 0) ? link : [ slash, link ]; })); } const StyledH2 = styled(H2)` color: ${colors.base.primary}; margin: 0; `; const Breadcrumb = ({ children, links = [], name = [] }) => { return ( {getNameLink(name)} ); }; Breadcrumb.propTypes = { children: React.PropTypes.node, links: React.PropTypes.arrayOf(PropTypes.link), name: React.PropTypes.arrayOf(PropTypes.link) }; module.exports = Breadcrumb;