feat(instances): package selection for mobile or desktop version

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

@@ -192,8 +192,7 @@ export const Filters = ({ onResetFilters }) => (
     </Margin>
   </Margin>
 );
-
-export const Package = ({
+export const MobilePackage = ({
   selected = false,
   id,
   name,
@@ -205,10 +204,8 @@ export const Package = ({
   ssd,
   hasVms,
   sortBy,
-  onRowClick,
-  xs
-}) => {
-  return xs ? (
+  onRowClick
+}) => (
   <FormItem selected={selected}>
     <Padding all={2} onClick={() => onRowClick(id)}>
       <FormGroup name="package" value={id} type="radio" field={Field} fluid>
@@ -300,7 +297,22 @@ export const Package = ({
       </Padding>
     </PackageSpecs>
   </FormItem>
-  ) : (
+);
+
+export const Package = ({
+  selected = false,
+  id,
+  name,
+  group,
+  memory,
+  price,
+  vcpus,
+  disk,
+  ssd,
+  hasVms,
+  sortBy,
+  onRowClick
+}) => (
   <TableTrActionable onClick={() => onRowClick(id)}>
     <TableTd right selected={selected}>
       <FormGroup name="package" value={id} type="radio" field={Field} fluid>
@@ -340,8 +352,7 @@ export const Package = ({
       {fourDecimals(price)}
     </TableTd>
   </TableTrActionable>
-  );
-};
+);
 
 export const Packages = ({
   pristine,

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}
                         />
                       ))}

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.