@conduction/components 2.2.53 → 2.2.54

package/package.json

@@ -1,50 +1,50 @@
-{
-  "name": "@conduction/components",
-  "version": "2.2.53",
-  "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.54",
+  "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/card/cardHeader/CardHeader.module.css

@@ -1,52 +1,54 @@
-: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);
-}
+: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-title-padding-block-end: 0px; */
+
+  --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;
+  padding-block-end: var(--conduction-card-header-title-padding-block-end) !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/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>
+  );
+};