test: enhance e2e tests for location dialog and my location button

config.json

@@ -28,7 +28,8 @@
       "maxBounds": [
         [3.31497114423, 50.803721015],
         [7.09205325687, 53.5104033474]
-      ]
+      ],
+      "default_zoom": 12
     },
     "links": {
       "about": "https://signalen.org",

package.json

@@ -49,7 +49,7 @@
     "@amsterdam/design-system-react": "0.13.1",
     "@axe-core/playwright": "4.10.1",
     "@fontsource/cantarell": "5.1.0",
-    "@nl-design-system-community/purmerend-design-tokens": "1.2.1",
+    "@nl-design-system-community/purmerend-design-tokens": "1.2.2",
     "@playwright/test": "1.49.1",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
@@ -61,7 +61,7 @@
     "@utrecht/body-react": "0.0.3",
     "@utrecht/checkbox-group-react": "1.0.7",
     "@utrecht/component-library-css": "7.0.0",
-    "@utrecht/component-library-react": "8.0.3",
+    "@utrecht/component-library-react": "8.0.4",
     "@utrecht/design-tokens": "2.4.0",
     "@utrecht/link-list-css": "2.3.0",
     "@utrecht/nav-bar-react": "1.0.3",
@@ -71,7 +71,7 @@
     "@utrecht/page-layout-react": "1.0.3",
     "@utrecht/radio-group-react": "1.0.7",
     "@utrecht/root-react": "1.0.3",
-    "@utrecht/select-combobox-react": "1.0.5",
+    "@utrecht/select-combobox-react": "1.0.6",
     "@vitejs/plugin-react": "4.3.3",
     "autoprefixer": "10.4.20",
     "axios": "1.7.8",

src/app/[locale]/components/FormProgress.tsx

@@ -7,6 +7,7 @@ import { usePathname, useRouter } from '@/routing/navigation'
 import { FormStep } from '@/types/form'
 import { getCurrentStep, getPreviousStepPath } from '@/lib/utils/stepper'
 import { IconChevronLeft } from '@tabler/icons-react'
+import { ProgressBar } from './ProgressBar'
 
 interface FormProgressProps {
   children?: React.ReactElement
@@ -47,14 +48,7 @@ const FormProgress = ({ children }: FormProgressProps) => {
 
         <div className="flex flex-col gap-3 pb-2">
           {children}
-          <div className="overflow-hidden w-full disabled-fill-1">
-            <div
-              style={{
-                width: `${percentage}%`,
-              }}
-              className="h-2 primary-fill-1"
-            />
-          </div>
+          <ProgressBar value={step / 4} />
         </div>
       </div>
     )

src/app/[locale]/components/ProgressBar.css

@@ -0,0 +1,31 @@
+.signalen-progress-bar {
+  box-sizing: border-box;
+  display: inline-flex;
+  background-color: var(
+    --signalen-progress-bar-background-color,
+    var(--basis-color-disabled-fill-1)
+  );
+  block-size: var(--signalen-progress-bar-block-size, 0.5rem);
+  border-radius: var(--signalen-progress-bar-border-radius);
+  overflow: hidden;
+}
+
+.signalen-progress-bar__complete {
+  display: block;
+  background-color: var(
+    --signalen-progress-bar-complete-background-color,
+    var(--basis-color-primary-fill-1)
+  );
+}
+
+@media screen and (forced-colors: active) {
+  .signalen-progress-bar {
+    border-width: 1px;
+    border-style: solid;
+    border-color: CanvasText;
+    background-color: Canvas;
+  }
+  .signalen-progress-bar__complete {
+    background-color: CanvasText;
+  }
+}

src/app/[locale]/components/ProgressBar.tsx

@@ -0,0 +1,16 @@
+import './ProgressBar.css'
+
+export interface ProgressBarProps {
+  value: number
+}
+
+export const ProgressBar = ({ value }: ProgressBarProps) => (
+  <data value={value} className="signalen-progress-bar">
+    <span
+      className="signalen-progress-bar__complete"
+      style={{
+        inlineSize: `${Math.min(value * 100, 100)}%`,
+      }}
+    />
+  </data>
+)

src/app/[locale]/incident/add/components/MapDialog.css

@@ -0,0 +1,64 @@
+/* map */
+.map-location-group {
+  position: absolute;
+  left: 1em;
+  top: 1em;
+  display: flex;
+  gap: 8px;
+}
+
+.map-location-alert {
+  padding: 12px 16px !important;
+}
+
+.map-button {
+  padding-bottom: 16px !important;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.map-close-button {
+  position: absolute;
+  right: 1em;
+  top: 1em;
+  gap: 0 !important;
+}
+
+.map-zoom-button-group {
+  position: absolute;
+  right: 1em;
+  bottom: 1em;
+  gap: 0.5rem !important;
+  display: flex;
+  flex-direction: column;
+}
+
+.map-alert-dialog__content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.focused-map-marker {
+  width: 42px;
+  height: 42px;
+  border-radius: 999px;
+  background-color: red;
+}
+
+.signalen-modal-dialog {
+  background-color: var(--signalen-modal-dialog-background-color, Canvas);
+  color: var(--signalen-modal-dialog-color, CanvasText);
+  z-index: var(--signalen-modal-z-index, 1);
+}
+
+.signalen-modal-dialog--cover-viewport {
+  position: fixed;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  inset-block-start: 0;
+  overflow-block: auto;
+}

src/app/[locale]/incident/add/components/MapDialog.tsx

@@ -1,24 +1,15 @@
 import * as Dialog from '@radix-ui/react-dialog'
-import React, {
-  ForwardedRef,
-  forwardRef,
-  PropsWithChildren,
-  ReactNode,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { debounce, uniqBy } from 'lodash'
-import Map, {
+import {
   MapLayerMouseEvent,
   MapRef,
   Marker,
   MarkerEvent,
   useMap,
   ViewState,
 } from 'react-map-gl/maplibre'
+import { Map } from '@/components/ui/Map'
 import { useTranslations } from 'next-intl'
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
 import { useFormStore } from '@/store/form_store'
@@ -62,7 +53,7 @@ import {
 } from '@/lib/utils/address'
 import MapExplainerAccordion from './questions/MapExplainerAccordion'
 import { useWindowSize } from 'usehooks-ts'
-import { string } from 'zod'
+import './MapDialog.css'
 
 type MapDialogProps = {
   trigger: React.ReactElement
@@ -72,11 +63,6 @@ type MapDialogProps = {
   isAssetSelect?: boolean
 } & React.HTMLAttributes<HTMLDivElement>
 
-type objectDisplayName = {
-  singular: string
-  plural: string
-}
-
 const MapDialog = ({
   trigger,
   onMapReady,
@@ -110,7 +96,9 @@ const MapDialog = ({
   const [viewState, setViewState] = useState<ViewState>({
     latitude: 0,
     longitude: 0,
-    zoom: 18,
+    zoom: formState.address
+      ? config?.base.map.minimal_zoom || 17
+      : config?.base.map.default_zoom || 12,
     bearing: 0,
     padding: {
       top: 0,
@@ -171,10 +159,20 @@ const MapDialog = ({
     }
   }, [features, field])
 
+  useEffect(() => {
+    setViewState((state) => ({
+      ...state,
+      zoom: formState.address
+        ? config?.base.map.minimal_zoom || 17
+        : config?.base.map.default_zoom || 12,
+    }))
+  }, [config, formState])
+
   // memoize list of features to show in left sidebar
   const featureList = useMemo(() => {
     if (config && dialogMap) {
-      const mapFeaturesToShow = mapFeatures ? mapFeatures.features : []
+      const mapFeaturesToShow =
+        mapFeatures && formState.address ? mapFeatures.features : []
 
       const features =
         dialogMap?.getZoom() > config.base.map.minimal_zoom
@@ -185,14 +183,14 @@ const MapDialog = ({
     }
 
     return []
-  }, [config, dialogMap, formState.selectedFeatures, mapFeatures])
+  }, [config, dialogMap, formState, mapFeatures])
 
   // Update position, flyTo position, after this set the marker position
   const updatePosition = (lat: number, lng: number) => {
     if (dialogMap) {
       dialogMap.flyTo({
         center: [lng, lat],
-        zoom: 18,
+        zoom: config?.base.map.minimal_zoom || 17,
       })
     }
 
@@ -401,7 +399,10 @@ const MapDialog = ({
       <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Overlay />
-        <Dialog.Content className="grid md:grid-cols-3 overflow-y-auto signalen-modal-dialog signalen-modal-dialog--cover-viewport">
+        <Dialog.Content
+          className="grid md:grid-cols-3 overflow-y-auto signalen-modal-dialog signalen-modal-dialog--cover-viewport"
+          id="headlessui-portal-root"
+        >
           <VisuallyHidden.Root>
             <Dialog.Title>
               {field?.meta.language.title
@@ -563,6 +564,7 @@ const MapDialog = ({
                 {onMapReady &&
                   dialogMap &&
                   dialogMap.getZoom() > config.base.map.minimal_zoom &&
+                  formState.address &&
                   mapFeatures?.features.map((feature) => {
                     const id = feature.id as number
 

src/app/[locale]/incident/components/Spinner.css

@@ -0,0 +1,4 @@
+/* spinner */
+.signalen-loading-icon {
+  --utrecht-icon-size: var(--basis-size-icon-4xl, 4em);
+}