@conduction/components 2.2.52 → 2.2.54
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.
- package/README.md +213 -212
- package/lib/components/Pagination/Pagination.module.css +4 -0
- package/lib/components/card/cardHeader/CardHeader.module.css +54 -52
- package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +315 -308
- package/package.json +50 -50
- package/src/components/Pagination/Pagination.module.css +4 -0
- package/src/components/card/cardHeader/CardHeader.module.css +54 -52
- package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx +80 -80
- package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +315 -308
- package/tsconfig.json +21 -21
package/package.json
CHANGED
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@conduction/components",
|
|
3
|
-
"version": "2.2.
|
|
4
|
-
"description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
|
|
5
|
-
"main": "lib/index.js",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"clean": "rimraf lib/",
|
|
8
|
-
"build": "npm-run-all build:**",
|
|
9
|
-
"build:tsc": "tsc",
|
|
10
|
-
"build:copyCSS": "copyfiles -u 1 src/**/*.css lib/",
|
|
11
|
-
"test": "echo \"Error: no test specified\" && exit 1"
|
|
12
|
-
},
|
|
13
|
-
"repository": {
|
|
14
|
-
"type": "git",
|
|
15
|
-
"url": "git+https://github.com/ConductionNL/conduction-components.git"
|
|
16
|
-
},
|
|
17
|
-
"keywords": ["React", "Gatsby", "Conduction", "Components"],
|
|
18
|
-
"author": "Conduction B.V.",
|
|
19
|
-
"license": "ISC",
|
|
20
|
-
"bugs": {
|
|
21
|
-
"url": "https://github.com/ConductionNL/conduction-components/issues"
|
|
22
|
-
},
|
|
23
|
-
"homepage": "https://github.com/ConductionNL/conduction-components#readme",
|
|
24
|
-
"dependencies": {
|
|
25
|
-
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
|
26
|
-
"@fortawesome/free-solid-svg-icons": "^6.5.1",
|
|
27
|
-
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
28
|
-
"@utrecht/component-library-react": "3.0.0",
|
|
29
|
-
"clsx": "^2.1.0",
|
|
30
|
-
"gatsby": "^5.13.3",
|
|
31
|
-
"react": "^18.2.0",
|
|
32
|
-
"react-datepicker": "^6.3.0",
|
|
33
|
-
"react-hook-form": "7.51.0",
|
|
34
|
-
"react-paginate": "^8.2.0",
|
|
35
|
-
"react-select": "5.8.0",
|
|
36
|
-
"react-tabs": "^6.0.2",
|
|
37
|
-
"react-tooltip": "^5.26.3"
|
|
38
|
-
},
|
|
39
|
-
"devDependencies": {
|
|
40
|
-
"@types/node": "^20.11.27",
|
|
41
|
-
"@types/react": "^18.2.66",
|
|
42
|
-
"@types/react-datepicker": "^6.2.0",
|
|
43
|
-
"@types/react-dom": "^18.2.22",
|
|
44
|
-
"copyfiles": "^2.4.1",
|
|
45
|
-
"npm-run-all": "^4.1.5",
|
|
46
|
-
"rimraf": "^5.0.5",
|
|
47
|
-
"tsc-hooks": "^1.1.2",
|
|
48
|
-
"typescript": "^5.4.2"
|
|
49
|
-
}
|
|
50
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@conduction/components",
|
|
3
|
+
"version": "2.2.54",
|
|
4
|
+
"description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
|
|
5
|
+
"main": "lib/index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"clean": "rimraf lib/",
|
|
8
|
+
"build": "npm-run-all build:**",
|
|
9
|
+
"build:tsc": "tsc",
|
|
10
|
+
"build:copyCSS": "copyfiles -u 1 src/**/*.css lib/",
|
|
11
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
12
|
+
},
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "git+https://github.com/ConductionNL/conduction-components.git"
|
|
16
|
+
},
|
|
17
|
+
"keywords": ["React", "Gatsby", "Conduction", "Components"],
|
|
18
|
+
"author": "Conduction B.V.",
|
|
19
|
+
"license": "ISC",
|
|
20
|
+
"bugs": {
|
|
21
|
+
"url": "https://github.com/ConductionNL/conduction-components/issues"
|
|
22
|
+
},
|
|
23
|
+
"homepage": "https://github.com/ConductionNL/conduction-components#readme",
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
|
26
|
+
"@fortawesome/free-solid-svg-icons": "^6.5.1",
|
|
27
|
+
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
28
|
+
"@utrecht/component-library-react": "3.0.0",
|
|
29
|
+
"clsx": "^2.1.0",
|
|
30
|
+
"gatsby": "^5.13.3",
|
|
31
|
+
"react": "^18.2.0",
|
|
32
|
+
"react-datepicker": "^6.3.0",
|
|
33
|
+
"react-hook-form": "7.51.0",
|
|
34
|
+
"react-paginate": "^8.2.0",
|
|
35
|
+
"react-select": "5.8.0",
|
|
36
|
+
"react-tabs": "^6.0.2",
|
|
37
|
+
"react-tooltip": "^5.26.3"
|
|
38
|
+
},
|
|
39
|
+
"devDependencies": {
|
|
40
|
+
"@types/node": "^20.11.27",
|
|
41
|
+
"@types/react": "^18.2.66",
|
|
42
|
+
"@types/react-datepicker": "^6.2.0",
|
|
43
|
+
"@types/react-dom": "^18.2.22",
|
|
44
|
+
"copyfiles": "^2.4.1",
|
|
45
|
+
"npm-run-all": "^4.1.5",
|
|
46
|
+
"rimraf": "^5.0.5",
|
|
47
|
+
"tsc-hooks": "^1.1.2",
|
|
48
|
+
"typescript": "^5.4.2"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -22,6 +22,8 @@
|
|
|
22
22
|
/* --conduction-pagination-item-border-bottom-width: unset;
|
|
23
23
|
--conduction-pagination-item-border-bottom-style: unset;
|
|
24
24
|
--conduction-pagination-item-border-bottom-color: unset; */
|
|
25
|
+
/* --conduction-pagination-item-text-decoration: unset; */
|
|
26
|
+
/* --conduction-pagination-item-text-decoration-thickness: 0px; */
|
|
25
27
|
|
|
26
28
|
/* --conduction-pagination-navigation-button-background-color: #4376fc; */
|
|
27
29
|
/* --conduction-pagination-navigation-button-color: #ffffff; */
|
|
@@ -112,6 +114,7 @@
|
|
|
112
114
|
font-weight: var(--conduction-pagination-current-page-font-weight);
|
|
113
115
|
font-family: var(--conduction-pagination-item-font-family);
|
|
114
116
|
text-decoration: var(--conduction-pagination-current-page-text-decoration);
|
|
117
|
+
text-decoration-thickness: var(--conduction-pagination-current-page-text-decoration-thickness);
|
|
115
118
|
}
|
|
116
119
|
|
|
117
120
|
.container > li:not(.previous):not(.next):not(.currentPage) > a {
|
|
@@ -131,6 +134,7 @@
|
|
|
131
134
|
font-size: var(--conduction-pagination-item-font-size);
|
|
132
135
|
font-weight: var(--conduction-pagination-item-font-weight);
|
|
133
136
|
font-family: var(--conduction-pagination-item-font-family);
|
|
137
|
+
text-decoration: var(--conduction-pagination-item-text-decoration);
|
|
134
138
|
}
|
|
135
139
|
|
|
136
140
|
.button {
|
|
@@ -1,52 +1,54 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
/* --conduction-card-header-border-bottom-width: unset;
|
|
3
|
-
--conduction-card-header-border-bottom-style: unset;
|
|
4
|
-
--conduction-card-header-border-bottom-color: unset; */
|
|
5
|
-
/* --conduction-card-header-hover-border-bottom-width: unset; */
|
|
6
|
-
/* --conduction-card-header-hover-border-bottom-style: unset; */
|
|
7
|
-
/* --conduction-card-header-hover-border-bottom-color: unset; */
|
|
8
|
-
--conduction-card-header-title-color: #000000;
|
|
9
|
-
/* --conduction-card-header-title-text-decoration: none; */
|
|
10
|
-
/* --conduction-card-header-title-text-underline-offset: 2px; */
|
|
11
|
-
/* --conduction-card-header-title-hover-color: #000000; */
|
|
12
|
-
/* --conduction-card-header-title-hover-text-decoration: none; */
|
|
13
|
-
/* --conduction-card-header-title-hover-text-underline-offset: 2px; */
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
--conduction-card-header-date-
|
|
17
|
-
--conduction-card-header-date-font-
|
|
18
|
-
|
|
19
|
-
--conduction-card-header-date-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
border-bottom-
|
|
25
|
-
border-bottom-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
border-bottom-
|
|
31
|
-
border-bottom-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
text-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
font-
|
|
51
|
-
|
|
52
|
-
|
|
1
|
+
:root {
|
|
2
|
+
/* --conduction-card-header-border-bottom-width: unset;
|
|
3
|
+
--conduction-card-header-border-bottom-style: unset;
|
|
4
|
+
--conduction-card-header-border-bottom-color: unset; */
|
|
5
|
+
/* --conduction-card-header-hover-border-bottom-width: unset; */
|
|
6
|
+
/* --conduction-card-header-hover-border-bottom-style: unset; */
|
|
7
|
+
/* --conduction-card-header-hover-border-bottom-color: unset; */
|
|
8
|
+
--conduction-card-header-title-color: #000000;
|
|
9
|
+
/* --conduction-card-header-title-text-decoration: none; */
|
|
10
|
+
/* --conduction-card-header-title-text-underline-offset: 2px; */
|
|
11
|
+
/* --conduction-card-header-title-hover-color: #000000; */
|
|
12
|
+
/* --conduction-card-header-title-hover-text-decoration: none; */
|
|
13
|
+
/* --conduction-card-header-title-hover-text-underline-offset: 2px; */
|
|
14
|
+
/* --conduction-card-header-title-padding-block-end: 0px; */
|
|
15
|
+
|
|
16
|
+
--conduction-card-header-date-color: #000000;
|
|
17
|
+
--conduction-card-header-date-font-size: 16px;
|
|
18
|
+
--conduction-card-header-date-font-weight: 100;
|
|
19
|
+
/* --conduction-card-header-date-font-style: normal; */
|
|
20
|
+
--conduction-card-header-date-margin-block-end: 8px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.container {
|
|
24
|
+
border-bottom-width: var(--conduction-card-header-border-bottom-width);
|
|
25
|
+
border-bottom-color: var(--conduction-card-header-border-bottom-color);
|
|
26
|
+
border-bottom-style: var(--conduction-card-header-border-bottom-style);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.container:hover {
|
|
30
|
+
border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
|
|
31
|
+
border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
|
|
32
|
+
border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.title > * {
|
|
36
|
+
color: var(--conduction-card-header-title-color) !important;
|
|
37
|
+
text-decoration: var(--conduction-card-header-title-text-decoration) !important;
|
|
38
|
+
text-underline-offset: var(--conduction-card-header-title-text-underline-offset) !important;
|
|
39
|
+
padding-block-end: var(--conduction-card-header-title-padding-block-end) !important;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.title:hover > * {
|
|
43
|
+
color: var(--conduction-card-header-title-hover-color, var(--conduction-card-header-title-color)) !important;
|
|
44
|
+
text-decoration: var(--conduction-card-header-title-hover-text-decoration, var(--conduction-card-header-title-text-decoration)) !important;
|
|
45
|
+
text-underline-offset: var(--conduction-card-header-title-hover-text-underline-offset, var(--conduction-card-header-title-text-underline-offset)) !important;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.date {
|
|
49
|
+
color: var(--conduction-card-header-date-color);
|
|
50
|
+
font-size: var(--conduction-card-header-date-font-size);
|
|
51
|
+
font-weight: var(--conduction-card-header-date-font-weight);
|
|
52
|
+
font-style: var(--conduction-card-header-date-font-style);
|
|
53
|
+
margin-block-end: var(--conduction-card-header-date-margin-block-end);
|
|
54
|
+
}
|
|
@@ -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
|
+
};
|