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

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.tsx

@@ -1,39 +1,39 @@
-"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";
+
+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;

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.tsx

@@ -1,50 +1,53 @@
-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";
-}
-
-const DataBadgeLink = (props: DataBadgeLinkProps) => {
-  const {
-    href,
-    target,
-    rel,
-    children,
-    className,
-    role,
-    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}
-      {...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";
+
+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;

package/src/dataBadgeLink/styles.module.css

@@ -1,43 +1,89 @@
-.donDataBadge.donDataBadge {
-  &.primary {
-    --_utrecht-data-badge-color: oklch(
-      from var(--utrecht-data-badge-color) calc(l - 0.1) c h
-    );
-    color: var(--_utrecht-data-badge-color);
-
-    &:hover {
-      color: var(--utrecht-data-badge-color);
-    }
-  }
-
-  &.outlined {
-    --_utrecht-data-badge-background-color: var(--rhc-color-canvas);
-    background-color: var(--_utrecht-data-badge-background-color);
-    border: 2px solid var(--utrecht-data-badge-color);
-
-    &:hover {
-      background-color: var(--utrecht-data-badge-background-color);
-      border-color: var(--utrecht-data-badge-background-color);
-    }
-  }
-
-  &.subtle {
-    --_utrecht-data-badge-color: var(--nl-link-color);
-    --_utrecht-data-badge-background-color: var(--rhc-color-cool-grey-200);
-    --utrecht-data-badge-font-weight: normal;
-    color: var(--_utrecht-data-badge-color);
-    background-color: var(--_utrecht-data-badge-background-color);
-
-    &:hover {
-      color: var(--rhc-color-cool-grey-50);
-      background-color: var(--rhc-color-cool-grey-500);
-    }
-  }
-}
-
-.badgeLink {
-  display: inline-block;
-  padding-block: 0.25rem;
-  color: inherit;
-  text-decoration: inherit;
-}
+.donDataBadge.donDataBadge {
+  &.primary {
+    --_utrecht-data-badge-color: oklch(
+      from var(--utrecht-data-badge-color) calc(l - 0.1) c h
+    );
+    color: var(--_utrecht-data-badge-color);
+
+    &:hover {
+      color: var(--utrecht-data-badge-color);
+    }
+  }
+
+  &.outlined {
+    --_utrecht-data-badge-background-color: var(--rhc-color-canvas);
+    background-color: var(--_utrecht-data-badge-background-color);
+    border: 2px solid var(--utrecht-data-badge-color);
+
+    &:hover {
+      background-color: var(--utrecht-data-badge-background-color);
+      border-color: var(--utrecht-data-badge-background-color);
+    }
+  }
+
+  &.subtle {
+    --_utrecht-data-badge-color: var(--nl-link-color);
+    --_utrecht-data-badge-background-color: var(--rhc-color-cool-grey-200);
+    --utrecht-data-badge-font-weight: normal;
+    color: var(--_utrecht-data-badge-color);
+    background-color: var(--_utrecht-data-badge-background-color);
+
+    &:hover {
+      color: var(--rhc-color-cool-grey-50);
+      background-color: var(--rhc-color-cool-grey-500);
+    }
+  }
+
+  &.link {
+    --_utrecht-data-badge-color: var(--nl-link-color);
+    --_utrecht-data-badge-background-color: var(--rhc-color-wit);
+    --utrecht-data-badge-font-weight: normal;
+    color: var(--_utrecht-data-badge-color);
+    background-color: var(--_utrecht-data-badge-background-color);
+
+    &:hover {
+      background-color: var(--rhc-color-cool-grey-100);
+
+      .badgeLink {
+        text-decoration: none;
+      }
+    }
+
+    .badgeLink {
+      text-decoration: underline;
+    }
+  }
+
+  &:focus-within {
+    outline-width: var(--utrecht-focus-outline-width, revert);
+    outline-style: var(--utrecht-focus-outline-style, revert);
+    outline-color: var(--utrecht-focus-outline-color, revert);
+    outline-offset: var(--utrecht-focus-outline-offset, revert);
+  }
+}
+
+.badgeLink {
+  display: inline-block;
+  padding-block: 0.25rem;
+  color: inherit;
+  text-decoration: inherit;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  /* fix for non-clickable icons bug */
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    content: '';
+    border-radius: var(
+      --utrecht-data-badge-border-radius,
+      var(--utrecht-badge-border-radius, 0.5ch)
+    );
+  }
+}

package/src/dataSummary/DataSummary.tsx

@@ -1,22 +1,22 @@
-import {
-  DataSummary as RHCDataSummary,
-  type DataSummaryProps as RHCDataSummaryProps,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import styles from "./styles.module.css";
-
-export interface DataSummaryProps extends RHCDataSummaryProps {
-  contained?: boolean;
-}
-
-const DataSummary = (props: DataSummaryProps) => {
-  const { className, contained = false, ...restProps } = props;
-  return (
-    <RHCDataSummary
-      className={clsx(className, { [styles.isContained]: contained })}
-      {...restProps}
-    />
-  );
-};
-
-export default DataSummary;
+import {
+  DataSummary as RHCDataSummary,
+  type DataSummaryProps as RHCDataSummaryProps,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+
+export interface DataSummaryProps extends RHCDataSummaryProps {
+  contained?: boolean;
+}
+
+const DataSummary = (props: DataSummaryProps) => {
+  const { className, contained = false, ...restProps } = props;
+  return (
+    <RHCDataSummary
+      className={clsx(className, { [styles.isContained]: contained })}
+      {...restProps}
+    />
+  );
+};
+
+export default DataSummary;

package/src/dataSummary/DataSummaryItem.tsx

@@ -1,21 +1,21 @@
-import {
-  DataSummaryItem as RHCDataSummaryItem,
-  type DataSummaryItemProps as RHCDataSummaryItemProps,
-} from "@rijkshuisstijl-community/components-react";
-
-export interface DataSummaryItemProps
-  extends Partial<RHCDataSummaryItemProps> {}
-
-const DataSummaryItem = (props: DataSummaryItemProps) => {
-  const { className, itemKey = "", itemValue = "-", ...restProps } = props;
-  return (
-    <RHCDataSummaryItem
-      itemKey={itemKey}
-      itemValue={itemValue}
-      className={className}
-      {...restProps}
-    />
-  );
-};
-
-export default DataSummaryItem;
+import {
+  DataSummaryItem as RHCDataSummaryItem,
+  type DataSummaryItemProps as RHCDataSummaryItemProps,
+} from "@rijkshuisstijl-community/components-react";
+
+export interface DataSummaryItemProps
+  extends Partial<RHCDataSummaryItemProps> {}
+
+const DataSummaryItem = (props: DataSummaryItemProps) => {
+  const { className, itemKey = "", itemValue = "-", ...restProps } = props;
+  return (
+    <RHCDataSummaryItem
+      itemKey={itemKey}
+      itemValue={itemValue}
+      className={className}
+      {...restProps}
+    />
+  );
+};
+
+export default DataSummaryItem;

package/src/dataSummary/styles.module.css

@@ -1,70 +1,75 @@
-:global(.rhc-data-summary) {
-  --rhc-data-summary-item-key-padding-inline-start: 0;
-  --rhc-data-summary-item-key-padding-inline-end: 0;
-  --rhc-data-summary-item-key-padding-block-start: 0;
-  --rhc-data-summary-item-key-padding-block-end: 0;
-  --rhc-data-summary-item-value-padding-inline-start: 0;
-  --rhc-data-summary-item-value-padding-inline-end: 0;
-  --rhc-data-summary-item-value-padding-block-start: 0;
-  --rhc-data-summary-item-value-padding-block-end: 0;
-  --rhc-data-summary-item-action-padding-inline-start: 0;
-  --rhc-data-summary-item-action-padding-inline-end: 0;
-  --rhc-data-summary-item-action-padding-block-start: 0;
-  --rhc-data-summary-item-action-padding-block-end: 0;
-  --rhc-data-summary-item-key-row-padding-inline-start: 0;
-  --rhc-data-summary-item-key-row-padding-inline-end: 0;
-  --rhc-data-summary-item-key-row-padding-block-start: 0;
-  --rhc-data-summary-item-key-row-padding-block-end: 0.75rem;
-  --rhc-data-summary-item-value-row-padding-inline-start: 0;
-  --rhc-data-summary-item-value-row-padding-inline-end: 0;
-  --rhc-data-summary-item-value-row-padding-block-start: 0;
-  --rhc-data-summary-item-value-row-padding-block-end: 0.75rem;
-  --rhc-data-summary-item-action-row-padding-inline-start: 0;
-  --rhc-data-summary-item-action-row-padding-inline-end: 0;
-  --rhc-data-summary-item-action-row-padding-block-start: 0;
-  --rhc-data-summary-item-action-row-padding-block-end: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  row-gap: 0.75rem;
-  margin-block-start: 0;
-  margin-block-end: 1rem;
-}
-
-:global(.rhc-data-summary__item) {
-  row-gap: 0.75rem;
-  column-gap: 1rem;
-}
-
-:global(.rhc-data-summary--column) {
-  :global(.rhc-data-summary__item) {
-    padding-block-end: var(--rhc-data-summary-item-key-row-padding-block-end);
-  }
-}
-
-:global(.rhc-data-summary--row) {
-  :global(.rhc-data-summary__item) {
-    justify-content: space-between;
-  }
-
-  :global(.rhc-data-summary__item-value:last-child) {
-    text-align: end;
-  }
-}
-
-:global(.rhc-data-summary__item-key):empty,
-:global(.rhc-data-summary__item-value):empty {
-  display: none;
-}
-
-:global(.rhc-data-summary__item-value) {
-  hyphens: auto;
-  word-break: break-word;
-}
-
-.isContained {
-  margin-block-end: 0;
-  :global(.rhc-data-summary__item:last-child) {
-    --rhc-data-summary-item-border-block-end-style: none;
-    --rhc-data-summary-item-key-row-padding-block-end: 0;
-  }
-}
+:global(.rhc-data-summary) {
+  --rhc-data-summary-item-key-padding-inline-start: 0;
+  --rhc-data-summary-item-key-padding-inline-end: 0;
+  --rhc-data-summary-item-key-padding-block-start: 0;
+  --rhc-data-summary-item-key-padding-block-end: 0;
+  --rhc-data-summary-item-value-padding-inline-start: 0;
+  --rhc-data-summary-item-value-padding-inline-end: 0;
+  --rhc-data-summary-item-value-padding-block-start: 0;
+  --rhc-data-summary-item-value-padding-block-end: 0;
+  --rhc-data-summary-item-action-padding-inline-start: 0;
+  --rhc-data-summary-item-action-padding-inline-end: 0;
+  --rhc-data-summary-item-action-padding-block-start: 0;
+  --rhc-data-summary-item-action-padding-block-end: 0;
+  --rhc-data-summary-item-key-row-padding-inline-start: 0;
+  --rhc-data-summary-item-key-row-padding-inline-end: 0;
+  --rhc-data-summary-item-key-row-padding-block-start: 0;
+  --rhc-data-summary-item-key-row-padding-block-end: 0.5rem;
+  --rhc-data-summary-item-value-row-padding-inline-start: 0;
+  --rhc-data-summary-item-value-row-padding-inline-end: 0;
+  --rhc-data-summary-item-value-row-padding-block-start: 0;
+  --rhc-data-summary-item-value-row-padding-block-end: 0.5rem;
+  --rhc-data-summary-item-action-row-padding-inline-start: 0;
+  --rhc-data-summary-item-action-row-padding-inline-end: 0;
+  --rhc-data-summary-item-action-row-padding-block-start: 0;
+  --rhc-data-summary-item-action-row-padding-block-end: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.75rem;
+  margin-block-start: 0;
+  margin-block-end: 1rem;
+}
+
+:global(.rhc-data-summary__item) {
+  row-gap: 0.25rem;
+  column-gap: 1rem;
+}
+
+:global(.rhc-data-summary--column) {
+  :global(.rhc-data-summary__item) {
+    padding-block-end: var(--rhc-data-summary-item-key-row-padding-block-end);
+  }
+}
+
+:global(.rhc-data-summary--row) {
+  :global(.rhc-data-summary__item) {
+    justify-content: space-between;
+  }
+
+  :global(.rhc-data-summary__item-value:last-child) {
+    text-align: end;
+  }
+}
+
+:global(.rhc-data-summary__item-key):empty,
+:global(.rhc-data-summary__item-value):empty {
+  display: none;
+}
+
+:global(.rhc-data-summary__item-value) {
+  hyphens: auto;
+  word-break: break-word;
+}
+
+.isContained {
+  &:last-child {
+    margin-block-end: 0;
+  }
+
+  :global(.rhc-data-summary__item:last-child) {
+    --rhc-data-summary-item-border-block-end-style: none;
+    --rhc-data-summary-item-key-row-padding-block-end: 0;
+    --rhc-data-summary-item-value-row-padding-block-end: 0;
+    --rhc-data-summary-item-action-row-padding-block-end: 0;
+  }
+}