From 306dfb5b4224403ed7df2e72dc6e94d65c59768f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Moreira?=
 <fabiommmoreira@Davids-MBP-3.localdomain>
Date: Fri, 18 May 2018 17:50:43 +0100
Subject: [PATCH] feat(instances): responsive rules for package selection

---
 .../instance-steps/src/package/components.js  | 245 ++++++++++++++----
 packages/instance-steps/src/package/index.js  |  37 ++-
 packages/ui-toolkit/src/form/base/toggle.js   |   1 -
 3 files changed, 229 insertions(+), 54 deletions(-)

diff --git a/packages/instance-steps/src/package/components.js b/packages/instance-steps/src/package/components.js
index a0a00232..4e05d2f7 100644
--- a/packages/instance-steps/src/package/components.js
+++ b/packages/instance-steps/src/package/components.js
@@ -14,13 +14,13 @@ import {
   FormGroup,
   Card,
   Button,
-  TableTh,
+  TableTh as BaseTableTh,
   TableTr,
-  TableThead,
+  TableThead as BaseTableThead,
   Divider,
   TableTbody,
   Table,
-  TableTd,
+  TableTd as BaseTableTd,
   Radio,
   Checkbox,
   FormLabel,
@@ -31,6 +31,7 @@ import {
 } from 'joyent-ui-toolkit';
 
 import { NoPackages } from 'joyent-logo-assets';
+import { breakpoints } from 'joyent-ui-toolkit/dist/es/breakpoints/screens';
 
 const GroupIcons = {
   MEMORY: <MemoryIcon fill="#32ABCF" />,
@@ -60,6 +61,67 @@ const FullWidthCard = styled(Card)`
   `};
 `;
 
+const TableThead = styled(BaseTableThead)`
+  ${is('smallScreen')`
+    background-color: transparent;
+  `};
+`;
+
+const TableTh = styled(BaseTableTh)`
+  @media only screen and (min-width: ${remcalc(
+      breakpoints.medium.lower
+    )}) and (max-width: ${remcalc(700)}) {
+    &:not(:first-child) {
+      width: auto;
+    }
+    padding: 0 ${remcalc(3)};
+  }
+
+  ${is('smallScreen')`
+    border: none;
+    color: #979797;
+    font-size: ${remcalc(13)};
+    height: auto;
+    padding: 0;
+  `};
+`;
+
+const TableTd = styled(BaseTableTd)`
+  @media only screen and (min-width: ${remcalc(
+      breakpoints.medium.lower
+    )}) and (max-width: ${remcalc(700)}) {
+    &:not(:first-child) {
+      width: auto;
+    }
+    padding: 0 ${remcalc(3)};
+  }
+
+  ${is('smallScreen')`
+    border: none;
+    font-size: ${remcalc(15)};
+    height: auto;
+    padding: ${remcalc(4)} 0;
+  `};
+`;
+
+const FormItem = styled('form')`
+  border: 1px solid #d8d8d8;
+  border-radius: 4px;
+
+  ${is('selected')`
+    border-color: #3B46CC;
+    background-color: rgba(59,70,204,0.05);
+  `};
+`;
+
+const PackageSpecs = styled('div')`
+  border-top: 1px solid #d8d8d8;
+
+  ${is('selected')`
+    border-color: #3B46CC;
+  `};
+`;
+
 export const Filters = ({ onResetFilters }) => (
   <Margin bottom={3}>
     <Margin bottom={3}>
@@ -142,48 +204,143 @@ export const Package = ({
   ssd,
   hasVms,
   sortBy,
-  onRowClick
-}) => (
-  <TableTrActionable onClick={() => onRowClick(id)}>
-    <TableTd right selected={selected}>
-      <FormGroup name="package" value={id} type="radio" field={Field} fluid>
-        <Radio onBlur={null} noMargin>
-          <Flex alignCenter>
-            <Margin left={5} right={1}>
-              {GroupIcons[group]}
-            </Margin>
-            <Margin left={1} right={2}>
-              <FormLabel
-                style={{ fontWeight: sortBy === 'name' ? 'bold' : 'normal' }}
-                noMargin
-                actionable
-              >
-                {name}
-              </FormLabel>
-            </Margin>
-          </Flex>
-        </Radio>
-      </FormGroup>
-    </TableTd>
-    <TableTd right selected={selected} bold={sortBy === 'memory'}>
-      {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
-    </TableTd>
-    <TableTd right selected={selected} bold={sortBy === 'disk'}>
-      <Margin inline right={1}>
-        {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
-      </Margin>
-      {ssd && <Sup badge>SSD</Sup>}
-    </TableTd>
-    {hasVms && (
-      <TableTd right bold={sortBy === 'vcpus'} selected={selected}>
-        {vcpus}
+  onRowClick,
+  xs
+}) => {
+  return xs ? (
+    <FormItem selected={selected}>
+      <Padding all={2} onClick={() => onRowClick(id)}>
+        <FormGroup name="package" value={id} type="radio" field={Field} fluid>
+          <Radio onBlur={null} noMargin>
+            <Flex alignCenter>
+              <Margin left={2} right={1}>
+                {GroupIcons[group]}
+              </Margin>
+              <Margin left={1} right={2}>
+                <FormLabel style={{ fontWeight: '600' }} noMargin actionable>
+                  {`${name}  `}
+                  {ssd && <Sup badge>SSD</Sup>}
+                </FormLabel>
+              </Margin>
+            </Flex>
+          </Radio>
+        </FormGroup>
+      </Padding>
+      <PackageSpecs selected={selected}>
+        <Padding top={1} left={2} bottom={1}>
+          <Table>
+            <TableThead smallScreen>
+              <TableTr>
+                <TableTh left smallScreen>
+                  <Padding top={1}>
+                    <span>RAM </span>
+                  </Padding>
+                </TableTh>
+                <TableTh left smallScreen>
+                  <Padding top={1}>
+                    <span>Disk </span>
+                  </Padding>
+                </TableTh>
+                {hasVms && (
+                  <TableTh left smallScreen>
+                    <Padding top={1}>
+                      <span>vCPU</span>
+                    </Padding>
+                  </TableTh>
+                )}
+                <TableTh left smallScreen>
+                  <Padding top={1}>
+                    <span>$/hour</span>
+                  </Padding>
+                </TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              <TableTrActionable onClick={() => onRowClick(id)}>
+                <TableTd
+                  left
+                  selected={selected}
+                  bold={sortBy === 'memory'}
+                  smallScreen
+                >
+                  {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
+                </TableTd>
+                <TableTd
+                  left
+                  selected={selected}
+                  bold={sortBy === 'disk'}
+                  smallScreen
+                >
+                  <Margin inline right={1}>
+                    {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
+                  </Margin>
+                </TableTd>
+                {hasVms && (
+                  <TableTd
+                    left
+                    bold={sortBy === 'vcpus'}
+                    selected={selected}
+                    smallScreen
+                  >
+                    {vcpus}
+                  </TableTd>
+                )}
+                <TableTd
+                  left
+                  bold={sortBy === 'price'}
+                  selected={selected}
+                  smallScreen
+                >
+                  {fourDecimals(price)}
+                </TableTd>
+              </TableTrActionable>
+            </TableTbody>
+          </Table>
+        </Padding>
+      </PackageSpecs>
+    </FormItem>
+  ) : (
+    <TableTrActionable onClick={() => onRowClick(id)}>
+      <TableTd right selected={selected}>
+        <FormGroup name="package" value={id} type="radio" field={Field} fluid>
+          <Radio onBlur={null} noMargin>
+            <Flex alignCenter>
+              <Margin left={5} right={1}>
+                {GroupIcons[group]}
+              </Margin>
+              <Margin left={1} right={2}>
+                <FormLabel
+                  style={{ fontWeight: sortBy === 'name' ? 'bold' : 'normal' }}
+                  noMargin
+                  actionable
+                >
+                  {name}
+                </FormLabel>
+              </Margin>
+            </Flex>
+          </Radio>
+        </FormGroup>
       </TableTd>
-    )}
-    <TableTd right bold={sortBy === 'price'} selected={selected}>
-      {fourDecimals(price)}
-    </TableTd>
-  </TableTrActionable>
-);
+      <TableTd right selected={selected} bold={sortBy === 'memory'}>
+        {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
+      </TableTd>
+      <TableTd right selected={selected} bold={sortBy === 'disk'}>
+        <Margin inline right={1}>
+          {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
+        </Margin>
+        {ssd && <Sup badge>SSD</Sup>}
+      </TableTd>
+      {hasVms && (
+        <TableTd right bold={sortBy === 'vcpus'} selected={selected}>
+          {vcpus}
+        </TableTd>
+      )}
+      <TableTd right bold={sortBy === 'price'} selected={selected}>
+        {fourDecimals(price)}
+      </TableTd>
+    </TableTrActionable>
+  );
+};
 
 export const Packages = ({
   pristine,
diff --git a/packages/instance-steps/src/package/index.js b/packages/instance-steps/src/package/index.js
index e4f84481..0184b211 100644
--- a/packages/instance-steps/src/package/index.js
+++ b/packages/instance-steps/src/package/index.js
@@ -27,6 +27,9 @@ import { Filters, Packages, Package, Overview } from './components';
 import getPackages from '../graphql/get-packages.gql';
 import priceData from './prices.json';
 import { Forms, Values } from '../constants';
+import { QueryBreakpoints } from 'joyent-ui-toolkit';
+
+const { SmallOnly, Medium } = QueryBreakpoints;
 
 const { IC_PKG_F_SELECT, IC_PKG_F_FILTER } = Forms;
 
@@ -84,14 +87,7 @@ const PackageComponent = ({
                   <StatusLoader />
                 ) : (
                   <Fragment>
-                    <Packages
-                      {...props}
-                      hasVms={hasVms}
-                      sortBy={sortBy}
-                      sortOrder={sortOrder}
-                      onSortBy={handleSortBy}
-                      packages={packages.length}
-                    >
+                    <SmallOnly>
                       {packages.map(({ id, ...pkg }) => (
                         <Package
                           key={id}
@@ -100,10 +96,33 @@ const PackageComponent = ({
                           hasVms={hasVms}
                           onRowClick={handleRowClick}
                           sortBy={sortBy}
+                          xs
                           {...pkg}
                         />
                       ))}
-                    </Packages>
+                    </SmallOnly>
+                    <Medium>
+                      <Packages
+                        {...props}
+                        hasVms={hasVms}
+                        sortBy={sortBy}
+                        sortOrder={sortOrder}
+                        onSortBy={handleSortBy}
+                        packages={packages.length}
+                      >
+                        {packages.map(({ id, ...pkg }) => (
+                          <Package
+                            key={id}
+                            id={id}
+                            selected={selected.id === id}
+                            hasVms={hasVms}
+                            onRowClick={handleRowClick}
+                            sortBy={sortBy}
+                            {...pkg}
+                          />
+                        ))}
+                      </Packages>
+                    </Medium>
                     <Margin top="4">
                       <Button type="button" component={Link} to={next}>
                         Next
diff --git a/packages/ui-toolkit/src/form/base/toggle.js b/packages/ui-toolkit/src/form/base/toggle.js
index 7e9cda46..093ca406 100644
--- a/packages/ui-toolkit/src/form/base/toggle.js
+++ b/packages/ui-toolkit/src/form/base/toggle.js
@@ -45,7 +45,6 @@ const Label = styled.label`
   height: ${remcalc(18)};
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
 
   background-color: rgb(255, 255, 255);