diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json index c620540d..2dcb5c32 100644 --- a/packages/my-joy-beta/package.json +++ b/packages/my-joy-beta/package.json @@ -41,7 +41,7 @@ "react-apollo": "^2.0.4", "react-dom": "^16.2.0", "react-redux": "^5.0.6", - "react-redux-values": "^1.0.2", + "react-redux-values": "^1.1.2", "react-router": "^4.2.0", "react-router-dom": "^4.2.2", "redux": "^3.7.2", diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap index ca285807..d73a312b 100644 --- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap +++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap @@ -1,31 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders without throwing 1`] = ` -
-`; - -exports[`renders without throwing 1`] = ` - -`; - -exports[`renders without throwing 1`] = ` -.c2 { - margin-bottom: 1rem; -} - -.c4 { +.c0 { margin-bottom: 2rem; } -.c11 { +.c8 { margin-top: 2rem; } -.c6 { +.c2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -49,7 +33,7 @@ exports[`renders without throwing 1`] = ` align-items: center; } -.c0 { +.c7 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -68,16 +52,7 @@ exports[`renders without throwing 1`] = ` margin-left: -0.5rem; } -.c1 { - box-sizing: border-box; - -webkit-flex: 0 0 auto; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; -} - -.c14 { +.c11 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -90,50 +65,30 @@ exports[`renders without throwing 1`] = ` min-width: 7.5rem; } -.c14::-moz-focus-inner, -.c14[type='button']::-moz-focus-inner, -.c14[type='reset']::-moz-focus-inner, -.c14[type='submit']::-moz-focus-inner { +.c11::-moz-focus-inner, +.c11[type='button']::-moz-focus-inner, +.c11[type='reset']::-moz-focus-inner, +.c11[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 { +.c11:-moz-focusring, +.c11[type='button']:-moz-focusring, +.c11[type='reset']:-moz-focusring, +.c11[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c14 + button { +.c11 + button { margin-left: 0.375rem; } -.c3 { - color: rgba(73,73,73,1); - line-height: 1.5rem; - font-size: 0.9375rem; - margin: 0; -} - -.c3 + p, -.c3 + small, -.c3 + h1, -.c3 + h2, -.c3 + label, -.c3 + h3, -.c3 + h4, -.c3 + h5, -.c3 + div, -.c3 + span { - padding-bottom: 2.25rem; -} - -.c13 { +.c10 { display: inline-block; } -.c12 { +.c9 { box-sizing: border-box; display: inline-block; -webkit-box-pack: center; @@ -178,50 +133,50 @@ exports[`renders without throwing 1`] = ` border-color: rgb(216,216,216); } -.c12:focus { +.c9:focus { outline: 0; text-decoration: none; background-color: rgb(59,70,204); border-color: rgb(45,56,132); } -.c12:hover { +.c9:hover { background-color: rgb(72,83,217); border: solid 0.0625rem rgb(45,56,132); } -.c12:active, -.c12:active:hover, -.c12:active:focus { +.c9:active, +.c9:active:hover, +.c9:active:focus { background-image: none; outline: 0; background-color: rgb(45,56,132); border-color: rgb(45,56,132); } -.c12[disabled] { +.c9[disabled] { cursor: not-allowed; pointer-events: none; } -.c12:focus { +.c9:focus { background-color: rgb(250,250,250); border-color: rgb(216,216,216); } -.c12:hover { +.c9:hover { background-color: rgb(250,250,250); border-color: rgb(250,250,250); } -.c12:active, -.c12:active:hover, -.c12:active:focus { +.c9:active, +.c9:active:hover, +.c9:active:focus { background-color: rgb(250,250,250); border-color: rgb(250,250,250); } -.c7 { +.c3 { font-size: 0.9375rem; font-style: normal; font-stretch: normal; @@ -234,7 +189,7 @@ exports[`renders without throwing 1`] = ` font-size: 0.8125rem; } -.c5 { +.c1 { display: inline-block; margin: 0; padding: 0; @@ -249,7 +204,7 @@ exports[`renders without throwing 1`] = ` -webkit-padding-after: 0; } -.c8 { +.c4 { position: relative; vertical-align: text-bottom; display: -webkit-box; @@ -262,27 +217,27 @@ exports[`renders without throwing 1`] = ` align-items: center; } -.c9 { +.c5 { display: none; } -.c9:checked + label { +.c5:checked + label { background: #3B46CC; border: 0.0625rem solid rgb(59,70,204); } -.c9:checked + label:after { +.c5:checked + label:after { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); box-shadow: 0 0 0 0.0625rem rgb(59,70,204); } -.c9:checked + label:active { +.c5:checked + label:active { box-shadow: none; } -.c10 { +.c6 { outline: 0; display: block; width: 2.875rem; @@ -302,24 +257,24 @@ exports[`renders without throwing 1`] = ` margin-right: 0.375rem; } -.c10::selection { +.c6::selection { background: none; } -.c10:active { +.c6:active { box-shadow: inset 0 0 0 1.5rem rgb(216,216,216); } -.c10:hover { +.c6:hover { border: 0.0625rem solid rgb(59,70,204); } -.c10:hover:after { +.c6:hover:after { box-shadow: 0 0 0 0.0625rem rgb(59,70,204); } -.c10:after, -.c10:before { +.c6:after, +.c6:before { position: relative; display: block; content: ''; @@ -327,7 +282,7 @@ exports[`renders without throwing 1`] = ` height: 100%; } -.c10:after { +.c6:after { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); @@ -339,34 +294,14 @@ exports[`renders without throwing 1`] = ` box-shadow: 0 0 0 0.0625rem rgb(216,216,216); } -.c10:active { +.c6:active { box-shadow: inset 0 0 0 2em rgb(216,216,216); } -.c10:before { +.c6:before { display: none; } -@media only screen and (min-width:0em) { - .c1 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; - display: block; - } -} - -@media only screen and (min-width:48em) { - .c1 { - -webkit-flex-basis: 66.66666666666667%; - -ms-flex-preferred-size: 66.66666666666667%; - flex-basis: 66.66666666666667%; - max-width: 66.66666666666667%; - display: block; - } -} - @@ -374,63 +309,38 @@ exports[`renders without throwing 1`] = ` className="c0" >
-
-

- Hardware virtual machines are generally used for non-containerized applications. Infrastructure containers are generally for running any Linux image on secure, bare metal containers. - - - Read the docs - -

-
-
- -
-
+
+ +`; + +exports[`renders without throwing 1`] = ` +.c0 { + margin-bottom: 2rem; +} + +.c8 { + margin-top: 2rem; +} + +.c2 { + 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; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c7 { + 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; +} + +.c11 { + 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; +} + +.c11::-moz-focus-inner, +.c11[type='button']::-moz-focus-inner, +.c11[type='reset']::-moz-focus-inner, +.c11[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c11:-moz-focusring, +.c11[type='button']:-moz-focusring, +.c11[type='reset']:-moz-focusring, +.c11[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c11 + button { + margin-left: 0.375rem; +} + +.c10 { + display: inline-block; +} + +.c9 { + 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); + cursor: not-allowed; + pointer-events: none; + color: rgb(216,216,216); + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c9:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c9:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c9:active, +.c9:active:hover, +.c9:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c9[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c9:focus { + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c9:hover { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c9:active, +.c9:active:hover, +.c9:active:focus { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c3 { + 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; +} + +.c1 { + 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; +} + +.c4 { + position: relative; + vertical-align: text-bottom; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c5 { + display: none; +} + +.c5:checked + label { + background: #3B46CC; + border: 0.0625rem solid rgb(59,70,204); +} + +.c5:checked + label:after { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c5:checked + label:active { + box-shadow: none; +} + +.c6 { + outline: 0; + display: block; + width: 2.875rem; + height: 1.5rem; + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: border-box; + background: rgb(250,250,250); + border-radius: 1.4375rem; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + border: 0.0625rem solid rgb(216,216,216); + margin-right: 0.375rem; +} + +.c6::selection { + background: none; +} + +.c6:active { + box-shadow: inset 0 0 0 1.5rem rgb(216,216,216); +} + +.c6:hover { + border: 0.0625rem solid rgb(59,70,204); +} + +.c6:hover:after { + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c6:after, +.c6:before { + position: relative; + display: block; + content: ''; + width: 50%; + height: 100%; +} + +.c6:after { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + border-radius: 50%; + background: rgb(255,255,255); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + box-shadow: 0 0 0 0.0625rem rgb(216,216,216); +} + +.c6:active { + box-shadow: inset 0 0 0 2em rgb(216,216,216); +} + +.c6:before { + display: none; +} + +
+
+
+
+ +
+ +
+
+
+
+
+
+ +
+ +`; + +exports[`renders without throwing 1`] = ` +.c0 { + margin-bottom: 2rem; +} + +.c8 { + margin-top: 2rem; +} + +.c2 { + 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; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c7 { + 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; +} + +.c11 { + 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; +} + +.c11::-moz-focus-inner, +.c11[type='button']::-moz-focus-inner, +.c11[type='reset']::-moz-focus-inner, +.c11[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c11:-moz-focusring, +.c11[type='button']:-moz-focusring, +.c11[type='reset']:-moz-focusring, +.c11[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c11 + button { + margin-left: 0.375rem; +} + +.c10 { + display: inline-block; +} + +.c9 { + 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); + cursor: not-allowed; + pointer-events: none; + color: rgb(216,216,216); + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c9:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c9:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c9:active, +.c9:active:hover, +.c9:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c9[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c9:focus { + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c9:hover { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c9:active, +.c9:active:hover, +.c9:active:focus { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c3 { + 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; +} + +.c1 { + 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; +} + +.c4 { + position: relative; + vertical-align: text-bottom; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c5 { + display: none; +} + +.c5:checked + label { + background: #3B46CC; + border: 0.0625rem solid rgb(59,70,204); +} + +.c5:checked + label:after { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c5:checked + label:active { + box-shadow: none; +} + +.c6 { + outline: 0; + display: block; + width: 2.875rem; + height: 1.5rem; + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: border-box; + background: rgb(250,250,250); + border-radius: 1.4375rem; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + border: 0.0625rem solid rgb(216,216,216); + margin-right: 0.375rem; +} + +.c6::selection { + background: none; +} + +.c6:active { + box-shadow: inset 0 0 0 1.5rem rgb(216,216,216); +} + +.c6:hover { + border: 0.0625rem solid rgb(59,70,204); +} + +.c6:hover:after { + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c6:after, +.c6:before { + position: relative; + display: block; + content: ''; + width: 50%; + height: 100%; +} + +.c6:after { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + border-radius: 50%; + background: rgb(255,255,255); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + box-shadow: 0 0 0 0.0625rem rgb(216,216,216); +} + +.c6:active { + box-shadow: inset 0 0 0 2em rgb(216,216,216); +} + +.c6:before { + display: none; +} + +
+
+
+
+ +
+ +
+
+
+
+
+
+ +
+ `; exports[`renders without throwing 1`] = ` +.c0 { + margin-bottom: 2rem; +} + +.c8 { + margin-top: 2rem; +} + +.c2 { + 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; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c7 { + 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; +} + +.c11 { + 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; +} + +.c11::-moz-focus-inner, +.c11[type='button']::-moz-focus-inner, +.c11[type='reset']::-moz-focus-inner, +.c11[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c11:-moz-focusring, +.c11[type='button']:-moz-focusring, +.c11[type='reset']:-moz-focusring, +.c11[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c11 + button { + margin-left: 0.375rem; +} + +.c10 { + display: inline-block; +} + +.c9 { + 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); + cursor: not-allowed; + pointer-events: none; + color: rgb(216,216,216); + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c9:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c9:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c9:active, +.c9:active:hover, +.c9:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c9[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c9:focus { + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c9:hover { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c9:active, +.c9:active:hover, +.c9:active:focus { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c3 { + 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; +} + +.c1 { + 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; +} + +.c4 { + position: relative; + vertical-align: text-bottom; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c5 { + display: none; +} + +.c5:checked + label { + background: #3B46CC; + border: 0.0625rem solid rgb(59,70,204); +} + +.c5:checked + label:after { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c5:checked + label:active { + box-shadow: none; +} + +.c6 { + outline: 0; + display: block; + width: 2.875rem; + height: 1.5rem; + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: border-box; + background: rgb(250,250,250); + border-radius: 1.4375rem; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + border: 0.0625rem solid rgb(216,216,216); + margin-right: 0.375rem; +} + +.c6::selection { + background: none; +} + +.c6:active { + box-shadow: inset 0 0 0 1.5rem rgb(216,216,216); +} + +.c6:hover { + border: 0.0625rem solid rgb(59,70,204); +} + +.c6:hover:after { + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c6:after, +.c6:before { + position: relative; + display: block; + content: ''; + width: 50%; + height: 100%; +} + +.c6:after { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + border-radius: 50%; + background: rgb(255,255,255); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + box-shadow: 0 0 0 0.0625rem rgb(216,216,216); +} + +.c6:active { + box-shadow: inset 0 0 0 2em rgb(216,216,216); +} + +.c6:before { + display: none; +} +
+> +
+
+
+ +
+ +
+
+
+
+
+
+ +
+ `; exports[`renders without throwing 1`] = ` +.c0 { + margin-bottom: 2rem; +} + +.c8 { + margin-top: 2rem; +} + +.c2 { + 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; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c7 { + 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; +} + +.c11 { + 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; +} + +.c11::-moz-focus-inner, +.c11[type='button']::-moz-focus-inner, +.c11[type='reset']::-moz-focus-inner, +.c11[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c11:-moz-focusring, +.c11[type='button']:-moz-focusring, +.c11[type='reset']:-moz-focusring, +.c11[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c11 + button { + margin-left: 0.375rem; +} + +.c10 { + display: inline-block; +} + +.c9 { + 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); + cursor: not-allowed; + pointer-events: none; + color: rgb(216,216,216); + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c9:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c9:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c9:active, +.c9:active:hover, +.c9:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c9[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c9:focus { + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c9:hover { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c9:active, +.c9:active:hover, +.c9:active:focus { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c3 { + 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; +} + +.c1 { + 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; +} + +.c4 { + position: relative; + vertical-align: text-bottom; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c5 { + display: none; +} + +.c5:checked + label { + background: #3B46CC; + border: 0.0625rem solid rgb(59,70,204); +} + +.c5:checked + label:after { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c5:checked + label:active { + box-shadow: none; +} + +.c6 { + outline: 0; + display: block; + width: 2.875rem; + height: 1.5rem; + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: border-box; + background: rgb(250,250,250); + border-radius: 1.4375rem; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + border: 0.0625rem solid rgb(216,216,216); + margin-right: 0.375rem; +} + +.c6::selection { + background: none; +} + +.c6:active { + box-shadow: inset 0 0 0 1.5rem rgb(216,216,216); +} + +.c6:hover { + border: 0.0625rem solid rgb(59,70,204); +} + +.c6:hover:after { + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c6:after, +.c6:before { + position: relative; + display: block; + content: ''; + width: 50%; + height: 100%; +} + +.c6:after { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + border-radius: 50%; + background: rgb(255,255,255); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + box-shadow: 0 0 0 0.0625rem rgb(216,216,216); +} + +.c6:active { + box-shadow: inset 0 0 0 2em rgb(216,216,216); +} + +.c6:before { + display: none; +} +
+> +
+
+
+ +
+ +
+
+
+
+
+
+ +
+ `; exports[`renders without throwing 1`] = ` +.c0 { + margin-bottom: 2rem; +} + +.c8 { + margin-top: 2rem; +} + +.c2 { + 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; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c7 { + 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; +} + +.c11 { + 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; +} + +.c11::-moz-focus-inner, +.c11[type='button']::-moz-focus-inner, +.c11[type='reset']::-moz-focus-inner, +.c11[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c11:-moz-focusring, +.c11[type='button']:-moz-focusring, +.c11[type='reset']:-moz-focusring, +.c11[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c11 + button { + margin-left: 0.375rem; +} + +.c10 { + display: inline-block; +} + +.c9 { + 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); + cursor: not-allowed; + pointer-events: none; + color: rgb(216,216,216); + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c9:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c9:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c9:active, +.c9:active:hover, +.c9:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c9[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c9:focus { + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c9:hover { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c9:active, +.c9:active:hover, +.c9:active:focus { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c3 { + 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; +} + +.c1 { + 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; +} + +.c4 { + position: relative; + vertical-align: text-bottom; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c5 { + display: none; +} + +.c5:checked + label { + background: #3B46CC; + border: 0.0625rem solid rgb(59,70,204); +} + +.c5:checked + label:after { + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c5:checked + label:active { + box-shadow: none; +} + +.c6 { + outline: 0; + display: block; + width: 2.875rem; + height: 1.5rem; + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-sizing: border-box; + background: rgb(250,250,250); + border-radius: 1.4375rem; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + border: 0.0625rem solid rgb(216,216,216); + margin-right: 0.375rem; +} + +.c6::selection { + background: none; +} + +.c6:active { + box-shadow: inset 0 0 0 1.5rem rgb(216,216,216); +} + +.c6:hover { + border: 0.0625rem solid rgb(59,70,204); +} + +.c6:hover:after { + box-shadow: 0 0 0 0.0625rem rgb(59,70,204); +} + +.c6:after, +.c6:before { + position: relative; + display: block; + content: ''; + width: 50%; + height: 100%; +} + +.c6:after { + -webkit-transform: translateX(0%); + -ms-transform: translateX(0%); + transform: translateX(0%); + border-radius: 50%; + background: rgb(255,255,255); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); + box-shadow: 0 0 0 0.0625rem rgb(216,216,216); +} + +.c6:active { + box-shadow: inset 0 0 0 2em rgb(216,216,216); +} + +.c6:before { + display: none; +} +
+> +
+
+
+ +
+ +
+
+
+
+
+
+ +
+ `; 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 index 3a92aca6..02bd4a02 100644 --- 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 @@ -1,12 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders without throwing 1`] = ` -
-`; - -exports[`renders without throwing 1`] = ` .c2 { margin-bottom: 1rem; } @@ -548,13 +542,57 @@ exports[`renders without throwing 1`] = ` `; -exports[`renders without throwing 1`] = ` -.c0 { - margin-top: 1rem; - margin-bottom: 0.5rem; +exports[`renders without throwing 1`] = ` +.c2 { + margin-bottom: 1rem; +} + +.c10 { + margin-left: 0.25rem; +} + +.c14 { + margin-top: 0.5rem; + margin-bottom: 2rem; } .c4 { + 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; +} + +.c5 { + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; +} + +.c13 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -567,30 +605,50 @@ exports[`renders without throwing 1`] = ` min-width: 7.5rem; } -.c4::-moz-focus-inner, -.c4[type='button']::-moz-focus-inner, -.c4[type='reset']::-moz-focus-inner, -.c4[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; } -.c4:-moz-focusring, -.c4[type='button']:-moz-focusring, -.c4[type='reset']:-moz-focusring, -.c4[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; } -.c4 + button { +.c13 + button { margin-left: 0.375rem; } .c3 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c3 + p, +.c3 + small, +.c3 + h1, +.c3 + h2, +.c3 + label, +.c3 + h3, +.c3 + h4, +.c3 + h5, +.c3 + div, +.c3 + span { + padding-bottom: 2.25rem; +} + +.c12 { display: inline-block; } -.c2 { +.c11 { box-sizing: border-box; display: inline-block; -webkit-box-pack: center; @@ -632,71 +690,287 @@ exports[`renders without throwing 1`] = ` -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(216,216,216); + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0; + margin-top: 0.5rem; } -.c2:focus { +.c11:focus { outline: 0; text-decoration: none; background-color: rgb(59,70,204); border-color: rgb(45,56,132); } -.c2:hover { +.c11:hover { background-color: rgb(72,83,217); border: solid 0.0625rem rgb(45,56,132); } -.c2:active, -.c2:active:hover, -.c2:active:focus { +.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); } -.c2[disabled] { +.c11[disabled] { cursor: not-allowed; pointer-events: none; } -.c2:focus { +.c11:focus { background-color: rgb(255,255,255); border-color: rgb(216,216,216); } -.c2:hover { +.c11:hover { background-color: rgb(247,247,247); border-color: rgb(216,216,216); } -.c2:active, -.c2:active:hover, -.c2:active:focus { +.c11:active, +.c11:active:hover, +.c11:active:focus { background-color: rgb(230,230,230); border-color: rgb(216,216,216); } -.c1 { - color: rgba(73,73,73,1); - font-weight: normal; - line-height: 1.625rem; - font-size: 1.3125rem; - margin: 0; - font-weight: 600; +.c11 svg + span { + margin-left: 0.75rem; } -.c1 + p, -.c1 + small, -.c1 + h1, -.c1 + h2, -.c1 + label, -.c1 + h3, -.c1 + h4, -.c1 + h5, -.c1 + div, -.c1 + span { - margin-top: 1.5rem; +.c11 svg { + max-height: 1.125rem; +} + +.c15 { + 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); +} + +.c15:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c15:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c15:active, +.c15:active:hover, +.c15:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c15[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c7 { + 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; +} + +.c9 { + 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; + margin-left: 0; +} + +.c0 { + 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 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c6 { + 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%; +} + +.c8 { + box-sizing: border-box; + width: 18.75rem; + 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: 22.1875rem; + 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; +} + +.c8::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8:invalid { + box-shadow: none; +} + +.c8:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); + cursor: not-allowed; +} + +.c8:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +@media only screen and (min-width:0em) { + .c1 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c1 { + -webkit-flex-basis: 66.66666666666667%; + -ms-flex-preferred-size: 66.66666666666667%; + flex-basis: 66.66666666666667%; + max-width: 66.66666666666667%; + display: block; + } }
without throwing 1`] = `
-

- test -

+
+

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

+
+
- +
+
+ + +
+
+
+ +
+ +
+
+
+
+ +
+ +`; + +exports[`renders without throwing 1`] = ` +.c2 { + margin-bottom: 1rem; +} + +.c10 { + margin-left: 0.25rem; +} + +.c14 { + margin-top: 0.5rem; + margin-bottom: 2rem; +} + +.c4 { + 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; +} + +.c5 { + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; +} + +.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; +} + +.c3 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c3 + p, +.c3 + small, +.c3 + h1, +.c3 + h2, +.c3 + label, +.c3 + h3, +.c3 + h4, +.c3 + h5, +.c3 + div, +.c3 + span { + padding-bottom: 2.25rem; +} + +.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); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0; + margin-top: 0.5rem; +} + +.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; +} + +.c11:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c11:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c11:active, +.c11:active:hover, +.c11:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c11 svg + span { + margin-left: 0.75rem; +} + +.c11 svg { + max-height: 1.125rem; +} + +.c15 { + 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); +} + +.c15:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c15:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c15:active, +.c15:active:hover, +.c15:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c15[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c7 { + 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; +} + +.c9 { + 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; + margin-left: 0; +} + +.c0 { + 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 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c6 { + 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%; +} + +.c8 { + box-sizing: border-box; + width: 18.75rem; + 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: 22.1875rem; + 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; +} + +.c8::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8:invalid { + box-shadow: none; +} + +.c8:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); + cursor: not-allowed; +} + +.c8:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +@media only screen and (min-width:0em) { + .c1 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c1 { + -webkit-flex-basis: 66.66666666666667%; + -ms-flex-preferred-size: 66.66666666666667%; + flex-basis: 66.66666666666667%; + max-width: 66.66666666666667%; + display: block; + } +} + +
+
+
+
+

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

+
+
+
+
+
+
+ + +
+
+
+ +
+ +
+
+
+
+ +
`; exports[`renders without throwing 1`] = ` +.c2 { + margin-bottom: 1rem; +} + +.c10 { + margin-left: 0.25rem; +} + +.c14 { + margin-top: 0.5rem; + margin-bottom: 2rem; +} + +.c4 { + 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; +} + +.c5 { + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; +} + +.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; +} + +.c3 { + color: rgba(73,73,73,1); + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; +} + +.c3 + p, +.c3 + small, +.c3 + h1, +.c3 + h2, +.c3 + label, +.c3 + h3, +.c3 + h4, +.c3 + h5, +.c3 + div, +.c3 + span { + padding-bottom: 2.25rem; +} + +.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); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0; + margin-top: 0.5rem; +} + +.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; +} + +.c11:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c11:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c11:active, +.c11:active:hover, +.c11:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c11 svg + span { + margin-left: 0.75rem; +} + +.c11 svg { + max-height: 1.125rem; +} + +.c15 { + 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); +} + +.c15:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c15:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c15:active, +.c15:active:hover, +.c15:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c15[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c7 { + 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; +} + +.c9 { + 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; + margin-left: 0; +} + +.c0 { + 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 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c6 { + 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%; +} + +.c8 { + box-sizing: border-box; + width: 18.75rem; + 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: 22.1875rem; + 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; +} + +.c8::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8:invalid { + box-shadow: none; +} + +.c8:disabled { + background-color: rgb(250,250,250); + color: rgb(216,216,216); + cursor: not-allowed; +} + +.c8:disabled::-webkit-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8:disabled::-moz-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8:disabled:-ms-input-placeholder { + color: rgba(73,73,73,0.5); +} + +.c8:focus { + border-color: rgb(59,70,204); + outline: 0; +} + +@media only screen and (min-width:0em) { + .c1 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c1 { + -webkit-flex-basis: 66.66666666666667%; + -ms-flex-preferred-size: 66.66666666666667%; + flex-basis: 66.66666666666667%; + max-width: 66.66666666666667%; + display: block; + } +} +
+> +
+
+
+

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

+
+
+
+
+
+
+ + +
+
+
+ +
+ +
+
+
+
+ +
+
`; 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 index e4f37b92..187a4d19 100644 --- 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 @@ -1,14 +1,38 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders without throwing 1`] = ` -Array [ - .c3 { +.c3 { font-size: 80%; color: rgba(73,73,73,1); line-height: 1.125rem; font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -62,75 +86,77 @@ Array [ margin-right: 0.25rem; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - /> - </div> - <small - className="c3" - /> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { +.c5 { margin-top: 0.25rem; margin-bottom: 1rem; } -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" > + <div + className="c0" + > <div - className="c2 c3" - height="0.0625rem" + className="c1" + > + <div + className="c2" + /> + </div> + <small + className="c3" /> -</div>, -] + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> +</div> `; exports[`renders <Title icon="NameIcon"/> without throwing 1`] = ` -Array [ - .c3 { +.c3 { font-size: 80%; color: rgba(73,73,73,1); line-height: 1.125rem; font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -184,96 +210,98 @@ Array [ margin-right: 0.25rem; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="17" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 16.24 13.55" - width="17" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <path - d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z" - fill="rgba(73, 73, 73, 1)" - /> - </svg> - </div> - </div> - <small - className="c3" - /> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { +.c5 { margin-top: 0.25rem; margin-bottom: 1rem; } -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" > + <div + className="c0" + > <div - className="c2 c3" - height="0.0625rem" + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="17" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 16.24 13.55" + width="17" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <path + d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z" + fill="rgba(73, 73, 73, 1)" + /> + </svg> + </div> + </div> + <small + className="c3" /> -</div>, -] + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> +</div> `; exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = ` -Array [ - .c3 { +.c3 { font-size: 80%; color: rgba(73,73,73,1); line-height: 1.125rem; font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -327,96 +355,99 @@ Array [ margin-right: 0.25rem; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="17" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 16.24 13.55" - width="17" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <path - d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z" - fill="rgba(73, 73, 73, 1)" - /> - </svg> - </div> - </div> - <small - className="c3" - /> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { +.c5 { margin-top: 0.25rem; margin-bottom: 1rem; } -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + label="Instance name" > + <div + className="c0" + > <div - className="c2 c3" - height="0.0625rem" + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="17" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 16.24 13.55" + width="17" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <path + d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z" + fill="rgba(73, 73, 73, 1)" + /> + </svg> + </div> + </div> + <small + className="c3" /> -</div>, -] + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> +</div> `; exports[`renders <Title label="Test"/> without throwing 1`] = ` -Array [ - .c3 { +.c3 { font-size: 80%; color: rgba(73,73,73,1); line-height: 1.125rem; font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -470,62 +501,41 @@ Array [ margin-right: 0.25rem; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - /> - </div> - <small - className="c3" - /> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { +.c5 { margin-top: 0.25rem; margin-bottom: 1rem; } -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + label="Test" > + <div + className="c0" + > <div - className="c2 c3" - height="0.0625rem" + className="c1" + > + <div + className="c2" + /> + </div> + <small + className="c3" /> -</div>, -] + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> +</div> `; diff --git a/packages/my-joy-beta/src/components/create-instance/image.js b/packages/my-joy-beta/src/components/create-instance/image.js index 7a55fd92..a18c49e2 100644 --- a/packages/my-joy-beta/src/components/create-instance/image.js +++ b/packages/my-joy-beta/src/components/create-instance/image.js @@ -16,10 +16,8 @@ import { Button, Toggle, H4, - Select, - StatusLoader + Select } from 'joyent-ui-toolkit'; -import Description from '@components/create-instance/description'; const fadeIn = keyframes` from { @@ -88,7 +86,7 @@ const getImageByID = (id, images) => { const image = images .map(image => ({ ...image, - versions: image.versions.filter(version => version.id === id) + versions: (image.versions || []).filter(version => version.id === id) })) .filter(e => e.versions.length)[0]; return image @@ -100,105 +98,77 @@ const getImageByID = (id, images) => { : {}; }; +export const Preview = ({ imageID, images, isVmSelected, onEdit }) => ( + <Fragment> + <Margin bottom={2} top={3}> + <H3 bold> + {titleCase(getImageByID(imageID, images).name)} -{' '} + {getImageByID(imageID, images).version} + </H3> + <P> + {isVmSelected ? 'Hardware Virtual Machine' : 'Infrastructure Container'}{' '} + </P> + </Margin> + <Button type="button" secondary onClick={onEdit}> + Edit + </Button> + </Fragment> +); + export default ({ handleSubmit, pristine, - expanded, imageID, - onCancel, - loading, - images, + images = [], isVmSelected }) => ( <form onSubmit={handleSubmit}> - {expanded && ( - <Fragment> - <Description> - Hardware virtual machines are generally used for non-containerized - applications. Infrastructure containers are generally for running any - Linux image on secure, bare metal containers.{' '} - <a - href="https://docs.joyent.com/private-cloud/images" - rel="noopener noreferrer" - target="_blank" - > - Read the docs - </a> - </Description> - {loading ? ( - <StatusLoader /> - ) : ( - <Fragment> - <Margin bottom={4}> - <FormGroup name="vms" field={Field}> - <Flex alignCenter> - <FormLabel>Infrastructure Container </FormLabel> - <Toggle onBlur={null}>Hardware Virtual Machine</Toggle> - </Flex> + <Margin bottom={4}> + <FormGroup name="vms" field={Field}> + <Flex alignCenter> + <FormLabel>Infrastructure Container </FormLabel> + <Toggle onBlur={null}>Hardware Virtual Machine</Toggle> + </Flex> + </FormGroup> + </Margin> + <Row> + {images && + images.filter(i => i.isVm === isVmSelected).map(image => ( + <Col md={2} sm={3}> + <Card + selected={ + image.imageName === getImageByID(imageID, images).imageName + } + > + <img + src={getImage(image.imageName).url} + width={getImage(image.imageName).size} + height={getImage(image.imageName).size} + style={{ + marginBottom: getImage(image.imageName).bottom + }} + alt={image.imageName} + /> + <H4>{titleCase(image.imageName)}</H4> + <FormGroup name="image" field={Field}> + <Version onBlur={null}> + <option selected>Version</option> + {image.versions && image.versions.map(version => ( + <option + key={`${version.name} - ${version.version}`} + value={version.id} + >{`${version.name} - ${version.version}`}</option> + ))} + </Version> </FormGroup> - </Margin> - <Row> - {images && - images.filter(i => i.isVm === isVmSelected).map(image => ( - <Col md={2} sm={3}> - <Card - selected={ - image.imageName === - getImageByID(imageID, images).imageName - } - > - <img - src={getImage(image.imageName).url} - width={getImage(image.imageName).size} - height={getImage(image.imageName).size} - style={{ - marginBottom: getImage(image.imageName).bottom - }} - alt={image.imageName} - /> - <H4>{titleCase(image.imageName)}</H4> - <FormGroup name="image" field={Field}> - <Version onBlur={null}> - <option selected>Version</option> - {image.versions.map(version => ( - <option - key={`${version.name} - ${version.version}`} - value={version.id} - >{`${version.name} - ${version.version}`}</option> - ))} - </Version> - </FormGroup> - </Card> - </Col> - ))} - </Row> - <Margin top={4}> - <Button type="submit" disabled={pristine || !imageID}> - Next - </Button> - </Margin> - </Fragment> - )} - </Fragment> - )} - {!expanded && - imageID && ( - <Fragment> - <Margin bottom={2} top={3}> - <H3 bold> - {titleCase(getImageByID(imageID, images).name)} -{' '} - {getImageByID(imageID, images).version} - </H3> - <P> - {isVmSelected - ? 'Hardware Virtual Machine' - : 'Infrastructure Container'}{' '} - </P> - </Margin> - <Button type="button" secondary onClick={onCancel}> - Edit - </Button> - </Fragment> - )} + </Card> + </Col> + ))} + </Row> + <Margin top={4}> + <Button type="submit" disabled={pristine || !imageID}> + Next + </Button> + </Margin> </form> ); diff --git a/packages/my-joy-beta/src/components/create-instance/name.js b/packages/my-joy-beta/src/components/create-instance/name.js index cd7f8057..51c8ded9 100644 --- a/packages/my-joy-beta/src/components/create-instance/name.js +++ b/packages/my-joy-beta/src/components/create-instance/name.js @@ -1,11 +1,10 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import { Field } from 'redux-form'; import { Margin } from 'styled-components-spacing'; import Flex, { FlexItem } from 'styled-flex-component'; import remcalc from 'remcalc'; import { - H3, FormGroup, FormLabel, Input, @@ -20,64 +19,44 @@ export default ({ handleSubmit, pristine, asyncValidating, - expanded, - name, placeholderName, randomizing, - onCancel, onRandomize }) => ( <form onSubmit={handleSubmit}> - {expanded ? ( - <Fragment> - <Description> - Your instance name will be used to identify this specific instance. - </Description> - <Flex> - <FlexItem> - <FormGroup name="name" fluid field={Field}> - <FormLabel>Instance Name</FormLabel> - <Input placeholder={placeholderName} onBlur={null} /> - <FormMeta marginless /> - </FormGroup> - </FlexItem> - <FlexItem> - <FormLabel>⁣</FormLabel> - <Margin left={1}> - <Button - type="button" - marginTop={remcalc(8)} - onClick={onRandomize} - loading={randomizing} - marginless - secondary - icon - > - <RandomizeIcon /> - <span>Randomize</span> - </Button> - </Margin> - </FlexItem> - </Flex> - <Margin top={2} bottom={4}> - <Button type="submit" disabled={pristine} loading={asyncValidating}> - Next + <Description> + Your instance name will be used to identify this specific instance. + </Description> + <Flex> + <FlexItem> + <FormGroup name="name" fluid field={Field}> + <FormLabel>Instance Name</FormLabel> + <Input placeholder={placeholderName} onBlur={null} /> + <FormMeta marginless /> + </FormGroup> + </FlexItem> + <FlexItem> + <FormLabel>⁣</FormLabel> + <Margin left={1}> + <Button + type="button" + marginTop={remcalc(8)} + onClick={onRandomize} + loading={randomizing} + marginless + secondary + icon + > + <RandomizeIcon /> + <span>Randomize</span> </Button> </Margin> - </Fragment> - ) : ( - <Fragment> - {name ? ( - <Fragment> - <Margin bottom={2} top={3}> - <H3 bold>{name}</H3> - </Margin> - <Button type="button" secondary onClick={onCancel}> - Edit - </Button> - </Fragment> - ) : null} - </Fragment> - )} + </FlexItem> + </Flex> + <Margin top={2} bottom={4}> + <Button type="submit" disabled={pristine} loading={asyncValidating}> + Next + </Button> + </Margin> </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 index cfd5bf45..f1af6fa6 100644 --- a/packages/my-joy-beta/src/components/create-instance/title.js +++ b/packages/my-joy-beta/src/components/create-instance/title.js @@ -1,8 +1,9 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import Flex from 'styled-flex-component'; import { Margin } from 'styled-components-spacing'; import remcalc from 'remcalc'; import styled from 'styled-components'; +import is from 'styled-is'; import { Divider, Small } from 'joyent-ui-toolkit'; @@ -13,8 +14,14 @@ const IsEmpty = styled(Margin)` } `; -export default ({ icon, children }) => ( - <Fragment> +const Container = styled.div` + ${is('onClick')` + cursor: pointer; + `}; +`; + +export default ({ icon, children, ...rest }) => ( + <Container {...rest}> <Flex> <Margin right={1}> <Flex alignCenter full> @@ -26,5 +33,5 @@ export default ({ icon, children }) => ( <IsEmpty top={1} bottom={3}> <Divider height={remcalc(1)} /> </IsEmpty> - </Fragment> + </Container> ); diff --git 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 index 6fb985fd..920ee816 100644 --- 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 @@ -9,10 +9,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -62,126 +92,101 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="11" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 18 11" - width="18" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1884 1236)" - > - <g> - <g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1884 -1233.9)" - xlinkHref="#F" - /> - </g> - </g> - <g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1896 -1233.9)" - xlinkHref="#G" - /> - </g> - </g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1891 -1236)" - xlinkHref="#H" - /> - </g> - </g> - </g> - <defs> - <path - d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z" - id="F" - /> - <path - d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z" - id="G" - /> - <path - d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" - id="H" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Metadata - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={undefined} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="11" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 11" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1884 1236)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1884 -1233.9)" + xlinkHref="#F" + /> + </g> + </g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1896 -1233.9)" + xlinkHref="#G" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1891 -1236)" + xlinkHref="#H" + /> + </g> + </g> + </g> + <defs> + <path + d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z" + id="F" + /> + <path + d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z" + id="G" + /> + <path + d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" + id="H" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Metadata + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, <div />, ] @@ -196,10 +201,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -249,126 +284,101 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="11" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 18 11" - width="18" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1884 1236)" - > - <g> - <g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1884 -1233.9)" - xlinkHref="#F" - /> - </g> - </g> - <g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1896 -1233.9)" - xlinkHref="#G" - /> - </g> - </g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1891 -1236)" - xlinkHref="#H" - /> - </g> - </g> - </g> - <defs> - <path - d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z" - id="F" - /> - <path - d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z" - id="G" - /> - <path - d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" - id="H" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Metadata - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={false} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="11" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 11" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1884 1236)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1884 -1233.9)" + xlinkHref="#F" + /> + </g> + </g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1896 -1233.9)" + xlinkHref="#G" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1891 -1236)" + xlinkHref="#H" + /> + </g> + </g> + </g> + <defs> + <path + d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z" + id="F" + /> + <path + d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z" + id="G" + /> + <path + d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" + id="H" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Metadata + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, .c3 { color: rgba(73,73,73,1); @@ -1713,10 +1723,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -1766,126 +1806,101 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="11" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 18 11" - width="18" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1884 1236)" - > - <g> - <g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1884 -1233.9)" - xlinkHref="#F" - /> - </g> - </g> - <g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1896 -1233.9)" - xlinkHref="#G" - /> - </g> - </g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1891 -1236)" - xlinkHref="#H" - /> - </g> - </g> - </g> - <defs> - <path - d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z" - id="F" - /> - <path - d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z" - id="G" - /> - <path - d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" - id="H" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Metadata - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={false} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="11" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 11" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1884 1236)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1884 -1233.9)" + xlinkHref="#F" + /> + </g> + </g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1896 -1233.9)" + xlinkHref="#G" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1891 -1236)" + xlinkHref="#H" + /> + </g> + </g> + </g> + <defs> + <path + d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z" + id="F" + /> + <path + d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z" + id="G" + /> + <path + d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" + id="H" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Metadata + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, .c3 { color: rgba(73,73,73,1); @@ -2210,10 +2225,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -2263,126 +2308,101 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="11" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 18 11" - width="18" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1884 1236)" - > - <g> - <g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1884 -1233.9)" - xlinkHref="#F" - /> - </g> - </g> - <g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1896 -1233.9)" - xlinkHref="#G" - /> - </g> - </g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1891 -1236)" - xlinkHref="#H" - /> - </g> - </g> - </g> - <defs> - <path - d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z" - id="F" - /> - <path - d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z" - id="G" - /> - <path - d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" - id="H" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Metadata - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={undefined} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="11" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 11" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1884 1236)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1884 -1233.9)" + xlinkHref="#F" + /> + </g> + </g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1896 -1233.9)" + xlinkHref="#G" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1891 -1236)" + xlinkHref="#H" + /> + </g> + </g> + </g> + <defs> + <path + d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z" + id="F" + /> + <path + d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z" + id="G" + /> + <path + d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" + id="H" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Metadata + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, .c21 { font-family: sans-serif; @@ -4473,10 +4493,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -4526,126 +4576,101 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="11" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 18 11" - width="18" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1884 1236)" - > - <g> - <g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1884 -1233.9)" - xlinkHref="#F" - /> - </g> - </g> - <g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1896 -1233.9)" - xlinkHref="#G" - /> - </g> - </g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1891 -1236)" - xlinkHref="#H" - /> - </g> - </g> - </g> - <defs> - <path - d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z" - id="F" - /> - <path - d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z" - id="G" - /> - <path - d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" - id="H" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Metadata - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={false} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="11" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 11" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1884 1236)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1884 -1233.9)" + xlinkHref="#F" + /> + </g> + </g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1896 -1233.9)" + xlinkHref="#G" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1891 -1236)" + xlinkHref="#H" + /> + </g> + </g> + </g> + <defs> + <path + d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z" + id="F" + /> + <path + d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z" + id="G" + /> + <path + d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" + id="H" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Metadata + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, .c3 { color: rgba(73,73,73,1); diff --git 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 index 2ce48778..aeaa935d 100644 --- 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 @@ -9,10 +9,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -62,98 +92,73 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="18" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 18 18" - width="18" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1105 710)" - > - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1105 -710)" - xlinkHref="#I" - /> - </g> - </g> - <defs> - <path - d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z" - id="I" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Networks - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={undefined} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="18" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 18" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1105 710)" + > + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1105 -710)" + xlinkHref="#I" + /> + </g> + </g> + <defs> + <path + d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z" + id="I" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Networks + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, <form />, .c0 { @@ -175,10 +180,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -228,98 +263,73 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="18" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 18 18" - width="18" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1105 710)" - > - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1105 -710)" - xlinkHref="#I" - /> - </g> - </g> - <defs> - <path - d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z" - id="I" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Networks - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={undefined} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="18" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 18" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1105 710)" + > + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1105 -710)" + xlinkHref="#I" + /> + </g> + </g> + <defs> + <path + d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z" + id="I" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Networks + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, .c0 { margin-bottom: 2rem; @@ -340,10 +350,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -393,98 +433,73 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="18" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 18 18" - width="18" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1105 710)" - > - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1105 -710)" - xlinkHref="#I" - /> - </g> - </g> - <defs> - <path - d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z" - id="I" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Networks - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={false} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="18" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 18" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1105 710)" + > + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1105 -710)" + xlinkHref="#I" + /> + </g> + </g> + <defs> + <path + d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z" + id="I" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Networks + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, .c3 { color: rgba(73,73,73,1); @@ -852,10 +867,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -905,98 +950,73 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="18" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 18 18" - width="18" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1105 710)" - > - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1105 -710)" - xlinkHref="#I" - /> - </g> - </g> - <defs> - <path - d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z" - id="I" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Networks - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={undefined} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="18" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 18" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1105 710)" + > + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1105 -710)" + xlinkHref="#I" + /> + </g> + </g> + <defs> + <path + d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z" + id="I" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Networks + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, .c7 { color: rgba(73,73,73,1); @@ -1353,10 +1373,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -1406,98 +1456,73 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="18" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 18 18" - width="18" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1105 710)" - > - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1105 -710)" - xlinkHref="#I" - /> - </g> - </g> - <defs> - <path - d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z" - id="I" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Networks - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={false} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="18" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 18" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1105 710)" + > + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1105 -710)" + xlinkHref="#I" + /> + </g> + </g> + <defs> + <path + d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z" + id="I" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Networks + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, .c3 { color: rgba(73,73,73,1); @@ -3012,10 +3037,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -3065,98 +3120,73 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="18" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 18 18" - width="18" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1105 710)" - > - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1105 -710)" - xlinkHref="#I" - /> - </g> - </g> - <defs> - <path - d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z" - id="I" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Networks - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={false} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="18" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 18 18" + width="18" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1105 710)" + > + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1105 -710)" + xlinkHref="#I" + /> + </g> + </g> + <defs> + <path + d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z" + id="I" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Networks + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, .c0 { color: rgba(73,73,73,1); diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap index bcec2d3b..1500ec3d 100644 --- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap +++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap @@ -9,10 +9,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -62,113 +92,88 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="17" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 17 17" - width="17" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1885 974)" - > - <g> - <g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1885 -974)" - xlinkHref="#R" - /> - </g> - </g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1888 -971)" - xlinkHref="#S" - /> - </g> - </g> - </g> - <defs> - <path - d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z" - id="R" - /> - <path - d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z" - id="S" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Tags - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={undefined} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="17" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 17 17" + width="17" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1885 974)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1885 -974)" + xlinkHref="#R" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1888 -971)" + xlinkHref="#S" + /> + </g> + </g> + </g> + <defs> + <path + d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z" + id="R" + /> + <path + d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z" + id="S" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Tags + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, <div />, ] @@ -183,10 +188,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -236,113 +271,88 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="17" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 17 17" - width="17" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1885 974)" - > - <g> - <g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1885 -974)" - xlinkHref="#R" - /> - </g> - </g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1888 -971)" - xlinkHref="#S" - /> - </g> - </g> - </g> - <defs> - <path - d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z" - id="R" - /> - <path - d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z" - id="S" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Tags - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={false} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="17" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 17 17" + width="17" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1885 974)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1885 -974)" + xlinkHref="#R" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1888 -971)" + xlinkHref="#S" + /> + </g> + </g> + </g> + <defs> + <path + d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z" + id="R" + /> + <path + d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z" + id="S" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Tags + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, .c3 { color: rgba(73,73,73,1); @@ -1684,10 +1694,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -1737,113 +1777,88 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="17" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 17 17" - width="17" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1885 974)" - > - <g> - <g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1885 -974)" - xlinkHref="#R" - /> - </g> - </g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1888 -971)" - xlinkHref="#S" - /> - </g> - </g> - </g> - <defs> - <path - d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z" - id="R" - /> - <path - d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z" - id="S" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Tags - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={false} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="17" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 17 17" + width="17" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1885 974)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1885 -974)" + xlinkHref="#R" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1888 -971)" + xlinkHref="#S" + /> + </g> + </g> + </g> + <defs> + <path + d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z" + id="R" + /> + <path + d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z" + id="S" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Tags + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, .c3 { color: rgba(73,73,73,1); @@ -2192,10 +2207,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -2245,113 +2290,88 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="17" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 17 17" - width="17" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1885 974)" - > - <g> - <g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1885 -974)" - xlinkHref="#R" - /> - </g> - </g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1888 -971)" - xlinkHref="#S" - /> - </g> - </g> - </g> - <defs> - <path - d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z" - id="R" - /> - <path - d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z" - id="S" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Tags - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={undefined} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="17" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 17 17" + width="17" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1885 974)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1885 -974)" + xlinkHref="#R" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1888 -971)" + xlinkHref="#S" + /> + </g> + </g> + </g> + <defs> + <path + d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z" + id="R" + /> + <path + d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z" + id="S" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Tags + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, <div />, ] @@ -2366,10 +2386,40 @@ Array [ font-size: 0.8125rem; } +.c7 { + 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; +} + +.c6 { + background-color: rgb(216,216,216); + margin: 0; + height: 0.0625rem; +} + .c1 { margin-right: 0.25rem; } +.c5 { + margin-top: 0.25rem; + margin-bottom: 1rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -2419,113 +2469,88 @@ Array [ flex-basis: 100%; } -<div - className="c0" -> - <div - className="c1" - > - <div - className="c2" - > - <svg - className="" - height="17" - innerRef={undefined} - style={ - Object { - "transform": "rotate(0deg)", - } - } - version="1.1" - viewBox="0 0 17 17" - width="17" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - > - <g - transform="translate(-1885 974)" - > - <g> - <g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1885 -974)" - xlinkHref="#R" - /> - </g> - </g> - <g> - <use - fill="rgba(73, 73, 73, 1)" - transform="translate(1888 -971)" - xlinkHref="#S" - /> - </g> - </g> - </g> - <defs> - <path - d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z" - id="R" - /> - <path - d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z" - id="S" - /> - </defs> - </svg> - </div> - </div> - <small - className="c3" - > - Tags - </small> -</div>, - .c3 { - 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; -} - -.c2 { - background-color: rgb(216,216,216); - margin: 0; - height: 0.0625rem; -} - -.c1 { - margin-top: 0.25rem; - margin-bottom: 1rem; -} - -.c0 + div:empty, -.c0 + form:empty { +.c4 + div:empty, +.c4 + form:empty { margin-bottom: 2.5rem; } <div - className="c0 c1" + className="" + onClick={false} > <div - className="c2 c3" - height="0.0625rem" - /> + className="c0" + > + <div + className="c1" + > + <div + className="c2" + > + <svg + className="" + height="17" + innerRef={undefined} + style={ + Object { + "transform": "rotate(0deg)", + } + } + version="1.1" + viewBox="0 0 17 17" + width="17" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <g + transform="translate(-1885 974)" + > + <g> + <g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1885 -974)" + xlinkHref="#R" + /> + </g> + </g> + <g> + <use + fill="rgba(73, 73, 73, 1)" + transform="translate(1888 -971)" + xlinkHref="#S" + /> + </g> + </g> + </g> + <defs> + <path + d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z" + id="R" + /> + <path + d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z" + id="S" + /> + </defs> + </svg> + </div> + </div> + <small + className="c3" + > + Tags + </small> + </div> + <div + className="c4 c5" + > + <div + className="c6 c7" + height="0.0625rem" + /> + </div> </div>, .c3 { color: rgba(73,73,73,1); diff --git a/packages/my-joy-beta/src/containers/create-instance/affinity.js b/packages/my-joy-beta/src/containers/create-instance/affinity.js index 884dad32..d742b879 100644 --- a/packages/my-joy-beta/src/containers/create-instance/affinity.js +++ b/packages/my-joy-beta/src/containers/create-instance/affinity.js @@ -46,7 +46,12 @@ export const Affinity = ({ rule }) => ( <Fragment> - <Title icon={<AffinityIcon />}>Affinity + } + > + Affinity + {expanded ? ( Control placement of instances on the physical servers. Design diff --git a/packages/my-joy-beta/src/containers/create-instance/cns.js b/packages/my-joy-beta/src/containers/create-instance/cns.js index 075d2b9d..b01b32a9 100644 --- a/packages/my-joy-beta/src/containers/create-instance/cns.js +++ b/packages/my-joy-beta/src/containers/create-instance/cns.js @@ -54,7 +54,9 @@ const CNSContainer = ({ loading }) => ( - }>Container Name Service + }> + Container Name Service + {expanded ? ( Triton CNS is used to automatically update hostnames for your diff --git a/packages/my-joy-beta/src/containers/create-instance/firewall.js b/packages/my-joy-beta/src/containers/create-instance/firewall.js index bfd2aeeb..72e46e9e 100644 --- a/packages/my-joy-beta/src/containers/create-instance/firewall.js +++ b/packages/my-joy-beta/src/containers/create-instance/firewall.js @@ -29,7 +29,12 @@ const Firewall = ({ handleEdit }) => ( - }>Firewall + } + > + Firewall + {expanded ? ( Cloud Firewall rules control traffic across instances. Enabling the @@ -59,7 +64,8 @@ const Firewall = ({ tagRules={tagRules} enabled={enabled} /> - ) : null} + ) : null + } ) : null} {proceeded && !expanded ? ( diff --git a/packages/my-joy-beta/src/containers/create-instance/image.js b/packages/my-joy-beta/src/containers/create-instance/image.js index 8229ed92..611b2d0a 100644 --- a/packages/my-joy-beta/src/containers/create-instance/image.js +++ b/packages/my-joy-beta/src/containers/create-instance/image.js @@ -2,11 +2,13 @@ import React, { Fragment } from 'react'; import { compose, graphql } from 'react-apollo'; import ReduxForm from 'declarative-redux-form'; import { connect } from 'react-redux'; +import { set } from 'react-redux-values'; import get from 'lodash.get'; -import { InstanceTypeIcon } from 'joyent-ui-toolkit'; -import Image from '@components/create-instance/image'; +import { InstanceTypeIcon, StatusLoader } from 'joyent-ui-toolkit'; +import Image, { Preview } from '@components/create-instance/image'; import Title from '@components/create-instance/title'; +import Description from '@components/create-instance/description'; import imageData from '../../data/images-map.json'; import getImages from '../../graphql/get-images.gql'; @@ -14,31 +16,58 @@ import getImages from '../../graphql/get-images.gql'; const ImageContainer = ({ expanded, image, - handleSubmit, - handleCancel, + handleNext, + handleEdit, loading, images, vms }) => ( - }>Instance type and image + } + > + Instance type and image + + {expanded ? ( + + Hardware virtual machines are generally used for non-containerized + applications. Infrastructure containers are generally for running any + Linux image on secure, bare metal containers.{' '} + + Read the docs + + + ) : null} - {props => ( - - )} + {props => + (loading && expanded) ? ( + + ) : expanded ? ( + + ) : image ? ( + + ) : null + } ); @@ -53,8 +82,12 @@ export default compose( }; }, (dispatch, { history }) => ({ - handleSubmit: () => history.push(`/instances/~create/package`), - handleCancel: () => history.push(`/instances/~create/image`) + handleNext: () => { + dispatch(set({ name: 'create-instance-image-proceeded', value: true })); + + return history.push(`/instances/~create/package`); + }, + handleEdit: () => history.push(`/instances/~create/image`) }) ), graphql(getImages, { diff --git a/packages/my-joy-beta/src/containers/create-instance/index.js b/packages/my-joy-beta/src/containers/create-instance/index.js index 4016c66b..f2f58caa 100644 --- a/packages/my-joy-beta/src/containers/create-instance/index.js +++ b/packages/my-joy-beta/src/containers/create-instance/index.js @@ -5,6 +5,7 @@ import { Margin } from 'styled-components-spacing'; import ReduxForm from 'declarative-redux-form'; import { stopSubmit, destroy } from 'redux-form'; import { connect } from 'react-redux'; +import { destroyAll } from 'react-redux-values'; import { graphql, compose } from 'react-apollo'; import intercept from 'apr-intercept'; import constantCase from 'constant-case'; @@ -28,43 +29,59 @@ import parseError from '@state/parse-error'; const CREATE_FORM = 'CREATE-INSTANCE'; -const CreateInstance = ({ step, handleSubmit, ...props }) => ( +const CreateInstance = ({ step, disabled, handleSubmit, history, match }) => (

Create Instances

- + - + - + - + - + - + - + - + - + {({ handleSubmit, submitting }) => (
-
@@ -76,14 +93,22 @@ const CreateInstance = ({ step, handleSubmit, ...props }) => ( export default compose( graphql(CreateInstanceMutation, { name: 'createInstance' }), - connect(({ form, values }, ownProps) => { + connect(({ form, values }, { step }) => { + const disabled = ['name', 'image', 'package', 'networks'].some( + step => !get(values, `create-instance-${step}-proceeded`, false) + ); + + if (disabled) { + return { disabled }; + } + const name = get( form, 'create-instance-name.values.name', '' ); - const firewall = get( + const firewall_enabled = get( form, 'CREATE-INSTANCE-FIREWALL.values.enabled', false @@ -98,14 +123,10 @@ export default compose( const pkg = get( form, 'create-instance-package.values.package', - '' + '' ); - const networks = get( - form, - 'CREATE-INSTANCE-NETWORKS.values', - '' - ); + const networks = get(form, 'CREATE-INSTANCE-NETWORKS.values', {}); const metadata = get(values, 'create-instance-metadata', []); const receivedTags = get(values, 'create-instance-tags', []); @@ -121,52 +142,17 @@ export default compose( tags.push({ name: 'triton.cns.services', value: cnsServices.join(',') }); } - const affRules = affinity - .map(aff => ({ - conditional: aff['rule-instance-conditional'], - placement: aff['rule-instance-placement'], - identity: aff['rule-type'], - key: aff['rule-instance-tag-key'], - pattern: aff['rule-instance-tag-value-pattern'], - value: - aff['rule-type'] === 'name' - ? aff['rule-instance-name'] - : aff['rule-instance-tag-value'] - })) - .map(({ conditional, placement, identity, key, pattern, value }) => { - const type = constantCase( - `${conditional}_${placement === 'same' ? 'equal' : 'not_equal'}` - ); - - console.log(pattern); - const patterns = { - equalling: value => value, - 'not-equalling': value => `/^!${value}$/`, - containing: value => `/${value}/`, - starting: value => `/^${value}/`, - ending: value => `/${value}$/` - }; - - const _key = identity === 'name' ? 'instance' : key; - const _value = patterns[pattern](value); - - return { - type, - key: _key, - value: _value - }; - }); - return { forms: Object.keys(form), // improve this - name: name.toLowerCase(), + name, pkg, image, - affinity: affRules, - metadata: metadata.map(a => omit(a, 'expanded')), - tags: uniqBy(tags, 'name'), - firewall_enabled: firewall, - networks: Object.keys(networks).filter(network => networks[network]) + affinity, + metadata, + tags, + firewall_enabled, + networks, + disabled }; }), connect(null, (dispatch, ownProps) => { @@ -186,17 +172,59 @@ export default compose( return { handleSubmit: async () => { + const _affinity = affinity + .map(aff => ({ + conditional: aff['rule-instance-conditional'], + placement: aff['rule-instance-placement'], + identity: aff['rule-type'], + key: aff['rule-instance-tag-key'], + pattern: aff['rule-instance-tag-value-pattern'], + value: + aff['rule-type'] === 'name' + ? aff['rule-instance-name'] + : aff['rule-instance-tag-value'] + })) + .map(({ conditional, placement, identity, key, pattern, value }) => { + const type = constantCase( + `${conditional}_${placement === 'same' ? 'equal' : 'not_equal'}` + ); + + const patterns = { + equalling: value => value, + 'not-equalling': value => `/^!${value}$/`, + containing: value => `/${value}/`, + starting: value => `/^${value}/`, + ending: value => `/${value}$/` + }; + + const _key = identity === 'name' ? 'instance' : key; + const _value = patterns[pattern](value); + + return { + type, + key: _key, + value: _value + }; + }); + + const _metadata = metadata.map(a => omit(a, 'expanded')); + const _tags = uniqBy(tags, 'name'); + const _networks = Object.keys(networks).filter( + network => networks[network] + ); + const _name = name.toLowerCase(); + const [err, res] = await intercept( createInstance({ variables: { - name, + name: _name, package: pkg, image, - affinity, - metadata, - tags, + affinity: _affinity, + metadata: _metadata, + tags: _tags, firewall_enabled, - networks + networks: _networks } }) ); @@ -209,7 +237,7 @@ export default compose( ); } - dispatch(forms.map(name => destroy(name))); + dispatch([destroyAll(), forms.map(name => destroy(name))]); history.push(`/instances/${res.data.createMachine.name}`); } diff --git a/packages/my-joy-beta/src/containers/create-instance/metadata.js b/packages/my-joy-beta/src/containers/create-instance/metadata.js index 4283abce..845982b7 100644 --- a/packages/my-joy-beta/src/containers/create-instance/metadata.js +++ b/packages/my-joy-beta/src/containers/create-instance/metadata.js @@ -31,7 +31,12 @@ export const Metadata = ({ handleEdit }) => ( - }>Metadata + } + > + Metadata + {expanded ? ( Metadata can be used to pass data to the instance. It can also be used diff --git a/packages/my-joy-beta/src/containers/create-instance/name.js b/packages/my-joy-beta/src/containers/create-instance/name.js index d130219a..c4d235fd 100644 --- a/packages/my-joy-beta/src/containers/create-instance/name.js +++ b/packages/my-joy-beta/src/containers/create-instance/name.js @@ -2,13 +2,14 @@ import React, { Fragment } from 'react'; import { compose, graphql } from 'react-apollo'; import { set } from 'react-redux-values'; import ReduxForm from 'declarative-redux-form'; +import { Margin } from 'styled-components-spacing'; import { change } from 'redux-form'; import { connect } from 'react-redux'; import intercept from 'apr-intercept'; import get from 'lodash.get'; import punycode from 'punycode'; -import { NameIcon } from 'joyent-ui-toolkit'; +import { NameIcon, H3, Button } from 'joyent-ui-toolkit'; import Name from '@components/create-instance/name'; import Title from '@components/create-instance/title'; @@ -17,7 +18,7 @@ import GetRandomName from '@graphql/get-random-name.gql'; import { client } from '@state/store'; import parseError from '@state/parse-error'; -const FORM_NAME = 'CREATE_INSTANCE_NAME'; +const FORM_NAME = 'create-instance-name'; const NameContainer = ({ expanded, @@ -27,11 +28,13 @@ const NameContainer = ({ handleAsyncValidation, shouldAsyncValidate, handleNext, - handleCancel, - handleRandomize + handleRandomize, + handleEdit }) => ( - }>Instance name + }> + Instance name + - {props => ( - - )} + {props => + expanded ? ( + + ) : name ? ( + + +

{name}

+
+ +
+ ) : null + }
); @@ -80,14 +91,21 @@ export default compose( (dispatch, { history }) => ({ shouldAsyncValidate: ({ trigger }) => trigger === 'submit', handleAsyncValidation: async ({ name }) => { - const sanitized = punycode.encode(name).replace(/\-$/, ''); + const sanitized = punycode.encode(name).replace(/-$/, ''); if (sanitized !== name) { + // eslint-disable-next-line no-throw-literal throw { name: 'Special characters are not accepted' }; } + if (!(/^[a-zA-Z0-9][a-zA-Z0-9\\_\\.\\-]*$/).test(name)) { + throw { + name: 'Invalid name' + }; + } + const [err, res] = await intercept( client.query({ fetchPolicy: 'network-only', @@ -97,6 +115,7 @@ export default compose( ); if (err) { + // eslint-disable-next-line no-throw-literal throw { name: parseError(err) }; @@ -106,13 +125,18 @@ export default compose( const { machines = [] } = data; if (machines.length) { + // eslint-disable-next-line no-throw-literal throw { name: `${name} already exists` }; } }, - handleNext: () => history.push(`/instances/~create/image`), - handleCancel: () => history.push(`/instances/~create/name`), + handleNext: () => { + dispatch(set({ name: 'create-instance-name-proceeded', value: true })); + + return history.push(`/instances/~create/image`); + }, + handleEdit: () => history.push(`/instances/~create/name`), handleRandomize: async () => { dispatch( set({ name: 'create-instance-name-randomizing', value: true }) diff --git a/packages/my-joy-beta/src/containers/create-instance/networks.js b/packages/my-joy-beta/src/containers/create-instance/networks.js index bf08bbbe..96df1cb0 100644 --- a/packages/my-joy-beta/src/containers/create-instance/networks.js +++ b/packages/my-joy-beta/src/containers/create-instance/networks.js @@ -29,7 +29,12 @@ export const Networks = ({ return ( - }>Networks + } + > + Networks + {expanded ? ( Instances are automatically connected to a private fabric network, diff --git a/packages/my-joy-beta/src/containers/create-instance/package.js b/packages/my-joy-beta/src/containers/create-instance/package.js index ae612d14..f9c913f6 100644 --- a/packages/my-joy-beta/src/containers/create-instance/package.js +++ b/packages/my-joy-beta/src/containers/create-instance/package.js @@ -29,8 +29,8 @@ const FILTERS = 'create-instance-package-filters'; const PackageContainer = ({ expanded, hasVms, - handleSubmit, - handleCancel, + handleNext, + handleEdit, loading, packages, selected = {}, @@ -40,7 +40,12 @@ const PackageContainer = ({ resetFilters }) => ( - }>Package + } + > + Package +
{expanded ? ( @@ -71,7 +76,7 @@ const PackageContainer = ({ form={FORM_NAME} destroyOnUnmount={false} forceUnregisterOnUnmount={true} - onSubmit={handleSubmit} + onSubmit={handleNext} > {props => ( @@ -98,11 +103,7 @@ const PackageContainer = ({ ) : null} {!expanded && selected.id ? ( - + ) : null} )} @@ -195,8 +196,14 @@ export default compose( }; }, (dispatch, { history }) => ({ - handleSubmit: () => history.push('/instances/~create/tags'), - handleCancel: () => history.push('/instances/~create/package'), + handleNext: () => { + dispatch( + set({ name: 'create-instance-package-proceeded', value: true }) + ); + + return history.push('/instances/~create/tags'); + }, + handleEdit: () => history.push('/instances/~create/package'), resetFilters: () => { dispatch(reset(`${FILTERS}-filters`)); }, diff --git a/packages/my-joy-beta/src/containers/create-instance/tags.js b/packages/my-joy-beta/src/containers/create-instance/tags.js index 5b581eeb..c97f8bf5 100644 --- a/packages/my-joy-beta/src/containers/create-instance/tags.js +++ b/packages/my-joy-beta/src/containers/create-instance/tags.js @@ -32,7 +32,9 @@ export const Tags = ({ handleEdit }) => ( - }>Tags + }> + Tags + {expanded ? ( Tags can be used to identify your instances, group multiple instances diff --git a/yarn.lock b/yarn.lock index 8a7ef7c0..b4af5071 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6762,8 +6762,8 @@ multicast-dns-service-types@^1.1.0: resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901" multicast-dns@^6.0.1: - version "6.2.1" - resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.1.tgz#c5035defa9219d30640558a49298067352098060" + version "6.2.2" + resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.2.tgz#300b6133361f8aaaf2b8d1248e85c363fe5b95a0" dependencies: dns-packet "^1.0.1" thunky "^0.1.0" @@ -8234,9 +8234,9 @@ react-popper@^0.7.4: popper.js "^1.12.5" prop-types "^15.5.10" -react-redux-values@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/react-redux-values/-/react-redux-values-1.0.2.tgz#f626997a1107626883147e45612cb8d1c0bce8fb" +react-redux-values@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/react-redux-values/-/react-redux-values-1.1.2.tgz#e55e72fe74db1370e26aa96b27f15c262b1afa0c" dependencies: lodash.isundefined "^3.0.1" prop-types "^15.6.0"