@developer-overheid-nl/don-register-components 1.3.0 → 1.6.1

package/src/formFieldRadioOption/FormFieldRadioOption.tsx

@@ -1,75 +1,75 @@
-import {
-  type CustomFormFieldProps,
-  FormField,
-  Radio as RHCRadio,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import { Fragment, useId } from "react";
-import AmountLabel, { type AmountLabelProps } from "../amountLabel/AmountLabel";
-import styles from "./styles.module.css";
-
-export interface FormFieldRadioOptionProps
-  extends Omit<
-      CustomFormFieldProps,
-      "label" | "statusId" | "errorMessageId" | "descriptionId" | "input"
-    >,
-    AmountLabelProps {
-  name: string;
-  value: string;
-  checked?: boolean;
-  defaultChecked?: boolean;
-  statusId?: CustomFormFieldProps["statusId"];
-  errorMessageId?: CustomFormFieldProps["errorMessageId"];
-  descriptionId?: CustomFormFieldProps["descriptionId"];
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-}
-
-const FormFieldRadioOption = (props: FormFieldRadioOptionProps) => {
-  const genId = useId();
-  const {
-    id = genId,
-    statusId = genId,
-    errorMessageId = genId,
-    descriptionId = genId,
-    name,
-    value,
-    defaultChecked,
-    checked,
-    amount,
-    label,
-    className,
-    children,
-    onChange,
-    ...restProps
-  } = props;
-
-  return (
-    <FormField
-      type="radio" // although not exposed by RHC
-      className={clsx("utrecht-form-field--radio", styles.radio, className)}
-      statusId={statusId}
-      errorMessageId={errorMessageId}
-      descriptionId={descriptionId}
-      label={
-        <Fragment>
-          <RHCRadio
-            id={id}
-            name={name}
-            value={value}
-            checked={checked}
-            defaultChecked={defaultChecked}
-            className="utrecht-checkbox--custom utrecht-form-field__input"
-            onChange={onChange}
-          />
-          <AmountLabel label={label} amount={amount} />
-        </Fragment>
-      }
-      input={null}
-      {...restProps}
-    >
-      <span className={styles.info}>{children}</span>
-    </FormField>
-  );
-};
-
-export default FormFieldRadioOption;
+import {
+  type CustomFormFieldProps,
+  FormField,
+  Radio as RHCRadio,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import { Fragment, useId } from "react";
+import AmountLabel, { type AmountLabelProps } from "../amountLabel/AmountLabel";
+import styles from "./styles.module.css";
+
+export interface FormFieldRadioOptionProps
+  extends Omit<
+      CustomFormFieldProps,
+      "label" | "statusId" | "errorMessageId" | "descriptionId" | "input"
+    >,
+    AmountLabelProps {
+  name: string;
+  value: string;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  statusId?: CustomFormFieldProps["statusId"];
+  errorMessageId?: CustomFormFieldProps["errorMessageId"];
+  descriptionId?: CustomFormFieldProps["descriptionId"];
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+const FormFieldRadioOption = (props: FormFieldRadioOptionProps) => {
+  const genId = useId();
+  const {
+    id = genId,
+    statusId = genId,
+    errorMessageId = genId,
+    descriptionId = genId,
+    name,
+    value,
+    defaultChecked,
+    checked,
+    amount,
+    label,
+    className,
+    children,
+    onChange,
+    ...restProps
+  } = props;
+
+  return (
+    <FormField
+      type="radio" // although not exposed by RHC
+      className={clsx("utrecht-form-field--radio", styles.radio, className)}
+      statusId={statusId}
+      errorMessageId={errorMessageId}
+      descriptionId={descriptionId}
+      label={
+        <Fragment>
+          <RHCRadio
+            id={id}
+            name={name}
+            value={value}
+            checked={checked}
+            defaultChecked={defaultChecked}
+            className="utrecht-checkbox--custom utrecht-form-field__input"
+            onChange={onChange}
+          />
+          <AmountLabel label={label} amount={amount} />
+        </Fragment>
+      }
+      input={null}
+      {...restProps}
+    >
+      <span className={styles.info}>{children}</span>
+    </FormField>
+  );
+};
+
+export default FormFieldRadioOption;

package/src/formFieldRadioOption/styles.module.css

@@ -1,49 +1,49 @@
-.radio.radio {
-  --utrecht-form-field-label-margin-block-end: 0;
-
-  grid-template-areas:
-    'input label info'
-    'input description description'
-    'input error-message error-message'
-    'input status status';
-
-  :global(.utrecht-form-field--radio .utrecht-form-field__label) {
-    display: block;
-  }
-
-  :global(.utrecht-form-label) {
-    /* like checkbox */
-    display: flex;
-    font-weight: var(
-      --utrecht-form-label-checkbox-font-weight,
-      var(--utrecht-form-label-font-weight)
-    );
-    color: var(
-      --utrecht-form-label-checkbox-color,
-      var(--utrecht-form-label-color)
-    );
-    cursor: var(--utrecht-action-activate-cursor, revert);
-  }
-
-  :global(.utrecht-radio-button) {
-    order: initial;
-    margin-block-start: 0;
-  }
-
-  :global(
-      .utrecht-form-field--radio
-      .utrecht-form-field__label:has(.utrecht-form-field__input)
-    ) {
-    margin-inline-start: calc(
-      -1 *
-      (
-        var(--utrecht-radio-button-size) +
-        var(--utrecht-checkbox-margin-inline-end, 12px)
-      )
-    );
-  }
-}
-
-.info {
-  grid-area: info;
-}
+.radio.radio {
+  --utrecht-form-field-label-margin-block-end: 0;
+
+  grid-template-areas:
+    'input label info'
+    'input description description'
+    'input error-message error-message'
+    'input status status';
+
+  :global(.utrecht-form-field--radio .utrecht-form-field__label) {
+    display: block;
+  }
+
+  :global(.utrecht-form-label) {
+    /* like checkbox */
+    display: flex;
+    font-weight: var(
+      --utrecht-form-label-checkbox-font-weight,
+      var(--utrecht-form-label-font-weight)
+    );
+    color: var(
+      --utrecht-form-label-checkbox-color,
+      var(--utrecht-form-label-color)
+    );
+    cursor: var(--utrecht-action-activate-cursor, revert);
+  }
+
+  :global(.utrecht-radio-button) {
+    order: initial;
+    margin-block-start: 0;
+  }
+
+  :global(
+      .utrecht-form-field--radio
+        .utrecht-form-field__label:has(.utrecht-form-field__input)
+    ) {
+    margin-inline-start: calc(
+      -1 *
+      (
+        var(--utrecht-radio-button-size) +
+        var(--utrecht-checkbox-margin-inline-end, 12px)
+      )
+    );
+  }
+}
+
+.info {
+  grid-area: info;
+}

package/src/formFieldSwitch/FormFieldSwitch.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FormFieldSwitch from "./FormFieldSwitch";
+
+/**
+ * FormFieldSwitch is een aan/uit-schakelaar binnen een formulierveld,
+ * bijvoorbeeld voor een boolean filter. Ondersteunt een `explicit`-modus met
+ * twee losse radio-opties (aan/uit) in plaats van één toggle.
+ */
+const meta = {
+  title: "Components/Form/FormFieldSwitch",
+  component: FormFieldSwitch,
+  tags: ["autodocs", "custom"],
+  args: {
+    label: "",
+    labelledById: "publiccode-label",
+    labels: { on: "Aan", off: "Uit" },
+    name: "publiccode",
+    value: "true",
+  },
+  argTypes: {
+    checked: { control: "boolean" },
+    defaultChecked: { control: "boolean" },
+    explicit: { control: "boolean" },
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <span id="publiccode-label" className="utrecht-form-label">
+          Heeft publiccode.yml
+        </span>
+        <Story />
+      </>
+    ),
+  ],
+} satisfies Meta<typeof FormFieldSwitch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithAmount: Story = {
+  args: {
+    amount: 9,
+  },
+};
+
+export const CheckedOn: Story = {
+  args: {
+    amount: 9,
+    defaultChecked: true,
+  },
+};
+
+export const Explicit: Story = {
+  name: "Explicit (aan/uit als losse opties)",
+  args: {
+    explicit: true,
+    value: ["true", "false"],
+  },
+};

package/src/formFieldSwitch/FormFieldSwitch.tsx

@@ -1,79 +1,82 @@
-import {
-  type CustomFormFieldProps,
-  FormField,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import { useId } from "react";
-import AmountLabel, { type AmountLabelProps } from "../amountLabel/AmountLabel";
-import Switch, { type SwitchLabels } from "../switch/Switch";
-import styles from "./styles.module.css";
-
-export interface FormFieldSwitchProps
-  extends Omit<
-      CustomFormFieldProps,
-      "label" | "statusId" | "errorMessageId" | "descriptionId" | "input"
-    >,
-    AmountLabelProps {
-  name: string;
-  value: string;
-  checked?: boolean;
-  defaultChecked?: boolean;
-  statusId?: CustomFormFieldProps["statusId"];
-  errorMessageId?: CustomFormFieldProps["errorMessageId"];
-  descriptionId?: CustomFormFieldProps["descriptionId"];
-  labelledById?: string;
-  labels?: SwitchLabels;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-}
-
-const FormFieldSwitch = (props: FormFieldSwitchProps) => {
-  const genId = useId();
-  const {
-    id = genId,
-    statusId = genId,
-    errorMessageId = genId,
-    descriptionId = genId,
-    labelledById,
-    name,
-    value,
-    defaultChecked,
-    checked,
-    amount,
-    label,
-    labels,
-    onChange,
-    className,
-    children,
-    ...restProps
-  } = props;
-
-  return (
-    <FormField
-      id={id}
-      type="checkbox"
-      className={clsx("utrecht-form-field--checkbox", styles.switch, className)}
-      statusId={statusId}
-      errorMessageId={errorMessageId}
-      descriptionId={descriptionId}
-      label={<AmountLabel label={label} amount={amount} />}
-      input={
-        <Switch
-          id={id}
-          name={name}
-          value={value}
-          checked={checked}
-          defaultChecked={defaultChecked}
-          className="utrecht-form-field__input"
-          labels={labels}
-          aria-labelledby={`${labelledById} ${id}`}
-          onChange={onChange}
-        />
-      }
-      {...restProps}
-    >
-      <span className={styles.info}>{children}</span>
-    </FormField>
-  );
-};
-
-export default FormFieldSwitch;
+import {
+  type CustomFormFieldProps,
+  FormField,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import { useId } from "react";
+import AmountLabel, { type AmountLabelProps } from "../amountLabel/AmountLabel";
+import Switch, { type SwitchLabels } from "../switch/Switch";
+import styles from "./styles.module.css";
+
+export interface FormFieldSwitchProps
+  extends Omit<
+      CustomFormFieldProps,
+      "label" | "statusId" | "errorMessageId" | "descriptionId" | "input"
+    >,
+    AmountLabelProps {
+  name?: string;
+  value: string | string[];
+  explicit?: boolean;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  statusId?: CustomFormFieldProps["statusId"];
+  errorMessageId?: CustomFormFieldProps["errorMessageId"];
+  descriptionId?: CustomFormFieldProps["descriptionId"];
+  labelledById?: string;
+  labels?: SwitchLabels;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+const FormFieldSwitch = (props: FormFieldSwitchProps) => {
+  const genId = useId();
+  const {
+    id = genId,
+    statusId = genId,
+    errorMessageId = genId,
+    descriptionId = genId,
+    labelledById,
+    name,
+    value,
+    explicit,
+    defaultChecked,
+    checked,
+    amount,
+    label,
+    labels,
+    onChange,
+    className,
+    children,
+    ...restProps
+  } = props;
+
+  return (
+    <FormField
+      id={id}
+      type="checkbox"
+      className={clsx("utrecht-form-field--checkbox", styles.switch, className)}
+      statusId={statusId}
+      errorMessageId={errorMessageId}
+      descriptionId={descriptionId}
+      label={<AmountLabel label={label} amount={amount} />}
+      input={
+        <Switch
+          id={id}
+          name={name}
+          value={value}
+          explicit={explicit}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          className="utrecht-form-field__input"
+          labels={labels}
+          aria-labelledby={`${labelledById} ${id}`}
+          onChange={onChange}
+        />
+      }
+      {...restProps}
+    >
+      <span className={styles.info}>{children}</span>
+    </FormField>
+  );
+};
+
+export default FormFieldSwitch;

package/src/formFieldSwitch/styles.module.css

@@ -1,32 +1,32 @@
-.switch.switch {
-  --utrecht-form-field-label-margin-block-end: 0;
-  --utrecht-checkbox-size: var(--utrecht-form-toggle-width);
-
-  grid-template-areas:
-    'input label info'
-    'input description description'
-    'input error-message error-message'
-    'input status status';
-
-  :global(.utrecht-form-field--radio .utrecht-form-field__label) {
-    display: block;
-  }
-
-  :global(.utrecht-form-label) {
-    /* like checkbox */
-    display: flex;
-    font-weight: var(
-      --utrecht-form-label-checkbox-font-weight,
-      var(--utrecht-form-label-font-weight)
-    );
-    color: var(
-      --utrecht-form-label-checkbox-color,
-      var(--utrecht-form-label-color)
-    );
-    cursor: var(--utrecht-action-activate-cursor, revert);
-  }
-}
-
-.info {
-  grid-area: info;
-}
+.switch.switch {
+  --utrecht-form-field-label-margin-block-end: 0;
+  --utrecht-checkbox-size: var(--utrecht-form-toggle-width);
+
+  grid-template-areas:
+    'input label info'
+    'input description description'
+    'input error-message error-message'
+    'input status status';
+
+  :global(.utrecht-form-field--radio .utrecht-form-field__label) {
+    display: block;
+  }
+
+  :global(.utrecht-form-label) {
+    /* like checkbox */
+    display: flex;
+    font-weight: var(
+      --utrecht-form-label-checkbox-font-weight,
+      var(--utrecht-form-label-font-weight)
+    );
+    color: var(
+      --utrecht-form-label-checkbox-color,
+      var(--utrecht-form-label-color)
+    );
+    cursor: var(--utrecht-action-activate-cursor, revert);
+  }
+}
+
+.info {
+  grid-area: info;
+}

package/src/formFieldTextInput/FormFieldTextInput.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FormFieldTextInput from "./FormFieldTextInput";
+
+/**
+ * FormFieldTextInput is een tekstinvoerveld met label, beschrijving en
+ * foutmelding.
+ */
+const meta = {
+  title: "Components/Form/FormFieldTextInput",
+  component: FormFieldTextInput,
+  tags: ["autodocs", "re-export"],
+  args: {
+    label: "E-mailadres",
+    placeholder: "naam@voorbeeld.nl",
+  },
+  argTypes: {
+    disabled: { control: "boolean" },
+    invalid: { control: "boolean" },
+    required: { control: "boolean" },
+  },
+} satisfies Meta<typeof FormFieldTextInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithDescription: Story = {
+  args: {
+    description: "We gebruiken dit e-mailadres alleen om contact op te nemen.",
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    invalid: true,
+    errorMessage: "Vul een geldig e-mailadres in.",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};

package/src/formFieldTextInput/FormFieldTextInput.tsx

@@ -1,3 +1,3 @@
-import { FormFieldTextInput } from "@rijkshuisstijl-community/components-react";
-
-export default FormFieldTextInput;
+import { FormFieldTextInput } from "@rijkshuisstijl-community/components-react";
+
+export default FormFieldTextInput;

package/src/grid/Grid.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Grid from "./Grid";
+
+/**
+ * Grid is een hulpcomponent voor een responsieve CSS-grid: kolommen vullen
+ * automatisch aan op basis van `minColumnWidth`, met een gap-schaal
+ * (`none`, `small`, `medium`, `large`).
+ *
+ * Wordt op dit moment alleen gebruikt in Storybook, nog niet in de
+ * registersites zelf.
+ */
+const meta = {
+  title: "Components/Grid",
+  component: Grid,
+  tags: ["autodocs", "code-only", "beta"],
+  argTypes: {
+    gap: {
+      control: "select",
+      options: ["none", "small", "medium", "large"],
+    },
+  },
+  args: {
+    minColumnWidth: "6rem",
+    gap: "medium",
+    children: Array.from({ length: 42 }, (_, index) => (
+      // biome-ignore lint/suspicious/noArrayIndexKey: static placeholder list
+      <div key={index} style={{ background: "#e0e0e0", padding: "1rem" }}>
+        Item {index + 1}
+      </div>
+    )),
+  },
+} satisfies Meta<typeof Grid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/grid/Grid.tsx

@@ -0,0 +1,48 @@
+import clsx from "clsx";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import styles from "./styles.module.css";
+
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+  minColumnWidth?: string;
+  gap?: "none" | "small" | "medium" | "large";
+  children: ReactNode;
+}
+
+const getGapClass = (gap: NonNullable<GridProps["gap"]>): string => {
+  switch (gap) {
+    case "none":
+      return styles.gapNone;
+    case "small":
+      return styles.gapSmall;
+    case "large":
+      return styles.gapLarge;
+    default:
+      return styles.gapMedium;
+  }
+};
+
+const Grid = ({
+  minColumnWidth = "8rem",
+  gap = "medium",
+  className,
+  style,
+  children,
+  ...restProps
+}: GridProps) => {
+  return (
+    <div
+      className={clsx(styles.grid, getGapClass(gap), className)}
+      style={
+        {
+          "--grid-min-column-width": minColumnWidth,
+          ...style,
+        } as CSSProperties
+      }
+      {...restProps}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Grid;