From 93b199e957d46d1eb9cd8c0d9dcd45b597415c47 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Mon, 18 Sep 2017 18:23:17 +0100
Subject: [PATCH] fix(my-joyent): sliders need to be reset

---
 .../__snapshots__/filters.spec.js.snap        |   6 +-
 .../src/components/filters/filters.js         | 110 ++++++++-----
 .../__snapshots__/index.spec.js.snap          |  15 ++
 .../__tests__/__snapshots__/list.spec.js.snap |  55 +++++++
 .../my-joyent/src/components/packages/list.js |   3 +-
 .../my-joyent/src/components/sliders/index.js |  81 ++++-----
 .../__snapshots__/index.spec.js.snap          | 155 +++++++++++++++++-
 .../__snapshots__/index.spec.js.snap          | 151 +++++++++++++++++
 packages/ui-toolkit/src/card/card.js          |   1 +
 packages/ui-toolkit/src/card/footer.js        |   1 +
 packages/ui-toolkit/src/card/title.js         |   3 +-
 .../input-range/input-range.jsx               |   8 +-
 .../react-input-range/input-range/label.jsx   |   6 +-
 .../react-input-range/input-range/slider.jsx  |  18 +-
 .../react-input-range/input-range/track.jsx   |  12 +-
 15 files changed, 520 insertions(+), 105 deletions(-)

diff --git a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
index bc92f250..7ce0e0ce 100644
--- a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
+++ b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
@@ -192,7 +192,7 @@ exports[`renders <Filters /> without throwing 1`] = `
   font-size: 0.625rem;
   color: #464646;
   position: absolute;
-  top: 1rem;
+  top: 0.875rem;
   right: auto;
 }
 
@@ -201,7 +201,7 @@ exports[`renders <Filters /> without throwing 1`] = `
   font-size: 0.625rem;
   color: #464646;
   position: absolute;
-  top: 1rem;
+  top: 0.875rem;
   right: 1px;
 }
 
@@ -732,7 +732,7 @@ exports[`renders <Filters /> without throwing 1`] = `
     <button
       className="c13"
       disabled={false}
-      onClick={undefined}
+      onClick={[Function]}
     >
       Reset Filters
     </button>
diff --git a/packages/my-joyent/src/components/filters/filters.js b/packages/my-joyent/src/components/filters/filters.js
index 8d6d90d9..216b8148 100644
--- a/packages/my-joyent/src/components/filters/filters.js
+++ b/packages/my-joyent/src/components/filters/filters.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
 import isEqual from 'lodash.isequal';
@@ -19,48 +19,78 @@ const Wrapper = styled.section`
   width: 100%;
 `;
 
-const Filters = ({
-  filters,
-  ramSliderChange,
-  cpuSliderChange,
-  diskSliderChange,
-  costSliderChange,
-  groupChange,
-  filterReset
-}) => (
-  <Wrapper>
-    <FormLabel>Choose a package</FormLabel>
-    <Sliders
-      filters={filters}
-      ramSliderChange={ramSliderChange}
-      cpuSliderChange={cpuSliderChange}
-      diskSliderChange={diskSliderChange}
-      costSliderChange={costSliderChange}
-    />
-    <GroupWrapper>
-      <div>
-        {filters.groups.sort((a, b) => a.name < b.name ? -1 : 1 ).map(group => (
+class Filters extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      reset: 0
+    };
+
+    this.handleResetClick = this.handleResetClick.bind(this);
+  }
+
+  handleResetClick() {
+    const { filterReset } = this.props;
+    const { reset } = this.state;
+    filterReset();
+
+    this.setState({
+      reset: reset + 1
+    });
+  }
+
+  render() {
+    const {
+      filters,
+      ramSliderChange,
+      cpuSliderChange,
+      diskSliderChange,
+      costSliderChange,
+      groupChange
+    } = this.props;
+
+    const { reset } = this.state;
+
+    return (
+      <Wrapper>
+        <FormLabel>Choose a package</FormLabel>
+        <Sliders
+          reset={reset}
+          filters={filters}
+          ramSliderChange={ramSliderChange}
+          cpuSliderChange={cpuSliderChange}
+          diskSliderChange={diskSliderChange}
+          costSliderChange={costSliderChange}
+        />
+        <GroupWrapper>
+          <div>
+            {filters.groups
+              .sort((a, b) => (a.name < b.name ? -1 : 1))
+              .map(group => (
+                <Button
+                  key={group.name}
+                  tertiary
+                  small
+                  selected={group.selected}
+                  onClick={() => groupChange(group)}
+                >
+                  {group.name}
+                </Button>
+              ))}
+          </div>
           <Button
-            key={group.name}
-            tertiary
+            disabled={isEqual(filters, defaultState.filters)}
+            secondary
             small
-            selected={group.selected}
-            onClick={() => groupChange(group)}
+            onClick={this.handleResetClick}
           >
-            {group.name}
+            Reset Filters
           </Button>
-        ))}
-      </div>
-      <Button
-        disabled={isEqual(filters, defaultState.filters)}
-        secondary
-        small
-        onClick={filterReset}
-      >
-        Reset Filters
-      </Button>
-    </GroupWrapper>
-  </Wrapper>
-);
+        </GroupWrapper>
+      </Wrapper>
+    );
+  }
+}
 
 export default Filters;
diff --git a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
index a843bc4f..fd98980d 100644
--- a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
@@ -34,6 +34,8 @@ exports[`renders <Package /> without throwing 1`] = `
   flex-basis: 5.625rem;
   width: 100%;
   padding: 0.75rem 1.125rem 0 1.125rem;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
 }
 
 .c1 {
@@ -69,6 +71,9 @@ exports[`renders <Package /> without throwing 1`] = `
   box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
   min-height: 11.5625rem;
   min-width: 292px;
+  cursor: pointer;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
 }
 
 .c2 {
@@ -171,6 +176,8 @@ exports[`renders <Package /> without throwing 1`] = `
   font-weight: 500;
   text-transform: uppercase;
   color: rgba(73,73,73,0.5);
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
 }
 
 .c0 {
@@ -191,6 +198,8 @@ exports[`renders <Package /> without throwing 1`] = `
 <div
   className="c0 c1"
   name="card"
+  onClick={undefined}
+  selected={undefined}
 >
   <div
     className="c2"
@@ -206,6 +215,7 @@ exports[`renders <Package /> without throwing 1`] = `
         <div
           className="c5"
           name="card-title"
+          selected={undefined}
         >
           $
           0.263
@@ -214,6 +224,7 @@ exports[`renders <Package /> without throwing 1`] = `
         <div
           className="c6 c5"
           name="card-subtitle"
+          selected={undefined}
         >
           <span
             className="c7"
@@ -225,6 +236,7 @@ exports[`renders <Package /> without throwing 1`] = `
         <div
           className="c6 c5"
           name="card-subtitle"
+          selected={undefined}
         >
           <span
             className="c7"
@@ -236,6 +248,7 @@ exports[`renders <Package /> without throwing 1`] = `
         <div
           className="c6 c5"
           name="card-subtitle"
+          selected={undefined}
         >
           <span
             className="c7"
@@ -247,6 +260,7 @@ exports[`renders <Package /> without throwing 1`] = `
         <div
           className="c6 c5"
           name="card-subtitle"
+          selected={undefined}
         >
           <span
             className="c7"
@@ -260,6 +274,7 @@ exports[`renders <Package /> without throwing 1`] = `
         >
           <span
             className="c9"
+            selected={undefined}
           >
             Compute Optimized
           </span>
diff --git a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
index b2d77297..17680757 100644
--- a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
+++ b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
@@ -43,6 +43,8 @@ exports[`renders <Packages /> without throwing 1`] = `
   flex-basis: 5.625rem;
   width: 100%;
   padding: 0.75rem 1.125rem 0 1.125rem;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
 }
 
 .c3 {
@@ -78,6 +80,9 @@ exports[`renders <Packages /> without throwing 1`] = `
   box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
   min-height: 11.5625rem;
   min-width: 292px;
+  cursor: pointer;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
 }
 
 .c4 {
@@ -180,6 +185,8 @@ exports[`renders <Packages /> without throwing 1`] = `
   font-weight: 500;
   text-transform: uppercase;
   color: rgba(73,73,73,0.5);
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
 }
 
 .c2 {
@@ -262,6 +269,8 @@ exports[`renders <Packages /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -277,6 +286,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.016
@@ -285,6 +295,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -296,6 +307,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -307,6 +319,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -318,6 +331,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -331,6 +345,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Compute Optimized
               </span>
@@ -346,6 +361,8 @@ exports[`renders <Packages /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -361,6 +378,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.033
@@ -369,6 +387,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -380,6 +399,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -391,6 +411,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -402,6 +423,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -415,6 +437,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Compute Optimized
               </span>
@@ -430,6 +453,8 @@ exports[`renders <Packages /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -445,6 +470,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.066
@@ -453,6 +479,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -464,6 +491,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -475,6 +503,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -486,6 +515,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -499,6 +529,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Compute Optimized
               </span>
@@ -514,6 +545,8 @@ exports[`renders <Packages /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -529,6 +562,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.131
@@ -537,6 +571,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -548,6 +583,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -559,6 +595,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -570,6 +607,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -583,6 +621,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Compute Optimized
               </span>
@@ -598,6 +637,8 @@ exports[`renders <Packages /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -613,6 +654,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.263
@@ -621,6 +663,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -632,6 +675,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -643,6 +687,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -654,6 +699,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -667,6 +713,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Compute Optimized
               </span>
@@ -682,6 +729,8 @@ exports[`renders <Packages /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -697,6 +746,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.525
@@ -705,6 +755,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -716,6 +767,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -727,6 +779,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -738,6 +791,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -751,6 +805,7 @@ exports[`renders <Packages /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Compute Optimized
               </span>
diff --git a/packages/my-joyent/src/components/packages/list.js b/packages/my-joyent/src/components/packages/list.js
index b0e06af7..40346631 100644
--- a/packages/my-joyent/src/components/packages/list.js
+++ b/packages/my-joyent/src/components/packages/list.js
@@ -29,9 +29,10 @@ class Packages extends Component {
 
   handleClick(id) {
     this.setState({
-      selected: id
+      selected: id !== this.state.selected ? id : null
     });
   }
+  
   render() {
     const { packages } = this.props;
     const { selected } = this.state;
diff --git a/packages/my-joyent/src/components/sliders/index.js b/packages/my-joyent/src/components/sliders/index.js
index d6e4d698..4d2cfd55 100644
--- a/packages/my-joyent/src/components/sliders/index.js
+++ b/packages/my-joyent/src/components/sliders/index.js
@@ -20,46 +20,47 @@ const Sliders = ({
   ramSliderChange,
   cpuSliderChange,
   diskSliderChange,
-  costSliderChange
+  costSliderChange,
+  reset
 }) => (
-  <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>
-);
+    <FilterWrapper key={reset}>
+      <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;
diff --git a/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
index 7218a74d..d606b0fb 100644
--- a/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
@@ -503,7 +503,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   font-size: 0.625rem;
   color: #464646;
   position: absolute;
-  top: 1rem;
+  top: 0.875rem;
   right: auto;
 }
 
@@ -512,7 +512,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   font-size: 0.625rem;
   color: #464646;
   position: absolute;
-  top: 1rem;
+  top: 0.875rem;
   right: 1px;
 }
 
@@ -624,6 +624,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   flex-basis: 5.625rem;
   width: 100%;
   padding: 0.75rem 1.125rem 0 1.125rem;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
 }
 
 .c36 {
@@ -659,6 +661,9 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
   min-height: 11.5625rem;
   min-width: 292px;
+  cursor: pointer;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
 }
 
 .c37 {
@@ -761,6 +766,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   font-weight: 500;
   text-transform: uppercase;
   color: rgba(73,73,73,0.5);
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
 }
 
 .c4 {
@@ -1469,6 +1476,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -1484,6 +1493,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     0.016
@@ -1492,6 +1502,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1503,6 +1514,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1514,6 +1526,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1525,6 +1538,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1538,6 +1552,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       Compute Optimized
                     </span>
@@ -1553,6 +1568,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -1568,6 +1585,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     0.033
@@ -1576,6 +1594,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1587,6 +1606,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1598,6 +1618,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1609,6 +1630,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1622,6 +1644,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       Compute Optimized
                     </span>
@@ -1637,6 +1660,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -1652,6 +1677,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     0.066
@@ -1660,6 +1686,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1671,6 +1698,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1682,6 +1710,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1693,6 +1722,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1706,6 +1736,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       Compute Optimized
                     </span>
@@ -1721,6 +1752,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -1736,6 +1769,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     0.131
@@ -1744,6 +1778,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1755,6 +1790,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1766,6 +1802,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1777,6 +1814,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1790,6 +1828,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       Compute Optimized
                     </span>
@@ -1805,6 +1844,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -1820,6 +1861,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     0.263
@@ -1828,6 +1870,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1839,6 +1882,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1850,6 +1894,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1861,6 +1906,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1874,6 +1920,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       Compute Optimized
                     </span>
@@ -1889,6 +1936,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -1904,6 +1953,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     0.525
@@ -1912,6 +1962,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1923,6 +1974,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1934,6 +1986,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1945,6 +1998,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -1958,6 +2012,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       Compute Optimized
                     </span>
@@ -1973,6 +2028,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -1988,6 +2045,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     0.084
@@ -1996,6 +2054,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2007,6 +2066,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2018,6 +2078,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2029,6 +2090,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2042,6 +2104,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       General Purpose
                     </span>
@@ -2057,6 +2120,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -2072,6 +2137,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     0.166
@@ -2080,6 +2146,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2091,6 +2158,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2102,6 +2170,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2113,6 +2182,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2126,6 +2196,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       General Purpose
                     </span>
@@ -2141,6 +2212,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -2156,6 +2229,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     0.333
@@ -2164,6 +2238,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2175,6 +2250,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2186,6 +2262,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2197,6 +2274,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2210,6 +2288,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       General Purpose
                     </span>
@@ -2225,6 +2304,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -2240,6 +2321,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     0.665
@@ -2248,6 +2330,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2259,6 +2342,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2270,6 +2354,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2281,6 +2366,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2294,6 +2380,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       General Purpose
                     </span>
@@ -2309,6 +2396,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -2324,6 +2413,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     0.259
@@ -2332,6 +2422,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2343,6 +2434,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2354,6 +2446,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2365,6 +2458,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2378,6 +2472,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       Memory Optimized
                     </span>
@@ -2393,6 +2488,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -2408,6 +2505,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     0.52
@@ -2416,6 +2514,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2427,6 +2526,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2438,6 +2538,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2449,6 +2550,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2462,6 +2564,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       Memory Optimized
                     </span>
@@ -2477,6 +2580,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -2492,6 +2597,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     1.039
@@ -2500,6 +2606,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2511,6 +2618,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2522,6 +2630,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2533,6 +2642,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2546,6 +2656,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       Memory Optimized
                     </span>
@@ -2561,6 +2672,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -2576,6 +2689,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     1.066
@@ -2584,6 +2698,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2595,6 +2710,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2606,6 +2722,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2617,6 +2734,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2630,6 +2748,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       Storage Optimized
                     </span>
@@ -2645,6 +2764,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -2660,6 +2781,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     2.31
@@ -2668,6 +2790,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2679,6 +2802,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2690,6 +2814,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2701,6 +2826,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2714,6 +2840,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       Storage Optimized
                     </span>
@@ -2729,6 +2856,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -2744,6 +2873,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     0.413
@@ -2752,6 +2882,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2763,6 +2894,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2774,6 +2906,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2785,6 +2918,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2798,6 +2932,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       Storage Optimized
                     </span>
@@ -2813,6 +2948,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -2828,6 +2965,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     0.825
@@ -2836,6 +2974,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2847,6 +2986,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2858,6 +2998,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2869,6 +3010,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2882,6 +3024,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       Storage Optimized
                     </span>
@@ -2897,6 +3040,8 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           <div
             className="c35 c36"
             name="card"
+            onClick={[Function]}
+            selected={false}
           >
             <div
               className="c37"
@@ -2912,6 +3057,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c40"
                     name="card-title"
+                    selected={false}
                   >
                     $
                     1.75
@@ -2920,6 +3066,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2931,6 +3078,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2942,6 +3090,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2953,6 +3102,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   <div
                     className="c41 c40"
                     name="card-subtitle"
+                    selected={false}
                   >
                     <span
                       className="c42"
@@ -2966,6 +3116,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                   >
                     <span
                       className="c44"
+                      selected={false}
                     >
                       Storage Optimized
                     </span>
diff --git a/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
index 353a806b..77a1ae99 100644
--- a/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
@@ -43,6 +43,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   flex-basis: 5.625rem;
   width: 100%;
   padding: 0.75rem 1.125rem 0 1.125rem;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
 }
 
 .c3 {
@@ -78,6 +80,9 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
   min-height: 11.5625rem;
   min-width: 292px;
+  cursor: pointer;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
 }
 
 .c4 {
@@ -180,6 +185,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   font-weight: 500;
   text-transform: uppercase;
   color: rgba(73,73,73,0.5);
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
 }
 
 .c2 {
@@ -262,6 +269,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -277,6 +286,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.016
@@ -285,6 +295,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -296,6 +307,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -307,6 +319,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -318,6 +331,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -331,6 +345,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Compute Optimized
               </span>
@@ -346,6 +361,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -361,6 +378,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.033
@@ -369,6 +387,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -380,6 +399,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -391,6 +411,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -402,6 +423,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -415,6 +437,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Compute Optimized
               </span>
@@ -430,6 +453,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -445,6 +470,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.066
@@ -453,6 +479,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -464,6 +491,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -475,6 +503,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -486,6 +515,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -499,6 +529,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Compute Optimized
               </span>
@@ -514,6 +545,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -529,6 +562,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.131
@@ -537,6 +571,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -548,6 +583,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -559,6 +595,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -570,6 +607,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -583,6 +621,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Compute Optimized
               </span>
@@ -598,6 +637,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -613,6 +654,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.263
@@ -621,6 +663,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -632,6 +675,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -643,6 +687,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -654,6 +699,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -667,6 +713,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Compute Optimized
               </span>
@@ -682,6 +729,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -697,6 +746,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.525
@@ -705,6 +755,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -716,6 +767,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -727,6 +779,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -738,6 +791,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -751,6 +805,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Compute Optimized
               </span>
@@ -766,6 +821,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -781,6 +838,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.084
@@ -789,6 +847,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -800,6 +859,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -811,6 +871,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -822,6 +883,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -835,6 +897,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 General Purpose
               </span>
@@ -850,6 +913,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -865,6 +930,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.166
@@ -873,6 +939,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -884,6 +951,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -895,6 +963,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -906,6 +975,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -919,6 +989,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 General Purpose
               </span>
@@ -934,6 +1005,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -949,6 +1022,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.333
@@ -957,6 +1031,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -968,6 +1043,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -979,6 +1055,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -990,6 +1067,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1003,6 +1081,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 General Purpose
               </span>
@@ -1018,6 +1097,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -1033,6 +1114,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.665
@@ -1041,6 +1123,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1052,6 +1135,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1063,6 +1147,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1074,6 +1159,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1087,6 +1173,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 General Purpose
               </span>
@@ -1102,6 +1189,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -1117,6 +1206,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.259
@@ -1125,6 +1215,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1136,6 +1227,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1147,6 +1239,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1158,6 +1251,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1171,6 +1265,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Memory Optimized
               </span>
@@ -1186,6 +1281,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -1201,6 +1298,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.52
@@ -1209,6 +1307,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1220,6 +1319,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1231,6 +1331,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1242,6 +1343,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1255,6 +1357,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Memory Optimized
               </span>
@@ -1270,6 +1373,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -1285,6 +1390,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               1.039
@@ -1293,6 +1399,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1304,6 +1411,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1315,6 +1423,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1326,6 +1435,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1339,6 +1449,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Memory Optimized
               </span>
@@ -1354,6 +1465,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -1369,6 +1482,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               1.066
@@ -1377,6 +1491,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1388,6 +1503,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1399,6 +1515,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1410,6 +1527,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1423,6 +1541,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Storage Optimized
               </span>
@@ -1438,6 +1557,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -1453,6 +1574,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               2.31
@@ -1461,6 +1583,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1472,6 +1595,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1483,6 +1607,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1494,6 +1619,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1507,6 +1633,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Storage Optimized
               </span>
@@ -1522,6 +1649,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -1537,6 +1666,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.413
@@ -1545,6 +1675,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1556,6 +1687,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1567,6 +1699,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1578,6 +1711,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1591,6 +1725,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Storage Optimized
               </span>
@@ -1606,6 +1741,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -1621,6 +1758,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               0.825
@@ -1629,6 +1767,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1640,6 +1779,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1651,6 +1791,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1662,6 +1803,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1675,6 +1817,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Storage Optimized
               </span>
@@ -1690,6 +1833,8 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
     <div
       className="c2 c3"
       name="card"
+      onClick={[Function]}
+      selected={false}
     >
       <div
         className="c4"
@@ -1705,6 +1850,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c7"
               name="card-title"
+              selected={false}
             >
               $
               1.75
@@ -1713,6 +1859,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1724,6 +1871,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1735,6 +1883,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1746,6 +1895,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             <div
               className="c8 c7"
               name="card-subtitle"
+              selected={false}
             >
               <span
                 className="c9"
@@ -1759,6 +1909,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
             >
               <span
                 className="c11"
+                selected={false}
               >
                 Storage Optimized
               </span>
diff --git a/packages/ui-toolkit/src/card/card.js b/packages/ui-toolkit/src/card/card.js
index d62b8fd9..7a5e17d9 100644
--- a/packages/ui-toolkit/src/card/card.js
+++ b/packages/ui-toolkit/src/card/card.js
@@ -49,6 +49,7 @@ const StyledCard = Row.extend`
   ${is('transparent', 'selected')`
     border: 1px solid ${props => props.theme.blue};
     background: ${props => props.theme.tertiaryActive};
+    box-shadow: none;
   `};
 
   ${is('stacked')`
diff --git a/packages/ui-toolkit/src/card/footer.js b/packages/ui-toolkit/src/card/footer.js
index 8711292a..41cc6655 100644
--- a/packages/ui-toolkit/src/card/footer.js
+++ b/packages/ui-toolkit/src/card/footer.js
@@ -27,6 +27,7 @@ const Span = styled.span`
   text-transform: uppercase;
 
   color: rgba(73, 73, 73, 0.5);
+  transition: all 300ms ease;
 
   ${is('selected')`
       color: rgba(41, 49, 194, 0.5);
diff --git a/packages/ui-toolkit/src/card/title.js b/packages/ui-toolkit/src/card/title.js
index 8df30bfd..84656ab3 100644
--- a/packages/ui-toolkit/src/card/title.js
+++ b/packages/ui-toolkit/src/card/title.js
@@ -25,6 +25,7 @@ const Container = styled.div`
   width: 100%;
 
   padding: ${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)};
+  transition: all 300ms ease;
 
   ${is('fromHeader')`
     color: ${props => props.theme.white};
@@ -38,7 +39,7 @@ const Container = styled.div`
     padding: 0 ${remcalc(18)};
   `};
 
-    ${is('selected')`
+  ${is('selected')`
       color: ${props => props.theme.blue};
     `};
 `;
diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx
index 924a0b06..f982428b 100755
--- a/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx
+++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx
@@ -36,7 +36,7 @@ export default class InputRange extends Component {
       minValue: rangePropType,
       name: PropTypes.string,
       onChangeStart: PropTypes.func,
-      onChange: PropTypes.func.isRequired,
+      onChange: PropTypes.func,
       onChangeComplete: PropTypes.func,
       step: PropTypes.number,
       value: valuePropType
@@ -129,7 +129,7 @@ export default class InputRange extends Component {
    * @return {ClientRect}
    */
   getTrackClientRect() {
-    return this.trackNode.getClientRect();
+    return this.trackNode && this.trackNode.getClientRect();
   }
 
   /**
@@ -379,7 +379,7 @@ export default class InputRange extends Component {
    * @return {void}
    */
   removeDocumentMouseUpListener() {
-    this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp);
+    this.node && this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp);
   }
 
   /**
@@ -697,7 +697,7 @@ export default class InputRange extends Component {
     return (
       <RangeStyled
         aria-disabled={this.props.disabled}
-        ref={node => {
+        innerRef={node => {
           this.node = node;
         }}
         onKeyDown={this.handleKeyDown}
diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx
index a7f350da..f047bbf6 100755
--- a/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx
+++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx
@@ -10,7 +10,7 @@ const Span = styled.span`
   font-size: ${remcalc(10)};
   color: ${theme.secondary};
   position: absolute;
-  top: ${remcalc(8)};
+  top: ${remcalc(14)};
   right: ${props => (props.type === 'max' ? '1px' : 'auto')};
 `;
 
@@ -38,7 +38,7 @@ export default function Label(props) {
  */
 Label.propTypes = {
   children: PropTypes.node.isRequired,
-  classNames: PropTypes.objectOf(PropTypes.string).isRequired,
+  classNames: PropTypes.objectOf(PropTypes.string),
   formatLabel: PropTypes.func,
-  type: PropTypes.string.isRequired
+  type: PropTypes.string
 };
diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx
index df3b68fc..325c3b1d 100755
--- a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx
+++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx
@@ -57,15 +57,15 @@ export default class Slider extends Component {
     return {
       ariaLabelledby: PropTypes.string,
       ariaControls: PropTypes.string,
-      classNames: PropTypes.objectOf(PropTypes.string).isRequired,
+      classNames: PropTypes.objectOf(PropTypes.string),
       formatLabel: PropTypes.func,
       maxValue: PropTypes.number,
       minValue: PropTypes.number,
-      onSliderDrag: PropTypes.func.isRequired,
-      onSliderKeyDown: PropTypes.func.isRequired,
-      percentage: PropTypes.number.isRequired,
-      type: PropTypes.string.isRequired,
-      value: PropTypes.number.isRequired
+      onSliderDrag: PropTypes.func,
+      onSliderKeyDown: PropTypes.func,
+      percentage: PropTypes.number,
+      type: PropTypes.string,
+      value: PropTypes.number
     };
   }
 
@@ -183,7 +183,11 @@ export default class Slider extends Component {
    * @return {void}
    */
   removeDocumentMouseUpListener() {
-    this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp);
+    this.node &&
+      this.node.ownerDocument.removeEventListener(
+        'mouseup',
+        this.handleMouseUp
+      );
   }
 
   /**
diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/track.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/track.jsx
index 7885a262..51e338a9 100755
--- a/packages/ui-toolkit/src/slider/react-input-range/input-range/track.jsx
+++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/track.jsx
@@ -35,11 +35,11 @@ export default class Track extends Component {
   static get propTypes() {
     return {
       children: PropTypes.node.isRequired,
-      classNames: PropTypes.objectOf(PropTypes.string).isRequired,
+      classNames: PropTypes.objectOf(PropTypes.string),
       draggableTrack: PropTypes.bool,
       onTrackDrag: PropTypes.func,
-      onTrackMouseDown: PropTypes.func.isRequired,
-      percentages: PropTypes.objectOf(PropTypes.number).isRequired
+      onTrackMouseDown: PropTypes.func,
+      percentages: PropTypes.objectOf(PropTypes.number)
     };
   }
 
@@ -123,7 +123,11 @@ export default class Track extends Component {
    * @return {void}
    */
   removeDocumentMouseUpListener() {
-    this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp);
+    this.node &&
+      this.node.ownerDocument.removeEventListener(
+        'mouseup',
+        this.handleMouseUp
+      );
   }
 
   /**