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

package/src/index.ts

@@ -1,107 +1,117 @@
-// Barrel export for all components
-export { type AlertProps, default as Alert } from "./alert/Alert";
-export { type AlignBoxProps, default as AlignBox } from "./alignBox/AlignBox";
-export { default as Article } from "./article/Article";
-export {
-  type BadgeListProps,
-  default as BadgeList,
-} from "./badgeList/BadgeList";
-export { type BlockProps, default as Block } from "./block/Block";
-export { default as Button } from "./button/Button";
-export {
-  type CardAsLinksProps,
-  default as CardAsLink,
-} from "./cardAsLink/CardAsLink";
-export {
-  CardsListItem,
-  type CardsListItemProps,
-  type CardsListProps,
-  default as CardsList,
-} from "./cardsList/CardsList";
-export { default as Container } from "./container/Container";
-export { default as CopyButton } from "./copyButton/CopyButton"; // client component
-export {
-  type DataBadgeLinkProps,
-  default as DataBadgeLink,
-} from "./dataBadgeLink/DataBadgeLink";
-export {
-  type DataSummaryProps,
-  default as DataSummary,
-} from "./dataSummary/DataSummary";
-export {
-  type DataSummaryItemProps,
-  default as DataSummaryItem,
-} from "./dataSummary/DataSummaryItem";
-export {
-  default as FacetFilters,
-  type FacetFiltersProps,
-  type FilterData,
-  getSelectedFilters,
-  getSelectedFiltersMap,
-} from "./facetFilters/FacetFilters";
-export { default as Fieldset } from "./fieldset/FieldSet";
-export { default as Filters } from "./filters/Filters";
-export {
-  type ColumnProps,
-  default as Footer,
-  type FooterProps,
-} from "./footer/Footer";
-export { default as FormFieldCheckboxGroup } from "./formFieldCheckboxGroup/FormFieldCheckboxGroup";
-export { default as FormFieldCheckboxOption } from "./formFieldCheckboxOption/FormFieldCheckboxOption";
-export { default as FormFieldLabel } from "./formFieldLabel/FormFieldLabel";
-export { default as FormFieldRadioGroup } from "./formFieldRadioGroup/FormFieldRadioGroup";
-export { default as FormFieldRadioOption } from "./formFieldRadioOption/FormFieldRadioOption";
-export { default as FormFieldSwitch } from "./formFieldSwitch/FormFieldSwitch";
-export { default as FormFieldTextInput } from "./formFieldTextInput/FormFieldTextInput";
-export { default as Header, type HeaderProps } from "./header/Header";
-export {
-  clampHeadingLevel,
-  default as Heading,
-  type HeadingProps,
-} from "./heading/Heading";
-export {
-  default as HeadingGroup,
-  type HeadingGroupProps,
-} from "./headingGroup/HeadingGroup";
-export { default as getAppearance, getDate } from "./iconBadge/getAppearance";
-export {
-  default as IconBadge,
-  type IconBadgeProps,
-} from "./iconBadge/IconBadge";
-export { default as Icon } from "./iconsSprite/Icon";
-export { default as IconsSprite } from "./iconsSprite/IconsSprite";
-export {
-  default as InfoButton,
-  type InfoButtonProps,
-} from "./infoButton/InfoButton";
-export { default as Link } from "./link/Link";
-export {
-  default as Markdown,
-  type HeadingLevels,
-  type MarkdownProps,
-} from "./markdown/Markdown";
-export { default as Overlay } from "./overlay/Overlay";
-export {
-  default as Pagination,
-  type PaginationProps,
-} from "./pagination/Pagination";
-export { default as Paragraph } from "./paragraph/Paragraph";
-export {
-  default as PillBadge,
-  type PillBadgeProps,
-} from "./pillBadge/PillBadge";
-export { default as ReadOnlyTextInput } from "./readOnlyTextInput/ReadOnlyTextInput";
-export {
-  default as ScoreBadge,
-  type ScoreBadgeProps,
-} from "./scoreBadge/ScoreBadge";
-export { default as Search, type SearchProps } from "./search/Search";
-export { default as SiteLogo } from "./siteLogo/SiteLogo";
-export { default as Switch, type SwitchProps } from "./switch/Switch";
-export { default as ToolTip } from "./toolTip/ToolTip";
-export {
-  default as TopNavigation,
-  type NavBarItem,
-  processNavBarItems,
-  type TopNavigationProps,
-} from "./topNavigation/TopNavigation";
+// Barrel export for all components
+export { type AlertProps, default as Alert } from "./alert/Alert";
+export { type AlignBoxProps, default as AlignBox } from "./alignBox/AlignBox";
+export { default as Article } from "./article/Article";
+export {
+  type BadgeListProps,
+  default as BadgeList,
+} from "./badgeList/BadgeList";
+export { type BlockProps, default as Block } from "./block/Block";
+export { default as Button } from "./button/Button";
+export {
+  type ButtonActionProps,
+  default as ButtonAction,
+} from "./button/ButtonAction";
+export {
+  type CardAsLinksProps,
+  default as CardAsLink,
+} from "./cardAsLink/CardAsLink";
+export {
+  CardsListItem,
+  type CardsListItemProps,
+  type CardsListProps,
+  default as CardsList,
+} from "./cardsList/CardsList";
+export { default as Container } from "./container/Container";
+export { default as CopyButton } from "./copyButton/CopyButton"; // client component
+export {
+  type DataBadgeLinkProps,
+  default as DataBadgeLink,
+} from "./dataBadgeLink/DataBadgeLink";
+export {
+  type DataSummaryProps,
+  default as DataSummary,
+} from "./dataSummary/DataSummary";
+export {
+  type DataSummaryItemProps,
+  default as DataSummaryItem,
+} from "./dataSummary/DataSummaryItem";
+export {
+  default as FacetFilters,
+  type FacetFiltersProps,
+  type FilterData,
+  getSelectedFilters,
+  getSelectedFiltersMap,
+} from "./facetFilters/FacetFilters";
+export { default as Fieldset } from "./fieldset/FieldSet";
+export { default as Filters } from "./filters/Filters";
+export {
+  type ColumnProps,
+  default as Footer,
+  type FooterProps,
+} from "./footer/Footer";
+export { default as FormFieldCheckboxGroup } from "./formFieldCheckboxGroup/FormFieldCheckboxGroup";
+export { default as FormFieldCheckboxOption } from "./formFieldCheckboxOption/FormFieldCheckboxOption";
+export { default as FormFieldLabel } from "./formFieldLabel/FormFieldLabel";
+export { default as FormFieldRadioGroup } from "./formFieldRadioGroup/FormFieldRadioGroup";
+export { default as FormFieldRadioOption } from "./formFieldRadioOption/FormFieldRadioOption";
+export { default as FormFieldSwitch } from "./formFieldSwitch/FormFieldSwitch";
+export { default as FormFieldTextInput } from "./formFieldTextInput/FormFieldTextInput";
+export { default as Grid, type GridProps } from "./grid/Grid";
+export { default as Header, type HeaderProps } from "./header/Header";
+export {
+  clampHeadingLevel,
+  default as Heading,
+  type HeadingProps,
+} from "./heading/Heading";
+export {
+  default as HeadingGroup,
+  type HeadingGroupProps,
+} from "./headingGroup/HeadingGroup";
+export { default as getAppearance, getDate } from "./iconBadge/getAppearance";
+export {
+  default as IconBadge,
+  type IconBadgeProps,
+} from "./iconBadge/IconBadge";
+export { default as Icon } from "./iconsSprite/Icon";
+export { default as IconsSprite } from "./iconsSprite/IconsSprite";
+export {
+  default as InfoButton,
+  type InfoButtonProps,
+} from "./infoButton/InfoButton";
+export { default as Link } from "./link/Link";
+export {
+  default as Markdown,
+  type HeadingLevels,
+  type MarkdownProps,
+} from "./markdown/Markdown";
+export { default as Overlay } from "./overlay/Overlay";
+export {
+  default as Pagination,
+  type PaginationProps,
+} from "./pagination/Pagination";
+export { default as Paragraph } from "./paragraph/Paragraph";
+export {
+  default as PillBadge,
+  type PillBadgeProps,
+} from "./pillBadge/PillBadge";
+export { default as ReadOnlyTextInput } from "./readOnlyTextInput/ReadOnlyTextInput";
+export {
+  default as ScoreBadge,
+  type ScoreBadgeProps,
+} from "./scoreBadge/ScoreBadge";
+export { default as Search, type SearchProps } from "./search/Search";
+export { default as SiteLogo } from "./siteLogo/SiteLogo";
+export {
+  default as SortForm,
+  type SortFormProps,
+  type SortOption,
+} from "./sortForm/SortForm";
+export { default as Switch, type SwitchProps } from "./switch/Switch";
+export { default as ToolTip } from "./toolTip/ToolTip";
+export {
+  default as TopNavigation,
+  type NavBarItem,
+  processNavBarItems,
+  type TopNavigationProps,
+} from "./topNavigation/TopNavigation";

package/src/infoButton/InfoButton.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import InfoButton from "./InfoButton";
+
+/**
+ * InfoButton is een knop met een info-icoon, met instelbare grootte
+ * (`iconSize`) en kleur (`iconColor`). Wordt onder andere gebruikt als
+ * standaard trigger-element van `ToolTip`.
+ */
+const meta = {
+  title: "Components/InfoButton",
+  component: InfoButton,
+  tags: ["autodocs", "custom"],
+  argTypes: {
+    iconSize: {
+      control: "select",
+      options: ["small", "default", "large"],
+    },
+    iconColor: {
+      control: "select",
+      options: ["default", "current"],
+    },
+  },
+  args: {
+    "aria-label": "Meer informatie",
+  },
+} satisfies Meta<typeof InfoButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Small: Story = {
+  args: {
+    iconSize: "small",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    iconSize: "large",
+  },
+};
+
+export const CurrentColor: Story = {
+  name: "Current color (erft tekstkleur)",
+  render: (args) => (
+    <span style={{ color: "rebeccapurple" }}>
+      <InfoButton {...args} iconColor="current" />
+    </span>
+  ),
+};

package/src/infoButton/InfoButton.tsx

@@ -1,45 +1,45 @@
-import clsx from "clsx";
-import type { ButtonHTMLAttributes, HTMLProps } from "react";
-import Icon from "../iconsSprite/Icon";
-import styles from "./styles.module.css";
-
-export interface InfoButtonProps extends HTMLProps<HTMLButtonElement> {
-  iconSize?: "small" | "default" | "large";
-  iconColor?: "default" | "current";
-  type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
-  commandfor?: string;
-  command?:
-    | "show-modal"
-    | "close"
-    | "request-close"
-    | "show-popover"
-    | "hide-popover"
-    | "toggle-popover"
-    | `--${string}`;
-  interestfor?: string;
-}
-
-const InfoButton = (props: InfoButtonProps) => {
-  const {
-    iconSize = "default",
-    iconColor = "default",
-    type = "button",
-    ...restProps
-  } = props;
-
-  return (
-    <button
-      className={clsx(
-        styles.infoButton,
-        styles[`${iconSize}Size`],
-        styles[`${iconColor}Color`],
-      )}
-      type={type}
-      {...restProps}
-    >
-      <Icon name="info" />
-    </button>
-  );
-};
-
-export default InfoButton;
+import clsx from "clsx";
+import type { ButtonHTMLAttributes, HTMLProps } from "react";
+import Icon from "../iconsSprite/Icon";
+import styles from "./styles.module.css";
+
+export interface InfoButtonProps extends HTMLProps<HTMLButtonElement> {
+  iconSize?: "small" | "default" | "large";
+  iconColor?: "default" | "current";
+  type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+  commandfor?: string;
+  command?:
+    | "show-modal"
+    | "close"
+    | "request-close"
+    | "show-popover"
+    | "hide-popover"
+    | "toggle-popover"
+    | `--${string}`;
+  interestfor?: string;
+}
+
+const InfoButton = (props: InfoButtonProps) => {
+  const {
+    iconSize = "default",
+    iconColor = "default",
+    type = "button",
+    ...restProps
+  } = props;
+
+  return (
+    <button
+      className={clsx(
+        styles.infoButton,
+        styles[`${iconSize}Size`],
+        styles[`${iconColor}Color`],
+      )}
+      type={type}
+      {...restProps}
+    >
+      <Icon name="info" aria-hidden />
+    </button>
+  );
+};
+
+export default InfoButton;

package/src/infoButton/styles.module.css

@@ -1,43 +1,43 @@
-:root {
-  --don-info-button-color: var(--rhc-color-hemelblauw-500);
-}
-
-.infoButton {
-  display: grid;
-  place-content: center;
-  padding: 0;
-  margin: 0;
-  appearance: none;
-  cursor: pointer;
-  background: none;
-  border: none;
-}
-
-.defaultColor {
-  color: var(--don-info-button-color, currentColor);
-}
-
-.currentColor {
-  color: currentColor;
-}
-
-.smallSize {
-  svg {
-    width: 1rem;
-    height: 1rem;
-  }
-}
-
-.defaultSize {
-  svg {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-}
-
-.largeSize {
-  svg {
-    width: 2rem;
-    height: 2rem;
-  }
-}
+:root {
+  --don-info-button-color: var(--rhc-color-hemelblauw-500);
+}
+
+.infoButton {
+  display: grid;
+  place-content: center;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.defaultColor {
+  color: var(--don-info-button-color, currentColor);
+}
+
+.currentColor {
+  color: currentColor;
+}
+
+.smallSize {
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+.defaultSize {
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}
+
+.largeSize {
+  svg {
+    width: 2rem;
+    height: 2rem;
+  }
+}

package/src/link/Link.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Icon from "../iconsSprite/Icon";
+import Link from "./Link";
+
+/**
+ * Link is een tekstuele link. `current` markeert de link als de huidige
+ * pagina (`aria-current`), `inline` past de RHC-inline-stijl toe.
+ */
+const meta = {
+  title: "Components/Link",
+  component: Link,
+  tags: ["autodocs", "re-export"],
+  args: {
+    href: "https://developer.overheid.nl",
+    children: "developer.overheid.nl",
+  },
+} satisfies Meta<typeof Link>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const OpensInNewTab: Story = {
+  name: "Opent in nieuw tabblad",
+  args: {
+    target: "_blank",
+    rel: "noopener noreferrer",
+    children: (
+      <>
+        developer.overheid.nl
+        <Icon name="externe-link-inline" aria-label="Externe link naar" />
+      </>
+    ),
+  },
+};
+
+export const Inline: Story = {
+  args: {
+    inline: true,
+  },
+};
+
+export const Current: Story = {
+  name: "Huidige pagina",
+  args: {
+    current: "page",
+  },
+};

package/src/link/Link.tsx

@@ -1,10 +1,10 @@
-import {
-  type LinkProps,
-  Link as RHCLink,
-} from "@rijkshuisstijl-community/components-react";
-
-const Link = (props: LinkProps) => {
-  return <RHCLink {...props} />;
-};
-
-export default Link;
+import {
+  type LinkProps,
+  Link as RHCLink,
+} from "@rijkshuisstijl-community/components-react";
+
+const Link = (props: LinkProps) => {
+  return <RHCLink {...props} />;
+};
+
+export default Link;

package/src/markdown/Markdown.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Markdown from "./Markdown";
+
+const sampleText = `## Over deze API
+
+Deze API biedt toegang tot **adresgegevens** uit de BAG.
+
+- Adressen
+- Panden
+- Verblijfsobjecten
+
+Lees meer op [de documentatie](https://developer.overheid.nl).`;
+
+/**
+ * Markdown rendert `text` (of een string-`children`) via `react-markdown`.
+ * Kopniveaus worden verschoven zodat het hoogste niveau nooit dieper is dan
+ * `minHeadingDepth` (standaard 2), `openLinksInNewTab` opent links in een
+ * nieuw tabblad, en `allowedElements` beperkt welke elementen gerenderd
+ * worden.
+ */
+const meta = {
+  title: "Components/Markdown",
+  component: Markdown,
+  tags: ["autodocs", "custom"],
+  args: {
+    text: sampleText,
+  },
+} satisfies Meta<typeof Markdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const OpenLinksInNewTab: Story = {
+  args: {
+    openLinksInNewTab: true,
+  },
+};
+
+export const RestrictedElements: Story = {
+  name: "Beperkte elementen (bijv. kaartbeschrijving)",
+  args: {
+    text: "API voor het zoeken en raadplegen van adressen, panden, verblijfsobjecten en gerelateerde gegevens uit de BAG.\n\nLees meer op [de documentatie](https://developer.overheid.nl).",
+    allowedElements: ["p", "a", "ul", "ol", "li"],
+    openLinksInNewTab: true,
+  },
+};

package/src/markdown/Markdown.tsx

@@ -1,42 +1,42 @@
-import ReactMarkdown, { type Components, type Options } from "react-markdown";
-import remarkBehead from "remark-behead";
-
-export type HeadingLevels = 0 | 1 | 2 | 3 | 4 | 5;
-export interface MarkdownProps extends Readonly<Options> {
-  text?: string;
-  openLinksInNewTab?: boolean;
-  minHeadingDepth?: HeadingLevels;
-}
-
-export default function Markdown(options: MarkdownProps) {
-  const {
-    children,
-    text,
-    openLinksInNewTab = false,
-    minHeadingDepth = 2,
-    ...restOptions
-  } = options;
-
-  const mdText = text || (typeof children === "string" ? children : "");
-
-  const linkAttrs = openLinksInNewTab
-    ? { target: "_blank", rel: "noopener noreferrer" }
-    : {};
-  const components: Components = {
-    a: ({ node, ...props }) => (
-      <a {...props} {...linkAttrs} className="moveAbove" />
-    ),
-  };
-
-  return (
-    <ReactMarkdown
-      /* biome-ignore lint/correctness/noChildrenProp: TODO: make sure other way is works */
-      children={mdText}
-      components={components}
-      skipHtml={true}
-      unwrapDisallowed={true}
-      remarkPlugins={[[remarkBehead, { minDepth: minHeadingDepth }]]}
-      {...restOptions}
-    />
-  );
-}
+import ReactMarkdown, { type Components, type Options } from "react-markdown";
+import remarkBehead from "remark-behead";
+
+export type HeadingLevels = 0 | 1 | 2 | 3 | 4 | 5;
+export interface MarkdownProps extends Readonly<Options> {
+  text?: string;
+  openLinksInNewTab?: boolean;
+  minHeadingDepth?: HeadingLevels;
+}
+
+export default function Markdown(options: MarkdownProps) {
+  const {
+    children,
+    text,
+    openLinksInNewTab = false,
+    minHeadingDepth = 2,
+    ...restOptions
+  } = options;
+
+  const mdText = text || (typeof children === "string" ? children : "");
+
+  const linkAttrs = openLinksInNewTab
+    ? { target: "_blank", rel: "noopener noreferrer" }
+    : {};
+  const components: Components = {
+    a: ({ node, ...props }) => (
+      <a {...props} {...linkAttrs} className="moveAbove" />
+    ),
+  };
+
+  return (
+    <ReactMarkdown
+      /* biome-ignore lint/correctness/noChildrenProp: TODO: make sure other way is works */
+      children={mdText}
+      components={components}
+      skipHtml={true}
+      unwrapDisallowed={true}
+      remarkPlugins={[[remarkBehead, { minDepth: minHeadingDepth }]]}
+      {...restOptions}
+    />
+  );
+}