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

package/src/formFieldCheckboxGroup/FormFieldCheckboxGroup.tsx

@@ -0,0 +1,16 @@
+import {
+  type FormFieldCheckboxGroupProps,
+  FormFieldCheckboxGroup as RHCFormFieldCheckboxGroup,
+} from "@rijkshuisstijl-community/components-react";
+import styles from "./styles.module.css";
+
+const FormFieldCheckboxGroup = (props: FormFieldCheckboxGroupProps) => {
+  return (
+    <RHCFormFieldCheckboxGroup
+      className={styles.formFieldCheckboxGroup}
+      {...props}
+    />
+  );
+};
+
+export default FormFieldCheckboxGroup;

package/src/formFieldCheckboxGroup/styles.module.css

@@ -0,0 +1,5 @@
+.formFieldCheckboxGroup {
+  :global(& > .utrecht-form-field__label) {
+    display: none;
+  }
+}

package/src/formFieldCheckboxOption/FormFieldCheckboxOption.tsx

@@ -0,0 +1,26 @@
+import {
+  FormFieldCheckboxOption as RHCFormFieldCheckboxOption,
+  type FormFieldCheckboxOptionProps as RHCFormFieldCheckboxOptionProps,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import AmountLabel, { type AmountLabelProps } from "../amountLabel/AmountLabel";
+import styles from "./styles.module.css";
+
+export interface FormFieldCheckboxOptionProps
+  extends Omit<RHCFormFieldCheckboxOptionProps, "label">,
+    AmountLabelProps {}
+
+const FormFieldCheckboxOption = (props: FormFieldCheckboxOptionProps) => {
+  const { amount, label, className, children, ...restProps } = props;
+  return (
+    <RHCFormFieldCheckboxOption
+      className={clsx(styles.checkbox, className)}
+      label={<AmountLabel label={label} amount={amount} />}
+      {...restProps}
+    >
+      <span className={styles.info}>{children}</span>
+    </RHCFormFieldCheckboxOption>
+  );
+};
+
+export default FormFieldCheckboxOption;

package/src/formFieldCheckboxOption/styles.module.css

@@ -0,0 +1,22 @@
+.checkbox.checkbox {
+  --utrecht-form-field-label-margin-block-end: 0;
+
+  grid-template-areas:
+    'input label info'
+    'input description description'
+    'input error-message error-message'
+    'input status status';
+
+  :global(.utrecht-form-label) {
+    display: flex;
+  }
+
+  :global(.utrecht-checkbox) {
+    order: initial;
+    margin-block-start: 0;
+  }
+}
+
+.info {
+  grid-area: info;
+}

package/src/formFieldRadioGroup/FormFieldRadioGroup.tsx

@@ -0,0 +1,13 @@
+import {
+  type FormFieldRadioGroupProps,
+  FormFieldRadioGroup as RHCFormFieldRadioGroup,
+} from "@rijkshuisstijl-community/components-react";
+import styles from "./styles.module.css";
+
+const FormFieldRadioGroup = (props: FormFieldRadioGroupProps) => {
+  return (
+    <RHCFormFieldRadioGroup className={styles.formFieldRadioGroup} {...props} />
+  );
+};
+
+export default FormFieldRadioGroup;

package/src/formFieldRadioGroup/styles.module.css

@@ -0,0 +1,5 @@
+.formFieldRadioGroup {
+  :global(& > .utrecht-form-field__label) {
+    display: none;
+  }
+}

package/src/formFieldRadioOption/FormFieldRadioOption.tsx

@@ -0,0 +1,75 @@
+import {
+  type CustomFormFieldProps,
+  FormField,
+  Radio as RHCRadio,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import { Fragment, useId } from "react";
+import AmountLabel, { type AmountLabelProps } from "../amountLabel/AmountLabel";
+import styles from "./styles.module.css";
+
+export interface FormFieldRadioOptionProps
+  extends Omit<
+      CustomFormFieldProps,
+      "label" | "statusId" | "errorMessageId" | "descriptionId" | "input"
+    >,
+    AmountLabelProps {
+  name: string;
+  value: string;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  statusId?: CustomFormFieldProps["statusId"];
+  errorMessageId?: CustomFormFieldProps["errorMessageId"];
+  descriptionId?: CustomFormFieldProps["descriptionId"];
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+const FormFieldRadioOption = (props: FormFieldRadioOptionProps) => {
+  const genId = useId();
+  const {
+    id = genId,
+    statusId = genId,
+    errorMessageId = genId,
+    descriptionId = genId,
+    name,
+    value,
+    defaultChecked,
+    checked,
+    amount,
+    label,
+    className,
+    children,
+    onChange,
+    ...restProps
+  } = props;
+
+  return (
+    <FormField
+      type="radio" // although not exposed by RHC
+      className={clsx("utrecht-form-field--radio", styles.radio, className)}
+      statusId={statusId}
+      errorMessageId={errorMessageId}
+      descriptionId={descriptionId}
+      label={
+        <Fragment>
+          <RHCRadio
+            id={id}
+            name={name}
+            value={value}
+            checked={checked}
+            defaultChecked={defaultChecked}
+            className="utrecht-checkbox--custom utrecht-form-field__input"
+            onChange={onChange}
+          />
+          <AmountLabel label={label} amount={amount} />
+        </Fragment>
+      }
+      input={null}
+      {...restProps}
+    >
+      <span className={styles.info}>{children}</span>
+    </FormField>
+  );
+};
+
+export default FormFieldRadioOption;

package/src/formFieldRadioOption/styles.module.css

@@ -0,0 +1,49 @@
+.radio.radio {
+  --utrecht-form-field-label-margin-block-end: 0;
+
+  grid-template-areas:
+    'input label info'
+    'input description description'
+    'input error-message error-message'
+    'input status status';
+
+  :global(.utrecht-form-field--radio .utrecht-form-field__label) {
+    display: block;
+  }
+
+  :global(.utrecht-form-label) {
+    /* like checkbox */
+    display: flex;
+    font-weight: var(
+      --utrecht-form-label-checkbox-font-weight,
+      var(--utrecht-form-label-font-weight)
+    );
+    color: var(
+      --utrecht-form-label-checkbox-color,
+      var(--utrecht-form-label-color)
+    );
+    cursor: var(--utrecht-action-activate-cursor, revert);
+  }
+
+  :global(.utrecht-radio-button) {
+    order: initial;
+    margin-block-start: 0;
+  }
+
+  :global(
+      .utrecht-form-field--radio
+      .utrecht-form-field__label:has(.utrecht-form-field__input)
+    ) {
+    margin-inline-start: calc(
+      -1 *
+      (
+        var(--utrecht-radio-button-size) +
+        var(--utrecht-checkbox-margin-inline-end, 12px)
+      )
+    );
+  }
+}
+
+.info {
+  grid-area: info;
+}

package/src/formFieldSwitch/FormFieldSwitch.tsx

@@ -0,0 +1,79 @@
+import {
+  type CustomFormFieldProps,
+  FormField,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import { useId } from "react";
+import AmountLabel, { type AmountLabelProps } from "../amountLabel/AmountLabel";
+import Switch, { type SwitchLabels } from "../switch/Switch";
+import styles from "./styles.module.css";
+
+export interface FormFieldSwitchProps
+  extends Omit<
+      CustomFormFieldProps,
+      "label" | "statusId" | "errorMessageId" | "descriptionId" | "input"
+    >,
+    AmountLabelProps {
+  name: string;
+  value: string;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  statusId?: CustomFormFieldProps["statusId"];
+  errorMessageId?: CustomFormFieldProps["errorMessageId"];
+  descriptionId?: CustomFormFieldProps["descriptionId"];
+  labelledById?: string;
+  labels?: SwitchLabels;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+const FormFieldSwitch = (props: FormFieldSwitchProps) => {
+  const genId = useId();
+  const {
+    id = genId,
+    statusId = genId,
+    errorMessageId = genId,
+    descriptionId = genId,
+    labelledById,
+    name,
+    value,
+    defaultChecked,
+    checked,
+    amount,
+    label,
+    labels,
+    onChange,
+    className,
+    children,
+    ...restProps
+  } = props;
+
+  return (
+    <FormField
+      id={id}
+      type="checkbox"
+      className={clsx("utrecht-form-field--checkbox", styles.switch, className)}
+      statusId={statusId}
+      errorMessageId={errorMessageId}
+      descriptionId={descriptionId}
+      label={<AmountLabel label={label} amount={amount} />}
+      input={
+        <Switch
+          id={id}
+          name={name}
+          value={value}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          className="utrecht-form-field__input"
+          labels={labels}
+          aria-labelledby={`${labelledById} ${id}`}
+          onChange={onChange}
+        />
+      }
+      {...restProps}
+    >
+      <span className={styles.info}>{children}</span>
+    </FormField>
+  );
+};
+
+export default FormFieldSwitch;

package/src/formFieldSwitch/styles.module.css

@@ -0,0 +1,32 @@
+.switch.switch {
+  --utrecht-form-field-label-margin-block-end: 0;
+  --utrecht-checkbox-size: var(--utrecht-form-toggle-width);
+
+  grid-template-areas:
+    'input label info'
+    'input description description'
+    'input error-message error-message'
+    'input status status';
+
+  :global(.utrecht-form-field--radio .utrecht-form-field__label) {
+    display: block;
+  }
+
+  :global(.utrecht-form-label) {
+    /* like checkbox */
+    display: flex;
+    font-weight: var(
+      --utrecht-form-label-checkbox-font-weight,
+      var(--utrecht-form-label-font-weight)
+    );
+    color: var(
+      --utrecht-form-label-checkbox-color,
+      var(--utrecht-form-label-color)
+    );
+    cursor: var(--utrecht-action-activate-cursor, revert);
+  }
+}
+
+.info {
+  grid-area: info;
+}

package/src/heading/Heading.tsx

@@ -3,6 +3,11 @@ import {
   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} />;
 };

package/src/iconBadge/IconBadge.tsx

@@ -8,6 +8,9 @@ export interface IconBadgeProps extends HTMLProps<HTMLSpanElement> {
   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();

package/src/iconBadge/getAppearance.ts

@@ -1,6 +1,9 @@
-/* biome-ignore-all lint: TODO: needs a refactor maybe */
+/* 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;
 
@@ -24,6 +27,9 @@ export function getDate(object?: Partial<Record<"status" | status, any>>) {
   );
 }
 
+/**
+ * @deprecated API Register specific function (moved and refactored to `apps/api-register/src/components/`)
+ */
 export default function getAppearance(
   object?: Partial<Record<"status" | status, any>>,
 ) {

package/src/index.ts

@@ -2,6 +2,10 @@
 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 {
@@ -28,6 +32,12 @@ 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 {
@@ -35,10 +45,19 @@ export {
   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 { default as Heading } from "./heading/Heading";
+export {
+  clampHeadingLevel,
+  default as Heading,
+  type HeadingProps,
+} from "./heading/Heading";
 export {
   default as HeadingGroup,
   type HeadingGroupProps,
@@ -50,12 +69,17 @@ export {
 } 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,
@@ -72,6 +96,8 @@ export {
 } 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,

package/src/infoButton/InfoButton.tsx

@@ -0,0 +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;

package/src/infoButton/styles.module.css

@@ -0,0 +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;
+  }
+}

package/src/overlay/Overlay.tsx

@@ -0,0 +1,18 @@
+import clsx from "clsx";
+import styles from "./styles.module.css";
+
+const Overlay = ({
+  children,
+  active,
+}: {
+  children?: React.ReactNode;
+  active: boolean;
+}) => {
+  return (
+    <div className={clsx(styles.overlay, active && styles.active)}>
+      {children}
+    </div>
+  );
+};
+
+export default Overlay;

package/src/overlay/styles.module.css

@@ -0,0 +1,15 @@
+.overlay {
+  display: none;
+
+  &.active {
+    position: absolute;
+    top: 0;
+    left: -1px;
+    z-index: 999;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(1px);
+  }
+}

package/src/paragraph/Paragraph.tsx

@@ -1,10 +1,24 @@
 import {
-  type ParagraphProps,
   Paragraph as RHCParagraph,
+  type ParagraphProps as RHCParagraphProps,
 } from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+
+interface ParagraphProps extends RHCParagraphProps {
+  purpose?: "lead" | "short";
+}
 
 const Paragraph = (props: ParagraphProps) => {
-  return <RHCParagraph {...props} />;
+  const { className, purpose } = props;
+
+  return (
+    <RHCParagraph
+      className={clsx(className, purpose === "short" && styles.short)}
+      purpose={purpose}
+      {...props}
+    />
+  );
 };
 
 export default Paragraph;

package/src/paragraph/styles.module.css

@@ -0,0 +1,6 @@
+.short {
+  --nl-paragraph-font-size: 0.875rem;
+  --nl-paragraph-margin-block-end: 0.5rem;
+  padding-inline-start: 0.25rem;
+  border-inline-start: 1px solid var(--rhc-color-cool-grey-300);
+}

package/src/pillBadge/styles.module.css

@@ -14,6 +14,7 @@
     rgba(51, 51, 51, 0.25),
     rgba(204, 204, 204, 0.25)
   );
+  --don-pill-badge-outline-hover-color: var(--rhc-color-cool-grey-300);
   --don-pill-badge-border-width: 1px;
 }
 
@@ -33,6 +34,25 @@
   background-color: var(--don-pill-badge-background-color);
   border-radius: var(--don-pill-badge-border-radius);
 
+  a:any-link:has(&) {
+    text-decoration: none;
+
+    &:hover {
+      outline-width: 2px;
+      outline-style: auto;
+      outline-color: var(--don-pill-badge-outline-hover-color);
+      outline-offset: 0.125rem;
+      border-radius: var(--don-pill-badge-border-radius);
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline-style: auto;
+      outline-offset: 0.125rem;
+      border-radius: var(--don-pill-badge-border-radius);
+    }
+  }
+
   /* Because Biome CSS parser does not yet support modern attr() some of the following is commented out.
    * Fixme: remove this workaround when https://github.com/biomejs/biome/issues/6183 is closed and tested */
 

package/src/scoreBadge/ScoreBadge.tsx

@@ -17,6 +17,7 @@ export interface ScoreBadgeProps {
   };
 }
 
+/** @deprecated */
 export default function ScoreBadge(props: ScoreBadgeProps) {
   const defaultcolors: ScoreBadgeProps["colors"] = {
     background: "#CBD5E1",