@conduction/components 2.2.51 → 2.2.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +2 -0
  2. package/lib/components/logo/Logo.module.css +13 -0
  3. package/package.json +1 -1
  4. package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx +80 -80
  5. package/src/components/logo/Logo.module.css +13 -0
package/README.md CHANGED
@@ -4,6 +4,8 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
+ - 2.2.52:
8
+ - Added hover filter to Logo component.
7
9
  - 2.2.51:
8
10
  - Added text-decoration tokens to CardHeader.
9
11
  - Added label color tokens to checkbox.
package/lib/components/logo/Logo.module.css CHANGED
@@ -2,14 +2,17 @@
2
2
  --conduction-logo-header-inline-size: 220px;
3
3
  --conduction-logo-header-block-size: 40px;
4
4
  --conduction-logo-header-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
5
+ /* --conduction-logo-header-hover-filter: brightness(1.1); */
5
6
 
6
7
  --conduction-logo-footer-inline-size: 330px;
7
8
  --conduction-logo-footer-block-size: 60px;
8
9
  --conduction-logo-footer-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
10
+ /* --conduction-logo-footer-hover-filter: brightness(1.1); */
9
11
 
10
12
  --conduction-logo-navbar-inline-size: 150px;
11
13
  --conduction-logo-navbar-block-size: 40px;
12
14
  --conduction-logo-navbar-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
15
+ /* --conduction-logo-navbar-hover-filter: brightness(1.1); */
13
16
  }
14
17
 
15
18
  .container {
@@ -23,12 +26,18 @@
23
26
  block-size: var(--conduction-logo-header-block-size);
24
27
  background-image: var(--conduction-logo-header-background-image);
25
28
  }
29
+ .container.header:hover {
30
+ filter: var(--conduction-logo-header-hover-filter);
31
+ }
26
32
 
27
33
  .container.footer {
28
34
  inline-size: var(--conduction-logo-footer-inline-size);
29
35
  block-size: var(--conduction-logo-footer-block-size);
30
36
  background-image: var(--conduction-logo-footer-background-image);
31
37
  }
38
+ .container.footer:hover {
39
+ filter: var(--conduction-logo-footer-hover-filter);
40
+ }
32
41
 
33
42
  .container.navbar {
34
43
  inline-size: var(--conduction-logo-navbar-inline-size);
@@ -36,6 +45,10 @@
36
45
  background-image: var(--conduction-logo-navbar-background-image);
37
46
  }
38
47
 
48
+ .container.navbar:hover {
49
+ filter: var(--conduction-logo-navbar-hover-filter);
50
+ }
51
+
39
52
  .container.clickable:hover {
40
53
  cursor: pointer;
41
54
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.51",
3
+ "version": "2.2.52",
4
4
  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx CHANGED
@@ -1,80 +1,80 @@
1
- import * as React from "react";
2
- import * as styles from "./HorizontalOverflowWrapper.module.css";
3
- import clsx from "clsx";
4
- import { Button } from "@utrecht/component-library-react/dist/css-module";
5
- import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6
- import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
7
-
8
- interface HorizontalOverflowWrapperProps {
9
- children: React.ReactNode;
10
- ariaLabels: {
11
- scrollRightButton: string;
12
- scrollLeftButton: string;
13
- };
14
- }
15
-
16
- export const HorizontalOverflowWrapper: React.FC<HorizontalOverflowWrapperProps> = ({ children, ariaLabels }) => {
17
- const [canScrollRight, setCanScrollRight] = React.useState<boolean>(false);
18
- const [canScrollLeft, setCanScrollLeft] = React.useState<boolean>(false);
19
-
20
- const wrapperRef = React.useRef<HTMLDivElement | null>(null);
21
-
22
- const scrollRight = (): void => {
23
- wrapperRef.current?.scrollTo({
24
- left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
25
- behavior: "smooth",
26
- });
27
- };
28
-
29
- const scrollLeft = (): void => {
30
- wrapperRef.current?.scrollTo({
31
- left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
32
- behavior: "smooth",
33
- });
34
- };
35
-
36
- React.useEffect(() => {
37
- checkScrollDirections(); // initiate available scroll directions
38
-
39
- window.addEventListener("resize", checkScrollDirections);
40
-
41
- return () => window.removeEventListener("resize", checkScrollDirections);
42
- }, []);
43
-
44
- const checkScrollDirections = (): void => {
45
- if (!wrapperRef.current) return;
46
-
47
- setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
48
- setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
49
- };
50
-
51
- return (
52
- <div className={styles.container}>
53
- {canScrollLeft && (
54
- <Button
55
- className={clsx(styles.scrollButton)}
56
- onClick={scrollLeft}
57
- appearance="secondary-action-button"
58
- aria-label={ariaLabels.scrollLeftButton}
59
- >
60
- <FontAwesomeIcon icon={faChevronLeft} />
61
- </Button>
62
- )}
63
-
64
- {canScrollRight && (
65
- <Button
66
- className={clsx(styles.scrollButton, styles.right)}
67
- onClick={scrollRight}
68
- appearance="secondary-action-button"
69
- aria-label={ariaLabels.scrollRightButton}
70
- >
71
- <FontAwesomeIcon icon={faChevronRight} />
72
- </Button>
73
- )}
74
-
75
- <div ref={wrapperRef} className={styles.wrapper} onScroll={checkScrollDirections}>
76
- {children}
77
- </div>
78
- </div>
79
- );
80
- };
1
+ import * as React from "react";
2
+ import * as styles from "./HorizontalOverflowWrapper.module.css";
3
+ import clsx from "clsx";
4
+ import { Button } from "@utrecht/component-library-react/dist/css-module";
5
+ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6
+ import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
7
+
8
+ interface HorizontalOverflowWrapperProps {
9
+ children: React.ReactNode;
10
+ ariaLabels: {
11
+ scrollRightButton: string;
12
+ scrollLeftButton: string;
13
+ };
14
+ }
15
+
16
+ export const HorizontalOverflowWrapper: React.FC<HorizontalOverflowWrapperProps> = ({ children, ariaLabels }) => {
17
+ const [canScrollRight, setCanScrollRight] = React.useState<boolean>(false);
18
+ const [canScrollLeft, setCanScrollLeft] = React.useState<boolean>(false);
19
+
20
+ const wrapperRef = React.useRef<HTMLDivElement | null>(null);
21
+
22
+ const scrollRight = (): void => {
23
+ wrapperRef.current?.scrollTo({
24
+ left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
25
+ behavior: "smooth",
26
+ });
27
+ };
28
+
29
+ const scrollLeft = (): void => {
30
+ wrapperRef.current?.scrollTo({
31
+ left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
32
+ behavior: "smooth",
33
+ });
34
+ };
35
+
36
+ React.useEffect(() => {
37
+ checkScrollDirections(); // initiate available scroll directions
38
+
39
+ window.addEventListener("resize", checkScrollDirections);
40
+
41
+ return () => window.removeEventListener("resize", checkScrollDirections);
42
+ }, []);
43
+
44
+ const checkScrollDirections = (): void => {
45
+ if (!wrapperRef.current) return;
46
+
47
+ setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
48
+ setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
49
+ };
50
+
51
+ return (
52
+ <div className={styles.container}>
53
+ {canScrollLeft && (
54
+ <Button
55
+ className={clsx(styles.scrollButton)}
56
+ onClick={scrollLeft}
57
+ appearance="secondary-action-button"
58
+ aria-label={ariaLabels.scrollLeftButton}
59
+ >
60
+ <FontAwesomeIcon icon={faChevronLeft} />
61
+ </Button>
62
+ )}
63
+
64
+ {canScrollRight && (
65
+ <Button
66
+ className={clsx(styles.scrollButton, styles.right)}
67
+ onClick={scrollRight}
68
+ appearance="secondary-action-button"
69
+ aria-label={ariaLabels.scrollRightButton}
70
+ >
71
+ <FontAwesomeIcon icon={faChevronRight} />
72
+ </Button>
73
+ )}
74
+
75
+ <div ref={wrapperRef} className={styles.wrapper} onScroll={checkScrollDirections}>
76
+ {children}
77
+ </div>
78
+ </div>
79
+ );
80
+ };
package/src/components/logo/Logo.module.css CHANGED
@@ -2,14 +2,17 @@
2
2
  --conduction-logo-header-inline-size: 220px;
3
3
  --conduction-logo-header-block-size: 40px;
4
4
  --conduction-logo-header-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
5
+ /* --conduction-logo-header-hover-filter: brightness(1.1); */
5
6
 
6
7
  --conduction-logo-footer-inline-size: 330px;
7
8
  --conduction-logo-footer-block-size: 60px;
8
9
  --conduction-logo-footer-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
10
+ /* --conduction-logo-footer-hover-filter: brightness(1.1); */
9
11
 
10
12
  --conduction-logo-navbar-inline-size: 150px;
11
13
  --conduction-logo-navbar-block-size: 40px;
12
14
  --conduction-logo-navbar-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
15
+ /* --conduction-logo-navbar-hover-filter: brightness(1.1); */
13
16
  }
14
17
 
15
18
  .container {
@@ -23,12 +26,18 @@
23
26
  block-size: var(--conduction-logo-header-block-size);
24
27
  background-image: var(--conduction-logo-header-background-image);
25
28
  }
29
+ .container.header:hover {
30
+ filter: var(--conduction-logo-header-hover-filter);
31
+ }
26
32
 
27
33
  .container.footer {
28
34
  inline-size: var(--conduction-logo-footer-inline-size);
29
35
  block-size: var(--conduction-logo-footer-block-size);
30
36
  background-image: var(--conduction-logo-footer-background-image);
31
37
  }
38
+ .container.footer:hover {
39
+ filter: var(--conduction-logo-footer-hover-filter);
40
+ }
32
41
 
33
42
  .container.navbar {
34
43
  inline-size: var(--conduction-logo-navbar-inline-size);
@@ -36,6 +45,10 @@
36
45
  background-image: var(--conduction-logo-navbar-background-image);
37
46
  }
38
47
 
48
+ .container.navbar:hover {
49
+ filter: var(--conduction-logo-navbar-hover-filter);
50
+ }
51
+
39
52
  .container.clickable:hover {
40
53
  cursor: pointer;
41
54
  }