feat(ui-toolkit): fluid Breadcrumb with bottom-border (#884)

packages/my-joy-beta/src/components/instances/__tests__/key-value.spec.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { reduxForm } from 'redux-form';
-import Store from '@mocks/store';
 import 'jest-styled-components';
 
+import Store from '@mocks/store';
 import KeyValue from '../key-value';
 
 const KeyValueForm = reduxForm()(KeyValue);

packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap

@@ -1,79 +1,119 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Header /> without throwing 1`] = `
-.c5 {
+.c8 {
-  padding-top: 0.6875rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+  text-align: center;
+  color: rgb(255,255,255);
+  margin: 0;
 }
 
-.c0 {
+.c8 + p,
-  display: -webkit-box;
+.c8 + small,
-  display: -webkit-flex;
+.c8 + h1,
-  display: -ms-flexbox;
+.c8 + h2,
-  display: flex;
+.c8 + label,
-  -webkit-flex-direction: row;
+.c8 + h3,
-  -ms-flex-direction: row;
+.c8 + h4,
-  flex-direction: row;
+.c8 + h5,
-  -webkit-flex-wrap: nowrap;
+.c8 + div,
-  -ms-flex-wrap: nowrap;
+.c8 + span {
-  flex-wrap: nowrap;
+  padding-bottom: 2.25rem;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  background-color: rgb(30,49,59);
-  max-height: 3.3125rem;
-  min-height: 3.3125rem;
-  line-height: 1.5625rem;
 }
 
-.c1 {
+.c7 {
-  margin-right: auto;
+  -webkit-flex: 0 1 auto;
-  margin-left: auto;
+  -ms-flex: 0 1 auto;
-  padding-right: 2rem;
+  flex: 0 1 auto;
-  padding-left: 2rem;
+  -webkit-align-self: auto;
-  width: 100%;
+  -ms-flex-item-align: auto;
-  padding-left: 0;
+  align-self: auto;
-  padding-right: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  max-height: 3.3125rem;
-  min-height: 3.3125rem;
-}
-
-.c2 {
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
-  width: 9.375rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0 1.125rem;
 }
 
-.c2:hover,
+.c7 svg {
-.c2.active {
+  margin-right: 0.375rem;
+}
+
+.c7:not(:last-of-type) {
+  border-right: 0.0625rem solid rgba(255,255,255,0.15);
+}
+
+.c7:first-of-type {
+  margin-left: auto;
+}
+
+.c7:hover,
+.c7.active {
   background: rgba(255,255,255,0.15);
 }
 
+.c9 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  padding: 0.9375rem;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  color: rgb(255,255,255);
+  text-decoration: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-transition: all 200ms ease;
+  transition: all 200ms ease;
+  max-height: 3.3125rem;
+  min-height: 3.3125rem;
+  box-sizing: border-box;
+}
+
+.c4 {
+  padding: 0.9375rem;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  color: rgb(255,255,255);
+  text-decoration: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-transition: all 200ms ease;
+  transition: all 200ms ease;
+  max-height: 3.3125rem;
+  min-height: 3.3125rem;
+  box-sizing: border-box;
+}
+
 .c3 {
   margin: 0;
   font-weight: 400;
@@ -98,29 +138,23 @@ exports[`renders <Header /> without throwing 1`] = `
   margin-top: 1.5rem;
 }
 
-.c4 {
+.c2 {
-  padding: 0.9375rem;
+  -webkit-align-self: stretch;
-  line-height: 1.5rem;
+  -ms-flex-item-align: stretch;
-  font-size: 0.9375rem;
+  align-self: stretch;
-  color: rgb(255,255,255);
+  -webkit-order: 0;
-  text-decoration: none;
+  -ms-flex-order: 0;
+  order: 0;
+  width: 9.375rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
+}
-  -webkit-box-align: center;
+
-  -ms-flex-align: center;
+.c2:hover,
-  align-items: center;
+.c2.active {
-  -webkit-box-pack: center;
+  background: rgba(255,255,255,0.15);
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-transition: all 200ms ease;
-  transition: all 200ms ease;
-  max-height: 3.3125rem;
-  min-height: 3.3125rem;
-  box-sizing: border-box;
 }
 
 .c6 {
@@ -163,92 +197,58 @@ exports[`renders <Header /> without throwing 1`] = `
   background: rgba(255,255,255,0.15);
 }
 
-.c7 {
+.c1 {
-  -webkit-flex: 0 1 auto;
+  margin-right: auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-align-self: auto;
-  -ms-flex-item-align: auto;
-  align-self: auto;
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding: 0 1.125rem;
-}
-
-.c7 svg {
-  margin-right: 0.375rem;
-}
-
-.c7:not(:last-of-type) {
-  border-right: 0.0625rem solid rgba(255,255,255,0.15);
-}
-
-.c7:first-of-type {
   margin-left: auto;
-}
+  padding-right: 2rem;
-
+  padding-left: 2rem;
-.c7:hover,
+  width: 100%;
-.c7.active {
+  padding-left: 0;
-  background: rgba(255,255,255,0.15);
+  padding-right: 0;
-}
-
-.c8 {
-  font-weight: 400;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-  text-align: center;
-  color: rgb(255,255,255);
-  margin: 0;
-}
-
-.c8 + p,
-.c8 + small,
-.c8 + h1,
-.c8 + h2,
-.c8 + label,
-.c8 + h3,
-.c8 + h4,
-.c8 + h5,
-.c8 + div,
-.c8 + span {
-  padding-bottom: 2.25rem;
-}
-
-.c9 {
-  background-color: transparent;
-  text-decoration-skip: objects;
-  padding: 0.9375rem;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  color: rgb(255,255,255);
-  text-decoration: none;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
+  -webkit-flex-wrap: nowrap;
-  -webkit-box-align: center;
+  -ms-flex-wrap: nowrap;
-  -ms-flex-align: center;
+  flex-wrap: nowrap;
-  align-items: center;
+  -webkit-align-content: stretch;
-  -webkit-box-pack: center;
+  -ms-flex-line-pack: stretch;
-  -webkit-justify-content: center;
+  align-content: stretch;
-  -ms-flex-pack: center;
+  -webkit-align-items: stretch;
-  justify-content: center;
+  -webkit-box-align: stretch;
-  -webkit-transition: all 200ms ease;
+  -ms-flex-align: stretch;
-  transition: all 200ms ease;
+  align-items: stretch;
   max-height: 3.3125rem;
   min-height: 3.3125rem;
-  box-sizing: border-box;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  background-color: rgb(30,49,59);
+  max-height: 3.3125rem;
+  min-height: 3.3125rem;
+  line-height: 1.5625rem;
+}
+
+.c5 {
+  padding-top: 0.6875rem;
 }
 
 <div

packages/my-joy-beta/src/components/navigation/__tests__/header.spec.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
 import Theme from '@mocks/theme';
 import Router from '@mocks/router';
-import 'jest-styled-components';
 
 import Header from '../header';
 

packages/my-joy-beta/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap

@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Breadcrumb /> without throwing 1`] = `
+.c2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c3 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 62.5rem;
+}
+
+.c6 {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c6:visited {
+  color: inherit;
+}
+
+.c5 {
+  margin: 0;
+  font-weight: 400;
+  line-height: 1.875rem;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: rgb(59,70,204);
+  margin: 0.75rem 0;
+}
+
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
+  margin-top: 1.5rem;
+}
+
+.c7 {
+  margin: 0.5rem 0.625rem 0.1875rem 0.625rem;
+}
+
+.c4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 2rem;
+  padding-left: 2rem;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+  border-bottom: 0.0625rem solid rgb(216,216,216);
+}
+
+@media only screen and (min-width:0em) {
+  .c3 {
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c1 {
+    width: 76rem;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c1 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+      name="breadcrum"
+    >
+      <div
+        className="c3"
+      >
+        <div
+          className="c4"
+        >
+          <h2
+            className="c5"
+            name="breadcrum-item"
+          >
+            <a
+              className="c6"
+              href="/instances"
+              onClick={[Function]}
+            >
+              /
+            </a>
+          </h2>
+          <svg
+            className="c7 "
+            height="10"
+            viewBox="0 0 6 10"
+            width="6"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+              fill="#494949"
+              fillRule="evenodd"
+              opacity=".5"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/my-joy-beta/src/containers/navigation/__tests__/breadcrumb.spec.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Theme from '@mocks/theme';
+import Router from '@mocks/router';
+import Store from '@mocks/store';
+
+import Breadcrumb from '../breadcrumb';
+
+it('renders <Breadcrumb /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <Theme>
+            <Breadcrumb />
+          </Theme>
+        </Router>
+      </Store>
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

packages/ui-toolkit/src/breadcrumb/index.js

@@ -1,19 +1,24 @@
 import React from 'react';
 import { Row, Col } from 'react-styled-flexboxgrid';
+import remcalc from 'remcalc';
 
-import View from '../layout/view-container';
+import Container from '../layout/view-container';
+
+const Root = Container.extend`
+  border-bottom: ${remcalc(1)} solid ${props => props.theme.grey};
+`;
 
 /**
  * @example ./usage.md
  */
 export default ({ children, ...rest }) => (
-  <div {...rest}>
+  <Root {...rest} fluid>
-    <View>
+    <Container>
       <Row name="breadcrum">
         <Col xs={12}>{children}</Col>
       </Row>
-    </View>
+    </Container>
-  </div>
+  </Root>
 );
 
 export { default as Item } from './item';

packages/ui-toolkit/src/breadcrumb/item.js

@@ -20,11 +20,11 @@ const Name = H2.extend`
   ${typography.normal};
 
   color: ${props => props.theme.primary};
-  margin: ${remcalc(20)} 0 ${remcalc(18)} 0;
+  margin: ${remcalc(12)} 0;
 `;
 
 const Arrow = styled(Chevron)`
-  margin: ${remcalc(7)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)};
+  margin: ${remcalc(8)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)};
 `;
 
 const Container = styled.div`