@conduction/components 2.2.50 → 2.2.52

package/package.json

@@ -1,50 +1,50 @@
-{
-  "name": "@conduction/components",
-  "version": "2.2.50",
-  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
-  "main": "lib/index.js",
-  "scripts": {
-    "clean": "rimraf lib/",
-    "build": "npm-run-all build:**",
-    "build:tsc": "tsc",
-    "build:copyCSS": "copyfiles -u 1 src/**/*.css lib/",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ConductionNL/conduction-components.git"
-  },
-  "keywords": ["React", "Gatsby", "Conduction", "Components"],
-  "author": "Conduction B.V.",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/ConductionNL/conduction-components/issues"
-  },
-  "homepage": "https://github.com/ConductionNL/conduction-components#readme",
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@utrecht/component-library-react": "3.0.0",
-    "clsx": "^2.1.0",
-    "gatsby": "^5.13.3",
-    "react": "^18.2.0",
-    "react-datepicker": "^6.3.0",
-    "react-hook-form": "7.51.0",
-    "react-paginate": "^8.2.0",
-    "react-select": "5.8.0",
-    "react-tabs": "^6.0.2",
-    "react-tooltip": "^5.26.3"
-  },
-  "devDependencies": {
-    "@types/node": "^20.11.27",
-    "@types/react": "^18.2.66",
-    "@types/react-datepicker": "^6.2.0",
-    "@types/react-dom": "^18.2.22",
-    "copyfiles": "^2.4.1",
-    "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.5",
-    "tsc-hooks": "^1.1.2",
-    "typescript": "^5.4.2"
-  }
-}
+{
+  "name": "@conduction/components",
+  "version": "2.2.52",
+  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
+  "main": "lib/index.js",
+  "scripts": {
+    "clean": "rimraf lib/",
+    "build": "npm-run-all build:**",
+    "build:tsc": "tsc",
+    "build:copyCSS": "copyfiles -u 1 src/**/*.css lib/",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ConductionNL/conduction-components.git"
+  },
+  "keywords": ["React", "Gatsby", "Conduction", "Components"],
+  "author": "Conduction B.V.",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ConductionNL/conduction-components/issues"
+  },
+  "homepage": "https://github.com/ConductionNL/conduction-components#readme",
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@utrecht/component-library-react": "3.0.0",
+    "clsx": "^2.1.0",
+    "gatsby": "^5.13.3",
+    "react": "^18.2.0",
+    "react-datepicker": "^6.3.0",
+    "react-hook-form": "7.51.0",
+    "react-paginate": "^8.2.0",
+    "react-select": "5.8.0",
+    "react-tabs": "^6.0.2",
+    "react-tooltip": "^5.26.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.27",
+    "@types/react": "^18.2.66",
+    "@types/react-datepicker": "^6.2.0",
+    "@types/react-dom": "^18.2.22",
+    "copyfiles": "^2.4.1",
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^5.0.5",
+    "tsc-hooks": "^1.1.2",
+    "typescript": "^5.4.2"
+  }
+}

package/src/components/badgeCounter/BadgeCounter.module.css

@@ -1,27 +1,27 @@
-:root {
-  --conduction-badge-counter-color: hsl(0 0% 0%);
-  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
-  --conduction-badge-counter-height: var(--skeleton-size-md);
-  --conduction-badge-counter-width: var(--skeleton-size-md);
-  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
-  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
-}
-
-.content {
-  display: flex;
-}
-
-.badge {
-  height: var(--conduction-badge-counter-height);
-  width: var(--conduction-badge-counter-width);
-  border-radius: 50%;
-  font-size: var(--conduction-badge-counter-font-size);
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  background-color: var(--conduction-badge-counter-background-color);
-  color: var(--conduction-badge-counter-color);
-}
-.maxNumber {
-  font-size: var(--conduction-badge-counter-max-number-font-size);
-}
+:root {
+  --conduction-badge-counter-color: hsl(0 0% 0%);
+  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
+  --conduction-badge-counter-height: var(--skeleton-size-md);
+  --conduction-badge-counter-width: var(--skeleton-size-md);
+  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
+  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
+}
+
+.content {
+  display: flex;
+}
+
+.badge {
+  height: var(--conduction-badge-counter-height);
+  width: var(--conduction-badge-counter-width);
+  border-radius: 50%;
+  font-size: var(--conduction-badge-counter-font-size);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background-color: var(--conduction-badge-counter-background-color);
+  color: var(--conduction-badge-counter-color);
+}
+.maxNumber {
+  font-size: var(--conduction-badge-counter-max-number-font-size);
+}

package/src/components/card/cardHeader/CardHeader.module.css

@@ -1,43 +1,52 @@
-:root {
-  /* --conduction-card-header-border-bottom-width: unset;
-  --conduction-card-header-border-bottom-style: unset;
-  --conduction-card-header-border-bottom-color: unset; */
-  /* --conduction-card-header-hover-border-bottom-width: unset; */
-  /* --conduction-card-header-hover-border-bottom-style: unset; */
-  /* --conduction-card-header-hover-border-bottom-color: unset; */
-  --conduction-card-header-title-color: #000000;
-  /* --conduction-card-header-title-hover-color: #000000; */
-  --conduction-card-header-date-color: #000000;
-  --conduction-card-header-date-font-size: 16px;
-  --conduction-card-header-date-font-weight: 100;
-  /* --conduction-card-header-date-font-style: normal; */
-  --conduction-card-header-date-margin-block-end: 8px;
-}
-
-.container {
-  border-bottom-width: var(--conduction-card-header-border-bottom-width);
-  border-bottom-color: var(--conduction-card-header-border-bottom-color);
-  border-bottom-style: var(--conduction-card-header-border-bottom-style);
-}
-
-.container:hover {
-  border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
-  border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
-  border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
-}
-
-.title > * {
-  color: var(--conduction-card-header-title-color) !important;
-}
-
-.title:hover > * {
-  color: var(--conduction-card-header-title-hover-color, var(--conduction-card-header-title-color)) !important;
-}
-
-.date {
-  color: var(--conduction-card-header-date-color);
-  font-size: var(--conduction-card-header-date-font-size);
-  font-weight: var(--conduction-card-header-date-font-weight);
-  font-style: var(--conduction-card-header-date-font-style);
-  margin-block-end: var(--conduction-card-header-date-margin-block-end);
-}
+:root {
+  /* --conduction-card-header-border-bottom-width: unset;
+  --conduction-card-header-border-bottom-style: unset;
+  --conduction-card-header-border-bottom-color: unset; */
+  /* --conduction-card-header-hover-border-bottom-width: unset; */
+  /* --conduction-card-header-hover-border-bottom-style: unset; */
+  /* --conduction-card-header-hover-border-bottom-color: unset; */
+  --conduction-card-header-title-color: #000000;
+  /* --conduction-card-header-title-text-decoration: none; */
+  /* --conduction-card-header-title-text-underline-offset: 2px; */
+  /* --conduction-card-header-title-hover-color: #000000; */
+  /* --conduction-card-header-title-hover-text-decoration: none; */
+  /* --conduction-card-header-title-hover-text-underline-offset: 2px; */
+
+  --conduction-card-header-date-color: #000000;
+  --conduction-card-header-date-font-size: 16px;
+  --conduction-card-header-date-font-weight: 100;
+  /* --conduction-card-header-date-font-style: normal; */
+  --conduction-card-header-date-margin-block-end: 8px;
+}
+
+.container {
+  border-bottom-width: var(--conduction-card-header-border-bottom-width);
+  border-bottom-color: var(--conduction-card-header-border-bottom-color);
+  border-bottom-style: var(--conduction-card-header-border-bottom-style);
+}
+
+.container:hover {
+  border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
+  border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
+  border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
+}
+
+.title > * {
+  color: var(--conduction-card-header-title-color) !important;
+  text-decoration: var(--conduction-card-header-title-text-decoration) !important;
+  text-underline-offset: var(--conduction-card-header-title-text-underline-offset) !important;
+}
+
+.title:hover > * {
+  color: var(--conduction-card-header-title-hover-color, var(--conduction-card-header-title-color)) !important;
+  text-decoration: var(--conduction-card-header-title-hover-text-decoration, var(--conduction-card-header-title-text-decoration)) !important;
+  text-underline-offset: var(--conduction-card-header-title-hover-text-underline-offset, var(--conduction-card-header-title-text-underline-offset)) !important;
+}
+
+.date {
+  color: var(--conduction-card-header-date-color);
+  font-size: var(--conduction-card-header-date-font-size);
+  font-weight: var(--conduction-card-header-date-font-weight);
+  font-style: var(--conduction-card-header-date-font-style);
+  margin-block-end: var(--conduction-card-header-date-margin-block-end);
+}

package/src/components/card/infoCard/InfoCard.module.css

@@ -1,26 +1,26 @@
-.container {
-  background-color: var(--skeleton-color-grey-1);
-  border-radius: var(--skeleton-border-radius-md);
-  padding-inline-start: var(--skeleton-size-md);
-  padding-inline-end: var(--skeleton-size-md);
-  padding-block-start: var(--skeleton-size-md);
-  padding-block-end: var(--skeleton-size-md);
-}
-
-.container > * {
-  display: block;
-}
-
-.container > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-.container > .title {
-  font-weight: var(--skeleton-font-weight-bold);
-  font-size: var(--skeleton-font-size-xl);
-  color: var(--skeleton-color-black);
-}
-
-.content {
-  color: var(--skeleton-color-black);
-}
+.container {
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-border-radius-md);
+  padding-inline-start: var(--skeleton-size-md);
+  padding-inline-end: var(--skeleton-size-md);
+  padding-block-start: var(--skeleton-size-md);
+  padding-block-end: var(--skeleton-size-md);
+}
+
+.container > * {
+  display: block;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+.container > .title {
+  font-weight: var(--skeleton-font-weight-bold);
+  font-size: var(--skeleton-font-size-xl);
+  color: var(--skeleton-color-black);
+}
+
+.content {
+  color: var(--skeleton-color-black);
+}

package/src/components/codeBlock/CodeBlock.module.css

@@ -1,6 +1,6 @@
-.code {
-  margin-block: var(--skeleton-size-sm);
-  background-color: var(--skeleton-color-grey-1);
-  border-radius: var(--skeleton-size-2xs);
-  padding: var(--skeleton-size-lg);
-}
+.code {
+  margin-block: var(--skeleton-size-sm);
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-size-2xs);
+  padding: var(--skeleton-size-lg);
+}

package/src/components/formFields/checkbox/Checkbox.module.css

@@ -103,6 +103,10 @@
   box-sizing: border-box;
 }
 
+.checkbox:hover + label {
+  color: var(--conduction-input-checkbox-label-hover-color, var(--conduction-input-checkbox-label-color, var(--utrecht-document-color)));
+
+}
 .checkbox:hover + label::before {
   content: " ";
   display: inline-block;

package/src/components/formFields/date/Date.module.css

@@ -1,12 +1,12 @@
-.container {
-  display: flex;
-}
-
-.calendar {
-  display: flex;
-}
-
-.calendar > div::before,
-.calendar > div::after {
-  display: none;
-}
+.container {
+  display: flex;
+}
+
+.calendar {
+  display: flex;
+}
+
+.calendar > div::before,
+.calendar > div::after {
+  display: none;
+}

package/src/components/formFields/select/select.tsx

@@ -11,7 +11,7 @@ export type TSelectOption = { label: string; value: string };
 export type TGroupedSelectOption = { label: string; options: TSelectOption[] };
 
 interface ISelectProps {
-  control: Control<FieldValues, any>;
+  control: Control<any, any>;
   options: TSelectOption[] | TGroupedSelectOption[];
   name: string;
   ariaLabel: string;

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

@@ -1,5 +1,5 @@
-.divider {
-  display: block;
-  object-fit: cover;
-  width: 100%;
-}
+.divider {
+  display: block;
+  object-fit: cover;
+  width: 100%;
+}

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/metaIcon/MetaIcon.module.css

@@ -1,29 +1,29 @@
-:root {
-  --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
-  --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.container > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-.icon {
-  color: var(--conduction-meta-icon-icon-color);
-  height: var(--conduction-meta-icon-icon-size);
-  width: var(--conduction-meta-icon-icon-size);
-}
-
-.icon > svg {
-  height: 100%;
-  width: 100%;
-}
-
-.value {
-  font-weight: var(--skeleton-font-weight-bold);
-}
+:root {
+  --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
+  --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+.icon {
+  color: var(--conduction-meta-icon-icon-color);
+  height: var(--conduction-meta-icon-icon-size);
+  width: var(--conduction-meta-icon-icon-size);
+}
+
+.icon > svg {
+  height: 100%;
+  width: 100%;
+}
+
+.value {
+  font-weight: var(--skeleton-font-weight-bold);
+}