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

package/src/grid/styles.module.css

@@ -0,0 +1,24 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(
+      auto-fill,
+      minmax(var(--grid-min-column-width, 8rem), 1fr)
+    );
+  align-items: start;
+}
+
+.gapNone {
+  gap: 0;
+}
+
+.gapSmall {
+  gap: 0.5rem;
+}
+
+.gapMedium {
+  gap: 1rem;
+}
+
+.gapLarge {
+  gap: 2rem;
+}

package/src/header/Header.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Header from "./Header";
+
+/**
+ * Header toont de sitekop met logo en sitetitel. Het link-gedrag van het
+ * logo (`logoLinkBehaviour`) bepaalt of het terugverwijst naar de hoofdsite,
+ * de homepage van deze site, of helemaal geen link is, en houdt daarbij
+ * rekening met of de bezoeker al op de homepage is.
+ */
+const meta = {
+  title: "Components/Header",
+  component: Header,
+  tags: ["autodocs", "custom"],
+  argTypes: {
+    logoLinkBehaviour: {
+      control: "select",
+      options: ["site-home", "main-site", "main-site-on-home", "no-link"],
+    },
+  },
+  args: {
+    titleSite: "API-register",
+    titlePage: "Overzicht",
+    mainSite: {
+      name: "developer.overheid.nl",
+      url: "https://developer.overheid.nl",
+    },
+    urlHomepage: ["/", "/apis/pagina/[...page]"],
+    urlCurrent: "/apis/toevoegen",
+    logoLinkBehaviour: "main-site-on-home",
+  },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const OnHomepage: Story = {
+  args: {
+    urlCurrent: "/",
+  },
+};
+
+export const AlwaysLinkToMainSite: Story = {
+  args: {
+    logoLinkBehaviour: "main-site",
+  },
+};
+
+export const NoLogoLink: Story = {
+  args: {
+    logoLinkBehaviour: "no-link",
+  },
+};

package/src/header/Header.tsx

@@ -1,137 +1,137 @@
-import { Lint } from "@developer-overheid-nl/proprietary";
-import {
-  Heading /*, Link */,
-} from "@rijkshuisstijl-community/components-react";
-import { I18nextProvider, useTranslation } from "react-i18next";
-import i18n from "../i18n";
-import SiteLogo from "../siteLogo/SiteLogo";
-import styles from "./styles.module.css";
-// import { IconDeltaNaarLinksInline } from "../../../../proprietary/icons";
-
-export interface HeaderProps extends LogoNavProps {
-  titleSite: string;
-  titlePage: string;
-}
-
-interface LogoNavProps {
-  mainSite: { name: string; url: string };
-  urlCurrent?: string;
-  /**
-   * routePattern(s) that are considered hompages, e.g. `/`, `/apis`, `/apis/[...pages]`
-   * The first item in the array will be used for the homepage link.
-   *
-   * @type string[]
-   */
-  urlHomepage?: string[];
-  /**
-   * How the link around the logo should behave.
-   * - `no-link`: always no link around the logo
-   * - `site-home`: (default) a link around the logo that links back to this site, no link on hompeage
-   * - `main-site`: a link around the logo that links always back to the main site
-   * - `main-site-on-home`: a link around the logo that links back to this site's homepage, but on the homepage links back to the main site
-   *
-   * Note: translation keys: `components.back-to-homepage-landmark`, ...
-   */
-  logoLinkBehaviour?:
-    | "no-link"
-    | "site-home"
-    | "main-site"
-    | "main-site-on-home";
-}
-
-function LogoNav(props: LogoNavProps) {
-  const { t } = useTranslation();
-  const {
-    mainSite,
-    urlCurrent = "/",
-    urlHomepage = ["/"],
-    logoLinkBehaviour,
-  } = props;
-  let isRoot: boolean = urlHomepage.includes(urlCurrent);
-  let href: string = "/";
-  let landmark: string | undefined;
-  let title: string | undefined;
-
-  switch (logoLinkBehaviour) {
-    case "no-link":
-      isRoot = true;
-      break;
-    case "main-site":
-      isRoot = false;
-      href = mainSite.url;
-      landmark = t("components.back-to-main-site-landmark", {
-        siteName: mainSite.name,
-      });
-      break;
-    case "main-site-on-home":
-      href = isRoot ? mainSite.url : urlHomepage[0] || "/";
-      landmark = isRoot
-        ? t("components.back-to-main-site-landmark", {
-            siteName: mainSite.name,
-          })
-        : t("components.back-to-homepage-landmark");
-      title = isRoot
-        ? t("components.back-to-main-site", { siteName: mainSite.name })
-        : t("components.back-to-homepage");
-      isRoot = false;
-      break;
-    default:
-      href = urlHomepage[0] || "/";
-      landmark = isRoot ? undefined : t("components.back-to-homepage-landmark");
-      break;
-  }
-
-  return landmark ? (
-    <nav aria-label={landmark} title={title}>
-      <SiteLogo isRoot={isRoot} href={href} />
-    </nav>
-  ) : (
-    <div className="nav">
-      <SiteLogo isRoot={isRoot} href={href} />
-    </div>
-  );
-}
-
-function Header({
-  titleSite,
-  titlePage,
-  mainSite,
-  urlCurrent,
-  urlHomepage,
-  logoLinkBehaviour,
-}: HeaderProps) {
-  // const { t } = useTranslation();
-
-  return (
-    <header className={styles.header}>
-      <LogoNav
-        mainSite={mainSite}
-        urlCurrent={urlCurrent}
-        urlHomepage={urlHomepage}
-        logoLinkBehaviour={logoLinkBehaviour}
-      />
-      <Lint className={styles.lint} />
-      <div className={styles.title}>
-        <Heading level={1} appearanceLevel={3} className={styles.heading}>
-          {titleSite}
-          <span className="sr-only">: {titlePage}</span>
-        </Heading>
-        {/* TODO: uncomment and update component if backlink here is still needed... */}
-        {/* <nav aria-label={t('components.back-to-main-site-landmark')}>
-          <Link href={mainSite.url} className={styles.link}>
-            <IconDeltaNaarLinksInline className={styles.icon} /> 
-            {t('components.back-to-main-site', { siteName: mainSite.name })}
-          </Link>
-        </nav> */}
-      </div>
-    </header>
-  );
-}
-
-export default function TranslatedHeader(props: HeaderProps) {
-  return (
-    <I18nextProvider i18n={i18n}>
-      <Header {...props} />
-    </I18nextProvider>
-  );
-}
+import { Lint } from "@developer-overheid-nl/proprietary";
+import {
+  Heading /*, Link */,
+} from "@rijkshuisstijl-community/components-react";
+import { I18nextProvider, useTranslation } from "react-i18next";
+import i18n from "../i18n";
+import SiteLogo from "../siteLogo/SiteLogo";
+import styles from "./styles.module.css";
+// import { IconDeltaNaarLinksInline } from "../../../../proprietary/icons";
+
+export interface HeaderProps extends LogoNavProps {
+  titleSite: string;
+  titlePage: string;
+}
+
+interface LogoNavProps {
+  mainSite: { name: string; url: string };
+  urlCurrent?: string;
+  /**
+   * routePattern(s) that are considered hompages, e.g. `/`, `/apis`, `/apis/[...pages]`
+   * The first item in the array will be used for the homepage link.
+   *
+   * @type string[]
+   */
+  urlHomepage?: string[];
+  /**
+   * How the link around the logo should behave.
+   * - `no-link`: always no link around the logo
+   * - `site-home`: (default) a link around the logo that links back to this site, no link on hompeage
+   * - `main-site`: a link around the logo that links always back to the main site
+   * - `main-site-on-home`: a link around the logo that links back to this site's homepage, but on the homepage links back to the main site
+   *
+   * Note: translation keys: `components.back-to-homepage-landmark`, ...
+   */
+  logoLinkBehaviour?:
+    | "no-link"
+    | "site-home"
+    | "main-site"
+    | "main-site-on-home";
+}
+
+function LogoNav(props: LogoNavProps) {
+  const { t } = useTranslation();
+  const {
+    mainSite,
+    urlCurrent = "/",
+    urlHomepage = ["/"],
+    logoLinkBehaviour,
+  } = props;
+  let isRoot: boolean = urlHomepage.includes(urlCurrent);
+  let href: string = "/";
+  let landmark: string | undefined;
+  let title: string | undefined;
+
+  switch (logoLinkBehaviour) {
+    case "no-link":
+      isRoot = true;
+      break;
+    case "main-site":
+      isRoot = false;
+      href = mainSite.url;
+      landmark = t("components.back-to-main-site-landmark", {
+        siteName: mainSite.name,
+      });
+      break;
+    case "main-site-on-home":
+      href = isRoot ? mainSite.url : urlHomepage[0] || "/";
+      landmark = isRoot
+        ? t("components.back-to-main-site-landmark", {
+            siteName: mainSite.name,
+          })
+        : t("components.back-to-homepage-landmark");
+      title = isRoot
+        ? t("components.back-to-main-site", { siteName: mainSite.name })
+        : t("components.back-to-homepage");
+      isRoot = false;
+      break;
+    default:
+      href = urlHomepage[0] || "/";
+      landmark = isRoot ? undefined : t("components.back-to-homepage-landmark");
+      break;
+  }
+
+  return landmark ? (
+    <nav aria-label={landmark} title={title}>
+      <SiteLogo isRoot={isRoot} href={href} />
+    </nav>
+  ) : (
+    <div className="nav">
+      <SiteLogo isRoot={isRoot} href={href} />
+    </div>
+  );
+}
+
+function Header({
+  titleSite,
+  titlePage,
+  mainSite,
+  urlCurrent,
+  urlHomepage,
+  logoLinkBehaviour,
+}: HeaderProps) {
+  // const { t } = useTranslation();
+
+  return (
+    <header className={styles.header}>
+      <LogoNav
+        mainSite={mainSite}
+        urlCurrent={urlCurrent}
+        urlHomepage={urlHomepage}
+        logoLinkBehaviour={logoLinkBehaviour}
+      />
+      <Lint className={styles.lint} />
+      <div className={styles.title}>
+        <Heading level={1} appearanceLevel={3} className={styles.heading}>
+          {titleSite}
+          <span className="sr-only">: {titlePage}</span>
+        </Heading>
+        {/* TODO: uncomment and update component if backlink here is still needed... */}
+        {/* <nav aria-label={t('components.back-to-main-site-landmark')}>
+          <Link href={mainSite.url} className={styles.link}>
+            <IconDeltaNaarLinksInline className={styles.icon} /> 
+            {t('components.back-to-main-site', { siteName: mainSite.name })}
+          </Link>
+        </nav> */}
+      </div>
+    </header>
+  );
+}
+
+export default function TranslatedHeader(props: HeaderProps) {
+  return (
+    <I18nextProvider i18n={i18n}>
+      <Header {...props} />
+    </I18nextProvider>
+  );
+}

package/src/header/styles.module.css

@@ -1,71 +1,71 @@
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-block: 0 0.5rem;
-
-  > * {
-    flex-basis: 33.3333%;
-  }
-}
-
-@media (--xxs-and-below-viewport) {
-  .header {
-    flex-direction: column;
-
-    > * {
-      flex-basis: auto;
-    }
-  }
-}
-
-@media (--xs-and-below-viewport) {
-  .header {
-    flex-wrap: wrap;
-    row-gap: 0.5rem;
-
-    > * {
-      flex-basis: auto;
-      order: 2;
-    }
-  }
-
-  .lint {
-    flex-basis: 100%;
-    order: 1;
-  }
-}
-
-.title {
-  margin-inline-start: 1rem;
-  text-align: end;
-}
-
-.heading {
-  margin: 0;
-  margin-block-end: 0.5rem;
-}
-
-.icon {
-  inline-size: 0.875rem;
-  block-size: 0.875rem;
-  fill: currentColor;
-  transition: all 0.25s ease-in-out;
-}
-
-.link.link:any-link {
-  align-items: center;
-  text-decoration-line: none;
-  transition: all 0.25s ease-in-out;
-}
-
-.link.link:any-link:hover {
-  text-decoration-line: underline;
-  text-decoration-skip-ink: auto;
-  /* biome-ignore lint/suspicious/noDuplicateProperties: ↰ first skip-ink needed for Chromium browsers, otherwise .nl-link `none` is used */
-  text-decoration-skip-ink: all; /* bugged in Chromium */
-
-  .icon {
-    transform: translateX(-0.0625rem);
-  }
-}
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: 0 0.5rem;
+
+  > * {
+    flex-basis: 33.3333%;
+  }
+}
+
+@media (--xxs-and-below-viewport) {
+  .header {
+    flex-direction: column;
+
+    > * {
+      flex-basis: auto;
+    }
+  }
+}
+
+@media (--xs-and-below-viewport) {
+  .header {
+    flex-wrap: wrap;
+    row-gap: 0.5rem;
+
+    > * {
+      flex-basis: auto;
+      order: 2;
+    }
+  }
+
+  .lint {
+    flex-basis: 100%;
+    order: 1;
+  }
+}
+
+.title {
+  margin-inline-start: 1rem;
+  text-align: end;
+}
+
+.heading {
+  margin: 0;
+  margin-block-end: 0.5rem;
+}
+
+.icon {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+  fill: currentColor;
+  transition: all 0.25s ease-in-out;
+}
+
+.link.link:any-link {
+  align-items: center;
+  text-decoration-line: none;
+  transition: all 0.25s ease-in-out;
+}
+
+.link.link:any-link:hover {
+  text-decoration-line: underline;
+  text-decoration-skip-ink: auto;
+  /* biome-ignore lint/suspicious/noDuplicateProperties: ↰ first skip-ink needed for Chromium browsers, otherwise .nl-link `none` is used */
+  text-decoration-skip-ink: all; /* bugged in Chromium */
+
+  .icon {
+    transform: translateX(-0.0625rem);
+  }
+}

package/src/heading/Heading.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Heading from "./Heading";
+
+const headingLevels = [1, 2, 3, 4, 5] as const;
+
+/**
+ * Headings worden gebruikt voor titels in de tekstuele hiërarchie van de content.
+ * Het rendert een HTML `<h1>`...`<h6>`-element.
+ *
+ * - **level**: wijzigt de HTML-tag naar het overeenkomende niveau.
+ * - **appearanceLevel** (optioneel): verandert het uiterlijk, niet het `level`.
+ */
+const meta = {
+  title: "Components/Heading",
+  component: Heading,
+  tags: ["autodocs", "re-export"],
+  argTypes: {
+    level: {
+      control: "select",
+      options: headingLevels,
+    },
+    appearanceLevel: {
+      control: "select",
+      options: headingLevels,
+    },
+  },
+  args: {
+    level: 1,
+    children: "API-register",
+  },
+} satisfies Meta<typeof Heading>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const DecoupledAppearance: Story = {
+  name: "Semantisch niveau los van weergave",
+  args: {
+    level: 2,
+    appearanceLevel: 5,
+    children: "Organisatie",
+  },
+};
+
+export const AllLevels: Story = {
+  args: {
+    children: "",
+  },
+  render: () => (
+    <>
+      {headingLevels.map((level) => (
+        <Heading key={level} level={level}>
+          Kop niveau {level}
+        </Heading>
+      ))}
+    </>
+  ),
+};

package/src/heading/Heading.tsx

@@ -1,15 +1,15 @@
-import {
-  type HeadingProps,
-  Heading as RHCHeading,
-} from "@rijkshuisstijl-community/components-react";
-
-export type { HeadingProps } from "@rijkshuisstijl-community/components-react";
-
-export const clampHeadingLevel = (headingLevel: number) =>
-  Math.max(1, Math.min(headingLevel + 1, 5)) as HeadingProps["level"];
-
-const Heading = (props: HeadingProps) => {
-  return <RHCHeading {...props} />;
-};
-
-export default Heading;
+import {
+  type HeadingProps,
+  Heading as RHCHeading,
+} from "@rijkshuisstijl-community/components-react";
+
+export type { HeadingProps } from "@rijkshuisstijl-community/components-react";
+
+export const clampHeadingLevel = (headingLevel: number) =>
+  Math.max(1, Math.min(headingLevel, 5)) as HeadingProps["level"];
+
+const Heading = (props: HeadingProps) => {
+  return <RHCHeading {...props} />;
+};
+
+export default Heading;

package/src/headingGroup/HeadingGroup.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import DataBadgeLink from "../dataBadgeLink/DataBadgeLink";
+import HeadingGroup from "./HeadingGroup";
+
+const headingLevels = [1, 2, 3, 4, 5] as const;
+
+/**
+ * HeadingGroup combineert een kop met een optionele subtitel, bijvoorbeeld
+ * de naam van een API met daaronder de beherende organisatie.
+ *
+ * ## Wijzigingen tov RHC:
+ * - Voegt `title`- en `subTitle`-props toe in plaats van losse
+ *   `Heading`/`Paragraph`-children; een string-`subTitle` wordt automatisch
+ *   in een `Paragraph` gezet, andere content (bijv. een badge) direct
+ *   doorgegeven.
+ */
+const meta = {
+  title: "Components/HeadingGroup",
+  component: HeadingGroup,
+  tags: ["autodocs", "remixed"],
+  argTypes: {
+    level: {
+      control: "select",
+      options: headingLevels,
+    },
+    appearanceLevel: {
+      control: "select",
+      options: headingLevels,
+    },
+  },
+  args: {
+    title: "Basisregistratie Adressen en Gebouwen API",
+    level: 2,
+    appearanceLevel: 4,
+  },
+} satisfies Meta<typeof HeadingGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    subTitle: "Kadaster",
+  },
+};
+
+export const WithBadgeSubtitle: Story = {
+  args: {
+    subTitle: (
+      <DataBadgeLink appearance="subtle" href="/apis?organisation=kadaster">
+        Kadaster
+      </DataBadgeLink>
+    ),
+  },
+};
+
+export const WithoutSubtitle: Story = {};