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

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,54 @@
-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) => (
+            <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;

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,2 +1,2 @@
-// Barrel export for client-side components
-export { default as CopyButton } from "./copyButton/CopyButton";
+// Barrel export for client-side components
+export { default as CopyButton } from "./copyButton/CopyButton";

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";
-
-const CopyButton = ({
-  text,
-  className,
-}: {
-  text?: string;
-  className?: string;
-}) => {
-  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"
-      >
-        <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";
+
+const CopyButton = ({
+  text,
+  className,
+}: {
+  text?: string;
+  className?: string;
+}) => {
+  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"
+      >
+        <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,50 @@
-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";
+}
+
+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;

package/src/dataBadgeLink/styles.module.css

@@ -1,43 +1,43 @@
-.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);
+    }
+  }
+}
+
+.badgeLink {
+  display: inline-block;
+  padding-block: 0.25rem;
+  color: inherit;
+  text-decoration: inherit;
+}

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;