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

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.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.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";
+
+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.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.tsx

@@ -1,75 +1,75 @@
-import {
-  type CustomFormFieldProps,
-  FormField,
-  Radio as RHCRadio,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import { Fragment, useId } from "react";
-import AmountLabel, { type AmountLabelProps } from "../amountLabel/AmountLabel";
-import styles from "./styles.module.css";
-
-export interface FormFieldRadioOptionProps
-  extends Omit<
-      CustomFormFieldProps,
-      "label" | "statusId" | "errorMessageId" | "descriptionId" | "input"
-    >,
-    AmountLabelProps {
-  name: string;
-  value: string;
-  checked?: boolean;
-  defaultChecked?: boolean;
-  statusId?: CustomFormFieldProps["statusId"];
-  errorMessageId?: CustomFormFieldProps["errorMessageId"];
-  descriptionId?: CustomFormFieldProps["descriptionId"];
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-}
-
-const FormFieldRadioOption = (props: FormFieldRadioOptionProps) => {
-  const genId = useId();
-  const {
-    id = genId,
-    statusId = genId,
-    errorMessageId = genId,
-    descriptionId = genId,
-    name,
-    value,
-    defaultChecked,
-    checked,
-    amount,
-    label,
-    className,
-    children,
-    onChange,
-    ...restProps
-  } = props;
-
-  return (
-    <FormField
-      type="radio" // although not exposed by RHC
-      className={clsx("utrecht-form-field--radio", styles.radio, className)}
-      statusId={statusId}
-      errorMessageId={errorMessageId}
-      descriptionId={descriptionId}
-      label={
-        <Fragment>
-          <RHCRadio
-            id={id}
-            name={name}
-            value={value}
-            checked={checked}
-            defaultChecked={defaultChecked}
-            className="utrecht-checkbox--custom utrecht-form-field__input"
-            onChange={onChange}
-          />
-          <AmountLabel label={label} amount={amount} />
-        </Fragment>
-      }
-      input={null}
-      {...restProps}
-    >
-      <span className={styles.info}>{children}</span>
-    </FormField>
-  );
-};
-
-export default FormFieldRadioOption;
+import {
+  type CustomFormFieldProps,
+  FormField,
+  Radio as RHCRadio,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import { Fragment, useId } from "react";
+import AmountLabel, { type AmountLabelProps } from "../amountLabel/AmountLabel";
+import styles from "./styles.module.css";
+
+export interface FormFieldRadioOptionProps
+  extends Omit<
+      CustomFormFieldProps,
+      "label" | "statusId" | "errorMessageId" | "descriptionId" | "input"
+    >,
+    AmountLabelProps {
+  name: string;
+  value: string;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  statusId?: CustomFormFieldProps["statusId"];
+  errorMessageId?: CustomFormFieldProps["errorMessageId"];
+  descriptionId?: CustomFormFieldProps["descriptionId"];
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+const FormFieldRadioOption = (props: FormFieldRadioOptionProps) => {
+  const genId = useId();
+  const {
+    id = genId,
+    statusId = genId,
+    errorMessageId = genId,
+    descriptionId = genId,
+    name,
+    value,
+    defaultChecked,
+    checked,
+    amount,
+    label,
+    className,
+    children,
+    onChange,
+    ...restProps
+  } = props;
+
+  return (
+    <FormField
+      type="radio" // although not exposed by RHC
+      className={clsx("utrecht-form-field--radio", styles.radio, className)}
+      statusId={statusId}
+      errorMessageId={errorMessageId}
+      descriptionId={descriptionId}
+      label={
+        <Fragment>
+          <RHCRadio
+            id={id}
+            name={name}
+            value={value}
+            checked={checked}
+            defaultChecked={defaultChecked}
+            className="utrecht-checkbox--custom utrecht-form-field__input"
+            onChange={onChange}
+          />
+          <AmountLabel label={label} amount={amount} />
+        </Fragment>
+      }
+      input={null}
+      {...restProps}
+    >
+      <span className={styles.info}>{children}</span>
+    </FormField>
+  );
+};
+
+export default FormFieldRadioOption;

package/src/formFieldRadioOption/styles.module.css

@@ -1,49 +1,49 @@
-.radio.radio {
-  --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-field--radio .utrecht-form-field__label) {
-    display: block;
-  }
-
-  :global(.utrecht-form-label) {
-    /* like checkbox */
-    display: flex;
-    font-weight: var(
-      --utrecht-form-label-checkbox-font-weight,
-      var(--utrecht-form-label-font-weight)
-    );
-    color: var(
-      --utrecht-form-label-checkbox-color,
-      var(--utrecht-form-label-color)
-    );
-    cursor: var(--utrecht-action-activate-cursor, revert);
-  }
-
-  :global(.utrecht-radio-button) {
-    order: initial;
-    margin-block-start: 0;
-  }
-
-  :global(
-      .utrecht-form-field--radio
-      .utrecht-form-field__label:has(.utrecht-form-field__input)
-    ) {
-    margin-inline-start: calc(
-      -1 *
-      (
-        var(--utrecht-radio-button-size) +
-        var(--utrecht-checkbox-margin-inline-end, 12px)
-      )
-    );
-  }
-}
-
-.info {
-  grid-area: info;
-}
+.radio.radio {
+  --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-field--radio .utrecht-form-field__label) {
+    display: block;
+  }
+
+  :global(.utrecht-form-label) {
+    /* like checkbox */
+    display: flex;
+    font-weight: var(
+      --utrecht-form-label-checkbox-font-weight,
+      var(--utrecht-form-label-font-weight)
+    );
+    color: var(
+      --utrecht-form-label-checkbox-color,
+      var(--utrecht-form-label-color)
+    );
+    cursor: var(--utrecht-action-activate-cursor, revert);
+  }
+
+  :global(.utrecht-radio-button) {
+    order: initial;
+    margin-block-start: 0;
+  }
+
+  :global(
+      .utrecht-form-field--radio
+      .utrecht-form-field__label:has(.utrecht-form-field__input)
+    ) {
+    margin-inline-start: calc(
+      -1 *
+      (
+        var(--utrecht-radio-button-size) +
+        var(--utrecht-checkbox-margin-inline-end, 12px)
+      )
+    );
+  }
+}
+
+.info {
+  grid-area: info;
+}

package/src/formFieldSwitch/FormFieldSwitch.tsx

@@ -1,79 +1,79 @@
-import {
-  type CustomFormFieldProps,
-  FormField,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import { useId } from "react";
-import AmountLabel, { type AmountLabelProps } from "../amountLabel/AmountLabel";
-import Switch, { type SwitchLabels } from "../switch/Switch";
-import styles from "./styles.module.css";
-
-export interface FormFieldSwitchProps
-  extends Omit<
-      CustomFormFieldProps,
-      "label" | "statusId" | "errorMessageId" | "descriptionId" | "input"
-    >,
-    AmountLabelProps {
-  name: string;
-  value: string;
-  checked?: boolean;
-  defaultChecked?: boolean;
-  statusId?: CustomFormFieldProps["statusId"];
-  errorMessageId?: CustomFormFieldProps["errorMessageId"];
-  descriptionId?: CustomFormFieldProps["descriptionId"];
-  labelledById?: string;
-  labels?: SwitchLabels;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-}
-
-const FormFieldSwitch = (props: FormFieldSwitchProps) => {
-  const genId = useId();
-  const {
-    id = genId,
-    statusId = genId,
-    errorMessageId = genId,
-    descriptionId = genId,
-    labelledById,
-    name,
-    value,
-    defaultChecked,
-    checked,
-    amount,
-    label,
-    labels,
-    onChange,
-    className,
-    children,
-    ...restProps
-  } = props;
-
-  return (
-    <FormField
-      id={id}
-      type="checkbox"
-      className={clsx("utrecht-form-field--checkbox", styles.switch, className)}
-      statusId={statusId}
-      errorMessageId={errorMessageId}
-      descriptionId={descriptionId}
-      label={<AmountLabel label={label} amount={amount} />}
-      input={
-        <Switch
-          id={id}
-          name={name}
-          value={value}
-          checked={checked}
-          defaultChecked={defaultChecked}
-          className="utrecht-form-field__input"
-          labels={labels}
-          aria-labelledby={`${labelledById} ${id}`}
-          onChange={onChange}
-        />
-      }
-      {...restProps}
-    >
-      <span className={styles.info}>{children}</span>
-    </FormField>
-  );
-};
-
-export default FormFieldSwitch;
+import {
+  type CustomFormFieldProps,
+  FormField,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import { useId } from "react";
+import AmountLabel, { type AmountLabelProps } from "../amountLabel/AmountLabel";
+import Switch, { type SwitchLabels } from "../switch/Switch";
+import styles from "./styles.module.css";
+
+export interface FormFieldSwitchProps
+  extends Omit<
+      CustomFormFieldProps,
+      "label" | "statusId" | "errorMessageId" | "descriptionId" | "input"
+    >,
+    AmountLabelProps {
+  name?: string;
+  value: string;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  statusId?: CustomFormFieldProps["statusId"];
+  errorMessageId?: CustomFormFieldProps["errorMessageId"];
+  descriptionId?: CustomFormFieldProps["descriptionId"];
+  labelledById?: string;
+  labels?: SwitchLabels;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+const FormFieldSwitch = (props: FormFieldSwitchProps) => {
+  const genId = useId();
+  const {
+    id = genId,
+    statusId = genId,
+    errorMessageId = genId,
+    descriptionId = genId,
+    labelledById,
+    name,
+    value,
+    defaultChecked,
+    checked,
+    amount,
+    label,
+    labels,
+    onChange,
+    className,
+    children,
+    ...restProps
+  } = props;
+
+  return (
+    <FormField
+      id={id}
+      type="checkbox"
+      className={clsx("utrecht-form-field--checkbox", styles.switch, className)}
+      statusId={statusId}
+      errorMessageId={errorMessageId}
+      descriptionId={descriptionId}
+      label={<AmountLabel label={label} amount={amount} />}
+      input={
+        <Switch
+          id={id}
+          name={name}
+          value={value}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          className="utrecht-form-field__input"
+          labels={labels}
+          aria-labelledby={`${labelledById} ${id}`}
+          onChange={onChange}
+        />
+      }
+      {...restProps}
+    >
+      <span className={styles.info}>{children}</span>
+    </FormField>
+  );
+};
+
+export default FormFieldSwitch;