From 98166047fd288cca4e496ec47b0a68c5944d5453 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Mon, 8 Jan 2018 19:08:01 +0000 Subject: [PATCH] feat(my-joy-beta): create instane page starter --- .../__tests__/__snapshots__/name.spec.js.snap | 1227 +++++++++++++++++ .../__snapshots__/title.spec.js.snap | 433 ++++++ .../create-instance/__tests__/name.spec.js | 54 + .../create-instance/__tests__/title.spec.js | 56 + .../src/components/create-instance/name.js | 48 + .../src/components/create-instance/title.js | 18 + .../__snapshots__/snapshots.spec.js.snap | 4 +- .../__snapshots__/summary.spec.js.snap | 7 + .../__snapshots__/header.spec.js.snap | 1 + .../src/containers/create-instance/index.js | 15 + .../src/containers/create-instance/name.js | 40 + .../__tests__/__snapshots__/list.spec.js.snap | 172 +-- .../__snapshots__/metadata.spec.js.snap | 4 + .../__snapshots__/summary.spec.js.snap | 2 + .../__tests__/__snapshots__/tags.spec.js.snap | 7 + .../src/containers/instances/list.js | 5 +- .../__snapshots__/breadcrumb.spec.js.snap | 2 + packages/my-joy-beta/src/router.js | 59 + .../__snapshots__/index.spec.js.snap | 2 + packages/ui-toolkit/src/index.js | 3 +- .../__tests__/__snapshots__/text.spec.js.snap | 6 +- packages/ui-toolkit/src/text/headings.js | 10 +- 22 files changed, 2012 insertions(+), 163 deletions(-) create mode 100644 packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap create mode 100644 packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap create mode 100644 packages/my-joy-beta/src/components/create-instance/__tests__/name.spec.js create mode 100644 packages/my-joy-beta/src/components/create-instance/__tests__/title.spec.js create mode 100644 packages/my-joy-beta/src/components/create-instance/name.js create mode 100644 packages/my-joy-beta/src/components/create-instance/title.js create mode 100644 packages/my-joy-beta/src/containers/create-instance/index.js create mode 100644 packages/my-joy-beta/src/containers/create-instance/name.js diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap new file mode 100644 index 00000000..a786f2ba --- /dev/null +++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap @@ -0,0 +1,1227 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +.c1 { + margin-right: 0.25rem; +} + +.c3 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +.c6 { + margin-top: 1rem; + margin-bottom: 0.5rem; +} + +.c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c10 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c10::-moz-focus-inner, +.c10[type='button']::-moz-focus-inner, +.c10[type='reset']::-moz-focus-inner, +.c10[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c10:-moz-focusring, +.c10[type='button']:-moz-focusring, +.c10[type='reset']:-moz-focusring, +.c10[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c10 + button { + margin-left: 0.375rem; +} + +.c9 { + display: inline-block; +} + +.c8 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c8:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c8:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c8:active, +.c8:active:hover, +.c8:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c8[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c8:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c8:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c8:active, +.c8:active:hover, +.c8:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c5 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c7 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c7 + p, +.c7 + small, +.c7 + h1, +.c7 + h2, +.c7 + label, +.c7 + h3, +.c7 + h4, +.c7 + h5, +.c7 + div, +.c7 + span { + margin-top: 1.5rem; +} + +.c4 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +
+
+
+ + + +
+

+ Instance name +

+
+
+
+
+
+

+

+ + +`; + +exports[`renders without throwing 1`] = ` +.c1 { + margin-right: 0.25rem; +} + +.c3 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +.c6 { + margin-bottom: 1rem; +} + +.c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c13 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.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; +} + +.c13:-moz-focusring, +.c13[type='button']:-moz-focusring, +.c13[type='reset']:-moz-focusring, +.c13[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c13 + button { + margin-left: 0.375rem; +} + +.c12 { + display: inline-block; +} + +.c11 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); +} + +.c11:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c11:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c11:active, +.c11:active:hover, +.c11:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c11[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c5 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c4 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c7 { + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; + width: 100%; +} + +.c9 { + box-sizing: border-box; + width: 100%; + height: 3rem; + min-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: rgb(255,255,255); + border: 0.0625rem solid rgb(216,216,216); + color: rgba(73,73,73,1); + max-width: 18.75rem; + text-overflow: ellipsis; + font-size: 0.9375rem; + line-height: normal !important; + font-style: normal; + font-stretch: normal; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c9::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c9::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c9:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c9:invalid { + box-shadow: none; +} + +.c9:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); +} + +.c9:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c9:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c9:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c9:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +.c8 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + margin-right: 0.75rem; + font-weight: bold; + white-space: pre; + font-size: 0.8125rem; +} + +.c10 { + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + display: block; + color: rgb(70,70,70); + text-align: left; + float: right; + font-size: 0.8125rem; + float: none; + margin-left: 1.75rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +
+
+
+ + + +
+

+ Instance name +

+
+
+
+
+
+

+ Your instance name will be used to identify this specific instance. +

+
+
+ + +
+ + +`; + +exports[`renders without throwing 1`] = ` +.c1 { + margin-right: 0.25rem; +} + +.c3 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +.c6 { + margin-top: 1rem; + margin-bottom: 0.5rem; +} + +.c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c10 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c10::-moz-focus-inner, +.c10[type='button']::-moz-focus-inner, +.c10[type='reset']::-moz-focus-inner, +.c10[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c10:-moz-focusring, +.c10[type='button']:-moz-focusring, +.c10[type='reset']:-moz-focusring, +.c10[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c10 + button { + margin-left: 0.375rem; +} + +.c9 { + display: inline-block; +} + +.c8 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c8:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c8:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c8:active, +.c8:active:hover, +.c8:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c8[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c8:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c8:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c8:active, +.c8:active:hover, +.c8:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c5 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c7 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c7 + p, +.c7 + small, +.c7 + h1, +.c7 + h2, +.c7 + label, +.c7 + h3, +.c7 + h4, +.c7 + h5, +.c7 + div, +.c7 + span { + margin-top: 1.5rem; +} + +.c4 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +
+
+
+ + + +
+

+ Instance name +

+
+
+
+
+
+

+ test +

+
+ + +`; + +exports[`renders without throwing 1`] = ` +.c1 { + margin-right: 0.25rem; +} + +.c3 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +.c6 { + margin-top: 1rem; + margin-bottom: 0.5rem; +} + +.c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c10 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c10::-moz-focus-inner, +.c10[type='button']::-moz-focus-inner, +.c10[type='reset']::-moz-focus-inner, +.c10[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c10:-moz-focusring, +.c10[type='button']:-moz-focusring, +.c10[type='reset']:-moz-focusring, +.c10[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c10 + button { + margin-left: 0.375rem; +} + +.c9 { + display: inline-block; +} + +.c8 { + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c8:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c8:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c8:active, +.c8:active:hover, +.c8:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c8[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c8:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c8:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c8:active, +.c8:active:hover, +.c8:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c5 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c7 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c7 + p, +.c7 + small, +.c7 + h1, +.c7 + h2, +.c7 + label, +.c7 + h3, +.c7 + h4, +.c7 + h5, +.c7 + div, +.c7 + span { + margin-top: 1.5rem; +} + +.c4 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +
+
+
+ + + +
+

+ Instance name +

+
+
+
+
+
+

+

+ + +`; diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap new file mode 100644 index 00000000..8d6c5be4 --- /dev/null +++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap @@ -0,0 +1,433 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +Array [ + .c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +.c1 { + margin-right: 0.25rem; +} + +
+
+

+

, + .c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +
+
+
, +] +`; + +exports[`renders without throwing 1`] = ` +Array [ + .c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +.c1 { + margin-right: 0.25rem; +} + +
+
+ + + +
+

+

, + .c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +
+
+
, +] +`; + +exports[`renders without throwing 1`] = ` +Array [ + .c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +.c1 { + margin-right: 0.25rem; +} + +
+
+ + + +
+

+ Instance name +

+
, + .c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +
+
+
, +] +`; + +exports[`renders without throwing 1`] = ` +Array [ + .c2 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c2 + p, +.c2 + small, +.c2 + h1, +.c2 + h2, +.c2 + label, +.c2 + h3, +.c2 + h4, +.c2 + h5, +.c2 + div, +.c2 + span { + padding-bottom: 2.25rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; +} + +.c1 { + margin-right: 0.25rem; +} + +
+
+

+ Test +

+
, + .c2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + +.c0 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + +
+
+
, +] +`; diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/name.spec.js b/packages/my-joy-beta/src/components/create-instance/__tests__/name.spec.js new file mode 100644 index 00000000..0e0b4aea --- /dev/null +++ b/packages/my-joy-beta/src/components/create-instance/__tests__/name.spec.js @@ -0,0 +1,54 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import 'jest-styled-components'; + +import Name from '../name'; +import Theme from '@mocks/theme'; + +it('renders without throwing', () => { + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders without throwing', () => { + expect( + renderer + .create( + + + + ) + .toJSON() + ).toMatchSnapshot(); +}); diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/title.spec.js b/packages/my-joy-beta/src/components/create-instance/__tests__/title.spec.js new file mode 100644 index 00000000..994d4258 --- /dev/null +++ b/packages/my-joy-beta/src/components/create-instance/__tests__/title.spec.js @@ -0,0 +1,56 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import 'jest-styled-components'; + +import { NameIcon } from 'joyent-ui-toolkit'; + +import Title from '../title'; +import Theme from '@mocks/theme'; + +it('renders without throwing', () => { + expect( + renderer + .create( + + + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Toolbar label="Test"/> without throwing', () => { + expect( + renderer + .create( + <Theme> + <Title label="Test" /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Toolbar icon="NameIcon"/> without throwing', () => { + expect( + renderer + .create( + <Theme> + <Title icon={<NameIcon />} /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); + +it('renders <Toolbar icon="Test" label="Instance name"/> without throwing', () => { + expect( + renderer + .create( + <Theme> + <Title icon={<NameIcon />} label="Instance name" /> + </Theme> + ) + .toJSON() + ).toMatchSnapshot(); +}); diff --git a/packages/my-joy-beta/src/components/create-instance/name.js b/packages/my-joy-beta/src/components/create-instance/name.js new file mode 100644 index 00000000..d4fd58c2 --- /dev/null +++ b/packages/my-joy-beta/src/components/create-instance/name.js @@ -0,0 +1,48 @@ +import React, { Fragment } from 'react'; +import { Field } from 'redux-form'; +import { Margin } from 'styled-components-spacing'; + +import { + NameIcon, + H3, + P, + FormGroup, + FormLabel, + Input, + FormMeta, + Button +} from 'joyent-ui-toolkit'; + +import Title from './title'; + +export default ({ handleSubmit, pristine, expanded, name, onCancel }) => ( + <form onSubmit={handleSubmit}> + <Title icon={<NameIcon />} label="Instance name" /> + {expanded ? ( + <Fragment> + <Margin bottom={3}> + <P> + Your instance name will be used to identify this specific instance. + </P> + </Margin> + <FormGroup name="name" fluid field={Field}> + <FormLabel>Name</FormLabel> + <Input /> + <FormMeta /> + </FormGroup> + <Button type="submit" disabled={pristine}> + Next + </Button> + </Fragment> + ) : ( + <Fragment> + <Margin bottom={2} top={3}> + <H3>{name}</H3> + </Margin> + <Button type="button" secondary onClick={onCancel}> + Edit + </Button> + </Fragment> + )} + </form> +); diff --git a/packages/my-joy-beta/src/components/create-instance/title.js b/packages/my-joy-beta/src/components/create-instance/title.js new file mode 100644 index 00000000..e5ffda64 --- /dev/null +++ b/packages/my-joy-beta/src/components/create-instance/title.js @@ -0,0 +1,18 @@ +import React, { Fragment } from 'react'; +import Flex from 'styled-flex-component'; +import { Margin } from 'styled-components-spacing'; +import remcalc from 'remcalc'; + +import { Divider, P } from 'joyent-ui-toolkit'; + +export default ({ icon, label }) => ( + <Fragment> + <Flex> + <Margin right={1}>{icon}</Margin> + <P>{label}</P> + </Flex> + <Margin top={1} bottom={3}> + <Divider height={remcalc(1)} /> + </Margin> + </Fragment> +); diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap index 7fc020c8..be968aa6 100644 --- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap +++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap @@ -1268,7 +1268,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = ` name="td" selected={undefined} > - 28 days + about 1 month </td> <td className="c12" @@ -1276,7 +1276,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = ` name="td" selected={undefined} > - 28 days + about 1 month </td> <td className="c13 c14" diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap index 6e04006c..f52f1179 100644 --- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap +++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap @@ -716,6 +716,7 @@ exports[`renders <Summary /> without throwing 1`] = ` .c6 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.875rem; font-size: 1.5rem; margin: 0; @@ -2877,6 +2878,7 @@ exports[`renders <Summary instance /> without throwing 1`] = ` .c6 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.875rem; font-size: 1.5rem; margin: 0; @@ -5208,6 +5210,7 @@ exports[`renders <Summary instance /> without throwing 2`] = ` .c6 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.875rem; font-size: 1.5rem; margin: 0; @@ -7426,6 +7429,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi .c6 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.875rem; font-size: 1.5rem; margin: 0; @@ -9479,6 +9483,7 @@ exports[`renders <Summary state /> without throwing 1`] = ` .c6 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.875rem; font-size: 1.5rem; margin: 0; @@ -11641,6 +11646,7 @@ exports[`renders <Summary state /> without throwing 2`] = ` .c6 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.875rem; font-size: 1.5rem; margin: 0; @@ -13637,6 +13643,7 @@ exports[`renders <Summary state /> without throwing 3`] = ` .c6 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.875rem; font-size: 1.5rem; margin: 0; diff --git a/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap b/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap index 2f09965c..8981d8ac 100644 --- a/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap +++ b/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap @@ -104,6 +104,7 @@ exports[`renders <Header /> without throwing 1`] = ` .c3 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.875rem; font-size: 1.5rem; margin: 0; diff --git a/packages/my-joy-beta/src/containers/create-instance/index.js b/packages/my-joy-beta/src/containers/create-instance/index.js new file mode 100644 index 00000000..8807315f --- /dev/null +++ b/packages/my-joy-beta/src/containers/create-instance/index.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { Margin } from 'styled-components-spacing'; + +import { ViewContainer, H2 } from 'joyent-ui-toolkit'; + +import Name from '@containers/create-instance/name'; + +export default ({ step }) => ( + <ViewContainer> + <Margin top={4} bottom={4}> + <H2>Create Instances</H2> + </Margin> + <Name expanded={step === 'name'} /> + </ViewContainer> +); diff --git a/packages/my-joy-beta/src/containers/create-instance/name.js b/packages/my-joy-beta/src/containers/create-instance/name.js new file mode 100644 index 00000000..4c6afaa3 --- /dev/null +++ b/packages/my-joy-beta/src/containers/create-instance/name.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { withRouter } from 'react-router'; +import { compose } from 'react-apollo'; +import ReduxForm from 'declarative-redux-form'; +import { connect } from 'react-redux'; +import get from 'lodash.get'; + +import Name from '@components/create-instance/name'; + +const NameContainer = ({ expanded, name, handleSubmit, handleCancel }) => ( + <ReduxForm + form="create-instance-name" + destroyOnUnmount={false} + forceUnregisterOnUnmount={true} + onSubmit={handleSubmit} + > + {props => ( + <Name + {...props} + name={name} + expanded={expanded} + onCancel={handleCancel} + /> + )} + </ReduxForm> +); + +export default compose( + withRouter, + connect( + (state, ownProps) => ({ + ...ownProps, + name: get(state, 'form.create-instance-name.values.name') + }), + (dispatch, { history }) => ({ + handleSubmit: () => history.push(`/instances/~create/image`), + handleCancel: () => history.push(`/instances/~create/name`) + }) + ) +)(NameContainer); diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap index 0dec2232..b26ea55b 100644 --- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap +++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap @@ -75,11 +75,6 @@ exports[`renders <List /> without throwing 1`] = ` background-color: rgb(59,70,204); border-radius: 0.25rem; border: solid 0.0625rem rgb(45,56,132); - cursor: not-allowed; - pointer-events: none; - color: rgb(216,216,216); - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -118,23 +113,6 @@ exports[`renders <List /> without throwing 1`] = ` pointer-events: none; } -.c10:focus { - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); -} - -.c10:hover { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - -.c10:active, -.c10:active:hover, -.c10:active:focus { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - .c10 svg + span { margin-left: 0.75rem; } @@ -841,11 +819,11 @@ exports[`renders <List /> without throwing 1`] = ` </label> <button className="c10 c11 c12" - disabled={true} + disabled={false} href="" icon={true} - onClick={undefined} - type="submit" + onClick={[Function]} + type="button" > Create Instance </button> @@ -1088,11 +1066,6 @@ exports[`renders <List error /> without throwing 1`] = ` background-color: rgb(59,70,204); border-radius: 0.25rem; border: solid 0.0625rem rgb(45,56,132); - cursor: not-allowed; - pointer-events: none; - color: rgb(216,216,216); - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -1131,23 +1104,6 @@ exports[`renders <List error /> without throwing 1`] = ` pointer-events: none; } -.c10:focus { - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); -} - -.c10:hover { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - -.c10:active, -.c10:active:hover, -.c10:active:focus { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - .c10 svg + span { margin-left: 0.75rem; } @@ -1906,11 +1862,11 @@ exports[`renders <List error /> without throwing 1`] = ` </label> <button className="c10 c11 c12" - disabled={true} + disabled={false} href="" icon={true} - onClick={undefined} - type="submit" + onClick={[Function]} + type="button" > Create Instance </button> @@ -2187,11 +2143,6 @@ exports[`renders <List instances /> without throwing 1`] = ` background-color: rgb(59,70,204); border-radius: 0.25rem; border: solid 0.0625rem rgb(45,56,132); - cursor: not-allowed; - pointer-events: none; - color: rgb(216,216,216); - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -2230,23 +2181,6 @@ exports[`renders <List instances /> without throwing 1`] = ` pointer-events: none; } -.c10:focus { - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); -} - -.c10:hover { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - -.c10:active, -.c10:active:hover, -.c10:active:focus { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - .c10 svg + span { margin-left: 0.75rem; } @@ -3112,11 +3046,11 @@ exports[`renders <List instances /> without throwing 1`] = ` </label> <button className="c10 c11 c12" - disabled={true} + disabled={false} href="" icon={true} - onClick={undefined} - type="submit" + onClick={[Function]} + type="button" > Create Instance </button> @@ -3652,11 +3586,6 @@ exports[`renders <List instances selected /> without throwing 1`] = ` background-color: rgb(59,70,204); border-radius: 0.25rem; border: solid 0.0625rem rgb(45,56,132); - cursor: not-allowed; - pointer-events: none; - color: rgb(216,216,216); - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -3695,23 +3624,6 @@ exports[`renders <List instances selected /> without throwing 1`] = ` pointer-events: none; } -.c10:focus { - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); -} - -.c10:hover { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - -.c10:active, -.c10:active:hover, -.c10:active:focus { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - .c10 svg + span { margin-left: 0.75rem; } @@ -5287,11 +5199,11 @@ exports[`renders <List instances selected /> without throwing 1`] = ` </label> <button className="c10 c11 c12" - disabled={true} + disabled={false} href="" icon={true} - onClick={undefined} - type="submit" + onClick={[Function]} + type="button" > Create Instance </button> @@ -6307,11 +6219,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = ` background-color: rgb(59,70,204); border-radius: 0.25rem; border: solid 0.0625rem rgb(45,56,132); - cursor: not-allowed; - pointer-events: none; - color: rgb(216,216,216); - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -6350,23 +6257,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = ` pointer-events: none; } -.c10:focus { - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); -} - -.c10:hover { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - -.c10:active, -.c10:active:hover, -.c10:active:focus { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - .c10 svg + span { margin-left: 0.75rem; } @@ -7942,11 +7832,11 @@ exports[`renders <List instances selected=all /> without throwing 1`] = ` </label> <button className="c10 c11 c12" - disabled={true} + disabled={false} href="" icon={true} - onClick={undefined} - type="submit" + onClick={[Function]} + type="button" > Create Instance </button> @@ -8962,11 +8852,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing background-color: rgb(59,70,204); border-radius: 0.25rem; border: solid 0.0625rem rgb(45,56,132); - cursor: not-allowed; - pointer-events: none; - color: rgb(216,216,216); - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -9005,23 +8890,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing pointer-events: none; } -.c10:focus { - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); -} - -.c10:hover { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - -.c10:active, -.c10:active:hover, -.c10:active:focus { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - .c10 svg + span { margin-left: 0.75rem; } @@ -10806,11 +10674,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing </label> <button className="c10 c11 c12" - disabled={true} + disabled={false} href="" icon={true} - onClick={undefined} - type="submit" + onClick={[Function]} + type="button" > Create Instance </button> @@ -12278,8 +12146,8 @@ exports[`renders <List loading /> without throwing 1`] = ` disabled={true} href="" icon={true} - onClick={undefined} - type="submit" + onClick={[Function]} + type="button" > Create Instance </button> diff --git 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 index ce182d13..27c759e8 100644 --- 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 @@ -173,6 +173,7 @@ exports[`renders <Metadata /> without throwing 1`] = ` .c16 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.625rem; font-size: 1.3125rem; margin: 0; @@ -1009,6 +1010,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = ` .c34 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.625rem; font-size: 1.3125rem; margin: 0; @@ -2099,6 +2101,7 @@ exports[`renders <Metadata error /> without throwing 1`] = ` .c22 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.625rem; font-size: 1.3125rem; margin: 0; @@ -3824,6 +3827,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = ` .c16 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.625rem; font-size: 1.3125rem; margin: 0; diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap index 922a0fb5..d2eadc6a 100644 --- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap +++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap @@ -1442,6 +1442,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi .c7 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.875rem; font-size: 1.5rem; margin: 0; @@ -3811,6 +3812,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi .c7 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.875rem; font-size: 1.5rem; margin: 0; diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap index 674603a5..ca15e110 100644 --- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap +++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap @@ -173,6 +173,7 @@ exports[`renders <Tags /> without throwing 1`] = ` .c16 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.625rem; font-size: 1.3125rem; margin: 0; @@ -1025,6 +1026,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = ` .c34 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.625rem; font-size: 1.3125rem; margin: 0; @@ -2085,6 +2087,7 @@ exports[`renders <Tags editable /> without throwing 1`] = ` .c16 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.625rem; font-size: 1.3125rem; margin: 0; @@ -2958,6 +2961,7 @@ exports[`renders <Tags editing /> without throwing 1`] = ` .c34 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.625rem; font-size: 1.3125rem; margin: 0; @@ -4458,6 +4462,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = ` .c38 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.625rem; font-size: 1.3125rem; margin: 0; @@ -5511,6 +5516,7 @@ exports[`renders <Tags error /> without throwing 1`] = ` .c16 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.625rem; font-size: 1.3125rem; margin: 0; @@ -6611,6 +6617,7 @@ exports[`renders <Tags tags /> without throwing 1`] = ` .c16 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.625rem; font-size: 1.3125rem; margin: 0; diff --git a/packages/my-joy-beta/src/containers/instances/list.js b/packages/my-joy-beta/src/containers/instances/list.js index e618d5a2..1bf922da 100644 --- a/packages/my-joy-beta/src/containers/instances/list.js +++ b/packages/my-joy-beta/src/containers/instances/list.js @@ -52,7 +52,8 @@ export const List = ({ submitting, handleAction, toggleSelectAll, - handleSortBy + handleSortBy, + history }) => { const _instances = forceArray(instances); @@ -137,7 +138,7 @@ export const List = ({ searchPlaceholder="Search for name, state, tags, etc..." searchable={!_loading} actionLabel="Create Instance" - actionable={false} + onActionClick={() => history.push(`/instances/~create`)} /> )} </ReduxForm> diff --git a/packages/my-joy-beta/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap b/packages/my-joy-beta/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap index bce48165..da80158a 100644 --- a/packages/my-joy-beta/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap +++ b/packages/my-joy-beta/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap @@ -39,6 +39,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = ` .c5 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.875rem; font-size: 1.5rem; margin: 0; @@ -208,6 +209,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = ` .c5 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.875rem; font-size: 1.5rem; margin: 0; diff --git a/packages/my-joy-beta/src/router.js b/packages/my-joy-beta/src/router.js index 5cea610b..d4bd8638 100644 --- a/packages/my-joy-beta/src/router.js +++ b/packages/my-joy-beta/src/router.js @@ -19,6 +19,8 @@ import { Resize as InstanceResize } from '@containers/instances'; +import CreateInstance from '@containers/create-instance'; + export default () => ( <BrowserRouter> <PageContainer> @@ -93,6 +95,63 @@ export default () => ( {/* Actions */} <Switch> + {/* Create Instance */} + <Route + path="/instances/~create/" + exact + component={({ match }) => <Redirect to="/instances/~create/name" />} + /> + <Route + path="/instances/~create/name" + exact + component={() => <CreateInstance step="name" />} + /> + <Route + path="/instances/~create/image" + exact + component={() => <CreateInstance step="image" />} + /> + <Route + path="/instances/~create/package" + exact + component={() => <CreateInstance step="package" />} + /> + <Route + path="/instances/~create/tags" + exact + component={() => <CreateInstance step="tags" />} + /> + <Route + path="/instances/~create/metadata" + exact + component={() => <CreateInstance step="metadata" />} + /> + <Route + path="/instances/~create/networks" + exact + component={() => <CreateInstance step="networks" />} + /> + <Route + path="/instances/~create/firewall" + exact + component={() => <CreateInstance step="firewall" />} + /> + <Route + path="/instances/~create/cns" + exact + component={() => <CreateInstance step="cns" />} + /> + <Route + path="/instances/~create/affinity" + exact + component={() => <CreateInstance step="affinity" />} + /> + <Route + path="/instances/~create/summary" + exact + component={() => <CreateInstance step="summary" />} + /> + <Route path="/instances/~resize/:instance" exact diff --git a/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap index 28ea9591..a3a70435 100644 --- a/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap @@ -3,6 +3,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = ` .c5 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.875rem; font-size: 1.5rem; margin: 0; @@ -259,6 +260,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = ` exports[`Breadcrumb Default Item 1`] = ` .c1 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.875rem; font-size: 1.5rem; margin: 0; diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js index 8f26c800..5267f71f 100644 --- a/packages/ui-toolkit/src/index.js +++ b/packages/ui-toolkit/src/index.js @@ -102,7 +102,8 @@ export { Stop as StopIcon, Tags as TagsIcon, Triton as TritonIcon, - User as UserIcon + User as UserIcon, + Name as NameIcon } from './icons'; export { diff --git a/packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap b/packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap index 90443f60..5e7202ae 100644 --- a/packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap +++ b/packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap @@ -8,7 +8,7 @@ exports[`Button H1 1`] = ` font-size: 2.25rem; line-height: 2.8125rem; font-style: normal; - font-stretch: normal; + font-weight: normal; margin: 0; } @@ -35,6 +35,7 @@ exports[`Button H1 1`] = ` exports[`Button H2 1`] = ` .c0 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.875rem; font-size: 1.5rem; margin: 0; @@ -63,6 +64,7 @@ exports[`Button H2 1`] = ` exports[`Button H3 1`] = ` .c0 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.625rem; font-size: 1.3125rem; margin: 0; @@ -120,6 +122,7 @@ exports[`Button H4 1`] = ` exports[`Button H5 1`] = ` .c0 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.5rem; font-size: 0.9375rem; margin: 0; @@ -148,6 +151,7 @@ exports[`Button H5 1`] = ` exports[`Button H6 1`] = ` .c0 { color: rgba(73,73,73,1); + font-weight: normal; line-height: 1.125rem; font-size: 0.8125rem; margin: 0; diff --git a/packages/ui-toolkit/src/text/headings.js b/packages/ui-toolkit/src/text/headings.js index 03c2ff4f..50dce6b5 100644 --- a/packages/ui-toolkit/src/text/headings.js +++ b/packages/ui-toolkit/src/text/headings.js @@ -9,7 +9,7 @@ export const H1 = NH1.extend` font-size: ${remcalc(36)}; line-height: ${remcalc(45)}; font-style: normal; - font-stretch: normal; + font-weight: normal; margin: 0; ${is('inline')` @@ -37,7 +37,7 @@ export const H1 = NH1.extend` export const H2 = styled.h2` color: ${props => props.theme.text}; - + font-weight: normal; line-height: ${remcalc(30)}; font-size: ${remcalc(24)}; margin: 0; @@ -67,7 +67,7 @@ export const H2 = styled.h2` export const H3 = styled.h3` color: ${props => props.theme.text}; - + font-weight: normal; line-height: ${remcalc(26)}; font-size: ${remcalc(21)}; margin: 0; @@ -128,7 +128,7 @@ export const H4 = styled.h4` export const H5 = styled.h4` color: ${props => props.theme.text}; - + font-weight: normal; line-height: ${remcalc(24)}; font-size: ${remcalc(15)}; margin: 0; @@ -158,7 +158,7 @@ export const H5 = styled.h4` export const H6 = styled.h6` color: ${props => props.theme.text}; - + font-weight: normal; line-height: ${remcalc(18)}; font-size: ${remcalc(13)}; margin: 0;