@conduction/components 2.2.51 → 2.2.53

package/README.md

@@ -4,6 +4,8 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.53: Updated Pagination and PrimaryTopNav components to allow text-decorations and border-bottoms.
+  - 2.2.52: Added hover filter to Logo component.
   - 2.2.51:
     - Added text-decoration tokens to CardHeader.
     - Added label color tokens to checkbox.

package/lib/components/Pagination/Pagination.module.css

@@ -22,6 +22,8 @@
   /* --conduction-pagination-item-border-bottom-width: unset;
   --conduction-pagination-item-border-bottom-style: unset;
   --conduction-pagination-item-border-bottom-color: unset; */
+  /* --conduction-pagination-item-text-decoration: unset; */
+  /* --conduction-pagination-item-text-decoration-thickness: 0px; */
 
   /* --conduction-pagination-navigation-button-background-color: #4376fc; */
   /* --conduction-pagination-navigation-button-color: #ffffff; */
@@ -112,6 +114,7 @@
   font-weight: var(--conduction-pagination-current-page-font-weight);
   font-family: var(--conduction-pagination-item-font-family);
   text-decoration: var(--conduction-pagination-current-page-text-decoration);
+  text-decoration-thickness: var(--conduction-pagination-current-page-text-decoration-thickness);
 }
 
 .container > li:not(.previous):not(.next):not(.currentPage) > a {
@@ -131,6 +134,7 @@
   font-size: var(--conduction-pagination-item-font-size);
   font-weight: var(--conduction-pagination-item-font-weight);
   font-family: var(--conduction-pagination-item-font-family);
+  text-decoration: var(--conduction-pagination-item-text-decoration);
 }
 
 .button {

package/lib/components/logo/Logo.module.css

@@ -2,14 +2,17 @@
   --conduction-logo-header-inline-size: 220px;
   --conduction-logo-header-block-size: 40px;
   --conduction-logo-header-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
+  /* --conduction-logo-header-hover-filter: brightness(1.1); */
 
   --conduction-logo-footer-inline-size: 330px;
   --conduction-logo-footer-block-size: 60px;
   --conduction-logo-footer-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
+  /* --conduction-logo-footer-hover-filter: brightness(1.1); */
 
   --conduction-logo-navbar-inline-size: 150px;
   --conduction-logo-navbar-block-size: 40px;
   --conduction-logo-navbar-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
+  /* --conduction-logo-navbar-hover-filter: brightness(1.1); */
 }
 
 .container {
@@ -23,12 +26,18 @@
   block-size: var(--conduction-logo-header-block-size);
   background-image: var(--conduction-logo-header-background-image);
 }
+.container.header:hover {
+  filter: var(--conduction-logo-header-hover-filter);
+}
 
 .container.footer {
   inline-size: var(--conduction-logo-footer-inline-size);
   block-size: var(--conduction-logo-footer-block-size);
   background-image: var(--conduction-logo-footer-background-image);
 }
+.container.footer:hover {
+  filter: var(--conduction-logo-footer-hover-filter);
+}
 
 .container.navbar {
   inline-size: var(--conduction-logo-navbar-inline-size);
@@ -36,6 +45,10 @@
   background-image: var(--conduction-logo-navbar-background-image);
 }
 
+.container.navbar:hover {
+  filter: var(--conduction-logo-navbar-hover-filter);
+}
+
 .container.clickable:hover {
   cursor: pointer;
 }

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css

@@ -26,6 +26,10 @@
   /* --conduction-primary-top-nav-dropdown-hover-background-color: #ffffff; */
   /* --conduction-primary-top-nav-dropdown-hover-box-shadow: inset 0 -4px black; */
 
+  /* --conduction-primary-top-nav-dropdown-item-border-bottom-width: 4px;
+  --conduction-primary-top-nav-dropdown-item-border-bottom-style: solid;
+  --conduction-primary-top-nav-dropdown-item-border-bottom-color: #4376fc; */
+
   /* --conduction-primary-top-nav-container-padding-block-end: 18px; */
   /* --conduction-primary-top-nav-container-padding-block-start: 18px; */
   /* --conduction-primary-top-nav-container-padding-inline-end: 18px; */
@@ -237,6 +241,9 @@
 .dropdown > li {
   padding-inline-start: 18px;
   font-weight: var(--conduction-primary-top-nav-dropdown-font-weight);
+  border-bottom-width: var(--conduction-primary-top-nav-dropdown-item-border-bottom-width);
+  border-bottom-style: var(--conduction-primary-top-nav-dropdown-item-border-bottom-style);
+  border-bottom-color: var(--conduction-primary-top-nav-dropdown-item-border-bottom-color);
 }
 
 .toggleIcon {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.51",
+  "version": "2.2.53",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Pagination/Pagination.module.css

@@ -22,6 +22,8 @@
   /* --conduction-pagination-item-border-bottom-width: unset;
   --conduction-pagination-item-border-bottom-style: unset;
   --conduction-pagination-item-border-bottom-color: unset; */
+  /* --conduction-pagination-item-text-decoration: unset; */
+  /* --conduction-pagination-item-text-decoration-thickness: 0px; */
 
   /* --conduction-pagination-navigation-button-background-color: #4376fc; */
   /* --conduction-pagination-navigation-button-color: #ffffff; */
@@ -112,6 +114,7 @@
   font-weight: var(--conduction-pagination-current-page-font-weight);
   font-family: var(--conduction-pagination-item-font-family);
   text-decoration: var(--conduction-pagination-current-page-text-decoration);
+  text-decoration-thickness: var(--conduction-pagination-current-page-text-decoration-thickness);
 }
 
 .container > li:not(.previous):not(.next):not(.currentPage) > a {
@@ -131,6 +134,7 @@
   font-size: var(--conduction-pagination-item-font-size);
   font-weight: var(--conduction-pagination-item-font-weight);
   font-family: var(--conduction-pagination-item-font-family);
+  text-decoration: var(--conduction-pagination-item-text-decoration);
 }
 
 .button {

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.module.css

@@ -2,14 +2,17 @@
   --conduction-logo-header-inline-size: 220px;
   --conduction-logo-header-block-size: 40px;
   --conduction-logo-header-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
+  /* --conduction-logo-header-hover-filter: brightness(1.1); */
 
   --conduction-logo-footer-inline-size: 330px;
   --conduction-logo-footer-block-size: 60px;
   --conduction-logo-footer-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
+  /* --conduction-logo-footer-hover-filter: brightness(1.1); */
 
   --conduction-logo-navbar-inline-size: 150px;
   --conduction-logo-navbar-block-size: 40px;
   --conduction-logo-navbar-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
+  /* --conduction-logo-navbar-hover-filter: brightness(1.1); */
 }
 
 .container {
@@ -23,12 +26,18 @@
   block-size: var(--conduction-logo-header-block-size);
   background-image: var(--conduction-logo-header-background-image);
 }
+.container.header:hover {
+  filter: var(--conduction-logo-header-hover-filter);
+}
 
 .container.footer {
   inline-size: var(--conduction-logo-footer-inline-size);
   block-size: var(--conduction-logo-footer-block-size);
   background-image: var(--conduction-logo-footer-background-image);
 }
+.container.footer:hover {
+  filter: var(--conduction-logo-footer-hover-filter);
+}
 
 .container.navbar {
   inline-size: var(--conduction-logo-navbar-inline-size);
@@ -36,6 +45,10 @@
   background-image: var(--conduction-logo-navbar-background-image);
 }
 
+.container.navbar:hover {
+  filter: var(--conduction-logo-navbar-hover-filter);
+}
+
 .container.clickable:hover {
   cursor: pointer;
 }

package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css

@@ -26,6 +26,10 @@
   /* --conduction-primary-top-nav-dropdown-hover-background-color: #ffffff; */
   /* --conduction-primary-top-nav-dropdown-hover-box-shadow: inset 0 -4px black; */
 
+  /* --conduction-primary-top-nav-dropdown-item-border-bottom-width: 4px;
+  --conduction-primary-top-nav-dropdown-item-border-bottom-style: solid;
+  --conduction-primary-top-nav-dropdown-item-border-bottom-color: #4376fc; */
+
   /* --conduction-primary-top-nav-container-padding-block-end: 18px; */
   /* --conduction-primary-top-nav-container-padding-block-start: 18px; */
   /* --conduction-primary-top-nav-container-padding-inline-end: 18px; */
@@ -237,6 +241,9 @@
 .dropdown > li {
   padding-inline-start: 18px;
   font-weight: var(--conduction-primary-top-nav-dropdown-font-weight);
+  border-bottom-width: var(--conduction-primary-top-nav-dropdown-item-border-bottom-width);
+  border-bottom-style: var(--conduction-primary-top-nav-dropdown-item-border-bottom-style);
+  border-bottom-color: var(--conduction-primary-top-nav-dropdown-item-border-bottom-color);
 }
 
 .toggleIcon {