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

package/src/footer/styles.module.css

@@ -1,103 +1,103 @@
-.footer {
-  --utrecht-page-footer-padding-block-end: 2rem;
-  --utrecht-page-footer-padding-block-start: 1rem;
-  --utrecht-page-footer-padding-inline-end: var(
-    --rhc-nav-bar-link-padding-inline-end
-  );
-  --utrecht-page-footer-padding-inline-start: var(
-    --rhc-nav-bar-link-padding-inline-start
-  );
-  --rhc-page-footer-outlined-color: #154273;
-  --rhc-page-footer-outlined-border-color: var(--rhc-nav-bar-border-color);
-  --rhc-page-footer-border-block-start-width: var(
-    --rhc-nav-bar-border-block-end-width
-  );
-}
-
-.footer {
-  :global(.utrecht-column-layout) {
-    display: flex;
-    justify-content: space-between;
-    inline-size: 100%;
-
-    > * {
-      flex-grow: 0;
-      flex-shrink: 0;
-    }
-  }
-
-  &.numColumns,
-  &.numColumns1 {
-    :global(.utrecht-column-layout) {
-      row-gap: 0.5rem;
-
-      > * {
-        flex-basis: 100%;
-      }
-    }
-  }
-
-  &.numColumns2 {
-    :global(.utrecht-column-layout) {
-      > * {
-        flex-basis: calc(50% - var(--utrecht-column-layout-gap, 2em));
-      }
-    }
-  }
-
-  &.numColumns3 {
-    :global(.utrecht-column-layout) {
-      > * {
-        flex-basis: calc(33.333% - var(--utrecht-column-layout-gap, 2em));
-      }
-    }
-  }
-  &.numColumns4 {
-    :global(.utrecht-column-layout) {
-      flex-wrap: wrap;
-
-      > * {
-        flex-basis: calc(25% - var(--utrecht-column-layout-gap, 2em));
-      }
-    }
-  }
-
-  :global(.utrecht-link-list__link) {
-    align-items: center;
-    :global(.don-icon-externe-link-inline) {
-      order: 1;
-    }
-  }
-}
-
-@media (--xs-and-below-viewport) {
-  .footer.footer {
-    :global(.utrecht-column-layout) {
-      row-gap: 0.5rem;
-
-      > * {
-        flex-basis: calc(50% - var(--utrecht-column-layout-gap, 2em));
-      }
-    }
-  }
-}
-
-@media (--xxs-and-below-viewport) {
-  .footer.footer {
-    :global(.utrecht-column-layout) {
-      row-gap: 0.5rem;
-
-      > * {
-        flex-basis: 100%;
-      }
-    }
-  }
-}
-
-:global(.rhc-page-prefooter.rhc-page-prefooter) {
-  margin-block-start: 2rem;
-
-  &:before {
-    background-color: var(--rhc-nav-bar-border-color);
-  }
-}
+.footer {
+  --utrecht-page-footer-padding-block-end: 2rem;
+  --utrecht-page-footer-padding-block-start: 1rem;
+  --utrecht-page-footer-padding-inline-end: var(
+    --rhc-nav-bar-link-padding-inline-end
+  );
+  --utrecht-page-footer-padding-inline-start: var(
+    --rhc-nav-bar-link-padding-inline-start
+  );
+  --rhc-page-footer-outlined-color: #154273;
+  --rhc-page-footer-outlined-border-color: var(--rhc-nav-bar-border-color);
+  --rhc-page-footer-border-block-start-width: var(
+    --rhc-nav-bar-border-block-end-width
+  );
+}
+
+.footer {
+  :global(.utrecht-column-layout) {
+    display: flex;
+    justify-content: space-between;
+    inline-size: 100%;
+
+    > * {
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+  }
+
+  &.numColumns,
+  &.numColumns1 {
+    :global(.utrecht-column-layout) {
+      row-gap: 0.5rem;
+
+      > * {
+        flex-basis: 100%;
+      }
+    }
+  }
+
+  &.numColumns2 {
+    :global(.utrecht-column-layout) {
+      > * {
+        flex-basis: calc(50% - var(--utrecht-column-layout-gap, 2em));
+      }
+    }
+  }
+
+  &.numColumns3 {
+    :global(.utrecht-column-layout) {
+      > * {
+        flex-basis: calc(33.333% - var(--utrecht-column-layout-gap, 2em));
+      }
+    }
+  }
+  &.numColumns4 {
+    :global(.utrecht-column-layout) {
+      flex-wrap: wrap;
+
+      > * {
+        flex-basis: calc(25% - var(--utrecht-column-layout-gap, 2em));
+      }
+    }
+  }
+
+  :global(.utrecht-link-list__link) {
+    align-items: center;
+    :global(.don-icon-externe-link-inline) {
+      order: 1;
+    }
+  }
+}
+
+@media (--xs-and-below-viewport) {
+  .footer.footer {
+    :global(.utrecht-column-layout) {
+      row-gap: 0.5rem;
+
+      > * {
+        flex-basis: calc(50% - var(--utrecht-column-layout-gap, 2em));
+      }
+    }
+  }
+}
+
+@media (--xxs-and-below-viewport) {
+  .footer.footer {
+    :global(.utrecht-column-layout) {
+      row-gap: 0.5rem;
+
+      > * {
+        flex-basis: 100%;
+      }
+    }
+  }
+}
+
+:global(.rhc-page-prefooter.rhc-page-prefooter) {
+  margin-block-start: 2rem;
+
+  &:before {
+    background-color: var(--rhc-nav-bar-border-color);
+  }
+}

package/src/formFieldCheckboxGroup/FormFieldCheckboxGroup.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FormFieldCheckboxOption from "../formFieldCheckboxOption/FormFieldCheckboxOption";
+import FormFieldCheckboxGroup from "./FormFieldCheckboxGroup";
+
+const organisationOptions = [
+  { value: "kadaster", label: "Kadaster", count: 12, selected: true },
+  { value: "geonovum", label: "Geonovum", count: 8, selected: false },
+  { value: "logius", label: "Logius", count: 5, selected: false },
+];
+
+/**
+ * FormFieldCheckboxGroup groepeert een set `FormFieldCheckboxOption`-velden
+ * onder een gezamenlijk label, beschrijving en foutmelding.
+ *
+ * ## Wijzigingen tov RHC:
+ * - Alleen een extra CSS-klasse; geen wijzigingen in props.
+ */
+const meta = {
+  title: "Components/Form/FormFieldCheckboxGroup",
+  component: FormFieldCheckboxGroup,
+  tags: ["autodocs", "re-export", "remixed"],
+  args: {
+    label: "Organisatie",
+    description: "Filter op eigenaar of beheerder van de registratie.",
+    children: organisationOptions.map((option) => (
+      <FormFieldCheckboxOption
+        key={option.value}
+        name="organisation"
+        value={option.value}
+        label={option.label}
+        amount={option.count}
+        defaultChecked={option.selected}
+      />
+    )),
+  },
+} satisfies Meta<typeof FormFieldCheckboxGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Invalid: Story = {
+  args: {
+    invalid: true,
+    errorMessage: "Kies minimaal één organisatie.",
+  },
+};

package/src/formFieldCheckboxGroup/FormFieldCheckboxGroup.tsx

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

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

package/src/formFieldCheckboxOption/FormFieldCheckboxOption.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FormFieldCheckboxOption from "./FormFieldCheckboxOption";
+
+/**
+ * FormFieldCheckboxOption is een enkele checkbox binnen een
+ * `FormFieldCheckboxGroup`, bijvoorbeeld voor een meerkeuze-filteroptie.
+ *
+ * ## Wijzigingen tov RHC:
+ * - Voegt een `amount`-prop toe, getoond tussen haakjes achter het label
+ *   (via `AmountLabel`).
+ * - `children` worden getoond als extra info naast de optie (bijv. voor een
+ *   ToolTip).
+ */
+const meta = {
+  title: "Components/Form/FormFieldCheckboxOption",
+  component: FormFieldCheckboxOption,
+  tags: ["autodocs", "remixed"],
+  args: {
+    label: "Kadaster",
+    name: "organisation",
+    value: "kadaster",
+  },
+  argTypes: {
+    checked: { control: "boolean" },
+    defaultChecked: { control: "boolean" },
+    disabled: { control: "boolean" },
+    invalid: { control: "boolean" },
+  },
+} satisfies Meta<typeof FormFieldCheckboxOption>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithAmount: Story = {
+  args: {
+    amount: 12,
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    amount: 12,
+    defaultChecked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    amount: 12,
+    disabled: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    amount: 12,
+    invalid: true,
+  },
+};

package/src/formFieldCheckboxOption/FormFieldCheckboxOption.tsx

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

@@ -1,22 +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;
-}
+.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/formFieldLabel/FormFieldLabel.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FormFieldLabel from "./FormFieldLabel";
+
+/**
+ * FormFieldLabel is een label voor een formulierveld, met de
+ * `utrecht-form-label`-stijl van RHC.
+ */
+const meta = {
+  title: "Components/Form/FormFieldLabel",
+  component: FormFieldLabel,
+  tags: ["autodocs", "custom"],
+  args: {
+    children: "E-mailadres",
+    htmlFor: "email",
+  },
+} satisfies Meta<typeof FormFieldLabel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/formFieldLabel/FormFieldLabel.tsx

@@ -1,23 +1,23 @@
-import clsx from "clsx";
-import type React from "react";
-
-interface FormFieldLabelProps {
-  htmlFor?: string;
-  children: React.ReactNode;
-  required?: boolean;
-  className?: string;
-}
-
-const FormFieldLabel: React.FC<FormFieldLabelProps> = ({
-  htmlFor,
-  children,
-  className,
-}) => {
-  return (
-    <label htmlFor={htmlFor} className={clsx("utrecht-form-label", className)}>
-      {children}
-    </label>
-  );
-};
-
-export default FormFieldLabel;
+import clsx from "clsx";
+import type React from "react";
+
+export interface FormFieldLabelProps {
+  htmlFor?: string;
+  children: React.ReactNode;
+  required?: boolean;
+  className?: string;
+}
+
+const FormFieldLabel: React.FC<FormFieldLabelProps> = ({
+  htmlFor,
+  children,
+  className,
+}) => {
+  return (
+    <label htmlFor={htmlFor} className={clsx("utrecht-form-label", className)}>
+      {children}
+    </label>
+  );
+};
+
+export default FormFieldLabel;

package/src/formFieldRadioGroup/FormFieldRadioGroup.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FormFieldRadioOption from "../formFieldRadioOption/FormFieldRadioOption";
+import FormFieldRadioGroup from "./FormFieldRadioGroup";
+
+const lifecycleOptions = [
+  { value: "active", label: "Actief", count: 18, selected: true },
+  { value: "deprecated", label: "Verouderd", count: 2, selected: false },
+];
+
+/**
+ * FormFieldRadioGroup groepeert een set `FormFieldRadioOption`-velden onder
+ * een gezamenlijk label, beschrijving en foutmelding.
+ *
+ * ## Wijzigingen tov RHC:
+ * - Alleen een extra CSS-klasse; geen wijzigingen in props.
+ */
+const meta = {
+  title: "Components/Form/FormFieldRadioGroup",
+  component: FormFieldRadioGroup,
+  tags: ["autodocs", "remixed"],
+  args: {
+    label: "Levensfase",
+    description: "Toon alleen registraties met deze levensfase.",
+    children: (
+      <>
+        <FormFieldRadioOption
+          key="none"
+          name="lifecycle"
+          value=""
+          label="Alles"
+        />
+        {lifecycleOptions.map((option) => (
+          <FormFieldRadioOption
+            key={option.value}
+            name="lifecycle"
+            value={option.value}
+            label={option.label}
+            amount={option.count}
+            defaultChecked={option.selected}
+          />
+        ))}
+      </>
+    ),
+  },
+} satisfies Meta<typeof FormFieldRadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Invalid: Story = {
+  args: {
+    invalid: true,
+    errorMessage: "Kies een levensfase.",
+  },
+};

package/src/formFieldRadioGroup/FormFieldRadioGroup.tsx

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

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

package/src/formFieldRadioOption/FormFieldRadioOption.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FormFieldRadioOption from "./FormFieldRadioOption";
+
+/**
+ * FormFieldRadioOption is een enkele radiobutton binnen een
+ * `FormFieldRadioGroup`, bijvoorbeeld voor een enkelvoudige filteroptie. Het
+ * label toont optioneel een aantal tussen haakjes (via `AmountLabel`).
+ */
+const meta = {
+  title: "Components/Form/FormFieldRadioOption",
+  component: FormFieldRadioOption,
+  tags: ["autodocs", "custom"],
+  args: {
+    label: "Actief",
+    name: "lifecycle",
+    value: "active",
+  },
+  argTypes: {
+    checked: { control: "boolean" },
+    defaultChecked: { control: "boolean" },
+    invalid: { control: "boolean" },
+  },
+} satisfies Meta<typeof FormFieldRadioOption>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithAmount: Story = {
+  args: {
+    amount: 18,
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    amount: 18,
+    defaultChecked: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    amount: 18,
+    invalid: true,
+  },
+};