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

package/src/scoreBadge/ScoreBadge.tsx

@@ -1,132 +1,133 @@
-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;
-  };
-}
-
-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 */
+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.tsx

@@ -1,66 +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;
-  className?: string;
-}
-
-const Search = (props: SearchProps) => {
-  const { t } = useTranslation();
-  const { searchUrl, searchKey = "q", searchTerm, 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}>
-        <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" />
+        </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,39 @@
-.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) {
+    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/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/switch/Switch.tsx

@@ -0,0 +1,86 @@
+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;

package/src/switch/styles.module.css

@@ -0,0 +1,7 @@
+.switch {
+  &:hover {
+    :global(.utrecht-form-toggle__track) {
+      background-color: var(--utrecht-form-toggle-hover-background-color);
+    }
+  }
+}