From 5cb02d709c477470a8e5fc7e0c8e489a871fcd24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Moreira?= <fabiommmoreira@gmail.com>
Date: Thu, 24 May 2018 10:34:55 +0100
Subject: [PATCH] feat(instances): responsive layout for instance name card

fixes #1118
---
 .../__tests__/__snapshots__/list.spec.js.snap | 60 +++++++++++---
 packages/instance-steps/src/name/index.js     | 79 +++++++++++++------
 packages/resource-step/src/index.js           | 45 +++++++----
 3 files changed, 134 insertions(+), 50 deletions(-)

diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
index dbea2bca..ddf6183b 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/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;
 }
 
@@ -929,12 +933,28 @@ exports[`renders <List /> without throwing 1`] = `
       disabled={false}
       name="card-outlet"
     >
-      <div
-        className="c31"
+      <span
+        name="react-responsive-mock"
+        query="only screen and (max-width: 37.4375rem)"
       >
-        You haven't created any instances yet, but they're really easy to set up.
-                Click above to get going.
-      </div>
+        <div
+          className="c31"
+        >
+          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;
 }
 
@@ -1942,12 +1966,28 @@ exports[`renders <List error /> without throwing 1`] = `
       disabled={false}
       name="card-outlet"
     >
-      <div
-        className="c38"
+      <span
+        name="react-responsive-mock"
+        query="only screen and (max-width: 37.4375rem)"
       >
-        You haven't created any instances yet, but they're really easy to set up.
-                Click above to get going.
-      </div>
+        <div
+          className="c38"
+        >
+          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>
diff --git a/packages/instance-steps/src/name/index.js b/packages/instance-steps/src/name/index.js
index bcb576c8..59e88d81 100644
--- a/packages/instance-steps/src/name/index.js
+++ b/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,29 +90,57 @@ const Name = ({
                 <FormGroup id={'input-name'} name="name" fluid field={Field}>
                   <FormLabel>Instance name</FormLabel>
                   <Margin top="0.5">
-                    <Flex>
-                      <FlexItem>
-                        <Input onBlur={null} />
-                      </FlexItem>
-                      <FlexItem>
-                        <Margin left="1" inline>
-                          <Button
-                            id={'randomize-button-name'}
-                            type="button"
-                            loading={randomizing}
-                            onClick={handleRandomize}
-                            marginless
-                            secondary
-                            icon
-                          >
-                            <Margin right="1">
-                              <RandomizeIcon />
-                            </Margin>
-                            Randomize
-                          </Button>
-                        </Margin>
-                      </FlexItem>
-                    </Flex>
+                    <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} />
+                        </FlexItem>
+                        <FlexItem>
+                          <Margin left="1" inline>
+                            <Button
+                              id={'randomize-button-name'}
+                              type="button"
+                              loading={randomizing}
+                              onClick={handleRandomize}
+                              marginless
+                              secondary
+                              icon
+                            >
+                              <Margin right="1">
+                                <RandomizeIcon />
+                              </Margin>
+                              Randomize
+                            </Button>
+                          </Margin>
+                        </FlexItem>
+                      </Flex>
+                    </Medium>
                   </Margin>
                   <FormMeta />
                 </FormGroup>
diff --git a/packages/resource-step/src/index.js b/packages/resource-step/src/index.js
index cc583d1e..79c5ea90 100644
--- a/packages/resource-step/src/index.js
+++ b/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,25 +50,29 @@ export const Header = ({ icon = null, children }) => (
             <Flex justifyBetween>
               <FlexItem>
                 <Flex alignCenter>
-                  <FlexItem>
-                    <Margin right="2">{icon}</Margin>
-                  </FlexItem>
+                  <Medium>
+                    <FlexItem>
+                      <Margin right="2">{icon}</Margin>
+                    </FlexItem>
+                  </Medium>
                   <FlexItem>
                     <H3 bold>{children}</H3>
                   </FlexItem>
                   {/* improve this */}
-                  {optional ? (
-                    <Fragment>
-                      <FlexItem>
-                        <Margin horizontal="1">
-                          <Divider vertical />
-                        </Margin>
-                      </FlexItem>
-                      <FlexItem>
-                        <P optional>Optional</P>
-                      </FlexItem>
-                    </Fragment>
-                  ) : null}
+                  <Medium>
+                    {optional ? (
+                      <Fragment>
+                        <FlexItem>
+                          <Margin horizontal="1">
+                            <Divider vertical />
+                          </Margin>
+                        </FlexItem>
+                        <FlexItem>
+                          <P optional>Optional</P>
+                        </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>
-            <Padding all="5">{children}</Padding>
+            <SmallOnly>
+              <Padding all="3">{children}</Padding>
+            </SmallOnly>
+            <Medium>
+              <Padding all="5">{children}</Padding>
+            </Medium>
           </CardOutlet>
         </Card>
       </Broadcast>