feat(my-joyent): ssd/magnetic form

packages/my-joyent/package.json

@@ -20,6 +20,7 @@
     "graphql-tag": "^2.4.2",
     "jest-cli": "^21.0.1",
     "joyent-ui-toolkit": "^2.0.0",
+    "lodash.isempty": "^4.4.0",
     "normalized-styled-components": "^1.0.9",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",

packages/my-joyent/src/components/diskTypeForm/__tests__/__snapshots__/index.spec.js.snap

@@ -0,0 +1,264 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <DiskTypeForm /> without throwing 1`] = `
+.c7 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  display: none;
+}
+
+.c7[type='checkbox'],
+.c7[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c7[type='number']::-webkit-inner-spin-button,
+.c7[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c7[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c7[type='search']::-webkit-search-cancel-button,
+.c7[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c7::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c7:checked + label::after {
+  opacity: 1;
+}
+
+.c7:selected + label::after {
+  opacity: 1;
+}
+
+.c7:disabled + label {
+  background-color: rgb(249,249,249);
+}
+
+.c7:disabled + label::after {
+  opacity: 0.3;
+}
+
+.c8 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  top: 0;
+  box-sizing: border-box;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 1px solid;
+  cursor: pointer;
+  border-radius: 4px;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c8::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c6 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  margin-right: 0.5rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+}
+
+.c5 {
+  list-style-type: none;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+}
+
+.c3 {
+  margin: 0;
+  padding: 0;
+}
+
+.c4 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c1 {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+}
+
+.c0 {
+  margin-top: 0.75rem;
+  min-width: 12.5rem;
+}
+
+.c0 label {
+  font-size: 0.8125rem;
+}
+
+.c2 {
+  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;
+  margin-top: 0.375rem;
+}
+
+<form
+  onChange={[Function]}
+>
+  <section
+    className="c0"
+  >
+    <legend
+      className="c1"
+    >
+      Disk
+    </legend>
+    <ul
+      className="c2 c3"
+    >
+      <fieldset
+        className="c4"
+        style={undefined}
+      >
+        <div>
+          <li
+            checked={false}
+            className="c5"
+            name="magnetic"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onDragStart={[Function]}
+            onDrop={[Function]}
+            onFocus={[Function]}
+            value=""
+          >
+            <div
+              className="c6"
+              type="checkbox"
+            >
+              <input
+                checked={false}
+                className="c7"
+                id="bZXIZF"
+                name="magnetic"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onDragStart={[Function]}
+                onDrop={[Function]}
+                onFocus={[Function]}
+                type="checkbox"
+                value=""
+              />
+              <label
+                className="c8"
+                htmlFor="bZXIZF"
+              />
+            </div>
+            Magnetic
+          </li>
+        </div>
+      </fieldset>
+      <fieldset
+        className="c4"
+        style={undefined}
+      >
+        <div>
+          <li
+            checked={false}
+            className="c5"
+            name="ssd"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onDragStart={[Function]}
+            onDrop={[Function]}
+            onFocus={[Function]}
+            value=""
+          >
+            <div
+              className="c6"
+              type="checkbox"
+            >
+              <input
+                checked={false}
+                className="c7"
+                id="cvStXY"
+                name="ssd"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onDragStart={[Function]}
+                onDrop={[Function]}
+                onFocus={[Function]}
+                type="checkbox"
+                value=""
+              />
+              <label
+                className="c8"
+                htmlFor="cvStXY"
+              />
+            </div>
+            SSD
+          </li>
+        </div>
+      </fieldset>
+    </ul>
+  </section>
+</form>
+`;

packages/my-joyent/src/components/diskTypeForm/__tests__/index.spec.js

@@ -0,0 +1,23 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Router, Store } from '@mocks/';
+import { default as DiskTypeForm } from '../';
+
+it('renders <DiskTypeForm /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <DiskTypeForm />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/my-joyent/src/components/diskTypeForm/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+import { reduxForm } from 'redux-form';
+import remcalc from 'remcalc';
+import { FormGroup, Checkbox, Legend, CheckboxList } from 'joyent-ui-toolkit';
+
+const Radios = styled.section`
+  margin-top: ${remcalc(12)};
+  min-width: ${remcalc(200)};
+
+  label {
+    font-size: ${remcalc(13)};
+  }
+`;
+
+const CheckboxListStyled = styled(CheckboxList)`
+  display: flex;
+  align-items: center;
+  margin-top: ${remcalc(6)};
+`;
+
+const DiskTypeForm = ({ onChange, handleSubmit }) => (
+  <form onChange={() => handleSubmit(params => onChange(params))}>
+    <Radios>
+      <Legend>Disk</Legend>
+      <CheckboxListStyled>
+        <FormGroup name="magnetic" type="checkbox" reduxForm>
+          <Checkbox>Magnetic</Checkbox>
+        </FormGroup>
+        <FormGroup name="ssd" type="checkbox" reduxForm>
+          <Checkbox>SSD</Checkbox>
+        </FormGroup>
+      </CheckboxListStyled>
+    </Radios>
+  </form>
+);
+
+export default reduxForm({ form: 'magnetic' })(DiskTypeForm);

packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Filters /> without throwing 1`] = `
-.c6 {
+.c5 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -49,6 +49,93 @@ exports[`renders <Filters /> without throwing 1`] = `
   font-weight: 600;
 }
 
+.c5::-moz-focus-inner,
+.c5[type='button']::-moz-focus-inner,
+.c5[type='reset']::-moz-focus-inner,
+.c5[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c5:-moz-focusring,
+.c5[type='button']:-moz-focusring,
+.c5[type='reset']:-moz-focusring,
+.c5[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c5:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c5:hover {
+  border: solid 0.0625rem;
+}
+
+.c5:active,
+.c5:active:hover,
+.c5:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c5[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c5 + button {
+  margin-left: 1.25rem;
+}
+
+.c6 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  padding: 0.5625rem 1.125rem;
+  font-weight: 600;
+}
+
 .c6::-moz-focus-inner,
 .c6[type='button']::-moz-focus-inner,
 .c6[type='reset']::-moz-focus-inner,
@@ -89,93 +176,6 @@ exports[`renders <Filters /> without throwing 1`] = `
   margin-left: 1.25rem;
 }
 
-.c7 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  min-width: 7.5rem;
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border-radius: 0.25rem;
-  border: solid 0.0625rem;
-  padding: 0.5625rem 1.125rem;
-  font-weight: 600;
-}
-
-.c7::-moz-focus-inner,
-.c7[type='button']::-moz-focus-inner,
-.c7[type='reset']::-moz-focus-inner,
-.c7[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c7:-moz-focusring,
-.c7[type='button']:-moz-focusring,
-.c7[type='reset']:-moz-focusring,
-.c7[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c7:focus {
-  outline: 0;
-  text-decoration: none;
-}
-
-.c7:hover {
-  border: solid 0.0625rem;
-}
-
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
-  background-image: none;
-  outline: 0;
-}
-
-.c7[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c7 + button {
-  margin-left: 1.25rem;
-}
-
 .c2 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
@@ -185,17 +185,134 @@ exports[`renders <Filters /> without throwing 1`] = `
   display: block;
 }
 
-.c4 {
+.c23 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-family: sans-serif;
-  font-weight: 400;
+  font-size: 100%;
-  font-size: 0.9375rem;
+  line-height: 1.15;
-  font-style: normal;
+  margin: 0;
-  font-stretch: normal;
+  overflow: visible;
-  display: block;
+  display: none;
-  margin-bottom: 0.375rem;
 }
 
-.c10 {
+.c23[type='checkbox'],
+.c23[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c23[type='number']::-webkit-inner-spin-button,
+.c23[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c23[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c23[type='search']::-webkit-search-cancel-button,
+.c23[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c23::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c23:checked + label::after {
+  opacity: 1;
+}
+
+.c23:selected + label::after {
+  opacity: 1;
+}
+
+.c23:disabled + label {
+  background-color: rgb(249,249,249);
+}
+
+.c23:disabled + label::after {
+  opacity: 0.3;
+}
+
+.c24 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  top: 0;
+  box-sizing: border-box;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 1px solid;
+  cursor: pointer;
+  border-radius: 4px;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c24::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c22 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  margin-right: 0.5rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+}
+
+.c21 {
+  list-style-type: none;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+}
+
+.c19 {
+  margin: 0;
+  padding: 0;
+}
+
+.c20 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c9 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   font-size: 0.9375rem;
@@ -206,7 +323,18 @@ exports[`renders <Filters /> without throwing 1`] = `
   font-weight: bold;
 }
 
-.c14 {
+.c17 {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+}
+
+.c13 {
   font-size: 0.8125rem;
   position: absolute;
   top: 0.875rem;
@@ -214,7 +342,7 @@ exports[`renders <Filters /> without throwing 1`] = `
   color: #464646;
 }
 
-.c16 {
+.c15 {
   font-size: 0.8125rem;
   position: absolute;
   top: 0.875rem;
@@ -222,7 +350,7 @@ exports[`renders <Filters /> without throwing 1`] = `
   color: #464646;
 }
 
-.c15 {
+.c14 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -242,17 +370,17 @@ exports[`renders <Filters /> without throwing 1`] = `
   margin-top: 0.125rem;
 }
 
-.c15::active {
+.c14::active {
   -webkit-transform: scale(1.3);
   -ms-transform: scale(1.3);
   transform: scale(1.3);
 }
 
-.c15::focus {
+.c14::focus {
   box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
 }
 
-.c12 {
+.c11 {
   background: #D8D8D8;
   cursor: pointer;
   display: block;
@@ -260,40 +388,61 @@ exports[`renders <Filters /> without throwing 1`] = `
   position: relative;
 }
 
-.c13 {
+.c12 {
   background: #364ACD;
   height: 100%;
   position: absolute;
 }
 
-.c11 {
+.c10 {
   position: relative;
   min-height: 0.625rem;
 }
 
-.c9 {
+.c8 {
   margin-bottom: 0.625rem;
   margin-top: 0.75rem;
 }
 
-.c8 {
+.c16 {
+  margin-top: 0.75rem;
+  min-width: 12.5rem;
+}
+
+.c16 label {
+  font-size: 0.8125rem;
+}
+
+.c18 {
+  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;
+  margin-top: 0.375rem;
+}
+
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c8 > div {
+.c7 > div {
   -webkit-flex-grow: 1;
   -ms-flex-grow: 1;
   flex-grow: 1;
 }
 
-.c8 > div:not(:last-child) {
+.c7 > div:not(:last-child) {
   margin-right: 2.25rem;
 }
 
-.c5 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -329,37 +478,37 @@ exports[`renders <Filters /> without throwing 1`] = `
     Choose package
   </label>
   <label
-    className="c3 c4"
+    className="c3 c2"
   >
     Filter by package type
   </label>
   <section
-    className="c5"
+    className="c4"
   >
     <div>
       <button
-        className="c6"
+        className="c5"
         onClick={[Function]}
         selected={false}
       >
         Compute Optimized
       </button>
       <button
-        className="c6"
+        className="c5"
         onClick={[Function]}
         selected={false}
       >
         General Purpose
       </button>
       <button
-        className="c6"
+        className="c5"
         onClick={[Function]}
         selected={false}
       >
         Memory Optimized
       </button>
       <button
-        className="c6"
+        className="c5"
         onClick={[Function]}
         selected={false}
       >
@@ -367,7 +516,7 @@ exports[`renders <Filters /> without throwing 1`] = `
       </button>
     </div>
     <button
-      className="c7"
+      className="c6"
       disabled={false}
       onClick={[Function]}
     >
@@ -380,30 +529,30 @@ exports[`renders <Filters /> without throwing 1`] = `
     Filter by package feature
   </label>
   <section
-    className="c8"
+    className="c7"
   >
     <div>
       <label
-        className="c9 c10"
+        className="c8 c9"
         htmlFor=""
       >
         GB RAM
       </label>
       <div
         aria-disabled={false}
-        className="c11"
+        className="c10"
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onMouseDown={[Function]}
         onTouchStart={[Function]}
       >
         <div
-          className="c12"
+          className="c11"
           onMouseDown={[Function]}
           onTouchStart={[Function]}
         >
           <div
-            className="c13"
+            className="c12"
             style={
               Object {
                 "left": "0%",
@@ -413,7 +562,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
           <span>
             <span
-              className="c14"
+              className="c13"
               type="min"
             >
               0.256
@@ -424,7 +573,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={50.688}
               aria-valuemin={0.256}
               aria-valuenow={0.256}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -442,7 +591,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           </span>
           <span>
             <span
-              className="c16"
+              className="c15"
               type="max"
             >
               50.688
@@ -453,7 +602,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={50.688}
               aria-valuemin={0.256}
               aria-valuenow={50.688}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -474,26 +623,26 @@ exports[`renders <Filters /> without throwing 1`] = `
     </div>
     <div>
       <label
-        className="c9 c10"
+        className="c8 c9"
         htmlFor=""
       >
         vCPUs
       </label>
       <div
         aria-disabled={false}
-        className="c11"
+        className="c10"
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onMouseDown={[Function]}
         onTouchStart={[Function]}
       >
         <div
-          className="c12"
+          className="c11"
           onMouseDown={[Function]}
           onTouchStart={[Function]}
         >
           <div
-            className="c13"
+            className="c12"
             style={
               Object {
                 "left": "0%",
@@ -503,7 +652,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
           <span>
             <span
-              className="c14"
+              className="c13"
               type="min"
             >
               0.25
@@ -514,7 +663,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={3.25}
               aria-valuemin={0.25}
               aria-valuenow={0.25}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -532,7 +681,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           </span>
           <span>
             <span
-              className="c16"
+              className="c15"
               type="max"
             >
               3.25
@@ -543,7 +692,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={3.25}
               aria-valuemin={0.25}
               aria-valuenow={3.25}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -564,26 +713,26 @@ exports[`renders <Filters /> without throwing 1`] = `
     </div>
     <div>
       <label
-        className="c9 c10"
+        className="c8 c9"
         htmlFor=""
       >
         TB Disk
       </label>
       <div
         aria-disabled={false}
-        className="c11"
+        className="c10"
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onMouseDown={[Function]}
         onTouchStart={[Function]}
       >
         <div
-          className="c12"
+          className="c11"
           onMouseDown={[Function]}
           onTouchStart={[Function]}
         >
           <div
-            className="c13"
+            className="c12"
             style={
               Object {
                 "left": "0%",
@@ -593,7 +742,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
           <span>
             <span
-              className="c14"
+              className="c13"
               type="min"
             >
               0.01
@@ -604,7 +753,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={107.26}
               aria-valuemin={0.01}
               aria-valuenow={0.01}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -622,7 +771,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           </span>
           <span>
             <span
-              className="c16"
+              className="c15"
               type="max"
             >
               107.26
@@ -633,7 +782,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={107.26}
               aria-valuemin={0.01}
               aria-valuenow={107.26}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -654,26 +803,26 @@ exports[`renders <Filters /> without throwing 1`] = `
     </div>
     <div>
       <label
-        className="c9 c10"
+        className="c8 c9"
         htmlFor=""
       >
         $/hr
       </label>
       <div
         aria-disabled={false}
-        className="c11"
+        className="c10"
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onMouseDown={[Function]}
         onTouchStart={[Function]}
       >
         <div
-          className="c12"
+          className="c11"
           onMouseDown={[Function]}
           onTouchStart={[Function]}
         >
           <div
-            className="c13"
+            className="c12"
             style={
               Object {
                 "left": "0%",
@@ -683,7 +832,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
           <span>
             <span
-              className="c14"
+              className="c13"
               type="min"
             >
               0.016
@@ -694,7 +843,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={0.525}
               aria-valuemin={0.016}
               aria-valuenow={0.016}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -712,7 +861,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           </span>
           <span>
             <span
-              className="c16"
+              className="c15"
               type="max"
             >
               0.525
@@ -723,7 +872,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={0.525}
               aria-valuemin={0.016}
               aria-valuenow={0.525}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -742,6 +891,107 @@ exports[`renders <Filters /> without throwing 1`] = `
         </div>
       </div>
     </div>
+    <form
+      onChange={[Function]}
+    >
+      <section
+        className="c16"
+      >
+        <legend
+          className="c17"
+        >
+          Disk
+        </legend>
+        <ul
+          className="c18 c19"
+        >
+          <fieldset
+            className="c20"
+            style={undefined}
+          >
+            <div>
+              <li
+                checked={false}
+                className="c21"
+                name="magnetic"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onDragStart={[Function]}
+                onDrop={[Function]}
+                onFocus={[Function]}
+                value=""
+              >
+                <div
+                  className="c22"
+                  type="checkbox"
+                >
+                  <input
+                    checked={false}
+                    className="c23"
+                    id="sIMIU"
+                    name="magnetic"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onDragStart={[Function]}
+                    onDrop={[Function]}
+                    onFocus={[Function]}
+                    type="checkbox"
+                    value=""
+                  />
+                  <label
+                    className="c24"
+                    htmlFor="sIMIU"
+                  />
+                </div>
+                Magnetic
+              </li>
+            </div>
+          </fieldset>
+          <fieldset
+            className="c20"
+            style={undefined}
+          >
+            <div>
+              <li
+                checked={false}
+                className="c21"
+                name="ssd"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onDragStart={[Function]}
+                onDrop={[Function]}
+                onFocus={[Function]}
+                value=""
+              >
+                <div
+                  className="c22"
+                  type="checkbox"
+                >
+                  <input
+                    checked={false}
+                    className="c23"
+                    id="bCkzvd"
+                    name="ssd"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onDragStart={[Function]}
+                    onDrop={[Function]}
+                    onFocus={[Function]}
+                    type="checkbox"
+                    value=""
+                  />
+                  <label
+                    className="c24"
+                    htmlFor="bCkzvd"
+                  />
+                </div>
+                SSD
+              </li>
+            </div>
+          </fieldset>
+        </ul>
+      </section>
+    </form>
   </section>
 </section>
 `;

packages/my-joyent/src/components/filters/__tests__/filters.spec.js

@@ -6,15 +6,17 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
-import { Router, FiltersMock, PackagesMock } from '@mocks/';
+import { Router, FiltersMock, PackagesMock, Store } from '@mocks/';
 import Filters from '../filters';
 
 it('renders <Filters /> without throwing', () => {
   const tree = renderer
     .create(
-      <Router>
+      <Store>
-        <Filters filters={FiltersMock} packages={PackagesMock} />
+        <Router>
-      </Router>
+          <Filters filters={FiltersMock} packages={PackagesMock} />
+        </Router>
+      </Store>
     )
     .toJSON();
   expect(tree).toMatchSnapshot();

packages/my-joyent/src/components/filters/filters.js

@@ -2,8 +2,13 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
 import isEqual from 'lodash.isequal';
-import { Label, Button, Slider } from 'joyent-ui-toolkit';
+import {
+  Button,
+  Label,
+  Slider
+} from 'joyent-ui-toolkit';
 import { default as defaultState } from '@state/state';
+import { default as DiskTypeFrom } from '@components/diskTypeForm';
 
 const FilterWrapper = styled.section`
   display: flex;
@@ -75,12 +80,12 @@ class Filters extends Component {
   componentWillReceiveProps(nextProps) {
     const { packages } = nextProps;
     packages.length > 1 &&
-    this.setState({
+      this.setState({
-      ram: getFirstAndLast(packages, 'memory'),
+        ram: getFirstAndLast(packages, 'memory'),
-      cpu: getFirstAndLast(packages, 'vcpus'),
+        cpu: getFirstAndLast(packages, 'vcpus'),
-      disk: getFirstAndLast(packages, 'disk'),
+        disk: getFirstAndLast(packages, 'disk'),
-      cost: getFirstAndLast(packages, 'price')
+        cost: getFirstAndLast(packages, 'price')
-    });
+      });
   }
 
   groupChange(group) {
@@ -103,7 +108,8 @@ class Filters extends Component {
     return (
       (nextState.groupClick !== groupClick &&
         isEqual(filtersMap(filters), filtersMap(nextProps.filters))) ||
-      nextState.reset !== reset
+      nextState.reset !== reset ||
+      !isEqual(nextProps.filters.diskType, filters.diskType)
     );
   }
 
@@ -128,14 +134,16 @@ class Filters extends Component {
       cpuSliderChange,
       diskSliderChange,
       costSliderChange,
-      packages
+      packages,
+      diskTypeChange
     } = this.props;
 
     const { reset, cpu, cost, ram, disk, defaults } = this.state;
+
     return (
       <Wrapper>
         <Title>Choose package</Title>
-        <Subtitle marginBottom="1">Filter by package type</Subtitle>
+        <Subtitle>Filter by package type</Subtitle>
         <GroupWrapper>
           <div>
             {filters.groups
@@ -200,13 +208,17 @@ class Filters extends Component {
             greyed={packages.length === 0}
             minValue={defaults.cost.min}
             maxValue={defaults.cost.max}
-            step={0.02}
+            step={0.016}
             value={cost}
-            key={`${cost.min}-${ram.max}`}
+            key={`${cost.min}-${cost.max}`}
             onChangeComplete={value => costSliderChange(value)}
           >
             $/hr
           </Slider>
+          <DiskTypeFrom
+            onChange={params => diskTypeChange(params)}
+            onSubmit={e => {}}
+          />
         </FilterWrapper>
       </Wrapper>
     );

packages/my-joyent/src/components/home/home.js

@@ -28,6 +28,7 @@ class Home extends Component {
     this.closeMessage = this.closeMessage.bind(this);
     this.changeValue = this.changeValue.bind(this);
     this.changeGroup = this.changeGroup.bind(this);
+    this.diskTypeChange = this.diskTypeChange.bind(this);
   }
 
   closeMessage() {
@@ -38,6 +39,7 @@ class Home extends Component {
 
   changeValue(key, value) {
     const { filters, onFilterChange } = this.props;
+
     onFilterChange({
       ...filters,
       [key]: value
@@ -54,6 +56,15 @@ class Home extends Component {
     });
   }
 
+  diskTypeChange(value) {
+    const { filters, onFilterChange } = this.props;
+
+    onFilterChange({
+      ...filters,
+      diskType: { ...value }
+    });
+  }
+
   render() {
     const { showMessage } = this.state;
     const { filters, onFilterReset, packages } = this.props;
@@ -86,6 +97,7 @@ class Home extends Component {
             cpuSliderChange={value => this.changeValue('cpu', value)}
             diskSliderChange={value => this.changeValue('disk', value)}
             costSliderChange={value => this.changeValue('cost', value)}
+            diskTypeChange={this.diskTypeChange}
           />
         </Row>
         <Row>

packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap

@@ -265,7 +265,7 @@ exports[`renders <Package /> without throwing 1`] = `
           <span
             className="c7"
           >
-            SSD
+            Magnetic
           </span>
         </div>
         <div

packages/my-joyent/src/components/package/index.js

@@ -17,7 +17,7 @@ const PackageStyled = styled(Card)`
 `;
 
 const Package = ({
-      pack: { price, memory, vcpus, disk, group },
+      pack: { price, memory, vcpus, disk, group, ssd },
       selected,
       onClick
     }) => (
@@ -30,8 +30,7 @@ const Package = ({
             <CardSubTitle selected={selected}>
               {disk} TB disk
             </CardSubTitle>
-            <CardSubTitle selected={selected}>SSD</CardSubTitle>
+            <CardSubTitle selected={selected}>{ssd ? 'SSD' : 'Magnetic'}</CardSubTitle>
-
             <CardFooter selected={selected}>{group}</CardFooter>
           </CardMeta>
         </CardView>

packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap

@@ -336,7 +336,7 @@ exports[`renders <Packages /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -428,7 +428,7 @@ exports[`renders <Packages /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -520,7 +520,7 @@ exports[`renders <Packages /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -612,7 +612,7 @@ exports[`renders <Packages /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -704,7 +704,7 @@ exports[`renders <Packages /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -796,7 +796,7 @@ exports[`renders <Packages /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div

packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap

@@ -1164,7 +1164,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -1532,7 +1532,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -1716,7 +1716,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -1808,7 +1808,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -1900,7 +1900,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div

packages/my-joyent/src/data/packages.json

@@ -1,6 +1,7 @@
 [
   {
     "id": 1,
+    "ssd": true,
     "name": "High CPU 0.25",
     "vcpus": 0.25,
     "memory": 0.256,
@@ -10,6 +11,7 @@
   },
   {
     "id": 2,
+    "ssd": true,
     "name": "High CPU 0.75",
     "vcpus": 0.5,
     "memory": 0.768,
@@ -19,6 +21,7 @@
   },
   {
     "id": 3,
+    "ssd": true,
     "name": "High CPU 1.75",
     "vcpus": 1,
     "memory": 1.8,
@@ -28,6 +31,7 @@
   },
   {
     "id": 4,
+    "ssd": true,
     "name": "High CPU 3.75",
     "vcpus": 2,
     "memory": 3.8,
@@ -37,6 +41,7 @@
   },
   {
     "id": 5,
+    "ssd": true,
     "name": "High CPU 7.75",
     "vcpus": 4,
     "memory": 7.8,
@@ -46,6 +51,7 @@
   },
   {
     "id": 6,
+    "ssd": true,
     "name": "High CPU 15.75",
     "vcpus": 8,
     "memory": 15.8,
@@ -55,6 +61,7 @@
   },
   {
     "id": 7,
+    "ssd": true,
     "name": "General 3.75",
     "vcpus": 1,
     "memory": 3.8,
@@ -64,6 +71,7 @@
   },
   {
     "id": 8,
+    "ssd": true,
     "name": "General 7.75",
     "vcpus": 2,
     "memory": 7.8,
@@ -73,6 +81,7 @@
   },
   {
     "id": 9,
+    "ssd": true,
     "name": "General 15.75",
     "vcpus": 4,
     "memory": 15.8,
@@ -82,6 +91,7 @@
   },
   {
     "id": 10,
+    "ssd": true,
     "name": "General 31.75",
     "vcpus": 8,
     "memory": 31.8,
@@ -91,6 +101,7 @@
   },
   {
     "id": 11,
+    "ssd": true,
     "name": "High RAM 15.75",
     "vcpus": 2,
     "memory": 15.8,
@@ -100,6 +111,7 @@
   },
   {
     "id": 12,
+    "ssd": true,
     "name": "High RAM 31.75",
     "vcpus": 4,
     "memory": 31.8,
@@ -109,6 +121,7 @@
   },
   {
     "id": 13,
+    "ssd": true,
     "name": "High RAM 63.75",
     "vcpus": 8,
     "memory": 63.8,
@@ -118,6 +131,7 @@
   },
   {
     "id": 14,
+    "ssd": false,
     "name": "Fast Disk 31.75",
     "vcpus": 4,
     "memory": 31.8,
@@ -127,6 +141,7 @@
   },
   {
     "id": 15,
+    "ssd": false,
     "name": "Fast Disk 63.75",
     "vcpus": 8,
     "memory": 63.8,
@@ -136,6 +151,7 @@
 },
   {
     "id": 16,
+    "ssd": false,
     "name": "Big Disk 15.75",
     "vcpus": 2,
     "memory": 15.8,
@@ -145,6 +161,7 @@
   },
   {
     "id": 17,
+    "ssd": false,
     "name": "Big Disk 31.75",
     "vcpus": 4,
     "memory": 31.8,
@@ -154,6 +171,7 @@
   },
   {
     "id": 18,
+    "ssd": false,
     "name": "Big Disk 63.75",
     "vcpus": 8,
     "memory": 63.8,

packages/my-joyent/src/state/filterReducer.js

@@ -1,4 +1,5 @@
 import { default as defaultState } from './state';
+import isEmpty from 'lodash.isempty';
 
 const selectedGroups = groups =>
   groups.filter(group => group.selected).map(group => group.name);
@@ -34,9 +35,16 @@ const filterReducer = (state = defaultState, action) => {
           )
           .filter(
             pack =>
-                selectedGroups(action.filters.groups).length > 0 ? 
+              isEmpty(action.filters.diskType)
-                  selectedGroups(action.filters.groups).includes(pack.group) : 
+                ? true
-                  true
+                : pack.ssd === action.filters.diskType.ssd ||
+                  !pack.ssd === action.filters.diskType.magnetic
+          )
+          .filter(
+            pack =>
+              selectedGroups(action.filters.groups).length > 0
+                ? selectedGroups(action.filters.groups).includes(pack.group)
+                : true
           )
       };
 

packages/my-joyent/src/state/state.js

@@ -6,6 +6,10 @@ const state = {
     cost: { min: 0.016, max: 2.318 },
     ram: { min: 0.256, max: 63.8 },
     disk: { min: 0.01, max: 4.9 },
+    diskType: {
+      magnetic: true,
+      ssd: true
+    },
     groups: [
       { name: 'Compute Optimized', selected: false },
       { name: 'Memory Optimized', selected: false },

packages/ui-toolkit/src/form/base/toggle.js

@@ -32,20 +32,26 @@ const StyledInput = Input.extend`
 const Label = styled.label`
   color: rgb(100, 100, 100);
   position: absolute;
-  width: ${remcalc(22)};
+  width: ${remcalc(18)};
-  height: ${remcalc(22)};
+  height: ${remcalc(18)};
   top: 0;
+  box-sizing: border-box;
 
   background-color: rgb(255, 255, 255);
-  box-shadow: ${insetShaddow};
+  box-shadow: none;
-  border: ${border.unchecked};
+  border: 1px solid ${props => props.theme.grey};
+  cursor: pointer;
 
   ${is('checkbox')`
-    border-radius: ${borderRadius};
+    border-radius: 4px;
+    width: ${remcalc(18)};
+    height: ${remcalc(18)};
   `};
 
   ${is('radio')`
-    border-radius: ${remcalc(11)};
+    width: ${remcalc(18)};
+    height: ${remcalc(18)};
+    border-radius: 50%;
   `};
 
   ${is('error')`
@@ -65,12 +71,13 @@ const Label = styled.label`
       opacity: 0;
       content: '';
       position: absolute;
-      width: ${remcalc(10)};
+      width: ${remcalc(6)};
-      height: ${remcalc(10)};
+      height: ${remcalc(6)};
-      border-radius: ${remcalc(5)};
+      border-radius: 50%;
-      background-color: ${props => props.theme.secondaryActive};
+      background-color: ${props => props.theme.text};
-      top: ${remcalc(6)};
+      top: 50%;
-      left: ${remcalc(6)};
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
     }
   `};
 
@@ -79,31 +86,25 @@ const Label = styled.label`
       opacity: 0;
       content: '';
       position: absolute;
-      width: ${unitcalc(1.5)};
+      width: ${remcalc(6)};
-      height: ${remcalc(4)};
+      height: ${remcalc(2)};
       background: transparent;
-      top: ${remcalc(7)};
+      top: ${remcalc(5)};
-      left: ${remcalc(7)};
+      left: ${remcalc(4)};
-      border: ${unitcalc(0.5)} solid ${props => props.theme.secondaryActive};
+      border: ${remcalc(2)} solid ${props => props.theme.secondaryActive};
       border-top: none;
       border-right: none;
       transform: rotate(-45deg);
     }
   `};
-
-  &:hover {
-    &::after {
-      opacity: 0.3;
-    }
-  }
 `;
 
 const InnerContainer = styled.div`
   display: inline-block;
   vertical-align: text-bottom;
-  margin-right: ${unitcalc(2)};
+  margin-right: ${remcalc(8)};
-  width: ${unitcalc(4)};
+  width: ${remcalc(18)};
-  height: ${unitcalc(4)};
+  height: ${remcalc(18)};
   position: relative;
 `;
 
@@ -126,7 +127,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
 
       const toggle = (
         <InnerContainer {...types} type={type}>
-          <StyledInput {...rest} {...oldValue} id={newValue.id} type={type} />
+          <StyledInput {...rest} id={newValue.id} type={type} />
           <Label
             {...types}
             htmlFor={newValue.id}

packages/ui-toolkit/src/form/checkbox.js

@@ -1,11 +1,29 @@
+import styled from 'styled-components';
+import typography from '../typography';
 import BaseInput from './base/input';
 import BaseToggle from './base/toggle';
 import Baseline from '../baseline';
 import React from 'react';
 
+const Li = styled.li`
+  list-style-type: none;
+  ${typography.fontFamily};
+  ${typography.normal};
+`;
+
+const Ul = styled.ul`
+  margin: 0;
+  padding: 0;
+`;
+
+const CheckboxItem = BaseInput(({ children, id, ...rest }) => (
+  <Li {...rest}>{children}</Li>
+));
+
 const Checkbox = Baseline(
   BaseInput(
     BaseToggle({
+      container: CheckboxItem,
       type: 'checkbox'
     })
   )
@@ -17,3 +35,5 @@ const Checkbox = Baseline(
 export default ({ children, ...rest }) => (
   <Checkbox {...rest}>{children}</Checkbox>
 );
+
+export const CheckboxList = Baseline(Ul);

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

@@ -1,4 +1,4 @@
-export { default as Checkbox } from './checkbox';
+export { default as Checkbox, CheckboxList } from './checkbox';
 export { default as Fieldset } from './fieldset';
 export { default as FormGroup } from './group';
 export { default as Input } from './input';

packages/ui-toolkit/src/index.js

@@ -76,6 +76,7 @@ export {
 
 export {
   Checkbox,
+  CheckboxList,
   Fieldset,
   FormGroup,
   Input,

packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx

@@ -621,7 +621,7 @@ export default class InputRange extends Component {
       this.props,
       this.isMultiValue()
     );
-    let percentages = valueTransformer.getPercentagesFromValues(
+    const percentages = valueTransformer.getPercentagesFromValues(
       values,
       this.props.minValue,
       this.props.maxValue

yarn.lock

@@ -6775,6 +6775,10 @@ lodash.isarraylike@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.isarraylike/-/lodash.isarraylike-4.2.0.tgz#4623310ab318804b667ddc3619058137559400c4"
 
+lodash.isempty@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
+
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"