@developer-overheid-nl/don-register-components 1.3.1 → 1.6.2

package/src/siteLogo/SiteLogo.tsx

@@ -1,24 +1,24 @@
-import { Logo } from "@developer-overheid-nl/proprietary";
-import type { JSX } from "react";
-
-export default function SiteLogo({
-  isRoot,
-  href,
-}: {
-  isRoot: boolean;
-  href: string;
-}) {
-  const element = !isRoot ? "a" : "div";
-  const props = {
-    className: "site-logo",
-    ...(!isRoot ? { href } : {}),
-  };
-
-  const Element = element as keyof JSX.IntrinsicElements;
-
-  return (
-    <Element {...props}>
-      <Logo forced="light" />
-    </Element>
-  );
-}
+import { Logo } from "@developer-overheid-nl/proprietary";
+import type { JSX } from "react";
+
+export default function SiteLogo({
+  isRoot,
+  href,
+}: {
+  isRoot: boolean;
+  href: string;
+}) {
+  const element = !isRoot ? "a" : "div";
+  const props = {
+    className: "site-logo",
+    ...(!isRoot ? { href } : {}),
+  };
+
+  const Element = element as keyof JSX.IntrinsicElements;
+
+  return (
+    <Element {...props}>
+      <Logo forced="light" />
+    </Element>
+  );
+}

package/src/sortForm/SortForm.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent } from "storybook/test";
+import SortForm from "./SortForm";
+
+/**
+ * SortForm is een native GET-formulier met één gecombineerde keuze voor het
+ * sorteerveld en de sorteervolgorde. De keuze wordt direct toegepast. Actieve
+ * zoek- en filterparameters kunnen als verborgen velden behouden blijven.
+ */
+const meta = {
+  title: "Components/SortForm",
+  component: SortForm,
+  tags: ["autodocs", "custom"],
+  args: {
+    action: "/apis",
+    options: [
+      { sortBy: "title", sortOrder: "asc", label: "Titel A–Z" },
+      { sortBy: "title", sortOrder: "desc", label: "Titel Z–A" },
+      {
+        sortBy: "adrScore",
+        sortOrder: "asc",
+        label: "ADR-score laag–hoog",
+      },
+      {
+        sortBy: "adrScore",
+        sortOrder: "desc",
+        label: "ADR-score hoog–laag",
+      },
+      { sortBy: "version", sortOrder: "asc", label: "Versie laag–hoog" },
+      { sortBy: "version", sortOrder: "desc", label: "Versie hoog–laag" },
+    ],
+  },
+} satisfies Meta<typeof SortForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByLabelText("Sorteer op")).toHaveValue("title:asc");
+    await expect(canvas.queryByLabelText("Volgorde")).not.toBeInTheDocument();
+    await expect(canvas.queryByRole("button")).not.toBeInTheDocument();
+  },
+};
+
+export const WithActiveSortAndFilters: Story = {
+  name: "Met actieve sortering en filters",
+  args: {
+    sortBy: "adrScore",
+    sortOrder: "desc",
+    hiddenFields: [
+      ["organisation", "https://example.nl/a"],
+      ["organisation", "https://example.nl/b"],
+      ["q", "adressen"],
+    ],
+  },
+  play: async ({ canvas, canvasElement }) => {
+    const form = canvasElement.querySelector("form");
+    const sortSelect = canvas.getByLabelText("Sorteer op");
+    const sortLabel = canvasElement.querySelector(
+      `label[for="${sortSelect.id}"]`,
+    );
+    let submitCount = 0;
+
+    form?.addEventListener("submit", (event) => {
+      event.preventDefault();
+      submitCount += 1;
+    });
+
+    await expect(form).toHaveAttribute("action", "/apis");
+    await expect(sortSelect).toHaveValue("adrScore:desc");
+    await expect(canvas.queryByLabelText("Volgorde")).not.toBeInTheDocument();
+    await expect(canvas.queryByRole("button")).not.toBeInTheDocument();
+    await expect(canvas.getByRole("heading", { name: "Sorteren" })).toHaveClass(
+      "sr-only",
+    );
+    await expect(getComputedStyle(form as HTMLFormElement).justifyContent).toBe(
+      "flex-end",
+    );
+    await expect(
+      Number.parseFloat(getComputedStyle(sortSelect).paddingInlineEnd),
+    ).toBeGreaterThanOrEqual(40);
+    await expect(sortLabel).not.toBeNull();
+    const labelRect = (sortLabel as HTMLLabelElement).getBoundingClientRect();
+    const selectRect = sortSelect.getBoundingClientRect();
+    await expect(
+      Math.abs(
+        labelRect.top +
+          labelRect.height / 2 -
+          (selectRect.top + selectRect.height / 2),
+      ),
+    ).toBeLessThanOrEqual(1);
+    await expect(labelRect.right).toBeLessThanOrEqual(selectRect.left);
+    await expect(
+      getComputedStyle(sortLabel as HTMLLabelElement).whiteSpace,
+    ).toBe("nowrap");
+    await expect(
+      form?.querySelectorAll('input[name="organisation"]'),
+    ).toHaveLength(2);
+
+    await userEvent.selectOptions(sortSelect, "version:desc");
+
+    await expect(form?.querySelector('input[name="sortBy"]')).toHaveValue(
+      "version",
+    );
+    await expect(form?.querySelector('input[name="sortOrder"]')).toHaveValue(
+      "desc",
+    );
+    await expect(submitCount).toBe(1);
+  },
+};

package/src/sortForm/SortForm.tsx

@@ -0,0 +1,121 @@
+import {
+  FormFieldSelect,
+  SelectOption,
+} from "@rijkshuisstijl-community/components-react";
+import { type ChangeEvent, useId, useRef } from "react";
+import { I18nextProvider, useTranslation } from "react-i18next";
+import Heading from "../heading/Heading";
+import i18n from "../i18n";
+import styles from "./styles.module.css";
+
+export type SortOrder = "asc" | "desc";
+
+export interface SortOption {
+  sortBy: string;
+  sortOrder: SortOrder;
+  label: string;
+}
+
+export interface SortFormProps {
+  action: string;
+  options: SortOption[];
+  sortBy?: string | null;
+  sortOrder?: string | null;
+  hiddenFields?: [string, string][];
+  className?: string;
+}
+
+const SortForm = ({
+  action,
+  options,
+  sortBy = "title",
+  sortOrder = "asc",
+  hiddenFields = [],
+  className,
+}: SortFormProps) => {
+  const { t } = useTranslation();
+  const headingId = useId();
+  const sortByInputRef = useRef<HTMLInputElement>(null);
+  const sortOrderInputRef = useRef<HTMLInputElement>(null);
+  const selectedOption =
+    options.find(
+      (option) => option.sortBy === sortBy && option.sortOrder === sortOrder,
+    ) ?? options[0];
+  const selectedValue = selectedOption
+    ? `${selectedOption.sortBy}:${selectedOption.sortOrder}`
+    : undefined;
+
+  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    const option = options.find(
+      ({ sortBy, sortOrder }) =>
+        `${sortBy}:${sortOrder}` === event.currentTarget.value,
+    );
+
+    if (!option || !sortByInputRef.current || !sortOrderInputRef.current) {
+      return;
+    }
+
+    sortByInputRef.current.value = option.sortBy;
+    sortOrderInputRef.current.value = option.sortOrder;
+    event.currentTarget.form?.requestSubmit();
+  };
+
+  return (
+    <section className={className} aria-labelledby={headingId}>
+      <Heading id={headingId} level={2} appearanceLevel={3} className="sr-only">
+        {t("components.sort")}
+      </Heading>
+      <form
+        id="sort-form"
+        action={action}
+        method="GET"
+        className={styles.form}
+        aria-labelledby={headingId}
+      >
+        {hiddenFields.map(([name, value], index) => (
+          <input
+            // biome-ignore lint/suspicious/noArrayIndexKey: duplicate query params can share name and value
+            key={`${name}-${value}-${index}`}
+            type="hidden"
+            name={name}
+            value={value}
+          />
+        ))}
+        <input
+          ref={sortByInputRef}
+          type="hidden"
+          name="sortBy"
+          defaultValue={selectedOption?.sortBy}
+        />
+        <input
+          ref={sortOrderInputRef}
+          type="hidden"
+          name="sortOrder"
+          defaultValue={selectedOption?.sortOrder}
+        />
+        <FormFieldSelect
+          label={t("components.sort-by")}
+          defaultValue={selectedValue}
+          onChange={handleChange}
+        >
+          {options.map(({ sortBy, sortOrder, label }) => (
+            <SelectOption
+              key={`${sortBy}:${sortOrder}`}
+              value={`${sortBy}:${sortOrder}`}
+            >
+              {label}
+            </SelectOption>
+          ))}
+        </FormFieldSelect>
+      </form>
+    </section>
+  );
+};
+
+const TranslatedSortForm = (props: SortFormProps) => (
+  <I18nextProvider i18n={i18n}>
+    <SortForm {...props} />
+  </I18nextProvider>
+);
+
+export default TranslatedSortForm;

package/src/sortForm/styles.module.css

@@ -0,0 +1,40 @@
+.form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: end;
+  justify-content: flex-end;
+}
+
+.form select {
+  order: 2;
+  min-inline-size: 10rem;
+  padding-inline-end: 3rem;
+}
+
+.form :global(.utrecht-form-field) {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.form :global(.utrecht-form-field__label) {
+  flex: none;
+  margin-block-end: 0;
+  white-space: nowrap;
+}
+
+@media (--xs-and-below-viewport) {
+  .form {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .form :global(.utrecht-form-field) {
+    display: block;
+  }
+
+  .form :global(.utrecht-form-field__label) {
+    margin-block-end: var(--utrecht-form-field-label-margin-block-end);
+  }
+}

package/src/switch/Switch.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Switch from "./Switch";
+
+/**
+ * Switch is een aan/uit-schakelaar. In `explicit`-modus wordt de schakelaar
+ * gerenderd als twee losse radio-opties (aan/uit) in plaats van één toggle,
+ * met een aparte `aria-labelledby` in plaats van `aria-label`.
+ */
+const meta = {
+  title: "Components/Form/FormFieldParts/Switch",
+  component: Switch,
+  tags: ["autodocs", "custom"],
+  args: {
+    name: "toggle-example",
+    value: "true",
+    "aria-label": "Toggle voorbeeld",
+  },
+  argTypes: {
+    checked: { control: "boolean" },
+    defaultChecked: { control: "boolean" },
+    disabled: { control: "boolean" },
+    invalid: { control: "boolean" },
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Checked: Story = {
+  args: {
+    defaultChecked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    invalid: true,
+  },
+};
+
+export const Explicit: Story = {
+  name: "Explicit (aan/uit als losse opties)",
+  decorators: [
+    (Story) => (
+      <>
+        <span id="switch-explicit-label" className="utrecht-form-label">
+          Heeft publiccode.yml
+        </span>
+        <Story />
+      </>
+    ),
+  ],
+  args: {
+    "aria-label": undefined,
+    "aria-labelledby": "switch-explicit-label",
+    explicit: true,
+    value: ["true", "false"],
+    labels: { on: "Aan", off: "Uit" },
+  },
+};

package/src/switch/Switch.tsx

@@ -1,86 +1,152 @@
-import clsx from "clsx";
-import {
-  type ForwardedRef,
-  forwardRef,
-  type InputHTMLAttributes,
-  useId,
-} from "react";
-import styles from "./styles.module.css";
-
-export interface SwitchLabels {
-  on: string;
-  off: string;
-}
-
-export interface SwitchProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "readOnly"> {
-  invalid?: boolean;
-  labels?: SwitchLabels;
-}
-
-const Switch = forwardRef(
-  (props: SwitchProps, ref: ForwardedRef<HTMLInputElement>) => {
-    const genId = useId();
-    const {
-      id = genId,
-      disabled,
-      invalid,
-      required,
-      hidden,
-      checked,
-      defaultChecked,
-      role,
-      tabIndex,
-      className,
-      labels = { on: "ON", off: "OFF" },
-      ...restProps
-    } = props;
-
-    return (
-      <div
-        className={clsx(
-          "utrecht-form-toggle",
-          "utrecht-form-toggle--html-checkbox",
-          {
-            "utrecht-form-toggle--disabled": disabled,
-            "utrecht-form-toggle--invalid": invalid,
-            "utrecht-form-toggle--required": required,
-          },
-          styles.switch,
-          className,
-        )}
-        hidden={hidden}
-      >
-        <input
-          id={id}
-          aria-invalid={invalid || undefined}
-          type="checkbox"
-          className="utrecht-form-toggle__checkbox"
-          checked={checked}
-          defaultChecked={defaultChecked || undefined}
-          disabled={disabled || undefined}
-          required={required}
-          ref={ref}
-          role={role}
-          tabIndex={tabIndex}
-          {...restProps}
-        />
-        <label
-          htmlFor={id}
-          className={clsx(
-            "utrecht-form-toggle__track",
-            "utrecht-form-toggle__track--html-label",
-          )}
-        >
-          <div className="utrecht-form-toggle__thumb">
-            <span className="sr-only">
-              {checked || defaultChecked ? labels.on : labels.off}
-            </span>
-          </div>
-        </label>
-      </div>
-    );
-  },
-);
-
-export default Switch;
+import clsx from "clsx";
+import {
+  type ForwardedRef,
+  forwardRef,
+  type InputHTMLAttributes,
+  useId,
+} from "react";
+import styles from "./styles.module.css";
+
+export interface SwitchLabels {
+  on: string;
+  off: string;
+}
+
+export interface SwitchProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "readOnly"> {
+  invalid?: boolean;
+  labels?: SwitchLabels;
+  explicit?: boolean;
+}
+
+const Switch = forwardRef(
+  (props: SwitchProps, ref: ForwardedRef<HTMLInputElement>) => {
+    const genId = useId();
+    const {
+      id = genId,
+      name,
+      value,
+      disabled,
+      invalid,
+      explicit,
+      required,
+      hidden,
+      checked,
+      defaultChecked,
+      role,
+      tabIndex,
+      className,
+      labels = { on: "ON", off: "OFF" },
+      ...restProps
+    } = props;
+
+    return (
+      // biome-ignore lint/a11y/useAriaPropsSupportedByRole: okay because of role=group
+      <div
+        className={clsx(
+          "utrecht-form-toggle",
+          "utrecht-form-toggle--html-checkbox",
+          {
+            "utrecht-form-toggle--disabled": disabled,
+            "utrecht-form-toggle--invalid": invalid,
+            "utrecht-form-toggle--required": required,
+          },
+          styles.switch,
+          explicit && styles.explicit,
+          className,
+        )}
+        hidden={hidden}
+        role={explicit ? "group" : undefined}
+        aria-labelledby={explicit ? props["aria-labelledby"] : undefined}
+      >
+        {explicit ? (
+          <>
+            <input
+              id={id}
+              aria-invalid={invalid || undefined}
+              type="radio"
+              name={name}
+              value={Array.isArray(value) ? value[0] : value}
+              className="utrecht-form-toggle__checkbox"
+              defaultChecked={defaultChecked || undefined}
+              disabled={disabled || undefined}
+              required={required}
+              ref={ref}
+              role={role}
+              tabIndex={tabIndex}
+              {...restProps}
+              aria-labelledby={undefined}
+            />
+            <input
+              id={`negate_${id}`}
+              aria-invalid={invalid || undefined}
+              type="radio"
+              name={name}
+              value={Array.isArray(value) ? value[1] : `Not ${value}`}
+              className="utrecht-form-toggle__checkbox"
+              defaultChecked={
+                (typeof defaultChecked !== "undefined" && !defaultChecked) ||
+                undefined
+              }
+              disabled={disabled || undefined}
+              required={required}
+              ref={ref}
+              role={role}
+              tabIndex={tabIndex}
+              {...restProps}
+              aria-labelledby={undefined}
+            />
+          </>
+        ) : (
+          <input
+            id={id}
+            aria-invalid={invalid || undefined}
+            type="checkbox"
+            className="utrecht-form-toggle__checkbox"
+            name={name}
+            value={value}
+            defaultChecked={defaultChecked || undefined}
+            disabled={disabled || undefined}
+            required={required}
+            ref={ref}
+            role={role}
+            tabIndex={tabIndex}
+            {...restProps}
+          />
+        )}
+        <label
+          htmlFor={id}
+          className={clsx(
+            "utrecht-form-toggle__track",
+            "utrecht-form-toggle__track--html-label",
+          )}
+        >
+          <div className="utrecht-form-toggle__thumb">
+            <span className="sr-only">
+              {explicit
+                ? labels.off
+                : checked || defaultChecked
+                  ? labels.on
+                  : labels.off}
+            </span>
+          </div>
+        </label>
+        {explicit && (
+          <label
+            htmlFor={`negate_${id}`}
+            className={clsx(
+              "utrecht-form-toggle__track",
+              "utrecht-form-toggle__track--html-label",
+            )}
+          >
+            <div className="utrecht-form-toggle__thumb">
+              <span className="sr-only">{labels.on}</span>
+            </div>
+          </label>
+        )}
+      </div>
+    );
+  },
+);
+
+export default Switch;

package/src/switch/styles.module.css

@@ -1,7 +1,54 @@
-.switch {
-  &:hover {
-    :global(.utrecht-form-toggle__track) {
-      background-color: var(--utrecht-form-toggle-hover-background-color);
-    }
-  }
-}
+.switch.switch {
+  &:hover {
+    :global(.utrecht-form-toggle__track) {
+      background-color: var(--utrecht-form-toggle-hover-background-color);
+    }
+  }
+
+  &.explicit {
+    :global(
+        &.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__track
+      ):not([for^='negate']) {
+      position: absolute;
+      z-index: 2;
+      display: flex;
+
+      background-color: var(--utrecht-form-toggle-accent-color);
+      :global(.utrecht-form-toggle__thumb) {
+        margin-inline-start: var(
+          --utrecht-form-toggle-thumb-margin-inline-start,
+          0
+        );
+      }
+    }
+
+    :global(
+        &.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox
+      ):not([id^='negate']):checked
+      ~ :global(.utrecht-form-toggle__track):not([for^='negate']) {
+      z-index: 1;
+    }
+
+    :global(
+        &.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__track
+      )[for^='negate'] {
+      position: absolute;
+      z-index: 2;
+      display: flex;
+
+      :global(.utrecht-form-toggle__thumb) {
+        margin-inline-end: var(
+          --utrecht-form-toggle-thumb-margin-inline-end,
+          0
+        );
+      }
+    }
+
+    :global(
+        &.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox
+      )[id^='negate']:checked
+      ~ :global(.utrecht-form-toggle__track)[for^='negate'] {
+      z-index: 1;
+    }
+  }
+}