feat(*): new onboarding process (#194)

* feat(*) setup basics of new onboarding process Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(*) provide more pages Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(*) use kradio Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(*) add tests Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(*) dataplanes overview adjustments Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(*) add tests Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(*) add sample diagram Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(*) style adjustmets and last step Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(*) add hoverable svg wrapper Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(*) add global onboarding page wrapper Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * refactor(*) remove old onboarding Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(*) adjustment of main containers Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) add new header Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) adjust navigation and page Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) adjust views navigation/forms and titles Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) adjust not found and header Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) add animation/extend tailwind Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) add first graph and example animtion Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) add rest graphs Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) add demo options Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) code cleanup Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) add tests and small cleanups Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) change loader and overall adjustments Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * (fix) adjust selector Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * wip * feat(onboarding) add welcome screen Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) adjust welcome screen Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) adjust welcome screen Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) css adjustments Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onbaording) fix tests Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onbaording) cleanup Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onbaording) extract variables Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onbaording) animation adjustments Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) add review changes Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) adjust api Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) adjust descriptions Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) add multizone step Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) add multizone status step Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * tests(onboarding) fix onboarding test Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * fix(onboarding) scss variable adjustement Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * fix(onboarding) complete onboarding Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) code adjustments and new loading option Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) temporary disable routing to enable checks on netlify Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) text adjustments Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) disable router mocks Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) demo adjustments Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * fix(onboarding) typo Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) small adjustments Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com> * feat(onboarding) adjust naming Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com>
kumahq · Jan 20, 2022 · 53691f6 · 53691f6
1 parent 2a253c2
commit 53691f6
Show file tree

Hide file tree

Showing 89 changed files with 10,298 additions and 1,605 deletions.
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@kongponents/kicon": "^5.0.7",
     "@kongponents/kmodal": "^4.0.2",
     "@kongponents/kpop": "^4.0.2",
+    "@kongponents/kradio": "^4.0.2",
     "@kongponents/krumbs": "^4.0.2",
     "@kongponents/ktable": "^4.0.2",
     "@kongponents/ktabs": "^4.0.2",

diff --git a/src/App.vue b/src/App.vue
@@ -7,16 +7,14 @@
       <KLoader />
     </div>
 
-    <div v-else>
+    <div v-else-if="status !== 'OK'">
       <GlobalHeader />
-      <router-view v-if="status === 'OK'" />
-      <main
-        v-else
-        class="main-content"
-      >
+      <main class="main-content">
         <ApiErrorMessage />
       </main>
     </div>
+
+    <router-view v-else />
   </div>
 </template>
 

diff --git a/src/Cache.ts b/src/Cache.ts
diff --git a/src/assets/images/kuma_gui.png b/src/assets/images/kuma_gui.png
diff --git a/src/assets/images/new-service-demo.svg b/src/assets/images/new-service-demo.svg
diff --git a/src/assets/images/new-service-manually.svg b/src/assets/images/new-service-manually.svg
diff --git a/src/assets/images/onboarding-background.svg b/src/assets/images/onboarding-background.svg
diff --git a/src/assets/styles/components.scss b/src/assets/styles/components.scss
@@ -157,14 +157,18 @@
   background-color: #0089eb;
 }
 
+.external-link-code-block {
+  @apply text-sm block p-4;
+
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  background-color: var(--code-background);
+}
+
 .main-content {
   padding: 44px;
   transition: var(--transitionTiming) margin var(--transition);
 }
-.page {
-  max-width: 76rem;
-  margin: 0 auto;
-}
+
 .main-content-container {
   max-width: var(--global-content-max-width);
   margin: 0 auto;

diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
@@ -1,13 +1,6 @@
 /* Base */
-
-html {
-  /* font-size: var(--base-font-size-root); */
-}
-
 body {
-  padding-top: var(--topbar-height);
   font-family: var(--base-font-family);
-  /* font-size: var(--base-font-size); */
 }
 
 button, [type=button], [type=reset], [type=submit] {

diff --git a/src/assets/styles/transitions.scss b/src/assets/styles/transitions.scss
@@ -2,8 +2,7 @@
 
 .fade-enter-active,
 .fade-leave-active {
-  /* transition: opacity .12s linear; */
-  transition: opacity 0 linear;
+  transition: opacity .2s linear;
 }
 
 .fade-enter,

diff --git a/src/assets/styles/utilities.scss b/src/assets/styles/utilities.scss
@@ -67,13 +67,6 @@
 
 /* New for Kuma */
 
-.arrow-link {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  color: var(--blue-4);
-}
-
 .k-button {
   font-weight: normal !important;
   display: flex;

diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
@@ -77,7 +77,6 @@
   --subnavWidth: 210px;
   --subnavHorizontalMargin: 1rem;
   --sidebarBackground: var(--white);
-  --headerHeight: var(--topbar-height);
   --transition: cubic-bezier(1.0, 0.5, 0.8, 1.0);
   --transitionTiming: 0.1s; // 100ms
 
@@ -108,6 +107,10 @@
   --core-theme-color-dark: #{darken($base-theme-color, $adjuster-3)};
   --core-theme-color-darker: #{darken($base-theme-color, $adjuster-4)};
 
+  // Code background
+
+  --code-background: rgba(150, 58, 133, 0.05);
+
   // Buttons, Forms
   // These are overrides of existing Kongponent variables.
   --KButtonPrimaryBase: var(--core-theme-color);
@@ -150,4 +153,40 @@
 
   // Empty State
   --KEmptyStateContentWidth: 85%;
+
+  // Onboarding
+
+  --kuma-purple-1: #260D50;
+  --kuma-purple-1-rgb: 38, 13, 80;
+
+  --kuma-purple-2: #822DC5;
+  --kuma-purple-2-rgb: 130, 45, 197;
+
+  --kuma-gradient: var(--kuma-purple-1), var(--kuma-purple-2);
+
+  --onboarding-green: #5da46f;
+  --onboarding-green-darken: #539464;
+
+  --onboarding-blueish: #f6f8fd;
+  --onboarding-blueish-darken: #e1e8f8;
+
+  --OnboardingTitle: var(--kuma-gradient);
+
+  --OnboardingRadio: var(--onboarding-green);
+
+  --OnboardingPageGraphBackground: var(--onboarding-blueish);
+
+  --OnboardingNextButton: var(--onboarding-green);
+  --OnboardingNextButtonHover: var(--onboarding-green-darken);
+
+  --OnboardingBackButton: var(--onboarding-blueish);
+  --OnboardingBackButtonHover: var(--onboarding-blueish-darken);
+
+  --OnboardingSkipSetupButton: rgba(var(--kuma-purple-1-rgb), 0.3);
+
+  --OnbordingBoxBorder: #7b2bbc;
+
+  --OnboardingLoading: var(--kuma-purple-2-rgb);
+
+  --OnboardingShadow: 4px 4px 14px 4px rgba(103, 71, 128, 0.11);
 }
diff --git a/src/components/Breadcrumbs.vue b/src/components/Breadcrumbs.vue
@@ -1,10 +1,8 @@
 <template>
-  <div>
-    <Krumbs
-      v-if="!hideBreadcrumbs"
-      :items="routes"
-    />
-  </div>
+  <Krumbs
+    v-if="!hideBreadcrumbs"
+    :items="routes"
+  />
 </template>
 
 <script>

diff --git a/src/components/Global/Header.vue b/src/components/Global/Header.vue
@@ -92,6 +92,7 @@ export default {
     return {
       shortVersion: '',
       apiUrl: getKumaCpServerUrl(),
+      initialBodyPaddingTop: '',
     }
   },
   computed: {
@@ -131,6 +132,14 @@ export default {
       return Boolean(this.env && this.apiUrl)
     },
   },
+  mounted() {
+    this.initialBodyPaddingTop = document.body.style.paddingTop
+
+    document.body.style.paddingTop = 'var(--topbar-height)'
+  },
+  destroyed() {
+    document.body.style.paddingTop = this.initialBodyPaddingTop
+  },
 }
 </script>