diff --git a/packages/cp-frontend/src/components/navigation/breadcrumb.js b/packages/cp-frontend/src/components/navigation/breadcrumb.js index 5d31cf50..86e8baa2 100644 --- a/packages/cp-frontend/src/components/navigation/breadcrumb.js +++ b/packages/cp-frontend/src/components/navigation/breadcrumb.js @@ -1,66 +1,45 @@ import React from 'react'; -import PropTypes from 'prop-types'; import styled from 'styled-components'; +import { Grid } from 'react-styled-flexboxgrid'; import { Link } from 'react-router-dom'; -import { Grid, Col, Row } from 'react-styled-flexboxgrid'; +import forceArray from 'force-array'; +import PropTypes from 'prop-types'; import remcalc from 'remcalc'; -import unitcalc from 'unitcalc'; -import { H2 } from 'joyent-ui-toolkit'; - -const StyledDiv = styled.div` - border-bottom: solid ${remcalc(1)} ${props => props.theme.grey}; - padding: ${unitcalc(4.5)} 0 ${unitcalc(4.5)} 0; - margin-bottom: ${remcalc(18)}; -`; - -const StyledH2 = H2.extend` - color: ${props => props.theme.primary}; - margin: 0; -`; +import { Breadcrumb, BreadcrumbItem } from 'joyent-ui-toolkit'; const BreadcrumbLink = styled(Link)` text-decoration: none; - color: ${props => props.theme.primary}; -`; + cursor: pointer; -const BreadcrumbSpan = styled.span` - color: ${props => props.theme.text}; -`; - -function getBreadcrumbLinks(links) { - if (links.length) { - return links.reduce((breadcrumb, link, index) => { - if (breadcrumb.length) { - breadcrumb.push( - / - ); - } - breadcrumb.push( - - {link.name} - - ); - return breadcrumb; - }, []); + &:visited { + color: inherit; } - return null; -} +`; -const Breadcrumb = ({ links = [] }) => - - - - - - {getBreadcrumbLinks(links)} - - - - - ; +const BreadcrumbContainer = styled.div` + border-bottom: solid ${remcalc(1)} ${props => props.theme.grey}; +`; -Breadcrumb.propTypes = { +const getBreadcrumbItems = (...links) => + forceArray(links).map(({ pathname, name }, i) => { + const item = i + 1 >= links.length + ? name + : {name}; + + return {item}; + }); + +const NavBreadcrumb = ({ links = [] }) => + + + + {getBreadcrumbItems(...links)} + + + ; + +NavBreadcrumb.propTypes = { links: PropTypes.arrayOf( PropTypes.shape({ name: PropTypes.string, @@ -69,4 +48,4 @@ Breadcrumb.propTypes = { ) }; -export default Breadcrumb; +export default NavBreadcrumb; diff --git a/packages/cp-frontend/src/containers/deployment-groups/create.js b/packages/cp-frontend/src/containers/deployment-groups/create.js index a95e6da9..cb639d63 100644 --- a/packages/cp-frontend/src/containers/deployment-groups/create.js +++ b/packages/cp-frontend/src/containers/deployment-groups/create.js @@ -14,10 +14,6 @@ import { LayoutContainer } from '@components/layout'; import { Name, Manifest, Review } from '@components/deployment-groups/create'; import { H2 } from 'joyent-ui-toolkit'; -const Title = H2.extend` - margin-top: 0; -`; - const validateName = async ({ name = '' }) => { const { data } = await client.query({ fetchPolicy: 'network-only', @@ -210,7 +206,7 @@ class DeploymentGroupCreate extends Component { return ( - Creating deployment group +

Creating deployment group

{view}
); diff --git a/packages/ui-toolkit/src/breadcrumb/index.js b/packages/ui-toolkit/src/breadcrumb/index.js index ae4ce6d9..4412acaa 100644 --- a/packages/ui-toolkit/src/breadcrumb/index.js +++ b/packages/ui-toolkit/src/breadcrumb/index.js @@ -4,10 +4,9 @@ import { Row } from 'react-styled-flexboxgrid'; /** * @example ./usage.md */ -export default ({ children, ...rest }) => ( +export default ({ children, ...rest }) => {children} - -); + ; export { default as Item } from './item'; diff --git a/packages/ui-toolkit/src/breadcrumb/item.js b/packages/ui-toolkit/src/breadcrumb/item.js index 3902fe42..4c474d0d 100644 --- a/packages/ui-toolkit/src/breadcrumb/item.js +++ b/packages/ui-toolkit/src/breadcrumb/item.js @@ -21,11 +21,10 @@ const Arrow = styled.div` margin: ${remcalc(3)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)}; `; -export default ({ children, ...rest }) => ( +export default ({ children, ...rest }) =>
{children} -
-); + ;