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

package/src/alignBox/styles.module.css

@@ -1,110 +1,110 @@
-.alignBox {
-  display: flex;
-  inline-size: 100%;
-
-  :global(.no-shrink) {
-    flex-shrink: 0;
-  }
-}
-
-.inline {
-  inline-size: max-content;
-}
-
-.block {
-  inline-size: 100%;
-}
-
-.row {
-  flex-direction: row;
-}
-
-.column {
-  flex-direction: column;
-}
-
-.wrap {
-  flex-wrap: wrap;
-}
-
-.left {
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.center,
-.middle {
-  align-items: center;
-  justify-content: center;
-}
-
-.right {
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.top {
-  align-items: flex-start;
-  justify-content: center;
-}
-
-.bottom {
-  align-items: flex-end;
-  justify-content: center;
-}
-
-.topLeft {
-  align-items: flex-start;
-  justify-content: flex-start;
-}
-
-.topRight {
-  align-items: flex-start;
-  justify-content: flex-end;
-}
-
-.bottomLeft {
-  align-items: flex-end;
-  justify-content: flex-start;
-}
-
-.bottomRight {
-  align-items: flex-end;
-  justify-content: flex-end;
-}
-
-.stretch {
-  align-items: stretch;
-  justify-content: stretch;
-}
-
-.spaceBetween {
-  align-items: center;
-  justify-content: space-between;
-}
-
-.spaceAround {
-  align-items: center;
-  justify-content: space-around;
-}
-
-.spaceEvenly {
-  align-items: center;
-  justify-content: space-evenly;
-}
-
-.gapNone {
-  gap: 0;
-}
-
-.gapSmall {
-  gap: 0.5rem;
-}
-
-.gapMedium {
-  gap: 1rem;
-}
-
-.gapLarge {
-  gap: 2rem;
-}
+.alignBox {
+  display: flex;
+  inline-size: 100%;
+
+  :global(.no-shrink) {
+    flex-shrink: 0;
+  }
+}
+
+.inline {
+  inline-size: max-content;
+}
+
+.block {
+  inline-size: 100%;
+}
+
+.row {
+  flex-direction: row;
+}
+
+.column {
+  flex-direction: column;
+}
+
+.wrap {
+  flex-wrap: wrap;
+}
+
+.left {
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.center,
+.middle {
+  align-items: center;
+  justify-content: center;
+}
+
+.right {
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.top {
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.bottom {
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.topLeft {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.topRight {
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+.bottomLeft {
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+
+.bottomRight {
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.stretch {
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+.spaceBetween {
+  align-items: center;
+  justify-content: space-between;
+}
+
+.spaceAround {
+  align-items: center;
+  justify-content: space-around;
+}
+
+.spaceEvenly {
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.gapNone {
+  gap: 0;
+}
+
+.gapSmall {
+  gap: 0.5rem;
+}
+
+.gapMedium {
+  gap: 1rem;
+}
+
+.gapLarge {
+  gap: 2rem;
+}

package/src/amountLabel/AmountLabel.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import AmountLabel from "./AmountLabel";
+
+/**
+ * Toont een label met optioneel een aantal tussen haakjes, bijvoorbeeld
+ * "Kadaster (12)". Wordt onder andere gebruikt als label voor filteropties
+ * (checkboxes, radio's en switches) om het aantal resultaten te tonen.
+ */
+const meta = {
+  title: "Components/Form/FormFieldParts/AmountLabel",
+  component: AmountLabel,
+  tags: ["autodocs", "custom"],
+  args: {
+    label: "API's",
+    amount: 12,
+  },
+} satisfies Meta<typeof AmountLabel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithoutAmount: Story = {
+  args: {
+    amount: undefined,
+  },
+};

package/src/amountLabel/AmountLabel.tsx

@@ -1,16 +1,21 @@
-import type { ReactNode } from "react";
-import styles from "./styles.module.css";
-
-export interface AmountLabelProps {
-  label: ReactNode;
-  amount?: string | number;
-}
-
-const AmountLabel = ({ label, amount }: AmountLabelProps) => (
-  <div className={styles.amountLabel}>
-    <span className={styles.labelText}>{label}</span>&nbsp;
-    {amount ? <span className={styles.amountText}>({amount})</span> : null}
-  </div>
-);
-
-export default AmountLabel;
+import type { ReactNode } from "react";
+import styles from "./styles.module.css";
+
+export interface AmountLabelProps {
+  /** The text or content of the label. */
+  label: ReactNode;
+  /** Optional amount, shown between brackets: `(` and `)`. */
+  amount?: string | number;
+}
+
+/**
+ * Shows a label with optional a amount between brackets
+ */
+const AmountLabel = ({ label, amount }: AmountLabelProps) => (
+  <div className={styles.amountLabel}>
+    <span className={styles.labelText}>{label}</span>&nbsp;
+    {amount ? <span className={styles.amountText}>({amount})</span> : null}
+  </div>
+);
+
+export default AmountLabel;

package/src/amountLabel/styles.module.css

@@ -1,11 +1,11 @@
-.amountLabel {
-  display: inline-block;
-}
-
-.labelText {
-  word-break: break-word;
-}
-
-.amountText {
-  font-size: smaller;
-}
+.amountLabel {
+  display: inline-block;
+}
+
+.labelText {
+  word-break: break-word;
+}
+
+.amountText {
+  font-size: smaller;
+}

package/src/analytics/PiwikPro.tsx

@@ -1,94 +1,94 @@
-"use client";
-
-import PiwikPro, {
-  ContentTracking,
-  CustomEvent,
-  type Dimensions,
-  DownloadAndOutlink,
-  ErrorTracking,
-  SiteSearch,
-} from "@piwikpro/react-piwik-pro";
-import { useEffect } from "react";
-
-declare global {
-  interface Window {
-    _paq: unknown[];
-  }
-}
-
-interface AnalyticsProps {
-  siteId: string;
-  accountAddress: string;
-  dataLayerName?: string;
-  trackJSErrors?: boolean;
-  downloadExtensions?: string[];
-  /**
-   * @deprecated This property is deprecated.
-   */
-  pageTitle?: string;
-  customEvent?: { category?: string; action?: string; name: string };
-  isSearchPage?: boolean;
-  searchObject?: {
-    keyword: string;
-    category?: string;
-    searchCount?: number;
-    dimensions?: Dimensions;
-  };
-}
-
-// Default extra download extensions in addition to the standard ones tracked by Piwik Pro.
-const DOWNLOAD_EXTENSIONS = ["json", "yaml", "yml"];
-
-export default function Analytics(props: AnalyticsProps) {
-  /* const nonce = `n.${Math.random() * 1000000}`; // TODO: replace with nanoid or uuid */
-  const {
-    siteId,
-    accountAddress,
-    dataLayerName,
-    trackJSErrors = true,
-    pageTitle,
-    customEvent,
-    isSearchPage,
-    searchObject,
-  } = props;
-  const downloadExtensions = [
-    ...DOWNLOAD_EXTENSIONS,
-    ...(props.downloadExtensions || []),
-  ];
-
-  if (pageTitle) {
-    console.warn(
-      "The 'pageTitle' property is deprecated and will be removed in future versions.",
-    );
-  }
-
-  PiwikPro.initialize(siteId, accountAddress, {
-    /* nonce, */
-    dataLayerName,
-  });
-
-  DownloadAndOutlink.addDownloadExtensions(downloadExtensions);
-
-  ContentTracking.trackAllContentImpressions();
-  ContentTracking.trackVisibleContentImpressions(true);
-
-  if (trackJSErrors) {
-    ErrorTracking.enableJSErrorTracking();
-  }
-
-  useEffect(() => {
-    if (customEvent) {
-      CustomEvent.trackEvent(
-        customEvent.category || "Pages",
-        customEvent.action || "view",
-        customEvent.name,
-      );
-    }
-    if (isSearchPage && searchObject?.keyword) {
-      const { keyword, category, searchCount, dimensions } = searchObject;
-      SiteSearch.trackSiteSearch(keyword, category, searchCount, dimensions);
-    }
-  }, [customEvent, isSearchPage, searchObject]);
-
-  return null;
-}
+"use client";
+
+import PiwikPro, {
+  ContentTracking,
+  CustomEvent,
+  type Dimensions,
+  DownloadAndOutlink,
+  ErrorTracking,
+  SiteSearch,
+} from "@piwikpro/react-piwik-pro";
+import { useEffect } from "react";
+
+declare global {
+  interface Window {
+    _paq: unknown[];
+  }
+}
+
+interface AnalyticsProps {
+  siteId: string;
+  accountAddress: string;
+  dataLayerName?: string;
+  trackJSErrors?: boolean;
+  downloadExtensions?: string[];
+  /**
+   * @deprecated This property is deprecated.
+   */
+  pageTitle?: string;
+  customEvent?: { category?: string; action?: string; name: string };
+  isSearchPage?: boolean;
+  searchObject?: {
+    keyword: string;
+    category?: string;
+    searchCount?: number;
+    dimensions?: Dimensions;
+  };
+}
+
+// Default extra download extensions in addition to the standard ones tracked by Piwik Pro.
+const DOWNLOAD_EXTENSIONS = ["json", "yaml", "yml"];
+
+export default function Analytics(props: AnalyticsProps) {
+  /* const nonce = `n.${Math.random() * 1000000}`; // TODO: replace with nanoid or uuid */
+  const {
+    siteId,
+    accountAddress,
+    dataLayerName,
+    trackJSErrors = true,
+    pageTitle,
+    customEvent,
+    isSearchPage,
+    searchObject,
+  } = props;
+  const downloadExtensions = [
+    ...DOWNLOAD_EXTENSIONS,
+    ...(props.downloadExtensions || []),
+  ];
+
+  if (pageTitle) {
+    console.warn(
+      "The 'pageTitle' property is deprecated and will be removed in future versions.",
+    );
+  }
+
+  PiwikPro.initialize(siteId, accountAddress, {
+    /* nonce, */
+    dataLayerName,
+  });
+
+  DownloadAndOutlink.addDownloadExtensions(downloadExtensions);
+
+  ContentTracking.trackAllContentImpressions();
+  ContentTracking.trackVisibleContentImpressions(true);
+
+  if (trackJSErrors) {
+    ErrorTracking.enableJSErrorTracking();
+  }
+
+  useEffect(() => {
+    if (customEvent) {
+      CustomEvent.trackEvent(
+        customEvent.category || "Pages",
+        customEvent.action || "view",
+        customEvent.name,
+      );
+    }
+    if (isSearchPage && searchObject?.keyword) {
+      const { keyword, category, searchCount, dimensions } = searchObject;
+      SiteSearch.trackSiteSearch(keyword, category, searchCount, dimensions);
+    }
+  }, [customEvent, isSearchPage, searchObject]);
+
+  return null;
+}

package/src/analytics/index.ts

@@ -1 +1 @@
-export { default as PiwikPro } from "./PiwikPro";
+export { default as PiwikPro } from "./PiwikPro";

package/src/article/Article.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Article from "./Article";
+
+/**
+ * Dit component is er om de breedte van de inhoud ervan te beperken tot de ideale lees-lengte.
+ * Het rendert een HTML `<article>`-element.
+ */
+const meta = {
+  title: "Components/Article",
+  component: Article,
+  tags: ["autodocs", "re-export"],
+  args: {
+    children: "Dit is de inhoud van het artikel.",
+  },
+} satisfies Meta<typeof Article>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const LongText: Story = {
+  name: "Lange tekst (toont de leesbreedte)",
+  args: {
+    children: (
+      <>
+        <p>
+          Het API-register is de centrale plek waar overheidsorganisaties hun
+          API&apos;s registreren, zodat andere overheden, bedrijven en burgers
+          eenvoudig kunnen ontdekken welke API&apos;s beschikbaar zijn. Door
+          API&apos;s te registreren, wordt het makkelijker om hergebruik van
+          gegevens en functionaliteit te stimuleren, in plaats van dat iedere
+          organisatie het wiel opnieuw uitvindt.
+        </p>
+        <p>
+          Elke registratie bevat onder andere de OAS-specificatie, contact- en
+          beheerinformatie, de levensfase van de API (bijvoorbeeld actief,
+          verouderd of uit gebruik genomen) en een verwijzing naar de
+          organisatie die de API beheert. Hierdoor kunnen ontwikkelaars snel
+          inschatten of een API geschikt is voor hun toepassing, zonder eerst
+          contact te hoeven opnemen met de beherende organisatie.
+        </p>
+        <p>
+          Dit component beperkt de breedte van zijn inhoud tot een ideale
+          lees-lengte, ongeacht hoeveel tekst er wordt doorgegeven. Zo blijft
+          een lange, doorlopende tekst goed leesbaar op elk schermformaat, in
+          plaats van dat regels over de volledige breedte van een breed scherm
+          uitrekken.
+        </p>
+      </>
+    ),
+  },
+};

package/src/article/Article.tsx

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

package/src/badgeList/BadgeList.tsx

@@ -1,34 +1,34 @@
-import clsx from "clsx";
-import type { HTMLAttributes } from "react";
-import styles from "./styles.module.css";
-
-export interface BadgeListProps extends HTMLAttributes<HTMLUListElement> {
-  direction?: "row" | "column";
-  table?: boolean;
-}
-
-const BadgeList = (props: BadgeListProps) => {
-  const {
-    direction = "row",
-    table = false,
-    className,
-    children,
-    ...restProps
-  } = props;
-
-  return (
-    <ul
-      className={clsx(
-        styles.badgelist,
-        styles[`badgelist--${direction}`],
-        table && styles[`badgelist--table`],
-        className,
-      )}
-      {...restProps}
-    >
-      {children}
-    </ul>
-  );
-};
-
-export default BadgeList;
+import clsx from "clsx";
+import type { HTMLAttributes } from "react";
+import styles from "./styles.module.css";
+
+export interface BadgeListProps extends HTMLAttributes<HTMLUListElement> {
+  direction?: "row" | "column";
+  table?: boolean;
+}
+
+const BadgeList = (props: BadgeListProps) => {
+  const {
+    direction = "row",
+    table = false,
+    className,
+    children,
+    ...restProps
+  } = props;
+
+  return (
+    <ul
+      className={clsx(
+        styles.badgelist,
+        styles[`badgelist--${direction}`],
+        table && styles[`badgelist--table`],
+        className,
+      )}
+      {...restProps}
+    >
+      {children}
+    </ul>
+  );
+};
+
+export default BadgeList;