@conduction/components 2.2.54 → 2.2.56

package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx

@@ -1,80 +1,80 @@
-import * as React from "react";
-import * as styles from "./HorizontalOverflowWrapper.module.css";
-import clsx from "clsx";
-import { Button } from "@utrecht/component-library-react/dist/css-module";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-
-interface HorizontalOverflowWrapperProps {
-  children: React.ReactNode;
-  ariaLabels: {
-    scrollRightButton: string;
-    scrollLeftButton: string;
-  };
-}
-
-export const HorizontalOverflowWrapper: React.FC<HorizontalOverflowWrapperProps> = ({ children, ariaLabels }) => {
-  const [canScrollRight, setCanScrollRight] = React.useState<boolean>(false);
-  const [canScrollLeft, setCanScrollLeft] = React.useState<boolean>(false);
-
-  const wrapperRef = React.useRef<HTMLDivElement | null>(null);
-
-  const scrollRight = (): void => {
-    wrapperRef.current?.scrollTo({
-      left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
-      behavior: "smooth",
-    });
-  };
-
-  const scrollLeft = (): void => {
-    wrapperRef.current?.scrollTo({
-      left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
-      behavior: "smooth",
-    });
-  };
-
-  React.useEffect(() => {
-    checkScrollDirections(); // initiate available scroll directions
-
-    window.addEventListener("resize", checkScrollDirections);
-
-    return () => window.removeEventListener("resize", checkScrollDirections);
-  }, []);
-
-  const checkScrollDirections = (): void => {
-    if (!wrapperRef.current) return;
-
-    setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
-    setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
-  };
-
-  return (
-    <div className={styles.container}>
-      {canScrollLeft && (
-        <Button
-          className={clsx(styles.scrollButton)}
-          onClick={scrollLeft}
-          appearance="secondary-action-button"
-          aria-label={ariaLabels.scrollLeftButton}
-        >
-          <FontAwesomeIcon icon={faChevronLeft} />
-        </Button>
-      )}
-
-      {canScrollRight && (
-        <Button
-          className={clsx(styles.scrollButton, styles.right)}
-          onClick={scrollRight}
-          appearance="secondary-action-button"
-          aria-label={ariaLabels.scrollRightButton}
-        >
-          <FontAwesomeIcon icon={faChevronRight} />
-        </Button>
-      )}
-
-      <div ref={wrapperRef} className={styles.wrapper} onScroll={checkScrollDirections}>
-        {children}
-      </div>
-    </div>
-  );
-};
+import * as React from "react";
+import * as styles from "./HorizontalOverflowWrapper.module.css";
+import clsx from "clsx";
+import { Button } from "@utrecht/component-library-react/dist/css-module";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+
+interface HorizontalOverflowWrapperProps {
+  children: React.ReactNode;
+  ariaLabels: {
+    scrollRightButton: string;
+    scrollLeftButton: string;
+  };
+}
+
+export const HorizontalOverflowWrapper: React.FC<HorizontalOverflowWrapperProps> = ({ children, ariaLabels }) => {
+  const [canScrollRight, setCanScrollRight] = React.useState<boolean>(false);
+  const [canScrollLeft, setCanScrollLeft] = React.useState<boolean>(false);
+
+  const wrapperRef = React.useRef<HTMLDivElement | null>(null);
+
+  const scrollRight = (): void => {
+    wrapperRef.current?.scrollTo({
+      left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
+      behavior: "smooth",
+    });
+  };
+
+  const scrollLeft = (): void => {
+    wrapperRef.current?.scrollTo({
+      left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
+      behavior: "smooth",
+    });
+  };
+
+  React.useEffect(() => {
+    checkScrollDirections(); // initiate available scroll directions
+
+    window.addEventListener("resize", checkScrollDirections);
+
+    return () => window.removeEventListener("resize", checkScrollDirections);
+  }, []);
+
+  const checkScrollDirections = (): void => {
+    if (!wrapperRef.current) return;
+
+    setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
+    setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
+  };
+
+  return (
+    <div className={styles.container}>
+      {canScrollLeft && (
+        <Button
+          className={clsx(styles.scrollButton)}
+          onClick={scrollLeft}
+          appearance="secondary-action-button"
+          aria-label={ariaLabels.scrollLeftButton}
+        >
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </Button>
+      )}
+
+      {canScrollRight && (
+        <Button
+          className={clsx(styles.scrollButton, styles.right)}
+          onClick={scrollRight}
+          appearance="secondary-action-button"
+          aria-label={ariaLabels.scrollRightButton}
+        >
+          <FontAwesomeIcon icon={faChevronRight} />
+        </Button>
+      )}
+
+      <div ref={wrapperRef} className={styles.wrapper} onScroll={checkScrollDirections}>
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/logo/Logo.tsx

@@ -1,21 +1,24 @@
-import * as React from "react";
-import * as styles from "./Logo.module.css";
-import clsx from "clsx";
-
-interface LogoProps {
-  variant?: "header" | "footer" | "navbar";
-  onClick?: () => any;
-  layoutClassName?: string;
-}
-
-export const Logo: React.FC<LogoProps> = ({ onClick, layoutClassName, variant = "header" }) => {
-  return (
-    <div
-      className={clsx(styles.container, styles[variant], [
-        onClick && styles.clickable,
-        layoutClassName && layoutClassName,
-      ])}
-      {...{ onClick }}
-    />
-  );
-};
+import * as React from "react";
+import * as styles from "./Logo.module.css";
+import clsx from "clsx";
+
+interface LogoProps {
+  variant?: "header" | "footer" | "navbar";
+  onClick?: () => any;
+  layoutClassName?: string;
+  ariaLabel?: string;
+}
+
+export const Logo: React.FC<LogoProps> = ({ onClick, layoutClassName, variant = "header", ariaLabel = "logo" }) => {
+  return (
+    <div
+      className={clsx(styles.container, styles[variant], [
+        onClick && styles.clickable,
+        layoutClassName && layoutClassName,
+      ])}
+      role="img"
+      aria-label={ariaLabel}
+      {...{ onClick }}
+    />
+  );
+};