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

package/src/headingGroup/HeadingGroup.tsx

@@ -1,48 +1,48 @@
-import {
-  Heading,
-  type HeadingProps,
-  Paragraph,
-  HeadingGroup as RHCHeadingGroup,
-  type HeadingGroupProps as RHCHeadingGroupProps,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import type { HTMLProps, PropsWithChildren, ReactNode } from "react";
-import styles from "./styles.module.css";
-
-export interface HeadingGroupProps extends RHCHeadingGroupProps {
-  title: string;
-  subTitle?: string | ReactNode;
-  level: HeadingProps["level"];
-  appearanceLevel?: HeadingProps["appearanceLevel"];
-  subTitleProps?: HTMLProps<Paragraph>;
-}
-
-const HeadingGroup = (props: PropsWithChildren<HeadingGroupProps>) => {
-  const {
-    title,
-    subTitle,
-    level,
-    appearanceLevel,
-    className,
-    subTitleProps,
-    children,
-    ...restProps
-  } = props;
-  return (
-    <RHCHeadingGroup
-      className={clsx(className, styles.headingGroup)}
-      {...restProps}
-    >
-      <Heading appearanceLevel={appearanceLevel} level={level}>
-        {title}
-      </Heading>
-      {typeof subTitle === "string" ? (
-        <Paragraph {...subTitleProps}>{subTitle}</Paragraph>
-      ) : (
-        subTitle || children
-      )}
-    </RHCHeadingGroup>
-  );
-};
-
-export default HeadingGroup;
+import {
+  Heading,
+  type HeadingProps,
+  Paragraph,
+  HeadingGroup as RHCHeadingGroup,
+  type HeadingGroupProps as RHCHeadingGroupProps,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import type { HTMLProps, PropsWithChildren, ReactNode } from "react";
+import styles from "./styles.module.css";
+
+export interface HeadingGroupProps extends RHCHeadingGroupProps {
+  title: string;
+  subTitle?: string | ReactNode;
+  level: HeadingProps["level"];
+  appearanceLevel?: HeadingProps["appearanceLevel"];
+  subTitleProps?: HTMLProps<Paragraph>;
+}
+
+const HeadingGroup = (props: PropsWithChildren<HeadingGroupProps>) => {
+  const {
+    title,
+    subTitle,
+    level,
+    appearanceLevel,
+    className,
+    subTitleProps,
+    children,
+    ...restProps
+  } = props;
+  return (
+    <RHCHeadingGroup
+      className={clsx(className, styles.headingGroup)}
+      {...restProps}
+    >
+      <Heading appearanceLevel={appearanceLevel} level={level}>
+        {title}
+      </Heading>
+      {typeof subTitle === "string" ? (
+        <Paragraph {...subTitleProps}>{subTitle}</Paragraph>
+      ) : (
+        subTitle || children
+      )}
+    </RHCHeadingGroup>
+  );
+};
+
+export default HeadingGroup;

package/src/headingGroup/styles.module.css

@@ -1,3 +1,3 @@
-.headingGroup {
-  inline-size: 100%;
-}
+.headingGroup {
+  inline-size: 100%;
+}

package/src/i18n.ts

@@ -1,25 +1,24 @@
-import resources from "@developer-overheid-nl/don-register-locales/nl" with {
-  type: "json",
-};
-import { createInstance, type i18n } from "i18next";
-
-const i18nInstance: i18n = createInstance({
-  lng: "nl",
-  fallbackLng: "nl",
-  // debug: true,
-  showSupportNotice: false,
-
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-  },
-
-  resources: {
-    nl: {
-      translation: resources,
-    },
-  },
-});
-
-i18nInstance.init();
-
-export default i18nInstance;
+import resources from "@developer-overheid-nl/don-register-locales/nl" with {
+  type: "json",
+};
+import { createInstance, type i18n } from "i18next";
+
+const i18nInstance: i18n = createInstance({
+  lng: "nl",
+  fallbackLng: "nl",
+  // debug: true,
+
+  interpolation: {
+    escapeValue: false, // not needed for react as it escapes by default
+  },
+
+  resources: {
+    nl: {
+      translation: resources,
+    },
+  },
+});
+
+i18nInstance.init();
+
+export default i18nInstance;

package/src/iconBadge/IconBadge.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import IconBadge from "./IconBadge";
+
+/**
+ * IconBadge toont een icoon-badge voor een levensfase-status (actief,
+ * verouderd, aflopend of uit gebruik genomen).
+ *
+ * Verouderd: API Register-specifiek en niet meer in gebruik.
+ */
+const meta = {
+  title: "Components/IconBadge",
+  component: IconBadge,
+  tags: ["autodocs", "deprecated", "custom"],
+  argTypes: {
+    name: {
+      control: "select",
+      options: ["active", "deprecated", "sunset", "retired"],
+    },
+  },
+  args: {
+    name: "active",
+  },
+} satisfies Meta<typeof IconBadge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Active: Story = {};
+
+export const Deprecated: Story = {
+  args: {
+    name: "deprecated",
+  },
+};
+
+export const Sunset: Story = {
+  args: {
+    name: "sunset",
+  },
+};
+
+export const Retired: Story = {
+  args: {
+    name: "retired",
+  },
+};

package/src/iconBadge/IconBadge.tsx

@@ -1,35 +1,35 @@
-import clsx from "clsx";
-import type { HTMLProps } from "react";
-import Icon from "../iconsSprite/Icon";
-import styles from "./styles.module.css";
-
-export interface IconBadgeProps extends HTMLProps<HTMLSpanElement> {
-  name: string;
-  appearance?: string;
-}
-
-/**
- * @deprecated API Register specific component (and not used anymore)
- */
-export default function IconBadge(props: IconBadgeProps) {
-  const { className, name, appearance, ...restProps } = props;
-  const iconClassName = `don-icon don-icon-${name} ${className || ""}`.trim();
-
-  return (
-    <span
-      className={clsx(
-        "utrecht-data-badge",
-        `utrecht-data-badge--${appearance || name}`,
-        styles,
-      )}
-      {...restProps}
-    >
-      <Icon
-        width="1.5rem"
-        height="1.5rem"
-        className={`${iconClassName}`}
-        name={name}
-      />
-    </span>
-  );
-}
+import clsx from "clsx";
+import type { HTMLProps } from "react";
+import Icon from "../iconsSprite/Icon";
+import styles from "./styles.module.css";
+
+export interface IconBadgeProps extends HTMLProps<HTMLSpanElement> {
+  name: string;
+  appearance?: string;
+}
+
+/**
+ * @deprecated API Register specific component (and not used anymore)
+ */
+export default function IconBadge(props: IconBadgeProps) {
+  const { className, name, appearance, ...restProps } = props;
+  const iconClassName = `don-icon don-icon-${name} ${className || ""}`.trim();
+
+  return (
+    <span
+      className={clsx(
+        "utrecht-data-badge",
+        `utrecht-data-badge--${appearance || name}`,
+        styles,
+      )}
+      {...restProps}
+    >
+      <Icon
+        width="1.5rem"
+        height="1.5rem"
+        className={`${iconClassName}`}
+        name={name}
+      />
+    </span>
+  );
+}

package/src/iconBadge/getAppearance.ts

@@ -1,53 +1,53 @@
-/* biome-ignore-all lint: is deprecated and refactored */
-type status = "active" | "deprecated" | "sunset" | "retired";
-
-/**
- * @deprecated API Register specific function (moved and refactored to `apps/api-register/src/components/`)
- */
-export function getDate(object?: Partial<Record<"status" | status, any>>) {
-  if (!object) return;
-
-  const keys = Object.keys(object);
-  const statuses: status[] = ["deprecated", "sunset"];
-  let date;
-
-  statuses.forEach((status) => {
-    if (keys.includes(status) && object[status]) {
-      date = object[status];
-    }
-  });
-
-  return (
-    date &&
-    new Date(date).toLocaleDateString("nl-NL", {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-    })
-  );
-}
-
-/**
- * @deprecated API Register specific function (moved and refactored to `apps/api-register/src/components/`)
- */
-export default function getAppearance(
-  object?: Partial<Record<"status" | status, any>>,
-) {
-  if (!object) return;
-
-  const keys = Object.keys(object);
-  const statuses: status[] = ["active", "deprecated", "sunset", "retired"];
-  let appearance;
-
-  statuses.forEach((status) => {
-    if (keys.includes(status) && object[status]) {
-      // If upcoming status is more serious than current status, use that one
-      appearance =
-        statuses.indexOf(status) > statuses.indexOf(object.status)
-          ? status
-          : object.status;
-    }
-  });
-
-  return appearance;
-}
+/* biome-ignore-all lint: is deprecated and refactored */
+type status = "active" | "deprecated" | "sunset" | "retired";
+
+/**
+ * @deprecated API Register specific function (moved and refactored to `apps/api-register/src/components/`)
+ */
+export function getDate(object?: Partial<Record<"status" | status, any>>) {
+  if (!object) return;
+
+  const keys = Object.keys(object);
+  const statuses: status[] = ["deprecated", "sunset"];
+  let date;
+
+  statuses.forEach((status) => {
+    if (keys.includes(status) && object[status]) {
+      date = object[status];
+    }
+  });
+
+  return (
+    date &&
+    new Date(date).toLocaleDateString("nl-NL", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    })
+  );
+}
+
+/**
+ * @deprecated API Register specific function (moved and refactored to `apps/api-register/src/components/`)
+ */
+export default function getAppearance(
+  object?: Partial<Record<"status" | status, any>>,
+) {
+  if (!object) return;
+
+  const keys = Object.keys(object);
+  const statuses: status[] = ["active", "deprecated", "sunset", "retired"];
+  let appearance;
+
+  statuses.forEach((status) => {
+    if (keys.includes(status) && object[status]) {
+      // If upcoming status is more serious than current status, use that one
+      appearance =
+        statuses.indexOf(status) > statuses.indexOf(object.status)
+          ? status
+          : object.status;
+    }
+  });
+
+  return appearance;
+}

package/src/iconBadge/styles.module.css

@@ -1,19 +1,19 @@
-:global(.utrecht-data-badge--active) {
-  --utrecht-data-badge-background-color: var(--rhc-color-groen-100);
-  --utrecht-data-badge-color: var(--rhc-color-groen-500);
-}
-
-:global(.utrecht-data-badge--deprecated) {
-  --utrecht-data-badge-background-color: var(--rhc-color-donkergeel-100);
-  --utrecht-data-badge-color: var(--rhc-color-donkergeel-500);
-}
-
-:global(.utrecht-data-badge--sunset) {
-  --utrecht-data-badge-background-color: var(--rhc-color-oranje-100);
-  --utrecht-data-badge-color: var(--rhc-color-oranje-500);
-}
-
-:global(.utrecht-data-badge--retired) {
-  --utrecht-data-badge-background-color: var(--rhc-color-rood-100);
-  --utrecht-data-badge-color: var(--rhc-color-rood-500);
-}
+:global(.utrecht-data-badge--active) {
+  --utrecht-data-badge-background-color: var(--rhc-color-groen-100);
+  --utrecht-data-badge-color: var(--rhc-color-groen-500);
+}
+
+:global(.utrecht-data-badge--deprecated) {
+  --utrecht-data-badge-background-color: var(--rhc-color-donkergeel-100);
+  --utrecht-data-badge-color: var(--rhc-color-donkergeel-500);
+}
+
+:global(.utrecht-data-badge--sunset) {
+  --utrecht-data-badge-background-color: var(--rhc-color-oranje-100);
+  --utrecht-data-badge-color: var(--rhc-color-oranje-500);
+}
+
+:global(.utrecht-data-badge--retired) {
+  --utrecht-data-badge-background-color: var(--rhc-color-rood-100);
+  --utrecht-data-badge-color: var(--rhc-color-rood-500);
+}

package/src/iconsSprite/Icon.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import AlignBox from "../alignBox/AlignBox";
+import Grid from "../grid/Grid";
+import Icon from "./Icon";
+
+const iconNames = [
+  "externe-link-inline",
+  "plus-cirkel-inline",
+  "kruis-inline",
+  "delta-naar-rechts-inline",
+  "active",
+  "deprecated",
+  "retired",
+  "sunset",
+  "kopieer-inline",
+  "zoek-inline",
+  "info",
+  "trechter",
+  "git-fork-inline",
+  "variant-fork-inline",
+  "lade-archiefkast",
+];
+
+/**
+ * Icon rendert een icoon uit de sprite door middel van `name`, via een
+ * `<svg><use></use></svg>`-referentie naar `#icon-{name}`. Vereist dat
+ * `IconsSprite` ergens in het document is gerenderd, bijvoorbeeld eenmalig
+ * in de layout:
+ *
+ * ```tsx
+ * import { IconsSprite } from "@developer-overheid-nl/don-register-components";
+ *
+ * <IconsSprite />
+ * ```
+ *
+ * In Storybook gebeurt dit al globaal, via een decorator in
+ * `.storybook/preview.tsx`.
+ */
+const meta = {
+  title: "Components/Icon",
+  component: Icon,
+  tags: ["autodocs", "custom"],
+  args: {
+    name: "info",
+    "aria-label": "Info",
+  },
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const AllIcons: Story = {
+  name: "Alle iconen in de sprite",
+  decorators: [
+    (Story) => (
+      <Grid minColumnWidth="6rem" gap="medium">
+        <Story />
+      </Grid>
+    ),
+  ],
+  render: () => (
+    <>
+      {iconNames.map((name) => (
+        <AlignBox key={name} direction="column" gap="small">
+          <Icon name={name} aria-label={name} width="2rem" height="2rem" />
+          <code>{name}</code>
+        </AlignBox>
+      ))}
+    </>
+  ),
+};

package/src/iconsSprite/Icon.tsx

@@ -1,17 +1,17 @@
-export default function Icon(props: React.HTMLProps<SVGSVGElement>) {
-  const { className, name, ...restProps } = props;
-  const iconClassName = `don-icon don-icon-${name} ${className || ""}`.trim();
-
-  return (
-    <svg
-      width="1rem"
-      height="1rem"
-      className={`${iconClassName}`}
-      role={props.role || "img"}
-      aria-label={props["aria-label"]}
-      {...restProps}
-    >
-      <use href={`#icon-${name}`} />
-    </svg>
-  );
-}
+export default function Icon(props: React.HTMLProps<SVGSVGElement>) {
+  const { className, name, ...restProps } = props;
+  const iconClassName = `don-icon don-icon-${name} ${className || ""}`.trim();
+
+  return (
+    <svg
+      width="1rem"
+      height="1rem"
+      className={`${iconClassName}`}
+      role={props.role || "img"}
+      aria-label={props["aria-label"]}
+      {...restProps}
+    >
+      <use href={`#icon-${name}`} />
+    </svg>
+  );
+}

package/src/iconsSprite/IconsSprite.tsx

@@ -1,5 +1,5 @@
-import { Sprite } from "@developer-overheid-nl/proprietary/icons";
-
-export default function IconsSprite() {
-  return <Sprite />;
-}
+import { Sprite } from "@developer-overheid-nl/proprietary/icons";
+
+export default function IconsSprite() {
+  return <Sprite />;
+}