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

package/src/facetFilters/styles.module.css

@@ -1,3 +1,3 @@
-.facet {
-  margin-block-end: 0.5rem;
-}
+.facet {
+  margin-block-end: 0.5rem;
+}

package/src/fieldset/FieldSet.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FieldSet from "./FieldSet";
+
+/**
+ * FieldSet groepeert gerelateerde formuliervelden onder een gezamenlijke
+ * legenda (`legend`), met ondersteuning voor een sectie-variant en een
+ * disabled- of invalid-status.
+ */
+const meta = {
+  title: "Components/Form/FieldSet",
+  component: FieldSet,
+  tags: ["autodocs", "re-export"],
+  args: {
+    legend: "Contactgegevens",
+    children: "Veldinhoud van de fieldset.",
+  },
+  argTypes: {
+    disabled: { control: "boolean" },
+    invalid: { control: "boolean" },
+    section: { control: "boolean" },
+  },
+} satisfies Meta<typeof FieldSet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Section: Story = {
+  args: {
+    section: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    invalid: true,
+  },
+};

package/src/fieldset/FieldSet.tsx

@@ -1,3 +1,3 @@
-import { Fieldset } from "@rijkshuisstijl-community/components-react";
-
-export default Fieldset;
+import { Fieldset } from "@rijkshuisstijl-community/components-react";
+
+export default Fieldset;

package/src/filters/Filters.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Filters from "./Filters";
+
+const routing = {
+  url: "https://developer.overheid.nl/apis",
+  query: { organisation: "kadaster" },
+};
+
+const organisations = [
+  { uri: "kadaster", label: "Kadaster" },
+  { uri: "geonovum", label: "Geonovum" },
+  { uri: "logius", label: "Logius" },
+];
+
+/**
+ * Filters toont een lijst van organisaties als navigatielinks en markeert de
+ * organisatie uit de `routing`-query als actief filter.
+ *
+ * Verouderd: gebruik `FacetFilters` in plaats van dit component.
+ */
+const meta = {
+  title: "Components/Filters",
+  component: Filters,
+  tags: ["autodocs", "custom", "deprecated"],
+  args: {
+    data: organisations,
+    headers: {},
+    error: null,
+    routing,
+  },
+} satisfies Meta<typeof Filters>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithError: Story = {
+  args: {
+    data: [],
+    error: { message: "Kan filters niet laden." },
+    status: 500,
+    statusText: "Internal Server Error",
+  },
+};

package/src/filters/Filters.tsx

@@ -1,116 +1,116 @@
-// 'use client';
-/* biome-ignore-all lint: TODO: filters needs a refactor anyway */
-
-import {
-  Heading,
-  LinkList,
-  LinkListLink,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import type { HTMLProps, PropsWithChildren } from "react";
-import { I18nextProvider, useTranslation } from "react-i18next";
-import Alert from "../alert/Alert";
-import DataBadgeLink from "../dataBadgeLink/DataBadgeLink";
-import i18n from "../i18n";
-import Icon from "../iconsSprite/Icon";
-import styles from "./styles.module.css";
-
-export interface FiltersProps extends HTMLProps<HTMLDivElement> {
-  routing?: Record<string, any>;
-  data: any;
-  headers: any;
-  error: any;
-  status?: number;
-  statusText?: string;
-}
-
-const ListLinkIcon = ({ isActive }: { isActive: boolean }) => {
-  return (
-    <Icon
-      className={clsx([styles.icon, isActive && styles.active])}
-      name={isActive ? "active" : "delta-naar-rechts-inline"}
-    />
-  );
-};
-
-/**
- * @deprecated Use FacetFilters component. This component will be removed in a later version.
- */
-const Filters = (props: PropsWithChildren<FiltersProps>) => {
-  const { t } = useTranslation();
-  const { data, error, status, statusText, className, routing } = props;
-  const organisations = data && !data.message ? data : [];
-  const currentOrganisation =
-    organisations &&
-    organisations.find((org: any) => org?.uri === routing?.query?.organisation);
-
-  return (
-    <div className={clsx([styles.filters, className])}>
-      {currentOrganisation && (
-        <div
-          className={clsx("utrecht-badge-list", styles.currentFilter)}
-          role="list"
-        >
-          <Heading level={2} appearanceLevel={3}>
-            {t("components.current-filters")}
-          </Heading>
-          <DataBadgeLink
-            role="listitem"
-            aria-pressed={null}
-            helperText={t("components.remove-filter")}
-            icon={<Icon name="kruis-inline" />}
-            href={new URL(`../`, routing?.url).toString()}
-          >
-            {styles.badgeLink}
-            {currentOrganisation?.label}
-          </DataBadgeLink>
-        </div>
-      )}
-      <Heading level={2} appearanceLevel={3}>
-        {t("components.filter-by", { type: "organisatie" })}
-      </Heading>
-      <LinkList>
-        {organisations &&
-          organisations.map((organisation: any) => (
-            <LinkListLink
-              className={clsx([
-                organisation.uri === routing?.query?.organisation &&
-                  styles.active,
-              ])}
-              key={organisation.uri}
-              href={new URL(
-                `../?organisation=${organisation.uri}`,
-                routing?.url,
-              ).toString()}
-              icon={
-                <ListLinkIcon
-                  isActive={organisation.uri === routing?.query?.organisation}
-                />
-              }
-            >
-              {organisation.label}
-            </LinkListLink>
-          ))}
-      </LinkList>
-
-      {error && (
-        <Alert type="error">
-          {(error as unknown as any).message ||
-            (error as unknown as any).error_msg ||
-            `${status}: ${statusText}` ||
-            t("components.fuzz-error")}
-        </Alert>
-      )}
-    </div>
-  );
-};
-
-const TranslatedFilters = (props: PropsWithChildren<FiltersProps>) => {
-  return (
-    <I18nextProvider i18n={i18n}>
-      <Filters {...props} />
-    </I18nextProvider>
-  );
-};
-
-export default TranslatedFilters;
+// 'use client';
+/* biome-ignore-all lint: TODO: filters needs a refactor anyway */
+
+import {
+  Heading,
+  LinkList,
+  LinkListLink,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import type { HTMLProps, PropsWithChildren } from "react";
+import { I18nextProvider, useTranslation } from "react-i18next";
+import Alert from "../alert/Alert";
+import DataBadgeLink from "../dataBadgeLink/DataBadgeLink";
+import i18n from "../i18n";
+import Icon from "../iconsSprite/Icon";
+import styles from "./styles.module.css";
+
+export interface FiltersProps extends HTMLProps<HTMLDivElement> {
+  routing?: Record<string, any>;
+  data: any;
+  headers: any;
+  error: any;
+  status?: number;
+  statusText?: string;
+}
+
+const ListLinkIcon = ({ isActive }: { isActive: boolean }) => {
+  return (
+    <Icon
+      className={clsx([styles.icon, isActive && styles.active])}
+      name={isActive ? "active" : "delta-naar-rechts-inline"}
+    />
+  );
+};
+
+/**
+ * @deprecated Use FacetFilters component. This component will be removed in a later version.
+ */
+const Filters = (props: PropsWithChildren<FiltersProps>) => {
+  const { t } = useTranslation();
+  const { data, error, status, statusText, className, routing } = props;
+  const organisations = data && !data.message ? data : [];
+  const currentOrganisation =
+    organisations &&
+    organisations.find((org: any) => org?.uri === routing?.query?.organisation);
+
+  return (
+    <div className={clsx([styles.filters, className])}>
+      {currentOrganisation && (
+        <div
+          className={clsx("utrecht-badge-list", styles.currentFilter)}
+          role="list"
+        >
+          <Heading level={2} appearanceLevel={3}>
+            {t("components.current-filters")}
+          </Heading>
+          <DataBadgeLink
+            role="listitem"
+            aria-pressed={null}
+            helperText={t("components.remove-filter")}
+            icon={<Icon name="kruis-inline" />}
+            href={new URL(`../`, routing?.url).toString()}
+          >
+            {styles.badgeLink}
+            {currentOrganisation?.label}
+          </DataBadgeLink>
+        </div>
+      )}
+      <Heading level={2} appearanceLevel={3}>
+        {t("components.filter-by", { type: "organisatie" })}
+      </Heading>
+      <LinkList>
+        {organisations &&
+          organisations.map((organisation: any) => (
+            <LinkListLink
+              className={clsx([
+                organisation.uri === routing?.query?.organisation &&
+                  styles.active,
+              ])}
+              key={organisation.uri}
+              href={new URL(
+                `../?organisation=${organisation.uri}`,
+                routing?.url,
+              ).toString()}
+              icon={
+                <ListLinkIcon
+                  isActive={organisation.uri === routing?.query?.organisation}
+                />
+              }
+            >
+              {organisation.label}
+            </LinkListLink>
+          ))}
+      </LinkList>
+
+      {error && (
+        <Alert type="error">
+          {(error as unknown as any).message ||
+            (error as unknown as any).error_msg ||
+            `${status}: ${statusText}` ||
+            t("components.fuzz-error")}
+        </Alert>
+      )}
+    </div>
+  );
+};
+
+const TranslatedFilters = (props: PropsWithChildren<FiltersProps>) => {
+  return (
+    <I18nextProvider i18n={i18n}>
+      <Filters {...props} />
+    </I18nextProvider>
+  );
+};
+
+export default TranslatedFilters;

package/src/filters/styles.module.css

@@ -1,26 +1,26 @@
-.filters {
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--rhc-space-200);
-}
-
-.currentFilter {
-  flex-direction: column;
-}
-
-.active {
-  font-weight: bold;
-}
-
-.icon {
-  flex-shrink: 0;
-  transition: transform 0.2s ease-in-out;
-}
-
-:global(.utrecht-link-list__link:hover) .icon:not(.active) {
-  transform: translateX(0.125rem);
-}
-
-.icon.active {
-  transform: scale(1.5);
-}
+.filters {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rhc-space-200);
+}
+
+.currentFilter {
+  flex-direction: column;
+}
+
+.active {
+  font-weight: bold;
+}
+
+.icon {
+  flex-shrink: 0;
+  transition: transform 0.2s ease-in-out;
+}
+
+:global(.utrecht-link-list__link:hover) .icon:not(.active) {
+  transform: translateX(0.125rem);
+}
+
+.icon.active {
+  transform: scale(1.5);
+}

package/src/footer/Footer.stories.tsx

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Footer from "./Footer";
+
+const registersColumn = {
+  title: "Registers",
+  items: [
+    {
+      id: "add-apis",
+      label: "API's toevoegen",
+      href: "/apis/toevoegen",
+    },
+    {
+      id: "add-repositories",
+      label: "Repositories toevoegen",
+      href: "https://oss.developer.overheid.nl/repositories/toevoegen",
+    },
+    {
+      id: "statistics",
+      label: "API-statistieken",
+      href: "https://apis.developer.overheid.nl/api-statistieken",
+    },
+    {
+      id: "api-archive",
+      label: "Sitearchief API-register",
+      href: "https://minbzk.sitearchief.nl/?subsite=devoverheidapis",
+      icon: "_external",
+    },
+  ],
+};
+
+const communityColumn = {
+  title: "Community",
+  items: [
+    {
+      id: "slack",
+      label: "Slack",
+      href: "https://codefornl.slack.com/archives/CFV4B3XE2",
+      icon: "_external",
+    },
+    {
+      id: "github",
+      label: "Github",
+      href: "https://github.com/developer-overheid-nl",
+      icon: "_external",
+    },
+    {
+      id: "mastodon",
+      label: "Mastodon",
+      href: "https://social.overheid.nl/@developer",
+      icon: "_external",
+    },
+  ],
+};
+
+const overigColumn = {
+  title: "Overig",
+  items: [
+    {
+      id: "bijdragen",
+      label: "Bijdragen",
+      href: "https://developer.overheid.nl/contributing",
+    },
+    {
+      id: "contact",
+      label: "Contact",
+      href: "https://developer.overheid.nl/contact",
+    },
+    {
+      id: "privacy",
+      label: "Privacyverklaring",
+      href: "https://developer.overheid.nl/privacy",
+    },
+    {
+      id: "toegankelijkheid",
+      label: "Toegankelijkheid",
+      href: "https://developer.overheid.nl/toegankelijkheid",
+    },
+  ],
+};
+
+const sponsorsColumn = {
+  title: "Mede mogelijk gemaakt door",
+  text: "Ministerie van BZK, VNG en Forum Standaardisatie.",
+};
+
+/**
+ * De Footer toont de voettekst van de website, met optioneel kolommen met
+ * tekst en/of links.
+ *
+ * ## Wijzigingen tov RHC:
+ * - `background` staat altijd op `primary-outlined`
+ * - `preFooter` staat altijd aan
+ * - Een `columns`-prop (titel, tekst en/of links) in plaats van los
+ *   samengestelde secties
+ */
+const meta = {
+  title: "Components/Footer",
+  component: Footer,
+  tags: ["autodocs", "remixed"],
+  args: {
+    columns: [registersColumn, communityColumn, overigColumn],
+  },
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithSponsorText: Story = {
+  args: {
+    columns: [sponsorsColumn, registersColumn, communityColumn, overigColumn],
+  },
+};
+
+export const SingleColumn: Story = {
+  args: {
+    columns: [registersColumn],
+  },
+};
+
+export const NoColumns: Story = {
+  args: {
+    columns: [],
+  },
+};

package/src/footer/Footer.tsx

@@ -1,76 +1,81 @@
-import {
-  LinkList,
-  LinkListLink,
-  Footer as RHCFooter,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import { type PropsWithChildren, useId } from "react";
-import Heading from "../heading/Heading";
-import Markdown from "../markdown/Markdown";
-import {
-  type NavBarItem,
-  processNavBarItems,
-} from "../topNavigation/TopNavigation";
-import styles from "./styles.module.css";
-
-export interface ColumnProps {
-  title: string;
-  items?: NavBarItem[];
-  text?: string;
-}
-
-export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
-  className?: string;
-  columns?: ColumnProps[];
-}
-
-// TODO: refactor icons together with TopNavigation
-const FooterColumns = (props: ColumnProps) => {
-  const id = useId();
-  const { title, items, text } = props;
-  const processedItems = items && processNavBarItems(items);
-
-  return (
-    <nav className={styles.column} aria-describedby={id}>
-      <Heading level={2} appearanceLevel={5} id={id}>
-        {title}
-      </Heading>
-      {text && <Markdown>{text}</Markdown>}
-      {processedItems && (
-        <LinkList>
-          {processedItems.map((item, index) => (
-            <LinkListLink
-              key={item.id || index}
-              href={item.href}
-              icon={item.icon}
-            >
-              {item.label}
-            </LinkListLink>
-          ))}
-        </LinkList>
-      )}
-    </nav>
-  );
-};
-
-const Footer = (props: PropsWithChildren<FooterProps>) => {
-  const { className, columns, ...restProps } = props;
-  const columnsClass = `numColumns${Math.min(Number(columns?.length), 4)}`;
-
-  return (
-    <RHCFooter
-      className={clsx(className, styles.footer, styles[columnsClass])}
-      background="primary-outlined"
-      preFooter
-      {...restProps}
-    >
-      {columns &&
-        columns.length > 0 &&
-        columns.map((column, index) => (
-          <FooterColumns key={column.title || index} {...column} />
-        ))}
-    </RHCFooter>
-  );
-};
-
-export default Footer;
+import {
+  LinkList,
+  LinkListLink,
+  Footer as RHCFooter,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import { type PropsWithChildren, useId } from "react";
+import Heading from "../heading/Heading";
+import Markdown from "../markdown/Markdown";
+import {
+  type NavBarItem,
+  processNavBarItems,
+} from "../topNavigation/TopNavigation";
+import styles from "./styles.module.css";
+
+/** A column in the footer, with a title and optional text and/or links. */
+export interface ColumnProps {
+  /** Title of the column, shown as a heading. */
+  title: string;
+  /** Navigation links, shown as a list below the title. */
+  items?: NavBarItem[];
+  /** Markdown text, shown below the title (e.g. for sponsor logos). */
+  text?: string;
+}
+
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+  className?: string;
+  /** Columns with a title, text and/or links, shown in the footer. */
+  columns?: ColumnProps[];
+}
+
+// TODO: refactor icons together with TopNavigation
+const FooterColumns = (props: ColumnProps) => {
+  const id = useId();
+  const { title, items, text } = props;
+  const processedItems = items && processNavBarItems(items);
+
+  return (
+    <nav className={styles.column} aria-labelledby={id}>
+      <Heading level={2} appearanceLevel={5} id={id}>
+        {title}
+      </Heading>
+      {text && <Markdown>{text}</Markdown>}
+      {processedItems && (
+        <LinkList>
+          {processedItems.map((item, index) => (
+            <LinkListLink
+              key={item.id || index}
+              href={item.href}
+              icon={item.icon}
+            >
+              {item.label}
+            </LinkListLink>
+          ))}
+        </LinkList>
+      )}
+    </nav>
+  );
+};
+
+const Footer = (props: PropsWithChildren<FooterProps>) => {
+  const { className, columns, ...restProps } = props;
+  const columnsClass = `numColumns${Math.min(Number(columns?.length), 4)}`;
+
+  return (
+    <RHCFooter
+      className={clsx(className, styles.footer, styles[columnsClass])}
+      background="primary-outlined"
+      preFooter
+      {...restProps}
+    >
+      {columns &&
+        columns.length > 0 &&
+        columns.map((column, index) => (
+          <FooterColumns key={column.title || index} {...column} />
+        ))}
+    </RHCFooter>
+  );
+};
+
+export default Footer;