feat(instances): responsive layout for instance name card

fixes #1118

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap

@@ -15,6 +15,10 @@ exports[`renders <List /> without throwing 1`] = `
 }
 
 .c31 {
+  padding: 1.125rem;
+}
+
+.c32 {
   padding: 1.875rem;
 }
 
@@ -928,6 +932,10 @@ exports[`renders <List /> without throwing 1`] = `
       className="c30 c29"
       disabled={false}
       name="card-outlet"
+    >
+      <span
+        name="react-responsive-mock"
+        query="only screen and (max-width: 37.4375rem)"
       >
         <div
           className="c31"
@@ -935,6 +943,18 @@ exports[`renders <List /> without throwing 1`] = `
           You haven't created any instances yet, but they're really easy to set up.
                   Click above to get going.
         </div>
+      </span>
+      <span
+        name="react-responsive-mock"
+        query="only screen and (min-width: 37.5rem)"
+      >
+        <div
+          className="c32"
+        >
+          You haven't created any instances yet, but they're really easy to set up.
+                  Click above to get going.
+        </div>
+      </span>
     </div>
   </div>
 </div>
@@ -959,6 +979,10 @@ exports[`renders <List error /> without throwing 1`] = `
 }
 
 .c38 {
+  padding: 1.125rem;
+}
+
+.c39 {
   padding: 1.875rem;
 }
 
@@ -1941,6 +1965,10 @@ exports[`renders <List error /> without throwing 1`] = `
       className="c37 c36"
       disabled={false}
       name="card-outlet"
+    >
+      <span
+        name="react-responsive-mock"
+        query="only screen and (max-width: 37.4375rem)"
       >
         <div
           className="c38"
@@ -1948,6 +1976,18 @@ exports[`renders <List error /> without throwing 1`] = `
           You haven't created any instances yet, but they're really easy to set up.
                   Click above to get going.
         </div>
+      </span>
+      <span
+        name="react-responsive-mock"
+        query="only screen and (min-width: 37.5rem)"
+      >
+        <div
+          className="c39"
+        >
+          You haven't created any instances yet, but they're really easy to set up.
+                  Click above to get going.
+        </div>
+      </span>
     </div>
   </div>
 </div>

packages/instance-steps/src/name/index.js

@@ -33,6 +33,9 @@ import {
 import GetRandomName from '../graphql/get-random-name.gql';
 import { Forms, Values } from '../constants';
 import { instanceName as validateName } from '../validators';
+import { QueryBreakpoints } from 'joyent-ui-toolkit';
+
+const { SmallOnly, Medium } = QueryBreakpoints;
 
 const { IR_NAME_F } = Forms;
 const { IR_NAME_V_USE_RANDOM } = Values;
@@ -61,7 +64,7 @@ const Name = ({
     isValid={handleValidate(preview)}
     {...props}
   >
-    <StepHeader icon={<NameIcon />}>Name this instance</StepHeader>
+    <StepHeader icon={<NameIcon />}>Instance name</StepHeader>
     <StepDescription>
       Your instance name will be used to identify this specific instance.
     </StepDescription>
@@ -87,6 +90,33 @@ const Name = ({
                 <FormGroup id={'input-name'} name="name" fluid field={Field}>
                   <FormLabel>Instance name</FormLabel>
                   <Margin top="0.5">
+                    <SmallOnly>
+                      <Flex column>
+                        <FlexItem>
+                          <Input onBlur={null} fluid />
+                        </FlexItem>
+                        <FlexItem>
+                          <Margin top="2">
+                            <Button
+                              id={'randomize-button-name'}
+                              type="button"
+                              loading={randomizing}
+                              onClick={handleRandomize}
+                              marginless
+                              secondary
+                              icon
+                              fluid
+                            >
+                              <Margin right="1">
+                                <RandomizeIcon />
+                              </Margin>
+                              Randomize
+                            </Button>
+                          </Margin>
+                        </FlexItem>
+                      </Flex>
+                    </SmallOnly>
+                    <Medium>
                       <Flex>
                         <FlexItem>
                           <Input onBlur={null} />
@@ -110,6 +140,7 @@ const Name = ({
                           </Margin>
                         </FlexItem>
                       </Flex>
+                    </Medium>
                   </Margin>
                   <FormMeta />
                 </FormGroup>

packages/resource-step/src/index.js

@@ -19,6 +19,10 @@ import {
 
 import { Saved as SavedIcon, Error as ErrorIcon } from './status-icon';
 
+import { QueryBreakpoints } from 'joyent-ui-toolkit';
+
+const { SmallOnly, Medium } = QueryBreakpoints;
+
 const Card = styled(BaseCard)`
   ${is('error')`
     border: ${remcalc(1)} solid ${props => props.theme.redDark};
@@ -46,13 +50,16 @@ export const Header = ({ icon = null, children }) => (
             <Flex justifyBetween>
               <FlexItem>
                 <Flex alignCenter>
+                  <Medium>
                     <FlexItem>
                       <Margin right="2">{icon}</Margin>
                     </FlexItem>
+                  </Medium>
                   <FlexItem>
                     <H3 bold>{children}</H3>
                   </FlexItem>
                   {/* improve this */}
+                  <Medium>
                     {optional ? (
                       <Fragment>
                         <FlexItem>
@@ -65,6 +72,7 @@ export const Header = ({ icon = null, children }) => (
                         </FlexItem>
                       </Fragment>
                     ) : null}
+                  </Medium>
                 </Flex>
               </FlexItem>
               <FlexItem alignCenter>
@@ -168,7 +176,12 @@ export default class Step extends PureComponent {
       >
         <Card expanded={expanded} error={!expanded && !isValid}>
           <CardOutlet>
+            <SmallOnly>
+              <Padding all="3">{children}</Padding>
+            </SmallOnly>
+            <Medium>
               <Padding all="5">{children}</Padding>
+            </Medium>
           </CardOutlet>
         </Card>
       </Broadcast>