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

package/src/dataBadgeLink/styles.module.css

@@ -1,89 +1,89 @@
-.donDataBadge.donDataBadge {
-  .badgeLink {
-    display: inline-block;
-    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)
-      );
-    }
-  }
-
-  &.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);
-    }
-  }
-
-  &.link {
-    --_utrecht-data-badge-color: var(--nl-link-color);
-    --_utrecht-data-badge-background-color: var(--rhc-color-wit);
-    --utrecht-data-badge-font-weight: normal;
-    color: var(--_utrecht-data-badge-color);
-    background-color: var(--_utrecht-data-badge-background-color);
-
-    .badgeLink {
-      text-decoration: underline;
-    }
-
-    &:hover {
-      background-color: var(--rhc-color-cool-grey-100);
-
-      .badgeLink {
-        text-decoration: none;
-      }
-    }
-  }
-
-  &: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);
-  }
-}
+.donDataBadge.donDataBadge {
+  .badgeLink {
+    display: inline-block;
+    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)
+      );
+    }
+  }
+
+  &.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);
+    }
+  }
+
+  &.link {
+    --_utrecht-data-badge-color: var(--nl-link-color);
+    --_utrecht-data-badge-background-color: var(--rhc-color-wit);
+    --utrecht-data-badge-font-weight: normal;
+    color: var(--_utrecht-data-badge-color);
+    background-color: var(--_utrecht-data-badge-background-color);
+
+    .badgeLink {
+      text-decoration: underline;
+    }
+
+    &:hover {
+      background-color: var(--rhc-color-cool-grey-100);
+
+      .badgeLink {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &: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);
+  }
+}

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,75 +1,75 @@
-: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.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.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.5rem;
-  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.25rem;
-  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 {
-  &: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;
-  }
-}
+: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.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.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.5rem;
+  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.25rem;
+  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 {
+  &: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.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { FilterData } from "./FacetFilters";
+import FacetFilters from "./FacetFilters";
+
+const filters = [
+  {
+    key: "organisation",
+    label: "Organisatie",
+    description: "Filter op eigenaar of beheerder van de registratie.",
+    type: "multi-select",
+    options: [
+      {
+        value: "kadaster",
+        label: "Kadaster",
+        count: 12,
+        selected: true,
+      },
+      {
+        value: "geonovum",
+        label: "Geonovum",
+        description: "Standaardisatieorganisatie voor geografische informatie.",
+        count: 8,
+        selected: false,
+      },
+      {
+        value: "logius",
+        label: "Logius",
+        count: 5,
+        selected: false,
+      },
+    ],
+  },
+  {
+    key: "lifecycle",
+    label: "Levensfase",
+    description: "Toon alleen registraties met deze levensfase.",
+    type: "single-select",
+    options: [
+      {
+        value: "active",
+        label: "Actief",
+        count: 18,
+        selected: true,
+      },
+      {
+        value: "deprecated",
+        label: "Verouderd",
+        count: 2,
+        selected: false,
+      },
+    ],
+  },
+  {
+    key: "publiccode",
+    label: ["Heeft publiccode.yml", "Heeft geen publiccode.yml"],
+    description:
+      "Filter repositories op aanwezigheid van een publiccode.yml bestand.",
+    type: "toggle",
+    value: true,
+    count: 9,
+    isExplicitFalse: true,
+  },
+] as unknown as FilterData[];
+
+/**
+ * FacetFilters rendert een set filters (meerkeuze, enkele keuze en/of
+ * schakelaars) op basis van een `filters`-array en meldt wijzigingen via
+ * `onFilterChange`, eventueel gedebounced per filtertype.
+ */
+const meta = {
+  title: "Components/FacetFilters",
+  component: FacetFilters,
+  tags: ["autodocs", "todo"],
+  parameters: {
+    layout: "narrow",
+  },
+  args: {
+    title: "Filters",
+    filters,
+    explicitFalseFilters: ["publiccode"],
+  },
+} satisfies Meta<typeof FacetFilters>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Empty: Story = {
+  args: {
+    filters: [],
+  },
+};