@utrecht/form-field-css 1.3.0 → 1.4.0

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

@@ -1,335 +0,0 @@
-[
-  "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

@@ -1,352 +0,0 @@
-/**
- * @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>
-);