fix(my-joy-beta): use formlabel on package filters

fixes #1031

packages/my-joy-beta/package.json

@@ -12,7 +12,7 @@
     "lint-ci": "eslint . --ext .js --ext .md",
     "lint": "eslint . --fix --ext .js --ext .md",
     "test-ci": "NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'",
-    "test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
+    "test": "DEFAULT_TIMEOUT_INTERVAL=50000 NODE_ENV=test joyent-react-scripts test --env=jsdom",
     "prepublish": "echo 0"
   },
   "dependencies": {

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap

@@ -1340,25 +1340,31 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
 }
 
 .c9 {
-  box-sizing: content-box;
+  width: 9rem;
+  height: 9rem;
+  background: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  padding-top: 0.75rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgba(73,73,73,1);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
+  margin-bottom: 1.25rem;
+  -webkit-animation: eMLfYp 0.2s ease-in-out;
+  animation: eMLfYp 0.2s ease-in-out;
 }
 
 .c1 {

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap

@@ -267,6 +267,10 @@ exports[`renders <Filters /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
 }
 
 .c1 {
@@ -422,6 +426,7 @@ exports[`renders <Filters /> without throwing 1`] = `
         >
           <label
             className="c9"
+            htmlFor="n"
           >
             <div
               className="c10"
@@ -487,6 +492,7 @@ exports[`renders <Filters /> without throwing 1`] = `
         >
           <label
             className="c9"
+            htmlFor="p"
           >
             <div
               className="c10"
@@ -552,6 +558,7 @@ exports[`renders <Filters /> without throwing 1`] = `
         >
           <label
             className="c9"
+            htmlFor="r"
           >
             <div
               className="c10"
@@ -617,6 +624,7 @@ exports[`renders <Filters /> without throwing 1`] = `
         >
           <label
             className="c9"
+            htmlFor="t"
           >
             <div
               className="c10"
@@ -689,6 +697,7 @@ exports[`renders <Filters /> without throwing 1`] = `
         >
           <label
             className="c9"
+            htmlFor="v"
           >
             SSD
           </label>
@@ -1292,6 +1301,10 @@ exports[`renders <Package /> without throwing 1`] = `
   display: block;
   color: rgb(70,70,70);
   text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
 }
 
 .c6 {
@@ -1468,6 +1481,7 @@ exports[`renders <Package /> without throwing 1`] = `
             >
               <label
                 className="c10"
+                htmlFor="l"
               >
                 test
               </label>

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

@@ -6,7 +6,6 @@ import Flex from 'styled-flex-component';
 import remcalc from 'remcalc';
 import { Row, Col } from 'react-styled-flexboxgrid';
 import titleCase from 'title-case';
-import is from 'styled-is';
 
 import {
   H3,

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

@@ -19,7 +19,7 @@ import {
   TableTd,
   Radio,
   Checkbox,
-  Label,
+  FormLabel,
   GeneralIcon,
   StorageIcon,
   CpuIcon,
@@ -67,55 +67,55 @@ export const Filters = ({ resetFilters }) => (
     <Flex alignCenter justifyBetween>
       <FormGroup type="checkbox" name="compute-optimized" field={Field}>
         <Checkbox>
-          <Label>
+          <FormLabel>
             <Flex alignCenter>
               {GroupIcons.COMPUTE}
               <Margin right={1} left={1}>
                 Compute Optimized
               </Margin>
             </Flex>
-          </Label>
+          </FormLabel>
         </Checkbox>
       </FormGroup>
       <FormGroup type="checkbox" name="memory-optimized" field={Field}>
         <Checkbox>
-          <Label>
+          <FormLabel>
             <Flex alignCenter>
               {GroupIcons.MEMORY}
               <Margin left={1} right={2}>
                 Memory Optimized
               </Margin>
             </Flex>
-          </Label>
+          </FormLabel>
         </Checkbox>
       </FormGroup>
       <FormGroup type="checkbox" name="general-purpose" field={Field}>
         <Checkbox>
-          <Label>
+          <FormLabel>
             <Flex alignCenter>
               {GroupIcons.GENERAL}
               <Margin left={1} right={2}>
                 General Purpose
               </Margin>
             </Flex>
-          </Label>
+          </FormLabel>
         </Checkbox>
       </FormGroup>
       <FormGroup type="checkbox" name="storage-optimized" field={Field}>
         <Checkbox>
-          <Label>
+          <FormLabel>
             <Flex alignCenter>
               {GroupIcons.STORAGE}
               <Margin left={1} right={2}>
                 Storage Optimized
               </Margin>
             </Flex>
-          </Label>
+          </FormLabel>
         </Checkbox>
       </FormGroup>
       <FormGroup type="checkbox" name="ssd" field={Field}>
         <Checkbox>
-          <Label>SSD</Label>
+          <FormLabel>SSD</FormLabel>
         </Checkbox>
       </FormGroup>
     </Flex>
@@ -146,7 +146,7 @@ export const Package = ({
           <Flex alignCenter>
             {GroupIcons[group]}
             <Margin left={1} right={2}>
-              <Label>{name}</Label>
+              <FormLabel>{name}</FormLabel>
             </Margin>
           </Flex>
         </Radio>