fix(my-joy-beta): monospace instance name on network details

fixes #1089
2018-01-25 16:40:07 +00:00 · 2018-01-25 16:40:07 +00:00 · 2ebace64c0
commit 2ebace64c0
parent c39536677b
15 changed files with 76 additions and 365 deletions
--- a/packages/my-joy-beta/src/components/tests/snapshots/cns.spec.js.snap
+++ b/packages/my-joy-beta/src/components/tests/snapshots/cns.spec.js.snap
@ -695,7 +695,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  font-size: 0.9375rem;
  line-height: normal !important;
--- a/packages/my-joy-beta/src/components/tests/snapshots/key-value.spec.js.snap
+++ b/packages/my-joy-beta/src/components/tests/snapshots/key-value.spec.js.snap
@ -2971,7 +2971,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
--- a/packages/my-joy-beta/src/components/tests/snapshots/network.spec.js.snap
+++ b/packages/my-joy-beta/src/components/tests/snapshots/network.spec.js.snap
@ -4167,62 +4167,6 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
                </div>
              </div>
            </div>
-            <div
-              className="c23"
-            >
-              <div
-                className="c24"
-                disabled={false}
-                name="card"
-              >
-                <div
-                  className="c25"
-                  disabled={false}
-                  name="card-header"
-                  onClick={undefined}
-                >
-                  <div
-                    className="c26"
-                    disabled={false}
-                    name="card-header-meta"
-                  >
-                    <div
-                      className="c27"
-                    >
-                      <p
-                        className="c17"
-                      >
-                        Instances on network
-                      </p>
-                    </div>
-                  </div>
-                  <div
-                    className="c5"
-                    disabled={false}
-                    name="card-header-box"
-                  >
-                    <svg
-                      className=""
-                      height="6"
-                      innerRef={undefined}
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      viewBox="0 0 9.6 6"
-                      width="9.6"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                        fill="rgba(73, 73, 73, 1)"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
          </div>
        </div>
      </div>
@ -5045,136 +4989,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
  margin-bottom: 0.4375rem;
 }

-.c30 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgba(73,73,73,1);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  cursor: pointer;
-  min-height: auto;
-  height: 2.875rem;
-  -webkit-flex: 0 0 2.875rem;
-  -ms-flex: 0 0 2.875rem;
-  flex: 0 0 2.875rem;
-}
-
-.c31 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgba(73,73,73,1);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  cursor: pointer;
-  min-height: auto;
-  height: 2.875rem;
-  -webkit-flex: 0 0 2.875rem;
-  -ms-flex: 0 0 2.875rem;
-  flex: 0 0 2.875rem;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  z-index: 1;
-  line-height: 1.5rem;
-  height: auto;
-  max-width: 100%;
-  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
-  margin: -0.0625rem;
-  box-shadow: none;
-}
-
-.c31 button {
-  margin-bottom: 0;
-  margin-top: 0;
-}
-
-.c32 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgba(73,73,73,1);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  cursor: pointer;
-  min-height: auto;
-  height: 2.875rem;
-  -webkit-flex: 0 0 2.875rem;
-  -ms-flex: 0 0 2.875rem;
-  flex: 0 0 2.875rem;
-  box-sizing: border-box;
-  min-height: 2.9375rem;
-  max-width: 100%;
-  width: auto;
-  height: auto;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  overflow: hidden;
-  background-color: transparent;
-  border-width: 0;
-  box-shadow: none;
-  color: inherit;
-}
-
 .c24 {
  box-sizing: content-box;
  display: -webkit-box;
@ -5285,7 +5099,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
  width: 22.1875rem;
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  max-width: 22.1875rem;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -5827,62 +5641,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                </div>
              </div>
            </div>
-            <div
-              className="c23"
-            >
-              <div
-                className="c30"
-                disabled={false}
-                name="card"
-              >
-                <div
-                  className="c31"
-                  disabled={false}
-                  name="card-header"
-                  onClick={undefined}
-                >
-                  <div
-                    className="c32"
-                    disabled={false}
-                    name="card-header-meta"
-                  >
-                    <div
-                      className="c25"
-                    >
-                      <p
-                        className="c17"
-                      >
-                        Instances on network
-                      </p>
-                    </div>
-                  </div>
-                  <div
-                    className="c5"
-                    disabled={false}
-                    name="card-header-box"
-                  >
-                    <svg
-                      className=""
-                      height="6"
-                      innerRef={undefined}
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      viewBox="0 0 9.6 6"
-                      width="9.6"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                        fill="rgba(73, 73, 73, 1)"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
          </div>
        </div>
      </div>
--- a/packages/my-joy-beta/src/components/tests/firewall.spec.js
+++ b/packages/my-joy-beta/src/components/tests/firewall.spec.js
@ -2,7 +2,13 @@ import React, { Fragment } from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';

-import Firewall, { Rules, TagRules, DefaultRules, ToggleFirewallForm, ToggleInactiveForm } from '../firewall';
+import Firewall, {
+  Rules,
+  TagRules,
+  DefaultRules,
+  ToggleFirewallForm,
+  ToggleInactiveForm
+} from '../firewall';
 import Theme from '@mocks/theme';

 const rules = [
--- a/packages/my-joy-beta/src/components/instances/tests/snapshots/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/tests/snapshots/metadata.spec.js.snap
@ -730,7 +730,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
@ -1786,7 +1786,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
--- a/packages/my-joy-beta/src/components/network.js
+++ b/packages/my-joy-beta/src/components/network.js
@ -270,42 +270,44 @@ export const Expanded = ({
                      ) : null}
                    </Card>
                  </Margin>
-                  <Margin top={3}>
-                    <Card
-                      collapsed={!machinesExpanded}
-                      actionable={!machinesExpanded}
-                    >
-                      <CardHeader
-                        secondary={false}
-                        transparent={false}
-                        onClick={onMachinesClick}
+                  {machines.length ? (
+                    <Margin top={3}>
+                      <Card
+                        collapsed={!machinesExpanded}
+                        actionable={!machinesExpanded}
                      >
-                        <CardHeaderMeta>
-                          <Padding left={3} right={3}>
-                            <P>Instances on network</P>
-                          </Padding>
-                        </CardHeaderMeta>
-                        <CardHeaderBox>
-                          <ArrowIcon
-                            direction={machinesExpanded ? 'up' : 'down'}
-                          />
-                        </CardHeaderBox>
-                      </CardHeader>
-                      {machinesExpanded ? (
-                        <CardOutlet>
-                          <Padding all={3}>
-                            <Flex column>
-                              {machines.map(({ name }) => (
-                                <FlexItem>
-                                  <P>{name}</P>
-                                </FlexItem>
-                              ))}
-                            </Flex>
-                          </Padding>
-                        </CardOutlet>
-                      ) : null}
-                    </Card>
-                  </Margin>
+                        <CardHeader
+                          secondary={false}
+                          transparent={false}
+                          onClick={onMachinesClick}
+                        >
+                          <CardHeaderMeta>
+                            <Padding left={3} right={3}>
+                              <P>Instances on network</P>
+                            </Padding>
+                          </CardHeaderMeta>
+                          <CardHeaderBox>
+                            <ArrowIcon
+                              direction={machinesExpanded ? 'up' : 'down'}
+                            />
+                          </CardHeaderBox>
+                        </CardHeader>
+                        {machinesExpanded ? (
+                          <CardOutlet>
+                            <Padding top={2} bottom={2} left={3} right={3}>
+                              <Flex column>
+                                {machines.map(({ name }) => (
+                                  <FlexItem>
+                                    <P monospace>{name}</P>
+                                  </FlexItem>
+                                ))}
+                              </Flex>
+                            </Padding>
+                          </CardOutlet>
+                        ) : null}
+                      </Card>
+                    </Margin>
+                  ) : null}
                </Fragment>
              ) : null}
            </Padding>
--- a/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/metadata.spec.js.snap
@ -1136,7 +1136,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
@ -3032,7 +3032,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
@ -4132,7 +4132,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
@ -5486,7 +5486,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
@ -6586,7 +6586,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
--- a/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/networks.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/networks.spec.js.snap
@ -2441,62 +2441,6 @@ Array [
                                    </div>
                                </div>
                            </div>
-                            <div
-                                className="c23"
-                            >
-                                <div
-                                    className="c24"
-                                    disabled={false}
-                                    name="card"
-                                >
-                                    <div
-                                        className="c25"
-                                        disabled={false}
-                                        name="card-header"
-                                        onClick={[Function]}
-                                    >
-                                        <div
-                                            className="c26"
-                                            disabled={false}
-                                            name="card-header-meta"
-                                        >
-                                            <div
-                                                className="c27"
-                                            >
-                                                <p
-                                                    className="c17"
-                                                >
-                                                    Instances on network
-                                                </p>
-                                            </div>
-                                        </div>
-                                        <div
-                                            className="c5"
-                                            disabled={false}
-                                            name="card-header-box"
-                                        >
-                                            <svg
-                                                className=""
-                                                height="6"
-                                                innerRef={undefined}
-                                                style={
-                                                    Object {
-                                                        "transform": "rotate(0deg)",
-                                                      }
-                                                }
-                                                viewBox="0 0 9.6 6"
-                                                width="9.6"
-                                                xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                                <path
-                                                    d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                                                    fill="rgba(73, 73, 73, 1)"
-                                                />
-                                            </svg>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
                        </div>
                    </div>
                </div>
--- a/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/user-script.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/user-script.spec.js.snap
@ -812,7 +812,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
@ -2016,7 +2016,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
@ -3893,7 +3893,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
@ -5096,7 +5096,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
@ -6451,7 +6451,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
@ -7727,7 +7727,7 @@ Array [
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
--- a/packages/my-joy-beta/src/containers/instances/tests/snapshots/cns.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/tests/snapshots/cns.spec.js.snap
@ -1483,7 +1483,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  font-size: 0.9375rem;
  line-height: normal !important;
@ -3561,7 +3561,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
  background-color: rgb(250,250,250);
  color: rgb(216,216,216);
  cursor: not-allowed;
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  font-size: 0.9375rem;
  line-height: normal !important;
--- a/packages/my-joy-beta/src/containers/instances/tests/snapshots/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/tests/snapshots/metadata.spec.js.snap
@ -1517,7 +1517,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
@ -4423,7 +4423,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
  background-color: rgb(255,255,255);
  border: 0.0625rem solid rgb(216,216,216);
  color: rgba(73,73,73,1);
-  font-family: "Roboto Mono";
+  font-family: "Roboto Mono",monospace;
  width: 100%;
  text-overflow: ellipsis;
  resize: vertical;
--- a/packages/ui-toolkit/src/base/global.js
+++ b/packages/ui-toolkit/src/base/global.js
@ -3,7 +3,7 @@ import remcalc from 'remcalc';

 export default ({ theme }) => css`
  @import url('${theme.font.href()}');
-  @import url('${theme.monoSpaceFont.href()}');
+  @import url('${theme.monoFont.href()}');

  [hidden] {
    display: none;
--- a/packages/ui-toolkit/src/form/base/input.js
+++ b/packages/ui-toolkit/src/form/base/input.js
@ -99,7 +99,7 @@ const style = css`
  `};

  ${is('monospace')`
-    font-family: ${props => props.theme.monoSpaceFont.family};
+    font-family: ${props => props.theme.monoFont.families};

      &:disabled {
        color: ${props => props.theme.text};
--- a/packages/ui-toolkit/src/text/p.js
+++ b/packages/ui-toolkit/src/text/p.js
@ -15,6 +15,10 @@ export default styled.p`
    color: ${props => props.theme.white}
  `};

+  ${is('monospace')`
+    font-family: ${props => props.theme.monoFont.families};
+  `};
+
  + p,
  + small,
  + h1,
--- a/packages/ui-toolkit/src/theme/index.js
+++ b/packages/ui-toolkit/src/theme/index.js
@ -86,12 +86,8 @@ export const font = {
  abbrBorderColor: base.secondary,
  textMuted: base.secondary,
  family: '"Libre Franklin"',
-  families:
-    '"Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif',
-  href: () =>
-    `${document.location.protocol}//${
-      document.location.host
-    }/fonts/css?family=Libre+Franklin:400,500,600`,
+  families: '"Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif',
+  href: () => `${document.location.protocol}//${document.location.host}/fonts/css?family=Libre+Franklin:400,500,600`,
  weight: {
    semibold: 600,
    medium: 500,
@ -99,13 +95,14 @@ export const font = {
  }
 };

-export const monoSpaceFont = {
+export const monoFont = {
  semibold: base.secondary,
  regular: base.text,
  abbrBorderColor: base.secondary,
  textMuted: base.secondary,
  family: '"Roboto Mono"',
-  href: () => 'https://fonts.googleapis.com/css?family=Roboto+Mono:400,700',
+  families: '"Roboto Mono", monospace',
+  href: () => `${document.location.protocol}//${document.location.host}/fonts/css?family=Roboto+Mono:700,400`,
  weight: {
    bold: 700,
    normal: 400
@ -154,7 +151,7 @@ export const shadows = {
 export default {
  ...base,
  font,
-  monoSpaceFont,
+  monoFont,
  inactive,
  notifications,
  inputError,