feat: options argument for radio group template

nl-design-system · Sep 3, 2021 · ef4327b · ef4327b
1 parent 70a4f48
commit ef4327b
Showing 1 changed file with 34 additions and 12 deletions.
diff --git a/components/form-field-radio-group/bem.stories.mdx b/components/form-field-radio-group/bem.stories.mdx
@@ -7,21 +7,21 @@ import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
 import "./bem.css";
 import "../radio-button/bem.css";
 import "../form-label/bem.css";
-export const Template = ({ label = "", name = "" }) =>
+
+export const Template = ({ label, name, options }) =>
   `<div class="utrecht-form-field-radio-group utrecht-form-field-radio-group--distanced" role="radiogroup" aria-labelledby="id-9e42cd3e">
   <div class="utrecht-form-field-radio-group__label utrecht-form-label" id="id-9e42cd3e">${label}</div>
+  ${options
+    .map(
+      ({ checked, label, value }, index) => `
   <div class="utrecht-form-field-radio utrecht-form-field-radio--distanced">
-    <input type="radio" name="${name}" class="utrecht-form-field-radio__input utrecht-radio-button" id="option-1">
-    <label class="utrecht-form-field-radio__label utrecht-form-label utrecht-form-label--radio" for="option-1">Option 1</label>
-  </div>
-  <div class="utrecht-form-field-radio utrecht-form-field-radio--distanced">
-    <input type="radio" name="${name}" class="utrecht-form-field-radio__input utrecht-radio-button" id="option-2">
-    <label class="utrecht-form-field-radio__label utrecht-form-label utrecht-form-label--radio" for="option-2">Option 2</label>
-  </div>
-  <div class="utrecht-form-field-radio utrecht-form-field-radio--distanced">
-    <input type="radio" name="${name}" class="utrecht-form-field-radio__input utrecht-radio-button" id="option-3">
-    <label class="utrecht-form-field-radio__label utrecht-form-label utrecht-form-label--radio" for="option-3">Option 3</label>
-  </div>
+    <input type="radio" name="${name}" value="${value}" class="utrecht-form-field-radio__input utrecht-radio-button" id="option-${index}"${
+        checked ? " checked" : ""
+      }>
+    <label class="utrecht-form-field-radio__label utrecht-form-label utrecht-form-label--radio" for="option-${index}">${label}</label>
+  </div>`
+    )
+    .join("\n")}
 </div>`;
 
 <Meta
@@ -35,6 +35,13 @@ export const Template = ({ label = "", name = "" }) =>
       description: "Set the name of the radio button",
       control: "text",
     },
+    options: {
+      description: "Options for which there must be a the radio button",
+      type: {
+        name: "array",
+        required: true,
+      },
+    },
   }}
   parameters={{
     docs: {
@@ -54,6 +61,21 @@ export const Template = ({ label = "", name = "" }) =>
     args={{
       label: "Which option do you like best?",
       name: "radiobutton",
+      options: [
+        {
+          label: "Option 1",
+          value: "1",
+        },
+        {
+          checked: true,
+          label: "Option 2",
+          value: "2",
+        },
+        {
+          label: "Option 3",
+          value: "3",
+        },
+      ],
     }}
   >
     {Template.bind({})}