@conduction/components 2.2.10 → 2.2.12

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 (15) hide show
  1. package/README.md +2 -0
  2. package/lib/components/formFields/select/select.d.ts +4 -3
  3. package/lib/components/formFields/select/select.js +58 -6
  4. package/lib/components/tableWrapper/TableWrapper.module.css +4 -6
  5. package/lib/components/tabs/Tabs.js +4 -4
  6. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js +19 -2
  7. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +90 -27
  8. package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.module.css +22 -9
  9. package/package.json +1 -1
  10. package/src/components/formFields/select/select.tsx +58 -0
  11. package/src/components/tableWrapper/TableWrapper.module.css +4 -6
  12. package/src/components/tabs/Tabs.tsx +4 -4
  13. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +90 -27
  14. package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx +40 -6
  15. package/src/components/topNav/secondaryTopNav/SecondaryTopNav.module.css +22 -9
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.12: Updated Select components to WCAG with aria-label and role.
8
+ - 2.2.11: Updated Primary and Secondary topnav to NLDS.
7
9
  - 2.2.10: Added z-index to tooltip.
8
10
  - 2.2.9: Added CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate to index.
9
11
  - 2.2.8:
package/lib/components/formFields/select/select.d.ts CHANGED
@@ -9,6 +9,7 @@ interface ISelectProps {
9
9
  value: string;
10
10
  }[];
11
11
  name: string;
12
+ ariaLabel?: string;
12
13
  id?: string;
13
14
  defaultValue?: any;
14
15
  disabled?: boolean;
@@ -17,7 +18,7 @@ interface ISelectProps {
17
18
  menuPlacement?: MenuPlacement;
18
19
  placeholder?: string;
19
20
  }
20
- export declare const SelectMultiple: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }: ISelectProps & IReactHookFormProps) => JSX.Element;
21
- export declare const SelectCreate: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }: ISelectProps & IReactHookFormProps) => JSX.Element;
22
- export declare const SelectSingle: ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }: ISelectProps & IReactHookFormProps) => JSX.Element;
21
+ export declare const SelectMultiple: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }: ISelectProps & IReactHookFormProps) => JSX.Element;
22
+ export declare const SelectCreate: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }: ISelectProps & IReactHookFormProps) => JSX.Element;
23
+ export declare const SelectSingle: ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }: ISelectProps & IReactHookFormProps) => JSX.Element;
23
24
  export {};
package/lib/components/formFields/select/select.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import * as styles from "./select.module.css";
3
4
  import { Controller } from "react-hook-form";
4
5
  import ReactSelect from "react-select";
@@ -41,18 +42,69 @@ const selectMultiStyles = {
41
42
  color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
42
43
  }),
43
44
  };
44
- export const SelectMultiple = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
45
+ export const SelectMultiple = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
46
+ React.useEffect(() => {
47
+ document.querySelectorAll('[id*="live-region"]').forEach((element) => {
48
+ if (element?.role !== "presentation") {
49
+ element.setAttribute("role", "presentation");
50
+ }
51
+ });
52
+ document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => {
53
+ if (element.role !== "presentation") {
54
+ element.setAttribute("role", "presentation");
55
+ }
56
+ });
57
+ document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => {
58
+ if (element.role !== "presentation") {
59
+ element.setAttribute("role", "presentation");
60
+ }
61
+ });
62
+ }, []);
45
63
  return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
46
- return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
64
+ return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
47
65
  } }));
48
66
  };
49
- export const SelectCreate = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
67
+ export const SelectCreate = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
68
+ React.useEffect(() => {
69
+ document.querySelectorAll('[id*="live-region"]').forEach((element) => {
70
+ if (element.role !== "presentation") {
71
+ element.setAttribute("role", "presentation");
72
+ }
73
+ });
74
+ document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => {
75
+ if (element.role !== "presentation") {
76
+ element.setAttribute("role", "presentation");
77
+ }
78
+ });
79
+ document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => {
80
+ if (element.role !== "presentation") {
81
+ element.setAttribute("role", "presentation");
82
+ }
83
+ });
84
+ }, []);
50
85
  return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
51
- return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { inputId: id, value: value ?? "", placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
86
+ return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
52
87
  } }));
53
88
  };
54
- export const SelectSingle = ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
89
+ export const SelectSingle = ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
90
+ React.useEffect(() => {
91
+ document.querySelectorAll('[id*="live-region"]').forEach((element) => {
92
+ if (element.role !== "presentation") {
93
+ element.setAttribute("role", "presentation");
94
+ }
95
+ });
96
+ document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => {
97
+ if (element.role !== "presentation") {
98
+ element.setAttribute("role", "presentation");
99
+ }
100
+ });
101
+ document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => {
102
+ if (element.role !== "presentation") {
103
+ element.setAttribute("role", "presentation");
104
+ }
105
+ });
106
+ }, []);
55
107
  return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
56
- return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
108
+ return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
57
109
  } }));
58
110
  };
package/lib/components/tableWrapper/TableWrapper.module.css CHANGED
@@ -16,9 +16,7 @@
16
16
  position: relative;
17
17
  }
18
18
 
19
- .wrapper {
20
- overflow-x: scroll;
21
- }
19
+ .wrapper,
22
20
  .wrapperTouchscreen {
23
21
  overflow-x: scroll;
24
22
  }
@@ -35,9 +33,9 @@
35
33
  padding-inline-end: var(--conduction-table-wrapper-scroll-button-padding-inline-end);
36
34
  padding-block-start: var(--conduction-table-wrapper-scroll-button-padding-block-start);
37
35
  padding-block-end: var(--conduction-table-wrapper-scroll-button-padding-block-end);
38
- border-width:var(--conduction-table-wrapper-scroll-button-border-width) ;
39
- border-style:var(--conduction-table-wrapper-scroll-button-border-style) ;
40
- border-color:var(--conduction-table-wrapper-scroll-button-border-color) ;
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);
41
39
  }
42
40
 
43
41
  .scrollLeftButton:hover,
package/lib/components/tabs/Tabs.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import React, { useState, useEffect } from "react";
2
+ import * as React from "react";
3
3
  import * as styles from "./Tabs.module.css";
4
4
  import { Tabs as RTabs, TabList as RTabList, Tab as RTab, TabPanel as RTabPanel, } from "react-tabs";
5
5
  import clsx from "clsx";
@@ -10,8 +10,8 @@ export const Tabs = ({ children, ...otherProps }) => (_jsx(RTabs, { className: s
10
10
  Tabs.tabsRole = "Tabs";
11
11
  // TabList
12
12
  export const TabList = ({ children, ...otherProps }) => {
13
- const [canScrollRight, setCanScrollRight] = useState(false);
14
- const [canScrollLeft, setCanScrollLeft] = useState(false);
13
+ const [canScrollRight, setCanScrollRight] = React.useState(false);
14
+ const [canScrollLeft, setCanScrollLeft] = React.useState(false);
15
15
  const wrapperRef = React.useRef(null);
16
16
  const handleScroll = () => {
17
17
  if (wrapperRef.current) {
@@ -27,7 +27,7 @@ export const TabList = ({ children, ...otherProps }) => {
27
27
  if (wrapperRef.current)
28
28
  wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
29
29
  };
30
- useEffect(() => {
30
+ React.useEffect(() => {
31
31
  if (wrapperRef.current) {
32
32
  setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
33
33
  }
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js CHANGED
@@ -4,14 +4,31 @@ import * as styles from "./PrimaryTopNav.module.css";
4
4
  import clsx from "clsx";
5
5
  import { Link } from "@utrecht/component-library-react/dist/css-module";
6
6
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7
- import { faBars } from "@fortawesome/free-solid-svg-icons";
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({});
10
11
  const handleItemClick = (handleClick) => {
11
12
  if (handleClick) {
12
13
  handleClick();
13
14
  setIsOpen(false);
14
15
  }
15
16
  };
16
- 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: () => handleItemClick(handleClick), className: clsx(styles.li, current && styles.current), children: [_jsxs(Link, { className: clsx(styles.link, styles.label), children: [icon, label] }), subItems && (_jsx("ul", { className: styles.dropdown, 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), children: [icon, label] }) }, idx))) }))] }, idx))) }) })] }));
17
+ const handleSubItemMenu = (idx, value) => {
18
+ setSubNavIsOpen({
19
+ ...subNavIsOpen,
20
+ [idx]: value,
21
+ });
22
+ };
23
+ const screenWidth = window.innerWidth;
24
+ 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))) }) })] }));
17
34
  };
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -1,16 +1,31 @@
1
1
  :root {
2
- --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
3
- --conduction-primary-top-nav-color: var(--skeleton-color-white);
4
- --conduction-primary-top-nav-background-color: var(--skeleton-color-secondary-3);
5
- --conduction-primary-top-nav-background-color-hover: rgba(255, 255, 255, 0.2);
6
- --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
7
- --conduction-primary-top-nav-background-color-active: rgba(255, 255, 255, 0.2);
8
- --conduction-primary-top-nav-box-shadow-active: inset 0 -4px black;
2
+ --conduction-primary-top-nav-color: #4a4a4a;
3
+ --conduction-primary-top-nav-background-color: #ffffff;
9
4
  --conduction-primary-top-nav-toggle-icon-size: 24px;
10
5
  --conduction-primary-top-nav-mobile-logo-padding: 18px;
6
+
7
+ --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
11
8
  --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
12
- --conduction-primary-top-nav-dropdown-background-color: var(--skeleton-color-white);
13
- --conduction-primary-top-nav-dropdown-background-color-hover: var(--skeleton-color-grey-1);
9
+
10
+ /* --conduction-primary-top-nav- */
11
+
12
+ /* --conduction-primary-top-nav-current-background-color: #ffffff; */
13
+ /* --conduction-primary-top-nav-current-color: #4376fc; */
14
+ /* --conduction-primary-top-nav-current-box-shadow: inset 0 -4px black; */
15
+ /* --conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 black; */
16
+
17
+ /* --conduction-primary-top-nav-hover-color: #4376fc; */
18
+ /* --conduction-primary-top-nav-hover-background-color: #ffffff; */
19
+ /* --conduction-primary-top-nav-hover-box-shadow: inset 0 -4px black; */
20
+
21
+ /* --conduction-primary-top-nav-dropdown-color: #4a4a4a; */
22
+ /* --conduction-primary-top-nav-dropdown-background-color: var(--skeleton-color-white); */
23
+ /* --conduction-primary-top-nav-dropdown-border-width: 1px; */
24
+ /* --conduction-primary-top-nav-dropdown-border-style: solid; */
25
+ /* --conduction-primary-top-nav-dropdown-border-color: #4376fc; */
26
+ /* --conduction-primary-top-nav-dropdown-hover-color: #4376fc; */
27
+ /* --conduction-primary-top-nav-dropdown-hover-background-color: #ffffff; */
28
+ /* --conduction-primary-top-nav-dropdown-hover-box-shadow: inset 0 -4px black; */
14
29
  }
15
30
 
16
31
  .container {
@@ -28,6 +43,7 @@
28
43
  all: unset;
29
44
  font-size: var(--conduction-primary-top-nav-toggle-icon-size);
30
45
  padding: var(--conduction-primary-top-nav-mobile-logo-padding);
46
+ color: var(--conduction-primary-top-nav-color);
31
47
  }
32
48
 
33
49
  .menuToggleContainer > .menuToggle:hover {
@@ -75,59 +91,89 @@
75
91
  }
76
92
 
77
93
  .li:hover {
78
- background-color: var(--conduction-primary-top-nav-background-color-hover);
94
+ background-color: var(--conduction-primary-top-nav-hover-background-color);
95
+ box-shadow: var(--conduction-primary-top-nav-hover-box-shadow, inherit);
79
96
  }
80
97
 
81
98
  .current {
82
- background-color: var(--conduction-primary-top-nav-background-color-active);
83
- box-shadow: var(--conduction-primary-top-nav-box-shadow-active);
99
+ background-color: var(--conduction-primary-top-nav-current-background-color);
100
+ box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
101
+ }
102
+
103
+ .current:hover {
104
+ box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
105
+ }
106
+ .current:hover > .currentLink {
107
+ color: var(--conduction-primary-top-nav-hover-color) !important;
108
+ }
109
+
110
+ .currentLink {
111
+ color: var(--conduction-primary-top-nav-current-color) !important;
84
112
  }
85
113
 
114
+ .mobileLink {
115
+ margin-block-end: var(--skeleton-size-md);
116
+ }
86
117
  .primary .link {
87
- display: block;
88
118
  text-decoration: none;
119
+ }
120
+
121
+ .primary .link:not(.currentLink) {
122
+ display: block;
89
123
  color: var(--conduction-primary-top-nav-color);
90
124
  }
91
125
 
92
126
  .primary .li:hover .link {
93
- color: var(--conduction-primary-top-nav-color-hover);
127
+ color: var(--conduction-primary-top-nav-hover-color);
94
128
  }
95
129
 
96
130
  .link > * {
97
131
  margin-inline-end: 8px;
98
132
  }
99
133
 
100
- .primary .li:hover .dropdown {
101
- display: block;
102
- z-index: 1;
103
- }
104
-
105
134
  .dropdown {
106
135
  left: 0;
107
136
  top: 100%;
108
137
  padding: 0;
109
138
  width: 100%;
110
- display: block;
139
+ display: none;
111
140
  list-style-type: none;
112
- background-color: var(--conduction-primary-top-nav-dropdown-background-color);
113
- border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
114
- border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
141
+ background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
142
+ }
143
+
144
+ .dropdown.isOpen {
145
+ display: block;
146
+ }
147
+
148
+ .li.current {
149
+ box-shadow: var(--conduction-primary-top-nav-current-mobile-box-shadow);
115
150
  }
116
151
 
117
152
  .primary .dropdown .li .link {
118
- color: var(--conduction-primary-top-nav-dropdown-color);
153
+ color: var(--conduction-primary-top-nav-dropdown-color, var(--conduction-primary-top-nav-color));
119
154
  }
120
155
 
121
156
  .primary .dropdown .li:hover .link {
122
- color: var(--conduction-primary-top-nav-dropdown-color-hover);
157
+ color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color));
123
158
  }
124
159
 
125
160
  .dropdown .li:hover {
126
- background: var(--conduction-primary-top-nav-dropdown-background-color-hover);
161
+ background: var(--conduction-primary-top-nav-dropdown-hover-background-color, var(--conduction-primary-top-nav-hover-background-color));
162
+ box-shadow: var(--conduction-primary-top-nav-dropdown-hover-box-shadow, var(--conduction-primary-top-nav-hover-box-shadow));
127
163
  }
128
164
 
129
165
  .dropdown > li {
130
- padding-inline-start: var(--web-app-size-md);
166
+ padding-inline-start: var(--skeleton-size-md);
167
+ }
168
+
169
+ .toggleIcon {
170
+ margin-inline-start: var(--skeleton-size-xs);
171
+ transition: transform 100ms ease-in-out;
172
+ }
173
+
174
+ .toggleIcon.isOpen {
175
+ transform: rotate(90deg);
176
+ transition: transform 100ms ease-in-out;
131
177
  }
132
178
 
133
179
  .label {
@@ -159,9 +205,26 @@
159
205
  .dropdown {
160
206
  position: absolute;
161
207
  display: none;
208
+ border-width: var(--conduction-primary-top-nav-dropdown-border-width);
209
+ border-style: var(--conduction-primary-top-nav-dropdown-border-style);
210
+ border-color: var(--conduction-primary-top-nav-dropdown-border-color);
211
+ border-top: none;
162
212
  }
163
213
 
164
214
  .menuToggleContainer {
165
215
  display: none;
166
216
  }
217
+
218
+ .primary .li:hover .dropdown {
219
+ display: block;
220
+ z-index: 1;
221
+ }
222
+
223
+ .mobileLink {
224
+ margin-block-end: unset;
225
+ }
226
+
227
+ .li.current {
228
+ box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
229
+ }
167
230
  }
package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.module.css CHANGED
@@ -1,13 +1,18 @@
1
1
  :root {
2
- --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md);
3
- --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md);
4
2
  --conduction-secondary-top-nav-color: var(--skeleton-color-white);
5
- --conduction-secondary-top-nav-background-color: var(--skeleton-color-secondary-5);
6
- --conduction-secondary-top-nav-background-color-hover: rgba(0, 0, 0, 0.1);
3
+ --conduction-secondary-top-nav-background-color: #ffffff;
4
+ --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md);
7
5
  --conduction-secondary-top-nav-font-weight: var(--skeleton-font-weight-light);
8
- --conduction-secondary-top-nav-color-active: rgba(0, 0, 0, 0.1);
9
- --conduction-secondary-top-nav-box-shadow-active: inset 0 -4px black;
6
+
7
+ --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md);
10
8
  --conduction-secondary-top-nav-item-icon-margin: var(--skeleton-size-2x);
9
+
10
+ /* --conduction-secondary-top-nav-curent-color: rgba(0, 0, 0, 0.1);
11
+ --conduction-secondary-top-nav-current-background-color: #ffffff;
12
+ --conduction-secondary-top-nav-current-box-shadow: inset 0 -4px black;
13
+
14
+ --conduction-secondary-top-nav-hover-color: #4376fc;
15
+ --conduction-secondary-top-nav-hover-background-color: rgba(0, 0, 0, 0.1); */
11
16
  }
12
17
 
13
18
  .secondary:hover {
@@ -31,12 +36,16 @@
31
36
  }
32
37
 
33
38
  .li:hover {
34
- background-color: var(--conduction-secondary-top-nav-background-color-hover);
39
+ background-color: var(--conduction-secondary-top-nav-hover-background-color);
35
40
  }
36
41
 
37
42
  .current {
38
- background-color: var(--conduction-secondary-top-nav-color-active);
39
- box-shadow: var(--conduction-secondary-top-nav-box-shadow-active);
43
+ background-color: var(--conduction-secondary-top-nav-current-background-color);
44
+ box-shadow: var(--conduction-secondary-top-nav-current-box-shadow);
45
+ }
46
+
47
+ .currentLink {
48
+ color: var(--conduction-primary-top-nav-current-color) !important;
40
49
  }
41
50
 
42
51
  .secondary {
@@ -46,6 +55,10 @@
46
55
  background-color: var(--conduction-secondary-top-nav-background-color);
47
56
  }
48
57
 
58
+ .secondary .li:hover .link {
59
+ color: var(--conduction-secondary-top-nav-hover-color);
60
+ display: block;
61
+ }
49
62
  .secondary .link {
50
63
  color: var(--conduction-secondary-top-nav-color);
51
64
  display: block;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.10",
3
+ "version": "2.2.12",
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.tsx CHANGED
@@ -11,6 +11,7 @@ interface ISelectProps {
11
11
  control: Control<FieldValues, any>;
12
12
  options: { label: string; value: string }[];
13
13
  name: string;
14
+ ariaLabel?: string;
14
15
  id?: string;
15
16
  defaultValue?: any;
16
17
  disabled?: boolean;
@@ -72,7 +73,25 @@ export const SelectMultiple = ({
72
73
  hideErrorMessage,
73
74
  menuPlacement,
74
75
  placeholder,
76
+ ariaLabel,
75
77
  }: ISelectProps & IReactHookFormProps): JSX.Element => {
78
+ React.useEffect(() => {
79
+ document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
80
+ if (element?.role !== "presentation") {
81
+ element.setAttribute("role", "presentation");
82
+ }
83
+ });
84
+ document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
85
+ if (element.role !== "presentation") {
86
+ element.setAttribute("role", "presentation");
87
+ }
88
+ });
89
+ document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
90
+ if (element.role !== "presentation") {
91
+ element.setAttribute("role", "presentation");
92
+ }
93
+ });
94
+ }, []);
76
95
  return (
77
96
  <Controller
78
97
  {...{ control, name, defaultValue }}
@@ -81,6 +100,7 @@ export const SelectMultiple = ({
81
100
  return (
82
101
  <>
83
102
  <ReactSelect
103
+ aria-label={ariaLabel}
84
104
  inputId={id}
85
105
  value={value ?? ""}
86
106
  className={clsx(styles.select, errors[name] && styles.error)}
@@ -112,7 +132,25 @@ export const SelectCreate = ({
112
132
  hideErrorMessage,
113
133
  menuPlacement,
114
134
  placeholder,
135
+ ariaLabel,
115
136
  }: ISelectProps & IReactHookFormProps): JSX.Element => {
137
+ React.useEffect(() => {
138
+ document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
139
+ if (element.role !== "presentation") {
140
+ element.setAttribute("role", "presentation");
141
+ }
142
+ });
143
+ document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
144
+ if (element.role !== "presentation") {
145
+ element.setAttribute("role", "presentation");
146
+ }
147
+ });
148
+ document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
149
+ if (element.role !== "presentation") {
150
+ element.setAttribute("role", "presentation");
151
+ }
152
+ });
153
+ }, []);
116
154
  return (
117
155
  <Controller
118
156
  {...{ control, name, defaultValue }}
@@ -121,6 +159,7 @@ export const SelectCreate = ({
121
159
  return (
122
160
  <>
123
161
  <CreatableSelect
162
+ aria-label={ariaLabel}
124
163
  inputId={id}
125
164
  value={value ?? ""}
126
165
  placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
@@ -153,7 +192,25 @@ export const SelectSingle = ({
153
192
  hideErrorMessage,
154
193
  menuPlacement,
155
194
  placeholder,
195
+ ariaLabel,
156
196
  }: ISelectProps & IReactHookFormProps): JSX.Element => {
197
+ React.useEffect(() => {
198
+ document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
199
+ if (element.role !== "presentation") {
200
+ element.setAttribute("role", "presentation");
201
+ }
202
+ });
203
+ document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
204
+ if (element.role !== "presentation") {
205
+ element.setAttribute("role", "presentation");
206
+ }
207
+ });
208
+ document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
209
+ if (element.role !== "presentation") {
210
+ element.setAttribute("role", "presentation");
211
+ }
212
+ });
213
+ }, []);
157
214
  return (
158
215
  <Controller
159
216
  {...{ control, name, defaultValue }}
@@ -162,6 +219,7 @@ export const SelectSingle = ({
162
219
  return (
163
220
  <>
164
221
  <ReactSelect
222
+ aria-label={ariaLabel}
165
223
  inputId={id}
166
224
  value={value ?? ""}
167
225
  className={clsx(styles.select, errors[name] && styles.error)}
package/src/components/tableWrapper/TableWrapper.module.css CHANGED
@@ -16,9 +16,7 @@
16
16
  position: relative;
17
17
  }
18
18
 
19
- .wrapper {
20
- overflow-x: scroll;
21
- }
19
+ .wrapper,
22
20
  .wrapperTouchscreen {
23
21
  overflow-x: scroll;
24
22
  }
@@ -35,9 +33,9 @@
35
33
  padding-inline-end: var(--conduction-table-wrapper-scroll-button-padding-inline-end);
36
34
  padding-block-start: var(--conduction-table-wrapper-scroll-button-padding-block-start);
37
35
  padding-block-end: var(--conduction-table-wrapper-scroll-button-padding-block-end);
38
- border-width:var(--conduction-table-wrapper-scroll-button-border-width) ;
39
- border-style:var(--conduction-table-wrapper-scroll-button-border-style) ;
40
- border-color:var(--conduction-table-wrapper-scroll-button-border-color) ;
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);
41
39
  }
42
40
 
43
41
  .scrollLeftButton:hover,
package/src/components/tabs/Tabs.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect } from "react";
1
+ import * as React from "react";
2
2
  import * as styles from "./Tabs.module.css";
3
3
  import {
4
4
  Tabs as RTabs,
@@ -26,8 +26,8 @@ Tabs.tabsRole = "Tabs";
26
26
 
27
27
  // TabList
28
28
  export const TabList: ReactTabsFunctionComponent<TabListProps> = ({ children, ...otherProps }) => {
29
- const [canScrollRight, setCanScrollRight] = useState(false);
30
- const [canScrollLeft, setCanScrollLeft] = useState(false);
29
+ const [canScrollRight, setCanScrollRight] = React.useState(false);
30
+ const [canScrollLeft, setCanScrollLeft] = React.useState(false);
31
31
 
32
32
  const wrapperRef = React.useRef<HTMLDivElement | null>(null);
33
33
 
@@ -48,7 +48,7 @@ export const TabList: ReactTabsFunctionComponent<TabListProps> = ({ children, ..
48
48
  if (wrapperRef.current) wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
49
49
  };
50
50
 
51
- useEffect(() => {
51
+ React.useEffect(() => {
52
52
  if (wrapperRef.current) {
53
53
  setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
54
54
  }
package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -1,16 +1,31 @@
1
1
  :root {
2
- --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
3
- --conduction-primary-top-nav-color: var(--skeleton-color-white);
4
- --conduction-primary-top-nav-background-color: var(--skeleton-color-secondary-3);
5
- --conduction-primary-top-nav-background-color-hover: rgba(255, 255, 255, 0.2);
6
- --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
7
- --conduction-primary-top-nav-background-color-active: rgba(255, 255, 255, 0.2);
8
- --conduction-primary-top-nav-box-shadow-active: inset 0 -4px black;
2
+ --conduction-primary-top-nav-color: #4a4a4a;
3
+ --conduction-primary-top-nav-background-color: #ffffff;
9
4
  --conduction-primary-top-nav-toggle-icon-size: 24px;
10
5
  --conduction-primary-top-nav-mobile-logo-padding: 18px;
6
+
7
+ --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
11
8
  --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
12
- --conduction-primary-top-nav-dropdown-background-color: var(--skeleton-color-white);
13
- --conduction-primary-top-nav-dropdown-background-color-hover: var(--skeleton-color-grey-1);
9
+
10
+ /* --conduction-primary-top-nav- */
11
+
12
+ /* --conduction-primary-top-nav-current-background-color: #ffffff; */
13
+ /* --conduction-primary-top-nav-current-color: #4376fc; */
14
+ /* --conduction-primary-top-nav-current-box-shadow: inset 0 -4px black; */
15
+ /* --conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 black; */
16
+
17
+ /* --conduction-primary-top-nav-hover-color: #4376fc; */
18
+ /* --conduction-primary-top-nav-hover-background-color: #ffffff; */
19
+ /* --conduction-primary-top-nav-hover-box-shadow: inset 0 -4px black; */
20
+
21
+ /* --conduction-primary-top-nav-dropdown-color: #4a4a4a; */
22
+ /* --conduction-primary-top-nav-dropdown-background-color: var(--skeleton-color-white); */
23
+ /* --conduction-primary-top-nav-dropdown-border-width: 1px; */
24
+ /* --conduction-primary-top-nav-dropdown-border-style: solid; */
25
+ /* --conduction-primary-top-nav-dropdown-border-color: #4376fc; */
26
+ /* --conduction-primary-top-nav-dropdown-hover-color: #4376fc; */
27
+ /* --conduction-primary-top-nav-dropdown-hover-background-color: #ffffff; */
28
+ /* --conduction-primary-top-nav-dropdown-hover-box-shadow: inset 0 -4px black; */
14
29
  }
15
30
 
16
31
  .container {
@@ -28,6 +43,7 @@
28
43
  all: unset;
29
44
  font-size: var(--conduction-primary-top-nav-toggle-icon-size);
30
45
  padding: var(--conduction-primary-top-nav-mobile-logo-padding);
46
+ color: var(--conduction-primary-top-nav-color);
31
47
  }
32
48
 
33
49
  .menuToggleContainer > .menuToggle:hover {
@@ -75,59 +91,89 @@
75
91
  }
76
92
 
77
93
  .li:hover {
78
- background-color: var(--conduction-primary-top-nav-background-color-hover);
94
+ background-color: var(--conduction-primary-top-nav-hover-background-color);
95
+ box-shadow: var(--conduction-primary-top-nav-hover-box-shadow, inherit);
79
96
  }
80
97
 
81
98
  .current {
82
- background-color: var(--conduction-primary-top-nav-background-color-active);
83
- box-shadow: var(--conduction-primary-top-nav-box-shadow-active);
99
+ background-color: var(--conduction-primary-top-nav-current-background-color);
100
+ box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
101
+ }
102
+
103
+ .current:hover {
104
+ box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
105
+ }
106
+ .current:hover > .currentLink {
107
+ color: var(--conduction-primary-top-nav-hover-color) !important;
108
+ }
109
+
110
+ .currentLink {
111
+ color: var(--conduction-primary-top-nav-current-color) !important;
84
112
  }
85
113
 
114
+ .mobileLink {
115
+ margin-block-end: var(--skeleton-size-md);
116
+ }
86
117
  .primary .link {
87
- display: block;
88
118
  text-decoration: none;
119
+ }
120
+
121
+ .primary .link:not(.currentLink) {
122
+ display: block;
89
123
  color: var(--conduction-primary-top-nav-color);
90
124
  }
91
125
 
92
126
  .primary .li:hover .link {
93
- color: var(--conduction-primary-top-nav-color-hover);
127
+ color: var(--conduction-primary-top-nav-hover-color);
94
128
  }
95
129
 
96
130
  .link > * {
97
131
  margin-inline-end: 8px;
98
132
  }
99
133
 
100
- .primary .li:hover .dropdown {
101
- display: block;
102
- z-index: 1;
103
- }
104
-
105
134
  .dropdown {
106
135
  left: 0;
107
136
  top: 100%;
108
137
  padding: 0;
109
138
  width: 100%;
110
- display: block;
139
+ display: none;
111
140
  list-style-type: none;
112
- background-color: var(--conduction-primary-top-nav-dropdown-background-color);
113
- border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
114
- border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
141
+ background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
142
+ }
143
+
144
+ .dropdown.isOpen {
145
+ display: block;
146
+ }
147
+
148
+ .li.current {
149
+ box-shadow: var(--conduction-primary-top-nav-current-mobile-box-shadow);
115
150
  }
116
151
 
117
152
  .primary .dropdown .li .link {
118
- color: var(--conduction-primary-top-nav-dropdown-color);
153
+ color: var(--conduction-primary-top-nav-dropdown-color, var(--conduction-primary-top-nav-color));
119
154
  }
120
155
 
121
156
  .primary .dropdown .li:hover .link {
122
- color: var(--conduction-primary-top-nav-dropdown-color-hover);
157
+ color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color));
123
158
  }
124
159
 
125
160
  .dropdown .li:hover {
126
- background: var(--conduction-primary-top-nav-dropdown-background-color-hover);
161
+ background: var(--conduction-primary-top-nav-dropdown-hover-background-color, var(--conduction-primary-top-nav-hover-background-color));
162
+ box-shadow: var(--conduction-primary-top-nav-dropdown-hover-box-shadow, var(--conduction-primary-top-nav-hover-box-shadow));
127
163
  }
128
164
 
129
165
  .dropdown > li {
130
- padding-inline-start: var(--web-app-size-md);
166
+ padding-inline-start: var(--skeleton-size-md);
167
+ }
168
+
169
+ .toggleIcon {
170
+ margin-inline-start: var(--skeleton-size-xs);
171
+ transition: transform 100ms ease-in-out;
172
+ }
173
+
174
+ .toggleIcon.isOpen {
175
+ transform: rotate(90deg);
176
+ transition: transform 100ms ease-in-out;
131
177
  }
132
178
 
133
179
  .label {
@@ -159,9 +205,26 @@
159
205
  .dropdown {
160
206
  position: absolute;
161
207
  display: none;
208
+ border-width: var(--conduction-primary-top-nav-dropdown-border-width);
209
+ border-style: var(--conduction-primary-top-nav-dropdown-border-style);
210
+ border-color: var(--conduction-primary-top-nav-dropdown-border-color);
211
+ border-top: none;
162
212
  }
163
213
 
164
214
  .menuToggleContainer {
165
215
  display: none;
166
216
  }
217
+
218
+ .primary .li:hover .dropdown {
219
+ display: block;
220
+ z-index: 1;
221
+ }
222
+
223
+ .mobileLink {
224
+ margin-block-end: unset;
225
+ }
226
+
227
+ .li.current {
228
+ box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
229
+ }
167
230
  }
package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx CHANGED
@@ -3,7 +3,7 @@ import * as styles from "./PrimaryTopNav.module.css";
3
3
  import clsx from "clsx";
4
4
  import { Link } from "@utrecht/component-library-react/dist/css-module";
5
5
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6
- import { faBars } from "@fortawesome/free-solid-svg-icons";
6
+ import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons";
7
7
 
8
8
  interface ITopNavItem {
9
9
  label: string;
@@ -26,6 +26,7 @@ export interface TopNavProps {
26
26
 
27
27
  export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProps): JSX.Element => {
28
28
  const [isOpen, setIsOpen] = React.useState<boolean>(false);
29
+ const [subNavIsOpen, setSubNavIsOpen] = React.useState({});
29
30
 
30
31
  const handleItemClick = (handleClick?: () => any) => {
31
32
  if (handleClick) {
@@ -35,6 +36,20 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
35
36
  }
36
37
  };
37
38
 
39
+ const handleSubItemMenu = (idx: number, value: boolean) => {
40
+ setSubNavIsOpen({
41
+ ...subNavIsOpen,
42
+ [idx as keyof typeof subNavIsOpen]: value,
43
+ });
44
+ };
45
+
46
+ const screenWidth = window.innerWidth;
47
+
48
+ React.useEffect(() => {
49
+ if (screenWidth > 992) {
50
+ setSubNavIsOpen({});
51
+ }
52
+ }, [screenWidth]);
38
53
  return (
39
54
  <div className={clsx(styles.container, layoutClassName && layoutClassName)}>
40
55
  <div className={styles.menuToggleContainer}>
@@ -49,24 +64,43 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
49
64
  <ul className={styles.ul}>
50
65
  {items.map(({ label, icon, current, handleClick, subItems }, idx) => (
51
66
  <li
52
- onClick={() => handleItemClick(handleClick)}
67
+ onClick={() =>
68
+ !subItems
69
+ ? handleItemClick(handleClick)
70
+ : screenWidth > 992
71
+ ? handleItemClick(handleClick)
72
+ : handleSubItemMenu(idx, !subNavIsOpen[idx as keyof typeof subNavIsOpen] ?? true)
73
+ }
53
74
  className={clsx(styles.li, current && styles.current)}
54
75
  key={idx}
55
76
  >
56
- <Link className={clsx(styles.link, styles.label)}>
77
+ <Link
78
+ className={clsx(
79
+ styles.link,
80
+ styles.label,
81
+ subItems && styles.mobileLink,
82
+ current && styles.currentLink,
83
+ )}
84
+ >
57
85
  {icon}
58
- {label}
86
+ {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
+ )}
59
93
  </Link>
60
94
 
61
95
  {subItems && (
62
- <ul className={styles.dropdown}>
96
+ <ul className={clsx(styles.dropdown, subNavIsOpen[idx as keyof typeof subNavIsOpen] && styles.isOpen)}>
63
97
  {subItems.map(({ label, icon, current, handleClick }, idx) => (
64
98
  <li
65
99
  key={idx}
66
100
  className={clsx(styles.li, current && styles.current)}
67
101
  onClick={() => handleItemClick(handleClick)}
68
102
  >
69
- <Link className={clsx(styles.link, styles.label)}>
103
+ <Link className={clsx(styles.link, styles.label, current && styles.currentLink)}>
70
104
  {icon}
71
105
  {label}
72
106
  </Link>
package/src/components/topNav/secondaryTopNav/SecondaryTopNav.module.css CHANGED
@@ -1,13 +1,18 @@
1
1
  :root {
2
- --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md);
3
- --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md);
4
2
  --conduction-secondary-top-nav-color: var(--skeleton-color-white);
5
- --conduction-secondary-top-nav-background-color: var(--skeleton-color-secondary-5);
6
- --conduction-secondary-top-nav-background-color-hover: rgba(0, 0, 0, 0.1);
3
+ --conduction-secondary-top-nav-background-color: #ffffff;
4
+ --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md);
7
5
  --conduction-secondary-top-nav-font-weight: var(--skeleton-font-weight-light);
8
- --conduction-secondary-top-nav-color-active: rgba(0, 0, 0, 0.1);
9
- --conduction-secondary-top-nav-box-shadow-active: inset 0 -4px black;
6
+
7
+ --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md);
10
8
  --conduction-secondary-top-nav-item-icon-margin: var(--skeleton-size-2x);
9
+
10
+ /* --conduction-secondary-top-nav-curent-color: rgba(0, 0, 0, 0.1);
11
+ --conduction-secondary-top-nav-current-background-color: #ffffff;
12
+ --conduction-secondary-top-nav-current-box-shadow: inset 0 -4px black;
13
+
14
+ --conduction-secondary-top-nav-hover-color: #4376fc;
15
+ --conduction-secondary-top-nav-hover-background-color: rgba(0, 0, 0, 0.1); */
11
16
  }
12
17
 
13
18
  .secondary:hover {
@@ -31,12 +36,16 @@
31
36
  }
32
37
 
33
38
  .li:hover {
34
- background-color: var(--conduction-secondary-top-nav-background-color-hover);
39
+ background-color: var(--conduction-secondary-top-nav-hover-background-color);
35
40
  }
36
41
 
37
42
  .current {
38
- background-color: var(--conduction-secondary-top-nav-color-active);
39
- box-shadow: var(--conduction-secondary-top-nav-box-shadow-active);
43
+ background-color: var(--conduction-secondary-top-nav-current-background-color);
44
+ box-shadow: var(--conduction-secondary-top-nav-current-box-shadow);
45
+ }
46
+
47
+ .currentLink {
48
+ color: var(--conduction-primary-top-nav-current-color) !important;
40
49
  }
41
50
 
42
51
  .secondary {
@@ -46,6 +55,10 @@
46
55
  background-color: var(--conduction-secondary-top-nav-background-color);
47
56
  }
48
57
 
58
+ .secondary .li:hover .link {
59
+ color: var(--conduction-secondary-top-nav-hover-color);
60
+ display: block;
61
+ }
49
62
  .secondary .link {
50
63
  color: var(--conduction-secondary-top-nav-color);
51
64
  display: block;