@developer-overheid-nl/don-register-components 1.0.0 → 1.0.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/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/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);
+  }
+}