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

package/src/cardsList/styles.module.css

@@ -1,19 +1,19 @@
-.cardsList {
-  --rhc-card-as-link-inline-size: 100%;
-  --rhc-card-as-link-active-text-decoration: none;
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--rhc-space-200);
-  padding-inline-start: 0;
-  list-style-type: none;
-}
-
-:global(
-    .rhc-card-as-link:hover
-    .rhc-card-as-link__heading.rhc-card-as-link__heading
-  ) {
-  /* TODO: specifity */
-  :global(.nl-heading) {
-    text-decoration: underline;
-  }
-}
+.cardsList {
+  --rhc-card-as-link-inline-size: 100%;
+  --rhc-card-as-link-active-text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rhc-space-200);
+  padding-inline-start: 0;
+  list-style-type: none;
+}
+
+:global(
+    .rhc-card-as-link:hover
+    .rhc-card-as-link__heading.rhc-card-as-link__heading
+  ) {
+  /* TODO: specifity */
+  :global(.nl-heading) {
+    text-decoration: underline;
+  }
+}

package/src/client.ts

@@ -1,7 +1,7 @@
-// Barrel export for client-side components
-export { default as CopyButton } from "./copyButton/CopyButton";
-export {
-  default as FacetFilters,
-  type FacetFiltersProps,
-  type FilterData,
-} from "./facetFilters/FacetFilters";
+// Barrel export for client-side components
+export { default as CopyButton } from "./copyButton/CopyButton";
+export {
+  default as FacetFilters,
+  type FacetFiltersProps,
+  type FilterData,
+} from "./facetFilters/FacetFilters";

package/src/container/Container.tsx

@@ -1,10 +1,10 @@
-import styles from "./styles.module.css";
-
-export default function Container(props: React.HTMLProps<HTMLDivElement>) {
-  const { children, className, ...restProps } = props || {};
-  return (
-    <div className={`${styles.container} ${className || ""}`} {...restProps}>
-      {children}
-    </div>
-  );
-}
+import styles from "./styles.module.css";
+
+export default function Container(props: React.HTMLProps<HTMLDivElement>) {
+  const { children, className, ...restProps } = props || {};
+  return (
+    <div className={`${styles.container} ${className || ""}`} {...restProps}>
+      {children}
+    </div>
+  );
+}

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,53 +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,
-    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;
+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,69 +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);
-    }
-  }
-
-  &: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)
-    );
-  }
-}
+.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;