@utrecht/components/form-field/src/stories/checkbox-group.stories.mdx

Components for the Municipality of Utrecht based on the NL Design System architecture

{/* @license CC0-1.0 */}

import { Canvas, Meta, Story } from "@storybook/blocks";
import { argTypes, defaultArgs, exampleArgs, FormFieldCheckboxGroup } from "../story-template";
import "../../../checkbox/src/index.scss";
import "../../../form-label/src/index.scss";
import "../index.scss";

<Meta
  id="css-form-field--checkbox-group"
  title="CSS Component/Form field/with checkbox group"
  component={FormFieldCheckboxGroup}
  argTypes={argTypes}
  args={defaultArgs}
  parameters={{
    status: {
      type: "WORK IN PROGRESS",
    },
  }}
/>

# Form field with checkbox group

## with only a label

<Canvas>
  <Story
    name="label"
    args={{
      ...exampleArgs,
      groupId: "0128c307-ead5-40d4-9a99-c91aa6fa4a99",
      groupLabel: "Hoe wil je dat wij contact opnemen?",
      options: [
        {
          id: "a374296c-669e-45d0-a26d-e62e959958dd",
          name: "phone",
          value: "true",
          label: "Telefoon",
          checked: true,
        },
        {
          id: "714205e8-d33b-40d8-9721-e2ea71c62a20",
          name: "email",
          value: "true",
          label: "E-mail",
        },
        {
          id: "67fa8ea7-6b75-4049-ae4f-ebaa816e4c35",
          name: "mail",
          value: "true",
          label: "Brief",
        },
      ],
    }}
  >
    {FormFieldCheckboxGroup.bind({})}
  </Story>
</Canvas>

## with an checkbox group description

<Canvas>
  <Story
    name="group description"
    args={{
      ...exampleArgs,
      groupId: "d7218515-bf54-45c1-ba57-a72af5d7fd42",
      groupDescription: "Kies één of meerdere opties.",
      groupLabel: "Hoe wil je dat wij contact opnemen?",
      options: [
        {
          id: "2a5524f5-6ee8-4be1-90a1-87d0d619d2ee",
          name: "phone",
          value: "true",
          label: "Telefoon",
          checked: true,
        },
        {
          id: "1fe84cc2-16fc-4e9b-9498-856583652181",
          name: "email",
          value: "true",
          label: "E-mail",
        },
        {
          id: "96493bfe-2caa-4cb3-80ce-a4a46fc69c10",
          name: "mail",
          value: "true",
          label: "Brief",
        },
      ],
    }}
  >
    {FormFieldCheckboxGroup.bind({})}
  </Story>
</Canvas>

## with checkbox option descriptions

<Canvas>
  <Story
    name="option description"
    args={{
      ...exampleArgs,
      groupId: "764bacdd-94b4-4774-be40-89e9e5f82c19",
      groupLabel: "Hoe wil je dat wij contact opnemen?",
      options: [
        {
          id: "28a9109b-eb9c-4119-abaa-02d09e8f359b",
          name: "phone",
          value: "true",
          label: "Telefoon",
          description: "We bellen je op (085) 555 0000",
          checked: true,
        },
        {
          id: "3bdeeba2-199f-44e9-9184-ed8dbfb2fc37",
          name: "email",
          description: "Web mailen je op info@example.com",
          value: "true",
          label: "E-mail",
        },
        {
          id: "2bb862c1-114e-4529-975e-1776df23f055",
          name: "mail",
          value: "true",
          label: "Brief",
          description: "Je ontvangt een brief op Stadhuisplein 1, Amsterdam",
        },
      ],
    }}
  >
    {FormFieldCheckboxGroup.bind({})}
  </Story>
</Canvas>

## with checkbox invalid option descriptions

<Canvas>
  <Story
    name="option invalid"
    args={{
      ...exampleArgs,
      groupId: "73a3f2c1-00e7-48b8-9ebb-1f51b6550f42",
      groupLabel: "Hoe wil je dat wij contact opnemen?",
      options: [
        {
          checked: true,
          id: "c0972ecc-6eef-4bf9-80ab-c535fc0229b5",
          invalid: true,
          invalidDescription: "Wij hebben geen telefoonnumer van je. Vul eerst je profiel aan.",
          label: "Telefoon",
          name: "phone",
          value: "true",
        },
        {
          checked: true,
          id: "714d33fd-4cc4-4113-9887-4c38e77a6532",
          invalid: true,
          invalidDescription: "Wij hebben geen e-mailadres van je. Vul eerst je profiel aan.",
          label: "E-mail",
          name: "email",
          value: "true",
        },
        {
          checked: true,
          id: "10ee620a-af7e-4c67-9f6d-5519b3c45c6d",
          invalid: true,
          invalidDescription: "Wij hebben geen postadres van je. Vul eerst je profiel aan.",
          label: "Brief",
          name: "mail",
          value: "true",
        },
      ],
    }}
  >
    {FormFieldCheckboxGroup.bind({})}
  </Story>
</Canvas>

## with checkbox invalid grou description

<Canvas>
  <Story
    name="group invalid"
    args={{
      ...exampleArgs,
      groupId: "707b7bd8-d476-472c-ac9d-3c1a4caac4c2",
      groupLabel: "Hoe wil je dat wij contact opnemen?",
      groupInvalid: true,
      groupInvalidDescription: "Fout: je hebt geen keuze gemaakt. Kies één of meerdere opties.",
      options: [
        {
          id: "80d14d58-bc99-4c53-824e-36473d6506c7",
          label: "Telefoon",
          name: "phone",
          value: "true",
        },
        {
          id: "0b4aea63-ec5b-4259-b008-ba8eaf8b03e3",
          label: "E-mail",
          name: "email",
          value: "true",
        },
        {
          id: "9360080d-3a48-444d-bc2c-1cd1a40940f9",
          label: "Brief",
          name: "mail",
          value: "true",
        },
      ],
    }}
  >
    {FormFieldCheckboxGroup.bind({})}
  </Story>
</Canvas>