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

package/src/analytics/PiwikPro.tsx

@@ -1,94 +1,94 @@
-"use client";
-
-import PiwikPro, {
-  ContentTracking,
-  CustomEvent,
-  type Dimensions,
-  DownloadAndOutlink,
-  ErrorTracking,
-  SiteSearch,
-} from "@piwikpro/react-piwik-pro";
-import { useEffect } from "react";
-
-declare global {
-  interface Window {
-    _paq: unknown[];
-  }
-}
-
-interface AnalyticsProps {
-  siteId: string;
-  accountAddress: string;
-  dataLayerName?: string;
-  trackJSErrors?: boolean;
-  downloadExtensions?: string[];
-  /**
-   * @deprecated This property is deprecated.
-   */
-  pageTitle?: string;
-  customEvent?: { category?: string; action?: string; name: string };
-  isSearchPage?: boolean;
-  searchObject?: {
-    keyword: string;
-    category?: string;
-    searchCount?: number;
-    dimensions?: Dimensions;
-  };
-}
-
-// Default extra download extensions in addition to the standard ones tracked by Piwik Pro.
-const DOWNLOAD_EXTENSIONS = ["json", "yaml", "yml"];
-
-export default function Analytics(props: AnalyticsProps) {
-  /* const nonce = `n.${Math.random() * 1000000}`; // TODO: replace with nanoid or uuid */
-  const {
-    siteId,
-    accountAddress,
-    dataLayerName,
-    trackJSErrors = true,
-    pageTitle,
-    customEvent,
-    isSearchPage,
-    searchObject,
-  } = props;
-  const downloadExtensions = [
-    ...DOWNLOAD_EXTENSIONS,
-    ...(props.downloadExtensions || []),
-  ];
-
-  if (pageTitle) {
-    console.warn(
-      "The 'pageTitle' property is deprecated and will be removed in future versions.",
-    );
-  }
-
-  PiwikPro.initialize(siteId, accountAddress, {
-    /* nonce, */
-    dataLayerName,
-  });
-
-  DownloadAndOutlink.addDownloadExtensions(downloadExtensions);
-
-  ContentTracking.trackAllContentImpressions();
-  ContentTracking.trackVisibleContentImpressions(true);
-
-  if (trackJSErrors) {
-    ErrorTracking.enableJSErrorTracking();
-  }
-
-  useEffect(() => {
-    if (customEvent) {
-      CustomEvent.trackEvent(
-        customEvent.category || "Pages",
-        customEvent.action || "view",
-        customEvent.name,
-      );
-    }
-    if (isSearchPage && searchObject?.keyword) {
-      const { keyword, category, searchCount, dimensions } = searchObject;
-      SiteSearch.trackSiteSearch(keyword, category, searchCount, dimensions);
-    }
-  }, [customEvent, isSearchPage, searchObject]);
-
-  return null;
-}
+"use client";
+
+import PiwikPro, {
+  ContentTracking,
+  CustomEvent,
+  type Dimensions,
+  DownloadAndOutlink,
+  ErrorTracking,
+  SiteSearch,
+} from "@piwikpro/react-piwik-pro";
+import { useEffect } from "react";
+
+declare global {
+  interface Window {
+    _paq: unknown[];
+  }
+}
+
+interface AnalyticsProps {
+  siteId: string;
+  accountAddress: string;
+  dataLayerName?: string;
+  trackJSErrors?: boolean;
+  downloadExtensions?: string[];
+  /**
+   * @deprecated This property is deprecated.
+   */
+  pageTitle?: string;
+  customEvent?: { category?: string; action?: string; name: string };
+  isSearchPage?: boolean;
+  searchObject?: {
+    keyword: string;
+    category?: string;
+    searchCount?: number;
+    dimensions?: Dimensions;
+  };
+}
+
+// Default extra download extensions in addition to the standard ones tracked by Piwik Pro.
+const DOWNLOAD_EXTENSIONS = ["json", "yaml", "yml"];
+
+export default function Analytics(props: AnalyticsProps) {
+  /* const nonce = `n.${Math.random() * 1000000}`; // TODO: replace with nanoid or uuid */
+  const {
+    siteId,
+    accountAddress,
+    dataLayerName,
+    trackJSErrors = true,
+    pageTitle,
+    customEvent,
+    isSearchPage,
+    searchObject,
+  } = props;
+  const downloadExtensions = [
+    ...DOWNLOAD_EXTENSIONS,
+    ...(props.downloadExtensions || []),
+  ];
+
+  if (pageTitle) {
+    console.warn(
+      "The 'pageTitle' property is deprecated and will be removed in future versions.",
+    );
+  }
+
+  PiwikPro.initialize(siteId, accountAddress, {
+    /* nonce, */
+    dataLayerName,
+  });
+
+  DownloadAndOutlink.addDownloadExtensions(downloadExtensions);
+
+  ContentTracking.trackAllContentImpressions();
+  ContentTracking.trackVisibleContentImpressions(true);
+
+  if (trackJSErrors) {
+    ErrorTracking.enableJSErrorTracking();
+  }
+
+  useEffect(() => {
+    if (customEvent) {
+      CustomEvent.trackEvent(
+        customEvent.category || "Pages",
+        customEvent.action || "view",
+        customEvent.name,
+      );
+    }
+    if (isSearchPage && searchObject?.keyword) {
+      const { keyword, category, searchCount, dimensions } = searchObject;
+      SiteSearch.trackSiteSearch(keyword, category, searchCount, dimensions);
+    }
+  }, [customEvent, isSearchPage, searchObject]);
+
+  return null;
+}

package/src/analytics/index.ts

@@ -1 +1 @@
-export { default as PiwikPro } from "./PiwikPro";
+export { default as PiwikPro } from "./PiwikPro";

package/src/article/Article.tsx

@@ -1,10 +1,10 @@
-import {
-  type ArticleProps,
-  Article as RHCArticle,
-} from "@rijkshuisstijl-community/components-react";
-
-const Article = (props: ArticleProps) => {
-  return <RHCArticle {...props} />;
-};
-
-export default Article;
+import {
+  type ArticleProps,
+  Article as RHCArticle,
+} from "@rijkshuisstijl-community/components-react";
+
+const Article = (props: ArticleProps) => {
+  return <RHCArticle {...props} />;
+};
+
+export default Article;

package/src/badgeList/BadgeList.tsx

@@ -1,26 +1,34 @@
-import clsx from "clsx";
-import type { HTMLAttributes } from "react";
-import styles from "./styles.module.css";
-
-export interface BadgeListProps extends HTMLAttributes<HTMLUListElement> {
-  direction?: "row" | "column";
-}
-
-const BadgeList = (props: BadgeListProps) => {
-  const { direction = "row", className, children, ...restProps } = props;
-
-  return (
-    <ul
-      className={clsx(
-        styles.badgelist,
-        styles[`badgelist--${direction}`],
-        className,
-      )}
-      {...restProps}
-    >
-      {children}
-    </ul>
-  );
-};
-
-export default BadgeList;
+import clsx from "clsx";
+import type { HTMLAttributes } from "react";
+import styles from "./styles.module.css";
+
+export interface BadgeListProps extends HTMLAttributes<HTMLUListElement> {
+  direction?: "row" | "column";
+  table?: boolean;
+}
+
+const BadgeList = (props: BadgeListProps) => {
+  const {
+    direction = "row",
+    table = false,
+    className,
+    children,
+    ...restProps
+  } = props;
+
+  return (
+    <ul
+      className={clsx(
+        styles.badgelist,
+        styles[`badgelist--${direction}`],
+        table && styles[`badgelist--table`],
+        className,
+      )}
+      {...restProps}
+    >
+      {children}
+    </ul>
+  );
+};
+
+export default BadgeList;

package/src/badgeList/styles.module.css

@@ -1,24 +1,37 @@
-.badgelist {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-  padding: 0;
-  list-style: none;
-
-  &:empty {
-    display: none;
-  }
-}
-
-.badgelist--row {
-  flex-direction: row;
-}
-
-.badgelist--row > * {
-  display: inline-flex;
-  gap: 0.25rem;
-}
-
-.badgelist--column {
-  flex-direction: column;
-}
+.badgelist {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0;
+  list-style: none;
+
+  &:empty {
+    display: none;
+  }
+}
+
+.badgelist--row {
+  flex-direction: row;
+}
+
+.badgelist--row > * {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.badgelist--column {
+  flex-direction: column;
+}
+
+.badgelist--table > * {
+  display: inline-table;
+
+  :global(.label) {
+    display: table-caption;
+  }
+
+  :global(:not(.label)) {
+    margin-inline-end: 0.25rem;
+  }
+}

package/src/block/Block.tsx

@@ -1,35 +1,35 @@
-import clsx from "clsx";
-import type { HTMLAttributes, ReactNode } from "react";
-import styles from "./styles.module.css";
-
-export interface BlockProps extends HTMLAttributes<HTMLDivElement> {
-  className?: string;
-  children?: ReactNode;
-  appearance?: "clear" | "outlined" | "filled";
-  layout?: "full" | "flex-row" | "flex-col";
-}
-
-const Block = (props: BlockProps) => {
-  const {
-    className,
-    appearance = "filled",
-    layout = "full",
-    ...restProps
-  } = props;
-
-  return (
-    <div
-      className={clsx([
-        styles.block,
-        className,
-        styles[appearance],
-        styles[layout],
-      ])}
-      {...restProps}
-    >
-      {props.children}
-    </div>
-  );
-};
-
-export default Block;
+import clsx from "clsx";
+import type { HTMLAttributes, ReactNode } from "react";
+import styles from "./styles.module.css";
+
+export interface BlockProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: ReactNode;
+  appearance?: "clear" | "outlined" | "filled";
+  layout?: "full" | "flex-row" | "flex-col";
+}
+
+const Block = (props: BlockProps) => {
+  const {
+    className,
+    appearance = "filled",
+    layout = "full",
+    ...restProps
+  } = props;
+
+  return (
+    <div
+      className={clsx([
+        styles.block,
+        className,
+        styles[appearance],
+        styles[layout],
+      ])}
+      {...restProps}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default Block;

package/src/block/styles.module.css

@@ -1,29 +1,29 @@
-.block {
-  padding: 1rem;
-  border-radius: var(--rhc-card-as-link-border-radius);
-
-  &.flex-row,
-  &.flex-col {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  &.flex-col {
-    flex-direction: column;
-    gap: 1rem;
-    align-items: flex-start;
-  }
-
-  &.clear {
-    background-color: transparent;
-  }
-
-  &.filled {
-    background-color: var(--rhc-card-as-link-hover-background-color);
-  }
-
-  &.outlined {
-    border: 1px solid var(--rhc-card-as-link-border-color);
-  }
-}
+.block {
+  padding: 1rem;
+  border-radius: var(--rhc-card-as-link-border-radius);
+
+  &.flex-row,
+  &.flex-col {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &.flex-col {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+
+  &.clear {
+    background-color: transparent;
+  }
+
+  &.filled {
+    background-color: var(--rhc-card-as-link-hover-background-color);
+  }
+
+  &.outlined {
+    border: 1px solid var(--rhc-card-as-link-border-color);
+  }
+}

package/src/button/Button.tsx

@@ -1,3 +1,3 @@
-import { Button } from "@rijkshuisstijl-community/components-react";
-
-export default Button;
+import { Button } from "@rijkshuisstijl-community/components-react";
+
+export default Button;

package/src/cardAsLink/CardAsLink.tsx

@@ -1,21 +1,21 @@
-import {
-  CardAsLink as RHCCardAsLink,
-  type CardAsLinkProps as RHCCardAsLinkProps,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import styles from "./styles.module.css";
-
-export interface CardAsLinksProps extends RHCCardAsLinkProps {}
-
-const CardAsLink = (props: CardAsLinksProps) => {
-  const { className, ...restProps } = props;
-
-  return (
-    <RHCCardAsLink
-      className={clsx(className, styles.cardAsLink)}
-      {...restProps}
-    />
-  );
-};
-
-export default CardAsLink;
+import {
+  CardAsLink as RHCCardAsLink,
+  type CardAsLinkProps as RHCCardAsLinkProps,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+
+export interface CardAsLinksProps extends RHCCardAsLinkProps {}
+
+const CardAsLink = (props: CardAsLinksProps) => {
+  const { className, ...restProps } = props;
+
+  return (
+    <RHCCardAsLink
+      className={clsx(className, styles.cardAsLink)}
+      {...restProps}
+    />
+  );
+};
+
+export default CardAsLink;

package/src/cardAsLink/styles.module.css

@@ -1,23 +1,23 @@
-.cardAsLink.cardAsLink {
-  &:hover {
-    :global(.rhc-card-as-link__heading) {
-      text-decoration: none;
-    }
-    :global(.nl-heading) {
-      text-decoration: var(
-        --rhc-card-as-link-active-text-decoration,
-        underline
-      );
-    }
-  }
-}
-
-:global(.rhc-card-as-link__metadata) {
-  display: flex;
-  align-items: baseline;
-  justify-content: flex-end;
-}
-
-:global(.rhc-card-as-link__footer) {
-  --rhc-card-as-link-padding-block-start: 0;
-}
+.cardAsLink.cardAsLink {
+  &:hover {
+    :global(.rhc-card-as-link__heading) {
+      text-decoration: none;
+    }
+    :global(.nl-heading) {
+      text-decoration: var(
+        --rhc-card-as-link-active-text-decoration,
+        underline
+      );
+    }
+  }
+}
+
+:global(.rhc-card-as-link__metadata) {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+}
+
+:global(.rhc-card-as-link__footer) {
+  --rhc-card-as-link-padding-block-start: 0;
+}

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;