@utrecht/form-field-css 1.2.0 → 1.4.0

package/src/stories/checkbox.stories.mdx

@@ -1,136 +0,0 @@
-{/* @license CC0-1.0 */}
-
-import { Canvas, Meta, Story } from "@storybook/blocks";
-import { argTypes, defaultArgs, exampleArgs, FormFieldCheckbox } from "../story-template";
-import "../../../checkbox/src/index.scss";
-import "../../../form-label/src/index.scss";
-import "../index.scss";
-
-export
-
-<Meta
-  id="css-form-field--checkbox"
-  title="CSS Component/Form field/with one checkbox"
-  component={FormFieldCheckbox}
-  argTypes={argTypes}
-  args={defaultArgs}
-  parameters={{
-    status: {
-      type: "WORK IN PROGRESS",
-    },
-  }}
-/>
-
-# label
-
-<Canvas>
-  <Story
-    name="label"
-    args={{
-      ...exampleArgs,
-      id: "172cd71b-8854-41ee-bcdc-9c8ac856c5d1",
-      label: "Ik ga akkoord met de algemene voorwaarden",
-      type: "checkbox",
-    }}
-  >
-    {FormFieldCheckbox.bind({})}
-  </Story>
-</Canvas>
-
-# Form field with description
-
-<Canvas>
-  <Story
-    name="description"
-    args={{
-      ...exampleArgs,
-      id: "7cdd4f82-e7eb-4573-bad3-2b520aac504b",
-      label: "Ik ga akkoord met de algemene voorwaarden",
-      description: "U kunt ons echt vertrouwen!",
-      type: "checkbox",
-    }}
-  >
-    {FormFieldCheckbox.bind({})}
-  </Story>
-</Canvas>
-
-## Invalid
-
-<Canvas>
-  <Story
-    name="invalid"
-    args={{
-      ...exampleArgs,
-      id: "6cfb69fc-3a52-4fd8-b8a1-0c2d0dfb11ed",
-      label: "Ik ga akkoord met de algemene voorwaarden",
-      description: "U kunt ons echt vertrouwen!",
-      invalid: true,
-      required: true,
-      invalidDescription: "U moet akkoord gaan met de algemene voorwaarden, anders kunt u niet verder.",
-      type: "checkbox",
-    }}
-  >
-    {FormFieldCheckbox.bind({})}
-  </Story>
-</Canvas>
-
-## Right-to-left script
-
-<Canvas>
-  <Story
-    name="Right-to-left script"
-    decorators={[
-      (Story) => (
-        <div lang="ar" dir="rtl">
-          {Story()}
-        </div>
-      ),
-    ]}
-    args={{
-      ...exampleArgs,
-      id: "2d692d60-e111-4582-a487-385cdbd3f994",
-      label: "أوافق على الشروط",
-      description: "يمكنك حقا أن تثق بنا!",
-      invalid: true,
-      required: true,
-      invalidDescription: "يجب أن توافق على الشروط والأحكام وإلا فلن تتمكن من المتابعة.",
-      type: "checkbox",
-    }}
-  >
-    {FormFieldCheckbox.bind({})}
-  </Story>
-</Canvas>
-
-## Rich text description
-
-<Canvas>
-  <Story
-    name="Rich text description"
-    args={{
-      ...exampleArgs,
-      id: "f23a0d30-29b5-4e82-a6e5-7eb83e5cd47a",
-      description: (
-        <>
-          <p className="utrecht-paragraph">Your new password needs to meet these requirements:</p>
-          <ul className="utrecht-unordered-list">
-            <li>At least 1 character</li>
-            <li>No more than 2 characters</li>
-            <li>Use at least one uppercase letter and one lowercase letter.</li>
-          </ul>
-        </>
-      ),
-      invalidDescription: (
-        <>
-          <p className="utrecht-paragraph">Your new password does not meet these requirements:</p>
-          <ul className="utrecht-unordered-list">
-            <li>Your password is too long.</li>
-            <li>Use at least one uppercase letter.</li>
-          </ul>
-        </>
-      ),
-      type: "checkbox",
-    }}
-  >
-    {FormFieldCheckbox.bind({})}
-  </Story>
-</Canvas>

package/src/stories/example.stories.mdx

@@ -1,292 +0,0 @@
-{/* @license CC0-1.0 */}
-
-import { Canvas, Markdown, Meta, Story } from "@storybook/blocks";
-import emailDocs from "./_email.md";
-import newPasswordDocs from "./_new-password.md";
-import telDocs from "./_tel.md";
-import voorvoegsels from "./voorvoegsels-tabel-36.json";
-import achternaamDocs from "../../../textbox/_achternaam.md";
-import naamDocs from "../../../textbox/_naam.md";
-import postcodeDocs from "../../../textbox/_postcode.md";
-import voornaamDocs from "../../../textbox/_voornaam.md";
-import voorvoegselDocs from "../../../textbox/_voorvoegsel.md";
-import { argTypes, defaultArgs, FormFieldExample } from "../story-template";
-
-<Meta
-  id="css-form-field--examples"
-  title="CSS Component/Form field/Common examples"
-  component={FormFieldExample}
-  argTypes={argTypes}
-  args={defaultArgs}
-  parameters={{
-    status: {
-      type: "WORK IN PROGRESS",
-    },
-  }}
-/>
-
-# Common examples of form fields
-
-## Naam
-
-<Markdown>{naamDocs}</Markdown>
-
-<Canvas>
-  <Story
-    name="Naam"
-    args={{
-      control: "text",
-      type: "text",
-      label: "Naam",
-      minLength: 1,
-      maxLength: 412, // 200 + 1 + 10 + 1 + 200,
-      required: true,
-      autoComplete: "name",
-      spellcheck: "false",
-      id: "4c6d647b-bacd-437f-b160-6304353ddbdd",
-    }}
-    parameters={{
-      chromatic: { disableSnapshot: true },
-    }}
-  >
-    {FormFieldExample.bind({})}
-  </Story>
-</Canvas>
-
-## Voornaam
-
-<Markdown>{voornaamDocs}</Markdown>
-
-<Canvas>
-  <Story
-    name="Voornaam"
-    args={{
-      control: "text",
-      type: "text",
-      label: "Voornaam",
-      required: true,
-      minLength: 1,
-      maxLength: 200,
-      spellcheck: "false",
-      autoComplete: "given-name",
-      id: "af0084ba-cef6-489d-a876-1da92277624c",
-    }}
-    parameters={{
-      chromatic: { disableSnapshot: true },
-    }}
-  >
-    {FormFieldExample.bind({})}
-  </Story>
-</Canvas>
-
-## Voornamen
-
-<Canvas>
-  <Story
-    name="Voornamen"
-    args={{
-      control: "text",
-      type: "text",
-      label: "Voornaam (1 of meerdere)",
-      minLength: 1,
-      maxLength: 200,
-      spellcheck: "false",
-      required: true,
-      id: "8ad75c24-32b9-4558-9057-9b5b327f9b70",
-    }}
-    parameters={{
-      chromatic: { disableSnapshot: true },
-    }}
-  >
-    {FormFieldExample.bind({})}
-  </Story>
-</Canvas>
-
-## Achternaam
-
-<Markdown>{achternaamDocs}</Markdown>
-
-<Canvas>
-  <Story
-    name="Achternaam"
-    args={{
-      control: "text",
-      type: "text",
-      label: "Achternaam",
-      minLength: 1,
-      maxLength: 200,
-      required: true,
-      spellcheck: "false",
-      autoComplete: "family-name",
-      id: "12719913-e6d1-43a9-8068-239f609abea0",
-    }}
-    parameters={{
-      chromatic: { disableSnapshot: true },
-    }}
-  >
-    {FormFieldExample.bind({})}
-  </Story>
-</Canvas>
-
-## Voorvoegsel
-
-<Markdown>{voorvoegselDocs}</Markdown>
-
-<Canvas>
-  <Story
-    name="Voorvoegsel"
-    args={{
-      control: "text",
-      type: "text",
-      label: "Voorvoegsel",
-      minLength: 1,
-      maxLength: 10,
-      required: false,
-      spellcheck: "false",
-      datalist: voorvoegsels.map((item) => ({ label: item })),
-      id: "ac0c98d6-2ad1-453e-9e06-6b26a5f61546",
-    }}
-    parameters={{
-      chromatic: { disableSnapshot: true },
-    }}
-  >
-    {FormFieldExample.bind({})}
-  </Story>
-</Canvas>
-
-## Postcode
-
-<Markdown>{postcodeDocs}</Markdown>
-
-<Canvas>
-  <Story
-    name="Postcode"
-    args={{
-      control: "text",
-      type: "text",
-      label: "Postcode",
-      spellcheck: "false",
-      autoComplete: "postal-code",
-      id: "16e1fde4-94e2-4848-9cae-27679070bc93",
-    }}
-    parameters={{
-      chromatic: { disableSnapshot: true },
-    }}
-  >
-    {FormFieldExample.bind({})}
-  </Story>
-</Canvas>
-
-## Gebruikersnaam
-
-<Canvas>
-  <Story
-    name="Gebruikersnaam"
-    args={{
-      control: "text",
-      type: "text",
-      label: "Gebruikersnaam",
-      spellcheck: "false",
-      autoComplete: "username",
-      id: "6b4dc32d-1a12-496b-bfe6-19470f48f156",
-    }}
-    parameters={{
-      chromatic: { disableSnapshot: true },
-    }}
-  >
-    {FormFieldExample.bind({})}
-  </Story>
-</Canvas>
-
-## Wachtwoord
-
-<Canvas>
-  <Story
-    name="Wachtwoord"
-    args={{
-      control: "text",
-      type: "password",
-      label: "Wachtwoord",
-      autoComplete: "current-password",
-      spellcheck: "false",
-      id: "0e462594-7b98-4755-ad8e-3a661df6da05",
-    }}
-    parameters={{
-      chromatic: { disableSnapshot: true },
-    }}
-  >
-    {FormFieldExample.bind({})}
-  </Story>
-</Canvas>
-
-## E-mail
-
-<Markdown>{emailDocs}</Markdown>
-
-<Canvas>
-  <Story
-    name="E-mail"
-    args={{
-      control: "text",
-      type: "email",
-      label: "E-mailadres",
-      description: "Wij sturen op dit e-mailadres de ontvangstbevestiging en we nemen via e-mail contact met u op.",
-      required: true,
-      autoComplete: "email",
-      spellcheck: "false",
-      id: "ba119f18-ce9d-42d7-8d32-cdfbc6531137",
-    }}
-    parameters={{
-      chromatic: { disableSnapshot: true },
-    }}
-  >
-    {FormFieldExample.bind({})}
-  </Story>
-</Canvas>
-
-## Telefoonnummer
-
-<Markdown>{telDocs}</Markdown>
-
-<Canvas>
-  <Story
-    name="Telefoonnummer"
-    args={{
-      control: "text",
-      type: "tel",
-      label: "Telefoonnummer",
-      description: "Wij bellen u als de afspraak onverwacht niet door kan gaan. We sturen dan ook een e-mail.",
-      autoComplete: "tel",
-      spellcheck: "false",
-      id: "88b391aa-7b6b-4e86-8033-e810ee4e847e",
-    }}
-    parameters={{
-      chromatic: { disableSnapshot: true },
-    }}
-  >
-    {FormFieldExample.bind({})}
-  </Story>
-</Canvas>
-
-## Nieuw wachtwoord
-
-<Markdown>{newPasswordDocs}</Markdown>
-
-<Canvas>
-  <Story
-    name="Nieuw wachtwoord"
-    args={{
-      control: "text",
-      type: "password",
-      label: "Nieuw wachtwoord",
-      autoComplete: "new-password",
-      spellcheck: "false",
-      id: "6dcec3ba-eb91-4173-af55-1b229688d3f7",
-    }}
-    parameters={{
-      chromatic: { disableSnapshot: true },
-    }}
-  >
-    {FormFieldExample.bind({})}
-  </Story>
-</Canvas>

package/src/stories/radio-group.stories.mdx

@@ -1,162 +0,0 @@
-{/* @license CC0-1.0 */}
-
-import { Canvas, Meta, Story } from "@storybook/blocks";
-import { argTypes, defaultArgs, exampleArgs, FormFieldRadioGroup } from "../story-template";
-import "../../../checkbox/src/index.scss";
-import "../../../form-label/src/index.scss";
-import "../index.scss";
-
-<Meta
-  id="css-form-field--radio-group"
-  title="CSS Component/Form field/with radio group"
-  component={FormFieldRadioGroup}
-  argTypes={argTypes}
-  args={defaultArgs}
-  parameters={{
-    status: {
-      type: "WORK IN PROGRESS",
-    },
-  }}
-/>
-
-# Form field with radio group
-
-## with only a label
-
-<Canvas>
-  <Story
-    name="label"
-    args={{
-      ...exampleArgs,
-      name: "890a84a6-5088-47df-8f8e-4566d3bd42ad",
-      groupLabel: "Choose your option",
-      groupId: "115a159b-7527-452d-bcfc-f4770b30d00e",
-      options: [
-        {
-          id: "2185ffaa-0086-43f7-82ef-162d048df198",
-          value: "1",
-          label: "Option 1",
-        },
-        {
-          id: "c664343d-22d9-417d-a3ca-356e2d0774d5",
-          value: "2",
-          label: "Option 2",
-        },
-        {
-          id: "36242fff-3a06-48eb-8451-f32ffcd00f7a",
-          value: "3",
-          label: "Option 3",
-        },
-      ],
-    }}
-  >
-    {FormFieldRadioGroup.bind({})}
-  </Story>
-</Canvas>
-
-## with heading as label
-
-<Canvas>
-  <Story
-    name="Heading as label"
-    args={{
-      ...exampleArgs,
-      name: "2ce3b9f7-5ade-4048-8719-e4b57fc0fd4f",
-      groupLabel: "Choose your option",
-      groupId: "4adcc33d-1ac3-4e2e-9630-04c09213dbb9",
-      headingLevel: 1,
-      options: [
-        {
-          id: "3bce233e-57aa-49b3-bba7-87fa36f3774c",
-          value: "1",
-          label: "Option 1",
-        },
-        {
-          id: "de55cc3e-ca5b-4487-8295-ee3ca804ed5e",
-          value: "2",
-          label: "Option 2",
-        },
-        {
-          id: "d3bcfabb-ed87-4185-87b9-65dc63ac5430",
-          value: "3",
-          label: "Option 3",
-        },
-      ],
-    }}
-  >
-    {FormFieldRadioGroup.bind({})}
-  </Story>
-</Canvas>
-
-## with an additional description
-
-<Canvas>
-  <Story
-    name="description"
-    args={{
-      ...exampleArgs,
-      name: "398a943f-a170-4be4-af6b-c74ed3452bce",
-      groupId: "2c0d76a7-0232-45ba-bbf3-6897288253dd",
-      groupLabel: "Label",
-      groupDescription: "Description",
-      options: [
-        {
-          id: "555a9615-6ad3-453f-a504-14bf71fc3cf9",
-          label: "Option 1",
-          value: "1",
-          description: "The first option is the most popular, but not the best option.",
-        },
-        {
-          id: "37aa1094-9b94-4d56-99af-615adc6bd861",
-          checked: true,
-          label: "Option 2",
-          value: "2",
-          description: "The best option!",
-        },
-        {
-          id: "8f4b330a-a554-4545-a616-17578766a534",
-          label: "Option 3",
-          value: "3",
-          description: "The last option.",
-        },
-      ],
-    }}
-  >
-    {FormFieldRadioGroup.bind({})}
-  </Story>
-</Canvas>
-
-## with a description for an invalid value
-
-<Canvas>
-  <Story
-    name="invalid"
-    args={{
-      ...exampleArgs,
-      name: "ddf3c086-5337-4032-8b23-367d9423c7bb",
-      groupLabel: "Choose your option",
-      groupInvalidDescription: "Bad option!",
-      groupId: "9257c2a4-4445-47f5-9847-4c5eb9f3ab9e",
-      invalid: true,
-      options: [
-        {
-          id: "2140c911-983d-47bc-ade4-199cf2d09ea8",
-          value: "1",
-          label: "Option 1",
-        },
-        {
-          id: "d713af44-62e4-41be-8d05-8d7917e9bc66",
-          value: "2",
-          label: "Option 2",
-        },
-        {
-          id: "17988dcf-d790-4204-a0a4-87f0211d2ac2",
-          value: "3",
-          label: "Option 3",
-        },
-      ],
-    }}
-  >
-    {FormFieldRadioGroup.bind({})}
-  </Story>
-</Canvas>

package/src/stories/readme.stories.mdx

@@ -1,6 +0,0 @@
-import { Markdown, Meta } from "@storybook/blocks";
-import document from "../../README.md";
-
-<Meta id="css-form-field--readme" title="CSS Component/Form field/README" />
-
-<Markdown>{document}</Markdown>