feat(my-joyent): add group filtering

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3069/",
+            "webRoot": "${workspaceRoot}"
+        }
+    ]
+}

packages/my-joyent/.eslintrc

@@ -6,6 +6,7 @@
     // temp
     "no-undef": 1,
     "no-debugger": 1,
-    "no-negated-condition": 0
+    "no-negated-condition": 0,
+    "jsx-a11y/href-no-hash": 0
   }
 }

packages/my-joyent/package.json

@@ -5,20 +5,17 @@
   "repository": "github:yldio/joyent-portal",
   "main": "build/",
   "scripts": {
-    "dev":
+    "dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http react-scripts start",
-      "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http react-scripts start",
     "start": "PORT=3069 react-scripts start",
     "build": "NODE_ENV=production react-scripts build",
     "lint:css": "stylelint './src/**/*.js'",
     "lint:js": "eslint . --fix",
     "lint": "redrun -s lint:*",
     "lint-ci:css": "stylelint './src/**/*.js'",
-    "lint-ci:js":
+    "lint-ci:js": "eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/cp-frontend.xml",
-      "eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/cp-frontend.xml",
     "lint-ci": "redrun -p lint-ci:*",
     "test": "NODE_ENV=test ./test/run --env=jsdom",
-    "test-ci":
+    "test-ci": "echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/cp-frontend.xml ./test/run --env=jsdom --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/cp-frontend --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`",
-      "echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/cp-frontend.xml ./test/run --env=jsdom --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/cp-frontend --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`",
     "prepublish": "node scripts/postinstall"
   },
   "dependencies": {
@@ -26,6 +23,7 @@
     "graphql-tag": "^2.4.2",
     "jest-cli": "^21.0.1",
     "joyent-ui-toolkit": "^2.0.0",
+    "lodash.isequal": "^4.5.0",
     "normalized-styled-components": "^1.0.9",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",

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

@@ -1,13 +1,179 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Filters /> without throwing 1`] = `
-.c0 {
+.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;
-  -webkit-flex: 0 0 auto;
+  display: inline-block;
-  -ms-flex: 0 0 auto;
+  -webkit-box-pack: center;
-  flex: 0 0 auto;
+  -webkit-justify-content: center;
-  padding-right: 0.5rem;
+  -ms-flex-pack: center;
-  padding-left: 0.5rem;
+  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;
+  font-weight: 600;
+  padding: 0.5625rem 1.125rem;
+  font-weight: 600;
+}
+
+.c6::-moz-focus-inner,
+.c6[type='button']::-moz-focus-inner,
+.c6[type='reset']::-moz-focus-inner,
+.c6[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c6:-moz-focusring,
+.c6[type='button']:-moz-focusring,
+.c6[type='reset']:-moz-focusring,
+.c6[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c6:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c6:hover {
+  border: solid 0.0625rem;
+}
+
+.c6:active,
+.c6:active:hover,
+.c6:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c6[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c6 + button {
+  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;
 }
 
 .c1 {
@@ -17,7 +183,6 @@ exports[`renders <Filters /> without throwing 1`] = `
   font-style: normal;
   font-stretch: normal;
   display: block;
-  color: ;
   margin-right: 0.75rem;
   font-weight: bold;
 }
@@ -114,7 +279,6 @@ exports[`renders <Filters /> without throwing 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 100%;
 }
 
 .c2 > div {
@@ -127,278 +291,40 @@ exports[`renders <Filters /> without throwing 1`] = `
   margin-right: 2.25rem;
 }
 
-@media only screen and (min-width:0em) {
+.c5 {
-  .c0 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-basis: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-    display: block;
-  }
-}
-
-<div
-  className="c0"
->
-  .c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-<label
-    className="c0"
-    htmlFor=""
-  >
-    Choose a package
-  </label>
-  .c3 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c1 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c1 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c1 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c1 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c1 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c1 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c1 .min,
-.c1 .max {
-  display: none;
-}
-
-.c1 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c1 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c1 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c1 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c2 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-.c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
   width: 100%;
+  margin-top: 2.25rem;
 }
 
-.c0 > div {
+.c0 {
-  -webkit-flex-grow: 1;
+  width: 100%;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-}
-
-.c0 > div:not(:last-child) {
-  margin-right: 2.25rem;
 }
 
 <section
   className="c0"
+>
+  <label
+    className="c1"
+    htmlFor=""
   >
-    .c2 {
+    Choose a package
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  </label>
-  font-weight: 400;
+  <section
-  font-size: 0.9375rem;
+    className="c2"
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c0 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c0 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c0 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c0 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c0 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c0 .min,
-.c0 .max {
-  display: none;
-}
-
-.c0 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c0 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c0 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c0 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c1 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<div
-      className="c0"
   >
-      .c1 {
+    <div
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+      className="c3"
-  font-weight: 400;
+    >
-  font-size: 0.9375rem;
+      <label
-  font-style: normal;
+        className="c4 c1"
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<label
-        className="c0 c1"
         htmlFor=""
       >
         GB RAM
@@ -512,127 +438,11 @@ exports[`renders <Filters /> without throwing 1`] = `
         </span>
       </div>
     </div>
-    .c2 {
+    <div
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+      className="c3"
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c0 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c0 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c0 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c0 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c0 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c0 .min,
-.c0 .max {
-  display: none;
-}
-
-.c0 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c0 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c0 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c0 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c1 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<div
-      className="c0"
     >
-      .c1 {
+      <label
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+        className="c4 c1"
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<label
-        className="c0 c1"
         htmlFor=""
       >
         vCPUs
@@ -746,127 +556,11 @@ exports[`renders <Filters /> without throwing 1`] = `
         </span>
       </div>
     </div>
-    .c2 {
+    <div
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+      className="c3"
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c0 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c0 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c0 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c0 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c0 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c0 .min,
-.c0 .max {
-  display: none;
-}
-
-.c0 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c0 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c0 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c0 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c1 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<div
-      className="c0"
     >
-      .c1 {
+      <label
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+        className="c4 c1"
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<label
-        className="c0 c1"
         htmlFor=""
       >
         TB Disk
@@ -980,127 +674,11 @@ exports[`renders <Filters /> without throwing 1`] = `
         </span>
       </div>
     </div>
-    .c2 {
+    <div
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+      className="c3"
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 .input-range {
-  position: relative;
-  width: calc(100% - 18px);
-  margin: auto;
-  min-height: 0.625rem;
-}
-
-.c0 .slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: #FFFFFF;
-  border: 2px solid #bdbdbd;
-  border-radius: 50%;
-  cursor: pointer;
-  display: block;
-  height: 0.875rem;
-  width: 0.875rem;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  -ms-transform: translateY(-50%) translateX(-50%);
-  transform: translateY(-50%) translateX(-50%);
-  outline: none;
-  position: absolute;
-  top: 50%;
-  margin-top: 0.125rem;
-}
-
-.c0 .slider::active {
-  -webkit-transform: scale(1.3);
-  -ms-transform: scale(1.3);
-  transform: scale(1.3);
-}
-
-.c0 .slider::focus {
-  box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
-}
-
-.c0 .disabled .track {
-  background: #D8D8D8;
-}
-
-.c0 .disabled .slider {
-  background: #CCC;
-  border: 1px solid #CCC;
-  box-shadow: none;
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.c0 .min,
-.c0 .max {
-  display: none;
-}
-
-.c0 .value {
-  top: 0.5rem;
-  position: absolute;
-}
-
-.c0 .value .label-container {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: #464646;
-  left: -50%;
-  position: relative;
-}
-
-.c0 .track {
-  background: #D8D8D8;
-  cursor: pointer;
-  display: block;
-  height: 0.25rem;
-  position: relative;
-}
-
-.c0 .active-track {
-  background: #364ACD;
-  height: 100%;
-  position: absolute;
-}
-
-.c1 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<div
-      className="c0"
     >
-      .c1 {
+      <label
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+        className="c4 c1"
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: ;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c0 {
-  margin-bottom: 0.625rem;
-  margin-top: 0.75rem;
-}
-
-<label
-        className="c0 c1"
         htmlFor=""
       >
         $/hr
@@ -1215,5 +793,46 @@ exports[`renders <Filters /> without throwing 1`] = `
       </div>
     </div>
   </section>
-</div>
+  <section
+    className="c5"
+  >
+    <div>
+      <button
+        className="c6"
+        onClick={[Function]}
+        selected={false}
+      >
+        Compute Optimized
+      </button>
+      <button
+        className="c6"
+        onClick={[Function]}
+        selected={false}
+      >
+        Memory Optimized
+      </button>
+      <button
+        className="c6"
+        onClick={[Function]}
+        selected={false}
+      >
+        General Purpose
+      </button>
+      <button
+        className="c6"
+        onClick={[Function]}
+        selected={false}
+      >
+        Storage Optimized
+      </button>
+    </div>
+    <button
+      className="c7"
+      disabled={false}
+      onClick={undefined}
+    >
+      Reset Filters
+    </button>
+  </section>
+</section>
 `;

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

@@ -1,72 +1,66 @@
 import React from 'react';
-import { Col } from 'react-styled-flexboxgrid';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
-import { Slider, FormLabel } from 'joyent-ui-toolkit';
+import isEqual from 'lodash.isequal';
+import { FormLabel, Button } from 'joyent-ui-toolkit';
+import { default as defaultState } from '@state/state';
 
-const FilterWrapper = styled.section`
+import Sliders from '@components/sliders';
+
+const GroupWrapper = styled.section`
   display: flex;
+  justify-content: space-between;
   width: 100%;
+  margin-top: ${remcalc(36)};
+`;
 
-  > div {
+const Wrapper = styled.section`
-    flex-grow: 1;
+  /* Comment for prettier */
-
+  width: 100%;
-    &:not(:last-child) {
-      margin-right: ${remcalc(36)};
-    }
-  }
 `;
 
 const Filters = ({
-  filters: { cpu, cost, ram, disk },
+  filters,
   ramSliderChange,
   cpuSliderChange,
   diskSliderChange,
-  costSliderChange
+  costSliderChange,
-}) => {
+  groupChange,
-  return (
+  filterReset
-    <Col xs={12}>
+}) => (
+  <Wrapper>
     <FormLabel>Choose a package</FormLabel>
-      <FilterWrapper>
+    <Sliders
-        <Slider
+      filters={filters}
-          minValue={ram.min}
+      ramSliderChange={ramSliderChange}
-          maxValue={ram.max}
+      cpuSliderChange={cpuSliderChange}
-          step={0.256}
+      diskSliderChange={diskSliderChange}
-          value={ram}
+      costSliderChange={costSliderChange}
-          onChangeComplete={value => ramSliderChange(value)}
+    />
+    <GroupWrapper>
+      <div>
+        {filters.groups.map(group => (
+          <Button
+            key={group.name}
+            tertiary
+            small
+            selected={group.selected}
+            onClick={() => groupChange(group)}
           >
-          GB RAM
+            {group.name}
-        </Slider>
+          </Button>
-        <Slider
+        ))}
-          minValue={cpu.min}
+      </div>
-          maxValue={cpu.max}
+      <Button
-          step={0.25}
+        disabled={isEqual(filters,defaultState.filters)}
-          value={cpu}
+        secondary
-          onChangeComplete={value => cpuSliderChange(value)}
+        small
+        onClick={filterReset}
       >
-          vCPUs
+        Reset Filters
-        </Slider>
+      </Button>
-        <Slider
+    </GroupWrapper>
-          minValue={disk.min}
+  </Wrapper>
-          maxValue={disk.max}
+);
-          step={0.01}
-          value={disk}
-          onChangeComplete={value => diskSliderChange(value)}
-        >
-          TB Disk
-        </Slider>
-        <Slider
-          minValue={cost.min}
-          maxValue={cost.max}
-          step={0.02}
-          value={cost}
-          onChangeComplete={value => costSliderChange(value)}
-        >
-          $/hr
-        </Slider>
-      </FilterWrapper>
-    </Col>
-  );
-};
 
 export default Filters;

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

@@ -17,6 +17,24 @@ exports[`renders <Home /> without throwing 1`] = `
           "max": 107.26,
           "min": 0.01,
         },
+        "groups": Array [
+          Object {
+            "name": "Compute Optimized",
+            "selected": false,
+          },
+          Object {
+            "name": "Memory Optimized",
+            "selected": false,
+          },
+          Object {
+            "name": "General Purpose",
+            "selected": false,
+          },
+          Object {
+            "name": "Storage Optimized",
+            "selected": false,
+          },
+        ],
         "ram": Object {
           "max": 50.688,
           "min": 0.256,

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

@@ -15,6 +15,7 @@ class Home extends Component {
 
     this.closeMessage = this.closeMessage.bind(this);
     this.changeValue = this.changeValue.bind(this);
+    this.changeGroup = this.changeGroup.bind(this);
   }
 
   closeMessage() {
@@ -24,26 +25,37 @@ class Home extends Component {
   }
 
   changeValue(key, value) {
-    const { filters } = this.props;
+    const { filters, onFilterChange } = this.props;
-    this.props.onFilterChange({
+    onFilterChange({
       ...filters,
       [key]: value
     });
   }
 
+  changeGroup(group) {
+    const { filters, onFilterChange } = this.props;
+    const otherGroups = filters.groups.filter(g => g.name !== group.name);
+
+    onFilterChange({
+      ...filters,
+      groups: [
+        ...otherGroups,
+      { name: group.name, selected: !group.selected }
+      ]
+    });
+  }
+
   render() {
     const { showMessage } = this.state;
-    const { filters } = this.props;
+    const { filters, onFilterReset } = this.props;
     const _msg = showMessage ? (
       <Message
         title="Choosing deployement data center"
         onCloseClick={this.closeMessage}
       >
-        <p>
         Not all data centres have all configurations of instances available.
-          Make sure that you choose the data center that suits your
+        Make sure that you choose the data center that suits your requirements.{' '}
-          requirements. <Anchor href="#">Learn More</Anchor>
+        <Anchor href="#">Learn More</Anchor>
-        </p>
       </Message>
     ) : null;
 
@@ -58,6 +70,8 @@ class Home extends Component {
         <Row>
           <Filters
             filters={filters}
+            filterReset={onFilterReset}
+            groupChange={group => this.changeGroup(group)}
             ramSliderChange={value => this.changeValue('ram', value)}
             cpuSliderChange={value => this.changeValue('cpu', value)}
             diskSliderChange={value => this.changeValue('disk', value)}

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

@@ -6,7 +6,6 @@ exports[`renders <Header /> without throwing 1`] = `
   font-weight: 500;
   font-size: 1.5rem;
   text-transform: uppercase;
-  color: ;
   font-size: 1.8125rem;
   margin: 0;
 }
@@ -35,9 +34,9 @@ exports[`renders <Header /> without throwing 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-  -webkit-box-pack: space-between;
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: space-between;
+  -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
@@ -46,7 +45,6 @@ exports[`renders <Header /> without throwing 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  background-color: ;
   max-height: 3.3125rem;
   min-height: 3.3125rem;
   padding: 0 1.125rem;
@@ -62,75 +60,18 @@ exports[`renders <Header /> without throwing 1`] = `
 <div
   className="c0"
 >
-  .c1 {
+  <div
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+    className="c1"
-  font-weight: 500;
-  font-size: 1.5rem;
-  text-transform: uppercase;
-  color: ;
-  font-size: 1.8125rem;
-  margin: 0;
-}
-
-.c0 {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  padding: 0.9375rem 0;
-}
-
-.c2 {
-  border-style: none;
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<div
-    className="c0"
   >
-    .c0 {
+    <h2
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+      className="c2"
-  font-weight: 500;
-  font-size: 1.5rem;
-  text-transform: uppercase;
-  color: ;
-  font-size: 1.8125rem;
-  margin: 0;
-}
-
-.c1 {
-  border-style: none;
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<h2
-      className="c0"
     >
-      .c0 {
+      <a
-  border-style: none;
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<a
         href="/"
         onClick={[Function]}
       >
-        .c0 {
+        <img
-  border-style: none;
+          className="c3"
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<img
-          className="c0"
           src="test-file-mock"
         />
       </a>

packages/my-joyent/src/components/navigation/__tests__/__snapshots__/not-found.spec.js.snap

@@ -32,9 +32,7 @@ exports[`renders <NotFound /> without throwing 1`] = `
   vertical-align: middle;
   touch-action: manipulation;
   cursor: pointer;
-  color: ;
   background-image: none;
-  background-color: ;
   border-radius: 0.25rem;
   border: solid 0.0625rem;
 }
@@ -42,12 +40,9 @@ exports[`renders <NotFound /> without throwing 1`] = `
 .c6:focus {
   outline: 0;
   text-decoration: none;
-  background-color: ;
-  border-color: ;
 }
 
 .c6:hover {
-  background-color: ;
   border: solid 0.0625rem;
 }
 
@@ -56,8 +51,6 @@ exports[`renders <NotFound /> without throwing 1`] = `
 .c6:active:focus {
   background-image: none;
   outline: 0;
-  background-color: ;
-  border-color: ;
 }
 
 .c6[disabled] {
@@ -131,209 +124,21 @@ exports[`renders <NotFound /> without throwing 1`] = `
 <div
   className="c0"
 >
-  .c5 {
+  <div
-  display: inline-block;
+    className="c1"
-  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;
-  color: ;
-  background-image: none;
-  background-color: ;
-  border-radius: 0.25rem;
-  border: solid 0.0625rem;
-}
-
-.c5:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: ;
-  border-color: ;
-}
-
-.c5:hover {
-  background-color: ;
-  border: solid 0.0625rem;
-}
-
-.c5:active,
-.c5:active:hover,
-.c5:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: ;
-  border-color: ;
-}
-
-.c5[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c2 {
-  font-size: 2rem;
-  margin: 0.625rem 0;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 2.25rem;
-  font-style: normal;
-  font-stretch: normal;
-  margin: 0;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c0 {
-  margin-top: 3.75rem;
-}
-
-.c1 {
-  font-weight: normal;
-  font-size: 2rem;
-}
-
-.c3 {
-  margin-bottom: 1.875rem;
-  max-width: 30.625rem;
-}
-
-<div
-    className="c0"
   >
-    .c1 {
+    <h1
-  font-size: 2rem;
+      className="c2 c3"
-  margin: 0.625rem 0;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 2.25rem;
-  font-style: normal;
-  font-stretch: normal;
-  margin: 0;
-}
-
-.c0 {
-  font-weight: normal;
-  font-size: 2rem;
-}
-
-<h1
-      className="c0 c1"
     >
       I have no memory of this place
     </h1>
-    .c1 {
+    <p
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+      className="c4 c5"
-  font-weight: 400;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c0 {
-  margin-bottom: 1.875rem;
-  max-width: 30.625rem;
-}
-
-<p
-      className="c0 c1"
     >
       HTTP 404: We can’t find what you are looking for. Next time, always follow your nose.
     </p>
-    .c0 {
+    <a
-  display: inline-block;
+      className="c6"
-  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;
-  color: ;
-  background-image: none;
-  background-color: ;
-  border-radius: 0.25rem;
-  border: solid 0.0625rem;
-}
-
-.c0:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: ;
-  border-color: ;
-}
-
-.c0:hover {
-  background-color: ;
-  border: solid 0.0625rem;
-}
-
-.c0:active,
-.c0:active:hover,
-.c0:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: ;
-  border-color: ;
-}
-
-.c0[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-<a
-      className="c0"
       href="/"
       onClick={[Function]}
       primary={true}

packages/my-joyent/src/components/navigation/__tests__/__snapshots__/section-nav.spec.js.snap

@@ -32,13 +32,11 @@ exports[`renders <SectionNav /> without throwing 1`] = `
 .c3 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
-  color: ;
   text-decoration: none;
   cursor: pointer;
 }
 
 .c3.active {
-  color: ;
   cursor: default;
 }
 
@@ -51,78 +49,15 @@ exports[`renders <SectionNav /> without throwing 1`] = `
 <div
   className="c0"
 >
-  .c1 {
+  <ul
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+    className="c1"
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-.c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  color: ;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.c2.active {
-  color: ;
-  cursor: default;
-}
-
-.c0 {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-<ul
-    className="c0"
   >
-    .c0 {
+    <li
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+      className="c2"
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-.c1 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  color: ;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.c1.active {
-  color: ;
-  cursor: default;
-}
-
-<li
-      className="c0"
     >
-      .c0 {
+      <a
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  color: ;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.c0.active {
-  color: ;
-  cursor: default;
-}
-
-<a
         aria-current="true"
-        className="active c0 active"
+        className="active c3 active"
         href="/"
         onClick={[Function]}
         style={Object {}}
@@ -130,45 +65,18 @@ exports[`renders <SectionNav /> without throwing 1`] = `
         Instances
       </a>
     </li>
-    .c0 {
+    <li
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+      className="c2"
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-<li
-      className="c0"
     >
       Custom images
     </li>
-    .c0 {
+    <li
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+      className="c2"
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-<li
-      className="c0"
     >
       Docker images
     </li>
-    .c0 {
+    <li
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+      className="c2"
-  font-weight: 400;
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
-<li
-      className="c0"
     >
       Docker registries
     </li>

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Package /> without throwing 1`] = `
-.c2 {
+.c3 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -10,10 +10,9 @@ exports[`renders <Package /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c4 {
+.c5 {
   font-size: 0.9375rem;
   line-height: 1.5;
-  color: ;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 600;
   display: -webkit-box;
@@ -37,7 +36,7 @@ exports[`renders <Package /> without throwing 1`] = `
   padding: 0.75rem 1.125rem 0 1.125rem;
 }
 
-.c0 {
+.c1 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -59,21 +58,20 @@ exports[`renders <Package /> without throwing 1`] = `
   min-height: 7.875rem;
   margin-bottom: 0.625rem;
   border: 0.0625rem solid;
-  background-color: ;
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   margin-right: 0rem;
   margin-left: 0rem;
-  border-radius: 0.25rem background: border:1px solid;
+  border-radius: 4px;
-  background: ;
+  border: 1px solid;
   box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
   min-height: 11.5625rem;
-  min-width: 200px;
+  min-width: 237px;
 }
 
-.c1 {
+.c2 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -102,7 +100,7 @@ exports[`renders <Package /> without throwing 1`] = `
   flex-direction: row;
 }
 
-.c3 {
+.c4 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -128,7 +126,7 @@ exports[`renders <Package /> without throwing 1`] = `
   transform: translateY(-50%);
 }
 
-.c6 {
+.c7 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -144,25 +142,25 @@ exports[`renders <Package /> without throwing 1`] = `
   justify-content: flex-end;
 }
 
-.c5 {
+.c6 {
   display: inline-block;
   padding: 0 1.125rem;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
 }
 
-.c7 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
 .c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c9 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -175,8 +173,13 @@ exports[`renders <Package /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
+.c0 {
+  margin-right: 1.125rem;
+  margin-bottom: 1.125rem;
+}
+
 @media only screen and (min-width:0em) {
-  .c2 {
+  .c3 {
     -webkit-flex-basis: 50%;
     -ms-flex-basis: 50%;
     flex-basis: 50%;
@@ -186,799 +189,77 @@ exports[`renders <Package /> without throwing 1`] = `
 }
 
 <div
-  className="c0"
+  className="c0 c1"
   name="card"
 >
-  .c1 {
+  <div
-  box-sizing: border-box;
+    className="c2"
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c3 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin: 0;
-  height: auto;
-  padding-top: 0;
-  min-width: auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c6 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c7 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-    className="c0"
     name="card-view"
   >
-    .c0 {
+    <div
-  box-sizing: border-box;
+      className="c3"
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c2 {
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c3 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c6 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-@media only screen and (min-width:0em) {
-  .c0 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-basis: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-    display: block;
-  }
-}
-
-<div
-      className="c0"
       name="card-meta"
     >
-      .c1 {
+      <div
-  font-size: 0.9375rem;
+        className="c4"
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  display: block;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c3 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c5 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-        className="c0"
       >
-        .c0 {
+        <div
-  font-size: 0.9375rem;
+          className="c5"
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-<div
-          className="c0"
           name="card-title"
         >
           $
           0.263
            per hour
         </div>
-        .c1 {
+        <div
-  font-size: 0.9375rem;
+          className="c6 c5"
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-          className="c0 c1"
           name="card-subtitle"
         >
-          .c0 {
+          <span
-  display: inline-block;
+            className="c7"
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-            className="c0"
           >
             7.8
              GB RAM
           </span>
         </div>
-        .c1 {
+        <div
-  font-size: 0.9375rem;
+          className="c6 c5"
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-          className="c0 c1"
           name="card-subtitle"
         >
-          .c0 {
+          <span
-  display: inline-block;
+            className="c7"
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-            className="c0"
           >
             4
              vCPUs
           </span>
         </div>
-        .c1 {
+        <div
-  font-size: 0.9375rem;
+          className="c6 c5"
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-          className="c0 c1"
           name="card-subtitle"
         >
-          .c0 {
+          <span
-  display: inline-block;
+            className="c7"
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-            className="c0"
           >
             2
              TB disk
           </span>
         </div>
-        .c1 {
+        <div
-  font-size: 0.9375rem;
+          className="c6 c5"
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c0 {
-  display: inline-block;
-  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-<div
-          className="c0 c1"
           name="card-subtitle"
         >
-          .c0 {
+          <span
-  display: inline-block;
+            className="c7"
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: normal;
-  font-size: 0.875rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-<span
-            className="c0"
           >
             SSD
           </span>
         </div>
-        .c1 {
+        <div
-  font-size: 0.9375rem;
+          className="c8 c5"
-  line-height: 1.5;
-  color: ;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-grow: 2;
-  -ms-flex-grow: 2;
-  flex-grow: 2;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-  width: 100%;
-  padding: 0.75rem 1.125rem 0 1.125rem;
-}
-
-.c0 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  -webkit-flex-grow: 1;
-  -ms-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 5.625rem;
-  -ms-flex-basis: 5.625rem;
-  flex-basis: 5.625rem;
-}
-
-.c2 {
-  display: inline-block;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<div
-          className="c0 c1"
           name="card-footer"
         >
-          .c0 {
+          <span
-  display: inline-block;
+            className="c9"
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: rgba(73,73,73,0.5);
-}
-
-<span
-            className="c0"
           >
             Compute Optimized
           </span>

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

@@ -1,4 +1,7 @@
 import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
 import {
   Card,
   CardSubTitle,
@@ -8,8 +11,13 @@ import {
   CardMeta
 } from 'joyent-ui-toolkit';
 
+const PackageStyled = styled(Card)`
+  margin-right: ${remcalc(18)};
+  margin-bottom: ${remcalc(18)};
+`;
+
 const Package = ({ pack: { price, memory, vcpus, disk, group } }) => (
-  <Card transparent>
+  <PackageStyled transparent>
     <CardView>
       <CardMeta>
         <CardTitle>${price} per hour</CardTitle>
@@ -21,7 +29,7 @@ const Package = ({ pack: { price, memory, vcpus, disk, group } }) => (
         <CardFooter>{group}</CardFooter>
       </CardMeta>
     </CardView>
-  </Card>
+  </PackageStyled>
 );
 
 export default Package;

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

@@ -10,16 +10,15 @@ const ListStyled = styled.ul`
   list-style: none;
   padding: 0;
   flex-wrap: wrap;
-  justify-content: space-between;
   margin-top: ${remcalc(36)};
 `;
 const Packages = ({ packages }) => (
   <ListStyled>
-    {packages.map(pack => (
+    {packages.length > 0 ? packages.map(pack => (
       <li key={pack.name}>
           <Package pack={pack} />
       </li>
-    ))}
+    )) : 'There are no packages that meet your criteria'}
   </ListStyled>
 );
 

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Slider } from 'joyent-ui-toolkit';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+const FilterWrapper = styled.section`
+  display: flex;
+
+  > div {
+    flex-grow: 1;
+
+    &:not(:last-child) {
+      margin-right: ${remcalc(36)};
+    }
+  }
+`;
+
+const Sliders = ({
+  filters: { cpu, cost, ram, disk },
+  ramSliderChange,
+  cpuSliderChange,
+  diskSliderChange,
+  costSliderChange
+}) => (
+  <FilterWrapper>
+    <Slider
+      minValue={ram.min}
+      maxValue={ram.max}
+      step={0.256}
+      value={ram}
+      onChangeComplete={value => ramSliderChange(value)}
+    >
+      GB RAM
+    </Slider>
+    <Slider
+      minValue={cpu.min}
+      maxValue={cpu.max}
+      step={0.25}
+      value={cpu}
+      onChangeComplete={value => cpuSliderChange(value)}
+    >
+      vCPUs
+    </Slider>
+    <Slider
+      minValue={disk.min}
+      maxValue={disk.max}
+      step={0.01}
+      value={disk}
+      onChangeComplete={value => diskSliderChange(value)}
+    >
+      TB Disk
+    </Slider>
+    <Slider
+      minValue={cost.min}
+      maxValue={cost.max}
+      step={0.02}
+      value={cost}
+      onChangeComplete={value => costSliderChange(value)}
+    >
+      $/hr
+    </Slider>
+  </FilterWrapper>
+);
+
+export default Sliders;

packages/my-joyent/src/containers/home/index.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import changeFilters from '../../state/actions';
+import { changeFilters, resetFilters } from '../../state/actions';
 import { LayoutContainer } from '@components/layout';
 import { Home } from '@components/home';
 
-const HomeHOC = ({ filters, onFilterChange }) => (
+const HomeHOC = (props) => (
   <LayoutContainer>
-    <Home filters={filters} onFilterChange={onFilterChange} />
+    <Home
+      {...props}
+    />
   </LayoutContainer>
 );
 
@@ -20,6 +22,9 @@ const mapDispatchToProps = dispatch => {
   return {
     onFilterChange: filters => {
       dispatch(changeFilters(filters));
+    },
+    onFilterReset: () => {
+      dispatch(resetFilters());
     }
   };
 };

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

@@ -6,7 +6,6 @@ exports[`renders <Header /> without throwing 1`] = `
   font-weight: 500;
   font-size: 1.5rem;
   text-transform: uppercase;
-  color: ;
   font-size: 1.8125rem;
   margin: 0;
 }
@@ -35,9 +34,9 @@ exports[`renders <Header /> without throwing 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-  -webkit-box-pack: space-between;
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: space-between;
+  -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
@@ -46,7 +45,6 @@ exports[`renders <Header /> without throwing 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  background-color: ;
   max-height: 3.3125rem;
   min-height: 3.3125rem;
   padding: 0 1.125rem;
@@ -62,75 +60,18 @@ exports[`renders <Header /> without throwing 1`] = `
 <div
   className="c0"
 >
-  .c1 {
+  <div
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+    className="c1"
-  font-weight: 500;
-  font-size: 1.5rem;
-  text-transform: uppercase;
-  color: ;
-  font-size: 1.8125rem;
-  margin: 0;
-}
-
-.c0 {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  padding: 0.9375rem 0;
-}
-
-.c2 {
-  border-style: none;
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<div
-    className="c0"
   >
-    .c0 {
+    <h2
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+      className="c2"
-  font-weight: 500;
-  font-size: 1.5rem;
-  text-transform: uppercase;
-  color: ;
-  font-size: 1.8125rem;
-  margin: 0;
-}
-
-.c1 {
-  border-style: none;
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<h2
-      className="c0"
     >
-      .c0 {
+      <a
-  border-style: none;
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<a
         href="/"
         onClick={[Function]}
       >
-        .c0 {
+        <img
-  border-style: none;
+          className="c3"
-  width: 5.4375rem;
-  height: 1.5625rem;
-}
-
-<img
-          className="c0"
           src="test-file-mock"
         />
       </a>

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

@@ -1,8 +1,8 @@
-const changeFilters = filters => {
+export const changeFilters = filters => ({
-  return {
   type: 'CHANGE_FILTERS',
   filters
-  };
+});
-};
 
-export default changeFilters;
+export const resetFilters = () => ({
+  type: 'RESET_FILTERS'
+});

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

@@ -1,11 +1,16 @@
 import { default as defaultState } from './state';
+
+const selectedGroups = groups =>
+  groups.filter(group => group.selected).map(group => group.name);
+
 const filterReducer = (state = defaultState, action) => {
   switch (action.type) {
     case 'CHANGE_FILTERS':
-      console.log(state);
       return {
         ...state,
-        ...action.filters,
+        filters: {
+          ...action.filters
+        },
         packages: defaultState.packages
           .filter(
             pack =>
@@ -27,6 +32,21 @@ const filterReducer = (state = defaultState, action) => {
               pack.price >= action.filters.cost.min &&
               pack.price <= action.filters.cost.max
           )
+          .filter(
+            pack =>
+                selectedGroups(action.filters.groups).length > 0 ? 
+                  selectedGroups(action.filters.groups).includes(pack.group) : 
+                  true
+          )
+      };
+
+    case 'RESET_FILTERS':
+      return {
+        ...state,
+        filters: {
+          ...defaultState.filters
+        },
+        packages: defaultState.packages
       };
     default:
       return state;

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

@@ -5,7 +5,13 @@ const state = {
     cpu: { min: 0.25, max: 8 },
     cost: { min: 0.016, max: 2.131 },
     ram: { min: 0.256, max: 63.8 },
-    disk: { min: 0.01, max: 4.9 }
+    disk: { min: 0.01, max: 4.9 },
+    groups: [
+      { name: 'Compute Optimized', selected: false },
+      { name: 'Memory Optimized', selected: false },
+      { name: 'General Purpose', selected: false },
+      { name: 'Storage Optimized', selected: false }
+    ]
   },
   packages
 };

packages/my-joyent/test/mocks/filters.js

@@ -14,5 +14,11 @@ export default {
   disk: {
     min: 0.01,
     max: 107.26
-  }
+  },
+  groups: [
+    { name: 'Compute Optimized', selected: false },
+    { name: 'Memory Optimized', selected: false },
+    { name: 'General Purpose', selected: false },
+    { name: 'Storage Optimized', selected: false }
+  ]
 };

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

@@ -94,6 +94,7 @@ const style = css`
     color: ${props => props.theme.tertiary};
     background-color: ${props => props.theme.background};
     border-color: ${props => props.theme.grey};
+    font-weight: 600;
 
     &:focus,
     &:hover,
@@ -134,6 +135,10 @@ const style = css`
   `} ${is('rect')`
     border-radius: 0;
   `};
+  ${is('small')`
+      padding: ${remcalc(9)} ${remcalc(18)};
+      font-weight: 600;
+  `};
 `;
 
 const StyledButton = NButton.extend`
@@ -157,7 +162,7 @@ const StyledLink = styled(Link)`
  * @example ./usage.md
  */
 const Button = props => {
-  const { href = '', to = '', loading = false, secondary, tertiary } = props;
+  const { href = '', to = '', loading = false, secondary } = props;
 
   const Views = [
     () => (to ? StyledLink : null),
@@ -168,7 +173,7 @@ const Button = props => {
   const View = Views.reduce((sel, view) => (sel ? sel : view()), null);
 
   const children = loading ? (
-    <StatusLoader secondary={!secondary} tertiary={tertiary} />
+    <StatusLoader secondary={!secondary} />
   ) : (
     props.children
   );
@@ -192,6 +197,7 @@ Button.propTypes = {
   primary: PropTypes.bool,
   secondary: PropTypes.bool,
   tertiary: PropTypes.bool,
+  small: PropTypes.bool,
   /**
    * When used, will give button an active state (Only for tertiary for now)
    */

packages/ui-toolkit/src/card/card.js

@@ -36,13 +36,12 @@ const StyledCard = Row.extend`
   `};
 
   ${is('transparent')`
-    border-radius: ${remcalc(4)}
+    border-radius: 4px;
-    background: 
     border: 1px solid ${props => props.theme.grey};
     background: ${props => props.theme.background};
     box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
     min-height: ${remcalc(185)};
-    min-width: 200px;
+    min-width: 237px;
   `};
 
   ${is('stacked')`

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

@@ -15,6 +15,7 @@ const StyledContainer = styled.div`
   background-color: ${props => props.theme.white};
   box-shadow: ${bottomShaddow};
   border: ${border.confirmed};
+  width: 100%;
 `;
 
 const StyledColor = styled.div`
@@ -74,9 +75,9 @@ Message.propTypes = {
   title: PropTypes.string,
   message: PropTypes.string,
   onCloseClick: PropTypes.func,
-  error: PropTypes.boolean,
+  error: PropTypes.bool,
-  warning: PropTypes.boolean,
+  warning: PropTypes.bool,
-  success: PropTypes.boolean
+  success: PropTypes.bool
 };
 
 export default Message;