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

package/CHANGELOG.md

@@ -0,0 +1,85 @@
+# @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
+
+- 804dc03: Added Analytics component.
+  - Added `PiwikPro` component to encapsulate Piwik analytics tracking.
+  - Added restProps to `AlignBox` component and `CopyButton` component.
+
+### Patch Changes
+
+- 4447980: Updated dependencies
+
+  Removed standalone postcss.config.cjs files from apps (integrated into astro.config.mjs)
+
+- f7034b9: Updated dependencies:
+  - @rijkshuisstijl-community/components-css
+  - @rijkshuisstijl-community/components-react
+- ded15aa: fix: exclude 'current' property when mapping NavBar items
+
+## 1.0.0
+
+### Major Changes
+
+- d8d2e78: Version 1.0!
+- 8dde9ed: Nieuwe componenten
+
+  - Button
+  - Fieldset
+  - FormFieldLabel
+  - FormFieldTextInput
+
+  Wijzigingen
+
+  - ReadOnlyTextInput: fontVariant toegevoegd.
+
+### Patch Changes
+
+- 3b4f506: Change value to defaultValue in search form.
+- Updated dependencies [8dde9ed]
+- Updated dependencies [d8d2e78]
+  - @developer-overheid-nl/don-register-locales@1.0.0

package/package.json

@@ -5,7 +5,7 @@
   "license": "EUPL-1.2",
   "private": false,
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "keywords": [],
   "publishConfig": {
     "access": "public"
@@ -13,31 +13,34 @@
   "exports": {
     ".": "./src/index.ts",
     "./client": "./src/client.ts",
+    "./analytics": "./src/analytics/index.ts",
     "./i18n": "./src/i18n.ts"
   },
   "main": "./src/index.ts",
   "files": [
     "src/",
-    "tsconfig.json"
+    "tsconfig.json",
+    "CHANGELOG.md"
   ],
   "dependencies": {
-    "@rijkshuisstijl-community/components-css": "11.0.0",
-    "@rijkshuisstijl-community/components-react": "10.0.0",
+    "@piwikpro/react-piwik-pro": "2.5.0",
+    "@rijkshuisstijl-community/components-css": "12.0.0",
+    "@rijkshuisstijl-community/components-react": "11.0.0",
     "@rijkshuisstijl-community/design-tokens": "11.0.0",
     "@types/parse-link-header": "^2.0.3",
     "clsx": "2.1.1",
-    "i18next": "25.7.3",
+    "i18next": "25.8.4",
     "parse-link-header": "^2.0.0",
-    "react-i18next": "16.5.1",
+    "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.0",
+    "vite": "7.1.7",
     "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {

package/src/alignBox/AlignBox.tsx

@@ -21,12 +21,12 @@ type Align =
 
 type Gap = "none" | "small" | "medium" | "large";
 
-export interface AlignBoxProps {
+export interface AlignBoxProps extends React.HTMLAttributes<HTMLDivElement> {
   align?: Align;
   gap?: Gap;
   direction?: "row" | "column";
+  wrap?: boolean;
   display?: "block" | "inline";
-  className?: string;
   children: ReactNode;
 }
 
@@ -84,9 +84,11 @@ const AlignBox: React.FC<AlignBoxProps> = ({
   align = "center",
   gap = "none",
   direction = "row",
+  wrap = false,
   display = "block",
   className,
   children,
+  ...restProps
 }) => {
   const alignmentClass = getAlignmentClass(align);
   const gapClass = getGapClass(gap);
@@ -96,11 +98,13 @@ const AlignBox: React.FC<AlignBoxProps> = ({
       className={clsx(
         styles.alignBox,
         styles[direction],
+        wrap && styles.wrap,
         styles[display],
         alignmentClass,
         gapClass,
         className ?? "",
       )}
+      {...restProps}
     >
       {children}
     </div>

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

@@ -0,0 +1,94 @@
+"use client";
+
+import PiwikPro, {
+  ContentTracking,
+  CustomEvent,
+  type Dimensions,
+  DownloadAndOutlink,
+  ErrorTracking,
+  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;
+    category?: string;
+    searchCount?: number;
+    dimensions?: Dimensions;
+  };
+}
+
+// Default extra download extensions in addition to the standard ones tracked by Piwik Pro.
+const DOWNLOAD_EXTENSIONS = ["json", "yaml", "yml"];
+
+export default function Analytics(props: AnalyticsProps) {
+  /* const nonce = `n.${Math.random() * 1000000}`; // TODO: replace with nanoid or uuid */
+  const {
+    siteId,
+    accountAddress,
+    dataLayerName,
+    trackJSErrors = true,
+    pageTitle,
+    customEvent,
+    isSearchPage,
+    searchObject,
+  } = props;
+  const downloadExtensions = [
+    ...DOWNLOAD_EXTENSIONS,
+    ...(props.downloadExtensions || []),
+  ];
+
+  if (pageTitle) {
+    console.warn(
+      "The 'pageTitle' property is deprecated and will be removed in future versions.",
+    );
+  }
+
+  PiwikPro.initialize(siteId, accountAddress, {
+    /* nonce, */
+    dataLayerName,
+  });
+
+  DownloadAndOutlink.addDownloadExtensions(downloadExtensions);
+
+  ContentTracking.trackAllContentImpressions();
+  ContentTracking.trackVisibleContentImpressions(true);
+
+  if (trackJSErrors) {
+    ErrorTracking.enableJSErrorTracking();
+  }
+
+  useEffect(() => {
+    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);
+    }
+  }, [customEvent, isSearchPage, searchObject]);
+
+  return null;
+}

package/src/analytics/index.ts

@@ -0,0 +1 @@
+export { default as PiwikPro } from "./PiwikPro";

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/copyButton/CopyButton.tsx

@@ -5,13 +5,12 @@ import clsx from "clsx";
 import Icon from "../iconsSprite/Icon";
 import styles from "./styles.module.css";
 
-const CopyButton = ({
-  text,
-  className,
-}: {
+interface CopyButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   text?: string;
-  className?: string;
-}) => {
+}
+
+const CopyButton = ({ text, className, ...restProps }: CopyButtonProps) => {
   const handleCopy = async () => {
     if ("clipboard" in navigator) {
       await navigator.clipboard.writeText(
@@ -29,6 +28,7 @@ const CopyButton = ({
         onClick={handleCopy}
         title="Kopieer naar klembord"
         aria-label="Kopieer naar klembord"
+        {...restProps}
       >
         <Icon className={styles.icon} name="kopieer-inline" />
       </SecondaryActionButton>

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;
   }
 }