✅ [open-formulieren/open-forms#2173] Map background configuration in …

…storybook
open-formulieren · Nov 21, 2024 · 1c1b224 · 1c1b224
1 parent 02b5157
commit 1c1b224
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/.storybook/decorators.tsx b/.storybook/decorators.tsx
@@ -10,6 +10,7 @@ import {
   DEFAULT_COMPONENT_TREE,
   DEFAULT_DOCUMENT_TYPES,
   DEFAULT_FILE_TYPES,
+  DEFAULT_LEAFLET_BACKGROUNDS,
   DEFAULT_PREFILL_ATTRIBUTES,
   DEFAULT_PREFILL_PLUGINS,
   DEFAULT_REGISTRATION_ATTRIBUTES,
@@ -74,6 +75,7 @@ export const BuilderContextDecorator: Decorator = (Story, context) => {
         uniquifyKey: key => key,
         supportedLanguageCodes: supportedLanguageCodes,
         richTextColors: DEFAULT_COLORS,
+        getLeafletMapBackgrounds: async () => DEFAULT_LEAFLET_BACKGROUNDS,
         theme,
         getFormComponents: () => context?.args?.componentTree || defaultComponentTree,
         getValidatorPlugins: async () => {

diff --git a/src/components/ComponentConfiguration.stories.tsx b/src/components/ComponentConfiguration.stories.tsx
@@ -13,6 +13,7 @@ import {
   DEFAULT_COLORS,
   DEFAULT_DOCUMENT_TYPES,
   DEFAULT_FILE_TYPES,
+  DEFAULT_LEAFLET_BACKGROUNDS,
 } from '@/tests/sharedUtils';
 import {AnyComponentSchema} from '@/types';
 
@@ -109,6 +110,7 @@ const Template: StoryFn<TemplateArgs> = ({
     getPrefillPlugins={async () => prefillPlugins}
     getPrefillAttributes={async (plugin: string) => prefillAttributes[plugin]}
     getFileTypes={async () => fileTypes}
+    getLeafletMapBackgrounds={async () => DEFAULT_LEAFLET_BACKGROUNDS}
     serverUploadLimit="50MB"
     getDocumentTypes={async () => DEFAULT_DOCUMENT_TYPES}
     getConfidentialityLevels={async () => CONFIDENTIALITY_LEVELS}

diff --git a/src/tests/sharedUtils.tsx b/src/tests/sharedUtils.tsx
@@ -1,5 +1,5 @@
 // This module contains shared utilities and constants between Jest and Storybook.
-import type {DocumentTypeOption, SelectOption} from '@/context';
+import type {DocumentTypeOption, LeafletMapOption, SelectOption} from '@/context';
 import {ColorOption} from '@/registry/content/rich-text';
 import {AnyComponentSchema} from '@/types';
 
@@ -235,6 +235,19 @@ export const DEFAULT_COLORS: ColorOption[] = [
   },
 ];
 
+export const DEFAULT_LEAFLET_BACKGROUNDS: LeafletMapOption[] = [
+  {
+    identifier: 'default',
+    label: 'Default',
+    url: 'https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0/standaard/EPSG:28992/{z}/{x}/{y}.png',
+  },
+  {
+    identifier: 'infrared',
+    label: 'Infrared',
+    url: 'https://service.pdok.nl/hwh/luchtfotocir/wmts/v1_0/2016_ortho25IR/EPSG:28992/{z}/{x}/{y}.png',
+  },
+];
+
 export function sleep(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }