feat(ui-toolkit): responsive image selector

packages/instance-steps/src/image/components.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
 import { Field } from 'redux-form';
-import { Row, Col } from 'joyent-react-styled-flexboxgrid';
+import { Row, Col as BaseCol } from 'joyent-react-styled-flexboxgrid';
 import { Margin } from 'styled-components-spacing';
 import pascalCase from 'pascal-case';
 import titleCase from 'title-case';
@@ -13,15 +13,22 @@ import * as Assets from 'joyent-logo-assets';
 import {
   H3,
   P,
-  FormGroup,
+  FormGroup as BaseFormGroup,
   SectionList as BaseSectionList,
   SectionListItem,
   SectionListAnchor,
   H4 as BaseH4,
   Select,
-  Card as BaseCard
+  Card as BaseCard,
+  StyledBreakpoints as breakpoints
 } from 'joyent-ui-toolkit';
 
+const imageColSize = {
+  small: 6,
+  medium: 4,
+  large: 3
+};
+
 const Version = styled(Select)`
   min-width: 100%;
   width: ${remcalc(144)};
@@ -38,8 +45,27 @@ const SectionList = styled(BaseSectionList)`
   background: transparent;
 `;
 
+const Col = styled(BaseCol)`
+  ${breakpoints.smallOnly`
+    width: ${imageColSize.small / 12 * 100}%;
+  `};
+
+  ${breakpoints.mediumOnly`
+    width: ${imageColSize.medium / 12 * 100}%;
+  `};
+
+  ${breakpoints.large`
+    width: ${imageColSize.large / 12 * 100}%;
+  `};
+`;
+
 const Card = styled(BaseCard)`
   border-bottom: 0;
+  width: 100%;
+`;
+
+const FormGroup = styled(BaseFormGroup)`
+  width: 100%;
 `;
 
 const H4 = styled(BaseH4)`
@@ -79,7 +105,7 @@ const Image = ({ onClick, active, ...image }) => {
   const Logo = Assets[pascalCase(imageName)] || Assets.Placeholder;
 
   return (
-    <Col md={2} sm={3}>
+    <Col lg={3} md={4} sm={6}>
       <Margin bottom={3}>
         <Card id={id} onClick={handleCardClick} active={active} preview>
           <Logo