@developer-overheid-nl/don-register-components 1.0.0 → 1.0.1

package/src/heading/Heading.tsx

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

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,24 +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,
-
-  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.tsx

@@ -1,32 +1,32 @@
-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;
-}
-
-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;
+}
+
+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,47 +1,47 @@
-/* biome-ignore-all lint: TODO: needs a refactor maybe */
-type status = "active" | "deprecated" | "sunset" | "retired";
-
-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",
-    })
-  );
-}
-
-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: TODO: needs a refactor maybe */
+type status = "active" | "deprecated" | "sunset" | "retired";
+
+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",
+    })
+  );
+}
+
+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.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 />;
+}

package/src/index.ts

@@ -1,80 +1,80 @@
-// 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 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 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 FormFieldLabel } from "./formFieldLabel/FormFieldLabel";
-export { default as FormFieldTextInput } from "./formFieldTextInput/FormFieldTextInput";
-export { default as Header, type HeaderProps } from "./header/Header";
-export { default as Heading } 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 Link } from "./link/Link";
-export {
-  default as Markdown,
-  type HeadingLevels,
-  type MarkdownProps,
-} from "./markdown/Markdown";
-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 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 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 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 FormFieldLabel } from "./formFieldLabel/FormFieldLabel";
+export { default as FormFieldTextInput } from "./formFieldTextInput/FormFieldTextInput";
+export { default as Header, type HeaderProps } from "./header/Header";
+export { default as Heading } 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 Link } from "./link/Link";
+export {
+  default as Markdown,
+  type HeadingLevels,
+  type MarkdownProps,
+} from "./markdown/Markdown";
+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 TopNavigation,
+  type NavBarItem,
+  processNavBarItems,
+  type TopNavigationProps,
+} from "./topNavigation/TopNavigation";

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;