feat(instances): adds cli-details UI

consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap

@@ -21,11 +21,9 @@ exports[`renders <Menu links /> without throwing 1`] = `
 .c6 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c6:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c1 {
@@ -57,10 +55,10 @@ exports[`renders <Menu links /> without throwing 1`] = `
   position: relative;
 }
 
-.c5.active:after {
+.c5:after {
   width: 100%;
   height: 0.0625rem;
-  background: rgb(73,73,73);
+  background: rgb(216,216,216);
   content: '';
   position: absolute;
   bottom: 0;
@@ -68,6 +66,14 @@ exports[`renders <Menu links /> without throwing 1`] = `
   z-index: 2;
 }
 
+.c5.active:after {
+  background: rgb(73,73,73);
+}
+
+.c5.active {
+  font-weight: 600;
+}
+
 .c3 {
   background: rgb(250,250,250);
   list-style-type: none;

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

@@ -54,11 +54,9 @@ exports[`renders <InstanceList /> without throwing 1`] = `
 .c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c21:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c11 {
@@ -798,11 +796,9 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
 .c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c21:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c11 {
@@ -1542,11 +1538,9 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
 .c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c21:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c12 {
@@ -2286,11 +2280,9 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
 .c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c21:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c12 {
@@ -3030,11 +3022,9 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
 .c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c21:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c11 {
@@ -3774,11 +3764,9 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
 .c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c21:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c11 {
@@ -4512,11 +4500,9 @@ exports[`renders <Item /> without throwing 1`] = `
 .c11 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c11:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c12 {
@@ -5039,11 +5025,9 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
 .c11 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c11:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c12 {
@@ -5568,11 +5552,9 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
 .c11 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c11:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c12 {
@@ -6095,11 +6077,9 @@ exports[`renders <Item mutating /> without throwing 1`] = `
 .c11 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c11:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c13 {

consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap

@@ -691,8 +691,8 @@ exports[`renders <AddForm /> without throwing 1`] = `
 .c23 {
   box-sizing: border-box;
   width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
+  height: 12rem;
+  min-height: 12rem;
   padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -706,6 +706,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -1760,8 +1761,8 @@ exports[`renders <EditForm /> without throwing 1`] = `
 .c23 {
   box-sizing: border-box;
   width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
+  height: 12rem;
+  min-height: 12rem;
   padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -1775,6 +1776,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;

consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap

@@ -497,7 +497,7 @@ Array [
   .c6 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -2401,7 +2401,7 @@ Array [
   .c6 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -3289,7 +3289,7 @@ Array [
   .c6 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -4177,7 +4177,7 @@ Array [
   .c6 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -5065,7 +5065,7 @@ Array [
   .c6 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -5953,7 +5953,7 @@ Array [
   .c6 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }

consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -231,15 +231,13 @@ exports[`renders <Summary /> without throwing 1`] = `
 .c36 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c36:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c29 {
   min-width: 7.5rem;
 }
@@ -885,7 +883,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 .c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -952,6 +950,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -1031,6 +1030,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -2087,15 +2087,13 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 .c35 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c35:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c29 {
   min-width: 7.5rem;
 }
@@ -2580,7 +2578,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 .c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -2647,6 +2645,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -4020,15 +4019,13 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 .c35 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c35:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c29 {
   min-width: 7.5rem;
 }
@@ -4513,7 +4510,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 .c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -4580,6 +4577,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -5949,15 +5947,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c39 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c39:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c32 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
@@ -6648,7 +6644,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -6715,6 +6711,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -6794,6 +6791,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -7874,15 +7872,13 @@ exports[`renders <Summary state /> without throwing 1`] = `
 .c35 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c35:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c29 {
   min-width: 7.5rem;
 }
@@ -8367,7 +8363,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 .c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -8434,6 +8430,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -8513,6 +8510,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -9569,15 +9567,13 @@ exports[`renders <Summary state /> without throwing 2`] = `
 .c35 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c35:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c29 {
   min-width: 7.5rem;
 }
@@ -10062,7 +10058,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 .c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -10129,6 +10125,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -10208,6 +10205,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -11264,15 +11262,13 @@ exports[`renders <Summary state /> without throwing 3`] = `
 .c36 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c36:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c29 {
   min-width: 7.5rem;
 }
@@ -11919,7 +11915,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 .c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -11986,6 +11982,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -12065,6 +12062,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;

consoles/my-joy-instances/src/components/instances/footer.js

@@ -24,7 +24,7 @@ export default ({
   onReboot,
   onRemove
 }) => (
-  <StickyFooter fill="#FAFAFA" fixed bottom>
+  <StickyFooter fill="disabled" fixed bottom>
     <Row between="xs" middle="xs">
       <Col xs="7">
         <Flex>

consoles/my-joy-instances/src/constants.js

@@ -18,6 +18,7 @@ export const Forms = {
 };
 
 export const Values = {
+  IC_SHOW_CLI: 'INSTANCE_CREATION_SHOW_CLI',
   IC_AFF_V_ADD_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_ADD_OPEN',
   IC_AFF_V_EDIT_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_EDIT_OPEN',
   IC_AFF_V_AFF: 'INSTANCE_CREATION_AFFINITY_VALUE_AFFINITY',

consoles/my-joy-instances/src/containers/create.js

@@ -1,15 +1,14 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Margin, Padding } from 'styled-components-spacing';
 import { graphql, compose } from 'react-apollo';
 import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
 import { SubmissionError, destroy } from 'redux-form';
 import { set, destroyAll } from 'react-redux-values';
+import Flex, { FlexItem } from 'styled-flex-component';
 import intercept from 'apr-intercept';
 import get from 'lodash.get';
-
-import { H3, ViewContainer, Button } from 'joyent-ui-toolkit';
-import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
+import styled from 'styled-components';
 
 import {
   Name,
@@ -22,14 +21,20 @@ import {
   Firewall,
   CNS,
   Affinity,
-  generatePayload
+  generatePayload,
+  Footer
 } from 'joyent-ui-instance-steps';
 
-import { Forms } from '@root/constants';
+import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
+import { Anchor, H3, ViewContainer, Button } from 'joyent-ui-toolkit';
+
+import { Forms, Values } from '@root/constants';
 import parseError from '@state/parse-error';
 import CreateInstanceMutation from '@graphql/create-instance.gql';
 
 const { IC_F } = Forms;
+const { IC_SHOW_CLI } = Values;
+
 const names = {
   name: 'IC_NAME',
   image: 'IC_IMAGE',
@@ -86,7 +91,16 @@ class CreateInstance extends Component {
   };
 
   render() {
-    const { match, steps, handleDefocus, handleSubmit, disabled } = this.props;
+    const {
+      match,
+      steps,
+      showCli = false,
+      handleDefocus,
+      handleToggleShowCli,
+      handleSubmit,
+      disabled
+    } = this.props;
+
     const { params } = match;
     const { step } = params;
 
@@ -102,6 +116,16 @@ class CreateInstance extends Component {
       affinity
     } = steps;
 
+    const Mask = styled.div`
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.25);
+      position: absolute;
+      display: ${showCli ? 'block' : 'none'};
+    `;
+
     return (
       <ViewContainer main>
         <Margin top="5">
@@ -218,20 +242,43 @@ class CreateInstance extends Component {
             </Margin>
           </ResourceSteps>
           <Margin bottom="5">
-            <ReduxForm form={IC_F} onSubmit={handleSubmit}>
-              {({ handleSubmit, submitting }) => (
-                <form onSubmit={handleSubmit}>
-                  <Button
+            <Flex alignCenter>
+              <FlexItem>
+                <ReduxForm form={IC_F} onSubmit={handleSubmit}>
+                  {({ handleSubmit, submitting }) => (
+                    <form onSubmit={handleSubmit}>
+                      <Button
+                        disabled={disabled || !this.isFormValid()}
+                        loading={submitting}
+                      >
+                        Deploy
+                      </Button>
+                    </form>
+                  )}
+                </ReduxForm>
+              </FlexItem>
+              <FlexItem>
+                <Margin left={3}>
+                  <Anchor
                     disabled={disabled || !this.isFormValid()}
-                    loading={submitting}
+                    onClick={() => handleToggleShowCli(!showCli)}
                   >
-                    Deploy
-                  </Button>
-                </form>
-              )}
-            </ReduxForm>
+                    View CLI Details
+                  </Anchor>
+                </Margin>
+              </FlexItem>
+            </Flex>
           </Margin>
         </Padding>
+        {showCli ? (
+          <Fragment>
+            <Footer
+              getData={() => generatePayload(steps)}
+              onCloseCli={() => handleToggleShowCli(!showCli)}
+            />
+            <Mask onClick={() => handleToggleShowCli(!showCli)} />
+          </Fragment>
+        ) : null}
       </ViewContainer>
     );
   }
@@ -254,6 +301,7 @@ export default compose(
     };
 
     const error = get(form, `${IC_F}.error`, null);
+    const showCli = Boolean(values[IC_SHOW_CLI]);
 
     // Maybe re-use saved to only write the rule once
     const disabled = !(
@@ -270,6 +318,7 @@ export default compose(
 
     return {
       disabled,
+      showCli,
       forms: Object.keys(form), // improve this
       error,
       steps
@@ -277,10 +326,12 @@ export default compose(
   }),
   connect(null, (dispatch, { steps = {}, forms, history, createInstance }) => {
     return {
+      handleToggleShowCli: value => {
+        return dispatch(set({ name: IC_SHOW_CLI, value }));
+      },
       handleDefocus: name => value => {
         return dispatch(set({ name: names[name], value }));
       },
-
       handleSubmit: async () => {
         const [err, res] = await intercept(
           createInstance({

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

@@ -172,7 +172,7 @@ exports[`renders <List /> without throwing 1`] = `
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -1153,7 +1153,7 @@ exports[`renders <List error /> without throwing 1`] = `
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -2090,11 +2090,9 @@ exports[`renders <List instances /> without throwing 1`] = `
 .c33 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c33:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c13 {
@@ -2230,7 +2228,7 @@ exports[`renders <List instances /> without throwing 1`] = `
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -3669,11 +3667,9 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 .c33 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c33:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c58 {
@@ -4384,7 +4380,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -4425,12 +4421,10 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  background-color: rgb(250,250,250);
   border-top: 0.0625rem solid rgb(216,216,216);
-  max-height: 3.3125rem;
-  min-height: 3.3125rem;
   line-height: 1.5625rem;
   height: 4.375rem;
-  max-height: 4.375rem;
   z-index: 1;
   position: fixed;
   left: 0;
@@ -5843,10 +5837,11 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   </form>
   <div
     className="c51"
-    fill="#FAFAFA"
+    fill="disabled"
   >
     <div
       className="c52 c53 c1"
+      fill="disabled"
     >
       <div
         className="c54"
@@ -6294,11 +6289,9 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 .c33 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c33:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c58 {
@@ -7009,7 +7002,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -7050,12 +7043,10 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  background-color: rgb(250,250,250);
   border-top: 0.0625rem solid rgb(216,216,216);
-  max-height: 3.3125rem;
-  min-height: 3.3125rem;
   line-height: 1.5625rem;
   height: 4.375rem;
-  max-height: 4.375rem;
   z-index: 1;
   position: fixed;
   left: 0;
@@ -8468,10 +8459,11 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   </form>
   <div
     className="c51"
-    fill="#FAFAFA"
+    fill="disabled"
   >
     <div
       className="c52 c53 c1"
+      fill="disabled"
     >
       <div
         className="c54"
@@ -8919,11 +8911,9 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 .c33 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c33:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c58 {
@@ -9829,7 +9819,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -9870,12 +9860,10 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  background-color: rgb(250,250,250);
   border-top: 0.0625rem solid rgb(216,216,216);
-  max-height: 3.3125rem;
-  min-height: 3.3125rem;
   line-height: 1.5625rem;
   height: 4.375rem;
-  max-height: 4.375rem;
   z-index: 1;
   position: fixed;
   left: 0;
@@ -11288,10 +11276,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   </form>
   <div
     className="c51"
-    fill="#FAFAFA"
+    fill="disabled"
   >
     <div
       className="c52 c53 c1"
+      fill="disabled"
     >
       <div
         className="c54"
@@ -11831,7 +11820,7 @@ exports[`renders <List loading /> without throwing 1`] = `
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }

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

@@ -169,7 +169,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
 .c19 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -977,7 +977,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 .c19 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -1309,8 +1309,8 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 .c39 {
   box-sizing: border-box;
   width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
+  height: 12rem;
+  min-height: 12rem;
   padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -1324,6 +1324,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -1986,7 +1987,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
 .c25 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -3578,7 +3579,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 .c19 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -3904,8 +3905,8 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 .c39 {
   box-sizing: border-box;
   width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
+  height: 12rem;
+  min-height: 12rem;
   padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -3919,6 +3920,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;

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

@@ -65,7 +65,7 @@ exports[`renders <Networks /> without throwing 1`] = `
 .c7 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -608,7 +608,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
 .c7 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -888,7 +888,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
 .c7 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -1121,7 +1121,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
 .c7 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }

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

@@ -985,15 +985,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c37 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c37:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c31 {
   min-width: 7.5rem;
 }
@@ -1597,7 +1595,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c11 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -1701,6 +1699,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -2973,15 +2972,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c37 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c37:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c31 {
   min-width: 7.5rem;
 }
@@ -3585,7 +3582,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c11 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -3689,6 +3686,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;

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

@@ -169,7 +169,7 @@ exports[`renders <Tags /> without throwing 1`] = `
 .c19 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -998,7 +998,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 .c47 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -1995,7 +1995,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
 .c19 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -2846,7 +2846,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 .c49 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -4354,7 +4354,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 .c52 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -5407,7 +5407,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
 .c19 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -6368,7 +6368,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
 .c19 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }

packages/instance-steps/package.json

@@ -26,6 +26,7 @@
     "apr-reduce": "^3.0.3",
     "constant-case": "^2.0.0",
     "declarative-redux-form": "^2.0.8",
+    "force-array": "^3.1.0",
     "joyent-ui-resource-step": "^1.0.0",
     "joyent-ui-resource-widgets": "^1.0.0",
     "joyent-ui-toolkit": "^6.0.0",

packages/instance-steps/src/footer/cli-details.js

@@ -0,0 +1,131 @@
+const ForceArray = require('force-array');
+
+export const generateTerraform = data => {
+  const {
+    name,
+    package: pkg,
+    image,
+    affinity,
+    metadata: _metadata,
+    tags: _tags,
+    firewall_enabled,
+    networks
+  } = formatData(data);
+
+  const cns = ForceArray(
+    (_tags.filter(({ name }) => name === 'triton.cns.services').pop() || {})
+      .value
+  );
+  const userScript = (
+    _metadata.filter(({ name }) => name === 'user-script').pop() || {}
+  ).value;
+
+  const tags = _tags.filter(({ name }) => !/^triton./.test(name));
+  const metadata = _metadata.filter(({ name }) => name !== 'user-script');
+
+  return (
+    `resource "triton_machine" ${name} {
+  name     = "${name}"
+  package  = "${pkg}"
+  image    = "${image}"
+  networks = ["${networks.join('","')}"]
+  firewall_enabled = ${Boolean(firewall_enabled)}` +
+    `${
+      affinity
+        ? `
+  affinity = ["${affinity}"]`
+        : ''
+    }` +
+    `${
+      userScript && userScript.length
+        ? `\n
+  user_script = "${userScript}"`
+        : ''
+    }` +
+    `${
+      cns.length
+        ? `\n
+  cns {
+    services = ["${cns.join('", "')}"]
+  }`
+        : ''
+    }` +
+    `${
+      tags.length
+        ? `\n
+  tags {
+    ${tags.map(e => `${e.name} = "${e.value}"`).join('\n    ')}
+  }`
+        : ''
+    }` +
+    `${
+      metadata.length
+        ? `\n
+  metadata {
+    ${metadata.map(e => `${e.name} = "${e.value}"`).join('\n    ')}
+  }`
+        : ''
+    }` +
+    `\n}`
+  );
+};
+
+export const generateCLI = data => {
+  const {
+    metadata,
+    tags,
+    firewall_enabled,
+    networks,
+    name,
+    package: pkg,
+    image
+  } = data;
+
+  const { affinity } = formatData(data);
+
+  const _networks = `--network="${networks.join('","')}"`;
+  const _affinity = affinity ? `--affinity="${affinity}"` : '';
+
+  const _tags = tags.length
+    ? `--tag=${JSON.stringify(
+        tags.reduce((acc, t) => Object.assign(acc, { [t.name]: t.value }))
+      )}`
+    : '';
+
+  const _metadata = metadata.length
+    ? `--metadata=${JSON.stringify(
+        metadata.reduce(
+          (acc, m) => Object.assign(acc, { [m.name]: m.value }),
+          {}
+        )
+      )}`
+    : '';
+
+  const _firewall = firewall_enabled ? `--firewall` : '';
+  return `triton instance create -w --name=${name} ${_networks} ${_affinity} ${_tags} ${_metadata} ${_firewall} ${image} ${pkg}`;
+};
+
+const formatData = ({ affinity, metadata = [], tags = [], ...rest }) => ({
+  affinity:
+    affinity &&
+    affinity.length &&
+    `${affinity[0].key}${getAffinityOp(affinity[0].type)}${affinity[0].value}`,
+  tags: tags.filter(
+    e => e.name !== 'triton.cns.services' || e.name !== 'triton.cns.disable'
+  ),
+  metadata: metadata.filter(e => e.name !== 'user-script'),
+  ...rest
+});
+
+const getAffinityOp = type => {
+  switch (type.toUpperCase()) {
+    case 'MUST_EQUAL':
+      return '==';
+    case 'MUST_NOT_EQUAL':
+      return '!=';
+    case 'SHOULD_EQUAL':
+      return '==~';
+    case 'SHOULD_NOT_EQUAL':
+      return '!=~';
+  }
+};

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

@@ -0,0 +1,141 @@
+import React from 'react';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
+import { Margin, Padding } from 'styled-components-spacing';
+import Flex from 'styled-flex-component';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+import {
+  Anchor,
+  CloseIcon as Close,
+  H3,
+  Textarea,
+  Input,
+  P,
+  SectionList,
+  SectionListAnchor,
+  SectionListItem,
+  StickyFooter,
+  ViewContainer
+} from 'joyent-ui-toolkit';
+
+import { generateTerraform, generateCLI } from './cli-details';
+
+export default class CLIFooter extends React.Component {
+  state = {
+    active: 'triton'
+  };
+
+  render() {
+    const { active } = this.state;
+    const { getData, onCloseCli } = this.props;
+
+    return (
+      <StickyFooter borderless auto fixed bottom fill="#494949">
+        <div>
+          <Padding vertical="8">
+            <CloseIcon onClick={onCloseCli} />
+            <Row>
+              <Col xs="12" sm="8">
+                <Margin bottom="2">
+                  <Flex>
+                    <H3 white>CLI details</H3>
+                  </Flex>
+                </Margin>
+                <Margin bottom="5">
+                  <P white>
+                    Below you can find the command line instructions to deploy
+                    this exact instance, or a copy of it, directly from either
+                    the Triton CLI or Terraform.
+                  </P>
+                </Margin>
+              </Col>
+            </Row>
+            <Row>
+              <Col sm="12">
+                <ViewContainer plain>
+                  <Margin bottom="3">
+                    <SectionList clear>
+                      <SectionListItem>
+                        <SectionListAnchor
+                          white
+                          active={active === 'triton'}
+                          onClick={() => this.setState({ active: 'triton' })}
+                        >
+                          Triton CLI
+                        </SectionListAnchor>
+                      </SectionListItem>
+                      <SectionListItem>
+                        <SectionListAnchor
+                          white
+                          active={active === 'terraform'}
+                          onClick={() => this.setState({ active: 'terraform' })}
+                        >
+                          Terraform
+                        </SectionListAnchor>
+                      </SectionListItem>
+                    </SectionList>
+                  </Margin>
+                </ViewContainer>
+                <Margin bottom="3">
+                  {active === 'triton' ? (
+                    <Input
+                      readOnly
+                      borderless
+                      monospace
+                      fluid
+                      white
+                      dark
+                      resize
+                      rows="15"
+                      value={generateCLI(getData())}
+                    />
+                  ) : (
+                    <Textarea
+                      readOnly
+                      borderless
+                      monospace
+                      fluid
+                      white
+                      dark
+                      resize
+                      value={generateTerraform(getData())}
+                    />
+                  )}
+                </Margin>
+                <Margin>
+                  <Anchor white>{`Learn how to configure ${
+                    active === 'triton' ? 'Triton CLI' : 'Terraform'
+                  }`}</Anchor>
+                </Margin>
+              </Col>
+            </Row>
+          </Padding>
+        </div>
+      </StickyFooter>
+    );
+  }
+}
+
+const Frame = styled.div`
+  border-radius: 50%;
+  border: ${remcalc(1)} solid ${props => props.theme.white};
+  height: ${remcalc(30)};
+  width: ${remcalc(30)};
+  background: none;
+  cursor: pointer;
+  z-index: 1;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  float: right;
+`;
+
+const CloseIcon = props => (
+  <Frame {...props}>
+    <Margin all="1">
+      <Close fill="white" />
+    </Margin>
+  </Frame>
+);

packages/instance-steps/src/index.js

@@ -66,7 +66,7 @@ export const generatePayload = steps => {
   });
 
   if (cns.serviceNames.length) {
-    metadata.push({
+    tags.push({
       name: 'triton.cns.services',
       value: cns.serviceNames.join(',')
     });
@@ -94,3 +94,4 @@ export { default as UserScript } from './user-script';
 export { default as Firewall, Preview as FirewallPreview } from './firewall';
 export { default as CNS, Preview as CnsPreview } from './cns';
 export { default as Affinity } from './affinity';
+export { default as Footer } from './footer';

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

@@ -45,10 +45,6 @@ const RandomizeIcon = styled(BaseRandomizeIcon)`
   width: ${remcalc(16)};
 `;
 
-const Form = styled.form`
-  margin-bottom: 0;
-`;
-
 const NameContainer = ({
   history,
   randomizable = false,
@@ -86,7 +82,7 @@ const NameContainer = ({
             keepDirtyOnReinitialize
           >
             {({ invalid }) => (
-              <Form onSubmit={() => history.push(next)}>
+              <form onSubmit={() => history.push(next)}>
                 <FormGroup id="input-name" name="name" fluid field={Field}>
                   <FormLabel>Instance name</FormLabel>
                   <Margin top="0.5">
@@ -159,7 +155,7 @@ const NameContainer = ({
                     Next
                   </Button>
                 </Margin>
-              </Form>
+              </form>
             )}
           </ReduxForm>
         </Margin>

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

@@ -9,8 +9,7 @@ import get from 'lodash.get';
 import forceArray from 'force-array';
 import includes from 'lodash.includes';
 import find from 'lodash.find';
-import styled, { withTheme } from 'styled-components';
-import remcalc from 'remcalc';
+import { withTheme } from 'styled-components';
 
 import Step, {
   Header as StepHeader,

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

@@ -223,4 +223,4 @@ export default compose(
       ]);
     }
   }))
-)(withTheme(({ ...rest }) => <Metadata {...rest} />));
+)(withTheme(({ ...rest }) => <TagsContainer {...rest} />));

packages/resource-step/src/status-icon.js

@@ -58,13 +58,13 @@ export const Saved = ({ inverted, children }) => {
 };
 
 export const Error = ({ inverted = false, noLabel = false, children }) => {
-  const fill = inverted ? 'red' : 'white';
+  const statusFill = inverted ? 'red' : 'white';
   const iconFill = inverted ? 'white' : 'redDark';
 
   return (
     <StatusIcon
-      border="redDark"
-      fill={fill}
+      border={'redDark'}
+      fill={statusFill}
       Icon={() => <CloseIcon fill={iconFill} />}
     >
       {noLabel ? null : (

packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap

@@ -5,15 +5,15 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c8 {
+.c7 {
   margin-top: 0.1875rem;
 }
 
-.c10 {
+.c9 {
   margin-left: 0.75rem;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -40,7 +40,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -60,7 +60,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -77,7 +77,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   display: block;
 }
 
-.c14 {
+.c13 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -89,30 +89,30 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   appearance: button;
 }
 
-.c14::-moz-focus-inner,
-.c14[type='button']::-moz-focus-inner,
-.c14[type='reset']::-moz-focus-inner,
-.c14[type='submit']::-moz-focus-inner {
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c14:-moz-focusring,
-.c14[type='button']:-moz-focusring,
-.c14[type='reset']:-moz-focusring,
-.c14[type='submit']:-moz-focusring {
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c13 {
+.c12 {
   min-width: 7.5rem;
 }
 
-.c12 {
+.c11 {
   display: inline-block;
 }
 
-.c11 {
+.c10 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -151,7 +151,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c11:focus {
+.c10:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -159,26 +159,26 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c11:hover {
+.c10:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c11:active,
-.c11:active:hover,
-.c11:active:focus {
+.c10:active,
+.c10:active:hover,
+.c10:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c11[disabled] {
+.c10[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 {
+.c6 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -188,7 +188,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   text-align: left;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -200,7 +200,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c9 {
+.c8 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -222,89 +222,84 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9:focus {
+.c8:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c9::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9::-moz-placeholder {
+.c8::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:invalid {
+.c8:invalid {
   box-shadow: none;
 }
 
-.c9:disabled {
+.c8:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c9:disabled::-webkit-input-placeholder {
+.c8:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:disabled::-moz-placeholder {
+.c8:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:disabled:-ms-input-placeholder {
+.c8:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c6 {
+.c5 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c1 {
-  margin-bottom: 0;
-}
-
 <div
   className="c0"
 >
   <form
-    className="c1"
     onSubmit={undefined}
   >
     <div
-      className="c2"
+      className="c1"
       wrap={true}
     >
       <div
-        className="c3"
+        className="c2"
       >
         <div
-          className="c4"
+          className="c3"
         >
           <div
-            className="c5"
+            className="c4"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c6 c7"
+              className="c5 c6"
               htmlFor="k"
             >
               Attach to new CNS service name
             </label>
             <div
-              className="c8"
+              className="c7"
             >
               <input
-                className="c9"
+                className="c8"
                 disabled={false}
                 id="k"
                 onBlur={null}
@@ -315,13 +310,13 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c3"
+        className="c2"
       >
         <div
-          className="c10"
+          className="c9"
         >
           <button
-            className="c11 c12 c13 c14"
+            className="c10 c11 c12 c13"
             data-ui-button="true"
             disabled={undefined}
             href=""
@@ -341,15 +336,15 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c8 {
+.c7 {
   margin-top: 0.1875rem;
 }
 
-.c10 {
+.c9 {
   margin-left: 0.75rem;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -376,7 +371,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -396,7 +391,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -413,7 +408,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   display: block;
 }
 
-.c14 {
+.c13 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -425,30 +420,30 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   appearance: button;
 }
 
-.c14::-moz-focus-inner,
-.c14[type='button']::-moz-focus-inner,
-.c14[type='reset']::-moz-focus-inner,
-.c14[type='submit']::-moz-focus-inner {
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c14:-moz-focusring,
-.c14[type='button']:-moz-focusring,
-.c14[type='reset']:-moz-focusring,
-.c14[type='submit']:-moz-focusring {
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c13 {
+.c12 {
   min-width: 7.5rem;
 }
 
-.c12 {
+.c11 {
   display: inline-block;
 }
 
-.c11 {
+.c10 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -487,7 +482,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c11:focus {
+.c10:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -495,26 +490,26 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c11:hover {
+.c10:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c11:active,
-.c11:active:hover,
-.c11:active:focus {
+.c10:active,
+.c10:active:hover,
+.c10:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c11[disabled] {
+.c10[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 {
+.c6 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -524,7 +519,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   text-align: left;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -536,7 +531,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c9 {
+.c8 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -558,89 +553,84 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9:focus {
+.c8:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c9::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9::-moz-placeholder {
+.c8::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:invalid {
+.c8:invalid {
   box-shadow: none;
 }
 
-.c9:disabled {
+.c8:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c9:disabled::-webkit-input-placeholder {
+.c8:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:disabled::-moz-placeholder {
+.c8:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:disabled:-ms-input-placeholder {
+.c8:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c6 {
+.c5 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c1 {
-  margin-bottom: 0;
-}
-
 <div
   className="c0"
 >
   <form
-    className="c1"
     onSubmit={undefined}
   >
     <div
-      className="c2"
+      className="c1"
       wrap={true}
     >
       <div
-        className="c3"
+        className="c2"
       >
         <div
-          className="c4"
+          className="c3"
         >
           <div
-            className="c5"
+            className="c4"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c6 c7"
+              className="c5 c6"
               htmlFor="l"
             >
               Attach to new CNS service name
             </label>
             <div
-              className="c8"
+              className="c7"
             >
               <input
-                className="c9"
+                className="c8"
                 disabled={false}
                 id="l"
                 onBlur={null}
@@ -651,13 +641,13 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c3"
+        className="c2"
       >
         <div
-          className="c10"
+          className="c9"
         >
           <button
-            className="c11 c12 c13 c14"
+            className="c10 c11 c12 c13"
             data-ui-button="true"
             disabled={undefined}
             href=""
@@ -692,7 +682,7 @@ exports[`renders <Header/> without throwing 1`] = `
 .c2 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -944,6 +934,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -1116,7 +1107,7 @@ exports[`renders <HostnamesHeader /> without throwing 1`] = `
 .c2 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }

packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap

@@ -5,7 +5,7 @@ Array [
   .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -30,7 +30,7 @@ Array [
   .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -351,7 +351,7 @@ Array [
   .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -376,7 +376,7 @@ Array [
   .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -499,12 +499,12 @@ Array [
 `;
 
 exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
-.c10 {
+.c9 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c5 {
+.c4 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -512,39 +512,39 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   overflow: visible;
 }
 
-.c5[type='checkbox'],
-.c5[type='radio'] {
+.c4[type='checkbox'],
+.c4[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c5[type='number']::-webkit-inner-spin-button,
-.c5[type='number']::-webkit-outer-spin-button {
+.c4[type='number']::-webkit-inner-spin-button,
+.c4[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c5[type='search'] {
+.c4[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c5[type='search']::-webkit-search-cancel-button,
-.c5[type='search']::-webkit-search-decoration {
+.c4[type='search']::-webkit-search-cancel-button,
+.c4[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c5::-webkit-file-upload-button {
+.c4::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c9 {
+.c8 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -554,33 +554,33 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   text-align: left;
 }
 
-.c4 {
+.c3 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c4:checked + label::after {
+.c3:checked + label::after {
   opacity: 1;
 }
 
-.c4:selected + label::after {
+.c3:selected + label::after {
   opacity: 1;
 }
 
-.c4:checked + label {
+.c3:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c4:selected + label {
+.c3:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c4:disabled + label {
+.c3:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c6 {
+.c5 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -597,7 +597,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c6::after {
+.c5::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -614,7 +614,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c3 {
+.c2 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -623,12 +623,12 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c7 label {
+.c6 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c2 {
+.c1 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -652,25 +652,25 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c2 label {
+.c1 label {
   font-weight: 400;
 }
 
-.c2 label::after {
+.c1 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c2 div[type='checkbox'],
-.c2 div[type='checkbox'] input,
-.c2 div[type='checkbox'] label {
+.c1 div[type='checkbox'],
+.c1 div[type='checkbox'] input,
+.c1 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c1 {
+.c0 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -682,23 +682,18 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c8 {
+.c7 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c0 {
-  margin-bottom: 0 !important;
-}
-
 <form
-  className="c0"
   onChange={undefined}
 >
   <div
-    className="c1"
+    className="c0"
     id="fw-toggle-firewall"
     name="enabled"
     role="group"
@@ -706,11 +701,11 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
     type="checkbox"
   >
     <li
-      className="c2"
+      className="c1"
     >
       <div
         checked={false}
-        className="c3"
+        className="c2"
         disabled={false}
         id="fw-toggle-firewall"
         onBlur={undefined}
@@ -718,30 +713,30 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
       >
         <input
           checked={false}
-          className="c4 c5"
+          className="c3 c4"
           disabled={false}
           id="l"
           onBlur={undefined}
           type="checkbox"
         />
         <label
-          className="c6"
+          className="c5"
           htmlFor="l"
         />
       </div>
       <div
         checked={false}
-        className="c7"
+        className="c6"
         disabled={false}
         id="fw-toggle-firewall"
         onBlur={undefined}
       >
         <label
-          className="c8 c9"
+          className="c7 c8"
           htmlFor="l"
         >
           <div
-            className="c10"
+            className="c9"
           >
             Enable Firewall
           </div>
@@ -753,12 +748,12 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
 `;
 
 exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
-.c10 {
+.c9 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c5 {
+.c4 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -766,39 +761,39 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   overflow: visible;
 }
 
-.c5[type='checkbox'],
-.c5[type='radio'] {
+.c4[type='checkbox'],
+.c4[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c5[type='number']::-webkit-inner-spin-button,
-.c5[type='number']::-webkit-outer-spin-button {
+.c4[type='number']::-webkit-inner-spin-button,
+.c4[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c5[type='search'] {
+.c4[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c5[type='search']::-webkit-search-cancel-button,
-.c5[type='search']::-webkit-search-decoration {
+.c4[type='search']::-webkit-search-cancel-button,
+.c4[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c5::-webkit-file-upload-button {
+.c4::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c9 {
+.c8 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -808,33 +803,33 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   text-align: left;
 }
 
-.c4 {
+.c3 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c4:checked + label::after {
+.c3:checked + label::after {
   opacity: 1;
 }
 
-.c4:selected + label::after {
+.c3:selected + label::after {
   opacity: 1;
 }
 
-.c4:checked + label {
+.c3:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c4:selected + label {
+.c3:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c4:disabled + label {
+.c3:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c6 {
+.c5 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -851,7 +846,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c6::after {
+.c5::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -868,7 +863,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c3 {
+.c2 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -877,12 +872,12 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c7 label {
+.c6 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c2 {
+.c1 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -906,25 +901,25 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c2 label {
+.c1 label {
   font-weight: 400;
 }
 
-.c2 label::after {
+.c1 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c2 div[type='checkbox'],
-.c2 div[type='checkbox'] input,
-.c2 div[type='checkbox'] label {
+.c1 div[type='checkbox'],
+.c1 div[type='checkbox'] input,
+.c1 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c1 {
+.c0 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -936,23 +931,18 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c8 {
+.c7 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c0 {
-  margin-bottom: 0 !important;
-}
-
 <form
-  className="c0"
   onChange={undefined}
 >
   <div
-    className="c1"
+    className="c0"
     id="fw-toggle-firewall"
     name="enabled"
     role="group"
@@ -960,11 +950,11 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
     type="checkbox"
   >
     <li
-      className="c2"
+      className="c1"
     >
       <div
         checked={false}
-        className="c3"
+        className="c2"
         disabled={true}
         id="fw-toggle-firewall"
         onBlur={undefined}
@@ -972,30 +962,30 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
       >
         <input
           checked={false}
-          className="c4 c5"
+          className="c3 c4"
           disabled={true}
           id="n"
           onBlur={undefined}
           type="checkbox"
         />
         <label
-          className="c6"
+          className="c5"
           htmlFor="n"
         />
       </div>
       <div
         checked={false}
-        className="c7"
+        className="c6"
         disabled={true}
         id="fw-toggle-firewall"
         onBlur={undefined}
       >
         <label
-          className="c8 c9"
+          className="c7 c8"
           htmlFor="n"
         >
           <div
-            className="c10"
+            className="c9"
           >
             Enable Firewall
           </div>
@@ -1007,12 +997,12 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
 `;
 
 exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
-.c10 {
+.c9 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c5 {
+.c4 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1020,39 +1010,39 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   overflow: visible;
 }
 
-.c5[type='checkbox'],
-.c5[type='radio'] {
+.c4[type='checkbox'],
+.c4[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c5[type='number']::-webkit-inner-spin-button,
-.c5[type='number']::-webkit-outer-spin-button {
+.c4[type='number']::-webkit-inner-spin-button,
+.c4[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c5[type='search'] {
+.c4[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c5[type='search']::-webkit-search-cancel-button,
-.c5[type='search']::-webkit-search-decoration {
+.c4[type='search']::-webkit-search-cancel-button,
+.c4[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c5::-webkit-file-upload-button {
+.c4::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c9 {
+.c8 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -1062,33 +1052,33 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   text-align: left;
 }
 
-.c4 {
+.c3 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c4:checked + label::after {
+.c3:checked + label::after {
   opacity: 1;
 }
 
-.c4:selected + label::after {
+.c3:selected + label::after {
   opacity: 1;
 }
 
-.c4:checked + label {
+.c3:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c4:selected + label {
+.c3:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c4:disabled + label {
+.c3:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c6 {
+.c5 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -1105,7 +1095,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c6::after {
+.c5::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -1122,7 +1112,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c3 {
+.c2 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -1131,12 +1121,12 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c7 label {
+.c6 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c2 {
+.c1 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1160,25 +1150,25 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c2 label {
+.c1 label {
   font-weight: 400;
 }
 
-.c2 label::after {
+.c1 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c2 div[type='checkbox'],
-.c2 div[type='checkbox'] input,
-.c2 div[type='checkbox'] label {
+.c1 div[type='checkbox'],
+.c1 div[type='checkbox'] input,
+.c1 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c1 {
+.c0 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -1190,22 +1180,16 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c8 {
+.c7 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c0 {
-  margin-bottom: 0 !important;
-}
-
-<form
-  className="c0"
->
+<form>
   <div
-    className="c1"
+    className="c0"
     id="fw-toggle-inactive"
     name="inactive"
     role="group"
@@ -1213,11 +1197,11 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
     type="checkbox"
   >
     <li
-      className="c2"
+      className="c1"
     >
       <div
         checked={false}
-        className="c3"
+        className="c2"
         disabled={false}
         id="fw-toggle-inactive"
         onBlur={undefined}
@@ -1225,30 +1209,30 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
       >
         <input
           checked={false}
-          className="c4 c5"
+          className="c3 c4"
           disabled={false}
           id="p"
           onBlur={undefined}
           type="checkbox"
         />
         <label
-          className="c6"
+          className="c5"
           htmlFor="p"
         />
       </div>
       <div
         checked={false}
-        className="c7"
+        className="c6"
         disabled={false}
         id="fw-toggle-inactive"
         onBlur={undefined}
       >
         <label
-          className="c8 c9"
+          className="c7 c8"
           htmlFor="p"
         >
           <div
-            className="c10"
+            className="c9"
           >
             Show inactive rules
           </div>

packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap

@@ -4362,6 +4362,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   max-width: 22.1875rem;
   width: 22.1875rem;

packages/resource-widgets/src/cns/index.js

@@ -50,10 +50,6 @@ const ShortDivider = styled(Divider)`
   margin-right: 0;
 `;
 
-const Form = styled.form`
-  margin-bottom: 0;
-`;
-
 export const Header = () => (
   <Margin bottom="5">
     <H3>CNS Default Hostnames</H3>
@@ -104,7 +100,7 @@ export const AddServiceForm = ({
   invalid
 }) => (
   <Margin bottom="3">
-    <Form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit}>
       <Flex wrap alignCenter={invalid} alignEnd={!invalid}>
         <FlexItem>
           <Flex collumn>
@@ -135,7 +131,7 @@ export const AddServiceForm = ({
           </Margin>
         </FlexItem>
       </Flex>
-    </Form>
+    </form>
   </Margin>
 );
 

packages/resource-widgets/src/firewall/index.js

@@ -3,13 +3,11 @@ import { Field } from 'redux-form';
 import { Margin, Padding } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
-import styled from 'styled-components';
 
 import {
   H3,
   FormGroup,
   FormLabel,
-  Toggle,
   TagList,
   TagItem,
   P,
@@ -21,10 +19,6 @@ import {
 
 const { SmallOnly, MediumDown, Medium, Large } = QueryBreakpoints;
 
-const Form = styled.form`
-  margin-bottom: 0 !important;
-`;
-
 const capitalizeFirstLetter = string =>
   string.charAt(0).toUpperCase() + string.slice(1);
 
@@ -250,7 +244,7 @@ export const ToggleFirewallForm = ({
     : undefined;
 
   return (
-    <Form onChange={onChange}>
+    <form onChange={onChange}>
       <FormGroup
         id="fw-toggle-firewall"
         type="checkbox"
@@ -265,12 +259,12 @@ export const ToggleFirewallForm = ({
           </FormLabel>
         </Checkbox>
       </FormGroup>
-    </Form>
+    </form>
   );
 };
 
 export const ToggleInactiveForm = () => (
-  <Form>
+  <form>
     <FormGroup
       id="fw-toggle-inactive"
       type="checkbox"
@@ -285,5 +279,5 @@ export const ToggleInactiveForm = () => (
         </FormLabel>
       </Checkbox>
     </FormGroup>
-  </Form>
+  </form>
 );

packages/resource-widgets/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap

@@ -2931,8 +2931,8 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 .c23 {
   box-sizing: border-box;
   width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
+  height: 12rem;
+  min-height: 12rem;
   padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -2946,6 +2946,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;

packages/ui-toolkit/src/anchor/__tests___/__snapshots__/anchor.spec.js.snap

@@ -14,11 +14,9 @@ exports[`Anchor Default Anchor 1`] = `
 .c0 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c0:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 <a
@@ -43,21 +41,14 @@ exports[`Anchor Disabled Anchor 1`] = `
 .c0 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(216,216,216);
   -webkit-text-fill-color: currentcolor;
   pointer-events: none;
 }
 
-.c0:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
 <a
   className="c0 c1 c2"
   disabled={true}
@@ -81,15 +72,13 @@ exports[`Anchor Reversed Anchor 1`] = `
 .c0 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c0:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 <a
   className="c0 c1 c2"
   href="https://joyent.com"

packages/ui-toolkit/src/anchor/index.js

@@ -13,12 +13,10 @@ const BaseLink = styled(({ component, children, ...rest }) =>
 )`
   color: ${props => props.theme.primary};
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  text-decoration: underline;
 
-  &:hover {
-    text-decoration: none;
-  }
-
-  ${isOr('secondary', 'reversed')`
+  ${isOr('secondary', 'reversed', 'white')`
     color: ${props => props.theme.white};
     -webkit-text-fill-color: currentcolor;
   `};
@@ -32,10 +30,6 @@ const BaseLink = styled(({ component, children, ...rest }) =>
     color: ${props => props.theme.grey};
     -webkit-text-fill-color: currentcolor;
     pointer-events: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
   `};
 `;
 

packages/ui-toolkit/src/base/global.js

@@ -44,6 +44,10 @@ export default ({ theme }) => css`
     flex-flow: column;
   }
 
+  form {
+    margin: 0;
+  }
+
   .CodeMirror {
     border: solid ${remcalc(1)} ${theme.grey};
     margin: ${remcalc(8)} 0 ${remcalc(8)} 0;

packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap

@@ -14,11 +14,9 @@ exports[`Button Default Button 1`] = `
 .c2 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c2:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c1 {
@@ -114,21 +112,14 @@ exports[`Button Disabled Button 1`] = `
 .c2 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(216,216,216);
   -webkit-text-fill-color: currentcolor;
   pointer-events: none;
 }
 
-.c2:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c2:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
 .c1 {
   display: inline-block;
 }
@@ -245,11 +236,9 @@ exports[`Button Error Button 1`] = `
 .c2 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c2:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c1 {
@@ -368,21 +357,14 @@ exports[`Button Loading Button 1`] = `
 .c2 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(216,216,216);
   -webkit-text-fill-color: currentcolor;
   pointer-events: none;
 }
 
-.c2:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c2:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
 .c1 {
   display: inline-block;
 }
@@ -499,15 +481,13 @@ exports[`Button Secondary Button 1`] = `
 .c2 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c2:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c1 {
   display: inline-block;
 }

packages/ui-toolkit/src/card/index.js

@@ -1,6 +1,5 @@
 export { default } from './card';
 export { default as Outlet } from './outlet';
-
 export {
   default as Header,
   Meta as HeaderMeta,

packages/ui-toolkit/src/footer/sticky.js

@@ -10,7 +10,10 @@ const Container = styled(ViewContainer)`
   flex-wrap: nowrap;
   align-content: stretch;
   align-items: stretch;
-  background: ${props => props.theme.background};
+  background: ${props =>
+    props.fill
+      ? props.theme[props.fill] ? props.theme[props.fill] : props.fill
+      : props.theme.background};
 `;
 
 const Footer = styled.div`
@@ -20,15 +23,22 @@ const Footer = styled.div`
   align-content: stretch;
   align-items: stretch;
   background-color: ${props =>
-    props.fill ? props.theme[props.fill] : 'rgba(241, 241, 241, 1)'};
+    props.fill
+      ? props.theme[props.fill] ? props.theme[props.fill] : props.fill
+      : 'rgba(241, 241, 241, 1)'};
   border-top: ${remcalc(1)} solid ${props => props.theme.grey};
-  max-height: ${remcalc(53)};
-  min-height: ${remcalc(53)};
   line-height: ${remcalc(25)};
   height: ${remcalc(70)};
-  max-height: ${remcalc(70)};
   z-index: 1;
 
+  ${is('auto')`
+    height: auto;
+  `};
+
+  ${is('borderless')`
+    border: none;
+  `};
+
   ${is('fixed')`
     position: fixed;
     left: 0;
@@ -38,10 +48,16 @@ const Footer = styled.div`
   ${is('bottom', 'fixed')`
     bottom: 0;
   `};
+
+  ${is('top', 'fixed')`
+    top: 0;
+  `};
 `;
 
-export default ({ children, fluid, ...rest }) => (
+export default ({ children, fluid, innerFill, ...rest }) => (
   <Footer {...rest}>
-    <Container fluid={fluid}>{children}</Container>
+    <Container fill={innerFill || rest.fill} fluid={fluid}>
+      {children}
+    </Container>
   </Footer>
 );

packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap

@@ -726,8 +726,8 @@ exports[`Form Textarea 1`] = `
 .c1 {
   box-sizing: border-box;
   width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
+  height: 12rem;
+  min-height: 12rem;
   padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);

packages/ui-toolkit/src/form/base/input.js

@@ -17,7 +17,7 @@ const color = props =>
   props.defaultValue ? colorWithDefaultValue(props) : colorWithDisabled(props);
 
 const height = props =>
-  props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48);
+  props.multiple ? 'auto' : props.textarea ? remcalc(192) : remcalc(48);
 
 const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
 
@@ -106,6 +106,7 @@ const style = css`
   `};
 
   ${is('monospace')`
+    white-space: pre-wrap;
     font-family: ${props => props.theme.monoFont.families};
 
       &:disabled {
@@ -164,6 +165,10 @@ const style = css`
     width: ${remcalc(120)};
   `};
 
+  ${is('borderless')`
+    border: none;
+  `};
+
   ${is('success')`
     border-color: ${props => props.theme.greenDark}
   `};
@@ -199,6 +204,14 @@ const style = css`
     text-align: center;
     border-radius: 0;
   `};
+
+  ${is('white')`
+    color: ${props => props.theme.white};
+  `};
+
+  ${is('dark')`
+    background: ${props => props.theme.greyDarker};
+  `};
 `;
 
 const BaseInput = Component => ({ resize, onBlur, type, ...props }) => {

packages/ui-toolkit/src/section-list/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
+import is from 'styled-is';
 
 const UnorderedList = styled.ul`
   background: ${props => props.theme.disabled};
@@ -24,6 +25,10 @@ const UnorderedList = styled.ul`
     left: 0;
     z-index: 1;
   }
+
+  ${is('clear')`
+    background: none !important;
+  `};
 `;
 
 /**

packages/ui-toolkit/src/section-list/item.js

@@ -1,20 +1,9 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import remcalc from 'remcalc';
-import is from 'styled-is';
+import is, { isNot } from 'styled-is';
 
 import BaseAnchor from '../anchor';
 
-const border = css`
-  width: 100%;
-  height: ${remcalc(1)};
-  background: ${props => props.theme.text};
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  z-index: 2;
-`;
-
 export default styled.li`
   font-size: ${remcalc(15)};
   line-height: 1.6;
@@ -23,25 +12,53 @@ export default styled.li`
 
 export const Anchor = styled(BaseAnchor)`
   color: ${props => props.theme.text};
+  font-weight: ${props => props.theme.font.weight.text};
   text-decoration: none;
   cursor: pointer;
   padding: 0 ${remcalc(12)};
   padding-bottom: ${remcalc(15)};
   position: relative;
 
-  &.active {
-    font-weight: ${props => props.theme.font.weight.text};
+  &:after {
+    width: 100%;
+    height: ${remcalc(1)};
+    background: ${props => props.theme.grey};
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+  }
 
+  &.active {
     &:after {
-      ${border};
+      background: ${props => props.theme.font.regular};
     }
   }
 
+  &.active {
+    font-weight: ${props => props.theme.font.weight.semibold};
+  }
+
   ${is('active')`
-    font-weight: ${props => props.theme.font.weight.text};
+    font-weight: ${props => props.theme.font.weight.semibold}
+  `};
+
+  ${is('white')`
+    color: ${props => props.theme.white};
+
+    ${isNot('active')`
+      color: ${props => props.theme.greyDark};
+    `};
 
     &:after {
-      ${border}
+      background: ${props => props.theme.greyDarker};
+    };
+  `};
+
+  ${is('white', 'active')`
+    &:after {
+      background: ${props => props.theme.white};
     }
   `};
 `;

packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap

@@ -14,7 +14,7 @@ exports[`Button H1 1`] = `
   line-height: 2.8125rem;
   font-style: normal;
   font-stretch: normal;
-  font-weight: normal;
+  font-weight: 400;
   margin: 0;
 }
 
@@ -29,7 +29,7 @@ exports[`Button H2 1`] = `
 .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -45,7 +45,7 @@ exports[`Button H3 1`] = `
 .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }

packages/ui-toolkit/src/text/headings.js

@@ -12,7 +12,7 @@ export const H1 = styled(NH1)`
   line-height: ${remcalc(45)};
   font-style: normal;
   font-stretch: normal;
-  font-weight: normal;
+  font-weight: ${props => props.theme.font.weight.normal};
   margin: 0;
 
   ${is('inline')`
@@ -36,7 +36,7 @@ export const H1 = styled(NH1)`
 export const H2 = styled.h2`
   margin: 0;
   color: ${props => props.theme.text};
-  font-weight: normal;
+  font-weight: ${props => props.theme.font.weight.normal};
   line-height: ${remcalc(30)};
   font-size: ${remcalc(24)};
 
@@ -61,7 +61,7 @@ export const H2 = styled.h2`
 export const H3 = styled.h3`
   margin: 0;
   color: ${props => props.theme.text};
-  font-weight: normal;
+  font-weight: ${props => props.theme.font.weight.normal};
   line-height: ${remcalc(26)};
   font-size: ${remcalc(21)};