fix(my-joy-beta): fix small bugs

fixes #1259
fixes #1255

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap

@@ -467,17 +467,6 @@ Array [
                     Created 
                 </span>
             </th>
-            <th
-                className="c14"
-                disabled={undefined}
-                name="th"
-                onClick={[Function]}
-                selected={undefined}
-            >
-                <span>
-                    Updated 
-                </span>
-            </th>
             <th
                 className="c15 c16"
                 disabled={undefined}
@@ -1175,14 +1164,6 @@ exports[`renders <Item /> without throwing 1`] = `
   >
     almost NaN years
   </td>
-  <td
-    className="c10"
-    disabled={undefined}
-    name="td"
-    selected={undefined}
-  >
-    almost NaN years
-  </td>
   <td
     className="c11 c12"
     disabled={undefined}
@@ -1564,14 +1545,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   >
     3 months
   </td>
-  <td
-    className="c10"
-    disabled={undefined}
-    name="td"
-    selected={undefined}
-  >
-    3 months
-  </td>
   <td
     className="c11 c12"
     disabled={undefined}
@@ -1745,7 +1718,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
     >
       <td
         className="c3"
-        colSpan="6"
+        colSpan="5"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -1782,7 +1755,57 @@ exports[`renders <Item mutating /> without throwing 1`] = `
           <p
             className="c8"
           >
-            Loading...
+            Starting...
+          </p>
+        </div>
+      </td>
+    </tr>
+    <tr
+      className="c2"
+      disabled={undefined}
+      name="tr"
+      selected={undefined}
+    >
+      <td
+        className="c3"
+        colSpan="5"
+        disabled={undefined}
+        name="td"
+        selected={undefined}
+      >
+        <div
+          className="c4"
+        >
+          <svg
+            height="10"
+            width="28"
+          >
+            <rect
+              className="c5"
+              height="6"
+              width="6"
+              x="2"
+              y="2"
+            />
+            <rect
+              className="c6"
+              height="6"
+              width="6"
+              x="11"
+              y="2"
+            />
+            <rect
+              className="c7"
+              height="6"
+              width="6"
+              x="20"
+              y="2"
+            />
+          </svg>
+          <p
+            className="c8"
+          >
+            Removing...
           </p>
         </div>
       </td>
@@ -2258,17 +2281,6 @@ Array [
                     Created 
                 </span>
             </th>
-            <th
-                className="c14"
-                disabled={undefined}
-                name="th"
-                onClick={[Function]}
-                selected={undefined}
-            >
-                <span>
-                    Updated 
-                </span>
-            </th>
             <th
                 className="c15 c16"
                 disabled={undefined}
@@ -3091,17 +3103,6 @@ Array [
                     Created 
                 </span>
             </th>
-            <th
-                className="c14"
-                disabled={undefined}
-                name="th"
-                onClick={[Function]}
-                selected={undefined}
-            >
-                <span>
-                    Updated 
-                </span>
-            </th>
             <th
                 className="c15 c16"
                 disabled={undefined}
@@ -3924,17 +3925,6 @@ Array [
                     Created 
                 </span>
             </th>
-            <th
-                className="c14"
-                disabled={undefined}
-                name="th"
-                onClick={[Function]}
-                selected={undefined}
-            >
-                <span>
-                    Updated 
-                </span>
-            </th>
             <th
                 className="c15 c16"
                 disabled={undefined}
@@ -4757,17 +4747,6 @@ Array [
                     Created 
                 </span>
             </th>
-            <th
-                className="c14"
-                disabled={undefined}
-                name="th"
-                onClick={[Function]}
-                selected={undefined}
-            >
-                <span>
-                    Updated 
-                </span>
-            </th>
             <th
                 className="c15 c16"
                 disabled={undefined}
@@ -5590,17 +5569,6 @@ Array [
                     Created 
                 </span>
             </th>
-            <th
-                className="c14"
-                disabled={undefined}
-                name="th"
-                onClick={[Function]}
-                selected={undefined}
-            >
-                <span>
-                    Updated 
-                </span>
-            </th>
             <th
                 className="c15 c16"
                 disabled={undefined}

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

@@ -25,7 +25,8 @@ it('renders <Item mutating /> without throwing', () => {
         <Theme>
           <Table>
             <TableTbody>
-              <Item mutating />
+              <Item mutating='start' />
+              <Item mutating='remove' />
             </TableTbody>
           </Table>
         </Theme>

packages/my-joy-beta/src/components/instances/__tests__/snapshots.ui.js

@@ -26,7 +26,8 @@ it('<Item mutating />', async () => {
       <Theme ss>
         <Table>
           <TableTbody>
-            <Item mutating />
+            <Item mutating='start' />
+            <Item mutating='remove' />
           </TableTbody>
         </Table>
       </Theme>

packages/my-joy-beta/src/components/instances/snapshots.js

@@ -30,6 +30,11 @@ const stateColor = {
   CREATED: 'green'
 };
 
+const loadingState = {
+  start: 'Starting...',
+  remove: 'Removing...'
+};
+
 export const Item = ({
   name,
   state,
@@ -73,8 +78,8 @@ export const Item = ({
         </PopoverContainer>
       </Fragment>
     ) : (
-      <TableTd colSpan="6">
+      <TableTd colSpan="5">
-        <StatusLoader />
+        <StatusLoader msg={loadingState[mutating]} />
       </TableTd>
     )}
   </TableTr>

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

@@ -1,7 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Breadcrumb /> without throwing 1`] = `
-.c0 {
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1.875rem;
+  padding-left: 1.875rem;
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c3 {
   margin-right: auto;
   margin-left: auto;
   box-sizing: border-box;
@@ -9,7 +20,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   max-width: 62.5rem;
 }
 
-.c2 {
+.c4 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -28,7 +39,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c3 {
+.c5 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -38,7 +49,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   display: block;
 }
 
-.c5 {
+.c7 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -48,28 +59,29 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   margin: 0.75rem 0;
 }
 
-.c5 + p,
+.c7 + p,
-.c5 + small,
+.c7 + small,
-.c5 + h1,
+.c7 + h1,
-.c5 + h2,
+.c7 + h2,
-.c5 + label,
+.c7 + label,
-.c5 + h3,
+.c7 + h3,
-.c5 + h4,
+.c7 + h4,
-.c5 + h5,
+.c7 + h5,
-.c5 + div,
+.c7 + div,
-.c5 + span {
+.c7 + span {
   margin-top: 0.75rem;
 }
 
-.c1 {
+.c2 {
-  margin-top: 1.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
 
-.c6 {
+.c8 {
   margin: 0.1875rem 0.625rem;
 }
 
-.c4 {
+.c6 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -80,43 +92,47 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   align-items: center;
 }
 
-.c4:first-child a {
+.c6:first-child a {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c4:last-child svg {
+.c6:last-child svg {
   display: none;
 }
 
-@media only screen and (min-width:48em) {
 .c0 {
+  border-bottom: 1px solid rgb(216,216,216);
+}
+
+@media only screen and (min-width:48em) {
+  .c3 {
     width: 46rem;
   }
 }
 
 @media only screen and (min-width:64em) {
-  .c0 {
+  .c3 {
     width: 56rem;
   }
 }
 
 @media only screen and (min-width:75em) {
-  .c0 {
+  .c3 {
     width: 59rem;
   }
 }
 
 @media only screen and (max-width:47.9375rem) {
-  .c0 {
+  .c3 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
   }
 }
 
 @media only screen and (min-width:0em) {
-  .c3 {
+  .c5 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -125,29 +141,32 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
 }
 
 <div
-  className="c0"
+  className="c0 c1"
->
-  <div
-    className="c1"
 >
   <div
     className="c2"
-      name="breadcrum"
   >
     <div
       className="c3"
     >
       <div
         className="c4"
+        name="breadcrum"
+      >
+        <div
+          className="c5"
+        >
+          <div
+            className="c6"
           >
             <h4
-            className="c5"
+              className="c7"
               name="breadcrum-item"
             >
               Instances
             </h4>
             <svg
-            className="c6 "
+              className="c8 "
               height="6"
               innerRef={undefined}
               style={
@@ -169,10 +188,22 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
       </div>
     </div>
   </div>
+</div>
 `;
 
 exports[`renders <Breadcrumb match /> without throwing 1`] = `
-.c0 {
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1.875rem;
+  padding-left: 1.875rem;
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c3 {
   margin-right: auto;
   margin-left: auto;
   box-sizing: border-box;
@@ -180,7 +211,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   max-width: 62.5rem;
 }
 
-.c2 {
+.c4 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -199,7 +230,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c3 {
+.c5 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -209,7 +240,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   display: block;
 }
 
-.c5 {
+.c7 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -219,28 +250,29 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   margin: 0.75rem 0;
 }
 
-.c5 + p,
+.c7 + p,
-.c5 + small,
+.c7 + small,
-.c5 + h1,
+.c7 + h1,
-.c5 + h2,
+.c7 + h2,
-.c5 + label,
+.c7 + label,
-.c5 + h3,
+.c7 + h3,
-.c5 + h4,
+.c7 + h4,
-.c5 + h5,
+.c7 + h5,
-.c5 + div,
+.c7 + div,
-.c5 + span {
+.c7 + span {
   margin-top: 0.75rem;
 }
 
-.c1 {
+.c2 {
-  margin-top: 1.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
 
-.c6 {
+.c8 {
   margin: 0.1875rem 0.625rem;
 }
 
-.c4 {
+.c6 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -251,43 +283,47 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   align-items: center;
 }
 
-.c4:first-child a {
+.c6:first-child a {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c4:last-child svg {
+.c6:last-child svg {
   display: none;
 }
 
-@media only screen and (min-width:48em) {
 .c0 {
+  border-bottom: 1px solid rgb(216,216,216);
+}
+
+@media only screen and (min-width:48em) {
+  .c3 {
     width: 46rem;
   }
 }
 
 @media only screen and (min-width:64em) {
-  .c0 {
+  .c3 {
     width: 56rem;
   }
 }
 
 @media only screen and (min-width:75em) {
-  .c0 {
+  .c3 {
     width: 59rem;
   }
 }
 
 @media only screen and (max-width:47.9375rem) {
-  .c0 {
+  .c3 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
   }
 }
 
 @media only screen and (min-width:0em) {
-  .c3 {
+  .c5 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -296,29 +332,32 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
 }
 
 <div
-  className="c0"
+  className="c0 c1"
->
-  <div
-    className="c1"
 >
   <div
     className="c2"
-      name="breadcrum"
   >
     <div
       className="c3"
     >
       <div
         className="c4"
+        name="breadcrum"
+      >
+        <div
+          className="c5"
+        >
+          <div
+            className="c6"
           >
             <h4
-            className="c5"
+              className="c7"
               name="breadcrum-item"
             >
               Instances
             </h4>
             <svg
-            className="c6 "
+              className="c8 "
               height="6"
               innerRef={undefined}
               style={
@@ -337,16 +376,16 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
             </svg>
           </div>
           <div
-          className="c4"
+            className="c6"
           >
             <h4
-            className="c5"
+              className="c7"
               name="breadcrum-item"
             >
               name
             </h4>
             <svg
-            className="c6 "
+              className="c8 "
               height="6"
               innerRef={undefined}
               style={
@@ -368,4 +407,5 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
       </div>
     </div>
   </div>
+</div>
 `;

packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Breadcrumb Default Breadcrumb 1`] = `
-.c5 {
+.c7 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -11,24 +11,24 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
   margin: 0.75rem 0;
 }
 
-.c5 + p,
+.c7 + p,
-.c5 + small,
+.c7 + small,
-.c5 + h1,
+.c7 + h1,
-.c5 + h2,
+.c7 + h2,
-.c5 + label,
+.c7 + label,
-.c5 + h3,
+.c7 + h3,
-.c5 + h4,
+.c7 + h4,
-.c5 + h5,
+.c7 + h5,
-.c5 + div,
+.c7 + div,
-.c5 + span {
+.c7 + span {
   margin-top: 0.75rem;
 }
 
-.c6 {
+.c8 {
   margin: 0.1875rem 0.625rem;
 }
 
-.c4 {
+.c6 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -39,17 +39,28 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
   align-items: center;
 }
 
-.c4:first-child a {
+.c6:first-child a {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c4:last-child svg {
+.c6:last-child svg {
   display: none;
 }
 
-.c0 {
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1.875rem;
+  padding-left: 1.875rem;
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c3 {
   margin-right: auto;
   margin-left: auto;
   box-sizing: border-box;
@@ -57,7 +68,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
   max-width: 62.5rem;
 }
 
-.c2 {
+.c4 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -76,7 +87,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
   margin-left: -0.625rem;
 }
 
-.c3 {
+.c5 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -86,37 +97,42 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
   display: block;
 }
 
-.c1 {
+.c2 {
-  margin-top: 1.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.c0 {
+  border-bottom: 1px solid rgb(216,216,216);
 }
 
 @media only screen and (min-width:48em) {
-  .c0 {
+  .c3 {
     width: 46rem;
   }
 }
 
 @media only screen and (min-width:64em) {
-  .c0 {
+  .c3 {
     width: 56rem;
   }
 }
 
 @media only screen and (min-width:75em) {
-  .c0 {
+  .c3 {
     width: 59rem;
   }
 }
 
 @media only screen and (max-width:47.9375rem) {
-  .c0 {
+  .c3 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
   }
 }
 
 @media only screen and (min-width:0em) {
-  .c3 {
+  .c5 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -125,29 +141,32 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
 }
 
 <div
-  className="c0"
+  className="c0 c1"
->
-  <div
-    className="c1"
 >
   <div
     className="c2"
-      name="breadcrum"
   >
     <div
       className="c3"
     >
       <div
         className="c4"
+        name="breadcrum"
+      >
+        <div
+          className="c5"
+        >
+          <div
+            className="c6"
           >
             <h4
-            className="c5"
+              className="c7"
               name="breadcrum-item"
             >
               Home
             </h4>
             <svg
-            className="c6 "
+              className="c8 "
               height="6"
               innerRef={undefined}
               style={
@@ -166,16 +185,16 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
             </svg>
           </div>
           <div
-          className="c4"
+            className="c6"
           >
             <h4
-            className="c5"
+              className="c7"
               name="breadcrum-item"
             >
               Warp Records Blog
             </h4>
             <svg
-            className="c6 "
+              className="c8 "
               height="6"
               innerRef={undefined}
               style={
@@ -194,16 +213,16 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
             </svg>
           </div>
           <div
-          className="c4"
+            className="c6"
           >
             <h4
-            className="c5"
+              className="c7"
               name="breadcrum-item"
             >
               Services
             </h4>
             <svg
-            className="c6 "
+              className="c8 "
               height="6"
               innerRef={undefined}
               style={
@@ -222,16 +241,16 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
             </svg>
           </div>
           <div
-          className="c4"
+            className="c6"
           >
             <h4
-            className="c5"
+              className="c7"
               name="breadcrum-item"
             >
               Nginx
             </h4>
             <svg
-            className="c6 "
+              className="c8 "
               height="6"
               innerRef={undefined}
               style={
@@ -253,6 +272,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
       </div>
     </div>
   </div>
+</div>
 `;
 
 exports[`Breadcrumb Default Item 1`] = `

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

@@ -1,20 +1,27 @@
 import React from 'react';
+import styled from 'styled-components';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
-import { Margin } from 'styled-components-spacing';
+import { Margin, Padding } from 'styled-components-spacing';
 
 import Container from '../layout/view-container';
 
+const BreadcrumContianer = styled(Container)`
+  border-bottom: 1px solid ${props => props.theme.grey};
+`;
+
 /**
  * @example ./usage.md
  */
 export default ({ children, ...rest }) => (
-  <Container {...rest}>
+  <BreadcrumContianer {...rest} fluid>
-    <Margin top={4}>
+    <Padding top={2} bottom={2}>
+      <Container>
         <Row name="breadcrum">
           <Col xs={12}>{children}</Col>
         </Row>
-    </Margin>
       </Container>
+    </Padding>
+  </BreadcrumContianer>
 );
 
 export { default as Item } from './item';

yarn.lock

@@ -3937,15 +3937,15 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.0, escape-string-regexp@^1
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
 escodegen@^1.6.1, escodegen@^1.9.0:
-  version "1.9.0"
+  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.0.tgz#9811a2f265dc1cd3894420ee3717064b632b8852"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.1.tgz#dbae17ef96c8e4bedb1356f4504fa4cc2f7cb7e2"
   dependencies:
     esprima "^3.1.3"
     estraverse "^4.2.0"
     esutils "^2.0.2"
     optionator "^0.8.1"
   optionalDependencies:
-    source-map "~0.5.6"
+    source-map "~0.6.1"
 
 escope@^3.6.0:
   version "3.6.0"
@@ -10519,7 +10519,7 @@ source-map-url@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.3.0.tgz#7ecaf13b57bcd09da8a40c5d269db33799d4aaf9"
 
-source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.6:
+source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"