feat(*) add hoverable svg wrapper

Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com>

package.json

@@ -30,7 +30,7 @@
     "@kongponents/kmodal": "^1.0.2",
     "@kongponents/kooltip": "0.2.8",
     "@kongponents/kpop": "1.0.0",
-    "@kongponents/kradio": "^0.2.3",
+    "@kongponents/kradio": "^0.2.4",
     "@kongponents/krumbs": "0.2.0",
     "@kongponents/ktable": "^1.1.2",
     "@kongponents/ktabs": "^1.0.0",

src/kongponents.js

@@ -13,7 +13,7 @@ import KToaster from '@kongponents/ktoaster'
 import KoolTip from '@kongponents/kooltip'
 import KClipboardProvider from '@kongponents/kclipboardprovider'
 import Krumbs from '@kongponents/krumbs'
-import KRadio from '@kongponents/kradio/dist/KRadio.umd.min.js'
+import KRadio from '@kongponents/kradio'
 import KPop from '@kongponents/kpop'
 import KToggle from '@kongponents/ktoggle'
 import KTabs from '@kongponents/ktabs'

src/router.ts

@@ -332,13 +332,13 @@ export default () => {
           component: () => import(/* webpackChunkName: "onboarding-welcome" */ '@/views/Onboarding/Welcome.vue')
         },
         {
-          path: 'introduction',
-          name: 'onboarding-introduction',
+          path: 'deployment-types',
+          name: 'onboarding-deployment-types',
           meta: {
             hideStatus: true,
             onboardingProcess: true
           },
-          component: () => import(/* webpackChunkName: "onboarding-introduction" */ '@/views/Onboarding/Introduction.vue')
+          component: () => import(/* webpackChunkName: "onboarding-deployment-types" */ '@/views/Onboarding/DeploymentTypes.vue')
         },
         {
           path: 'backend-types',

src/views/Onboarding/BackendTypes.vue

@@ -3,10 +3,14 @@
     <div class="min-h-96">
       <OnboardingHeading
         title="Backend Types"
-        :description="`${title}, is a portable service mesh that can run on both Kubernetes, VMs or other containerized enviroments. You can also mix together different runtimes in a multi one deployment.`"
+        :description="
+          `${title}, is a portable service mesh that can run on both Kubernetes, VMs or other containerized enviroments. You can also mix together different runtimes in a multi one deployment.`
+        "
       />
       <div class="md:w-4/5 lg:w-3/5 mx-auto">
-        <component :is="currentGraph" />
+        <HoverableSvgWrapper>
+          <component :is="currentGraph" />
+        </HoverableSvgWrapper>
         <KRadio
           v-model="mode"
           name="deployment"
@@ -32,7 +36,7 @@
     </div>
     <OnboardingNavigation
       next-step="onboarding-populating-mesh"
-      previous-step="onboarding-introduction"
+      previous-step="onboarding-deployment-types"
     />
   </div>
 </template>
@@ -43,14 +47,16 @@ import MultiZoneDeploymentGraph from '@/views/Onboarding/components/MultiZoneDep
 import StandaloneDeploymentGraph from '@/views/Onboarding/components/StandaloneDeploymentGraph'
 import OnboardingNavigation from '@/views/Onboarding/components/OnboardingNavigation'
 import OnboardingHeading from '@/views/Onboarding/components/OnboardingHeading'
+import HoverableSvgWrapper from '@/views/Onboarding/components/HoverableSvgWrapper'
 
 export default {
   name: 'BackendTypes',
   components: {
     MultiZoneDeploymentGraph,
     StandaloneDeploymentGraph,
     OnboardingNavigation,
-    OnboardingHeading
+    OnboardingHeading,
+    HoverableSvgWrapper,
   },
   data() {
     return { mode: 'kubernetess' }
@@ -60,9 +66,10 @@ export default {
       title: 'config/getTagline',
     }),
     currentGraph() {
-      return this.mode === 'memory' ? 'StandaloneDeploymentGraph' : 'MultiZoneDeploymentGraph'
-    }
-
+      return this.mode === 'memory'
+        ? 'StandaloneDeploymentGraph'
+        : 'MultiZoneDeploymentGraph'
+    },
   },
 }
 </script>

src/views/Onboarding/DeploymentTypes.spec.ts

@@ -0,0 +1,38 @@
+import renderWithVuex from '@/testUtils/renderWithVuex'
+import userEvent from '@testing-library/user-event'
+import { screen } from '@testing-library/vue'
+import DeploymentTypes from './DeploymentTypes.vue'
+
+describe('DeploymentTypes.vue', () => {
+  const customStore = { modules: { config: { state: { tagline: 'Kuma' } } } }
+
+  it('renders snapshot', async () => {
+    const { container } = renderWithVuex(DeploymentTypes, {
+      store: customStore,
+    })
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('changes selected graph', async () => {
+    renderWithVuex(DeploymentTypes, { store: customStore })
+
+    await userEvent.click(screen.getByText(/Multi-Zone deployment/))
+
+    expect(screen.getByText('Multizone 1')).toBeInTheDocument()
+  })
+
+  it('hoverable section disappear on hover', async () => {
+    jest.useFakeTimers()
+
+    renderWithVuex(DeploymentTypes, { store: customStore })
+
+    await userEvent.hover(
+      <HTMLElement>screen.queryByTestId('hoverable-overlay'),
+    )
+
+    jest.advanceTimersByTime(1000)
+
+    expect(screen.queryByTestId('hoverable-overlay')).not.toBeInTheDocument()
+  })
+})

src/views/Onboarding/Introduction.vue → src/views/Onboarding/DeploymentTypes.vue

@@ -2,23 +2,19 @@
   <div class="container mx-auto">
     <div class="min-h-96">
       <OnboardingHeading
-        title="Introduction"
-        :description="`To get started with ${title}, we must first take a look at a few basic concepts.`"
+        title="Deployment Types"
+        :description="
+          `To get started with ${title}, we must first take a look at a few basic concepts.`
+        "
       />
       <div class="md:w-4/5 lg:w-3/5 mx-auto">
-        <component :is="currentGraph" />
-        <KRadio
-          v-model="mode"
-          name="mode"
-          value="standalone"
-        >
+        <HoverableSvgWrapper>
+          <component :is="currentGraph" />
+        </HoverableSvgWrapper>
+        <KRadio v-model="mode" name="mode" value="standalone">
           Standalone Deployment
         </KRadio>
-        <KRadio
-          v-model="mode"
-          name="mode"
-          value="multi-zone"
-        >
+        <KRadio v-model="mode" name="mode" value="multi-zone">
           Multi-Zone deployment
         </KRadio>
       </div>
@@ -37,14 +33,16 @@ import MultiZoneDeploymentGraph from '@/views/Onboarding/components/MultiZoneDep
 import StandaloneDeploymentGraph from '@/views/Onboarding/components/StandaloneDeploymentGraph'
 import OnboardingNavigation from '@/views/Onboarding/components/OnboardingNavigation'
 import OnboardingHeading from '@/views/Onboarding/components/OnboardingHeading'
+import HoverableSvgWrapper from '@/views/Onboarding/components/HoverableSvgWrapper'
 
 export default {
-  name: 'Introduction',
+  name: 'DeploymentTypes',
   components: {
     MultiZoneDeploymentGraph,
     StandaloneDeploymentGraph,
     OnboardingNavigation,
-    OnboardingHeading
+    OnboardingHeading,
+    HoverableSvgWrapper,
   },
   data() {
     return { mode: 'standalone' }
@@ -54,9 +52,10 @@ export default {
       title: 'config/getTagline',
     }),
     currentGraph() {
-      return this.mode === 'standalone' ? 'StandaloneDeploymentGraph' : 'MultiZoneDeploymentGraph'
-    }
-
+      return this.mode === 'standalone'
+        ? 'StandaloneDeploymentGraph'
+        : 'MultiZoneDeploymentGraph'
+    },
   },
 }
 </script>

src/views/Onboarding/Welcome.vue

@@ -39,7 +39,7 @@
     </div>
     <OnboardingNavigation
       simple-view
-      next-step="onboarding-introduction"
+      next-step="onboarding-deployment-types"
     />
   </div>
 </template>