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

package/src/dataBadgeLink/styles.module.css

@@ -1,43 +1,43 @@
-.donDataBadge.donDataBadge {
-  &.primary {
-    --_utrecht-data-badge-color: oklch(
-      from var(--utrecht-data-badge-color) calc(l - 0.1) c h
-    );
-    color: var(--_utrecht-data-badge-color);
-
-    &:hover {
-      color: var(--utrecht-data-badge-color);
-    }
-  }
-
-  &.outlined {
-    --_utrecht-data-badge-background-color: var(--rhc-color-canvas);
-    background-color: var(--_utrecht-data-badge-background-color);
-    border: 2px solid var(--utrecht-data-badge-color);
-
-    &:hover {
-      background-color: var(--utrecht-data-badge-background-color);
-      border-color: var(--utrecht-data-badge-background-color);
-    }
-  }
-
-  &.subtle {
-    --_utrecht-data-badge-color: var(--nl-link-color);
-    --_utrecht-data-badge-background-color: var(--rhc-color-cool-grey-200);
-    --utrecht-data-badge-font-weight: normal;
-    color: var(--_utrecht-data-badge-color);
-    background-color: var(--_utrecht-data-badge-background-color);
-
-    &:hover {
-      color: var(--rhc-color-cool-grey-50);
-      background-color: var(--rhc-color-cool-grey-500);
-    }
-  }
-}
-
-.badgeLink {
-  display: inline-block;
-  padding-block: 0.25rem;
-  color: inherit;
-  text-decoration: inherit;
-}
+.donDataBadge.donDataBadge {
+  &.primary {
+    --_utrecht-data-badge-color: oklch(
+      from var(--utrecht-data-badge-color) calc(l - 0.1) c h
+    );
+    color: var(--_utrecht-data-badge-color);
+
+    &:hover {
+      color: var(--utrecht-data-badge-color);
+    }
+  }
+
+  &.outlined {
+    --_utrecht-data-badge-background-color: var(--rhc-color-canvas);
+    background-color: var(--_utrecht-data-badge-background-color);
+    border: 2px solid var(--utrecht-data-badge-color);
+
+    &:hover {
+      background-color: var(--utrecht-data-badge-background-color);
+      border-color: var(--utrecht-data-badge-background-color);
+    }
+  }
+
+  &.subtle {
+    --_utrecht-data-badge-color: var(--nl-link-color);
+    --_utrecht-data-badge-background-color: var(--rhc-color-cool-grey-200);
+    --utrecht-data-badge-font-weight: normal;
+    color: var(--_utrecht-data-badge-color);
+    background-color: var(--_utrecht-data-badge-background-color);
+
+    &:hover {
+      color: var(--rhc-color-cool-grey-50);
+      background-color: var(--rhc-color-cool-grey-500);
+    }
+  }
+}
+
+.badgeLink {
+  display: inline-block;
+  padding-block: 0.25rem;
+  color: inherit;
+  text-decoration: inherit;
+}

package/src/dataSummary/DataSummary.tsx

@@ -1,22 +1,22 @@
-import {
-  DataSummary as RHCDataSummary,
-  type DataSummaryProps as RHCDataSummaryProps,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import styles from "./styles.module.css";
-
-export interface DataSummaryProps extends RHCDataSummaryProps {
-  contained?: boolean;
-}
-
-const DataSummary = (props: DataSummaryProps) => {
-  const { className, contained = false, ...restProps } = props;
-  return (
-    <RHCDataSummary
-      className={clsx(className, { [styles.isContained]: contained })}
-      {...restProps}
-    />
-  );
-};
-
-export default DataSummary;
+import {
+  DataSummary as RHCDataSummary,
+  type DataSummaryProps as RHCDataSummaryProps,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+
+export interface DataSummaryProps extends RHCDataSummaryProps {
+  contained?: boolean;
+}
+
+const DataSummary = (props: DataSummaryProps) => {
+  const { className, contained = false, ...restProps } = props;
+  return (
+    <RHCDataSummary
+      className={clsx(className, { [styles.isContained]: contained })}
+      {...restProps}
+    />
+  );
+};
+
+export default DataSummary;

package/src/dataSummary/DataSummaryItem.tsx

@@ -1,21 +1,21 @@
-import {
-  DataSummaryItem as RHCDataSummaryItem,
-  type DataSummaryItemProps as RHCDataSummaryItemProps,
-} from "@rijkshuisstijl-community/components-react";
-
-export interface DataSummaryItemProps
-  extends Partial<RHCDataSummaryItemProps> {}
-
-const DataSummaryItem = (props: DataSummaryItemProps) => {
-  const { className, itemKey = "", itemValue = "-", ...restProps } = props;
-  return (
-    <RHCDataSummaryItem
-      itemKey={itemKey}
-      itemValue={itemValue}
-      className={className}
-      {...restProps}
-    />
-  );
-};
-
-export default DataSummaryItem;
+import {
+  DataSummaryItem as RHCDataSummaryItem,
+  type DataSummaryItemProps as RHCDataSummaryItemProps,
+} from "@rijkshuisstijl-community/components-react";
+
+export interface DataSummaryItemProps
+  extends Partial<RHCDataSummaryItemProps> {}
+
+const DataSummaryItem = (props: DataSummaryItemProps) => {
+  const { className, itemKey = "", itemValue = "-", ...restProps } = props;
+  return (
+    <RHCDataSummaryItem
+      itemKey={itemKey}
+      itemValue={itemValue}
+      className={className}
+      {...restProps}
+    />
+  );
+};
+
+export default DataSummaryItem;

package/src/dataSummary/styles.module.css

@@ -1,70 +1,70 @@
-:global(.rhc-data-summary) {
-  --rhc-data-summary-item-key-padding-inline-start: 0;
-  --rhc-data-summary-item-key-padding-inline-end: 0;
-  --rhc-data-summary-item-key-padding-block-start: 0;
-  --rhc-data-summary-item-key-padding-block-end: 0;
-  --rhc-data-summary-item-value-padding-inline-start: 0;
-  --rhc-data-summary-item-value-padding-inline-end: 0;
-  --rhc-data-summary-item-value-padding-block-start: 0;
-  --rhc-data-summary-item-value-padding-block-end: 0;
-  --rhc-data-summary-item-action-padding-inline-start: 0;
-  --rhc-data-summary-item-action-padding-inline-end: 0;
-  --rhc-data-summary-item-action-padding-block-start: 0;
-  --rhc-data-summary-item-action-padding-block-end: 0;
-  --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-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-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;
-  display: flex;
-  flex-direction: column;
-  row-gap: 0.75rem;
-  margin-block-start: 0;
-  margin-block-end: 1rem;
-}
-
-:global(.rhc-data-summary__item) {
-  row-gap: 0.75rem;
-  column-gap: 1rem;
-}
-
-:global(.rhc-data-summary--column) {
-  :global(.rhc-data-summary__item) {
-    padding-block-end: var(--rhc-data-summary-item-key-row-padding-block-end);
-  }
-}
-
-:global(.rhc-data-summary--row) {
-  :global(.rhc-data-summary__item) {
-    justify-content: space-between;
-  }
-
-  :global(.rhc-data-summary__item-value:last-child) {
-    text-align: end;
-  }
-}
-
-:global(.rhc-data-summary__item-key):empty,
-:global(.rhc-data-summary__item-value):empty {
-  display: none;
-}
-
-:global(.rhc-data-summary__item-value) {
-  hyphens: auto;
-  word-break: break-word;
-}
-
-.isContained {
-  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;
-  }
-}
+:global(.rhc-data-summary) {
+  --rhc-data-summary-item-key-padding-inline-start: 0;
+  --rhc-data-summary-item-key-padding-inline-end: 0;
+  --rhc-data-summary-item-key-padding-block-start: 0;
+  --rhc-data-summary-item-key-padding-block-end: 0;
+  --rhc-data-summary-item-value-padding-inline-start: 0;
+  --rhc-data-summary-item-value-padding-inline-end: 0;
+  --rhc-data-summary-item-value-padding-block-start: 0;
+  --rhc-data-summary-item-value-padding-block-end: 0;
+  --rhc-data-summary-item-action-padding-inline-start: 0;
+  --rhc-data-summary-item-action-padding-inline-end: 0;
+  --rhc-data-summary-item-action-padding-block-start: 0;
+  --rhc-data-summary-item-action-padding-block-end: 0;
+  --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-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-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;
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.75rem;
+  margin-block-start: 0;
+  margin-block-end: 1rem;
+}
+
+:global(.rhc-data-summary__item) {
+  row-gap: 0.75rem;
+  column-gap: 1rem;
+}
+
+:global(.rhc-data-summary--column) {
+  :global(.rhc-data-summary__item) {
+    padding-block-end: var(--rhc-data-summary-item-key-row-padding-block-end);
+  }
+}
+
+:global(.rhc-data-summary--row) {
+  :global(.rhc-data-summary__item) {
+    justify-content: space-between;
+  }
+
+  :global(.rhc-data-summary__item-value:last-child) {
+    text-align: end;
+  }
+}
+
+:global(.rhc-data-summary__item-key):empty,
+:global(.rhc-data-summary__item-value):empty {
+  display: none;
+}
+
+:global(.rhc-data-summary__item-value) {
+  hyphens: auto;
+  word-break: break-word;
+}
+
+.isContained {
+  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;
+  }
+}

package/src/fieldset/FieldSet.tsx

@@ -1,3 +1,3 @@
-import { Fieldset } from "@rijkshuisstijl-community/components-react";
-
-export default Fieldset;
+import { Fieldset } from "@rijkshuisstijl-community/components-react";
+
+export default Fieldset;

package/src/filters/Filters.tsx

@@ -1,115 +1,115 @@
-// 'use client';
-/* biome-ignore-all lint: TODO: filters needs a refactor anyway */
-
-import {
-  Heading,
-  LinkList,
-  LinkListLink,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import type { HTMLProps, PropsWithChildren } from "react";
-import { I18nextProvider, useTranslation } from "react-i18next";
-import Alert from "../alert/Alert";
-import DataBadgeLink from "../dataBadgeLink/DataBadgeLink";
-import i18n from "../i18n";
-import Icon from "../iconsSprite/Icon";
-import styles from "./styles.module.css";
-
-export interface FiltersProps extends HTMLProps<HTMLDivElement> {
-  routing?: Record<string, any>;
-  data: any;
-  headers: any;
-  error: any;
-  status?: number;
-  statusText?: string;
-}
-
-const ListLinkIcon = ({ isActive }: { isActive: boolean }) => {
-  return (
-    <Icon
-      className={clsx([styles.icon, isActive && styles.active])}
-      name={isActive ? "active" : "delta-naar-rechts-inline"}
-    />
-  );
-};
-
-// TODO: make more generic for other filter types
-
-const Filters = (props: PropsWithChildren<FiltersProps>) => {
-  const { t } = useTranslation();
-  const { data, error, status, statusText, className, routing } = props;
-  const organisations = data && !data.message ? data : [];
-  const currentOrganisation =
-    organisations &&
-    organisations.find((org: any) => org?.uri === routing?.query?.organisation);
-
-  return (
-    <div className={clsx([styles.filters, className])}>
-      {currentOrganisation && (
-        <div
-          className={clsx("utrecht-badge-list", styles.currentFilter)}
-          role="list"
-        >
-          <Heading level={2} appearanceLevel={3}>
-            {t("components.current-filter")}
-          </Heading>
-          <DataBadgeLink
-            role="listitem"
-            aria-pressed={null}
-            helperText={t("components.remove-filter")}
-            icon={<Icon name="kruis-inline" />}
-            href={new URL(`../`, routing?.url).toString()}
-          >
-            {styles.badgeLink}
-            {currentOrganisation?.label}
-          </DataBadgeLink>
-        </div>
-      )}
-      <Heading level={2} appearanceLevel={3}>
-        {t("components.filter-by", { type: "organisatie" })}
-      </Heading>
-      <LinkList>
-        {organisations &&
-          organisations.map((organisation: any) => (
-            <LinkListLink
-              className={clsx([
-                organisation.uri === routing?.query?.organisation &&
-                  styles.active,
-              ])}
-              key={organisation.uri}
-              href={new URL(
-                `../?organisation=${organisation.uri}`,
-                routing?.url,
-              ).toString()}
-              icon={
-                <ListLinkIcon
-                  isActive={organisation.uri === routing?.query?.organisation}
-                />
-              }
-            >
-              {organisation.label}
-            </LinkListLink>
-          ))}
-      </LinkList>
-
-      {error && (
-        <Alert type="error">
-          {(error as unknown as any).message ||
-            (error as unknown as any).error_msg ||
-            `${status}: ${statusText}` ||
-            t("components.fuzz-error")}
-        </Alert>
-      )}
-    </div>
-  );
-};
-
-const TranslatedFilters = (props: PropsWithChildren<FiltersProps>) => {
-  return (
-    <I18nextProvider i18n={i18n}>
-      <Filters {...props} />
-    </I18nextProvider>
-  );
-};
-
-export default TranslatedFilters;
+// 'use client';
+/* biome-ignore-all lint: TODO: filters needs a refactor anyway */
+
+import {
+  Heading,
+  LinkList,
+  LinkListLink,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import type { HTMLProps, PropsWithChildren } from "react";
+import { I18nextProvider, useTranslation } from "react-i18next";
+import Alert from "../alert/Alert";
+import DataBadgeLink from "../dataBadgeLink/DataBadgeLink";
+import i18n from "../i18n";
+import Icon from "../iconsSprite/Icon";
+import styles from "./styles.module.css";
+
+export interface FiltersProps extends HTMLProps<HTMLDivElement> {
+  routing?: Record<string, any>;
+  data: any;
+  headers: any;
+  error: any;
+  status?: number;
+  statusText?: string;
+}
+
+const ListLinkIcon = ({ isActive }: { isActive: boolean }) => {
+  return (
+    <Icon
+      className={clsx([styles.icon, isActive && styles.active])}
+      name={isActive ? "active" : "delta-naar-rechts-inline"}
+    />
+  );
+};
+
+// TODO: make more generic for other filter types
+
+const Filters = (props: PropsWithChildren<FiltersProps>) => {
+  const { t } = useTranslation();
+  const { data, error, status, statusText, className, routing } = props;
+  const organisations = data && !data.message ? data : [];
+  const currentOrganisation =
+    organisations &&
+    organisations.find((org: any) => org?.uri === routing?.query?.organisation);
+
+  return (
+    <div className={clsx([styles.filters, className])}>
+      {currentOrganisation && (
+        <div
+          className={clsx("utrecht-badge-list", styles.currentFilter)}
+          role="list"
+        >
+          <Heading level={2} appearanceLevel={3}>
+            {t("components.current-filter")}
+          </Heading>
+          <DataBadgeLink
+            role="listitem"
+            aria-pressed={null}
+            helperText={t("components.remove-filter")}
+            icon={<Icon name="kruis-inline" />}
+            href={new URL(`../`, routing?.url).toString()}
+          >
+            {styles.badgeLink}
+            {currentOrganisation?.label}
+          </DataBadgeLink>
+        </div>
+      )}
+      <Heading level={2} appearanceLevel={3}>
+        {t("components.filter-by", { type: "organisatie" })}
+      </Heading>
+      <LinkList>
+        {organisations &&
+          organisations.map((organisation: any) => (
+            <LinkListLink
+              className={clsx([
+                organisation.uri === routing?.query?.organisation &&
+                  styles.active,
+              ])}
+              key={organisation.uri}
+              href={new URL(
+                `../?organisation=${organisation.uri}`,
+                routing?.url,
+              ).toString()}
+              icon={
+                <ListLinkIcon
+                  isActive={organisation.uri === routing?.query?.organisation}
+                />
+              }
+            >
+              {organisation.label}
+            </LinkListLink>
+          ))}
+      </LinkList>
+
+      {error && (
+        <Alert type="error">
+          {(error as unknown as any).message ||
+            (error as unknown as any).error_msg ||
+            `${status}: ${statusText}` ||
+            t("components.fuzz-error")}
+        </Alert>
+      )}
+    </div>
+  );
+};
+
+const TranslatedFilters = (props: PropsWithChildren<FiltersProps>) => {
+  return (
+    <I18nextProvider i18n={i18n}>
+      <Filters {...props} />
+    </I18nextProvider>
+  );
+};
+
+export default TranslatedFilters;

package/src/filters/styles.module.css

@@ -1,26 +1,26 @@
-.filters {
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--rhc-space-200);
-}
-
-.currentFilter {
-  flex-direction: column;
-}
-
-.active {
-  font-weight: bold;
-}
-
-.icon {
-  flex-shrink: 0;
-  transition: transform 0.2s ease-in-out;
-}
-
-:global(.utrecht-link-list__link:hover) .icon:not(.active) {
-  transform: translateX(0.125rem);
-}
-
-.icon.active {
-  transform: scale(1.5);
-}
+.filters {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rhc-space-200);
+}
+
+.currentFilter {
+  flex-direction: column;
+}
+
+.active {
+  font-weight: bold;
+}
+
+.icon {
+  flex-shrink: 0;
+  transition: transform 0.2s ease-in-out;
+}
+
+:global(.utrecht-link-list__link:hover) .icon:not(.active) {
+  transform: translateX(0.125rem);
+}
+
+.icon.active {
+  transform: scale(1.5);
+}