@utrecht/form-field-css 1.0.0 → 1.2.0

package/src/stories/voorvoegsels-tabel-36.json

@@ -0,0 +1,335 @@
+[
+  "A",
+  "a",
+  "aan",
+  "Aan",
+  "aan de",
+  "Aan de",
+  "aan den",
+  "Aan den",
+  "aan der",
+  "Aan der",
+  "Aan het",
+  "aan het",
+  "Aan t",
+  "aan t",
+  "aan 't",
+  "Aan 't",
+  "Af",
+  "af",
+  "al",
+  "Al",
+  "am",
+  "Am",
+  "am de",
+  "Am de",
+  "auf",
+  "Auf",
+  "auf dem",
+  "Auf dem",
+  "auf den",
+  "Auf den",
+  "auf der",
+  "Auf der",
+  "auf ter",
+  "Auf ter",
+  "Aus",
+  "aus",
+  "aus dem",
+  "Aus dem",
+  "Aus den",
+  "aus den",
+  "Aus der",
+  "aus der",
+  "aus m",
+  "Aus m",
+  "Aus 'm",
+  "aus 'm",
+  "Ben",
+  "ben",
+  "bij",
+  "Bij",
+  "Bij de",
+  "bij de",
+  "bij den",
+  "Bij den",
+  "Bij het",
+  "bij het",
+  "bij t",
+  "Bij t",
+  "bij 't",
+  "Bij 't",
+  "bin",
+  "Bin",
+  "boven d",
+  "Boven d",
+  "boven d'",
+  "Boven d'",
+  "d",
+  "D",
+  "D'",
+  "d'",
+  "Da",
+  "da",
+  "Dal",
+  "dal",
+  "dal'",
+  "Dal'",
+  "Dalla",
+  "dalla",
+  "das",
+  "Das",
+  "de",
+  "De",
+  "de die",
+  "De die",
+  "de die le",
+  "De die le",
+  "de l",
+  "De l",
+  "de l'",
+  "De l'",
+  "de la",
+  "De la",
+  "de las",
+  "De las",
+  "De le",
+  "de le",
+  "de van der",
+  "De van der",
+  "deca",
+  "Deca",
+  "Degli",
+  "degli",
+  "Dei",
+  "dei",
+  "del",
+  "Del",
+  "Della",
+  "della",
+  "den",
+  "Den",
+  "Der",
+  "der",
+  "des",
+  "Des",
+  "di",
+  "Di",
+  "die le",
+  "Die le",
+  "do",
+  "Do",
+  "don",
+  "Don",
+  "dos",
+  "Dos",
+  "du",
+  "Du",
+  "el",
+  "El",
+  "Het",
+  "het",
+  "i",
+  "I",
+  "im",
+  "Im",
+  "In",
+  "in",
+  "In de",
+  "in de",
+  "In den",
+  "in den",
+  "in der",
+  "In der",
+  "in het",
+  "In het",
+  "in t",
+  "In t",
+  "In 't",
+  "in 't",
+  "L",
+  "l",
+  "L'",
+  "l'",
+  "la",
+  "La",
+  "Las",
+  "las",
+  "le",
+  "Le",
+  "les",
+  "Les",
+  "lo",
+  "Lo",
+  "Los",
+  "los",
+  "Of",
+  "of",
+  "Onder",
+  "onder",
+  "onder de",
+  "Onder de",
+  "onder den",
+  "Onder den",
+  "onder het",
+  "Onder het",
+  "onder t",
+  "Onder t",
+  "onder 't",
+  "Onder 't",
+  "op",
+  "Op",
+  "op de",
+  "Op de",
+  "Op den",
+  "op den",
+  "op der",
+  "Op der",
+  "Op gen",
+  "op gen",
+  "op het",
+  "Op het",
+  "op t",
+  "Op t",
+  "op 't",
+  "Op 't",
+  "op ten",
+  "Op ten",
+  "Over",
+  "over",
+  "over de",
+  "Over de",
+  "over den",
+  "Over den",
+  "over het",
+  "Over het",
+  "over t",
+  "Over t",
+  "over 't",
+  "Over 't",
+  "s",
+  "S",
+  "'s",
+  "'S",
+  "s'",
+  "S'",
+  "t",
+  "T",
+  "'t",
+  "'T",
+  "Te",
+  "te",
+  "ten",
+  "Ten",
+  "ter",
+  "Ter",
+  "Tho",
+  "tho",
+  "Thoe",
+  "thoe",
+  "thor",
+  "Thor",
+  "to",
+  "To",
+  "Toe",
+  "toe",
+  "Tot",
+  "tot",
+  "uijt",
+  "Uijt",
+  "Uijt de",
+  "uijt de",
+  "Uijt den",
+  "uijt den",
+  "Uijt 't",
+  "uijt 't",
+  "uijt te de",
+  "Uijt te de",
+  "uijt ten",
+  "Uijt ten",
+  "uit",
+  "Uit",
+  "Uit de",
+  "uit de",
+  "uit den",
+  "Uit den",
+  "uit het",
+  "Uit het",
+  "uit t",
+  "Uit t",
+  "uit 't",
+  "Uit 't",
+  "Uit te de",
+  "uit te de",
+  "Uit ten",
+  "uit ten",
+  "Unter",
+  "unter",
+  "van",
+  "Van",
+  "Van de",
+  "van De",
+  "van de",
+  "van de l",
+  "Van de l",
+  "Van de l'",
+  "van de l'",
+  "van den",
+  "Van Den",
+  "Van den",
+  "van der",
+  "Van der",
+  "Van Der",
+  "van gen",
+  "Van gen",
+  "van het",
+  "Van het",
+  "van la",
+  "Van la",
+  "van t",
+  "Van t",
+  "Van 't",
+  "van 't",
+  "Van ter",
+  "van ter",
+  "Van van de",
+  "van van de",
+  "ver",
+  "Ver",
+  "Vom",
+  "vom",
+  "von",
+  "Von",
+  "von dem",
+  "Von dem",
+  "von den",
+  "Von den",
+  "Von der",
+  "von der",
+  "Von t",
+  "von t",
+  "Von 't",
+  "von 't",
+  "voor",
+  "Voor",
+  "Voor de",
+  "voor de",
+  "Voor den",
+  "voor den",
+  "voor in t",
+  "Voor in t",
+  "voor in 't",
+  "Voor in 't",
+  "Voor 't",
+  "voor 't",
+  "vor",
+  "Vor",
+  "vor der",
+  "Vor der",
+  "Zu",
+  "zu",
+  "zum",
+  "Zum",
+  "zur",
+  "Zur"
+]

package/src/story-template.jsx

@@ -0,0 +1,352 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+
+import clsx from 'clsx';
+import React from 'react';
+import { Checkbox } from '../../checkbox/src/story-template';
+import { FormFieldDescription } from '../../form-field-description/src/story-template';
+import { FormFieldset, FormFieldsetLegend } from '../../form-fieldset/src/story-template';
+import { FormLabel } from '../../form-label/src/story-template';
+import { Heading1 } from '../../heading-1/src/story-template';
+import { Heading2 } from '../../heading-2/src/story-template';
+import { Heading3 } from '../../heading-3/src/story-template';
+import { Heading4 } from '../../heading-4/src/story-template';
+import { Heading5 } from '../../heading-5/src/story-template';
+import { Heading6 } from '../../heading-6/src/story-template';
+import { RadioButton } from '../../radio-button/src/story-template';
+import { Textarea } from '../../textarea/src/story-template';
+import { Textbox } from '../../textbox/src/story-template';
+
+export const argTypes = {
+  invalid: {
+    description: 'Invalid',
+    control: 'boolean',
+  },
+  label: {
+    description: 'Set the content of the label',
+    control: 'text',
+  },
+  headingLevel: {
+    description: 'Heading level',
+    control: { type: 'select' },
+    options: ['', '1', '2', '3', '4', '5', '6'],
+  },
+  type: {
+    description: 'Type',
+    control: { type: 'select' },
+    options: ['', 'checkbox', 'radio', 'text'],
+  },
+};
+
+export const defaultArgs = {
+  invalid: false,
+  label: '',
+  headingLevel: '',
+  type: '',
+};
+
+export const exampleArgs = {
+  name: 'subject',
+  label: 'Onderwerp',
+};
+
+export const Heading = ({ children, level }) => {
+  const HeadingComponent =
+    level === 1
+      ? Heading1
+      : level === 2
+      ? Heading2
+      : level === 3
+      ? Heading3
+      : level === 4
+      ? Heading4
+      : level === 5
+      ? Heading5
+      : level === 6
+      ? Heading6
+      : Heading1;
+
+  return <HeadingComponent>{children}</HeadingComponent>;
+};
+
+export const FormField = ({ children, id, invalid, type }) => (
+  <div
+    id={id}
+    className={clsx('utrecht-form-field', {
+      'utrecht-form-field--invalid': invalid,
+      'utrecht-form-field--checkbox': type === 'checkbox',
+      'utrecht-form-field--radio': type === 'radio',
+      'utrecht-form-field--text': !type || type === 'text',
+    })}
+  >
+    {children}
+  </div>
+);
+
+export const FormFieldTextbox = ({
+  id = defaultArgs.id,
+  name = defaultArgs.name,
+  label = defaultArgs.label,
+  value = defaultArgs.value,
+  description = defaultArgs.description,
+  invalid = defaultArgs.invalid,
+  invalidDescription = defaultArgs.invalidDescription,
+  headingLevel = null,
+  FormComponent = Textbox,
+  autoComplete,
+  inputMode,
+  dir,
+  placeholder,
+  placeholderDir,
+  type,
+}) => {
+  const descriptionId = description ? `${id}-description` : null;
+  const invalidDescriptionId = invalidDescription ? `${id}-invalid-description` : null;
+  return (
+    <FormField invalid={invalid} type="textbox">
+      {headingLevel ? (
+        <Heading level={headingLevel} className="utrecht-form-field__label" htmlFor={id}>
+          <FormLabel htmlFor={id}>{label}</FormLabel>
+        </Heading>
+      ) : (
+        <FormLabel className="utrecht-form-field__label" htmlFor={id}>
+          {label}
+        </FormLabel>
+      )}
+      {description ? (
+        <FormFieldDescription id={descriptionId} className="utrecht-form-field__description">
+          {description}
+        </FormFieldDescription>
+      ) : undefined}
+      {invalidDescription ? (
+        <FormFieldDescription id={invalidDescriptionId} status="invalid" className="utrecht-form-field__description">
+          {invalidDescription}
+        </FormFieldDescription>
+      ) : undefined}
+      <FormComponent
+        className="utrecht-form-field__input"
+        id={id}
+        value={value}
+        name={name}
+        autoComplete={autoComplete}
+        type={type}
+        inputMode={inputMode}
+        dir={dir}
+        placeholder={placeholder}
+        placeholderDir={placeholderDir}
+        aria-describedby={[descriptionId, invalidDescriptionId].filter(Boolean).join(' ') || null}
+      />
+    </FormField>
+  );
+};
+
+export default FormFieldTextbox;
+
+export const FormFieldCheckbox = ({
+  id = defaultArgs.id,
+  invalid = defaultArgs.invalid,
+  name = defaultArgs.name,
+  label = defaultArgs.label,
+  required = defaultArgs.required,
+  value = defaultArgs.value,
+  description = defaultArgs.description,
+  implicitLabel = true,
+  invalidDescription = defaultArgs.invalidDescription,
+}) => {
+  const descriptionId = description ? `${id}-description` : null;
+  const invalidDescriptionId = invalidDescription ? `${id}-invalid-description` : null;
+  const checkbox = (
+    <Checkbox
+      aria-describedby={[descriptionId, invalidDescriptionId].filter(Boolean).join(' ') || null}
+      className="utrecht-form-field__input"
+      custom={true}
+      id={id}
+      invalid={invalid}
+      required={required}
+      name={name}
+      value={value}
+    />
+  );
+
+  return (
+    <FormField invalid={invalid} type="checkbox">
+      <p className="utrecht-form-field__label utrecht-form-field__label--checkbox">
+        <FormLabel type="checkbox" htmlFor={id}>
+          {implicitLabel && checkbox}
+          {label}
+        </FormLabel>
+      </p>
+      {description ? (
+        <FormFieldDescription id={descriptionId} className="utrecht-form-field__description">
+          {description}
+        </FormFieldDescription>
+      ) : undefined}
+      {invalidDescription ? (
+        <FormFieldDescription id={invalidDescriptionId} status="invalid" className="utrecht-form-field__description">
+          {invalidDescription}
+        </FormFieldDescription>
+      ) : undefined}
+      {!implicitLabel && checkbox}
+    </FormField>
+  );
+};
+
+export const FormFieldCheckboxGroup = ({
+  groupId,
+  groupLabel,
+  groupDescription,
+  groupInvalidDescription = defaultArgs.invalidDescription,
+  groupName,
+  invalid = defaultArgs.invalid,
+  implicitLabel = true,
+  options = [],
+  headingLevel,
+}) => {
+  const groupDescriptionId = groupId && groupDescription ? `${groupId}-description` : null;
+  const groupInvalidDescriptionId = groupInvalidDescription ? `${groupId}-invalid-description` : null;
+  const groupDescribedByIds = [groupDescriptionId, groupInvalidDescriptionId].filter(Boolean).join(' ');
+  return (
+    <FormFieldset id={groupId} aria-describedby={groupDescribedByIds} invalid={invalid}>
+      <FormFieldsetLegend>
+        {headingLevel ? <Heading level={headingLevel}>{groupLabel}</Heading> : groupLabel}
+      </FormFieldsetLegend>
+      {groupDescriptionId ? (
+        <FormFieldDescription id={groupDescriptionId}>{groupDescription}</FormFieldDescription>
+      ) : undefined}
+      {groupInvalidDescriptionId ? (
+        <FormFieldDescription id={groupInvalidDescriptionId} status="invalid">
+          {groupInvalidDescription}
+        </FormFieldDescription>
+      ) : undefined}
+      {options.map(({ description, checked, id, invalid, invalidDescription, label, name, value }) => {
+        const descriptionId = `${id}-description`;
+        const invalidDescriptionId = invalid ? `${id}-invalid-description` : null;
+        const checkbox = (
+          <Checkbox
+            className="utrecht-form-field__input"
+            id={id}
+            value={value}
+            name={name || groupName}
+            defaultChecked={checked}
+            custom={true}
+            aria-describedby={[descriptionId, invalidDescriptionId].filter(Boolean).join(' ') || null}
+          />
+        );
+        return (
+          <FormField invalid={invalid} type="checkbox" key={id}>
+            <p className="utrecht-form-field__label utrecht-form-field__label--checkbox">
+              <FormLabel type="checkbox" htmlFor={id}>
+                {implicitLabel && checkbox}
+                {label}
+              </FormLabel>
+            </p>
+            {description ? (
+              <FormFieldDescription id={descriptionId} className="utrecht-form-field__description">
+                {description}
+              </FormFieldDescription>
+            ) : undefined}
+            {invalidDescription ? (
+              <FormFieldDescription
+                id={invalidDescriptionId}
+                status="invalid"
+                className="utrecht-form-field__description"
+              >
+                {invalidDescription}
+              </FormFieldDescription>
+            ) : undefined}
+            {!implicitLabel && checkbox}
+          </FormField>
+        );
+      })}
+    </FormFieldset>
+  );
+};
+
+export const FormFieldRadioGroup = ({
+  name = defaultArgs.name,
+  groupId = defaultArgs.id,
+  groupLabel,
+  groupDescription,
+  invalid = defaultArgs.invalid,
+  groupInvalidDescription,
+  implicitLabel = true,
+  options,
+  headingLevel,
+}) => {
+  const groupDescriptionId = groupDescription ? `${groupId}-description` : null;
+  const groupInvalidDescriptionId = groupInvalidDescription ? `${groupId}-invalid-description` : null;
+  const groupDescribedByIds = [groupDescriptionId, groupInvalidDescriptionId].filter(Boolean);
+  const groupDescribedBy = groupDescribedByIds.length ? groupDescribedByIds.join(' ') : undefined;
+  return (
+    <FormFieldset role="radiogroup" id={groupId} aria-describedby={groupDescribedBy} invalid={invalid}>
+      <FormFieldsetLegend>
+        {headingLevel ? <Heading level={headingLevel}>{groupLabel}</Heading> : groupLabel}
+      </FormFieldsetLegend>
+      {groupDescription ? (
+        <FormFieldDescription id={groupDescriptionId}>{groupDescription}</FormFieldDescription>
+      ) : undefined}
+      {groupInvalidDescription ? (
+        <FormFieldDescription status="invalid" id={groupInvalidDescriptionId}>
+          {groupInvalidDescription}
+        </FormFieldDescription>
+      ) : undefined}
+      {options.map(({ id, label, description, invalidDescription, value }) => {
+        const descriptionId = description ? `${id}-description` : null;
+        const invalidDescriptionId = invalidDescription ? `${id}-invalid-description` : null;
+        const input = (
+          <RadioButton
+            className="utrecht-form-field__input"
+            id={id}
+            value={value}
+            name={name}
+            custom={true}
+            aria-describedby={[descriptionId, invalidDescriptionId].filter(Boolean).join(' ') || null}
+          />
+        );
+        return (
+          <FormField type="radio" key={id}>
+            <p className="utrecht-form-field__label utrecht-form-field__label--radio">
+              <FormLabel type="radio" htmlFor={id}>
+                {implicitLabel && input}
+                {label}
+              </FormLabel>
+            </p>
+            {description ? (
+              <FormFieldDescription id={descriptionId} className="utrecht-form-field__description">
+                {description}
+              </FormFieldDescription>
+            ) : undefined}
+            {invalidDescription ? (
+              <FormFieldDescription
+                id={invalidDescriptionId}
+                status="invalid"
+                className="utrecht-form-field__description"
+              >
+                {invalidDescription}
+              </FormFieldDescription>
+            ) : undefined}
+            {!implicitLabel && input}
+          </FormField>
+        );
+      })}
+    </FormFieldset>
+  );
+};
+
+export const FormFieldExample = ({ control, ...restProps }) => {
+  if (control === 'text' || control === 'textarea') {
+    let component = control === 'textarea' ? Textarea : Textbox;
+    return FormFieldTextbox({ ...restProps, component });
+  } else {
+    return <></>;
+  }
+};
+
+export const arabicDecorator = (Story) => (
+  <div dir="rtl" lang="ar">
+    {Story()}
+  </div>
+);