feat(my-joy-beta): new image tabs on instance creation

packages/my-joy-beta/src/components/create-instance/image.js

@@ -7,19 +7,24 @@ import Flex from 'styled-flex-component';
 import pascalCase from 'pascal-case';
 import titleCase from 'title-case';
 import remcalc from 'remcalc';
+import format from 'date-fns/format';
+
+import * as Assets from 'joyent-logo-assets';
 
 import {
   H3,
   P,
   FormGroup,
   FormLabel,
-  Toggle,
+  SectionList,
+  SectionListItem,
+  SectionListAnchor,
+  Anchor,
   H4,
   Select,
   Card
 } from 'joyent-ui-toolkit';
 
-import * as Assets from 'joyent-logo-assets';
 
 const Version = styled(Select)`
   min-width: 100%;
@@ -82,17 +87,21 @@ const Image = ({ onClick, active, ...image }) => {
   );
 };
 
-export const ImageType = () => (
-  <form>
-    <Margin bottom={4}>
-      <FormGroup name="vms" field={Field}>
-        <Flex alignCenter>
-          <FormLabel>Infrastructure Container </FormLabel>
-          <Toggle onBlur={null}>Hardware Virtual Machine</Toggle>
-        </Flex>
-      </FormGroup>
-    </Margin>
-  </form>
+export const ImageType = ({ setImageType, vms }) => (
+  <Margin bottom={4}>
+    <SectionList>
+      <SectionListItem>
+        <SectionListAnchor active={!vms} onClick={() => setImageType(false)}>
+          Hardware virtual machine
+        </SectionListAnchor>
+      </SectionListItem>
+      <SectionListItem>
+        <SectionListAnchor active={vms} onClick={() => setImageType(true)}>
+          Infrastructure container
+        </SectionListAnchor>
+      </SectionListItem>
+    </SectionList>
+  </Margin>
 );
 
 export default ({ images = [], onSelectLatest }) => (

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

@@ -139,7 +139,6 @@ export default withTheme(
                     rel="noopener noreferrer"
                     secondary
                     small
-                    icon
                   >
                     <InstanceTypeIcon />
                   </Button>

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

@@ -49,7 +49,7 @@ exports[`renders <Menu links /> without throwing 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  padding: 0 0.375rem;
+  padding: 0 0.75rem;
   padding-bottom: 1rem;
   position: relative;
 }
@@ -72,16 +72,15 @@ exports[`renders <Menu links /> without throwing 1`] = `
 .c2 {
   background: rgb(250,250,250);
   list-style-type: none;
-  padding: 0.8125rem 0.75rem;
+  padding: 0.8125rem 0rem;
   margin: 1.125rem 0 0 0;
-  min-width: 100%;
   max-height: 50px;
   overflow-x: scroll;
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   position: relative;
 }
 

packages/my-joy-beta/src/containers/create-instance/image.js

@@ -42,7 +42,8 @@ const ImageContainer = ({
   loading,
   images,
   vms,
-  step
+  step,
+  setImageType
 }) =>
   queryImage ? (
     <Fragment>
@@ -72,14 +73,6 @@ const ImageContainer = ({
           </a>
         </Description>
       ) : null}
-      <ReduxForm
-        form="create-instance-vms"
-        destroyOnUnmount={false}
-        forceUnregisterOnUnmount={true}
-        initialValues={{ vms: true }}
-      >
-        {props => (loading || !expanded ? null : <ImageType {...props} />)}
-      </ReduxForm>
       <ReduxForm
         form="create-instance-image"
         destroyOnUnmount={false}
@@ -90,15 +83,17 @@ const ImageContainer = ({
           loading && expanded ? (
             <StatusLoader />
           ) : expanded ? (
-            <Image
-              {...props}
-              images={images.filter(i => i.isVm === vms)}
-              onSelectLatest={handleSelectLatest}
-            />
+            <Fragment>
+              <ImageType setImageType={setImageType} vms={vms} />
+              <Image
+                {...props}
+                images={images.filter(i => i.isVm === vms)}
+                onSelectLatest={handleSelectLatest}
+              />
+            </Fragment>
           ) : image.id ? (
             <Preview {...image} />
-          ) : null
-        }
+          ) : null}
       </ReduxForm>
       {expanded ? (
         <Margin top={1} bottom={7}>
@@ -124,8 +119,8 @@ export default compose(
   connect(
     ({ form, values }, ownProps) => {
       const proceeded = get(values, 'create-instance-image-proceeded', false);
-      const vms = get(form, 'create-instance-vms.values.vms', false);
       const image = get(form, 'create-instance-image.values.image', null);
+      const vms = get(values, 'vms', false);
 
       return {
         ...ownProps,
@@ -145,6 +140,9 @@ export default compose(
       handleSelectLatest: ({ versions }) => {
         const id = versions[0].id;
         return dispatch(change('create-instance-image', 'image', id));
+      },
+      setImageType: value => {
+        return dispatch(set({ name: 'vms', value }));
       }
     })
   ),

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap

@@ -289,7 +289,7 @@ exports[`renders <List /> without throwing 1`] = `
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
-  height: 1.875rem;
+  height: 1.5rem;
 }
 
 .c9 {
@@ -815,7 +815,7 @@ exports[`renders <List /> without throwing 1`] = `
 >
   <div
     className="c1 c2"
-    height="1.875rem"
+    height="1.5rem"
   />
   <form
     onSubmit={undefined}
@@ -1579,7 +1579,7 @@ exports[`renders <List error /> without throwing 1`] = `
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
-  height: 1.875rem;
+  height: 1.5rem;
 }
 
 .c9 {
@@ -2172,7 +2172,7 @@ exports[`renders <List error /> without throwing 1`] = `
 >
   <div
     className="c1 c2"
-    height="1.875rem"
+    height="1.5rem"
   />
   <form
     onSubmit={undefined}
@@ -2926,7 +2926,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
-  height: 1.875rem;
+  height: 1.5rem;
 }
 
 .c9 {
@@ -3579,7 +3579,7 @@ exports[`renders <List instances /> without throwing 1`] = `
 >
   <div
     className="c1 c2"
-    height="1.875rem"
+    height="1.5rem"
   />
   <form
     onSubmit={undefined}
@@ -4316,7 +4316,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
+  padding: 0.625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
   min-height: 0rem;
@@ -4577,7 +4577,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
+  padding: 0.625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
   min-height: 0rem;
@@ -4939,7 +4939,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
-  height: 1.875rem;
+  height: 1.5rem;
 }
 
 .c9 {
@@ -5685,7 +5685,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 >
   <div
     className="c1 c2"
-    height="1.875rem"
+    height="1.5rem"
   />
   <form
     onSubmit={undefined}
@@ -6742,7 +6742,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
+  padding: 0.625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
   min-height: 0rem;
@@ -7003,7 +7003,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
+  padding: 0.625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
   min-height: 0rem;
@@ -7365,7 +7365,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
-  height: 1.875rem;
+  height: 1.5rem;
 }
 
 .c9 {
@@ -8111,7 +8111,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 >
   <div
     className="c1 c2"
-    height="1.875rem"
+    height="1.5rem"
   />
   <form
     onSubmit={undefined}
@@ -9168,7 +9168,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
+  padding: 0.625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
   min-height: 0rem;
@@ -9429,7 +9429,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
+  padding: 0.625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
   min-height: 0rem;
@@ -9725,7 +9725,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
+  padding: 0.625rem 1.125rem;
   font-size: 0.8125rem;
   min-width: 0rem;
   min-height: 0rem;
@@ -10004,7 +10004,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
-  height: 1.875rem;
+  height: 1.5rem;
 }
 
 .c9 {
@@ -10750,7 +10750,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 >
   <div
     className="c1 c2"
-    height="1.875rem"
+    height="1.5rem"
   />
   <form
     onSubmit={undefined}
@@ -11568,14 +11568,14 @@ exports[`renders <List loading /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
-.c15 {
+.c16 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
 }
 
-.c16 {
+.c17 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -11584,7 +11584,7 @@ exports[`renders <List loading /> without throwing 1`] = `
   animation-delay: 0.5s;
 }
 
-.c17 {
+.c18 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -11593,7 +11593,7 @@ exports[`renders <List loading /> without throwing 1`] = `
   animation-delay: 1s;
 }
 
-.c18 {
+.c19 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -11609,7 +11609,7 @@ exports[`renders <List loading /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
-.c14 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11778,7 +11778,7 @@ exports[`renders <List loading /> without throwing 1`] = `
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
-  height: 1.875rem;
+  height: 1.5rem;
 }
 
 .c9 {
@@ -11795,6 +11795,13 @@ exports[`renders <List loading /> without throwing 1`] = `
   height: 1.25rem;
 }
 
+.c14 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+  height: 1.875rem;
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -11956,7 +11963,7 @@ exports[`renders <List loading /> without throwing 1`] = `
 >
   <div
     className="c1 c2"
-    height="1.875rem"
+    height="1.5rem"
   />
   <form
     onSubmit={undefined}
@@ -12015,32 +12022,32 @@ exports[`renders <List loading /> without throwing 1`] = `
     />
   </form>
   <div
-    className="c1 c2"
+    className="c14 c2"
     height="1.875rem"
   />
   <div
-    className="c14"
+    className="c15"
   >
     <svg
       height="10"
       width="28"
     >
       <rect
-        className="c15"
+        className="c16"
         height="6"
         width="6"
         x="2"
         y="2"
       />
       <rect
-        className="c16"
+        className="c17"
         height="6"
         width="6"
         x="11"
         y="2"
       />
       <rect
-        className="c17"
+        className="c18"
         height="6"
         width="6"
         x="20"
@@ -12048,7 +12055,7 @@ exports[`renders <List loading /> without throwing 1`] = `
       />
     </svg>
     <p
-      className="c18"
+      className="c19"
     >
       Loading...
     </p>

packages/my-joy-beta/src/containers/instances/list.js

@@ -152,7 +152,7 @@ export const List = ({
 
   return (
     <ViewContainer main>
-      <Divider height={remcalc(30)} transparent />
+      <Divider height={remcalc(24)} transparent />
       <ReduxForm form={MENU_FORM_NAME}>
         {props => (
           <ToolbarForm

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

@@ -4,15 +4,12 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
 .c0 {
   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;
+  max-width: 62.5rem;
 }
 
-.c1 {
+.c2 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -31,7 +28,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c2 {
+.c3 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -41,7 +38,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   display: block;
 }
 
-.c4 {
+.c5 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -51,24 +48,28 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   margin: 0.75rem 0;
 }
 
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + span {
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
   margin-top: 0.75rem;
 }
 
-.c5 {
+.c1 {
+  margin-top: 1.5rem;
+}
+
+.c6 {
   margin: 0.1875rem 0.625rem;
 }
 
-.c3 {
+.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -79,12 +80,43 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
   align-items: center;
 }
 
-.c3:last-child svg {
+.c4:first-child a {
+  color: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c4:last-child svg {
   display: none;
 }
 
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 56rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 59rem;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
 @media only screen and (min-width:0em) {
-  .c2 {
+  .c3 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -97,38 +129,42 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
 >
   <div
     className="c1"
-    name="breadcrum"
   >
     <div
       className="c2"
+      name="breadcrum"
     >
       <div
         className="c3"
       >
-        <h4
+        <div
           className="c4"
-          name="breadcrum-item"
         >
-          Instances
-        </h4>
-        <svg
-          className="c5 "
-          height="6"
-          innerRef={undefined}
-          style={
-            Object {
-              "transform": "rotate(-90deg)",
+          <h4
+            className="c5"
+            name="breadcrum-item"
+          >
+            Instances
+          </h4>
+          <svg
+            className="c6 "
+            height="6"
+            innerRef={undefined}
+            style={
+              Object {
+                "transform": "rotate(-90deg)",
+              }
             }
-          }
-          viewBox="0 0 9.6 6"
-          width="9.6"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-            fill="rgb(151, 151, 151)"
-          />
-        </svg>
+            viewBox="0 0 9.6 6"
+            width="9.6"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+              fill="rgb(151, 151, 151)"
+            />
+          </svg>
+        </div>
       </div>
     </div>
   </div>
@@ -139,15 +175,12 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
 .c0 {
   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;
+  max-width: 62.5rem;
 }
 
-.c1 {
+.c2 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -166,7 +199,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c2 {
+.c3 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -176,7 +209,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   display: block;
 }
 
-.c4 {
+.c5 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -186,24 +219,28 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   margin: 0.75rem 0;
 }
 
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + span {
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
   margin-top: 0.75rem;
 }
 
-.c5 {
+.c1 {
+  margin-top: 1.5rem;
+}
+
+.c6 {
   margin: 0.1875rem 0.625rem;
 }
 
-.c3 {
+.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -214,12 +251,43 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
   align-items: center;
 }
 
-.c3:last-child svg {
+.c4:first-child a {
+  color: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c4:last-child svg {
   display: none;
 }
 
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 56rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 59rem;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
 @media only screen and (min-width:0em) {
-  .c2 {
+  .c3 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -232,66 +300,70 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
 >
   <div
     className="c1"
-    name="breadcrum"
   >
     <div
       className="c2"
+      name="breadcrum"
     >
       <div
         className="c3"
       >
-        <h4
+        <div
           className="c4"
-          name="breadcrum-item"
         >
-          Instances
-        </h4>
-        <svg
-          className="c5 "
-          height="6"
-          innerRef={undefined}
-          style={
-            Object {
-              "transform": "rotate(-90deg)",
+          <h4
+            className="c5"
+            name="breadcrum-item"
+          >
+            Instances
+          </h4>
+          <svg
+            className="c6 "
+            height="6"
+            innerRef={undefined}
+            style={
+              Object {
+                "transform": "rotate(-90deg)",
+              }
             }
-          }
-          viewBox="0 0 9.6 6"
-          width="9.6"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-            fill="rgb(151, 151, 151)"
-          />
-        </svg>
-      </div>
-      <div
-        className="c3"
-      >
-        <h4
+            viewBox="0 0 9.6 6"
+            width="9.6"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+              fill="rgb(151, 151, 151)"
+            />
+          </svg>
+        </div>
+        <div
           className="c4"
-          name="breadcrum-item"
         >
-          name
-        </h4>
-        <svg
-          className="c5 "
-          height="6"
-          innerRef={undefined}
-          style={
-            Object {
-              "transform": "rotate(-90deg)",
+          <h4
+            className="c5"
+            name="breadcrum-item"
+          >
+            name
+          </h4>
+          <svg
+            className="c6 "
+            height="6"
+            innerRef={undefined}
+            style={
+              Object {
+                "transform": "rotate(-90deg)",
+              }
             }
-          }
-          viewBox="0 0 9.6 6"
-          width="9.6"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-            fill="rgb(151, 151, 151)"
-          />
-        </svg>
+            viewBox="0 0 9.6 6"
+            width="9.6"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+              fill="rgb(151, 151, 151)"
+            />
+          </svg>
+        </div>
       </div>
     </div>
   </div>

packages/my-joy-beta/src/server-error.js

@@ -16,7 +16,7 @@ import Breadcrumb from '@containers/navigation/breadcrumb';
 
 export const Route = () => (
   <ViewContainer main>
-    <Divider height={remcalc(30)} transparent />
+    <Divider height={remcalc(24)} transparent />
     <Margin bottom={4}>
       <Message error>
         <MessageTitle>Ooops!</MessageTitle>

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`] = `
-.c4 {
+.c5 {
   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;
 }
 
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + span {
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
   margin-top: 0.75rem;
 }
 
-.c5 {
+.c6 {
   margin: 0.1875rem 0.625rem;
 }
 
-.c3 {
+.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -39,22 +39,25 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
   align-items: center;
 }
 
-.c3:last-child svg {
+.c4:first-child a {
+  color: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c4:last-child svg {
   display: none;
 }
 
 .c0 {
   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;
+  max-width: 62.5rem;
 }
 
-.c1 {
+.c2 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -73,7 +76,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
   margin-left: -0.625rem;
 }
 
-.c2 {
+.c3 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -83,8 +86,37 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
   display: block;
 }
 
+.c1 {
+  margin-top: 1.5rem;
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 56rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 59rem;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
 @media only screen and (min-width:0em) {
-  .c2 {
+  .c3 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -97,122 +129,126 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
 >
   <div
     className="c1"
-    name="breadcrum"
   >
     <div
       className="c2"
+      name="breadcrum"
     >
       <div
         className="c3"
       >
-        <h4
+        <div
           className="c4"
-          name="breadcrum-item"
         >
-          Home
-        </h4>
-        <svg
-          className="c5 "
-          height="6"
-          innerRef={undefined}
-          style={
-            Object {
-              "transform": "rotate(-90deg)",
+          <h4
+            className="c5"
+            name="breadcrum-item"
+          >
+            Home
+          </h4>
+          <svg
+            className="c6 "
+            height="6"
+            innerRef={undefined}
+            style={
+              Object {
+                "transform": "rotate(-90deg)",
+              }
             }
-          }
-          viewBox="0 0 9.6 6"
-          width="9.6"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-            fill="rgb(151, 151, 151)"
-          />
-        </svg>
-      </div>
-      <div
-        className="c3"
-      >
-        <h4
+            viewBox="0 0 9.6 6"
+            width="9.6"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+              fill="rgb(151, 151, 151)"
+            />
+          </svg>
+        </div>
+        <div
           className="c4"
-          name="breadcrum-item"
         >
-          Warp Records Blog
-        </h4>
-        <svg
-          className="c5 "
-          height="6"
-          innerRef={undefined}
-          style={
-            Object {
-              "transform": "rotate(-90deg)",
+          <h4
+            className="c5"
+            name="breadcrum-item"
+          >
+            Warp Records Blog
+          </h4>
+          <svg
+            className="c6 "
+            height="6"
+            innerRef={undefined}
+            style={
+              Object {
+                "transform": "rotate(-90deg)",
+              }
             }
-          }
-          viewBox="0 0 9.6 6"
-          width="9.6"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-            fill="rgb(151, 151, 151)"
-          />
-        </svg>
-      </div>
-      <div
-        className="c3"
-      >
-        <h4
+            viewBox="0 0 9.6 6"
+            width="9.6"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+              fill="rgb(151, 151, 151)"
+            />
+          </svg>
+        </div>
+        <div
           className="c4"
-          name="breadcrum-item"
         >
-          Services
-        </h4>
-        <svg
-          className="c5 "
-          height="6"
-          innerRef={undefined}
-          style={
-            Object {
-              "transform": "rotate(-90deg)",
+          <h4
+            className="c5"
+            name="breadcrum-item"
+          >
+            Services
+          </h4>
+          <svg
+            className="c6 "
+            height="6"
+            innerRef={undefined}
+            style={
+              Object {
+                "transform": "rotate(-90deg)",
+              }
             }
-          }
-          viewBox="0 0 9.6 6"
-          width="9.6"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-            fill="rgb(151, 151, 151)"
-          />
-        </svg>
-      </div>
-      <div
-        className="c3"
-      >
-        <h4
+            viewBox="0 0 9.6 6"
+            width="9.6"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+              fill="rgb(151, 151, 151)"
+            />
+          </svg>
+        </div>
+        <div
           className="c4"
-          name="breadcrum-item"
         >
-          Nginx
-        </h4>
-        <svg
-          className="c5 "
-          height="6"
-          innerRef={undefined}
-          style={
-            Object {
-              "transform": "rotate(-90deg)",
+          <h4
+            className="c5"
+            name="breadcrum-item"
+          >
+            Nginx
+          </h4>
+          <svg
+            className="c6 "
+            height="6"
+            innerRef={undefined}
+            style={
+              Object {
+                "transform": "rotate(-90deg)",
+              }
             }
-          }
-          viewBox="0 0 9.6 6"
-          width="9.6"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-            fill="rgb(151, 151, 151)"
-          />
-        </svg>
+            viewBox="0 0 9.6 6"
+            width="9.6"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+              fill="rgb(151, 151, 151)"
+            />
+          </svg>
+        </div>
       </div>
     </div>
   </div>
@@ -258,6 +294,12 @@ exports[`Breadcrumb Default Item 1`] = `
   align-items: center;
 }
 
+.c0:first-child a {
+  color: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
 .c0:last-child svg {
   display: none;
 }

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
+import { Margin } from 'styled-components-spacing';
 
 import Container from '../layout/view-container';
 
@@ -7,10 +8,12 @@ import Container from '../layout/view-container';
  * @example ./usage.md
  */
 export default ({ children, ...rest }) => (
-  <Container {...rest} fluid>
-    <Row name="breadcrum">
-      <Col xs={12}>{children}</Col>
-    </Row>
+  <Container {...rest}>
+    <Margin top={4}>
+      <Row name="breadcrum">
+        <Col xs={12}>{children}</Col>
+      </Row>
+    </Margin>
   </Container>
 );
 

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

@@ -18,6 +18,13 @@ const Container = styled.div`
   display: inline-flex;
   align-items: center;
 
+  &:first-child {
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+
   &:last-child {
     svg {
       display: none;
@@ -28,13 +35,9 @@ const Container = styled.div`
 const BaseLink = styled(({ component, children, ...rest }) =>
   React.createElement(component, rest, children)
 )`
-  text-decoration: none;
   cursor: pointer;
   font-weight: ${props => props.theme.font.weight.normal};
-
-  &:visited {
-    color: inherit;
-  }
+  color: ${props => props.theme.primary};
 `;
 
 export default withTheme(({ children, component, theme, ...rest }) => {

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

@@ -228,7 +228,7 @@ const Button = styled(BaseButton)`
   `};
 
   ${is('small')`
-    padding: ${remcalc(9)} ${remcalc(18)};
+    padding: ${remcalc(10)} ${remcalc(18)};
     font-size: ${remcalc(13)};
     min-width: ${remcalc(0)};
     min-height: ${remcalc(0)};

packages/ui-toolkit/src/section-list/__tests__/__snapshots__/section.spec.js.snap

@@ -23,7 +23,7 @@ exports[`SectionList Anchor 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  padding: 0 0.375rem;
+  padding: 0 0.75rem;
   padding-bottom: 1rem;
   position: relative;
 }
@@ -73,7 +73,7 @@ exports[`SectionList Anchor 2`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  padding: 0 0.375rem;
+  padding: 0 0.75rem;
   padding-bottom: 1rem;
   position: relative;
   font-weight: 600;
@@ -147,7 +147,7 @@ exports[`SectionList Item 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  padding: 0 0.375rem;
+  padding: 0 0.75rem;
   padding-bottom: 1rem;
   position: relative;
 }
@@ -213,7 +213,7 @@ exports[`SectionList SectionList 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  padding: 0 0.375rem;
+  padding: 0 0.75rem;
   padding-bottom: 1rem;
   position: relative;
   font-weight: 600;
@@ -250,7 +250,7 @@ exports[`SectionList SectionList 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  padding: 0 0.375rem;
+  padding: 0 0.75rem;
   padding-bottom: 1rem;
   position: relative;
 }
@@ -273,16 +273,15 @@ exports[`SectionList SectionList 1`] = `
 .c0 {
   background: rgb(250,250,250);
   list-style-type: none;
-  padding: 0.8125rem 0.75rem;
+  padding: 0.8125rem 0rem;
   margin: 1.125rem 0 0 0;
-  min-width: 100%;
   max-height: 50px;
   overflow-x: scroll;
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   position: relative;
 }
 

packages/ui-toolkit/src/section-list/index.js

@@ -7,13 +7,12 @@ import Baseline from '../baseline';
 const UnorderedList = styled.ul`
   background: ${props => props.theme.disabled};
   list-style-type: none;
-  padding: ${remcalc(13)} ${remcalc(12)};
+  padding: ${remcalc(13)} ${remcalc(0)};
   margin: ${remcalc(18)} 0 0 0;
-  min-width: 100%;
   max-height: 50px;
   overflow-x: scroll;
   box-sizing: border-box;
-  display: flex;
+  display: inline-flex;
   position: relative;
 
   &:after {

packages/ui-toolkit/src/section-list/item.js

@@ -30,7 +30,7 @@ export const Anchor = Baseline(styled(BaseAnchor)`
   color: ${props => props.theme.secondary};
   text-decoration: none;
   cursor: pointer;
-  padding: 0 ${remcalc(6)};
+  padding: 0 ${remcalc(12)};
   padding-bottom: ${remcalc(16)};
   position: relative;