✅ [#4969] Add story for steps tab

.storybook/main.js

@@ -84,6 +84,18 @@ const config = {
             },
           },
         ].filter(Boolean),
+      },
+      // .ejs
+      {
+        test: /\.ejs$/,
+        exclude: /node_modules/,
+        loader: 'ejs-loader',
+        options: {
+          variable: 'ctx',
+          evaluate: /\{%([\s\S]+?)%\}/g,
+          interpolate: /\{\{([\s\S]+?)\}\}/g,
+          escape: /\{\{\{([\s\S]+?)\}\}\}/g,
+        },
       }
     );
     return config;

.storybook/preview-body.html

@@ -0,0 +1,6 @@
+<script id="setting-MAX_FILE_UPLOAD_SIZE" type="application/json">"50\u00a0MB"</script>
+<script id="config-REQUIRED_DEFAULT" type="application/json">false</script>
+<script id="config-RICH_TEXT_COLORS" type="application/json">[{"color": "#4ce699", "label": "Aquamarine"}]</script>
+<script id="config-MAP_TILE_LAYERS" type="application/json">[]</script>
+<script id="config-UPLOAD_FILETYPES" type="application/json">[{"label": "elk bestandstype", "value": "*"}, {"label": ".heic", "value": "image/heic"}, {"label": ".png", "value": "image/png"}, {"label": ".jpg", "value": "image/jpeg"}, {"label": ".pdf", "value": "application/pdf"}, {"label": ".xls", "value": "application/vnd.ms-excel"}, {"label": ".xlsx", "value": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}, {"label": ".csv", "value": "text/csv"}, {"label": ".txt", "value": "text/plain"}, {"label": ".doc", "value": "application/msword"}, {"label": ".docx", "value": "application/vnd.openxmlformats-officedocument.wordprocessingml.document"}, {"label": "Open Office", "value": "application/vnd.oasis.opendocument.*,application/vnd.stardivision.*,application/vnd.sun.xml.*"}, {"label": ".zip", "value": "application/zip,application/zip-compressed,application/x-zip-compressed"}, {"label": ".rar", "value": "application/vnd.rar"}, {"label": ".tar", "value": "application/x-tar"}, {"label": ".msg", "value": "application/vnd.ms-outlook"}, {"label": ".dwg", "value": "application/acad.dwg,application/autocad_dwg.dwg,application/dwg.dwg,application/x-acad.dwg,application/x-autocad.dwg,application/x-dwg.dwg,drawing/dwg.dwg,image/vnd.dwg,image/x-dwg.dwg"}]</script>
+<script id="CONFIDENTIALITY_LEVELS" type="application/json">[{"label": "Openbaar", "value": "openbaar"}, {"label": "Beperkt openbaar", "value": "beperkt_openbaar"}, {"label": "Intern", "value": "intern"}, {"label": "Zaakvertrouwelijk", "value": "zaakvertrouwelijk"}, {"label": "Vertrouwelijk", "value": "vertrouwelijk"}, {"label": "Confidentieel", "value": "confidentieel"}, {"label": "Geheim", "value": "geheim"}, {"label": "Zeer geheim", "value": "zeer_geheim"}]</script>

src/openforms/js/components/admin/form_design/FormDetailFields.stories.js

@@ -1,6 +1,6 @@
 import {fn} from '@storybook/test';
 
-import {FormDecorator, TinyMceDecorator} from 'components/admin/form_design/story-decorators';
+import {FormDecorator} from 'components/admin/form_design/story-decorators';
 
 import FormDetailFields from './FormDetailFields';
 

src/openforms/js/components/admin/form_design/StepsFieldSet.stories.js

@@ -0,0 +1,65 @@
+import {fn} from '@storybook/test';
+
+import {
+  AdminChangeFormDecorator,
+  FormDecorator,
+} from 'components/admin/form_design/story-decorators';
+
+import {StepsFieldSet} from './form-creation-form';
+
+export default {
+  title: 'Form design / Tabs / Steps',
+  decorators: [FormDecorator, AdminChangeFormDecorator],
+  component: StepsFieldSet,
+  args: {
+    submitting: false,
+    loadingErrors: '',
+    steps: [
+      {
+        configuration: {
+          display: 'form',
+          components: [],
+        },
+        formDefinition: '',
+        index: 0,
+        name: 'Step 1',
+        internalName: '',
+        slug: 'step-1',
+        isApplicable: true,
+        loginRequired: false,
+        isReusable: false,
+        url: '',
+        isNew: false,
+        validationErrors: [],
+        translations: {
+          nl: {
+            name: 'Stap 1',
+            saveText: '',
+            previousText: '',
+            nextText: '',
+          },
+          en: {
+            name: 'Step 1',
+            saveText: '',
+            previousText: '',
+            nextText: '',
+          },
+        },
+      },
+    ],
+    onEdit: fn(),
+    onComponentMutated: fn(),
+    onFieldChange: fn(),
+    onDelete: fn(),
+    onReorder: fn(),
+    onReplace: fn(),
+    onAdd: fn(),
+  },
+  parameters: {
+    adminChangeForm: {
+      wrapFieldset: true,
+    },
+  },
+};
+
+export const Default = {};

src/openforms/js/components/admin/form_design/form-creation-form.js

@@ -873,7 +873,7 @@ function reducer(draft, action) {
   }
 }
 
-const StepsFieldSet = ({submitting = false, loadingErrors, steps = [], ...props}) => {
+export const StepsFieldSet = ({submitting = false, loadingErrors, steps = [], ...props}) => {
   if (loadingErrors) {
     return <div className="fetch-error">{loadingErrors}</div>;
   }