Product tour

package.json

@@ -17,6 +17,7 @@
     "@semantic-release/git": "^10.0.1",
     "@vue-a11y/skip-to": "^3.0.3",
     "dom-to-image": "^2.6.0",
+    "driver.js": "^1.3.0",
     "fast-equals": "^5.0.1",
     "file-saver": "^2.0.5",
     "focus-trap": "^7.5.4",

src/components/AppHeader.vue

@@ -2,11 +2,26 @@
   <header class="app-header">
     <div role="banner" class="site-header">
       <nav class="app-header__top-nav" v-test="'top-menu'">
-        <router-link :to="{name: 'contact'}">Contact</router-link>
-        <router-link :to="{name: 'accessibility'}">Toegankelijkheid</router-link>
-        <a href="https://www.rijkswaterstaat.nl/cookies">Cookies</a>
+        <router-link :to="{ name: 'contact' }" data-tour-id="contact-header"
+          >Contact</router-link
+        >
+        <router-link
+          :to="{ name: 'accessibility' }"
+          data-tour-id="toegankelijkheid-header"
+          >Toegankelijkheid</router-link
+        >
+        <a
+          href="https://www.rijkswaterstaat.nl/cookies"
+          data-tour-id="cookies-header"
+          >Cookies</a
+        >
       </nav>
-      <a href="https://www.rijksoverheid.nl/ministeries/ministerie-van-infrastructuur-en-waterstaat" rel="noreferrer noopener" class="logo" target="_blank">
+      <a
+        href="https://www.rijksoverheid.nl/ministeries/ministerie-van-infrastructuur-en-waterstaat"
+        rel="noreferrer noopener"
+        class="logo"
+        target="_blank"
+      >
         <img
           src="/assets/img/logo-nl.svg"
           width="270"
@@ -18,26 +33,59 @@
   </div>
   <div id="menu" class="app-header__menu">
     <div class="app-header__top-menu container">
-      <h1 class="app-header__app-title">LIWO</h1>
+      <h1 class="app-header__app-title" data-tour-id="liwo-header">LIWO</h1>
     </div>
     <nav role="navigation" class="app-header__nav" v-test="'main-menu'">
       <ul class="container">
-        <li><router-link :to="{ name: 'maps' }">Kaarten</router-link></li>
-        <li><router-link :to="{ name: 'about' }">Over LIWO</router-link></li>
+        <li class="app-header__nav-link">
+          <router-link
+            :to="{ name: 'maps' }"
+            data-tour-id="kaarten-header"
+          >
+            Kaarten
+          </router-link>
+        </li>
+        <li class="app-header__nav-link">
+          <router-link
+            :to="{ name: 'about' }"
+            data-tour-id="over-liwo-header"
+          >
+            Over LIWO
+          </router-link>
+        </li>
+        <li class="app-header__nav-link">
+          <router-link
+            :to="{ name: 'maps' }"
+            @click="useGeneralTour().start()"
+          >
+            Start tour
+          </router-link>
+        </li>
       </ul>
     </nav>
-    <h2 class="app-header__page-title container" v-test="'page-title'">{{ this.pageTitle }}</h2>
+    <h2
+      class="app-header__page-title container"
+      v-test="'page-title'"
+      data-tour-id="page-title"
+    >
+      {{ this.pageTitle }}
+    </h2>
   </div>
   </header>
 </template>
 
 <script>
+import { useGeneralTour } from '@/tour/use-general-tour'
+
 export default {
   props: {
     pageTitle: {
       type: String,
       default: 'LIWO – Landelijk Informatiesysteem Water en Overstromingen'
     }
+  },
+  methods: {
+    useGeneralTour
   }
 }
 </script>
@@ -128,7 +176,6 @@ export default {
 
   .app-header__nav li {
     list-style: none;
-    margin: 0;
   }
 
   .app-header__nav a {
@@ -143,11 +190,20 @@ export default {
     }
   }
 
-  .app-header__nav a:hover,
-  .app-header__nav a.router-link-active {
+  .app-header__nav-link a:hover,
+  .app-header__nav-link:last-child a.router-link-active:hover,
+  .app-header__nav-link a.router-link-active {
     background-color: var(--light-yellow);
   }
 
+  .app-header__nav-link:last-child a.router-link-active {
+    background-color: transparent;
+  }
+
+  .app-header__nav-link:last-child {
+    margin-left: auto;
+  }
+
   .app-header__page-title {
     color: #000;
     font-size: 2.2em;

src/components/CombineChangeVariantPopup.vue

@@ -5,7 +5,10 @@
     @close="$emit('close')"
     disable-scrollbar
     >
-      <aside class="change-variant-popup__filters">
+      <aside
+        class="change-variant-popup__filters"
+        data-tour-id="change-variant-filters"
+      >
         <h3>Filter op variant eigenschappen</h3>
 
         <div v-for="{ title, values } in sidebarFilters" :key="title" class="change-variant-popup__filter-type">
@@ -21,13 +24,25 @@
       <form class="change-variant-popup__results">
         <h3>Beschikbare varianten: ({{ filteredVariants.length  }}):</h3>
 
-        <ul class="change-variant-popup__result-list change-variant-popup__scrollable-list">
+        <ul
+          class="change-variant-popup__result-list change-variant-popup__scrollable-list"
+          data-tour-id="change-variant-options"
+        >
           <li v-for="variant in filteredVariants" :key="variant.metadata.title" v-test="'resultItem'">
-            <input type="radio" class="accessibility" name="variant" :value="variant.layer" v-model="selectedVariant" :id="`variant-${variant.layer}`" />
+            <input
+              class="accessibility"
+              type="radio"
+              name="variant"
+              :value="variant.layer"
+              v-model="selectedVariant"
+              :id="`variant-${variant.layer}`"
+            />
 
             <label
               class="change-variant-popup__result-item"
-              :for="`variant-${variant.layer}`">
+              :for="`variant-${variant.layer}`"
+              data-tour-id="variant-select"
+            >
               <span v-test="'variantName'" v-html="getWrappingTitle(variant)"></span>
 
               <dl class="change-variant-popup__result-item-props">
@@ -44,6 +59,7 @@
           <button
             class="btn primary"
             @click.prevent="selectVariant"
+            data-tour-id="variant-select-button"
           >
             Variant selecteren
           </button>

src/components/CombineLayerControl.vue

@@ -17,6 +17,7 @@
       class="layer-control__vis-label"
       :for="`layer-${id}-vis`"
       v-test="'layer-control'"
+      data-tour-id="layer-visibility"
     >
       <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 64 64">
         <path fill="none" d="M0 0h64v64H0z"/>

src/components/CombineLayerPanelItem.vue

@@ -5,7 +5,11 @@
     @click="selectFirstLayer"
   >
     <span>{{ title }}</span>
-    <button class="layerpanel-item__collapse" @click.stop="toggleCollapse">
+    <button
+      class="layerpanel-item__collapse"
+      @click.stop="toggleCollapse"
+      data-tour-id="layer-panel-collapse"
+    >
       <img class="layerpanel-item__collapse-icon" :src="`${publicPath}icons/baseline-keyboard_arrow_up-24px.svg`" alt="Klap kaartlagen in of uit" />
     </button>
   </h3>
@@ -16,12 +20,25 @@
     v-test="'layer-panel-info'"
   >
     <dl class="layerpanel-item__prop-list" v-if="variantProperties.length > 1" v-test="'variantProperties'">
-      <div v-for="{key, value} in variantProperties" :key="key" class="layerpanel-item__prop">
+      <div
+        v-for="{key, value} in variantProperties"
+        :key="key"
+        class="layerpanel-item__prop"
+        data-tour-id="layerpanel-item"
+      >
         <dt>{{key}}</dt>
         <dd :title="value">{{value}}</dd>
       </div>
     </dl>
-    <button v-test="'change-variant'" v-if="allVariants.length > 1" @click.stop="showChangeVariantPopup" class="btn primary">Wijzig variant</button>
+    <button
+      v-if="allVariants.length > 1"
+      class="btn primary"
+      @click.stop="showChangeVariantPopup"
+      v-test="'change-variant'"
+      data-tour-id="change-variant"
+    >
+      Wijzig variant
+      </button>
   </div>
 
   <layer-control-list

src/components/ExportPopup.vue

@@ -13,12 +13,33 @@
       <label class="export-popup__form-column-item" for="export-name">
         Naam:<br><small class="help">De naam van het uitvoerbestand</small>
       </label>
-      <input type="text" name="name"
-        id="export-name" autocomplete="off" v-model="exportName"
-        class="export-popup__form-column-item export-popup__textfield" v-test="'name-input'">
+      <input
+        class="export-popup__form-column-item export-popup__textfield"
+        type="text"
+        name="name"
+        id="export-name"
+        autocomplete="off"
+        v-model="exportName"
+        v-test="'name-input'"
+        data-tour-id="layer-export-name"
+      >
       <footer class="export-popup__footer">
-        <button class="btn primary" @click.prevent="exportMap" v-test="'export-file-button'">Exporteer</button>
-        <button class="btn secondary" type="reset" @click="$emit('close')">Annuleer</button>
+        <button
+          class="btn primary"
+          @click.prevent="exportMap"
+          v-test="'export-file-button'"
+          data-tour-id="layer-export-button"
+        >
+          Exporteer
+        </button>
+        <button
+          class="btn secondary"
+          type="reset"
+          @click="$emit('close')"
+          data-tour-id="layer-export-cancel-button"
+        >
+          Annuleer
+        </button>
       </footer>
     </form>
   </pop-up>

src/components/LayerControl.vue

@@ -17,6 +17,7 @@
       class="layer-control__vis-label"
       :for="`layer-${id}-vis`"
       v-test="'layer-control'"
+      data-tour-id="layer-visibility"
     >
       <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 64 64">
         <path fill="none" d="M0 0h64v64H0z"/>
@@ -40,6 +41,7 @@
         value="1"
         @change.stop="setTransparency"
         :aria-label="`Transparantie voor kaartlaag ${layer.properties.title}`"
+        data-tour-id="layer-transparency"
       />
 
       <button
@@ -48,6 +50,7 @@
         v-test="'info-toggle'"
         @click="toggleInfoPopup"
         type="button"
+        data-tour-id="layer-metadata"
       >
         <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 64 64">
           <path fill="none" d="M0 0h64v64H0z"/>
@@ -76,6 +79,7 @@
           :modelValue="selectedVariantIndexByBreachBandId[id][title]"
           @update:modelValue="setLayerVariant(id, title, $event)"
           v-test="'variant-select'"
+          data-tour-id="layer-variant-select"
         />
       </label>
     </template>
@@ -91,6 +95,7 @@
         :modelValue="selectedVariant"
         @update:modelValue="selectLayerOption($event)"
         v-test="'variant-select'"
+        data-tour-id="layer-variant-select"
       />
     </label>
   </div>

src/components/LayerPanel.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="layer-panel">
+<div class="layer-panel" data-tour-id="layer-panel">
   <div class="layer-panel__content">
     <h3 class="layer-panel__title">
       <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 64 64">

src/components/LayerSetList.vue

@@ -1,13 +1,18 @@
 <template>
 <section class="layerset-list">
-  <h3>{{ title }}</h3>
+  <h3 class="layerset-list__header" :data-tour-id="`layerset-${index}`">{{ title }}</h3>
   <ul class="layerset-list__list">
     <li class="layerset-list__list-item"
         v-for="item in items"
         :key="item.id"
         >
       <!-- id here is a layerSetId -->
-      <router-link :to="{ name: getName(item), params: {id: item.id} }">{{ item.name }}</router-link>
+      <router-link
+        :to="{ name: getName(item), params: {id: item.id} }"
+        :data-tour-id="`layerset-map-${item.id}-link`"
+      >
+        {{ item.name }}
+      </router-link>
     </li>
   </ul>
 </section>
@@ -23,6 +28,10 @@ export default {
       type: String,
       required: true
     },
+    index: {
+      type: Number,
+      required: true
+    },
     items: {
       type: Array,
       validator (items) {
@@ -43,6 +52,11 @@ export default {
   margin-left: 1em;
   margin-bottom: 1rem;
 }
+
+.layerset-list__header {
+  width: max-content;
+}
+
 .layerset-list__list-item::before {
   content: "›";
   float: left;

src/components/LegendPanel.vue

@@ -4,15 +4,17 @@
       'legend-panel': true,
       'legend-panel--active': legendIsShown,
     }"
+    data-tour-id="legend-panel"
   >
     <button
       class="legend-panel__title"
       aria-controls="legend"
-      v-test="'legend-button'"
       :aria-expanded="legendIsShown"
       :aria-label="`Klap legenda ${legendIsShown ? 'in' : 'uit'}`"
       @click="toggleLegend"
       :disabled="formattedLayers.length === 1"
+      v-test="'legend-button'"
+      data-tour-id="legend-button"
     >
       Legenda
       <img

src/components/NotificationBar.vue

@@ -1,5 +1,9 @@
 <template>
-<ul class="viewer__notifications" v-if="cleanNotifications && cleanNotifications.length">
+<ul
+  class="viewer__notifications"
+  v-if="cleanNotifications && cleanNotifications.length"
+  data-tour-id="notifications"
+>
   <template v-for="(notification, index) in cleanNotifications">
     <li
       v-if="notification.show"