diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json index 69a44c10..99eda439 100644 --- a/packages/my-joy-beta/package.json +++ b/packages/my-joy-beta/package.json @@ -12,7 +12,7 @@ "lint-ci": "eslint . --ext .js --ext .md", "lint": "eslint . --fix --ext .js --ext .md", "test-ci": "NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'", - "test": "DEFAULT_TIMEOUT_INTERVAL=50000 NODE_ENV=test joyent-react-scripts test --env=jsdom", + "test": "DEFAULT_TIMEOUT_INTERVAL=80000 NODE_ENV=test joyent-react-scripts test --env=jsdom", "prepublish": "echo 0" }, "dependencies": { @@ -27,6 +27,7 @@ "joyent-manifest-editor": "3.0.1", "joyent-ui-toolkit": "^4.5.0", "lodash.find": "^4.6.0", + "lodash.findindex": "^4.6.0", "lodash.get": "^4.4.2", "lodash.includes": "^4.3.0", "lodash.isarray": "^4.0.0", @@ -34,6 +35,7 @@ "lodash.isfunction": "^3.0.8", "lodash.isstring": "^4.0.1", "lodash.omit": "^4.5.0", + "lodash.reverse": "^4.0.1", "lodash.sortby": "^4.7.0", "lodash.uniqby": "^4.7.0", "lunr": "^2.1.5", diff --git a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png index 67c51f21..4b1067fd 100644 Binary files a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png and b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-1-snap.png b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-1-snap.png index 0058f68a..06e13d30 100644 Binary files a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-1-snap.png and b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-2-snap.png b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-2-snap.png index f0a23cfc..0058f68a 100644 Binary files a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-2-snap.png and b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/network-ui-js-network-network-public-2-snap.png differ diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-1-snap.png b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-1-snap.png index fb32094b..9ddc014b 100644 Binary files a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-1-snap.png and b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-expanded-1-snap.png b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-expanded-1-snap.png index fb32094b..9ddc014b 100644 Binary files a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-expanded-1-snap.png and b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-expanded-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-images-name-stuff-image-name-stuff-1-snap.png b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-images-name-stuff-image-name-stuff-1-snap.png index 4dfeec15..fd9bfa37 100644 Binary files a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-images-name-stuff-image-name-stuff-1-snap.png and b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-images-name-stuff-image-name-stuff-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-images-test-1-snap.png b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-images-test-1-snap.png index fb32094b..9ddc014b 100644 Binary files a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-images-test-1-snap.png and b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-images-test-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-is-vm-selected-1-snap.png b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-is-vm-selected-1-snap.png index fb32094b..9ddc014b 100644 Binary files a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-is-vm-selected-1-snap.png and b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-is-vm-selected-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-loading-1-snap.png b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-loading-1-snap.png index fb32094b..9ddc014b 100644 Binary files a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-loading-1-snap.png and b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-loading-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-pristine-false-1-snap.png b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-pristine-false-1-snap.png index fb32094b..9ddc014b 100644 Binary files a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-pristine-false-1-snap.png and b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-pristine-false-1-snap.png differ 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 123f796f..951056eb 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 @@ -2,38 +2,6 @@ exports[`renders without throwing 1`] = ` .c0 { - margin-bottom: 1.5rem; -} - -.c8 { - margin-top: 1.5rem; -} - -.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; @@ -52,359 +20,15 @@ exports[`renders without throwing 1`] = ` margin-left: -0.625rem; } -.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; - 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: 1.5rem; -} - -.c8 { - margin-top: 1.5rem; -} - -.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; @@ -423,359 +47,15 @@ exports[`renders without throwing 1`] = ` margin-left: -0.625rem; } -.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; - 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: 1.5rem; -} - -.c8 { - margin-top: 1.5rem; -} - -.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; @@ -794,359 +74,15 @@ exports[`renders without throwing 1`] = ` margin-left: -0.625rem; } -.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; - 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: 1.5rem; -} - -.c15 { - margin-top: 1.5rem; -} - -.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; @@ -1165,7 +101,7 @@ exports[`renders without thr margin-left: -0.625rem; } -.c8 { +.c1 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -1174,151 +110,13 @@ exports[`renders without thr padding-left: 0.625rem; } -.c18 { - 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; -} - -.c18::-moz-focus-inner, -.c18[type='button']::-moz-focus-inner, -.c18[type='reset']::-moz-focus-inner, -.c18[type='submit']::-moz-focus-inner { - border-style: none; - padding: 0; -} - -.c18:-moz-focusring, -.c18[type='button']:-moz-focusring, -.c18[type='reset']:-moz-focusring, -.c18[type='submit']:-moz-focusring { - outline: 0.0625rem dotted ButtonText; -} - -.c18 + button { - margin-left: 0.375rem; -} - -.c13 { +.c7 { position: relative; padding: 0.75rem; padding-right: 1.5625rem; } -.c17 { - display: inline-block; -} - -.c16 { - 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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; - 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); -} - -.c16:focus { - outline: 0; - text-decoration: none; - background-color: rgb(59,70,204); - border-color: rgb(45,56,132); -} - -.c16:hover { - background-color: rgb(72,83,217); - border: solid 0.0625rem rgb(45,56,132); -} - -.c16:active, -.c16:active:hover, -.c16:active:focus { - background-image: none; - outline: 0; - background-color: rgb(45,56,132); - border-color: rgb(45,56,132); -} - -.c16[disabled] { - cursor: not-allowed; - pointer-events: none; -} - -.c16:focus { - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); -} - -.c16:hover { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - -.c16:active, -.c16:active:hover, -.c16: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; -} - -.c10 { color: rgba(73,73,73,1); font-weight: 600; line-height: 1.5rem; @@ -1326,20 +124,20 @@ exports[`renders without thr margin: 0; } -.c10 + p, -.c10 + small, -.c10 + h1, -.c10 + h2, -.c10 + label, -.c10 + h3, -.c10 + h4, -.c10 + h5, -.c10 + div, -.c10 + span { +.c3 + p, +.c3 + small, +.c3 + h1, +.c3 + h2, +.c3 + label, +.c3 + h3, +.c3 + h4, +.c3 + h5, +.c3 + div, +.c3 + span { margin-top: 0.75rem; } -.c9 { +.c2 { width: 9rem; height: 9rem; background: rgb(255,255,255); @@ -1365,9 +163,10 @@ exports[`renders without thr margin-bottom: 1.25rem; -webkit-animation: eMLfYp 0.2s ease-in-out; animation: eMLfYp 0.2s ease-in-out; + cursor: pointer; } -.c1 { +.c4 { display: inline-block; margin: 0; padding: 0; @@ -1382,7 +181,7 @@ exports[`renders without thr -webkit-padding-after: 0; } -.c12 { +.c6 { position: relative; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -1393,7 +192,7 @@ exports[`renders without thr min-width: 18.75rem; } -.c12:after { +.c6:after { content: ''; width: 0.625rem; height: 0.625rem; @@ -1407,7 +206,7 @@ exports[`renders without thr right: 0.75rem; } -.c14 { +.c8 { box-sizing: border-box; width: 18.75rem; height: 3rem; @@ -1431,149 +230,51 @@ exports[`renders without thr outline: 0; } -.c14::-webkit-input-placeholder { +.c8::-webkit-input-placeholder { color: rgba(73,73,73,0.5); } -.c14::-moz-placeholder { +.c8::-moz-placeholder { color: rgba(73,73,73,0.5); } -.c14:-ms-input-placeholder { +.c8:-ms-input-placeholder { color: rgba(73,73,73,0.5); } -.c14:invalid { +.c8:invalid { box-shadow: none; } -.c14:disabled { +.c8:disabled { background-color: rgb(250,250,250); color: rgb(216,216,216); cursor: not-allowed; } -.c14:disabled::-webkit-input-placeholder { +.c8:disabled::-webkit-input-placeholder { color: rgba(73,73,73,0.5); } -.c14:disabled::-moz-placeholder { +.c8:disabled::-moz-placeholder { color: rgba(73,73,73,0.5); } -.c14:disabled:-ms-input-placeholder { +.c8:disabled:-ms-input-placeholder { color: rgba(73,73,73,0.5); } -.c14:focus { +.c8:focus { border-color: rgb(59,70,204); outline: 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; -} - -.c11 { min-width: 100%; width: 9rem; } -.c11 select { +.c5 select { margin: 0; border-bottom-width: 0; border-top-left-radius: 0; @@ -1581,7 +282,7 @@ exports[`renders without thr } @media only screen and (min-width:48em) { - .c8 { + .c1 { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; @@ -1591,7 +292,7 @@ exports[`renders without thr } @media only screen and (min-width:64em) { - .c8 { + .c1 { -webkit-flex-basis: 16.666666666666668%; -ms-flex-preferred-size: 16.666666666666668%; flex-basis: 16.666666666666668%; @@ -1600,70 +301,24 @@ exports[`renders without thr } } -
+
- -
- -
-
-
-
-
-
-
stuff without thr width={36} />

Stuff

-
-
-
-
-
-
- -
`; exports[`renders without throwing 1`] = ` .c0 { - margin-bottom: 1.5rem; -} - -.c8 { - margin-top: 1.5rem; -} - -.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; @@ -2143,359 +410,15 @@ exports[`renders without throwing 1`] = ` margin-left: -0.625rem; } -.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; - 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: 1.5rem; -} - -.c8 { - margin-top: 1.5rem; -} - -.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; @@ -2514,321 +437,9 @@ exports[`renders without throwing 1`] = ` margin-left: -0.625rem; } -.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; - 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/image.js b/packages/my-joy-beta/src/components/create-instance/image.js index 023c016f..24a0a2f9 100644 --- a/packages/my-joy-beta/src/components/create-instance/image.js +++ b/packages/my-joy-beta/src/components/create-instance/image.js @@ -6,6 +6,7 @@ import Flex from 'styled-flex-component'; import remcalc from 'remcalc'; import { Row, Col } from 'react-styled-flexboxgrid'; import titleCase from 'title-case'; +import includes from 'lodash.includes'; import { H3, @@ -47,47 +48,54 @@ const getImage = name => { } }; -const getImageByID = (id, images) => { - const image = images - .map(image => ({ - ...image, - versions: (image.versions || []).filter(version => version.id === id) - })) - .filter(e => e.versions.length)[0]; - return image - ? { - imageName: image.imageName, - name: image.versions[0].name, - version: image.versions[0].version - } - : {}; -}; - -export const Preview = ({ imageID, images, isVmSelected, onEdit }) => ( +export const Preview = ({ name, version, isVm }) => (

- {titleCase(getImageByID(imageID, images).name)} -{' '} - {getImageByID(imageID, images).version} + {name} - {version}

-

- {isVmSelected ? 'Hardware Virtual Machine' : 'Infrastructure Container'}{' '} -

+

{isVm ? 'Hardware Virtual Machine' : 'Infrastructure Container'}

- ); -export default ({ - handleSubmit, - pristine, - imageID, - images = [], - isVmSelected -}) => ( -
+const Image = ({ onClick, active, ...image }) => { + const { imageName = '', versions = [] } = image; + + const ids = [`image-card-${imageName}`, `image-img-${imageName}`]; + const handleClick = ev => + includes(ids, ev.target.id) ? onClick(image) : null; + + return ( + + + {imageName} +

{titleCase(imageName)}

+ + + + {versions.map(({ name, version, id }) => ( + + ))} + + + + + ); +}; + +export const ImageType = () => ( + @@ -96,46 +104,20 @@ export default ({ - - {images && - images.filter(i => i.isVm === isVmSelected).map(image => ( - - - {image.imageName} -

{titleCase(image.imageName)}

- - - - {image.versions && - image.versions.map(version => ( - - ))} - - - - - ))} - - - - +
+); + +export default ({ images = [], onSelectLatest }) => ( +
+ + {images.map(({ imageName, ...image }) => ( + + ))} +
); diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png index 2dd88580..a1917c4d 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/networks-ui-js-networks-loading-expanded-1-snap.png b/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/networks-ui-js-networks-loading-expanded-1-snap.png index 4f0a43bd..3be268ea 100644 Binary files a/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/networks-ui-js-networks-loading-expanded-1-snap.png and b/packages/my-joy-beta/src/containers/create-instance/__tests__/__image_snapshots__/networks-ui-js-networks-loading-expanded-1-snap.png differ 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 16ba3f07..2d4753fb 100644 --- a/packages/my-joy-beta/src/containers/create-instance/image.js +++ b/packages/my-joy-beta/src/containers/create-instance/image.js @@ -1,31 +1,40 @@ import React, { Fragment } from 'react'; import { compose, graphql } from 'react-apollo'; import ReduxForm from 'declarative-redux-form'; +import { change } from 'redux-form'; import { connect } from 'react-redux'; import { set } from 'react-redux-values'; +import { Margin } from 'styled-components-spacing'; import includes from 'lodash.includes'; +import sortBy from 'lodash.sortby'; +import findIndex from 'lodash.findindex'; +import find from 'lodash.find'; +import reverse from 'lodash.reverse'; import get from 'lodash.get'; -import { InstanceTypeIcon, StatusLoader } from 'joyent-ui-toolkit'; +import { InstanceTypeIcon, StatusLoader, Button } from 'joyent-ui-toolkit'; import Description from '@components/description'; -import Image, { Preview } from '@components/create-instance/image'; +import Image, { Preview, ImageType } from '@components/create-instance/image'; import Title from '@components/create-instance/title'; import imageData from '@data/images-map.json'; -import getImages from '@graphql/get-images.gql'; +import GetImages from '@graphql/get-images.gql'; const ImageContainer = ({ expanded, - image, + proceeded, + image = {}, handleNext, handleEdit, + handleSelectLatest, loading, images, vms }) => ( + {console.log({ image, vms })} } > Instance type and image @@ -44,12 +53,19 @@ const ImageContainer = ({ </a> </Description> ) : null} + <ReduxForm + form="create-instance-vms" + destroyOnUnmount={false} + forceUnregisterOnUnmount={true} + initialValues={{ vms: true }} + > + {props => (loading || !expanded ? null : <ImageType {...props} />)} + </ReduxForm> <ReduxForm form="create-instance-image" destroyOnUnmount={false} forceUnregisterOnUnmount={true} initialValues={{ vms: true }} - onSubmit={handleNext} > {props => loading && expanded ? ( @@ -57,30 +73,44 @@ const ImageContainer = ({ ) : expanded ? ( <Image {...props} - isVmSelected={vms} - imageID={image} - images={images} - /> - ) : image ? ( - <Preview - isVmSelected={vms} - imageID={image} - images={images} - onEdit={handleEdit} + images={images.filter(i => i.isVm === vms)} + onSelectLatest={handleSelectLatest} /> + ) : image.id ? ( + <Preview {...image} /> ) : null } </ReduxForm> + <Fragment> + {expanded ? ( + <Margin bottom={4}> + <Button + type="button" + onClick={handleNext} + disabled={!image.id || vms !== image.isVm} + > + Next + </Button> + </Margin> + ) : proceeded ? ( + <Margin bottom={4}> + <Button type="button" onClick={handleEdit} secondary> + Edit + </Button> + </Margin> + ) : null} + </Fragment> </Fragment> ); export default compose( connect( - (state, ownProps) => { + ({ form, values }, ownProps) => { return { ...ownProps, - vms: get(state, 'form.create-instance-image.values.vms', false), - image: get(state, 'form.create-instance-image.values.image', null) + proceeded: get(values, 'create-instance-image-proceeded', false), + vms: get(form, 'create-instance-vms.values.vms', false), + image: get(form, 'create-instance-image.values.image', null) }; }, (dispatch, { history }) => ({ @@ -89,58 +119,76 @@ export default compose( return history.push(`/instances/~create/package`); }, - handleEdit: () => history.push(`/instances/~create/image`) + handleEdit: () => history.push(`/instances/~create/image`), + handleSelectLatest: ({ versions }) => { + const id = versions[versions.length - 1].id; + return dispatch(change('create-instance-image', 'image', id)); + } }) ), - graphql(getImages, { - props: ({ ownProps: { vms = false }, data: { loading, images = [] } }) => ({ - loading, - images: images.reduce((accumulator, image) => { - const isVm = !includes(image.type, 'DATASET'); + graphql(GetImages, { + props: ({ ownProps, data }) => { + const { image = '' } = ownProps; + const { loading = false, images = [] } = data; - if (isVm && !vms) { - return accumulator; - } + const values = images + .reduce((acc, img) => { + const isVm = !includes(img.type, 'DATASET'); - const name = - imageData[ - image.name - .split('-')[0] - .split(' ')[0] - .toLowerCase() - ]; + const imageName = + imageData[ + img.name + .split('-')[0] + .split(' ')[0] + .toLowerCase() + ]; - const exists = Boolean( - accumulator.filter(e => e.imageName === name && isVm === e.isVm) - .length - ); + const exists = Boolean(find(acc, { imageName, isVm })); - if (!exists) { - return accumulator.concat([ - { - imageName: name, - versions: [ - { - name: image.name, - version: image.version, - id: image.id - } - ], - isVm - } - ]); - } + const version = { + name: img.name, + version: img.version, + id: img.id + }; - return accumulator.map(({ versions, ...rest }) => ({ - ...rest, - versions: - rest.imageName === name && rest.isVm === isVm - ? versions.concat([ - { name: image.name, version: image.version, id: image.id } - ]) - : versions + if (!exists) { + return acc.concat([ + { + isVm, + imageName, + versions: [version] + } + ]); + } + + const index = findIndex(acc, { + imageName, + isVm + }); + + acc[index] = { + ...acc[index], + versions: acc[index].versions.concat([version]) + }; + + return acc; + }, []) + .map(({ versions, ...img }) => ({ + ...img, + active: Boolean(find(versions, ['id', image])), + versions: reverse(sortBy(versions, ['name'])) })); - }, []) - }) + + const selected = find(images, ['id', image]) || {}; + + return { + loading, + images: values, + image: { + ...selected, + isVm: !includes(selected.type || '', 'DATASET') + } + }; + } }) )(ImageContainer); 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 f2890418..5bef3d18 100644 --- a/packages/my-joy-beta/src/containers/create-instance/package.js +++ b/packages/my-joy-beta/src/containers/create-instance/package.js @@ -8,6 +8,7 @@ import { set } from 'react-redux-values'; import sortBy from 'lodash.sortby'; import find from 'lodash.find'; import includes from 'lodash.includes'; +import reverse from 'lodash.reverse'; import constantCase from 'constant-case'; import { reset } from 'redux-form'; @@ -192,7 +193,7 @@ export default compose( ...ownProps, sortBy: _sortBy, sortOrder: _sortOrder, - packages: _sortOrder === 'asc' ? filtered : filtered.reverse(), + packages: _sortOrder === 'asc' ? filtered : reverse(filtered), hasVms: vmSelected, selected: find(packages, ['id', pkgSelected]) }; diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/cns-ui-js-cns-loading-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/cns-ui-js-cns-loading-1-snap.png index b8a94cc8..92b6af88 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/cns-ui-js-cns-loading-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/cns-ui-js-cns-loading-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-loading-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-loading-1-snap.png index 473bea0f..3e107fff 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-loading-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-loading-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-loading-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-loading-1-snap.png index 3b2db560..47827c61 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-loading-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-loading-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-metadata-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-metadata-1-snap.png index a0bd3d83..32fa8702 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-metadata-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-metadata-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png index b79630e6..810415ac 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-1-snap.png index 217b0c57..29443b7b 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-editing-removing-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-editing-removing-1-snap.png index cfd82b46..9637a629 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-editing-removing-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-editing-removing-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-loading-1-snap.png b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-loading-1-snap.png index 0894488f..28cacf03 100644 Binary files a/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-loading-1-snap.png and b/packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-loading-1-snap.png differ diff --git a/packages/my-joy-beta/src/containers/instances/list.js b/packages/my-joy-beta/src/containers/instances/list.js index 906b8acf..918cd710 100644 --- a/packages/my-joy-beta/src/containers/instances/list.js +++ b/packages/my-joy-beta/src/containers/instances/list.js @@ -8,6 +8,7 @@ import forceArray from 'force-array'; import get from 'lodash.get'; import intercept from 'apr-intercept'; import find from 'lodash.find'; +import reverse from 'lodash.reverse'; import sort from 'lodash.sortby'; import remcalc from 'remcalc'; @@ -231,7 +232,7 @@ export default compose( return { // is sortOrder !== asc, reverse order - instances: sortOrder === 'asc' ? ascSorted : ascSorted.reverse(), + instances: sortOrder === 'asc' ? ascSorted : reverse(ascSorted), allowedActions, selected, statuses, diff --git a/packages/my-joy-beta/src/containers/instances/networks.js b/packages/my-joy-beta/src/containers/instances/networks.js index 24e3dbbc..e3e3e035 100644 --- a/packages/my-joy-beta/src/containers/instances/networks.js +++ b/packages/my-joy-beta/src/containers/instances/networks.js @@ -5,6 +5,7 @@ import { set } from 'react-redux-values'; import forceArray from 'force-array'; import { Margin } from 'styled-components-spacing'; import find from 'lodash.find'; +import reverse from 'lodash.reverse'; import sortBy from 'lodash.sortby'; import get from 'lodash.get'; @@ -82,7 +83,7 @@ export default compose( const instance = find(forceArray(machines), ['name', name]); const values = get(instance, 'networks', []); - const networks = sortBy(values, 'public').reverse(); + const networks = reverse(sortBy(values, 'public')); return { networks, diff --git a/packages/my-joy-beta/src/containers/instances/snapshots.js b/packages/my-joy-beta/src/containers/instances/snapshots.js index 47cc267f..4f44912b 100644 --- a/packages/my-joy-beta/src/containers/instances/snapshots.js +++ b/packages/my-joy-beta/src/containers/instances/snapshots.js @@ -4,6 +4,7 @@ import { connect } from 'react-redux'; import { stopSubmit, startSubmit, change, reset } from 'redux-form'; import { compose, graphql } from 'react-apollo'; import find from 'lodash.find'; +import reverse from 'lodash.reverse'; import get from 'lodash.get'; import sort from 'lodash.sortby'; import { set } from 'react-redux-values'; @@ -223,7 +224,7 @@ export default compose( return { ...rest, - snapshots: sortOrder === 'asc' ? ascSorted : ascSorted.reverse(), + snapshots: sortOrder === 'asc' ? ascSorted : reverse(ascSorted), selected, sortBy, sortOrder, diff --git a/packages/ui-toolkit/src/card/card.js b/packages/ui-toolkit/src/card/card.js index b4bfd29d..ef38c6e1 100644 --- a/packages/ui-toolkit/src/card/card.js +++ b/packages/ui-toolkit/src/card/card.js @@ -107,6 +107,10 @@ const Preview = styled.div` margin-bottom: ${remcalc(20)}; animation: ${fadeIn} 0.2s ease-in-out; + ${is('onClick')` + cursor: pointer; + `}; + ${is('active')` border: ${remcalc(1)} solid ${props => props.theme.primaryActive}; diff --git a/yarn.lock b/yarn.lock index 0d4739b4..9e68a634 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6662,6 +6662,10 @@ lodash.find@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.find/-/lodash.find-4.6.0.tgz#cb0704d47ab71789ffa0de8b97dd926fb88b13b1" +lodash.findindex@^4.6.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/lodash.findindex/-/lodash.findindex-4.6.0.tgz#a3245dee61fb9b6e0624b535125624bb69c11106" + lodash.flatten@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f" @@ -6746,6 +6750,10 @@ lodash.pick@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3" +lodash.reverse@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/lodash.reverse/-/lodash.reverse-4.0.1.tgz#1f2afedace2e16e660f3aa7c59d3300a6f25d13c" + lodash.some@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d"