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

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.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,106 +1,107 @@
-// 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 BadgeListProps,
-  default as BadgeList,
-} from "./badgeList/BadgeList";
-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 FacetFilters,
-  type FacetFiltersProps,
-  type FilterData,
-  getSelectedFilters,
-} from "./facetFilters/FacetFilters";
-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 FormFieldCheckboxGroup } from "./formFieldCheckboxGroup/FormFieldCheckboxGroup";
-export { default as FormFieldCheckboxOption } from "./formFieldCheckboxOption/FormFieldCheckboxOption";
-export { default as FormFieldLabel } from "./formFieldLabel/FormFieldLabel";
-export { default as FormFieldRadioGroup } from "./formFieldRadioGroup/FormFieldRadioGroup";
-export { default as FormFieldRadioOption } from "./formFieldRadioOption/FormFieldRadioOption";
-export { default as FormFieldSwitch } from "./formFieldSwitch/FormFieldSwitch";
-export { default as FormFieldTextInput } from "./formFieldTextInput/FormFieldTextInput";
-export { default as Header, type HeaderProps } from "./header/Header";
-export {
-  clampHeadingLevel,
-  default as Heading,
-  type HeadingProps,
-} 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 InfoButton,
-  type InfoButtonProps,
-} from "./infoButton/InfoButton";
-export { default as Link } from "./link/Link";
-export {
-  default as Markdown,
-  type HeadingLevels,
-  type MarkdownProps,
-} from "./markdown/Markdown";
-export { default as Overlay } from "./overlay/Overlay";
-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 Switch, type SwitchProps } from "./switch/Switch";
-export { default as ToolTip } from "./toolTip/ToolTip";
-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 BadgeListProps,
+  default as BadgeList,
+} from "./badgeList/BadgeList";
+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 FacetFilters,
+  type FacetFiltersProps,
+  type FilterData,
+  getSelectedFilters,
+  getSelectedFiltersMap,
+} from "./facetFilters/FacetFilters";
+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 FormFieldCheckboxGroup } from "./formFieldCheckboxGroup/FormFieldCheckboxGroup";
+export { default as FormFieldCheckboxOption } from "./formFieldCheckboxOption/FormFieldCheckboxOption";
+export { default as FormFieldLabel } from "./formFieldLabel/FormFieldLabel";
+export { default as FormFieldRadioGroup } from "./formFieldRadioGroup/FormFieldRadioGroup";
+export { default as FormFieldRadioOption } from "./formFieldRadioOption/FormFieldRadioOption";
+export { default as FormFieldSwitch } from "./formFieldSwitch/FormFieldSwitch";
+export { default as FormFieldTextInput } from "./formFieldTextInput/FormFieldTextInput";
+export { default as Header, type HeaderProps } from "./header/Header";
+export {
+  clampHeadingLevel,
+  default as Heading,
+  type HeadingProps,
+} 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 InfoButton,
+  type InfoButtonProps,
+} from "./infoButton/InfoButton";
+export { default as Link } from "./link/Link";
+export {
+  default as Markdown,
+  type HeadingLevels,
+  type MarkdownProps,
+} from "./markdown/Markdown";
+export { default as Overlay } from "./overlay/Overlay";
+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 Switch, type SwitchProps } from "./switch/Switch";
+export { default as ToolTip } from "./toolTip/ToolTip";
+export {
+  default as TopNavigation,
+  type NavBarItem,
+  processNavBarItems,
+  type TopNavigationProps,
+} from "./topNavigation/TopNavigation";

package/src/infoButton/InfoButton.tsx

@@ -1,45 +1,45 @@
-import clsx from "clsx";
-import type { ButtonHTMLAttributes, HTMLProps } from "react";
-import Icon from "../iconsSprite/Icon";
-import styles from "./styles.module.css";
-
-export interface InfoButtonProps extends HTMLProps<HTMLButtonElement> {
-  iconSize?: "small" | "default" | "large";
-  iconColor?: "default" | "current";
-  type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
-  commandfor?: string;
-  command?:
-    | "show-modal"
-    | "close"
-    | "request-close"
-    | "show-popover"
-    | "hide-popover"
-    | "toggle-popover"
-    | `--${string}`;
-  interestfor?: string;
-}
-
-const InfoButton = (props: InfoButtonProps) => {
-  const {
-    iconSize = "default",
-    iconColor = "default",
-    type = "button",
-    ...restProps
-  } = props;
-
-  return (
-    <button
-      className={clsx(
-        styles.infoButton,
-        styles[`${iconSize}Size`],
-        styles[`${iconColor}Color`],
-      )}
-      type={type}
-      {...restProps}
-    >
-      <Icon name="info" />
-    </button>
-  );
-};
-
-export default InfoButton;
+import clsx from "clsx";
+import type { ButtonHTMLAttributes, HTMLProps } from "react";
+import Icon from "../iconsSprite/Icon";
+import styles from "./styles.module.css";
+
+export interface InfoButtonProps extends HTMLProps<HTMLButtonElement> {
+  iconSize?: "small" | "default" | "large";
+  iconColor?: "default" | "current";
+  type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+  commandfor?: string;
+  command?:
+    | "show-modal"
+    | "close"
+    | "request-close"
+    | "show-popover"
+    | "hide-popover"
+    | "toggle-popover"
+    | `--${string}`;
+  interestfor?: string;
+}
+
+const InfoButton = (props: InfoButtonProps) => {
+  const {
+    iconSize = "default",
+    iconColor = "default",
+    type = "button",
+    ...restProps
+  } = props;
+
+  return (
+    <button
+      className={clsx(
+        styles.infoButton,
+        styles[`${iconSize}Size`],
+        styles[`${iconColor}Color`],
+      )}
+      type={type}
+      {...restProps}
+    >
+      <Icon name="info" />
+    </button>
+  );
+};
+
+export default InfoButton;

package/src/infoButton/styles.module.css

@@ -1,43 +1,43 @@
-:root {
-  --don-info-button-color: var(--rhc-color-hemelblauw-500);
-}
-
-.infoButton {
-  display: grid;
-  place-content: center;
-  padding: 0;
-  margin: 0;
-  appearance: none;
-  cursor: pointer;
-  background: none;
-  border: none;
-}
-
-.defaultColor {
-  color: var(--don-info-button-color, currentColor);
-}
-
-.currentColor {
-  color: currentColor;
-}
-
-.smallSize {
-  svg {
-    width: 1rem;
-    height: 1rem;
-  }
-}
-
-.defaultSize {
-  svg {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-}
-
-.largeSize {
-  svg {
-    width: 2rem;
-    height: 2rem;
-  }
-}
+:root {
+  --don-info-button-color: var(--rhc-color-hemelblauw-500);
+}
+
+.infoButton {
+  display: grid;
+  place-content: center;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.defaultColor {
+  color: var(--don-info-button-color, currentColor);
+}
+
+.currentColor {
+  color: currentColor;
+}
+
+.smallSize {
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+.defaultSize {
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}
+
+.largeSize {
+  svg {
+    width: 2rem;
+    height: 2rem;
+  }
+}