From 62b5c201bc8de3acbb7c52011d3a54d09d1943fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Moreira?= <fabio.moreira@yld.io>
Date: Tue, 22 May 2018 10:25:32 +0100
Subject: [PATCH] feat(instances): package selection for mobile or desktop
 version

---
 .../instance-steps/src/package/components.js  | 283 +++++++++---------
 packages/instance-steps/src/package/index.js  |  11 +-
 packages/instance-steps/src/tags/index.js     |   2 +-
 3 files changed, 156 insertions(+), 140 deletions(-)

diff --git a/packages/instance-steps/src/package/components.js b/packages/instance-steps/src/package/components.js
index 6e14cd3c..d0491972 100644
--- a/packages/instance-steps/src/package/components.js
+++ b/packages/instance-steps/src/package/components.js
@@ -192,6 +192,112 @@ export const Filters = ({ onResetFilters }) => (
     </Margin>
   </Margin>
 );
+export const MobilePackage = ({
+  selected = false,
+  id,
+  name,
+  group,
+  memory,
+  price,
+  vcpus,
+  disk,
+  ssd,
+  hasVms,
+  sortBy,
+  onRowClick
+}) => (
+  <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>
+);
 
 export const Package = ({
   selected = false,
@@ -205,143 +311,48 @@ export const Package = ({
   ssd,
   hasVms,
   sortBy,
-  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>
+  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}
       </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}
-        </TableTd>
-      )}
-      <TableTd right bold={sortBy === 'price'} selected={selected}>
-        {fourDecimals(price)}
-      </TableTd>
-    </TableTrActionable>
-  );
-};
+    )}
+    <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 94c663e1..320c0f86 100644
--- a/packages/instance-steps/src/package/index.js
+++ b/packages/instance-steps/src/package/index.js
@@ -23,7 +23,13 @@ import Step, {
 
 import { Button, PackageIcon, StatusLoader } from 'joyent-ui-toolkit';
 
-import { Filters, Packages, Package, Overview } from './components';
+import {
+  Filters,
+  Packages,
+  Package,
+  MobilePackage,
+  Overview
+} from './components';
 import getPackages from '../graphql/get-packages.gql';
 import priceData from './prices.json';
 import { Forms, Values } from '../constants';
@@ -89,14 +95,13 @@ const PackageComponent = ({
                   <Fragment>
                     <SmallOnly>
                       {packages.map(({ id, ...pkg }) => (
-                        <Package
+                        <MobilePackage
                           key={id}
                           id={id}
                           selected={selected.id === id}
                           hasVms={hasVms}
                           onRowClick={handleRowClick}
                           sortBy={sortBy}
-                          xs
                           {...pkg}
                         />
                       ))}
diff --git a/packages/instance-steps/src/tags/index.js b/packages/instance-steps/src/tags/index.js
index 6476ab5c..cd9f7a83 100644
--- a/packages/instance-steps/src/tags/index.js
+++ b/packages/instance-steps/src/tags/index.js
@@ -69,7 +69,7 @@ const TagsContainer = ({
   ...props
 }) => (
   <Step name="tags" getValue={handleGetValue} {...props}>
-    <StepHeader icon={<TagsIcon />}>Tags</StepHeader>
+    <StepHeader icon={1 === 0 && <TagsIcon />}>Tags</StepHeader>
     <StepDescription href="https://docs.joyent.com/public-cloud/tags-metadata/tags">
       Tags can be used to identify your instances, group multiple instances
       together, define firewall and affinity rules, and more.