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.6.2",

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,54 @@
   </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="useStartTour().start()"
+            data-tour-id="start-tour-header"
+          >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 { useStartTour } from '@/tour/use-start-tour'
+
 export default {
   props: {
     pageTitle: {
       type: String,
       default: 'LIWO – Landelijk Informatiesysteem Water en Overstromingen'
     }
+  },
+  methods: {
+    useStartTour
   }
 }
 </script>
@@ -128,7 +171,6 @@ export default {
 
   .app-header__nav li {
     list-style: none;
-    margin: 0;
   }
 
   .app-header__nav a {
@@ -143,11 +185,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,24 @@
       <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}`"
+              data-tour-id="variant-select"
             >
               <span v-test="'variantName'">{{variant.metadata.title.replace(/_/g, '_&#8203;')}}</span>
 
@@ -45,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/CombinePopup.vue

@@ -7,7 +7,7 @@
     <fieldset>
       <fieldset class="control-group">
         <legend class="control-label">Kies het thema waarvoor u scenario's <span v-if="bandCounts">(n={{ featureCount }})</span> wilt combineren:</legend>
-        <div class="controls">
+        <div class="controls" data-tour-id="combine-controls">
           <label
             class="radio block"
             v-for="option in options"
@@ -34,14 +34,16 @@
             @click="$emit('close')"
             class="btn primary"
             v-test="'combine-trigger'"
-            >
+            data-tour-id="combine-controls-combine-button"
+          >
             Combineren
           </router-link>
           <button
             type="button"
             class="btn secondary"
             @click="$emit('close')"
-            >
+            data-tour-id="combine-controls-cancel-button"
+          >
             Annuleer
           </button>
         </div>

src/components/ExportCombinePopUp.vue

@@ -19,6 +19,7 @@
               @focus="selectUrl"
               @click="selectUrl"
               v-test="'export-selection-url'"
+              data-tour-id="export-selection-url"
             >
           </div>
           <p>Deze link bevat de gemaakte selectie. U kunt deze opslaan en op een later moment importeren om een selectie aan te passen en een gecombineerd scenario opnieuw te maken. U kunt de selectie ook delen met anderen om zo samen met anderen een selectie te maken. Let op, u dient deze link zelf op te slaan.</p>
@@ -30,6 +31,7 @@
               type="button"
               class="btn secondary"
               @click="$emit('close')"
+              data-tour-id="export-selection-cancel-button"
             >
               Sluiten
             </button>

src/components/ExportPopup.vue

@@ -25,18 +25,33 @@
         <span class="help">De naam van het uitvoerbestand</span>
       </label>
       <input
-        id="export-name"
         class="export-popup__form-column-item export-popup__textfield"
+        type="text"
         name="name"
+        id="export-name"
         autocomplete="off"
         v-model="exportName"
-        type="text"
         v-test="'name-input'"
         required
-      />
+        data-tour-id="layer-export-name"
+      >
       <footer class="export-popup__footer">
-        <button class="btn primary" type="submit" @click="validateForm" v-test="'export-file-button'">Exporteer</button>
-        <button class="btn secondary" type="reset" @click="$emit('close')">Annuleer</button>
+        <button
+          class="btn primary"
+          @click="validateForm"
+          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/FilterPopup.vue

@@ -1,7 +1,7 @@
 <template>
 <pop-up class="filter-popup" title="Filter" @close="$emit('close')">
   <form class="filter-popup__form" id="genericform" novalidate="novalidate">
-    <fieldset class="control-group" @change="onProbabilitiesChange">
+    <fieldset class="control-group" @change="onProbabilitiesChange" data-tour-id="filter-form-probabilities">
       <legend class="control-label">Kansklasse:</legend>
       <ul class="choice-options">
         <li
@@ -34,6 +34,7 @@
         v-test="'filter-item'"
         class="choice-options__item__label"
         for="probability-imminent-flood"
+        data-tour-id="filter-form-flood"
       >
         <input
           class="choice-options__item__checkbox"

src/components/ImportCombinePopUp.vue

@@ -18,14 +18,15 @@
               name="url"
               v-model="url"
               v-test="'import-selection-url'"
+              data-tour-id="import-selection-url"
             >
             <em v-if="showError" class="errortext">{{ errorText }}</em>
           </div>
 
           <p>U kunt hier een LIWO-Link invoeren die u eerder heeft opgevraagd of die u van iemand hebt ontvangen. Door op importeren te klikken worden de scenario's aan uw bestaande selectie toegevoegd.</p>
         </div>
 
-        <div class="combine-popup__combine-selected" v-if="currentSelectedIds">
+        <div class="combine-popup__combine-selected" v-if="currentSelectedIds" data-tour-id="import-url-checkbox">
           <label>
             <input
               type="checkbox"
@@ -40,13 +41,15 @@
             <button
               class="btn primary"
               v-test="'import-url-button'"
+              data-tour-id="import-url-button"
             >
               Importeren
             </button>
             <button
               type="button"
               class="btn secondary"
               @click="$emit('close')"
+              data-tour-id="import-url-cancel-button"
             >
               Annuleer
             </button>

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>