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

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @developer-overheid-nl/don-register-components
 
+## 1.2.0
+
+### Minor Changes
+
+- b404400: Nieuwe components:
+
+  - FacetFilters, met de types:
+    - toggle: boolean filter (switch)
+    - multi-select: multiple options, multiple selectable (checkboxes)
+    - single-select: multiple options, single selectable (radiobuttons)
+  - AmountLabel: label with amount, used in FacetFilters
+  - FormFieldCheckboxGroup
+  - FormFieldCheckboxOption, with amount label
+  - FormFieldRadioGroup
+  - FormFieldRadioOption, with amount label
+  - Switch: toggle (checkbox)
+  - FormFieldSwitch, with amount label
+  - InfoButton
+  - Tooltip: html popover tooltip; default met InfoButton
+  - Overlay: overlay component, blurs the background
+  - BadgeList, list for Badge components
+
+  - Changed components:
+
+    - AlignBox: wrap toegevoegd
+    - DataBadgeLink: tabIndex toegevoegd met default `undefined`, omdat RHC tabindex=0 op `span` had gezet, fixed Focus styling.
+    - Heading: HeadingProps, clampHeadingLevel exported
+    - Paragraph: `short` property en styling toegevoegd
+    - PillBadge: focus and hover styling toegevoegd
+
+  - Nieuwe translation keys toegevoegd
+
+- 4bc38b3: Refactor PiwikPro component to deprecate pageTitle prop and introduce customEvent for event tracking
+
+### Patch Changes
+
+- a7a1405: Small bugfixes, server error details in action, future test file setup
+- Updated dependencies [b404400]
+- Updated dependencies [b404400]
+- Updated dependencies [a7a1405]
+  - @developer-overheid-nl/don-register-locales@1.1.0
+
 ## 1.1.0
 
 ### Minor Changes

package/package.json

@@ -5,7 +5,7 @@
   "license": "EUPL-1.2",
   "private": false,
   "type": "module",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "keywords": [],
   "publishConfig": {
     "access": "public"
@@ -34,13 +34,13 @@
     "react-i18next": "16.5.4",
     "react-markdown": "10.1.0",
     "remark-behead": "^3.1.0",
-    "@developer-overheid-nl/don-register-locales": "1.0.0"
+    "@developer-overheid-nl/don-register-locales": "1.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^5.1.2",
     "rimraf": "^6.1.2",
     "typescript": "5.9.3",
-    "vite": "7.3.1",
+    "vite": "7.1.7",
     "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {

package/src/alignBox/AlignBox.tsx

@@ -25,6 +25,7 @@ export interface AlignBoxProps extends React.HTMLAttributes<HTMLDivElement> {
   align?: Align;
   gap?: Gap;
   direction?: "row" | "column";
+  wrap?: boolean;
   display?: "block" | "inline";
   children: ReactNode;
 }
@@ -83,6 +84,7 @@ const AlignBox: React.FC<AlignBoxProps> = ({
   align = "center",
   gap = "none",
   direction = "row",
+  wrap = false,
   display = "block",
   className,
   children,
@@ -96,6 +98,7 @@ const AlignBox: React.FC<AlignBoxProps> = ({
       className={clsx(
         styles.alignBox,
         styles[direction],
+        wrap && styles.wrap,
         styles[display],
         alignmentClass,
         gapClass,

package/src/alignBox/styles.module.css

@@ -23,6 +23,10 @@
   flex-direction: column;
 }
 
+.wrap {
+  flex-wrap: wrap;
+}
+
 .left {
   align-items: center;
   justify-content: flex-start;

package/src/amountLabel/AmountLabel.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import styles from "./styles.module.css";
+
+export interface AmountLabelProps {
+  label: ReactNode;
+  amount?: string | number;
+}
+
+const AmountLabel = ({ label, amount }: AmountLabelProps) => (
+  <div className={styles.amountLabel}>
+    <span className={styles.labelText}>{label}</span>&nbsp;
+    {amount ? <span className={styles.amountText}>({amount})</span> : null}
+  </div>
+);
+
+export default AmountLabel;

package/src/amountLabel/styles.module.css

@@ -0,0 +1,11 @@
+.amountLabel {
+  display: inline-block;
+}
+
+.labelText {
+  word-break: break-word;
+}
+
+.amountText {
+  font-size: smaller;
+}

package/src/analytics/PiwikPro.tsx

@@ -2,21 +2,31 @@
 
 import PiwikPro, {
   ContentTracking,
+  CustomEvent,
   type Dimensions,
   DownloadAndOutlink,
   ErrorTracking,
-  PageViews,
   SiteSearch,
 } from "@piwikpro/react-piwik-pro";
 import { useEffect } from "react";
 
+declare global {
+  interface Window {
+    _paq: unknown[];
+  }
+}
+
 interface AnalyticsProps {
   siteId: string;
   accountAddress: string;
   dataLayerName?: string;
   trackJSErrors?: boolean;
   downloadExtensions?: string[];
+  /**
+   * @deprecated This property is deprecated.
+   */
   pageTitle?: string;
+  customEvent?: { category?: string; action?: string; name: string };
   isSearchPage?: boolean;
   searchObject?: {
     keyword: string;
@@ -37,6 +47,7 @@ export default function Analytics(props: AnalyticsProps) {
     dataLayerName,
     trackJSErrors = true,
     pageTitle,
+    customEvent,
     isSearchPage,
     searchObject,
   } = props;
@@ -45,6 +56,12 @@ export default function Analytics(props: AnalyticsProps) {
     ...(props.downloadExtensions || []),
   ];
 
+  if (pageTitle) {
+    console.warn(
+      "The 'pageTitle' property is deprecated and will be removed in future versions.",
+    );
+  }
+
   PiwikPro.initialize(siteId, accountAddress, {
     /* nonce, */
     dataLayerName,
@@ -60,13 +77,18 @@ export default function Analytics(props: AnalyticsProps) {
   }
 
   useEffect(() => {
-    if (pageTitle && !isSearchPage) {
-      PageViews.trackPageView(pageTitle);
-    } else if (isSearchPage && searchObject?.keyword) {
+    if (customEvent) {
+      CustomEvent.trackEvent(
+        customEvent.category || "Pages",
+        customEvent.action || "view",
+        customEvent.name,
+      );
+    }
+    if (isSearchPage && searchObject?.keyword) {
       const { keyword, category, searchCount, dimensions } = searchObject;
       SiteSearch.trackSiteSearch(keyword, category, searchCount, dimensions);
     }
-  }, [pageTitle, isSearchPage, searchObject]);
+  }, [customEvent, isSearchPage, searchObject]);
 
   return null;
 }

package/src/badgeList/BadgeList.tsx

@@ -0,0 +1,26 @@
+import clsx from "clsx";
+import type { HTMLAttributes } from "react";
+import styles from "./styles.module.css";
+
+export interface BadgeListProps extends HTMLAttributes<HTMLUListElement> {
+  direction?: "row" | "column";
+}
+
+const BadgeList = (props: BadgeListProps) => {
+  const { direction = "row", className, children, ...restProps } = props;
+
+  return (
+    <ul
+      className={clsx(
+        styles.badgelist,
+        styles[`badgelist--${direction}`],
+        className,
+      )}
+      {...restProps}
+    >
+      {children}
+    </ul>
+  );
+};
+
+export default BadgeList;

package/src/badgeList/styles.module.css

@@ -0,0 +1,24 @@
+.badgelist {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0;
+  list-style: none;
+
+  &:empty {
+    display: none;
+  }
+}
+
+.badgelist--row {
+  flex-direction: row;
+}
+
+.badgelist--row > * {
+  display: inline-flex;
+  gap: 0.25rem;
+}
+
+.badgelist--column {
+  flex-direction: column;
+}

package/src/client.ts

@@ -1,2 +1,7 @@
 // Barrel export for client-side components
 export { default as CopyButton } from "./copyButton/CopyButton";
+export {
+  default as FacetFilters,
+  type FacetFiltersProps,
+  type FilterData,
+} from "./facetFilters/FacetFilters";

package/src/dataBadgeLink/DataBadgeLink.tsx

@@ -24,6 +24,7 @@ const DataBadgeLink = (props: DataBadgeLinkProps) => {
     children,
     className,
     role,
+    tabIndex = undefined,
     appearance = "primary",
     ...restProps
   } = props;
@@ -33,6 +34,8 @@ const DataBadgeLink = (props: DataBadgeLinkProps) => {
       /* biome-ignore lint/a11y/useValidAriaValues: {null} is needed to remove it */
       aria-pressed={undefined}
       role={role}
+      /* RHC DataBadgeButton had a tabindex=0 on the span, and a focus ring, but no interaction */
+      tabIndex={tabIndex}
       {...restProps}
     >
       <a

package/src/dataBadgeLink/styles.module.css

@@ -33,6 +33,13 @@
       background-color: var(--rhc-color-cool-grey-500);
     }
   }
+
+  &:focus-within {
+    outline-width: var(--utrecht-focus-outline-width, revert);
+    outline-style: var(--utrecht-focus-outline-style, revert);
+    outline-color: var(--utrecht-focus-outline-color, revert);
+    outline-offset: var(--utrecht-focus-outline-offset, revert);
+  }
 }
 
 .badgeLink {
@@ -40,4 +47,23 @@
   padding-block: 0.25rem;
   color: inherit;
   text-decoration: inherit;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  /* fix for non-clickable icons bug */
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    content: '';
+    border-radius: var(
+      --utrecht-data-badge-border-radius,
+      var(--utrecht-badge-border-radius, 0.5ch)
+    );
+  }
 }

package/src/dataSummary/styles.module.css

@@ -14,15 +14,15 @@
   --rhc-data-summary-item-key-row-padding-inline-start: 0;
   --rhc-data-summary-item-key-row-padding-inline-end: 0;
   --rhc-data-summary-item-key-row-padding-block-start: 0;
-  --rhc-data-summary-item-key-row-padding-block-end: 0.75rem;
+  --rhc-data-summary-item-key-row-padding-block-end: 0.5rem;
   --rhc-data-summary-item-value-row-padding-inline-start: 0;
   --rhc-data-summary-item-value-row-padding-inline-end: 0;
   --rhc-data-summary-item-value-row-padding-block-start: 0;
-  --rhc-data-summary-item-value-row-padding-block-end: 0.75rem;
+  --rhc-data-summary-item-value-row-padding-block-end: 0.5rem;
   --rhc-data-summary-item-action-row-padding-inline-start: 0;
   --rhc-data-summary-item-action-row-padding-inline-end: 0;
   --rhc-data-summary-item-action-row-padding-block-start: 0;
-  --rhc-data-summary-item-action-row-padding-block-end: 0.75rem;
+  --rhc-data-summary-item-action-row-padding-block-end: 0.5rem;
   display: flex;
   flex-direction: column;
   row-gap: 0.75rem;
@@ -31,7 +31,7 @@
 }
 
 :global(.rhc-data-summary__item) {
-  row-gap: 0.75rem;
+  row-gap: 0.25rem;
   column-gap: 1rem;
 }
 
@@ -62,9 +62,14 @@
 }
 
 .isContained {
-  margin-block-end: 0;
+  &:last-child {
+    margin-block-end: 0;
+  }
+
   :global(.rhc-data-summary__item:last-child) {
     --rhc-data-summary-item-border-block-end-style: none;
     --rhc-data-summary-item-key-row-padding-block-end: 0;
+    --rhc-data-summary-item-value-row-padding-block-end: 0;
+    --rhc-data-summary-item-action-row-padding-block-end: 0;
   }
 }

package/src/facetFilters/FacetFilters.tsx

@@ -0,0 +1,313 @@
+"use client";
+
+import clsx from "clsx";
+import type { ChangeEvent } from "react";
+import { type HTMLProps, type PropsWithChildren, useRef } from "react";
+import { I18nextProvider, useTranslation } from "react-i18next";
+import FormFieldCheckboxGroup from "../formFieldCheckboxGroup/FormFieldCheckboxGroup";
+import FormFieldCheckboxOption from "../formFieldCheckboxOption/FormFieldCheckboxOption";
+import FormFieldRadioGroup from "../formFieldRadioGroup/FormFieldRadioGroup";
+import FormFieldRadioOption from "../formFieldRadioOption/FormFieldRadioOption";
+import FormFieldSwitch from "../formFieldSwitch/FormFieldSwitch";
+import Heading, {
+  clampHeadingLevel,
+  type HeadingProps,
+} from "../heading/Heading";
+import i18n from "../i18n";
+import Paragraph from "../paragraph/Paragraph";
+import ToolTip from "../toolTip/ToolTip";
+import styles from "./styles.module.css";
+
+enum FilterType {
+  Toggle = "toggle",
+  Date = "date",
+  Multi = "multi-select",
+  Single = "single-select",
+}
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  description?: string | null;
+  count: number;
+  selected: boolean;
+}
+
+interface BaseFilterItems {
+  key: string;
+  label: string;
+  description: string;
+}
+
+interface ToggleFilterData extends BaseFilterItems {
+  type: FilterType.Toggle;
+  value?: boolean;
+  count?: number;
+}
+
+interface DateFilterData extends BaseFilterItems {
+  type: FilterType.Date;
+  value?: string;
+  count?: number;
+}
+
+interface MultiSelectFilterData extends BaseFilterItems {
+  type: FilterType.Multi;
+  options: SelectOption[];
+}
+
+interface SingleSelectFilterData extends BaseFilterItems {
+  type: FilterType.Single;
+  options: SelectOption[];
+}
+
+export type FilterData =
+  | ToggleFilterData
+  | DateFilterData
+  | MultiSelectFilterData
+  | SingleSelectFilterData;
+
+type SelectedFilters = Record<string, Array<string | [string, string]>>;
+
+export interface FacetFiltersProps extends HTMLProps<HTMLDivElement> {
+  title?: string;
+  startHeadingLevel?: HeadingProps["level"];
+  filters: FilterData[] | null | undefined;
+  /**
+   * Callback function called when filter option has changed.
+   * @param selectedFilters current selected filters at the moment of change
+   * @returns
+   */
+  onFilterChange?: (selectedFilters: SelectedFilters) => void;
+  /**
+   * Types of filters for which the onFilterChange callback should be debounced. Default: ["date", "single-select"]
+   */
+  debounceTypes?: Array<FilterType>;
+  /**
+   * Delay for debouncing the onFilterChange callback, in milliseconds. Default: 600
+   */
+  debounceDelay?: number;
+}
+
+export const getSelectedFilters = (
+  filters: FilterData[] | null | undefined,
+  withLabels = false,
+): SelectedFilters => {
+  return (
+    filters?.reduce((acc, filter) => {
+      if (filter.type === FilterType.Multi) {
+        const keys: (string | [string, string])[] = filter.options
+          ?.filter((option) => option.selected)
+          .map((option) =>
+            withLabels ? [option.value, option.label] : option.value,
+          );
+        if (keys?.length > 0) {
+          acc[filter.key] = keys;
+        }
+      } else if (filter.type === FilterType.Toggle && filter.value) {
+        acc[filter.key] = withLabels ? [["true", filter.label]] : ["true"];
+      } else if (filter.type === FilterType.Date && filter.value) {
+        acc[filter.key] = withLabels
+          ? [[filter.value, filter.label]]
+          : [filter.value];
+      } else if (filter.type === FilterType.Single) {
+        const selectedOption = filter.options?.find(
+          (option) => option.selected,
+        );
+        if (selectedOption) {
+          acc[filter.key] = withLabels
+            ? [[selectedOption.value, selectedOption.label]]
+            : [selectedOption.value];
+        }
+      }
+      return acc;
+    }, {} as SelectedFilters) ?? {}
+  );
+};
+
+const updateFilters = (
+  selectedFilters: SelectedFilters,
+  filterKey: string,
+  filterValue: string,
+  checked: boolean,
+) => {
+  const newSelectedFilters = {
+    ...selectedFilters,
+    [filterKey]: checked
+      ? [...(selectedFilters[filterKey] || []), filterValue]
+      : (selectedFilters[filterKey] || []).filter(
+          (value) => value !== filterValue,
+        ),
+  };
+  return newSelectedFilters;
+};
+
+const debounce = <T extends unknown[]>(
+  fn: (...args: T) => void,
+  delay: number,
+) => {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  return (...args: T) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      fn(...args);
+    }, delay);
+  };
+};
+
+const FacetFilters = (props: PropsWithChildren<FacetFiltersProps>) => {
+  const { t } = useTranslation();
+  const thisRef = useRef<HTMLDivElement>(null);
+  const {
+    title,
+    startHeadingLevel = 2,
+    filters,
+    onFilterChange = () => {},
+    debounceTypes = [FilterType.Date, FilterType.Single],
+    debounceDelay = 600,
+    ...restProps
+  } = props;
+
+  const selectedFilters = getSelectedFilters(filters);
+
+  // Callback function (for React) and CustomEvent (for non-React) to notify about filter changes
+  const emitChange = (newSelectedFilters: SelectedFilters) => {
+    onFilterChange(newSelectedFilters);
+    const customEvent = new CustomEvent("onFilterChange", {
+      detail: newSelectedFilters,
+    });
+    if (thisRef.current) thisRef.current.dispatchEvent(customEvent);
+  };
+
+  const debouncedEmitChange = useRef(
+    debounce(emitChange, debounceDelay),
+  ).current;
+
+  const handleChange = (
+    event: ChangeEvent<HTMLInputElement>,
+    type: FilterType,
+  ) => {
+    const newSelectedFilters = updateFilters(
+      selectedFilters,
+      event.target.name,
+      event.target.value,
+      event.target.checked,
+    );
+
+    if (debounceTypes.includes(type)) {
+      debouncedEmitChange(newSelectedFilters);
+    } else {
+      emitChange(newSelectedFilters);
+    }
+  };
+
+  return (
+    <div
+      ref={thisRef}
+      className={clsx([styles.facetFilters, props.className])}
+      {...restProps}
+    >
+      {title ? (
+        <Heading level={startHeadingLevel} appearanceLevel={3}>
+          {title}
+        </Heading>
+      ) : null}
+      {/* Temporary filter on `date` types */}
+      {filters
+        ?.filter(({ type }) => type !== "date")
+        .map((facet) => (
+          <div className={styles.facet} key={facet.key}>
+            <Heading
+              level={
+                title
+                  ? clampHeadingLevel(startHeadingLevel + 1)
+                  : startHeadingLevel
+              }
+              appearanceLevel={5}
+            >
+              {facet.label}
+            </Heading>
+            <Paragraph id={`${facet.key}-label`} purpose="short">
+              {facet.description}
+            </Paragraph>
+            {facet.type === "toggle" ? (
+              <FormFieldSwitch
+                label=""
+                labelledById={`${facet.key}-label`}
+                name={facet.key}
+                defaultChecked={facet.value}
+                value="true"
+                amount={facet.count || 0}
+                labels={{
+                  on: t("components.filter-on"),
+                  off: t("components.filter-off"),
+                }}
+                onChange={(event) => handleChange(event, facet.type)}
+              />
+            ) : null}
+            {/* TODO: Date selector
+          {facet.type === "date" ? <div>TODO</div> : null}
+          */}
+            {facet.type === "multi-select" ? (
+              <FormFieldCheckboxGroup>
+                {facet.options?.map((option) => (
+                  <FormFieldCheckboxOption
+                    key={option.value}
+                    label={option.label}
+                    name={facet.key}
+                    value={option.value}
+                    defaultChecked={option.selected}
+                    amount={option.count}
+                    onChange={(event) => handleChange(event, facet.type)}
+                  >
+                    {option.description ? (
+                      <ToolTip
+                        text={option.description}
+                        aria-label={t("components.info-about", {
+                          subject: option.label,
+                        })}
+                      />
+                    ) : null}
+                  </FormFieldCheckboxOption>
+                ))}
+              </FormFieldCheckboxGroup>
+            ) : null}
+            {facet.type === "single-select" ? (
+              <FormFieldRadioGroup>
+                <FormFieldRadioOption
+                  key="none"
+                  label={t("components.filter-all")}
+                  name={facet.key}
+                  value=""
+                  onChange={(event) => handleChange(event, facet.type)}
+                />
+                {facet.options?.map((option) => (
+                  <FormFieldRadioOption
+                    key={option.value}
+                    label={option.label}
+                    name={facet.key}
+                    value={option.value}
+                    defaultChecked={option.selected}
+                    amount={option.count}
+                    onChange={(event) => handleChange(event, facet.type)}
+                  />
+                ))}
+              </FormFieldRadioGroup>
+            ) : null}
+          </div>
+        ))}
+    </div>
+  );
+};
+
+const TranslatedFacetFilters = (props: FacetFiltersProps) => {
+  return (
+    <I18nextProvider i18n={i18n}>
+      <FacetFilters {...props} />
+    </I18nextProvider>
+  );
+};
+
+export default TranslatedFacetFilters;

package/src/facetFilters/styles.module.css

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