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

package/src/formFieldSwitch/FormFieldSwitch.tsx

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

package/src/formFieldSwitch/styles.module.css

@@ -0,0 +1,32 @@
+.switch.switch {
+  --utrecht-form-field-label-margin-block-end: 0;
+  --utrecht-checkbox-size: var(--utrecht-form-toggle-width);
+
+  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);
+  }
+}
+
+.info {
+  grid-area: info;
+}

package/src/formFieldTextInput/FormFieldTextInput.tsx

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

package/src/header/Header.tsx

@@ -1,137 +1,137 @@
-import { Lint } from "@developer-overheid-nl/proprietary";
-import {
-  Heading /*, Link */,
-} from "@rijkshuisstijl-community/components-react";
-import { I18nextProvider, useTranslation } from "react-i18next";
-import i18n from "../i18n";
-import SiteLogo from "../siteLogo/SiteLogo";
-import styles from "./styles.module.css";
-// import { IconDeltaNaarLinksInline } from "../../../../proprietary/icons";
-
-export interface HeaderProps extends LogoNavProps {
-  titleSite: string;
-  titlePage: string;
-}
-
-interface LogoNavProps {
-  mainSite: { name: string; url: string };
-  urlCurrent?: string;
-  /**
-   * routePattern(s) that are considered hompages, e.g. `/`, `/apis`, `/apis/[...pages]`
-   * The first item in the array will be used for the homepage link.
-   *
-   * @type string[]
-   */
-  urlHomepage?: string[];
-  /**
-   * How the link around the logo should behave.
-   * - `no-link`: always no link around the logo
-   * - `site-home`: (default) a link around the logo that links back to this site, no link on hompeage
-   * - `main-site`: a link around the logo that links always back to the main site
-   * - `main-site-on-home`: a link around the logo that links back to this site's homepage, but on the homepage links back to the main site
-   *
-   * Note: translation keys: `components.back-to-homepage-landmark`, ...
-   */
-  logoLinkBehaviour?:
-    | "no-link"
-    | "site-home"
-    | "main-site"
-    | "main-site-on-home";
-}
-
-function LogoNav(props: LogoNavProps) {
-  const { t } = useTranslation();
-  const {
-    mainSite,
-    urlCurrent = "/",
-    urlHomepage = ["/"],
-    logoLinkBehaviour,
-  } = props;
-  let isRoot: boolean = urlHomepage.includes(urlCurrent);
-  let href: string = "/";
-  let landmark: string | undefined;
-  let title: string | undefined;
-
-  switch (logoLinkBehaviour) {
-    case "no-link":
-      isRoot = true;
-      break;
-    case "main-site":
-      isRoot = false;
-      href = mainSite.url;
-      landmark = t("components.back-to-main-site-landmark", {
-        siteName: mainSite.name,
-      });
-      break;
-    case "main-site-on-home":
-      href = isRoot ? mainSite.url : urlHomepage[0] || "/";
-      landmark = isRoot
-        ? t("components.back-to-main-site-landmark", {
-            siteName: mainSite.name,
-          })
-        : t("components.back-to-homepage-landmark");
-      title = isRoot
-        ? t("components.back-to-main-site", { siteName: mainSite.name })
-        : t("components.back-to-homepage");
-      isRoot = false;
-      break;
-    default:
-      href = urlHomepage[0] || "/";
-      landmark = isRoot ? undefined : t("components.back-to-homepage-landmark");
-      break;
-  }
-
-  return landmark ? (
-    <nav aria-label={landmark} title={title}>
-      <SiteLogo isRoot={isRoot} href={href} />
-    </nav>
-  ) : (
-    <div className="nav">
-      <SiteLogo isRoot={isRoot} href={href} />
-    </div>
-  );
-}
-
-function Header({
-  titleSite,
-  titlePage,
-  mainSite,
-  urlCurrent,
-  urlHomepage,
-  logoLinkBehaviour,
-}: HeaderProps) {
-  // const { t } = useTranslation();
-
-  return (
-    <header className={styles.header}>
-      <LogoNav
-        mainSite={mainSite}
-        urlCurrent={urlCurrent}
-        urlHomepage={urlHomepage}
-        logoLinkBehaviour={logoLinkBehaviour}
-      />
-      <Lint className={styles.lint} />
-      <div className={styles.title}>
-        <Heading level={1} appearanceLevel={3} className={styles.heading}>
-          {titleSite}
-          <span className="sr-only">: {titlePage}</span>
-        </Heading>
-        {/* TODO: uncomment and update component if backlink here is still needed... */}
-        {/* <nav aria-label={t('components.back-to-main-site-landmark')}>
-          <Link href={mainSite.url} className={styles.link}>
-            <IconDeltaNaarLinksInline className={styles.icon} /> 
-            {t('components.back-to-main-site', { siteName: mainSite.name })}
-          </Link>
-        </nav> */}
-      </div>
-    </header>
-  );
-}
-
-export default function TranslatedHeader(props: HeaderProps) {
-  return (
-    <I18nextProvider i18n={i18n}>
-      <Header {...props} />
-    </I18nextProvider>
-  );
-}
+import { Lint } from "@developer-overheid-nl/proprietary";
+import {
+  Heading /*, Link */,
+} from "@rijkshuisstijl-community/components-react";
+import { I18nextProvider, useTranslation } from "react-i18next";
+import i18n from "../i18n";
+import SiteLogo from "../siteLogo/SiteLogo";
+import styles from "./styles.module.css";
+// import { IconDeltaNaarLinksInline } from "../../../../proprietary/icons";
+
+export interface HeaderProps extends LogoNavProps {
+  titleSite: string;
+  titlePage: string;
+}
+
+interface LogoNavProps {
+  mainSite: { name: string; url: string };
+  urlCurrent?: string;
+  /**
+   * routePattern(s) that are considered hompages, e.g. `/`, `/apis`, `/apis/[...pages]`
+   * The first item in the array will be used for the homepage link.
+   *
+   * @type string[]
+   */
+  urlHomepage?: string[];
+  /**
+   * How the link around the logo should behave.
+   * - `no-link`: always no link around the logo
+   * - `site-home`: (default) a link around the logo that links back to this site, no link on hompeage
+   * - `main-site`: a link around the logo that links always back to the main site
+   * - `main-site-on-home`: a link around the logo that links back to this site's homepage, but on the homepage links back to the main site
+   *
+   * Note: translation keys: `components.back-to-homepage-landmark`, ...
+   */
+  logoLinkBehaviour?:
+    | "no-link"
+    | "site-home"
+    | "main-site"
+    | "main-site-on-home";
+}
+
+function LogoNav(props: LogoNavProps) {
+  const { t } = useTranslation();
+  const {
+    mainSite,
+    urlCurrent = "/",
+    urlHomepage = ["/"],
+    logoLinkBehaviour,
+  } = props;
+  let isRoot: boolean = urlHomepage.includes(urlCurrent);
+  let href: string = "/";
+  let landmark: string | undefined;
+  let title: string | undefined;
+
+  switch (logoLinkBehaviour) {
+    case "no-link":
+      isRoot = true;
+      break;
+    case "main-site":
+      isRoot = false;
+      href = mainSite.url;
+      landmark = t("components.back-to-main-site-landmark", {
+        siteName: mainSite.name,
+      });
+      break;
+    case "main-site-on-home":
+      href = isRoot ? mainSite.url : urlHomepage[0] || "/";
+      landmark = isRoot
+        ? t("components.back-to-main-site-landmark", {
+            siteName: mainSite.name,
+          })
+        : t("components.back-to-homepage-landmark");
+      title = isRoot
+        ? t("components.back-to-main-site", { siteName: mainSite.name })
+        : t("components.back-to-homepage");
+      isRoot = false;
+      break;
+    default:
+      href = urlHomepage[0] || "/";
+      landmark = isRoot ? undefined : t("components.back-to-homepage-landmark");
+      break;
+  }
+
+  return landmark ? (
+    <nav aria-label={landmark} title={title}>
+      <SiteLogo isRoot={isRoot} href={href} />
+    </nav>
+  ) : (
+    <div className="nav">
+      <SiteLogo isRoot={isRoot} href={href} />
+    </div>
+  );
+}
+
+function Header({
+  titleSite,
+  titlePage,
+  mainSite,
+  urlCurrent,
+  urlHomepage,
+  logoLinkBehaviour,
+}: HeaderProps) {
+  // const { t } = useTranslation();
+
+  return (
+    <header className={styles.header}>
+      <LogoNav
+        mainSite={mainSite}
+        urlCurrent={urlCurrent}
+        urlHomepage={urlHomepage}
+        logoLinkBehaviour={logoLinkBehaviour}
+      />
+      <Lint className={styles.lint} />
+      <div className={styles.title}>
+        <Heading level={1} appearanceLevel={3} className={styles.heading}>
+          {titleSite}
+          <span className="sr-only">: {titlePage}</span>
+        </Heading>
+        {/* TODO: uncomment and update component if backlink here is still needed... */}
+        {/* <nav aria-label={t('components.back-to-main-site-landmark')}>
+          <Link href={mainSite.url} className={styles.link}>
+            <IconDeltaNaarLinksInline className={styles.icon} /> 
+            {t('components.back-to-main-site', { siteName: mainSite.name })}
+          </Link>
+        </nav> */}
+      </div>
+    </header>
+  );
+}
+
+export default function TranslatedHeader(props: HeaderProps) {
+  return (
+    <I18nextProvider i18n={i18n}>
+      <Header {...props} />
+    </I18nextProvider>
+  );
+}

package/src/header/styles.module.css

@@ -1,71 +1,71 @@
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-block: 0 0.5rem;
-
-  > * {
-    flex-basis: 33.3333%;
-  }
-}
-
-@media (--xxs-and-below-viewport) {
-  .header {
-    flex-direction: column;
-
-    > * {
-      flex-basis: auto;
-    }
-  }
-}
-
-@media (--xs-and-below-viewport) {
-  .header {
-    flex-wrap: wrap;
-    row-gap: 0.5rem;
-
-    > * {
-      flex-basis: auto;
-      order: 2;
-    }
-  }
-
-  .lint {
-    flex-basis: 100%;
-    order: 1;
-  }
-}
-
-.title {
-  margin-inline-start: 1rem;
-  text-align: end;
-}
-
-.heading {
-  margin: 0;
-  margin-block-end: 0.5rem;
-}
-
-.icon {
-  inline-size: 0.875rem;
-  block-size: 0.875rem;
-  fill: currentColor;
-  transition: all 0.25s ease-in-out;
-}
-
-.link.link:any-link {
-  align-items: center;
-  text-decoration-line: none;
-  transition: all 0.25s ease-in-out;
-}
-
-.link.link:any-link:hover {
-  text-decoration-line: underline;
-  /* first skip-ink needed for Chromium browsers, otherwise .nl-link `none` is used */
-  text-decoration-skip-ink: auto;
-  text-decoration-skip-ink: all; /* bugged in Chromium */
-
-  .icon {
-    transform: translateX(-0.0625rem);
-  }
-}
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: 0 0.5rem;
+
+  > * {
+    flex-basis: 33.3333%;
+  }
+}
+
+@media (--xxs-and-below-viewport) {
+  .header {
+    flex-direction: column;
+
+    > * {
+      flex-basis: auto;
+    }
+  }
+}
+
+@media (--xs-and-below-viewport) {
+  .header {
+    flex-wrap: wrap;
+    row-gap: 0.5rem;
+
+    > * {
+      flex-basis: auto;
+      order: 2;
+    }
+  }
+
+  .lint {
+    flex-basis: 100%;
+    order: 1;
+  }
+}
+
+.title {
+  margin-inline-start: 1rem;
+  text-align: end;
+}
+
+.heading {
+  margin: 0;
+  margin-block-end: 0.5rem;
+}
+
+.icon {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+  fill: currentColor;
+  transition: all 0.25s ease-in-out;
+}
+
+.link.link:any-link {
+  align-items: center;
+  text-decoration-line: none;
+  transition: all 0.25s ease-in-out;
+}
+
+.link.link:any-link:hover {
+  text-decoration-line: underline;
+  /* first skip-ink needed for Chromium browsers, otherwise .nl-link `none` is used */
+  text-decoration-skip-ink: auto;
+  text-decoration-skip-ink: all; /* bugged in Chromium */
+
+  .icon {
+    transform: translateX(-0.0625rem);
+  }
+}

package/src/heading/Heading.tsx

@@ -1,10 +1,15 @@
-import {
-  type HeadingProps,
-  Heading as RHCHeading,
-} from "@rijkshuisstijl-community/components-react";
-
-const Heading = (props: HeadingProps) => {
-  return <RHCHeading {...props} />;
-};
-
-export default Heading;
+import {
+  type HeadingProps,
+  Heading as RHCHeading,
+} from "@rijkshuisstijl-community/components-react";
+
+export type { HeadingProps } from "@rijkshuisstijl-community/components-react";
+
+export const clampHeadingLevel = (headingLevel: number) =>
+  Math.max(1, Math.min(headingLevel + 1, 5)) as HeadingProps["level"];
+
+const Heading = (props: HeadingProps) => {
+  return <RHCHeading {...props} />;
+};
+
+export default Heading;

package/src/headingGroup/HeadingGroup.tsx

@@ -1,48 +1,48 @@
-import {
-  Heading,
-  type HeadingProps,
-  Paragraph,
-  HeadingGroup as RHCHeadingGroup,
-  type HeadingGroupProps as RHCHeadingGroupProps,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import type { HTMLProps, PropsWithChildren, ReactNode } from "react";
-import styles from "./styles.module.css";
-
-export interface HeadingGroupProps extends RHCHeadingGroupProps {
-  title: string;
-  subTitle?: string | ReactNode;
-  level: HeadingProps["level"];
-  appearanceLevel?: HeadingProps["appearanceLevel"];
-  subTitleProps?: HTMLProps<Paragraph>;
-}
-
-const HeadingGroup = (props: PropsWithChildren<HeadingGroupProps>) => {
-  const {
-    title,
-    subTitle,
-    level,
-    appearanceLevel,
-    className,
-    subTitleProps,
-    children,
-    ...restProps
-  } = props;
-  return (
-    <RHCHeadingGroup
-      className={clsx(className, styles.headingGroup)}
-      {...restProps}
-    >
-      <Heading appearanceLevel={appearanceLevel} level={level}>
-        {title}
-      </Heading>
-      {typeof subTitle === "string" ? (
-        <Paragraph {...subTitleProps}>{subTitle}</Paragraph>
-      ) : (
-        subTitle || children
-      )}
-    </RHCHeadingGroup>
-  );
-};
-
-export default HeadingGroup;
+import {
+  Heading,
+  type HeadingProps,
+  Paragraph,
+  HeadingGroup as RHCHeadingGroup,
+  type HeadingGroupProps as RHCHeadingGroupProps,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import type { HTMLProps, PropsWithChildren, ReactNode } from "react";
+import styles from "./styles.module.css";
+
+export interface HeadingGroupProps extends RHCHeadingGroupProps {
+  title: string;
+  subTitle?: string | ReactNode;
+  level: HeadingProps["level"];
+  appearanceLevel?: HeadingProps["appearanceLevel"];
+  subTitleProps?: HTMLProps<Paragraph>;
+}
+
+const HeadingGroup = (props: PropsWithChildren<HeadingGroupProps>) => {
+  const {
+    title,
+    subTitle,
+    level,
+    appearanceLevel,
+    className,
+    subTitleProps,
+    children,
+    ...restProps
+  } = props;
+  return (
+    <RHCHeadingGroup
+      className={clsx(className, styles.headingGroup)}
+      {...restProps}
+    >
+      <Heading appearanceLevel={appearanceLevel} level={level}>
+        {title}
+      </Heading>
+      {typeof subTitle === "string" ? (
+        <Paragraph {...subTitleProps}>{subTitle}</Paragraph>
+      ) : (
+        subTitle || children
+      )}
+    </RHCHeadingGroup>
+  );
+};
+
+export default HeadingGroup;

package/src/headingGroup/styles.module.css

@@ -1,3 +1,3 @@
-.headingGroup {
-  inline-size: 100%;
-}
+.headingGroup {
+  inline-size: 100%;
+}