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

package/src/cardsList/CardsList.tsx

@@ -1,54 +1,56 @@
-import type { CardAsLink } from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import type { HTMLAttributes, PropsWithChildren, ReactNode } from "react";
-import styles from "./styles.module.css";
-
-export interface CardsListProps extends HTMLAttributes<HTMLOListElement> {
-  /**
-   * Array of items to display in the list.
-   * This will encapsulate the `CardAsLink`s in `<li>` elements.
-   * If not provided, the component will render its children instead and will not wrap them in `<li>` elements.
-   * You can then use the `CardsListItem` component to wrap individual items.
-   *
-   * @type {?Array<React.JSX.Element | string>}
-   */
-  items?: Array<typeof CardAsLink>;
-  className?: string;
-}
-
-const CardsList = (props: PropsWithChildren<CardsListProps>) => {
-  const { id, items, className, children } = props;
-
-  return (
-    <ol className={clsx(styles.cardsList, className)} id={id}>
-      {items && items.length > 0
-        ? items.map((item, index, array) => (
-            <CardsListItem
-              key={`${id || "don-cards"}_${index}`}
-              index={index}
-              setsize={array.length}
-            >
-              {item as unknown as ReactNode}
-            </CardsListItem>
-          ))
-        : children}
-    </ol>
-  );
-};
-
-export interface CardsListItemProps {
-  index: number;
-  setsize: number;
-}
-
-export const CardsListItem = ({
-  index,
-  setsize,
-  children,
-}: PropsWithChildren<CardsListItemProps>) => (
-  <li aria-posinset={index + 1} aria-setsize={setsize}>
-    {children}
-  </li>
-);
-
-export default CardsList;
+import type { CardAsLink } from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import type { HTMLAttributes, PropsWithChildren, ReactNode } from "react";
+import styles from "./styles.module.css";
+
+export interface CardsListProps extends HTMLAttributes<HTMLOListElement> {
+  /**
+   * Array of items to display in the list.
+   * This will encapsulate the `CardAsLink`s in `<li>` elements.
+   * If not provided, the component will render its children instead and will not wrap them in `<li>` elements.
+   * You can then use the `CardsListItem` component to wrap individual items.
+   *
+   * @type {?Array<React.JSX.Element | string>}
+   */
+  items?: Array<typeof CardAsLink>;
+  className?: string;
+}
+
+const CardsList = (props: PropsWithChildren<CardsListProps>) => {
+  const { id, items, className, children } = props;
+
+  return (
+    <ol className={clsx(styles.cardsList, className)} id={id}>
+      {items && items.length > 0
+        ? items.map((item, index, array) => (
+            // biome-ignore-start lint/suspicious/noArrayIndexKey: no stable ID's https://legacy.reactjs.org/docs/lists-and-keys.html#keys
+            <CardsListItem
+              key={`${id || "don-cards"}_${index}`}
+              index={index}
+              setsize={array.length}
+            >
+              {item as unknown as ReactNode}
+            </CardsListItem>
+            // biome-ignore-end lint/suspicious/noArrayIndexKey: no stable ID's https://legacy.reactjs.org/docs/lists-and-keys.html#keys
+          ))
+        : children}
+    </ol>
+  );
+};
+
+export interface CardsListItemProps {
+  index: number;
+  setsize: number;
+}
+
+export const CardsListItem = ({
+  index,
+  setsize,
+  children,
+}: PropsWithChildren<CardsListItemProps>) => (
+  <li aria-posinset={index + 1} aria-setsize={setsize}>
+    {children}
+  </li>
+);
+
+export default CardsList;

package/src/cardsList/styles.module.css

@@ -1,19 +1,18 @@
-.cardsList {
-  --rhc-card-as-link-inline-size: 100%;
-  --rhc-card-as-link-active-text-decoration: none;
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--rhc-space-200);
-  padding-inline-start: 0;
-  list-style-type: none;
-}
-
-:global(
-    .rhc-card-as-link:hover
-    .rhc-card-as-link__heading.rhc-card-as-link__heading
-  ) {
-  /* TODO: specifity */
-  :global(.nl-heading) {
-    text-decoration: underline;
-  }
-}
+.cardsList {
+  --rhc-card-as-link-inline-size: 100%;
+  --rhc-card-as-link-active-text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rhc-space-200);
+  padding-inline-start: 0;
+  list-style-type: none;
+}
+
+:global(
+  .rhc-card-as-link:hover .rhc-card-as-link__heading.rhc-card-as-link__heading
+) {
+  /* TODO: specifity */
+  :global(.nl-heading) {
+    text-decoration: underline;
+  }
+}

package/src/client.ts

@@ -1,7 +1,7 @@
-// Barrel export for client-side components
-export { default as CopyButton } from "./copyButton/CopyButton";
-export {
-  default as FacetFilters,
-  type FacetFiltersProps,
-  type FilterData,
-} from "./facetFilters/FacetFilters";
+// Barrel export for client-side components
+export { default as CopyButton } from "./copyButton/CopyButton";
+export {
+  default as FacetFilters,
+  type FacetFiltersProps,
+  type FilterData,
+} from "./facetFilters/FacetFilters";

package/src/container/Container.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Container from "./Container";
+
+/**
+ * Container centreert zijn inhoud en beperkt deze tot de maximale
+ * paginabreedte, met responsieve inline-padding. Wordt bijvoorbeeld gebruikt
+ * om de Header op dezelfde breedte te houden als de rest van de pagina.
+ */
+const meta = {
+  title: "Components/Container",
+  component: Container,
+  tags: ["autodocs", "custom"],
+  args: {
+    children: "Dit is de inhoud van de container.",
+  },
+} satisfies Meta<typeof Container>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/container/Container.tsx

@@ -1,10 +1,10 @@
-import styles from "./styles.module.css";
-
-export default function Container(props: React.HTMLProps<HTMLDivElement>) {
-  const { children, className, ...restProps } = props || {};
-  return (
-    <div className={`${styles.container} ${className || ""}`} {...restProps}>
-      {children}
-    </div>
-  );
-}
+import styles from "./styles.module.css";
+
+export default function Container(props: React.HTMLProps<HTMLDivElement>) {
+  const { children, className, ...restProps } = props || {};
+  return (
+    <div className={`${styles.container} ${className || ""}`} {...restProps}>
+      {children}
+    </div>
+  );
+}

package/src/container/styles.module.css

@@ -1,28 +1,28 @@
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--rhc-nav-bar-container-inline-size);
-
-  > * {
-    flex: 1;
-    max-inline-size: var(--rhc-nav-bar-max-inline-size);
-    padding-inline-start: var(--rhc-nav-bar-link-padding-inline-start);
-    padding-inline-end: var(--rhc-nav-bar-link-padding-inline-end);
-  }
-}
-
-@media (--xs-and-below-viewport) {
-  .container {
-    > * {
-      padding-inline-start: calc(
-        var(--rhc-nav-bar-link-padding-inline-start) *
-        0.5
-      );
-      padding-inline-end: calc(
-        var(--rhc-nav-bar-link-padding-inline-end) *
-        0.5
-      );
-    }
-  }
-}
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--rhc-nav-bar-container-inline-size);
+
+  > * {
+    flex: 1;
+    max-inline-size: var(--rhc-nav-bar-max-inline-size);
+    padding-inline-start: var(--rhc-nav-bar-link-padding-inline-start);
+    padding-inline-end: var(--rhc-nav-bar-link-padding-inline-end);
+  }
+}
+
+@media (--xs-and-below-viewport) {
+  .container {
+    > * {
+      padding-inline-start: calc(
+        var(--rhc-nav-bar-link-padding-inline-start) *
+        0.5
+      );
+      padding-inline-end: calc(
+        var(--rhc-nav-bar-link-padding-inline-end) *
+        0.5
+      );
+    }
+  }
+}

package/src/copyButton/CopyButton.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn } from "storybook/test";
+
+import CopyButton from "./CopyButton";
+
+/**
+ * CopyButton kopieert de opgegeven `text` naar het klembord via de browser
+ * Clipboard API wanneer erop geklikt wordt. Rendert niets als er geen tekst
+ * is opgegeven.
+ */
+const meta: Meta<typeof CopyButton> = {
+  title: "Components/CopyButton",
+  component: CopyButton,
+  tags: ["autodocs", "beta", "custom"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: "This text will be copied!",
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    const cpButton = canvas.getByTitle("Kopieer naar klembord");
+
+    const writeTextMock = fn();
+    Object.defineProperty(navigator, "clipboard", {
+      value: { writeText: writeTextMock },
+      writable: true,
+      configurable: true,
+    });
+
+    await userEvent.click(cpButton);
+
+    await expect(writeTextMock).toHaveBeenCalledWith(args.text);
+
+    writeTextMock.mockRestore();
+  },
+};

package/src/copyButton/CopyButton.tsx

@@ -1,39 +1,45 @@
-"use client";
-
-import { SecondaryActionButton } from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import Icon from "../iconsSprite/Icon";
-import styles from "./styles.module.css";
-
-interface CopyButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  text?: string;
-}
-
-const CopyButton = ({ text, className, ...restProps }: CopyButtonProps) => {
-  const handleCopy = async () => {
-    if ("clipboard" in navigator) {
-      await navigator.clipboard.writeText(
-        text || "Sorry, no text to copy was set...",
-      );
-    } else {
-      console.warn("Clipboard API not supported");
-    }
-  };
-
-  return (
-    text && (
-      <SecondaryActionButton
-        className={clsx([className, styles.button])}
-        onClick={handleCopy}
-        title="Kopieer naar klembord"
-        aria-label="Kopieer naar klembord"
-        {...restProps}
-      >
-        <Icon className={styles.icon} name="kopieer-inline" />
-      </SecondaryActionButton>
-    )
-  );
-};
-
-export default CopyButton;
+"use client";
+
+import { SecondaryActionButton } from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import Icon from "../iconsSprite/Icon";
+import styles from "./styles.module.css";
+
+/** A button that copies the given `text` to the clipboard when clicked. */
+interface CopyButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** The text to copy to the clipboard. Renders nothing if not set. */
+  text?: string;
+}
+
+const CopyButton = ({ text, className, ...restProps }: CopyButtonProps) => {
+  const handleCopy = async () => {
+    if ("clipboard" in navigator) {
+      await navigator.clipboard.writeText(
+        text || "Sorry, no text to copy was set...",
+      );
+    } else {
+      console.warn("Clipboard API not supported");
+    }
+  };
+
+  return (
+    text && (
+      <SecondaryActionButton
+        className={clsx([className, styles.button])}
+        onClick={handleCopy}
+        title="Kopieer naar klembord"
+        aria-label="Kopieer naar klembord"
+        {...restProps}
+      >
+        <Icon
+          className={styles.icon}
+          name="kopieer-inline"
+          aria-hidden="true"
+        />
+      </SecondaryActionButton>
+    )
+  );
+};
+
+export default CopyButton;

package/src/copyButton/styles.module.css

@@ -1,13 +1,13 @@
-.button {
-  --utrecht-button-padding-block-end: 0.125rem;
-  --utrecht-button-padding-block-start: 0.125rem;
-  --utrecht-button-padding-inline-end: 0.125rem;
-  --utrecht-button-padding-inline-start: 0.125rem;
-  --utrecht-button-min-block-size: 36px;
-  --utrecht-button-min-inline-size: 36px;
-}
-
-.icon {
-  width: 1.5rem;
-  height: 1.5rem;
-}
+.button {
+  --utrecht-button-padding-block-end: 0.125rem;
+  --utrecht-button-padding-block-start: 0.125rem;
+  --utrecht-button-padding-inline-end: 0.125rem;
+  --utrecht-button-padding-inline-start: 0.125rem;
+  --utrecht-button-min-block-size: 36px;
+  --utrecht-button-min-inline-size: 36px;
+}
+
+.icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}

package/src/dataBadgeLink/DataBadgeLink.stories.tsx

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Block from "../block/Block";
+import DataBadgeLink from "./DataBadgeLink";
+
+const CrossIcon = () => (
+  <svg
+    aria-hidden="true"
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 1L11 11M11 1L1 11"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+/**
+ * DataBadgeLink toont een badge die als link fungeert, bijvoorbeeld voor een
+ * downloadlink of een actief filter.
+ *
+ * ## Wijzigingen tov RHC:
+ * - Gebruikt RHC's `DataBadgeButton`, maar rendert de inhoud als `<a>` in
+ *   plaats van als knop; de toggle-knop-semantiek (`pressed`/`aria-pressed`)
+ *   is daarom verwijderd.
+ * - Voegt een `appearance`-prop toe (`primary`, `outlined`, `subtle`, `link`).
+ */
+const meta = {
+  title: "Components/DataBadgeLink",
+  component: DataBadgeLink,
+  tags: ["autodocs", "remixed"],
+  argTypes: {
+    appearance: {
+      control: "select",
+      options: ["primary", "outlined", "subtle", "link"],
+    },
+  },
+  args: {
+    href: "#",
+    appearance: "primary",
+    children: "OAS 3.1 (.json)",
+  },
+  decorators: [
+    (Story) => (
+      <Block layout="flex-row" appearance="clear">
+        <Story />
+      </Block>
+    ),
+  ],
+} satisfies Meta<typeof DataBadgeLink>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
+
+export const Outlined: Story = {
+  args: {
+    appearance: "outlined",
+  },
+};
+
+export const Subtle: Story = {
+  args: {
+    appearance: "subtle",
+  },
+};
+
+export const LinkAppearance: Story = {
+  name: "Link",
+  args: {
+    appearance: "link",
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    appearance: "subtle",
+    icon: <CrossIcon />,
+    children: "Kadaster",
+  },
+};
+
+export const WithHelperText: Story = {
+  args: {
+    appearance: "subtle",
+    icon: <CrossIcon />,
+    helperText: "Verwijder filter",
+    children: "Kadaster",
+  },
+};
+
+export const AllAppearances: Story = {
+  args: {
+    children: "",
+  },
+  render: () => (
+    <>
+      <DataBadgeLink href="#" appearance="primary">
+        Primary
+      </DataBadgeLink>
+      <DataBadgeLink href="#" appearance="outlined">
+        Outlined
+      </DataBadgeLink>
+      <DataBadgeLink href="#" appearance="subtle">
+        Subtle
+      </DataBadgeLink>
+      <DataBadgeLink href="#" appearance="link">
+        Link
+      </DataBadgeLink>
+    </>
+  ),
+};
+
+export const FilterExample: Story = {
+  name: "Actief filter (voorbeeld)",
+  args: {
+    appearance: "subtle",
+    icon: <CrossIcon />,
+    helperText: "Verwijder filter",
+    role: "menuitem",
+    children: "Geonovum",
+  },
+  render: (args) => (
+    <div role="menu" aria-label="Actieve filters">
+      <div role="none">
+        <DataBadgeLink {...args} />
+      </div>
+    </div>
+  ),
+};

package/src/dataBadgeLink/DataBadgeLink.tsx

@@ -1,53 +1,59 @@
-import {
-  DataBadgeButton,
-  type DataBadgeButtonProps,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import styles from "./styles.module.css";
-
-export interface DataBadgeLinkProps
-  extends Omit<DataBadgeButtonProps, "aria-pressed" | "pressed"> {
-  href: string;
-  children: React.ReactNode;
-  target?: React.HTMLAttributeAnchorTarget;
-  rel?: string;
-  className?: string;
-  role?: string;
-  appearance?: "primary" | "outlined" | "subtle" | "link";
-}
-
-const DataBadgeLink = (props: DataBadgeLinkProps) => {
-  const {
-    href,
-    target,
-    rel,
-    children,
-    className,
-    role,
-    tabIndex = undefined,
-    appearance = "primary",
-    ...restProps
-  } = props;
-  return (
-    <DataBadgeButton
-      className={clsx(className, styles.donDataBadge, styles[appearance])}
-      /* biome-ignore lint/a11y/useValidAriaValues: {null} is needed to remove it */
-      aria-pressed={undefined}
-      role={role}
-      /* RHC DataBadgeButton had a tabindex=0 on the span, and a focus ring, but no interaction */
-      tabIndex={tabIndex}
-      {...restProps}
-    >
-      <a
-        className={clsx(styles.badgeLink)}
-        href={href}
-        target={target}
-        rel={rel}
-      >
-        {children}
-      </a>
-    </DataBadgeButton>
-  );
-};
-
-export default DataBadgeLink;
+import {
+  DataBadgeButton,
+  type DataBadgeButtonProps,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+
+/** A data badge that acts as a link instead of a toggle button. */
+export interface DataBadgeLinkProps
+  extends Omit<DataBadgeButtonProps, "aria-pressed" | "pressed"> {
+  /** The link target. */
+  href: string;
+  /** The badge's content. */
+  children: React.ReactNode;
+  /** The anchor's `target` attribute. */
+  target?: React.HTMLAttributeAnchorTarget;
+  /** The anchor's `rel` attribute. */
+  rel?: string;
+  className?: string;
+  role?: string;
+  /** Visual style of the badge. */
+  appearance?: "primary" | "outlined" | "subtle" | "link";
+}
+
+const DataBadgeLink = (props: DataBadgeLinkProps) => {
+  const {
+    href,
+    target,
+    rel,
+    children,
+    className,
+    role,
+    tabIndex = undefined,
+    appearance = "primary",
+    ...restProps
+  } = props;
+  return (
+    <DataBadgeButton
+      className={clsx(className, styles.donDataBadge, styles[appearance])}
+      /* biome-ignore lint/a11y/useValidAriaValues: {null} is needed to remove it */
+      aria-pressed={undefined}
+      role={role}
+      /* RHC DataBadgeButton had a tabindex=0 on the span, and a focus ring, but no interaction */
+      tabIndex={tabIndex}
+      {...restProps}
+    >
+      <a
+        className={clsx(styles.badgeLink)}
+        href={href}
+        target={target}
+        rel={rel}
+      >
+        {children}
+      </a>
+    </DataBadgeButton>
+  );
+};
+
+export default DataBadgeLink;