@conduction/components 2.2.18 → 2.2.19

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 (16) hide show
  1. package/README.md +1 -0
  2. package/lib/components/card/richContentCard/RichContentCard.js +7 -7
  3. package/lib/components/card/richContentCard/RichContentCard.module.css +93 -103
  4. package/lib/components/formFields/select/select.module.css +1 -1
  5. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts +9 -7
  6. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js +12 -23
  7. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +10 -5
  8. package/package.json +1 -1
  9. package/src/components/formFields/select/select.module.css +1 -1
  10. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +10 -5
  11. package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx +29 -45
  12. package/lib/components/tableWrapper/TableWrapper.d.ts +0 -4
  13. package/lib/components/tableWrapper/TableWrapper.js +0 -30
  14. package/lib/components/tableWrapper/TableWrapper.module.css +0 -67
  15. package/lib/components/temp/Temp.d.ts +0 -5
  16. package/lib/components/temp/Temp.js +0 -14
package/README.md CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
+ - 2.2.19: Refactored primary top nav to simplify sub-items.
7
8
  - 2.2.18:
8
9
  - Refactored select role attribute.
9
10
  - Fixed Pagination-button border-radius.
package/lib/components/card/richContentCard/RichContentCard.js CHANGED
@@ -1,16 +1,16 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import * as styles from "./RichContentCard.module.css";
3
- import { Link } from "@utrecht/component-library-react/dist/css-module";
2
+ import { Divider } from "@gemeente-denhaag/divider";
3
+ import { Link } from "@gemeente-denhaag/link";
4
4
  import { navigate } from "gatsby";
5
+ import * as styles from "./RichContentCard.module.css";
6
+ import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
5
7
  import { Tag } from "../../tag/Tag";
6
- import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7
- import { faArrowRight, faExternalLink } from "@fortawesome/free-solid-svg-icons";
8
8
  export const RichContentCard = ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }) => {
9
- return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.linkContainer, onClick: () => navigate(link.href), children: _jsxs(Link, { className: styles.link, children: [_jsx(FontAwesomeIcon, { icon: linkIsExternal ? faExternalLink : faArrowRight }), link.label] }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }, idx) => (_jsx(LabelWithIcon, { ...{ label, icon } }, idx))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx("hr", { className: styles.divider }), contentLinks.map(({ title, subTitle, href }, idx) => (_jsx(ContentLink, { ...{ title, subTitle, href } }, idx)))] }))] }));
9
+ return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.link, onClick: () => navigate(link.href), children: _jsx(Link, { icon: linkIsExternal ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }, idx) => (_jsx(LabelWithIcon, { ...{ label, icon } }, idx))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }, idx) => (_jsx(ContentLink, { ...{ title, subTitle, href } }, idx)))] }))] }));
10
10
  };
11
11
  const LabelWithIcon = ({ label, icon }) => {
12
12
  return (_jsxs("div", { className: styles.labelWithIcon, children: [_jsx("span", { className: styles.labelWithIcon_icon, children: icon }), _jsx("span", { className: styles.labelWithIcon_label, children: label })] }));
13
13
  };
14
- const ContentLink = ({ title, subTitle }) => {
15
- return (_jsxs(Link, { className: styles.contentLink, children: [_jsxs("div", { className: styles.contentLink_content, children: [_jsx("span", { className: styles.contentLink_title, children: title }), _jsx("span", { className: styles.contentLink_subTitle, children: subTitle })] }), _jsx("div", { children: _jsx(FontAwesomeIcon, { icon: faArrowRight }) })] }));
14
+ const ContentLink = ({ title, subTitle, href }) => {
15
+ return (_jsxs(Link, { className: styles.contentLink, children: [_jsxs("div", { className: styles.contentLink_content, children: [_jsx("span", { className: styles.contentLink_title, children: title }), _jsx("span", { className: styles.contentLink_subTitle, children: subTitle })] }), _jsx("div", { children: _jsx(ArrowRightIcon, {}) })] }));
16
16
  };
package/lib/components/card/richContentCard/RichContentCard.module.css CHANGED
@@ -1,103 +1,93 @@
1
- :root {
2
- --conduction-rich-content-card-border: 1px solid var(--skeleton-color-grey-2);
3
- }
4
-
5
- .container {
6
- display: flex;
7
- flex-direction: column;
8
- border: var(--conduction-rich-content-card-border);
9
- border-radius: var(--skeleton-border-radius-md);
10
-
11
- padding-inline-start: var(--skeleton-size-md);
12
- padding-inline-end: var(--skeleton-size-md);
13
- padding-block-start: var(--skeleton-size-md);
14
- padding-block-end: var(--skeleton-size-md);
15
- }
16
-
17
- .container > *:not(.linkContainer):not(:last-child) {
18
- margin-block-end: var(--skeleton-size-md);
19
- }
20
-
21
- .linkContainer {
22
- margin-block-end: var(--skeleton-size-xs);
23
- }
24
-
25
- .linkContainer > :first-child {
26
- display: flex;
27
- }
28
-
29
- .link > * {
30
- margin-inline-end: 8px;
31
- }
32
-
33
- .labelsWithIcon {
34
- display: flex;
35
- flex-wrap: wrap;
36
- }
37
-
38
- .labelsWithIcon > *:not(:last-child) {
39
- margin-inline-end: var(--skeleton-size-md);
40
- }
41
-
42
- .tags > *:not(:last-child) {
43
- margin-inline-end: var(--skeleton-size-md);
44
- }
45
-
46
- .contentLinks > *:not(:last-child):not(hr) {
47
- margin-block-end: var(--skeleton-size-xs);
48
- }
49
-
50
- /* Component: LabelWithIcon */
51
- .labelWithIcon {
52
- display: flex;
53
- align-items: center;
54
- color: var(--skeleton-color-grey-3);
55
- }
56
-
57
- .labelWithIcon > .labelWithIcon_icon > svg {
58
- height: var(--skeleton-size-sm);
59
- width: var(--skeleton-size-sm);
60
- margin-inline-end: var(--skeleton-size-xs);
61
- }
62
-
63
- .labelWithIcon > .labelWithIcon_label {
64
- font-size: var(--skeleton-size-sm);
65
- }
66
-
67
- /* Content Link */
68
- .contentLink {
69
- display: flex;
70
- padding-block-start: var(--skeleton-size-xs);
71
- padding-block-end: var(--skeleton-size-xs);
72
- text-decoration: none !important;
73
- }
74
-
75
- .contentLink > span {
76
- width: 100%;
77
- display: flex;
78
- justify-content: space-between;
79
- }
80
-
81
- .contentLink:hover {
82
- cursor: pointer;
83
- }
84
-
85
- .contentLink_content {
86
- display: flex;
87
- flex-direction: column;
88
- }
89
-
90
- .contentLink_title {
91
- font-size: var(--conduction-content-link-font-size);
92
- }
93
-
94
- .contentLink_subTitle {
95
- font-size: var(--conduction-content-link-font-size);
96
- color: var(--denhaag-color-grey-3);
97
- }
98
-
99
- .divider {
100
- width: 100%;
101
- opacity: 0.5;
102
- margin-block: var(--skeleton-size-lg);
103
- }
1
+ :root {
2
+ --conduction-rich-content-card-border: 1px solid var(--skeleton-color-grey-2);
3
+ }
4
+
5
+ .container {
6
+ display: flex;
7
+ flex-direction: column;
8
+ border: var(--conduction-rich-content-card-border);
9
+ border-radius: var(--skeleton-border-radius-md);
10
+
11
+ padding-inline-start: var(--skeleton-size-md);
12
+ padding-inline-end: var(--skeleton-size-md);
13
+ padding-block-start: var(--skeleton-size-md);
14
+ padding-block-end: var(--skeleton-size-md);
15
+ }
16
+
17
+ .container > *:not(.link):not(:last-child) {
18
+ margin-block-end: var(--skeleton-size-md);
19
+ }
20
+
21
+ .link {
22
+ margin-block-end: var(--skeleton-size-xs);
23
+ }
24
+
25
+ .link > :first-child {
26
+ display: flex;
27
+ }
28
+
29
+ .labelsWithIcon {
30
+ display: flex;
31
+ flex-wrap: wrap;
32
+ }
33
+
34
+ .labelsWithIcon > *:not(:last-child) {
35
+ margin-inline-end: var(--skeleton-size-md);
36
+ }
37
+
38
+ .tags > *:not(:last-child) {
39
+ margin-inline-end: var(--skeleton-size-md);
40
+ }
41
+
42
+ .contentLinks > *:not(:last-child):not(hr) {
43
+ margin-block-end: var(--skeleton-size-xs);
44
+ }
45
+
46
+ /* Component: LabelWithIcon */
47
+ .labelWithIcon {
48
+ display: flex;
49
+ align-items: center;
50
+ color: var(--skeleton-color-grey-3);
51
+ }
52
+
53
+ .labelWithIcon > .labelWithIcon_icon > svg {
54
+ height: var(--skeleton-size-sm);
55
+ width: var(--skeleton-size-sm);
56
+ margin-inline-end: var(--skeleton-size-xs);
57
+ }
58
+
59
+ .labelWithIcon > .labelWithIcon_label {
60
+ font-size: var(--skeleton-size-sm);
61
+ }
62
+
63
+ /* Content Link */
64
+ .contentLink {
65
+ display: flex;
66
+ padding-block-start: var(--skeleton-size-xs);
67
+ padding-block-end: var(--skeleton-size-xs);
68
+ text-decoration: none !important;
69
+ }
70
+
71
+ .contentLink > span {
72
+ width: 100%;
73
+ display: flex;
74
+ justify-content: space-between;
75
+ }
76
+
77
+ .contentLink:hover {
78
+ cursor: pointer;
79
+ }
80
+
81
+ .contentLink_content {
82
+ display: flex;
83
+ flex-direction: column;
84
+ }
85
+
86
+ .contentLink_title {
87
+ font-size: var(--conduction-content-link-font-size);
88
+ }
89
+
90
+ .contentLink_subTitle {
91
+ font-size: var(--conduction-content-link-font-size);
92
+ color: var(--denhaag-color-grey-3);
93
+ }
package/lib/components/formFields/select/select.module.css CHANGED
@@ -15,7 +15,7 @@
15
15
  /* --conduction-input-select-list-option-color: unset; */
16
16
  /* --conduction-input-select-list-option-selected--background-color: unset; */
17
17
  /* --conduction-input-select-list-option-selected-color: unset; */
18
- /* --conduction-input-select-list-option-focus--background-color: unset; */
18
+ /* --conduction-input-select-list-option-focus-background-color: unset; */
19
19
  /* --conduction-input-select-list-option-focus-color: unset; */
20
20
 
21
21
  /* --conduction-input-select-list-option-hover-background-color: unset; */
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts CHANGED
@@ -1,16 +1,18 @@
1
1
  /// <reference types="react" />
2
- interface ITopNavItem {
2
+ interface ITopNavItemBase {
3
3
  label: string;
4
4
  icon?: JSX.Element;
5
5
  current?: boolean;
6
+ }
7
+ interface ITopNavItemWithSubItems extends ITopNavItemBase {
8
+ handleClick?: never;
9
+ subItems: ITopNavItem[];
10
+ }
11
+ interface ITopNavItemWithoutSubItems extends ITopNavItemBase {
6
12
  handleClick?: () => any;
7
- subItems?: {
8
- label: string;
9
- icon?: JSX.Element;
10
- current?: boolean;
11
- handleClick?: () => any;
12
- }[];
13
+ subItems?: never;
13
14
  }
15
+ export declare type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems;
14
16
  export interface TopNavProps {
15
17
  items: ITopNavItem[];
16
18
  mobileLogo?: JSX.Element;
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js CHANGED
@@ -7,28 +7,17 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7
7
  import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons";
8
8
  export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }) => {
9
9
  const [isOpen, setIsOpen] = React.useState(false);
10
- const [subNavIsOpen, setSubNavIsOpen] = React.useState({});
11
- const handleItemClick = (handleClick) => {
12
- if (handleClick) {
13
- handleClick();
14
- setIsOpen(false);
15
- }
16
- };
17
- const handleSubItemMenu = (idx, value) => {
18
- setSubNavIsOpen({
19
- ...subNavIsOpen,
20
- [idx]: value,
21
- });
22
- };
23
- const screenWidth = window.innerWidth;
10
+ const [isMobile, setIsMobile] = React.useState(window.innerWidth < 992);
24
11
  React.useEffect(() => {
25
- if (screenWidth > 992) {
26
- setSubNavIsOpen({});
27
- }
28
- }, [screenWidth]);
29
- return (_jsxs("div", { className: clsx(styles.container, layoutClassName && layoutClassName), children: [_jsxs("div", { className: styles.menuToggleContainer, children: [mobileLogo, _jsx("button", { className: styles.menuToggle, onClick: () => setIsOpen((o) => !o), children: _jsx(FontAwesomeIcon, { icon: faBars }) })] }), _jsx("nav", { className: clsx(styles.primary, isOpen && styles.isOpen), children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick, subItems }, idx) => (_jsxs("li", { onClick: () => !subItems
30
- ? handleItemClick(handleClick)
31
- : screenWidth > 992
32
- ? handleItemClick(handleClick)
33
- : handleSubItemMenu(idx, !subNavIsOpen[idx] ?? true), className: clsx(styles.li, current && styles.current), children: [_jsxs(Link, { className: clsx(styles.link, styles.label, subItems && styles.mobileLink, current && styles.currentLink), children: [icon, label, " ", subItems && screenWidth < 992 && (_jsx(FontAwesomeIcon, { className: clsx(styles.toggleIcon, subNavIsOpen[idx] && styles.isOpen), icon: faChevronRight }))] }), subItems && (_jsx("ul", { className: clsx(styles.dropdown, subNavIsOpen[idx] && styles.isOpen), children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: () => handleItemClick(handleClick), children: _jsxs(Link, { className: clsx(styles.link, styles.label, current && styles.currentLink), children: [icon, label] }) }, idx))) }))] }, idx))) }) })] }));
12
+ const handleResize = () => {
13
+ setIsMobile(window.innerWidth < 992);
14
+ };
15
+ window.addEventListener("resize", handleResize);
16
+ return () => window.removeEventListener("resize", handleResize);
17
+ }, []);
18
+ const handleSubItemClick = (handleClick) => {
19
+ setIsOpen(false);
20
+ handleClick();
21
+ };
22
+ return (_jsxs("div", { className: clsx(styles.container, layoutClassName && layoutClassName), children: [_jsxs("div", { className: styles.menuToggleContainer, children: [mobileLogo, _jsx("button", { className: styles.menuToggle, onClick: () => setIsOpen((o) => !o), children: _jsx(FontAwesomeIcon, { icon: faBars }) })] }), _jsx("nav", { className: clsx(styles.primary, isOpen && styles.isOpen), children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick, subItems }, idx) => (_jsxs("li", { onClick: handleClick, className: clsx(styles.li, current && styles.current), children: [_jsxs(Link, { className: clsx(styles.link, styles.label, subItems && styles.mobileLink, current && styles.currentLink), children: [icon, label, " ", subItems && isMobile && _jsx(FontAwesomeIcon, { className: styles.toggleIcon, icon: faChevronRight })] }), subItems && (_jsx("ul", { className: styles.dropdown, children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: () => handleSubItemClick(handleClick), children: _jsxs(Link, { className: clsx(styles.link, styles.label, current && styles.currentLink), children: [icon, label] }) }, idx))) }))] }, idx))) }) })] }));
34
23
  };
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -116,6 +116,11 @@
116
116
  }
117
117
  .primary .link {
118
118
  text-decoration: none;
119
+ text-overflow: ellipsis;
120
+ display: block;
121
+ overflow: hidden;
122
+ max-width: 100%;
123
+ white-space: wrap;
119
124
  }
120
125
 
121
126
  .primary .link:not(.currentLink) {
@@ -187,6 +192,11 @@
187
192
  margin-inline-end: var(--conduction-primary-top-nav-item-icon-margin);
188
193
  }
189
194
 
195
+ .li:hover .dropdown {
196
+ display: block;
197
+ z-index: 1;
198
+ }
199
+
190
200
  @media only screen and (min-width: 992px) {
191
201
  .container {
192
202
  width: fit-content;
@@ -215,11 +225,6 @@
215
225
  display: none;
216
226
  }
217
227
 
218
- .primary .li:hover .dropdown {
219
- display: block;
220
- z-index: 1;
221
- }
222
-
223
228
  .mobileLink {
224
229
  margin-block-end: unset;
225
230
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.18",
3
+ "version": "2.2.19",
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/formFields/select/select.module.css CHANGED
@@ -15,7 +15,7 @@
15
15
  /* --conduction-input-select-list-option-color: unset; */
16
16
  /* --conduction-input-select-list-option-selected--background-color: unset; */
17
17
  /* --conduction-input-select-list-option-selected-color: unset; */
18
- /* --conduction-input-select-list-option-focus--background-color: unset; */
18
+ /* --conduction-input-select-list-option-focus-background-color: unset; */
19
19
  /* --conduction-input-select-list-option-focus-color: unset; */
20
20
 
21
21
  /* --conduction-input-select-list-option-hover-background-color: unset; */
package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -116,6 +116,11 @@
116
116
  }
117
117
  .primary .link {
118
118
  text-decoration: none;
119
+ text-overflow: ellipsis;
120
+ display: block;
121
+ overflow: hidden;
122
+ max-width: 100%;
123
+ white-space: wrap;
119
124
  }
120
125
 
121
126
  .primary .link:not(.currentLink) {
@@ -187,6 +192,11 @@
187
192
  margin-inline-end: var(--conduction-primary-top-nav-item-icon-margin);
188
193
  }
189
194
 
195
+ .li:hover .dropdown {
196
+ display: block;
197
+ z-index: 1;
198
+ }
199
+
190
200
  @media only screen and (min-width: 992px) {
191
201
  .container {
192
202
  width: fit-content;
@@ -215,11 +225,6 @@
215
225
  display: none;
216
226
  }
217
227
 
218
- .primary .li:hover .dropdown {
219
- display: block;
220
- z-index: 1;
221
- }
222
-
223
228
  .mobileLink {
224
229
  margin-block-end: unset;
225
230
  }
package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx CHANGED
@@ -5,19 +5,24 @@ import { Link } from "@utrecht/component-library-react/dist/css-module";
5
5
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6
6
  import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons";
7
7
 
8
- interface ITopNavItem {
8
+ interface ITopNavItemBase {
9
9
  label: string;
10
10
  icon?: JSX.Element;
11
11
  current?: boolean;
12
+ }
13
+
14
+ interface ITopNavItemWithSubItems extends ITopNavItemBase {
15
+ handleClick?: never;
16
+ subItems: ITopNavItem[];
17
+ }
18
+
19
+ interface ITopNavItemWithoutSubItems extends ITopNavItemBase {
12
20
  handleClick?: () => any;
13
- subItems?: {
14
- label: string;
15
- icon?: JSX.Element;
16
- current?: boolean;
17
- handleClick?: () => any;
18
- }[];
21
+ subItems?: never;
19
22
  }
20
23
 
24
+ export type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems;
25
+
21
26
  export interface TopNavProps {
22
27
  items: ITopNavItem[];
23
28
  mobileLogo?: JSX.Element;
@@ -26,30 +31,24 @@ export interface TopNavProps {
26
31
 
27
32
  export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProps): JSX.Element => {
28
33
  const [isOpen, setIsOpen] = React.useState<boolean>(false);
29
- const [subNavIsOpen, setSubNavIsOpen] = React.useState({});
34
+ const [isMobile, setIsMobile] = React.useState<boolean>(window.innerWidth < 992);
35
+
36
+ React.useEffect(() => {
37
+ const handleResize = () => {
38
+ setIsMobile(window.innerWidth < 992);
39
+ };
30
40
 
31
- const handleItemClick = (handleClick?: () => any) => {
32
- if (handleClick) {
33
- handleClick();
41
+ window.addEventListener("resize", handleResize);
34
42
 
35
- setIsOpen(false);
36
- }
37
- };
43
+ return () => window.removeEventListener("resize", handleResize);
44
+ }, []);
38
45
 
39
- const handleSubItemMenu = (idx: number, value: boolean) => {
40
- setSubNavIsOpen({
41
- ...subNavIsOpen,
42
- [idx as keyof typeof subNavIsOpen]: value,
43
- });
44
- };
46
+ const handleSubItemClick = (handleClick: any) => {
47
+ setIsOpen(false);
45
48
 
46
- const screenWidth = window.innerWidth;
49
+ handleClick();
50
+ };
47
51
 
48
- React.useEffect(() => {
49
- if (screenWidth > 992) {
50
- setSubNavIsOpen({});
51
- }
52
- }, [screenWidth]);
53
52
  return (
54
53
  <div className={clsx(styles.container, layoutClassName && layoutClassName)}>
55
54
  <div className={styles.menuToggleContainer}>
@@ -63,17 +62,7 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
63
62
  <nav className={clsx(styles.primary, isOpen && styles.isOpen)}>
64
63
  <ul className={styles.ul}>
65
64
  {items.map(({ label, icon, current, handleClick, subItems }, idx) => (
66
- <li
67
- onClick={() =>
68
- !subItems
69
- ? handleItemClick(handleClick)
70
- : screenWidth > 992
71
- ? handleItemClick(handleClick)
72
- : handleSubItemMenu(idx, !subNavIsOpen[idx as keyof typeof subNavIsOpen] ?? true)
73
- }
74
- className={clsx(styles.li, current && styles.current)}
75
- key={idx}
76
- >
65
+ <li onClick={handleClick} className={clsx(styles.li, current && styles.current)} key={idx}>
77
66
  <Link
78
67
  className={clsx(
79
68
  styles.link,
@@ -84,21 +73,16 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
84
73
  >
85
74
  {icon}
86
75
  {label}{" "}
87
- {subItems && screenWidth < 992 && (
88
- <FontAwesomeIcon
89
- className={clsx(styles.toggleIcon, subNavIsOpen[idx as keyof typeof subNavIsOpen] && styles.isOpen)}
90
- icon={faChevronRight}
91
- />
92
- )}
76
+ {subItems && isMobile && <FontAwesomeIcon className={styles.toggleIcon} icon={faChevronRight} />}
93
77
  </Link>
94
78
 
95
79
  {subItems && (
96
- <ul className={clsx(styles.dropdown, subNavIsOpen[idx as keyof typeof subNavIsOpen] && styles.isOpen)}>
80
+ <ul className={styles.dropdown}>
97
81
  {subItems.map(({ label, icon, current, handleClick }, idx) => (
98
82
  <li
99
83
  key={idx}
100
84
  className={clsx(styles.li, current && styles.current)}
101
- onClick={() => handleItemClick(handleClick)}
85
+ onClick={() => handleSubItemClick(handleClick)}
102
86
  >
103
87
  <Link className={clsx(styles.link, styles.label, current && styles.currentLink)}>
104
88
  {icon}
package/lib/components/tableWrapper/TableWrapper.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- export declare const TableWrapper: React.FC<{
3
- children: React.ReactNode;
4
- }>;
package/lib/components/tableWrapper/TableWrapper.js DELETED
@@ -1,30 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import React, { useState, useEffect } from "react";
3
- import * as styles from "./TableWrapper.module.css";
4
- import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
5
- import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
6
- export const TableWrapper = ({ children }) => {
7
- const [canScrollRight, setCanScrollRight] = useState(false);
8
- const [canScrollLeft, setCanScrollLeft] = useState(false);
9
- const wrapperRef = React.useRef(null);
10
- const handleScroll = () => {
11
- if (wrapperRef.current) {
12
- setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
13
- setCanScrollRight(wrapperRef.current.scrollWidth - wrapperRef.current.scrollLeft > wrapperRef.current.clientWidth);
14
- }
15
- };
16
- const handleScrollRight = () => {
17
- if (wrapperRef.current)
18
- wrapperRef.current.scrollTo({ left: wrapperRef.current.scrollWidth, behavior: "smooth" });
19
- };
20
- const handleScrollLeft = () => {
21
- if (wrapperRef.current)
22
- wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
23
- };
24
- useEffect(() => {
25
- if (wrapperRef.current) {
26
- setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
27
- }
28
- }, []);
29
- return (_jsx("div", { className: styles.container, children: _jsxs("div", { onScroll: handleScroll, ref: wrapperRef, className: styles.wrapper, children: [canScrollLeft && (_jsx("div", { onClick: handleScrollLeft, className: styles.scrollLeftButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) })), children, canScrollRight && (_jsx("div", { onClick: handleScrollRight, className: styles.scrollRightButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }) }))] }) }));
30
- };
package/lib/components/tableWrapper/TableWrapper.module.css DELETED
@@ -1,67 +0,0 @@
1
- :root {
2
- --conduction-table-wrapper-scroll-button-background-color: #ffffff;
3
- --conduction-table-wrapper-scroll-button-color: #000000;
4
- --conduction-table-wrapper-scroll-button-padding-inline-start: 14px;
5
- --conduction-table-wrapper-scroll-button-padding-inline-end: 14px;
6
- /* --conduction-table-wrapper-scroll-button-padding-block-start: 10px; */
7
- /* --conduction-table-wrapper-scroll-button-padding-block-end: 10px; */
8
- /* --conduction-table-wrapper-scroll-button-border-color: 1px; */
9
- /* --conduction-table-wrapper-scroll-button-border-color: solid; */
10
- /* --conduction-table-wrapper-scroll-button-border-color: #000000; */
11
-
12
- --conduction-table-wrapper-scroll-button-hover-background-color: #ffffff;
13
- --conduction-table-wrapper-scroll-button-hover-color: #4376fc;
14
- }
15
- .container {
16
- position: relative;
17
- }
18
-
19
- .wrapper,
20
- .wrapperTouchscreen {
21
- overflow-x: scroll;
22
- }
23
-
24
- .scrollRightButton,
25
- .scrollLeftButton {
26
- top: 0%;
27
- position: absolute;
28
- display: flex;
29
- height: 100%;
30
- background-color: var(--conduction-table-wrapper-scroll-button-background-color);
31
- color: var(--conduction-table-wrapper-scroll-button-color);
32
- padding-inline-start: var(--conduction-table-wrapper-scroll-button-padding-inline-start);
33
- padding-inline-end: var(--conduction-table-wrapper-scroll-button-padding-inline-end);
34
- padding-block-start: var(--conduction-table-wrapper-scroll-button-padding-block-start);
35
- padding-block-end: var(--conduction-table-wrapper-scroll-button-padding-block-end);
36
- border-width: var(--conduction-table-wrapper-scroll-button-border-width);
37
- border-style: var(--conduction-table-wrapper-scroll-button-border-style);
38
- border-color: var(--conduction-table-wrapper-scroll-button-border-color);
39
- }
40
-
41
- .scrollLeftButton:hover,
42
- .scrollRightButton:hover {
43
- background-color: var(--conduction-table-wrapper-scroll-button-hover-background-color);
44
- color: var(--conduction-table-wrapper-scroll-button-hover-color);
45
- cursor: pointer;
46
- }
47
-
48
- .scrollRightButton {
49
- right: 0;
50
- }
51
-
52
- .scrollLeftButton {
53
- left: 0;
54
- }
55
-
56
- .scrollButton {
57
- align-self: center;
58
- }
59
-
60
- /* Hide scrollbar */
61
- .wrapper::-webkit-scrollbar {
62
- display: none;
63
- }
64
- .wrapper {
65
- -ms-overflow-style: none;
66
- scrollbar-width: none;
67
- }
package/lib/components/temp/Temp.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import { ReactTabsFunctionComponent, TabProps, TabPanelProps, TabListProps, TabsProps } from "react-tabs";
2
- export declare const Tabs: ReactTabsFunctionComponent<TabsProps>;
3
- export declare const TabList: ReactTabsFunctionComponent<TabListProps>;
4
- export declare const Tab: ReactTabsFunctionComponent<TabProps>;
5
- export declare const TabPanel: ReactTabsFunctionComponent<TabPanelProps>;
package/lib/components/temp/Temp.js DELETED
@@ -1,14 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { Tabs as RTabs, TabList as RTabList, Tab as RTab, TabPanel as RTabPanel, } from "react-tabs";
3
- // Tabs
4
- export const Tabs = ({ children, ...otherProps }) => (_jsx(RTabs, { ...otherProps, children: _jsx("h1", { children: children }) }));
5
- Tabs.tabsRole = "Tabs";
6
- // TabList
7
- export const TabList = ({ children, ...otherProps }) => (_jsx(RTabList, { ...otherProps, children: children }));
8
- TabList.tabsRole = "TabList";
9
- // Tab
10
- export const Tab = ({ children, ...otherProps }) => (_jsx(RTab, { ...otherProps, children: children }));
11
- Tab.tabsRole = "Tab";
12
- // TabPanel
13
- export const TabPanel = ({ children, ...otherProps }) => (_jsx(RTabPanel, { ...otherProps, children: children }));
14
- TabPanel.tabsRole = "TabPanel";