diff --git a/packages/my-joy-beta/src/containers/navigation/breadcrumb.js b/packages/my-joy-beta/src/containers/navigation/breadcrumb.js
index eaaaf478..8be0a29b 100644
--- a/packages/my-joy-beta/src/containers/navigation/breadcrumb.js
+++ b/packages/my-joy-beta/src/containers/navigation/breadcrumb.js
@@ -2,7 +2,7 @@ import React from 'react';
import paramCase from 'param-case';
import get from 'lodash.get';
-import { Breadcrumb } from 'joyent-ui-toolkit';
+import { Breadcrumb, BreadcrumbItem } from 'joyent-ui-toolkit';
export default ({ match }) => {
const instance = get(match, 'params.instance');
@@ -12,14 +12,21 @@ export default ({ match }) => {
name: '/',
pathname: '/instances'
}
- ].concat(
- instance && [
- {
- name: paramCase(instance),
- pathname: `/instances/${instance}`
- }
- ]
- );
+ ]
+ .concat(
+ instance && [
+ {
+ name: paramCase(instance),
+ pathname: `/instances/${instance}`
+ }
+ ]
+ )
+ .filter(Boolean)
+ .map(({ name, pathname }) => (
+
+ {name}
+
+ ));
- return ;
+ return {links};
};
diff --git a/packages/my-joyent/src/components/home/home.js b/packages/my-joyent/src/components/home/home.js
index 4abbcba8..231143a8 100644
--- a/packages/my-joyent/src/components/home/home.js
+++ b/packages/my-joyent/src/components/home/home.js
@@ -7,6 +7,7 @@ import PackagesHOC from '@containers/packages';
import {
Message,
Breadcrumb,
+ BreadcrumbItem,
Anchor,
Button
} from 'joyent-ui-toolkit';
@@ -78,21 +79,19 @@ class Home extends Component {
) : null;
+ const breadcrumbLinks = [
+ { name: 'Instances', pathname: '/' },
+ { name: 'Create Instance', pathname: '/' }
+ ].map(({ name, pathname }) => (
+
+ {name}
+
+ ));
+
return (
-
+ {breadcrumbLinks}
{_msg}
props.theme.grey};
-`;
-
-const getBreadcrumbItems = links =>
- forceArray(links).map(({ pathname, name }) => (
- -
- {name}
-
- ));
-
-const Container = ({ links = [] }) => (
-
-
- {getBreadcrumbItems(links)}
-
-
-);
-
-Container.propTypes = {
- links: PropTypes.arrayOf(
- PropTypes.shape({
- name: PropTypes.string,
- pathname: PropTypes.string
- })
- )
-};
-
-export default Container;
diff --git a/packages/ui-toolkit/src/breadcrumb/index.js b/packages/ui-toolkit/src/breadcrumb/index.js
index 28154997..766e9a18 100644
--- a/packages/ui-toolkit/src/breadcrumb/index.js
+++ b/packages/ui-toolkit/src/breadcrumb/index.js
@@ -1,14 +1,26 @@
import React from 'react';
+import forceArray from 'force-array';
+import styled from 'styled-components';
import { Row, Col } from 'react-styled-flexboxgrid';
+import PropTypes from 'prop-types';
+import remcalc from 'remcalc';
+
+import View from '../layout/view-container';
+import Breadcrumb from './index';
+import Item from './item';
+
+const Border = styled.div`
+ border-bottom: solid ${remcalc(1)} ${props => props.theme.grey};
+`;
-/**
- * @example ./usage.md
- */
export default ({ children, ...rest }) => (
-
- {children}
-
+
+
+
+ {children}
+
+
+
);
export { default as Item } from './item';
-export { default as Container } from './container';
diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js
index 537e37c4..5d4d5b5d 100644
--- a/packages/ui-toolkit/src/index.js
+++ b/packages/ui-toolkit/src/index.js
@@ -23,11 +23,7 @@ export { default as StatusLoader } from './status-loader';
export { default as Slider } from './slider';
export { MetricGraph } from './metrics';
-export {
- default as BreadcrumbView,
- Item as BreadcrumbItem,
- Container as Breadcrumb
-} from './breadcrumb';
+export { default as Breadcrumb, Item as BreadcrumbItem } from './breadcrumb';
export {
default as Progressbar,