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

package/src/scoreBadge/ScoreBadge.tsx

@@ -1,132 +1,132 @@
-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;
+  };
+}
+
+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,66 @@
-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;
+  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;

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/topNavigation/TopNavigation.tsx

@@ -1,64 +1,67 @@
-import {
-  type IconProps,
-  NavBar,
-  type NavBarItemProps,
-} from "@rijkshuisstijl-community/components-react";
-import type { ReactElement } from "react";
-import Icon from "../iconsSprite/Icon";
-import styles from "./styles.module.css";
-
-export interface NavBarItem {
-  id: string;
-  label: string;
-  href: string;
-  current?: boolean;
-  icon?: string | ReactElement<IconProps>;
-}
-
-export interface TopNavigationProps {
-  items: Array<NavBarItem>;
-  endItems?: Array<NavBarItem>;
-}
-
-const processIcon = (
-  icon: NavBarItem["icon"],
-): ReactElement<IconProps> | undefined => {
-  if (typeof icon === "string") {
-    switch (icon) {
-      case "_add":
-        return <Icon name="plus-cirkel-inline" />;
-      case "_external":
-        return (
-          <Icon name="externe-link-inline" aria-label={`Externe link naar`} />
-        );
-    }
-  } else {
-    return icon;
-  }
-};
-
-export const processNavBarItems = (
-  items: Array<NavBarItem>,
-): NavBarItemProps[] => {
-  return items.map((item) => ({
-    ...item,
-    // TODO: remove current from this output. Issue #188
-    bold: item.current,
-    icon: processIcon(item.icon),
-  }));
-};
-
-export default function TopNavigation({ items, endItems }: TopNavigationProps) {
-  const processedItems = processNavBarItems(items);
-  const processedEndItems = endItems && processNavBarItems(endItems);
-
-  return (
-    <div className={styles.container}>
-      <NavBar
-        items={processedItems}
-        endItems={processedEndItems}
-        className={styles.navbar}
-      />
-    </div>
-  );
-}
+import {
+  type IconProps,
+  NavBar,
+  type NavBarItemProps,
+} from "@rijkshuisstijl-community/components-react";
+import type { ReactElement } from "react";
+import Icon from "../iconsSprite/Icon";
+import styles from "./styles.module.css";
+
+export interface NavBarItem {
+  id: string;
+  label: string;
+  href: string;
+  current?: boolean;
+  icon?: string | ReactElement<IconProps>;
+}
+
+export interface TopNavigationProps {
+  items: Array<NavBarItem>;
+  endItems?: Array<NavBarItem>;
+}
+
+const processIcon = (
+  icon: NavBarItem["icon"],
+): ReactElement<IconProps> | undefined => {
+  if (typeof icon === "string") {
+    switch (icon) {
+      case "_add":
+        return <Icon name="plus-cirkel-inline" />;
+      case "_external":
+        return (
+          <Icon name="externe-link-inline" aria-label={`Externe link naar`} />
+        );
+    }
+  } else {
+    return icon;
+  }
+};
+
+export const processNavBarItems = (
+  items: Array<NavBarItem>,
+): NavBarItemProps[] => {
+  return items.map((item) => {
+    const { current, ...rest } = item;
+
+    return {
+      ...rest,
+      bold: current,
+      icon: processIcon(item.icon),
+    };
+  });
+};
+
+export default function TopNavigation({ items, endItems }: TopNavigationProps) {
+  const processedItems = processNavBarItems(items);
+  const processedEndItems = endItems && processNavBarItems(endItems);
+
+  return (
+    <div className={styles.container}>
+      <NavBar
+        items={processedItems}
+        endItems={processedEndItems}
+        className={styles.navbar}
+      />
+    </div>
+  );
+}