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

package/src/footer/Footer.tsx

@@ -1,76 +1,76 @@
-import {
-  LinkList,
-  LinkListLink,
-  Footer as RHCFooter,
-} from "@rijkshuisstijl-community/components-react";
-import clsx from "clsx";
-import { type PropsWithChildren, useId } from "react";
-import Heading from "../heading/Heading";
-import Markdown from "../markdown/Markdown";
-import {
-  type NavBarItem,
-  processNavBarItems,
-} from "../topNavigation/TopNavigation";
-import styles from "./styles.module.css";
-
-export interface ColumnProps {
-  title: string;
-  items?: NavBarItem[];
-  text?: string;
-}
-
-export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
-  className?: string;
-  columns?: ColumnProps[];
-}
-
-// TODO: refactor icons together with TopNavigation
-const FooterColumns = (props: ColumnProps) => {
-  const id = useId();
-  const { title, items, text } = props;
-  const processedItems = items && processNavBarItems(items);
-
-  return (
-    <nav className={styles.column} aria-describedby={id}>
-      <Heading level={2} appearanceLevel={5} id={id}>
-        {title}
-      </Heading>
-      {text && <Markdown>{text}</Markdown>}
-      {processedItems && (
-        <LinkList>
-          {processedItems.map((item, index) => (
-            <LinkListLink
-              key={item.id || index}
-              href={item.href}
-              icon={item.icon}
-            >
-              {item.label}
-            </LinkListLink>
-          ))}
-        </LinkList>
-      )}
-    </nav>
-  );
-};
-
-const Footer = (props: PropsWithChildren<FooterProps>) => {
-  const { className, columns, ...restProps } = props;
-  const columnsClass = `numColumns${Math.min(Number(columns?.length), 4)}`;
-
-  return (
-    <RHCFooter
-      className={clsx(className, styles.footer, styles[columnsClass])}
-      background="primary-outlined"
-      preFooter
-      {...restProps}
-    >
-      {columns &&
-        columns.length > 0 &&
-        columns.map((column, index) => (
-          <FooterColumns key={column.title || index} {...column} />
-        ))}
-    </RHCFooter>
-  );
-};
-
-export default Footer;
+import {
+  LinkList,
+  LinkListLink,
+  Footer as RHCFooter,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import { type PropsWithChildren, useId } from "react";
+import Heading from "../heading/Heading";
+import Markdown from "../markdown/Markdown";
+import {
+  type NavBarItem,
+  processNavBarItems,
+} from "../topNavigation/TopNavigation";
+import styles from "./styles.module.css";
+
+export interface ColumnProps {
+  title: string;
+  items?: NavBarItem[];
+  text?: string;
+}
+
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+  className?: string;
+  columns?: ColumnProps[];
+}
+
+// TODO: refactor icons together with TopNavigation
+const FooterColumns = (props: ColumnProps) => {
+  const id = useId();
+  const { title, items, text } = props;
+  const processedItems = items && processNavBarItems(items);
+
+  return (
+    <nav className={styles.column} aria-describedby={id}>
+      <Heading level={2} appearanceLevel={5} id={id}>
+        {title}
+      </Heading>
+      {text && <Markdown>{text}</Markdown>}
+      {processedItems && (
+        <LinkList>
+          {processedItems.map((item, index) => (
+            <LinkListLink
+              key={item.id || index}
+              href={item.href}
+              icon={item.icon}
+            >
+              {item.label}
+            </LinkListLink>
+          ))}
+        </LinkList>
+      )}
+    </nav>
+  );
+};
+
+const Footer = (props: PropsWithChildren<FooterProps>) => {
+  const { className, columns, ...restProps } = props;
+  const columnsClass = `numColumns${Math.min(Number(columns?.length), 4)}`;
+
+  return (
+    <RHCFooter
+      className={clsx(className, styles.footer, styles[columnsClass])}
+      background="primary-outlined"
+      preFooter
+      {...restProps}
+    >
+      {columns &&
+        columns.length > 0 &&
+        columns.map((column, index) => (
+          <FooterColumns key={column.title || index} {...column} />
+        ))}
+    </RHCFooter>
+  );
+};
+
+export default Footer;

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;