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

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