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

package/src/badgeList/styles.module.css

@@ -1,37 +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;
-  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;
-  }
-}
+.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.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Block from "./Block";
+
+/**
+ * Block is een generiek containerelement met een optionele achtergrond/rand
+ * (`appearance`) en eenvoudige flex-layout (`layout`), vaak gebruikt om
+ * andere componenten in te groeperen.
+ */
+const meta = {
+  title: "Components/Block",
+  component: Block,
+  tags: ["autodocs", "custom"],
+  argTypes: {
+    appearance: {
+      control: "select",
+      options: ["clear", "outlined", "filled"],
+    },
+    layout: {
+      control: "select",
+      options: ["full", "flex-row", "flex-col"],
+    },
+  },
+  args: {
+    appearance: "filled",
+    layout: "full",
+    children: "Dit is de inhoud van het blok.",
+  },
+} satisfies Meta<typeof Block>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Filled: Story = {};
+
+export const Outlined: Story = {
+  args: {
+    appearance: "outlined",
+  },
+};
+
+export const Clear: Story = {
+  args: {
+    appearance: "clear",
+  },
+};
+
+export const FlexRow: Story = {
+  args: {
+    layout: "flex-row",
+    children: (
+      <>
+        <span>Een</span>
+        <span>Twee</span>
+        <span>Drie</span>
+      </>
+    ),
+  },
+};

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

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Button from "./Button";
+
+/**
+ * Een button biedt de mogelijkheid om een actie uit te voeren.
+ */
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs", "re-export"],
+  args: {
+    children: "API toevoegen",
+    type: "button",
+  },
+  argTypes: {
+    appearance: {
+      control: "select",
+      options: [
+        "primary-action-button",
+        "secondary-action-button",
+        "subtle-button",
+      ],
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    appearance: "primary-action-button",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    appearance: "secondary-action-button",
+    children: "Annuleren",
+  },
+};
+
+export const Subtle: Story = {
+  args: {
+    appearance: "subtle-button",
+    children: "Meer opties",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    appearance: "primary-action-button",
+    children: "Bezig met laden",
+    disabled: true,
+  },
+};

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/button/ButtonAction.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import ButtonAction from "./ButtonAction";
+
+/**
+ * Een ButtonAction is een link die eruitziet als een knop. Gebruik deze als
+ * call to action die naar een andere pagina leidt, zoals "API toevoegen".
+ * Voor acties op de huidige pagina gebruik je `Button`.
+ */
+const meta = {
+  title: "Components/ButtonAction",
+  component: ButtonAction,
+  tags: ["autodocs", "remixed"],
+  args: {
+    href: "/apis/toevoegen",
+    children: "API toevoegen",
+  },
+  argTypes: {
+    appearance: {
+      control: "select",
+      options: [
+        "primary-action-button",
+        "secondary-action-button",
+        "subtle-button",
+      ],
+    },
+  },
+} satisfies Meta<typeof ButtonAction>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
+
+export const WithIcon: Story = {
+  name: "Met icoon",
+  args: {
+    icon: "plus-cirkel-inline",
+  },
+};
+
+export const WithoutIconEnd: Story = {
+  name: "Zonder icoon",
+  args: {
+    iconEnd: false,
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    appearance: "secondary-action-button",
+    href: "/repositories/toevoegen",
+    children: "Repository toevoegen",
+  },
+};
+
+export const Subtle: Story = {
+  args: {
+    appearance: "subtle-button",
+    href: "/apis/download",
+    children: "Download alle API's",
+  },
+};

package/src/button/ButtonAction.tsx

@@ -0,0 +1,51 @@
+import {
+  ButtonLink,
+  type ButtonLinkProps,
+} from "@rijkshuisstijl-community/components-react";
+import Icon from "../iconsSprite/Icon";
+
+export interface ButtonActionProps extends ButtonLinkProps {
+  /**
+   * Visual weight of the call to action. Defaults to the primary action
+   * appearance, so the link stands out as the main action on the page.
+   */
+  appearance?:
+    | "primary-action-button"
+    | "secondary-action-button"
+    | "subtle-button";
+  /**
+   * Name of an icon in the sprite (without the `icon-` prefix), rendered
+   * before the label, e.g. `plus-cirkel-inline`.
+   */
+  icon?: string;
+  /**
+   * Name of an icon in the sprite (without the `icon-` prefix), rendered
+   * after the label. Defaults to `delta-naar-rechts-inline`; pass `false`
+   * to render no icon.
+   */
+  iconEnd?: string | false;
+}
+
+/**
+ * A link styled as a button, used as a call to action (e.g. "API toevoegen").
+ * Use this instead of `Button` when the action navigates to another page.
+ */
+const ButtonAction = (props: ButtonActionProps) => {
+  const {
+    appearance = "primary-action-button",
+    icon,
+    iconEnd = "delta-naar-rechts-inline",
+    children,
+    ...restProps
+  } = props;
+
+  return (
+    <ButtonLink appearance={appearance} {...restProps}>
+      {icon && <Icon name={icon} aria-hidden />}
+      {children}
+      {iconEnd && <Icon name={iconEnd} aria-hidden />}
+    </ButtonLink>
+  );
+};
+
+export default ButtonAction;

package/src/cardAsLink/CardAsLink.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import AlignBox from "../alignBox/AlignBox";
+import DataBadgeLink from "../dataBadgeLink/DataBadgeLink";
+import HeadingGroup from "../headingGroup/HeadingGroup";
+import Markdown from "../markdown/Markdown";
+import Paragraph from "../paragraph/Paragraph";
+import PillBadge from "../pillBadge/PillBadge";
+import CardAsLink from "./CardAsLink";
+
+/**
+ * CardAsLink is een kaart die als geheel klikbaar is, bijvoorbeeld naar een
+ * API- of repository-detailpagina. Kop, beschrijving en metadata worden via
+ * named slots (`slot="heading"`, `slot="description"`, `slot="metadata"`)
+ * doorgegeven.
+ *
+ * ## Wijzigingen tov RHC:
+ * - Alleen CSS-aanpassingen (hover-onderstreping van de kop); geen
+ *   wijzigingen in props.
+ */
+const meta = {
+  title: "Components/CardAsLink",
+  component: CardAsLink,
+  tags: ["autodocs", "mixed"],
+} satisfies Meta<typeof CardAsLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ApiOverviewCard: Story = {
+  args: {
+    href: "/apis/basisregistratie-adressen-en-gebouwen",
+    linkLabel: "Bekijk details",
+  },
+  render: (args) => (
+    <CardAsLink {...args}>
+      <HeadingGroup
+        slot="heading"
+        title="Basisregistratie Adressen en Gebouwen API"
+        level={2}
+        appearanceLevel={4}
+      >
+        <div className="subtitle" slot="subTitle">
+          <Paragraph
+            slot="subTitle"
+            data-content-piece="Organisation Name"
+            itemScope={true}
+            itemType="https://schema.org/Organization"
+            itemID="https://standaarden.overheid.nl/owms/terms/Kadaster"
+            className="moveAbove"
+          >
+            <span itemProp="name">
+              <DataBadgeLink
+                appearance="subtle"
+                href="/apis?organisation=kadaster"
+              >
+                Kadaster
+              </DataBadgeLink>
+            </span>
+          </Paragraph>
+          <div className="header-meta" />
+        </div>
+      </HeadingGroup>
+      <div slot="description" className="description utrecht-html">
+        <Markdown
+          text="API voor het zoeken en raadplegen van adressen, panden, verblijfsobjecten en gerelateerde gegevens uit de BAG."
+          openLinksInNewTab
+          allowedElements={["p", "a", "ul", "ol", "li"]}
+        />
+      </div>
+      <AlignBox align="space-between" slot="metadata" className="meta">
+        <PillBadge
+          startValue="Status"
+          endValue="Actief"
+          type="color"
+          color="mintgroen"
+        />
+        <span className="last-updated">Laatste wijziging: 08-07-2026</span>
+      </AlignBox>
+    </CardAsLink>
+  ),
+};

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;
+}