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

package/src/scoreBadge/ScoreBadge.tsx

@@ -1,133 +1,135 @@
-import clsx from "clsx";
-
-export interface ScoreBadgeProps {
-  className?: string;
-  name: string;
-  ariaLabelPrefix?: string;
-  score?: number | null;
-  max?: number;
-  showScore?: boolean;
-  showMax?: boolean;
-  inPercentage?: boolean;
-  colors?: {
-    background: string;
-    gradient: string[];
-    arrow: [string, string];
-    text: string;
-  };
-}
-
-/** @deprecated */
-export default function ScoreBadge(props: ScoreBadgeProps) {
-  const defaultcolors: ScoreBadgeProps["colors"] = {
-    background: "#CBD5E1",
-    gradient: ["#FEE9B7", "#FDDE94", "#A5C991", "#6AA549", "#39870C"],
-    arrow: ["#D52B1E", "#F9DFDD"],
-    text: "#334155",
-  };
-  const {
-    className,
-    name,
-    ariaLabelPrefix,
-    score,
-    max = 10,
-    showScore = true,
-    showMax = false,
-    inPercentage = false,
-    colors = defaultcolors,
-    ...restProps
-  } = props;
-
-  return (
-    <span
-      className={clsx(["score-badge", `score-badge--${score}`, className])}
-      {...restProps}
-    >
-      <svg
-        width="5rem"
-        height="2.5rem"
-        viewBox="0 0 32 16"
-        name={name}
-        role="img"
-        aria-label={`${ariaLabelPrefix || ""}${score + (inPercentage ? "%" : "") || "onbekend"}`}
-      >
-        <defs>
-          <linearGradient id="gradient">
-            {colors.gradient?.map((color, index) => (
-              <stop
-                key={`grd-${color}`}
-                offset={`${(index * 100) / (colors.gradient.length - 1)}%`}
-                style={{ stopColor: color, stopOpacity: 1 }}
-              />
-            ))}
-          </linearGradient>
-          <linearGradient id="arrow" gradientTransform="rotate(90)">
-            {colors.arrow?.map((color, index) => (
-              <stop
-                key={`arr-${color}`}
-                offset={index}
-                style={{ stopColor: color }}
-              />
-            ))}
-          </linearGradient>
-          <filter id="glow">
-            <feDropShadow
-              dx="0.25"
-              dy="0.25"
-              stdDeviation="0.5"
-              floodColor="#fff"
-              floodOpacity="1"
-            />
-          </filter>
-        </defs>
-        <circle
-          cx="16"
-          cy="13"
-          r="10"
-          fill="none"
-          stroke={colors.background}
-          strokeWidth="5"
-          strokeDasharray={`${Math.PI * 10} 1000`}
-          strokeDashoffset={-1 * Math.PI * 10}
-          strokeLinecap="round"
-        />
-        {score && score > 0 && (
-          <>
-            <circle
-              cx="16"
-              cy="13"
-              r="10"
-              fill="none"
-              stroke="url(#gradient)"
-              strokeWidth="5"
-              strokeDasharray={`${(Math.PI * 10 * score) / max} 1000`}
-              strokeDashoffset={-1 * Math.PI * 10}
-              strokeLinecap="round"
-            />
-            <polygon
-              points="16,15 14,13 16,2 18,13"
-              transform={`rotate(${-90 + score * 1.8}, 16, 13)`}
-              fill="url(#arrow)"
-            />
-          </>
-        )}
-        {showScore && (
-          <text
-            x="16"
-            y="15"
-            textAnchor="middle"
-            fontSize="0.4rem"
-            fontWeight={600}
-            fill={colors.text}
-            lengthAdjust="spacing"
-            filter="url(#glow)"
-          >
-            {typeof score === "number"
-              ? `${score}${showMax ? `/${max}` : ""}${inPercentage ? "%" : ""}`
-              : "–"}
-          </text>
-        )}
-      </svg>
-    </span>
-  );
-}
+import clsx from "clsx";
+
+export interface ScoreBadgeProps {
+  className?: string;
+  name: string;
+  ariaLabelPrefix?: string;
+  score?: number | null;
+  max?: number;
+  showScore?: boolean;
+  showMax?: boolean;
+  inPercentage?: boolean;
+  colors?: {
+    background: string;
+    gradient: string[];
+    arrow: [string, string];
+    text: string;
+  };
+}
+
+/**
+ * @deprecated Not used anymore. This component will be removed in a later version.
+ */
+export default function ScoreBadge(props: ScoreBadgeProps) {
+  const defaultcolors: ScoreBadgeProps["colors"] = {
+    background: "#CBD5E1",
+    gradient: ["#FEE9B7", "#FDDE94", "#A5C991", "#6AA549", "#39870C"],
+    arrow: ["#D52B1E", "#F9DFDD"],
+    text: "#334155",
+  };
+  const {
+    className,
+    name,
+    ariaLabelPrefix,
+    score,
+    max = 10,
+    showScore = true,
+    showMax = false,
+    inPercentage = false,
+    colors = defaultcolors,
+    ...restProps
+  } = props;
+
+  return (
+    <span
+      className={clsx(["score-badge", `score-badge--${score}`, className])}
+      {...restProps}
+    >
+      <svg
+        width="5rem"
+        height="2.5rem"
+        viewBox="0 0 32 16"
+        name={name}
+        role="img"
+        aria-label={`${ariaLabelPrefix || ""}${score + (inPercentage ? "%" : "") || "onbekend"}`}
+      >
+        <defs>
+          <linearGradient id="gradient">
+            {colors.gradient?.map((color, index) => (
+              <stop
+                key={`grd-${color}`}
+                offset={`${(index * 100) / (colors.gradient.length - 1)}%`}
+                style={{ stopColor: color, stopOpacity: 1 }}
+              />
+            ))}
+          </linearGradient>
+          <linearGradient id="arrow" gradientTransform="rotate(90)">
+            {colors.arrow?.map((color, index) => (
+              <stop
+                key={`arr-${color}`}
+                offset={index}
+                style={{ stopColor: color }}
+              />
+            ))}
+          </linearGradient>
+          <filter id="glow">
+            <feDropShadow
+              dx="0.25"
+              dy="0.25"
+              stdDeviation="0.5"
+              floodColor="#fff"
+              floodOpacity="1"
+            />
+          </filter>
+        </defs>
+        <circle
+          cx="16"
+          cy="13"
+          r="10"
+          fill="none"
+          stroke={colors.background}
+          strokeWidth="5"
+          strokeDasharray={`${Math.PI * 10} 1000`}
+          strokeDashoffset={-1 * Math.PI * 10}
+          strokeLinecap="round"
+        />
+        {score && score > 0 && (
+          <>
+            <circle
+              cx="16"
+              cy="13"
+              r="10"
+              fill="none"
+              stroke="url(#gradient)"
+              strokeWidth="5"
+              strokeDasharray={`${(Math.PI * 10 * score) / max} 1000`}
+              strokeDashoffset={-1 * Math.PI * 10}
+              strokeLinecap="round"
+            />
+            <polygon
+              points="16,15 14,13 16,2 18,13"
+              transform={`rotate(${-90 + score * 1.8}, 16, 13)`}
+              fill="url(#arrow)"
+            />
+          </>
+        )}
+        {showScore && (
+          <text
+            x="16"
+            y="15"
+            textAnchor="middle"
+            fontSize="0.4rem"
+            fontWeight={600}
+            fill={colors.text}
+            lengthAdjust="spacing"
+            filter="url(#glow)"
+          >
+            {typeof score === "number"
+              ? `${score}${showMax ? `/${max}` : ""}${inPercentage ? "%" : ""}`
+              : "–"}
+          </text>
+        )}
+      </svg>
+    </span>
+  );
+}

package/src/search/Search.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+import Block from "../block/Block";
+import Search from "./Search";
+
+/**
+ * Search is een zoekformulier (native GET-formulier) met een zoekveld en
+ * verzendknop. Actieve filters kunnen worden meegestuurd als verborgen
+ * velden via `hiddenFields`.
+ */
+const meta = {
+  title: "Components/Search",
+  component: Search,
+  tags: ["autodocs", "custom"],
+  args: {
+    searchUrl: "/apis",
+    searchKey: "q",
+  },
+  decorators: [
+    (Story) => (
+      <Block style={{ maxWidth: 400 }}>
+        <Story />
+      </Block>
+    ),
+  ],
+} satisfies Meta<typeof Search>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithSearchTerm: Story = {
+  args: {
+    searchTerm: "adressen",
+  },
+};
+
+export const WithHiddenFields: Story = {
+  name: "Met verborgen velden (actieve filters)",
+  args: {
+    hiddenFields: [
+      ["organisation", "kadaster"],
+      ["lifecycle", "active"],
+    ],
+  },
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const form = canvasElement.querySelector("form");
+    // Prevent the native GET submit from navigating away during the test.
+    form?.addEventListener("submit", (event) => event.preventDefault());
+
+    await expect(form?.querySelector('input[name="organisation"]')).toHaveValue(
+      "kadaster",
+    );
+    await expect(form?.querySelector('input[name="lifecycle"]')).toHaveValue(
+      "active",
+    );
+
+    const searchInput = canvas.getByLabelText("Voer een zoekterm in");
+    await userEvent.type(searchInput, "kadaster");
+    await expect(searchInput).toHaveValue("kadaster");
+
+    await userEvent.click(canvas.getByRole("button", { name: "Zoek" }));
+  },
+};

package/src/search/Search.tsx

@@ -1,82 +1,82 @@
-import {
-  FormFieldTextInput,
-  PrimaryActionButton,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import type { PropsWithChildren } from "react";
-import { I18nextProvider, useTranslation } from "react-i18next";
-import Heading from "../heading/Heading";
-import i18n from "../i18n";
-import Icon from "../iconsSprite/Icon";
-import styles from "./styles.module.css";
-
-export interface SearchProps {
-  searchUrl: string;
-  searchKey?: string;
-  searchTerm?: string;
-  hiddenFields?: [string, string][];
-  className?: string;
-}
-
-const Search = (props: SearchProps) => {
-  const { t } = useTranslation();
-  const {
-    searchUrl,
-    searchKey = "q",
-    searchTerm,
-    hiddenFields = [],
-    className,
-  } = props;
-
-  return (
-    <search
-      aria-labelledby="search-heading"
-      className={clsx(styles.search, className)}
-    >
-      <Heading id="search-heading" level={2} appearanceLevel={3}>
-        {t("components.search")}
-      </Heading>
-      <form action={searchUrl} method="GET" className={styles.form}>
-        {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}
-          />
-        ))}
-        <FormFieldTextInput
-          className={styles.input}
-          aria-describedby="search-help"
-          label={t("components.search-label")}
-          name={searchKey}
-          type="text"
-          defaultValue={searchTerm}
-        >
-          <div className="sr-only" id="search-help">
-            {t("components.search-help")}
-          </div>
-        </FormFieldTextInput>
-
-        <PrimaryActionButton
-          aria-label={t("components.search-button")}
-          className={styles.button}
-          type="submit"
-        >
-          <Icon name="zoek-inline" width="1.5rem" height="1.5rem" />
-        </PrimaryActionButton>
-      </form>
-    </search>
-  );
-};
-
-const TranslatedSearch = (props: PropsWithChildren<SearchProps>) => {
-  return (
-    <I18nextProvider i18n={i18n}>
-      <Search {...props} />
-    </I18nextProvider>
-  );
-};
-
-export default TranslatedSearch;
+import {
+  FormFieldTextInput,
+  PrimaryActionButton,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import type { PropsWithChildren } from "react";
+import { I18nextProvider, useTranslation } from "react-i18next";
+import Heading from "../heading/Heading";
+import i18n from "../i18n";
+import Icon from "../iconsSprite/Icon";
+import styles from "./styles.module.css";
+
+export interface SearchProps {
+  searchUrl: string;
+  searchKey?: string;
+  searchTerm?: string;
+  hiddenFields?: [string, string][];
+  className?: string;
+}
+
+const Search = (props: SearchProps) => {
+  const { t } = useTranslation();
+  const {
+    searchUrl,
+    searchKey = "q",
+    searchTerm,
+    hiddenFields = [],
+    className,
+  } = props;
+
+  return (
+    <search
+      aria-labelledby="search-heading"
+      className={clsx(styles.search, className)}
+    >
+      <Heading id="search-heading" level={2} appearanceLevel={3}>
+        {t("components.search")}
+      </Heading>
+      <form action={searchUrl} method="GET" className={styles.form}>
+        {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}
+          />
+        ))}
+        <FormFieldTextInput
+          className={styles.input}
+          aria-describedby="search-help"
+          label={t("components.search-label")}
+          name={searchKey}
+          type="text"
+          defaultValue={searchTerm}
+        >
+          <div className="sr-only" id="search-help">
+            {t("components.search-help")}
+          </div>
+        </FormFieldTextInput>
+
+        <PrimaryActionButton
+          aria-label={t("components.search-button")}
+          className={styles.button}
+          type="submit"
+        >
+          <Icon name="zoek-inline" width="1.5rem" height="1.5rem" aria-hidden />
+        </PrimaryActionButton>
+      </form>
+    </search>
+  );
+};
+
+const TranslatedSearch = (props: PropsWithChildren<SearchProps>) => {
+  return (
+    <I18nextProvider i18n={i18n}>
+      <Search {...props} />
+    </I18nextProvider>
+  );
+};
+
+export default TranslatedSearch;

package/src/search/styles.module.css

@@ -1,39 +1,40 @@
-.search {
-  --utrecht-textbox-border-width: 2px;
-  --utrecht-textbox-border-radius: 5px;
-  --utrecht-textbox-border-color: var(--rhc-color-cool-grey-900);
-}
-
-.form {
-  display: grid;
-  grid-template-areas: 'input button';
-  grid-template-columns: auto min-content;
-  gap: 0;
-  align-items: end;
-}
-
-@media (--xxs-and-below-viewport) {
-  .form {
-    justify-content: center;
-  }
-}
-
-.input {
-  grid-area: input;
-
-  :global(.utrecht-textbox) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :global(.utrecht-textbox--html-input:focus-visible) {
-    position: relative;
-    z-index: 1;
-  }
-}
-
-.button:global(.utrecht-button) {
-  grid-area: button;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
+.search {
+  --utrecht-textbox-border-width: 2px;
+  --utrecht-textbox-border-radius: 5px;
+  --utrecht-textbox-border-color: var(--rhc-color-cool-grey-900);
+}
+
+.form {
+  display: grid;
+  grid-template-areas: 'input button';
+  grid-template-columns: auto min-content;
+  gap: 0;
+  align-items: end;
+}
+
+@media (--xxs-and-below-viewport) {
+  .form {
+    justify-content: center;
+  }
+}
+
+.input {
+  grid-area: input;
+
+  :global(.utrecht-textbox) {
+    max-width: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  :global(.utrecht-textbox--html-input:focus-visible) {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.button:global(.utrecht-button) {
+  grid-area: button;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

package/src/siteLogo/ExampleLogo.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Logo from "../../../../proprietary-example/logos/react/Logo";
+
+/**
+ * Dit is het placeholder-logo uit `proprietary-example`, het sjabloon voor
+ * organisaties die deze componentenbibliotheek naar hun eigen huisstijl
+ * willen aanpassen. `SiteLogo` gebruikt in dit project echter het echte
+ * logo uit `proprietary-don` (via de `@developer-overheid-nl/proprietary`-
+ * alias), dus dit voorbeeldlogo wordt in productie niet gebruikt.
+ */
+const meta = {
+  title: "Components/SiteLogo/Voorbeeldlogo (proprietary-example)",
+  component: Logo,
+  tags: ["autodocs", "custom"],
+  argTypes: {
+    forced: {
+      control: "select",
+      options: [false, "light", "dark"],
+    },
+  },
+} satisfies Meta<typeof Logo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const ForcedLight: Story = {
+  name: "Forced light",
+  args: {
+    forced: "light",
+  },
+};
+
+export const ForcedDark: Story = {
+  name: "Forced dark",
+  args: {
+    forced: "dark",
+  },
+};

package/src/siteLogo/SiteLogo.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import SiteLogo from "./SiteLogo";
+
+/**
+ * SiteLogo toont het sitelogo. Op de homepage (`isRoot`) wordt het zonder
+ * link gerenderd; elders als link naar `href`.
+ */
+const meta = {
+  title: "Components/SiteLogo",
+  component: SiteLogo,
+  tags: ["autodocs", "custom"],
+  args: {
+    isRoot: false,
+    href: "https://developer.overheid.nl",
+  },
+} satisfies Meta<typeof SiteLogo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Linked: Story = {};
+
+export const Root: Story = {
+  name: "Op de homepage (geen link)",
+  args: {
+    isRoot: true,
+  },
+};