From ff23179bfd65e3f7ec6623f616d86c2bc6342e1c Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Fri, 8 Sep 2017 16:44:08 +0100 Subject: [PATCH] feat(my-joyent): add Header Section to My-joyent --- packages/my-joyent/package.json | 3 +- .../__tests__/__snapshots__/home.spec.js.snap | 1163 ++++++++++++++ .../components/home/__tests__/home.spec.js | 21 + .../my-joyent/src/components/home/home.js | 49 + .../my-joyent/src/components/home/index.js | 1 + .../__snapshots__/section-nav.spec.js.snap | 177 +++ .../navigation/__tests__/section-nav.spec.js | 21 + .../src/components/navigation/index.js | 1 + .../src/components/navigation/section-nav.js | 24 + .../__snapshots__/index.spec.js.snap | 1395 ++++++++++++++++- .../containers/home/__tests__/index.spec.js | 13 +- .../my-joyent/src/containers/home/index.js | 9 +- packages/my-joyent/src/router.js | 4 +- packages/ui-toolkit/src/message/index.js | 4 +- 14 files changed, 2871 insertions(+), 14 deletions(-) create mode 100644 packages/my-joyent/src/components/home/__tests__/__snapshots__/home.spec.js.snap create mode 100644 packages/my-joyent/src/components/home/__tests__/home.spec.js create mode 100644 packages/my-joyent/src/components/home/home.js create mode 100644 packages/my-joyent/src/components/home/index.js create mode 100644 packages/my-joyent/src/components/navigation/__tests__/__snapshots__/section-nav.spec.js.snap create mode 100644 packages/my-joyent/src/components/navigation/__tests__/section-nav.spec.js create mode 100644 packages/my-joyent/src/components/navigation/section-nav.js diff --git a/packages/my-joyent/package.json b/packages/my-joyent/package.json index 63cd43a0..f5d9d13b 100644 --- a/packages/my-joyent/package.json +++ b/packages/my-joyent/package.json @@ -18,8 +18,7 @@ "lint-ci": "redrun -p lint-ci:*", "test": "NODE_ENV=test ./test/run --env=jsdom", "test-ci": - "echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/cp-frontend.xml ./test/run --env=jsdom --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/cp-frontend --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`", - "prepublish": "node scripts/postinstall" + "echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/cp-frontend.xml ./test/run --env=jsdom --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/cp-frontend --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`" }, "dependencies": { "apollo": "^0.2.2", diff --git a/packages/my-joyent/src/components/home/__tests__/__snapshots__/home.spec.js.snap b/packages/my-joyent/src/components/home/__tests__/__snapshots__/home.spec.js.snap new file mode 100644 index 00000000..b90e5e33 --- /dev/null +++ b/packages/my-joyent/src/components/home/__tests__/__snapshots__/home.spec.js.snap @@ -0,0 +1,1163 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +.c13 { + background-color: transparent; + text-decoration-skip: objects; + color: ; +} + +.c16 { + 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; + 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; + margin: 0; + 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-weight: 400; + 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: ; + background-image: none; + background-color: ; + border-radius: 0.25rem; + border: solid 0.0625rem; +} + +.c16::-moz-focus-inner, +.c16[type='button']::-moz-focus-inner, +.c16[type='reset']::-moz-focus-inner, +.c16[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c16:-moz-focusring, +.c16[type='button']:-moz-focusring, +.c16[type='reset']:-moz-focusring, +.c16[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c16:focus { + outline: 0; + text-decoration: none; + background-color: ; + border-color: ; +} + +.c16:hover { + background-color: ; + border: solid 0.0625rem; +} + +.c16:active, +.c16:active:hover, +.c16:active:focus { + background-image: none; + outline: 0; + background-color: ; + border-color: ; +} + +.c16[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c16 + button { + margin-left: 1.25rem; +} + +.c10 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 0.9375rem; +} + +.c4 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +.c5 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +.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; +} + +.c12 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + line-height: 1.5rem; + font-size: 0.9375rem; +} + +.c15 { + background-color: #FFFFFF; + padding: 0.75rem; + min-width: auto; + border: none; + box-shadow: none; +} + +.c15:hover, +.c15:focus, +.c15:active, +.c15:active:hover, +.c15:active:focus { + background-color: #FFFFFF; + border: none; + box-shadow: none; +} + +.c6 { + position: relative; + margin-bottom: 0.75rem; + background-color: ; + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); + border: 0.0625rem solid; +} + +.c7 { + position: absolute; + top: 0; + left: 0; + width: 2.25rem; + height: 100%; + background-color: ; +} + +.c8 { + padding: 0.75rem 0 0.84375rem 0; +} + +.c9 { + margin: 0 3.375rem 0.09375rem 3.375rem; + font-weight: 600; +} + +.c11 { + margin: 0.09375rem 3.375rem 0 3.375rem; +} + +.c14 { + position: absolute; + right: 0.1875rem; + top: 0.1875rem; +} + +.c2 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +.c3 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + color: ; + text-decoration: none; + cursor: pointer; +} + +.c3.active { + color: ; + cursor: default; +} + +.c1 { + list-style-type: none; + padding: 0; + margin: 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; +} + +.c2 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +.c3 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + color: ; + text-decoration: none; + cursor: pointer; +} + +.c3.active { + color: ; + cursor: default; +} + +.c1 { + list-style-type: none; + padding: 0; + margin: 0; +} + +
+ .c1 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +.c2 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + color: ; + text-decoration: none; + cursor: pointer; +} + +.c2.active { + color: ; + cursor: default; +} + +.c0 { + list-style-type: none; + padding: 0; + margin: 0; +} + +
    + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +.c1 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + color: ; + text-decoration: none; + cursor: pointer; +} + +.c1.active { + color: ; + cursor: default; +} + +
  • + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + color: ; + text-decoration: none; + cursor: pointer; +} + +.c0.active { + color: ; + cursor: default; +} + + + Instances + +
    • + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +
  • + Custom images +
    • + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +
  • + Docker images +
    • + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +
  • + Docker registries +
    • +
+
+ .c1 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +.c2 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +.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; +} + +
+ .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +.c1 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +
+ .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +

+ Instances +

+ .c0 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +
+
+ .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +.c1 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +
+ .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +

+ Create Instance +

+ .c0 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +
+
+
+ .c8 { + background-color: transparent; + text-decoration-skip: objects; + color: ; +} + +.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; + 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; + margin: 0; + 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-weight: 400; + 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: ; + background-image: none; + background-color: ; + border-radius: 0.25rem; + border: solid 0.0625rem; +} + +.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:focus { + outline: 0; + text-decoration: none; + background-color: ; + border-color: ; +} + +.c11:hover { + background-color: ; + border: solid 0.0625rem; +} + +.c11:active, +.c11:active:hover, +.c11:active:focus { + background-image: none; + outline: 0; + background-color: ; + border-color: ; +} + +.c11[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c11 + button { + margin-left: 1.25rem; +} + +.c5 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 0.9375rem; +} + +.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; +} + +.c7 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + line-height: 1.5rem; + font-size: 0.9375rem; +} + +.c10 { + background-color: #FFFFFF; + padding: 0.75rem; + min-width: auto; + border: none; + box-shadow: none; +} + +.c10:hover, +.c10:focus, +.c10:active, +.c10:active:hover, +.c10:active:focus { + background-color: #FFFFFF; + border: none; + box-shadow: none; +} + +.c1 { + position: relative; + margin-bottom: 0.75rem; + background-color: ; + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); + border: 0.0625rem solid; +} + +.c2 { + position: absolute; + top: 0; + left: 0; + width: 2.25rem; + height: 100%; + background-color: ; +} + +.c3 { + padding: 0.75rem 0 0.84375rem 0; +} + +.c4 { + margin: 0 3.375rem 0.09375rem 3.375rem; + font-weight: 600; +} + +.c6 { + margin: 0.09375rem 3.375rem 0 3.375rem; +} + +.c9 { + position: absolute; + right: 0.1875rem; + top: 0.1875rem; +} + +
+ .c7 { + background-color: transparent; + text-decoration-skip: objects; + color: ; +} + +.c10 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; + 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; + margin: 0; + 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-weight: 400; + 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: ; + background-image: none; + background-color: ; + border-radius: 0.25rem; + border: solid 0.0625rem; +} + +.c10::-moz-focus-inner, +.c10[type='button']::-moz-focus-inner, +.c10[type='reset']::-moz-focus-inner, +.c10[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c10:-moz-focusring, +.c10[type='button']:-moz-focusring, +.c10[type='reset']:-moz-focusring, +.c10[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c10:focus { + outline: 0; + text-decoration: none; + background-color: ; + border-color: ; +} + +.c10:hover { + background-color: ; + border: solid 0.0625rem; +} + +.c10:active, +.c10:active:hover, +.c10:active:focus { + background-image: none; + outline: 0; + background-color: ; + border-color: ; +} + +.c10[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c10 + button { + margin-left: 1.25rem; +} + +.c4 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 0.9375rem; +} + +.c6 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + line-height: 1.5rem; + font-size: 0.9375rem; +} + +.c9 { + background-color: #FFFFFF; + padding: 0.75rem; + min-width: auto; + border: none; + box-shadow: none; +} + +.c9:hover, +.c9:focus, +.c9:active, +.c9:active:hover, +.c9:active:focus { + background-color: #FFFFFF; + border: none; + box-shadow: none; +} + +.c0 { + position: relative; + margin-bottom: 0.75rem; + background-color: ; + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); + border: 0.0625rem solid; +} + +.c1 { + position: absolute; + top: 0; + left: 0; + width: 2.25rem; + height: 100%; + background-color: ; +} + +.c2 { + padding: 0.75rem 0 0.84375rem 0; +} + +.c3 { + margin: 0 3.375rem 0.09375rem 3.375rem; + font-weight: 600; +} + +.c5 { + margin: 0.09375rem 3.375rem 0 3.375rem; +} + +.c8 { + position: absolute; + right: 0.1875rem; + top: 0.1875rem; +} + +
+ .c0 { + position: absolute; + top: 0; + left: 0; + width: 2.25rem; + height: 100%; + background-color: ; +} + +
+ .c5 { + background-color: transparent; + text-decoration-skip: objects; + color: ; +} + +.c2 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 0.9375rem; +} + +.c4 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + line-height: 1.5rem; + font-size: 0.9375rem; +} + +.c0 { + padding: 0.75rem 0 0.84375rem 0; +} + +.c1 { + margin: 0 3.375rem 0.09375rem 3.375rem; + font-weight: 600; +} + +.c3 { + margin: 0.09375rem 3.375rem 0 3.375rem; +} + +
+ .c1 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 0.9375rem; +} + +.c0 { + margin: 0 3.375rem 0.09375rem 3.375rem; + font-weight: 600; +} + +

+ Choosing deployement data center +

+ .c2 { + background-color: transparent; + text-decoration-skip: objects; + color: ; +} + +.c1 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + line-height: 1.5rem; + font-size: 0.9375rem; +} + +.c0 { + margin: 0.09375rem 3.375rem 0 3.375rem; +} + +

+ .c0 { + background-color: transparent; + text-decoration-skip: objects; + color: ; +} + +

+ Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. + .c0 { + background-color: transparent; + text-decoration-skip: objects; + color: ; +} + + + Learn More + +

+

+
+ .c2 { + 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; + 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; + margin: 0; + 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-weight: 400; + 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: ; + background-image: none; + background-color: ; + border-radius: 0.25rem; + border: solid 0.0625rem; +} + +.c2::-moz-focus-inner, +.c2[type='button']::-moz-focus-inner, +.c2[type='reset']::-moz-focus-inner, +.c2[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2:-moz-focusring, +.c2[type='button']:-moz-focusring, +.c2[type='reset']:-moz-focusring, +.c2[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c2:focus { + outline: 0; + text-decoration: none; + background-color: ; + border-color: ; +} + +.c2:hover { + background-color: ; + border: solid 0.0625rem; +} + +.c2:active, +.c2:active:hover, +.c2:active:focus { + background-image: none; + outline: 0; + background-color: ; + border-color: ; +} + +.c2[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c2 + button { + margin-left: 1.25rem; +} + +.c1 { + background-color: #FFFFFF; + padding: 0.75rem; + min-width: auto; + border: none; + box-shadow: none; +} + +.c1:hover, +.c1:focus, +.c1:active, +.c1:active:hover, +.c1:active:focus { + background-color: #FFFFFF; + border: none; + box-shadow: none; +} + +.c0 { + position: absolute; + right: 0.1875rem; + top: 0.1875rem; +} + + +
+
+
+`; diff --git a/packages/my-joyent/src/components/home/__tests__/home.spec.js b/packages/my-joyent/src/components/home/__tests__/home.spec.js new file mode 100644 index 00000000..4da477ed --- /dev/null +++ b/packages/my-joyent/src/components/home/__tests__/home.spec.js @@ -0,0 +1,21 @@ +/** + * @jest-environment jsdom + */ + +import React from 'react'; +import renderer from 'react-test-renderer'; +import 'jest-styled-components'; + +import { Router } from '@mocks/'; +import Home from '../home'; + +it('renders without throwing', () => { + const tree = renderer + .create( + + + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/packages/my-joyent/src/components/home/home.js b/packages/my-joyent/src/components/home/home.js new file mode 100644 index 00000000..cde4f5b5 --- /dev/null +++ b/packages/my-joyent/src/components/home/home.js @@ -0,0 +1,49 @@ +import React, { Component } from 'react'; +import { Row } from 'react-styled-flexboxgrid'; +import { SectionNav } from '@components/navigation'; +import { Message, Breadcrumb, BreadcrumbItem, Anchor } from 'joyent-ui-toolkit'; + +class Home extends Component { + constructor(props) { + super(props); + + this.state = { + showMessage: true + }; + + this.closeMessage = this.closeMessage.bind(this); + } + + closeMessage() { + this.setState({ + showMessage: false + }); + } + + render() { + const _msg = this.state.showMessage ? ( + +

+ Not all data centres have all configurations of instances available. + Make sure that you choose the data center that suits your + requirements. Learn More +

+ + ) : null; + return ( +
+ + + Instances + Create Instance + + {_msg} +
+ ); + } +} + +export default Home; diff --git a/packages/my-joyent/src/components/home/index.js b/packages/my-joyent/src/components/home/index.js new file mode 100644 index 00000000..a0843e72 --- /dev/null +++ b/packages/my-joyent/src/components/home/index.js @@ -0,0 +1 @@ +export { default as Home } from './home'; diff --git a/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/section-nav.spec.js.snap b/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/section-nav.spec.js.snap new file mode 100644 index 00000000..0364d52b --- /dev/null +++ b/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/section-nav.spec.js.snap @@ -0,0 +1,177 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without throwing 1`] = ` +.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; +} + +.c2 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +.c3 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + color: ; + text-decoration: none; + cursor: pointer; +} + +.c3.active { + color: ; + cursor: default; +} + +.c1 { + list-style-type: none; + padding: 0; + margin: 0; +} + +
+ .c1 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +.c2 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + color: ; + text-decoration: none; + cursor: pointer; +} + +.c2.active { + color: ; + cursor: default; +} + +.c0 { + list-style-type: none; + padding: 0; + margin: 0; +} + +
    + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +.c1 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + color: ; + text-decoration: none; + cursor: pointer; +} + +.c1.active { + color: ; + cursor: default; +} + +
  • + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + color: ; + text-decoration: none; + cursor: pointer; +} + +.c0.active { + color: ; + cursor: default; +} + + + Instances + +
    • + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +
  • + Custom images +
    • + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +
  • + Docker images +
    • + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +
  • + Docker registries +
    • +
+
+`; diff --git a/packages/my-joyent/src/components/navigation/__tests__/section-nav.spec.js b/packages/my-joyent/src/components/navigation/__tests__/section-nav.spec.js new file mode 100644 index 00000000..37412d22 --- /dev/null +++ b/packages/my-joyent/src/components/navigation/__tests__/section-nav.spec.js @@ -0,0 +1,21 @@ +/** + * @jest-environment jsdom + */ + +import React from 'react'; +import renderer from 'react-test-renderer'; +import 'jest-styled-components'; + +import { SectionNav } from '../'; +import { Router } from '@mocks/'; + +it('renders without throwing', () => { + const tree = renderer + .create( + + + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/packages/my-joyent/src/components/navigation/index.js b/packages/my-joyent/src/components/navigation/index.js index c3eeaef3..32868a6f 100644 --- a/packages/my-joyent/src/components/navigation/index.js +++ b/packages/my-joyent/src/components/navigation/index.js @@ -1,2 +1,3 @@ export { default as Header } from './header'; +export { default as SectionNav } from './section-nav'; export { default as NotFound } from './not-found'; diff --git a/packages/my-joyent/src/components/navigation/section-nav.js b/packages/my-joyent/src/components/navigation/section-nav.js new file mode 100644 index 00000000..7978221f --- /dev/null +++ b/packages/my-joyent/src/components/navigation/section-nav.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { Row } from 'react-styled-flexboxgrid'; +import { + SectionList, + SectionListItem, + SectionListNavLink +} from 'joyent-ui-toolkit'; + +const SectionNav = () => ( + + + + + Instances + + + Custom images + Docker images + Docker registries + + +); + +export default SectionNav; diff --git a/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap index 7f24793a..3efffa48 100644 --- a/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap @@ -1,6 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renders without throwing 1`] = ` +exports[`renders without throwing 1`] = ` +.c1 { + 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; +} + .c0 { margin-right: auto; margin-left: auto; @@ -14,6 +33,220 @@ exports[`renders without throwing 1`] = ` flex-flow: column; } +.c14 { + background-color: transparent; + text-decoration-skip: objects; + color: ; +} + +.c17 { + 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; + 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; + margin: 0; + 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-weight: 400; + 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: ; + background-image: none; + background-color: ; + border-radius: 0.25rem; + border: solid 0.0625rem; +} + +.c17::-moz-focus-inner, +.c17[type='button']::-moz-focus-inner, +.c17[type='reset']::-moz-focus-inner, +.c17[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c17:-moz-focusring, +.c17[type='button']:-moz-focusring, +.c17[type='reset']:-moz-focusring, +.c17[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c17:focus { + outline: 0; + text-decoration: none; + background-color: ; + border-color: ; +} + +.c17:hover { + background-color: ; + border: solid 0.0625rem; +} + +.c17:active, +.c17:active:hover, +.c17:active:focus { + background-image: none; + outline: 0; + background-color: ; + border-color: ; +} + +.c17[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c17 + button { + margin-left: 1.25rem; +} + +.c11 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 0.9375rem; +} + +.c5 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +.c6 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +.c13 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + line-height: 1.5rem; + font-size: 0.9375rem; +} + +.c16 { + background-color: #FFFFFF; + padding: 0.75rem; + min-width: auto; + border: none; + box-shadow: none; +} + +.c16:hover, +.c16:focus, +.c16:active, +.c16:active:hover, +.c16:active:focus { + background-color: #FFFFFF; + border: none; + box-shadow: none; +} + +.c7 { + position: relative; + margin-bottom: 0.75rem; + background-color: ; + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); + border: 0.0625rem solid; +} + +.c8 { + position: absolute; + top: 0; + left: 0; + width: 2.25rem; + height: 100%; + background-color: ; +} + +.c9 { + padding: 0.75rem 0 0.84375rem 0; +} + +.c10 { + margin: 0 3.375rem 0.09375rem 3.375rem; + font-weight: 600; +} + +.c12 { + margin: 0.09375rem 3.375rem 0 3.375rem; +} + +.c15 { + position: absolute; + right: 0.1875rem; + top: 0.1875rem; +} + +.c3 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +.c4 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + color: ; + text-decoration: none; + cursor: pointer; +} + +.c4.active { + color: ; + cursor: default; +} + +.c2 { + list-style-type: none; + padding: 0; + margin: 0; +} + @media only screen and (min-width:48em) { .c0 { width: 46rem; @@ -35,6 +268,1164 @@ exports[`renders without throwing 1`] = `
- Welcome to your joyent portal + .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; +} + +.c13 { + background-color: transparent; + text-decoration-skip: objects; + color: ; +} + +.c16 { + 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; + 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; + margin: 0; + 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-weight: 400; + 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: ; + background-image: none; + background-color: ; + border-radius: 0.25rem; + border: solid 0.0625rem; +} + +.c16::-moz-focus-inner, +.c16[type='button']::-moz-focus-inner, +.c16[type='reset']::-moz-focus-inner, +.c16[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c16:-moz-focusring, +.c16[type='button']:-moz-focusring, +.c16[type='reset']:-moz-focusring, +.c16[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c16:focus { + outline: 0; + text-decoration: none; + background-color: ; + border-color: ; +} + +.c16:hover { + background-color: ; + border: solid 0.0625rem; +} + +.c16:active, +.c16:active:hover, +.c16:active:focus { + background-image: none; + outline: 0; + background-color: ; + border-color: ; +} + +.c16[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c16 + button { + margin-left: 1.25rem; +} + +.c10 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 0.9375rem; +} + +.c4 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +.c5 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +.c12 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + line-height: 1.5rem; + font-size: 0.9375rem; +} + +.c15 { + background-color: #FFFFFF; + padding: 0.75rem; + min-width: auto; + border: none; + box-shadow: none; +} + +.c15:hover, +.c15:focus, +.c15:active, +.c15:active:hover, +.c15:active:focus { + background-color: #FFFFFF; + border: none; + box-shadow: none; +} + +.c6 { + position: relative; + margin-bottom: 0.75rem; + background-color: ; + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); + border: 0.0625rem solid; +} + +.c7 { + position: absolute; + top: 0; + left: 0; + width: 2.25rem; + height: 100%; + background-color: ; +} + +.c8 { + padding: 0.75rem 0 0.84375rem 0; +} + +.c9 { + margin: 0 3.375rem 0.09375rem 3.375rem; + font-weight: 600; +} + +.c11 { + margin: 0.09375rem 3.375rem 0 3.375rem; +} + +.c14 { + position: absolute; + right: 0.1875rem; + top: 0.1875rem; +} + +.c2 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +.c3 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + color: ; + text-decoration: none; + cursor: pointer; +} + +.c3.active { + color: ; + cursor: default; +} + +.c1 { + list-style-type: none; + padding: 0; + margin: 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; +} + +.c2 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +.c3 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + color: ; + text-decoration: none; + cursor: pointer; +} + +.c3.active { + color: ; + cursor: default; +} + +.c1 { + list-style-type: none; + padding: 0; + margin: 0; +} + +
+ .c1 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +.c2 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + color: ; + text-decoration: none; + cursor: pointer; +} + +.c2.active { + color: ; + cursor: default; +} + +.c0 { + list-style-type: none; + padding: 0; + margin: 0; +} + +
    + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +.c1 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + color: ; + text-decoration: none; + cursor: pointer; +} + +.c1.active { + color: ; + cursor: default; +} + +
  • + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + color: ; + text-decoration: none; + cursor: pointer; +} + +.c0.active { + color: ; + cursor: default; +} + + + Instances + +
    • + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +
  • + Custom images +
    • + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +
  • + Docker images +
    • + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + +
  • + Docker registries +
    • +
+
+ .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 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +.c2 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +
+ .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +.c1 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +
+ .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +

+ Instances +

+ .c0 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +
+
+ .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +.c1 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +
+ .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +

+ Create Instance +

+ .c0 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +
+
+
+ .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; +} + +.c8 { + background-color: transparent; + text-decoration-skip: objects; + color: ; +} + +.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; + 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; + margin: 0; + 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-weight: 400; + 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: ; + background-image: none; + background-color: ; + border-radius: 0.25rem; + border: solid 0.0625rem; +} + +.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:focus { + outline: 0; + text-decoration: none; + background-color: ; + border-color: ; +} + +.c11:hover { + background-color: ; + border: solid 0.0625rem; +} + +.c11:active, +.c11:active:hover, +.c11:active:focus { + background-image: none; + outline: 0; + background-color: ; + border-color: ; +} + +.c11[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c11 + button { + margin-left: 1.25rem; +} + +.c5 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 0.9375rem; +} + +.c7 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + line-height: 1.5rem; + font-size: 0.9375rem; +} + +.c10 { + background-color: #FFFFFF; + padding: 0.75rem; + min-width: auto; + border: none; + box-shadow: none; +} + +.c10:hover, +.c10:focus, +.c10:active, +.c10:active:hover, +.c10:active:focus { + background-color: #FFFFFF; + border: none; + box-shadow: none; +} + +.c1 { + position: relative; + margin-bottom: 0.75rem; + background-color: ; + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); + border: 0.0625rem solid; +} + +.c2 { + position: absolute; + top: 0; + left: 0; + width: 2.25rem; + height: 100%; + background-color: ; +} + +.c3 { + padding: 0.75rem 0 0.84375rem 0; +} + +.c4 { + margin: 0 3.375rem 0.09375rem 3.375rem; + font-weight: 600; +} + +.c6 { + margin: 0.09375rem 3.375rem 0 3.375rem; +} + +.c9 { + position: absolute; + right: 0.1875rem; + top: 0.1875rem; +} + +
+ .c7 { + background-color: transparent; + text-decoration-skip: objects; + color: ; +} + +.c10 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; + 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; + margin: 0; + 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-weight: 400; + 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: ; + background-image: none; + background-color: ; + border-radius: 0.25rem; + border: solid 0.0625rem; +} + +.c10::-moz-focus-inner, +.c10[type='button']::-moz-focus-inner, +.c10[type='reset']::-moz-focus-inner, +.c10[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c10:-moz-focusring, +.c10[type='button']:-moz-focusring, +.c10[type='reset']:-moz-focusring, +.c10[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c10:focus { + outline: 0; + text-decoration: none; + background-color: ; + border-color: ; +} + +.c10:hover { + background-color: ; + border: solid 0.0625rem; +} + +.c10:active, +.c10:active:hover, +.c10:active:focus { + background-image: none; + outline: 0; + background-color: ; + border-color: ; +} + +.c10[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c10 + button { + margin-left: 1.25rem; +} + +.c4 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 0.9375rem; +} + +.c6 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + line-height: 1.5rem; + font-size: 0.9375rem; +} + +.c9 { + background-color: #FFFFFF; + padding: 0.75rem; + min-width: auto; + border: none; + box-shadow: none; +} + +.c9:hover, +.c9:focus, +.c9:active, +.c9:active:hover, +.c9:active:focus { + background-color: #FFFFFF; + border: none; + box-shadow: none; +} + +.c0 { + position: relative; + margin-bottom: 0.75rem; + background-color: ; + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); + border: 0.0625rem solid; +} + +.c1 { + position: absolute; + top: 0; + left: 0; + width: 2.25rem; + height: 100%; + background-color: ; +} + +.c2 { + padding: 0.75rem 0 0.84375rem 0; +} + +.c3 { + margin: 0 3.375rem 0.09375rem 3.375rem; + font-weight: 600; +} + +.c5 { + margin: 0.09375rem 3.375rem 0 3.375rem; +} + +.c8 { + position: absolute; + right: 0.1875rem; + top: 0.1875rem; +} + +
+ .c0 { + position: absolute; + top: 0; + left: 0; + width: 2.25rem; + height: 100%; + background-color: ; +} + +
+ .c5 { + background-color: transparent; + text-decoration-skip: objects; + color: ; +} + +.c2 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 0.9375rem; +} + +.c4 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + line-height: 1.5rem; + font-size: 0.9375rem; +} + +.c0 { + padding: 0.75rem 0 0.84375rem 0; +} + +.c1 { + margin: 0 3.375rem 0.09375rem 3.375rem; + font-weight: 600; +} + +.c3 { + margin: 0.09375rem 3.375rem 0 3.375rem; +} + +
+ .c1 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 0.9375rem; +} + +.c0 { + margin: 0 3.375rem 0.09375rem 3.375rem; + font-weight: 600; +} + +

+ Choosing deployement data center +

+ .c2 { + background-color: transparent; + text-decoration-skip: objects; + color: ; +} + +.c1 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + line-height: 1.5rem; + font-size: 0.9375rem; +} + +.c0 { + margin: 0.09375rem 3.375rem 0 3.375rem; +} + +

+ .c0 { + background-color: transparent; + text-decoration-skip: objects; + color: ; +} + +

+ Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. + .c0 { + background-color: transparent; + text-decoration-skip: objects; + color: ; +} + + + Learn More + +

+

+
+ .c2 { + 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; + 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; + margin: 0; + 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-weight: 400; + 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: ; + background-image: none; + background-color: ; + border-radius: 0.25rem; + border: solid 0.0625rem; +} + +.c2::-moz-focus-inner, +.c2[type='button']::-moz-focus-inner, +.c2[type='reset']::-moz-focus-inner, +.c2[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c2:-moz-focusring, +.c2[type='button']:-moz-focusring, +.c2[type='reset']:-moz-focusring, +.c2[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c2:focus { + outline: 0; + text-decoration: none; + background-color: ; + border-color: ; +} + +.c2:hover { + background-color: ; + border: solid 0.0625rem; +} + +.c2:active, +.c2:active:hover, +.c2:active:focus { + background-image: none; + outline: 0; + background-color: ; + border-color: ; +} + +.c2[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c2 + button { + margin-left: 1.25rem; +} + +.c1 { + background-color: #FFFFFF; + padding: 0.75rem; + min-width: auto; + border: none; + box-shadow: none; +} + +.c1:hover, +.c1:focus, +.c1:active, +.c1:active:hover, +.c1:active:focus { + background-color: #FFFFFF; + border: none; + box-shadow: none; +} + +.c0 { + position: absolute; + right: 0.1875rem; + top: 0.1875rem; +} + + +
+
+
`; diff --git a/packages/my-joyent/src/containers/home/__tests__/index.spec.js b/packages/my-joyent/src/containers/home/__tests__/index.spec.js index ae64bee5..b41669ff 100644 --- a/packages/my-joyent/src/containers/home/__tests__/index.spec.js +++ b/packages/my-joyent/src/containers/home/__tests__/index.spec.js @@ -6,9 +6,16 @@ import React from 'react'; import renderer from 'react-test-renderer'; import 'jest-styled-components'; -import Home from '../'; +import HomeHOC from '../'; +import { Router } from '@mocks/'; -it('renders without throwing', () => { - const tree = renderer.create().toJSON(); +it('renders without throwing', () => { + const tree = renderer + .create( + + + + ) + .toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/packages/my-joyent/src/containers/home/index.js b/packages/my-joyent/src/containers/home/index.js index 6359cbfd..689618bc 100644 --- a/packages/my-joyent/src/containers/home/index.js +++ b/packages/my-joyent/src/containers/home/index.js @@ -1,8 +1,11 @@ import React from 'react'; import { LayoutContainer } from '@components/layout'; +import { Home } from '@components/home'; -const Home = () => ( - Welcome to your joyent portal +const HomeHOC = () => ( + + + ); -export default Home; +export default HomeHOC; diff --git a/packages/my-joyent/src/router.js b/packages/my-joyent/src/router.js index 856ce803..abc33de8 100644 --- a/packages/my-joyent/src/router.js +++ b/packages/my-joyent/src/router.js @@ -4,7 +4,7 @@ import styled from 'styled-components'; import { Header } from '@containers/navigation'; -import Home from '@containers/home'; +import HomeHOC from '@containers/home'; import { NotFound } from '@components/navigation'; @@ -20,7 +20,7 @@ const Router = ( - + diff --git a/packages/ui-toolkit/src/message/index.js b/packages/ui-toolkit/src/message/index.js index 3dff516c..f11d07d5 100644 --- a/packages/ui-toolkit/src/message/index.js +++ b/packages/ui-toolkit/src/message/index.js @@ -51,7 +51,7 @@ const StyledClose = styled(CloseButton)` top: ${unitcalc(0.5)}; `; -const Message = ({ title, message, onCloseClick, ...type }) => { +const Message = ({ title, message, onCloseClick, children, ...type }) => { const renderTitle = title ? {title} : null; const renderClose = onCloseClick ? ( @@ -63,7 +63,7 @@ const Message = ({ title, message, onCloseClick, ...type }) => { {renderTitle} - {message} + {message || children} {renderClose}