@conduction/components 2.2.40 → 2.2.42

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 +6 -0
  2. package/lib/components/Pagination/Pagination.module.css +53 -11
  3. package/lib/components/card/cardWrapper/CardWrapper.module.css +24 -15
  4. package/lib/components/card/downloadCard/DownloadCard.module.css +1 -0
  5. package/lib/components/displaySwitch/DisplaySwitch.js +1 -1
  6. package/lib/components/displaySwitch/DisplaySwitch.module.css +4 -0
  7. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js +1 -1
  8. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +17 -0
  9. package/package.json +1 -1
  10. package/src/components/Pagination/Pagination.module.css +53 -11
  11. package/src/components/card/cardWrapper/CardWrapper.module.css +24 -15
  12. package/src/components/card/downloadCard/DownloadCard.module.css +1 -0
  13. package/src/components/displaySwitch/DisplaySwitch.module.css +4 -0
  14. package/src/components/displaySwitch/DisplaySwitch.tsx +1 -0
  15. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +17 -0
  16. package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx +2 -2
package/README.md CHANGED
@@ -4,6 +4,12 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
+ - 2.2.42:
8
+ - Updated PrimaryTopNav to have seperate dropdown tokens.
9
+ - Updated Pagination to include border-bottom.
10
+ - Updated DownloadCard to include icon color.
11
+ - Updated CardWrapper to include hover color.
12
+ - 2.2.41: Updated displayswitch component to have pointer.
7
13
  - 2.2.40:
8
14
  - Updated DownloadCard to only accept fontawesome icons.
9
15
  - Removed tooltip from PrimaryTopNav component and updated dropdown.
package/lib/components/Pagination/Pagination.module.css CHANGED
@@ -19,12 +19,18 @@
19
19
  --conduction-pagination-item-border-width: unset;
20
20
  --conduction-pagination-item-border-style: unset;
21
21
  --conduction-pagination-item-border-color: unset;
22
+ /* --conduction-pagination-item-border-bottom-width: unset;
23
+ --conduction-pagination-item-border-bottom-style: unset;
24
+ --conduction-pagination-item-border-bottom-color: unset; */
22
25
 
23
26
  /* --conduction-pagination-navigation-button-background-color: #4376fc; */
24
27
  /* --conduction-pagination-navigation-button-color: #ffffff; */
25
28
  /* --conduction-pagination-navigation-button-border-width: 1px; */
26
29
  /* --conduction-pagination-navigation-button-border-style: solid; */
27
30
  /* --conduction-pagination-navigation-button-border-color: #4376fc; */
31
+ /* --conduction-pagination-navigation-button-border-bottom-width: 1px; */
32
+ /* --conduction-pagination-navigation-button-border-bottom-style: solid; */
33
+ /* --conduction-pagination-navigation-button-border-bottom-color: #4376fc; */
28
34
  /* --conduction-pagination-navigation-button-border-radius: 1px; */
29
35
  --conduction-pagination-navigation-button-padding-inline-start: 8px;
30
36
  --conduction-pagination-navigation-button-padding-inline-end: 8px;
@@ -36,6 +42,9 @@
36
42
  /* --conduction-pagination-navigation-button-disabled-border-width: 1px; */
37
43
  /* --conduction-pagination-navigation-button-disabled-border-style: solid; */
38
44
  /* --conduction-pagination-navigation-button-disabled-border-color: #4376fc; */
45
+ /* --conduction-pagination-navigation-button-disabled-border-bottom-width: 1px; */
46
+ /* --conduction-pagination-navigation-button-disabled-border-bottom-style: solid; */
47
+ /* --conduction-pagination-navigation-button-disabled-border-bottom-color: #4376fc; */
39
48
  /* --conduction-pagination-navigation-button-disabled-border-radius: 1px; */
40
49
 
41
50
  --conduction-pagination-navigation-button-hover-color: #d1d1d1;
@@ -43,6 +52,9 @@
43
52
  /* --conduction-pagination-navigation-button-hover-border-width: 1px; */
44
53
  /* --conduction-pagination-navigation-button-hover-border-style: solid; */
45
54
  /* --conduction-pagination-navigation-button-hover-border-color: #4376fc; */
55
+ /* --conduction-pagination-navigation-button-hover-border-bottom-width: 1px; */
56
+ /* --conduction-pagination-navigation-button-hover-border-bottom-style: solid; */
57
+ /* --conduction-pagination-navigation-button-hover-border-bottom-color: #4376fc; */
46
58
  /* --conduction-pagination-navigation-button-hover-border-radius: 1px; */
47
59
 
48
60
  --conduction-pagination-current-page-background-color: #4376fc;
@@ -52,6 +64,9 @@
52
64
  --conduction-pagination-current-page-border-width: unset;
53
65
  --conduction-pagination-current-page-border-style: unset;
54
66
  --conduction-pagination-current-page-border-color: unset;
67
+ /* --conduction-pagination-current-page-border-bottom-width: unset; */
68
+ /* --conduction-pagination-current-page-border-bottom-style: unset; */
69
+ /* --conduction-pagination-current-page-border-bottom-color: unset; */
55
70
 
56
71
  --conduction-pagination-page-hover-color: #4376fc;
57
72
  --conduction-pagination-page-hover-background-color: #ffffff;
@@ -60,6 +75,9 @@
60
75
  --conduction-pagination-page-hover-border-width: unset;
61
76
  --conduction-pagination-page-hover-border-style: unset;
62
77
  --conduction-pagination-page-hover-border-color: unset;
78
+ /* --conduction-pagination-page-hover-border-bottom-width: unset; */
79
+ /* --conduction-pagination-page-hover-border-bottom-style: unset; */
80
+ /* --conduction-pagination-page-hover-border-bottom-color: unset; */
63
81
  }
64
82
 
65
83
  .container {
@@ -79,7 +97,12 @@
79
97
  .container > li.currentPage > a {
80
98
  color: var(--conduction-pagination-current-page-color);
81
99
  background-color: var(--conduction-pagination-current-page-background-color);
82
- border: var(--conduction-pagination-current-page-border-width) var(--conduction-pagination-current-page-border-style) var(--conduction-pagination-current-page-border-color);
100
+ border-width: var(--conduction-pagination-current-page-border-width);
101
+ border-style: var(--conduction-pagination-current-page-border-style);
102
+ border-color: var(--conduction-pagination-current-page-border-color);
103
+ border-bottom-width: var(--conduction-pagination-current-page-border-bottom-width, var(--conduction-pagination-current-page-border-width));
104
+ border-bottom-style: var(--conduction-pagination-current-page-border-bottom-style, var(--conduction-pagination-current-page-border-style));
105
+ border-bottom-color: var(--conduction-pagination-current-page-border-bottom-color, var(--conduction-pagination-current-page-border-color));
83
106
  border-radius: var(--conduction-pagination-item-border-radius);
84
107
  padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
85
108
  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
@@ -94,7 +117,12 @@
94
117
  .container > li:not(.previous):not(.next):not(.currentPage) > a {
95
118
  color: var(--conduction-pagination-item-color);
96
119
  background-color: var(--conduction-pagination-item-background-color);
97
- border: var(--conduction-pagination-item-border-width) var(--conduction-pagination-item-border-style) var(--conduction-pagination-item-border-color);
120
+ border-width: var(--conduction-pagination-item-border-width);
121
+ border-style: var(--conduction-pagination-item-border-style);
122
+ border-color: var(--conduction-pagination-item-border-color);
123
+ border-bottom-width: var(--conduction-pagination-item-border-bottom-width, var(--conduction-pagination-item-border-width));
124
+ border-bottom-style: var(--conduction-pagination-item-border-bottom-style, var(--conduction-pagination-item-border-style));
125
+ border-bottom-color: var(--conduction-pagination-item-border-bottom-color, var(--conduction-pagination-item-border-color));
98
126
  border-radius: var(--conduction-pagination-item-border-radius);
99
127
  padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
100
128
  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
@@ -117,19 +145,25 @@
117
145
  .container > li.disabled > a > .button {
118
146
  color: var(--conduction-pagination-navigation-button-disabled-color) !important;
119
147
  background-color: var(--conduction-pagination-navigation-button-disabled-background-color) !important;
120
- border-width: var(--conduction-pagination-navigation-button-disabled-border-width, var(--utrecht-button-border-width));
121
- border-style: var(--conduction-pagination-navigation-button-disabled-border-style, var(--utrecht-button-border-style));
122
- border-color: var(--conduction-pagination-navigation-button-disabled-border-color, var(--utrecht-button-border-color));
123
- border-radius: var(--conduction-pagination-navigation-button-disabled-border-radius, var(--utrecht-button-border-radius));
148
+ border-width: var(--conduction-pagination-navigation-button-disabled-border-width, var(--utrecht-button-border-width)) !important;
149
+ border-style: var(--conduction-pagination-navigation-button-disabled-border-style, var(--utrecht-button-border-style)) !important;
150
+ border-color: var(--conduction-pagination-navigation-button-disabled-border-color, var(--utrecht-button-border-color)) !important;
151
+ border-bottom-width: var(--conduction-pagination-navigation-button-disabled-border-bottom-width, var(--utrecht-button-border-bottom-width)) !important;
152
+ border-bottom-style: var(--conduction-pagination-navigation-button-disabled-border-bottom-style, var(--utrecht-button-border-bottom-style)) !important;
153
+ border-bottom-color: var(--conduction-pagination-navigation-button-disabled-border-bottom-color, var(--utrecht-button-border-bottom-color)) !important;
154
+ border-radius: var(--conduction-pagination-navigation-button-disabled-border-radius, var(--utrecht-button-border-radius)) !important;
124
155
  }
125
156
 
126
157
  .container > li:hover:not(.disabled) > a > .button {
127
158
  color: var(--conduction-pagination-navigation-button-hover-color) !important;
128
159
  background-color: var(--conduction-pagination-navigation-button-hover-background-color) !important;
129
- border-width: var(--conduction-pagination-navigation-button-hover-border-width, var(--utrecht-button-border-width));
130
- border-style: var(--conduction-pagination-navigation-button-hover-border-style, var(--utrecht-button-border-style));
131
- border-color: var(--conduction-pagination-navigation-button-hover-border-color, var(--utrecht-button-border-color));
132
- border-radius: var(--conduction-pagination-navigation-button-hover-border-radius, var(--utrecht-button-border-radius));
160
+ border-width: var(--conduction-pagination-navigation-button-hover-border-width, var(--utrecht-button-border-width)) !important;
161
+ border-style: var(--conduction-pagination-navigation-button-hover-border-style, var(--utrecht-button-border-style)) !important;
162
+ border-color: var(--conduction-pagination-navigation-button-hover-border-color, var(--utrecht-button-border-color)) !important;
163
+ border-bottom-width: var(--conduction-pagination-navigation-button-hover-border-bottom-width, var(--utrecht-button-border-bottom-width)) !important;
164
+ border-bottom-style: var(--conduction-pagination-navigation-button-hover-border-bottom-style, var(--utrecht-button-border-bottom-style)) !important;
165
+ border-bottom-color: var(--conduction-pagination-navigation-button-hover-border-bottom-color, var(--utrecht-button-border-bottom-color)) !important;
166
+ border-radius: var(--conduction-pagination-navigation-button-hover-border-radius, var(--utrecht-button-border-radius)) !important;
133
167
  }
134
168
 
135
169
  .container > li:hover:not(.disabled):not(.currentPage) {
@@ -141,7 +175,12 @@
141
175
  background-color: var(--conduction-pagination-page-hover-background-color);
142
176
  text-decoration: var(--conduction-pagination-page-hover-text-decoration);
143
177
  text-decoration-thickness: var(--conduction-pagination-page-hover-text-decoration-thickness);
144
- border: var(--conduction-pagination-page-hover-border-width) var(--conduction-pagination-page-hover-border-style) var(--conduction-pagination-page-hover-border-color);
178
+ border-width: var(--conduction-pagination-page-hover-border-width);
179
+ border-style: var(--conduction-pagination-page-hover-border-style);
180
+ border-color: var(--conduction-pagination-page-hover-border-color);
181
+ border-bottom-width: var(--conduction-pagination-page-hover-border-bottom-width, var(--conduction-pagination-page-hover-border-width));
182
+ border-bottom-style: var(--conduction-pagination-page-hover-border-bottom-style, var(--conduction-pagination-page-hover-border-style));
183
+ border-bottom-color: var(--conduction-pagination-page-hover-border-bottom-color, var(--conduction-pagination-page-hover-border-color));
145
184
  }
146
185
 
147
186
  .button {
@@ -150,6 +189,9 @@
150
189
  border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)) !important;
151
190
  border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)) !important;
152
191
  border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)) !important;
192
+ border-bottom-width: var(--conduction-pagination-navigation-button-border-bottom-width, var(--utrecht-button-border-bottom-width)) !important;
193
+ border-bottom-style: var(--conduction-pagination-navigation-button-border-bottom-style, var(--utrecht-button-border-bottom-style)) !important;
194
+ border-bottom-color: var(--conduction-pagination-navigation-button-border-bottom-color, var(--utrecht-button-border-bottom-color)) !important;
153
195
  border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius)) !important;
154
196
  padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
155
197
  padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;
package/lib/components/card/cardWrapper/CardWrapper.module.css CHANGED
@@ -7,6 +7,9 @@
7
7
  /* --conduction-card-wrapper-border-bottom-style: unset; */
8
8
  /* --conduction-card-wrapper-border-bottom-color: unset; */
9
9
  /* --conduction-card-wrapper-box-shadow: unset; */
10
+ /* --conduction-card-wrapper-hover-border-width: unset; */
11
+ /* --conduction-card-wrapper-hover-border-style: unset; */
12
+ /* --conduction-card-wrapper-hover-border-color: unset; */
10
13
  /* --conduction-card-wrapper-hover-border-bottom-width: unset; */
11
14
  /* --conduction-card-wrapper-hover-border-bottom-style: unset; */
12
15
  /* --conduction-card-wrapper-hover-border-bottom-color: unset; */
@@ -20,28 +23,34 @@
20
23
  }
21
24
 
22
25
  .container {
23
- padding-inline-start: var(--conduction-card-wrapper-padding-inline-start);
24
- padding-inline-end: var(--conduction-card-wrapper-padding-inline-end);
25
- padding-block-start: var(--conduction-card-wrapper-padding-block-start);
26
- padding-block-end: var(--conduction-card-wrapper-padding-block-end);
27
-
28
- color: var(--conduction-card-wrapper-color);
29
26
  background-color: var(--conduction-card-wrapper-background-color);
27
+ color: var(--conduction-card-wrapper-color);
28
+ position: relative;
29
+ box-shadow: var(--conduction-card-wrapper-box-shadow);
30
30
 
31
31
  border-radius: var(--conduction-card-wrapper-border-radius);
32
32
  border-width: var(--conduction-card-wrapper-border-width);
33
- border: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
34
- border-bottom: var(--conduction-card-wrapper-border-bottom-width, var(--conduction-card-wrapper-border-width))
35
- var(--conduction-card-wrapper-border-bottom-style, var(--conduction-card-wrapper-border-style))
36
- var(--conduction-card-wrapper-border-bottom-color, var(--conduction-card-wrapper-border-color));
37
- position: relative;
38
- box-shadow: var(--conduction-card-wrapper-box-shadow);
33
+ border-style: var(--conduction-card-wrapper-border-style);
34
+ border-color: var(--conduction-card-wrapper-border-color);
35
+ border-bottom-width: var(--conduction-card-wrapper-border-bottom-width, var(--conduction-card-wrapper-border-width));
36
+ border-bottom-style: var(--conduction-card-wrapper-border-bottom-style, var(--conduction-card-wrapper-border-style));
37
+ border-bottom-color: var(--conduction-card-wrapper-border-bottom-color, var(--conduction-card-wrapper-border-color));
38
+
39
+ padding-inline-start: var(--conduction-card-wrapper-padding-inline-start);
40
+ padding-inline-end: var(--conduction-card-wrapper-padding-inline-end);
41
+ padding-block-start: var(--conduction-card-wrapper-padding-block-start);
42
+ padding-block-end: var(--conduction-card-wrapper-padding-block-end);
39
43
  }
40
44
 
41
45
  .container:hover {
42
46
  background-color: var(--conduction-card-wrapper-hover-background-color, var(--conduction-card-wrapper-background-color));
43
- border-bottom: var(--conduction-card-wrapper-hover-border-bottom-width, var(--conduction-card-wrapper-border-width))
44
- var(--conduction-card-wrapper-hover-border-bottom-style, var(--conduction-card-wrapper-border-style))
45
- var(--conduction-card-wrapper-hover-border-bottom-color, var(--conduction-card-wrapper-border-color));
47
+ color: var(--conduction-card-wrapper-hover-color, var(--conduction-card-wrapper-color));
46
48
  cursor: pointer;
49
+
50
+ border-width: var(--conduction-card-wrapper-hover-border-width, var(--conduction-card-wrapper-border-width));
51
+ border-style: var(--conduction-card-wrapper-hover-border-style, var(--conduction-card-wrapper-border-style));
52
+ border-color: var(--conduction-card-wrapper-hover-border-color, var(--conduction-card-wrapper-border-color));
53
+ border-bottom-width: var(--conduction-card-wrapper-hover-border-bottom-width, var(--conduction-card-wrapper-hover-border-width, var(--conduction-card-wrapper-border-width)));
54
+ border-bottom-style: var(--conduction-card-wrapper-hover-border-bottom-style, var(--conduction-card-wrapper-hover-border-style, var(--conduction-card-wrapper-border-style)));
55
+ border-bottom-color: var(--conduction-card-wrapper-hover-border-bottom-color, var(--conduction-card-wrapper-hover-border-color, var(--conduction-card-wrapper-border-color)));
47
56
  }
package/lib/components/card/downloadCard/DownloadCard.module.css CHANGED
@@ -52,6 +52,7 @@
52
52
 
53
53
  .icon {
54
54
  margin-inline-end: var(--conduction-download-card-icon-gap);
55
+ color: var(--conduction-download-card-icon-color);
55
56
  }
56
57
 
57
58
  .link {
package/lib/components/displaySwitch/DisplaySwitch.js CHANGED
@@ -7,7 +7,7 @@ const DisplaySwitch = ({ layoutClassName, buttons }) => {
7
7
  return (_jsx(ButtonGroup, { className: clsx(styles.displaySwitchButtons, [layoutClassName] && layoutClassName), children: buttons.map((button, idx) => {
8
8
  // TODO: Once the Rotterdam design system supports the "pressed" state,
9
9
  // remove the `appereance` switch, and use the same appearance for each button.
10
- return (_jsxs(Button, { pressed: button.pressed, appearance: button.pressed ? "secondary-action-button" : "subtle-button", onClick: button.handleClick, children: [button.icon && _jsx(FontAwesomeIcon, { icon: [button.icon.prefix, button.icon.name] }), _jsx("span", { children: button.label })] }, idx));
10
+ return (_jsxs(Button, { pressed: button.pressed, appearance: button.pressed ? "secondary-action-button" : "subtle-button", onClick: button.handleClick, className: styles.button, children: [button.icon && _jsx(FontAwesomeIcon, { icon: [button.icon.prefix, button.icon.name] }), _jsx("span", { children: button.label })] }, idx));
11
11
  }) }));
12
12
  };
13
13
  export default DisplaySwitch;
package/lib/components/displaySwitch/DisplaySwitch.module.css CHANGED
@@ -1,3 +1,7 @@
1
1
  .displaySwitchButtons {
2
2
  align-items: center;
3
3
  }
4
+
5
+ .button[aria-pressed="false"]:hover {
6
+ cursor: pointer;
7
+ }
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js CHANGED
@@ -19,5 +19,5 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }) => {
19
19
  setIsOpen(false);
20
20
  handleClick();
21
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 && icon, label, " ", subItems && isMobile && _jsx(FontAwesomeIcon, { className: styles.toggleIcon, icon: faChevronRight })] }), subItems && (_jsx("ul", { className: clsx(styles.dropdown, [subItems.length > 8 && styles.dropdownOverflow]), 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))) }) })] }));
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 && icon, label, " ", subItems && isMobile && _jsx(FontAwesomeIcon, { className: styles.toggleIcon, icon: faChevronRight })] }), subItems && (_jsx("ul", { className: clsx(styles.dropdown, [subItems.length > 8 && styles.dropdownOverflow]), children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.dropdownCurrent), onClick: () => handleSubItemClick(handleClick), children: _jsxs(Link, { className: clsx(styles.link, styles.label, current && styles.dropdownCurrentLink), children: [icon, label] }) }, idx))) }))] }, idx))) }) })] }));
23
23
  };
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -116,6 +116,23 @@
116
116
  fill: var(--conduction-primary-top-nav-current-color) !important;
117
117
  }
118
118
 
119
+ .dropdownCurrent {
120
+ background-color: var(--conduction-primary-top-nav-dropdown-current-background-color, var(--conduction-primary-top-nav-current-background-color));
121
+ box-shadow: var(--conduction-primary-top-nav-dropdown-current-box-shadow, var(--conduction-primary-top-nav-current-box-shadow));
122
+ }
123
+
124
+ .dropdownCurrent:hover > .dropdownCurrentLink {
125
+ color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color)) !important;
126
+ }
127
+
128
+ .dropdownCurrentLink {
129
+ color: var(--conduction-primary-top-nav-dropdown-current-color, var(--conduction-primary-top-nav-current-color)) !important;
130
+ }
131
+
132
+ .dropdownCurrentLink svg path {
133
+ fill: var(--conduction-primary-top-nav-dropdown-current-color, var(--conduction-primary-top-nav-current-color)) !important;
134
+ }
135
+
119
136
  .mobileLink {
120
137
  margin-block-end: 18px;
121
138
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.40",
3
+ "version": "2.2.42",
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/Pagination/Pagination.module.css CHANGED
@@ -19,12 +19,18 @@
19
19
  --conduction-pagination-item-border-width: unset;
20
20
  --conduction-pagination-item-border-style: unset;
21
21
  --conduction-pagination-item-border-color: unset;
22
+ /* --conduction-pagination-item-border-bottom-width: unset;
23
+ --conduction-pagination-item-border-bottom-style: unset;
24
+ --conduction-pagination-item-border-bottom-color: unset; */
22
25
 
23
26
  /* --conduction-pagination-navigation-button-background-color: #4376fc; */
24
27
  /* --conduction-pagination-navigation-button-color: #ffffff; */
25
28
  /* --conduction-pagination-navigation-button-border-width: 1px; */
26
29
  /* --conduction-pagination-navigation-button-border-style: solid; */
27
30
  /* --conduction-pagination-navigation-button-border-color: #4376fc; */
31
+ /* --conduction-pagination-navigation-button-border-bottom-width: 1px; */
32
+ /* --conduction-pagination-navigation-button-border-bottom-style: solid; */
33
+ /* --conduction-pagination-navigation-button-border-bottom-color: #4376fc; */
28
34
  /* --conduction-pagination-navigation-button-border-radius: 1px; */
29
35
  --conduction-pagination-navigation-button-padding-inline-start: 8px;
30
36
  --conduction-pagination-navigation-button-padding-inline-end: 8px;
@@ -36,6 +42,9 @@
36
42
  /* --conduction-pagination-navigation-button-disabled-border-width: 1px; */
37
43
  /* --conduction-pagination-navigation-button-disabled-border-style: solid; */
38
44
  /* --conduction-pagination-navigation-button-disabled-border-color: #4376fc; */
45
+ /* --conduction-pagination-navigation-button-disabled-border-bottom-width: 1px; */
46
+ /* --conduction-pagination-navigation-button-disabled-border-bottom-style: solid; */
47
+ /* --conduction-pagination-navigation-button-disabled-border-bottom-color: #4376fc; */
39
48
  /* --conduction-pagination-navigation-button-disabled-border-radius: 1px; */
40
49
 
41
50
  --conduction-pagination-navigation-button-hover-color: #d1d1d1;
@@ -43,6 +52,9 @@
43
52
  /* --conduction-pagination-navigation-button-hover-border-width: 1px; */
44
53
  /* --conduction-pagination-navigation-button-hover-border-style: solid; */
45
54
  /* --conduction-pagination-navigation-button-hover-border-color: #4376fc; */
55
+ /* --conduction-pagination-navigation-button-hover-border-bottom-width: 1px; */
56
+ /* --conduction-pagination-navigation-button-hover-border-bottom-style: solid; */
57
+ /* --conduction-pagination-navigation-button-hover-border-bottom-color: #4376fc; */
46
58
  /* --conduction-pagination-navigation-button-hover-border-radius: 1px; */
47
59
 
48
60
  --conduction-pagination-current-page-background-color: #4376fc;
@@ -52,6 +64,9 @@
52
64
  --conduction-pagination-current-page-border-width: unset;
53
65
  --conduction-pagination-current-page-border-style: unset;
54
66
  --conduction-pagination-current-page-border-color: unset;
67
+ /* --conduction-pagination-current-page-border-bottom-width: unset; */
68
+ /* --conduction-pagination-current-page-border-bottom-style: unset; */
69
+ /* --conduction-pagination-current-page-border-bottom-color: unset; */
55
70
 
56
71
  --conduction-pagination-page-hover-color: #4376fc;
57
72
  --conduction-pagination-page-hover-background-color: #ffffff;
@@ -60,6 +75,9 @@
60
75
  --conduction-pagination-page-hover-border-width: unset;
61
76
  --conduction-pagination-page-hover-border-style: unset;
62
77
  --conduction-pagination-page-hover-border-color: unset;
78
+ /* --conduction-pagination-page-hover-border-bottom-width: unset; */
79
+ /* --conduction-pagination-page-hover-border-bottom-style: unset; */
80
+ /* --conduction-pagination-page-hover-border-bottom-color: unset; */
63
81
  }
64
82
 
65
83
  .container {
@@ -79,7 +97,12 @@
79
97
  .container > li.currentPage > a {
80
98
  color: var(--conduction-pagination-current-page-color);
81
99
  background-color: var(--conduction-pagination-current-page-background-color);
82
- border: var(--conduction-pagination-current-page-border-width) var(--conduction-pagination-current-page-border-style) var(--conduction-pagination-current-page-border-color);
100
+ border-width: var(--conduction-pagination-current-page-border-width);
101
+ border-style: var(--conduction-pagination-current-page-border-style);
102
+ border-color: var(--conduction-pagination-current-page-border-color);
103
+ border-bottom-width: var(--conduction-pagination-current-page-border-bottom-width, var(--conduction-pagination-current-page-border-width));
104
+ border-bottom-style: var(--conduction-pagination-current-page-border-bottom-style, var(--conduction-pagination-current-page-border-style));
105
+ border-bottom-color: var(--conduction-pagination-current-page-border-bottom-color, var(--conduction-pagination-current-page-border-color));
83
106
  border-radius: var(--conduction-pagination-item-border-radius);
84
107
  padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
85
108
  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
@@ -94,7 +117,12 @@
94
117
  .container > li:not(.previous):not(.next):not(.currentPage) > a {
95
118
  color: var(--conduction-pagination-item-color);
96
119
  background-color: var(--conduction-pagination-item-background-color);
97
- border: var(--conduction-pagination-item-border-width) var(--conduction-pagination-item-border-style) var(--conduction-pagination-item-border-color);
120
+ border-width: var(--conduction-pagination-item-border-width);
121
+ border-style: var(--conduction-pagination-item-border-style);
122
+ border-color: var(--conduction-pagination-item-border-color);
123
+ border-bottom-width: var(--conduction-pagination-item-border-bottom-width, var(--conduction-pagination-item-border-width));
124
+ border-bottom-style: var(--conduction-pagination-item-border-bottom-style, var(--conduction-pagination-item-border-style));
125
+ border-bottom-color: var(--conduction-pagination-item-border-bottom-color, var(--conduction-pagination-item-border-color));
98
126
  border-radius: var(--conduction-pagination-item-border-radius);
99
127
  padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
100
128
  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
@@ -117,19 +145,25 @@
117
145
  .container > li.disabled > a > .button {
118
146
  color: var(--conduction-pagination-navigation-button-disabled-color) !important;
119
147
  background-color: var(--conduction-pagination-navigation-button-disabled-background-color) !important;
120
- border-width: var(--conduction-pagination-navigation-button-disabled-border-width, var(--utrecht-button-border-width));
121
- border-style: var(--conduction-pagination-navigation-button-disabled-border-style, var(--utrecht-button-border-style));
122
- border-color: var(--conduction-pagination-navigation-button-disabled-border-color, var(--utrecht-button-border-color));
123
- border-radius: var(--conduction-pagination-navigation-button-disabled-border-radius, var(--utrecht-button-border-radius));
148
+ border-width: var(--conduction-pagination-navigation-button-disabled-border-width, var(--utrecht-button-border-width)) !important;
149
+ border-style: var(--conduction-pagination-navigation-button-disabled-border-style, var(--utrecht-button-border-style)) !important;
150
+ border-color: var(--conduction-pagination-navigation-button-disabled-border-color, var(--utrecht-button-border-color)) !important;
151
+ border-bottom-width: var(--conduction-pagination-navigation-button-disabled-border-bottom-width, var(--utrecht-button-border-bottom-width)) !important;
152
+ border-bottom-style: var(--conduction-pagination-navigation-button-disabled-border-bottom-style, var(--utrecht-button-border-bottom-style)) !important;
153
+ border-bottom-color: var(--conduction-pagination-navigation-button-disabled-border-bottom-color, var(--utrecht-button-border-bottom-color)) !important;
154
+ border-radius: var(--conduction-pagination-navigation-button-disabled-border-radius, var(--utrecht-button-border-radius)) !important;
124
155
  }
125
156
 
126
157
  .container > li:hover:not(.disabled) > a > .button {
127
158
  color: var(--conduction-pagination-navigation-button-hover-color) !important;
128
159
  background-color: var(--conduction-pagination-navigation-button-hover-background-color) !important;
129
- border-width: var(--conduction-pagination-navigation-button-hover-border-width, var(--utrecht-button-border-width));
130
- border-style: var(--conduction-pagination-navigation-button-hover-border-style, var(--utrecht-button-border-style));
131
- border-color: var(--conduction-pagination-navigation-button-hover-border-color, var(--utrecht-button-border-color));
132
- border-radius: var(--conduction-pagination-navigation-button-hover-border-radius, var(--utrecht-button-border-radius));
160
+ border-width: var(--conduction-pagination-navigation-button-hover-border-width, var(--utrecht-button-border-width)) !important;
161
+ border-style: var(--conduction-pagination-navigation-button-hover-border-style, var(--utrecht-button-border-style)) !important;
162
+ border-color: var(--conduction-pagination-navigation-button-hover-border-color, var(--utrecht-button-border-color)) !important;
163
+ border-bottom-width: var(--conduction-pagination-navigation-button-hover-border-bottom-width, var(--utrecht-button-border-bottom-width)) !important;
164
+ border-bottom-style: var(--conduction-pagination-navigation-button-hover-border-bottom-style, var(--utrecht-button-border-bottom-style)) !important;
165
+ border-bottom-color: var(--conduction-pagination-navigation-button-hover-border-bottom-color, var(--utrecht-button-border-bottom-color)) !important;
166
+ border-radius: var(--conduction-pagination-navigation-button-hover-border-radius, var(--utrecht-button-border-radius)) !important;
133
167
  }
134
168
 
135
169
  .container > li:hover:not(.disabled):not(.currentPage) {
@@ -141,7 +175,12 @@
141
175
  background-color: var(--conduction-pagination-page-hover-background-color);
142
176
  text-decoration: var(--conduction-pagination-page-hover-text-decoration);
143
177
  text-decoration-thickness: var(--conduction-pagination-page-hover-text-decoration-thickness);
144
- border: var(--conduction-pagination-page-hover-border-width) var(--conduction-pagination-page-hover-border-style) var(--conduction-pagination-page-hover-border-color);
178
+ border-width: var(--conduction-pagination-page-hover-border-width);
179
+ border-style: var(--conduction-pagination-page-hover-border-style);
180
+ border-color: var(--conduction-pagination-page-hover-border-color);
181
+ border-bottom-width: var(--conduction-pagination-page-hover-border-bottom-width, var(--conduction-pagination-page-hover-border-width));
182
+ border-bottom-style: var(--conduction-pagination-page-hover-border-bottom-style, var(--conduction-pagination-page-hover-border-style));
183
+ border-bottom-color: var(--conduction-pagination-page-hover-border-bottom-color, var(--conduction-pagination-page-hover-border-color));
145
184
  }
146
185
 
147
186
  .button {
@@ -150,6 +189,9 @@
150
189
  border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)) !important;
151
190
  border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)) !important;
152
191
  border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)) !important;
192
+ border-bottom-width: var(--conduction-pagination-navigation-button-border-bottom-width, var(--utrecht-button-border-bottom-width)) !important;
193
+ border-bottom-style: var(--conduction-pagination-navigation-button-border-bottom-style, var(--utrecht-button-border-bottom-style)) !important;
194
+ border-bottom-color: var(--conduction-pagination-navigation-button-border-bottom-color, var(--utrecht-button-border-bottom-color)) !important;
153
195
  border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius)) !important;
154
196
  padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
155
197
  padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;
package/src/components/card/cardWrapper/CardWrapper.module.css CHANGED
@@ -7,6 +7,9 @@
7
7
  /* --conduction-card-wrapper-border-bottom-style: unset; */
8
8
  /* --conduction-card-wrapper-border-bottom-color: unset; */
9
9
  /* --conduction-card-wrapper-box-shadow: unset; */
10
+ /* --conduction-card-wrapper-hover-border-width: unset; */
11
+ /* --conduction-card-wrapper-hover-border-style: unset; */
12
+ /* --conduction-card-wrapper-hover-border-color: unset; */
10
13
  /* --conduction-card-wrapper-hover-border-bottom-width: unset; */
11
14
  /* --conduction-card-wrapper-hover-border-bottom-style: unset; */
12
15
  /* --conduction-card-wrapper-hover-border-bottom-color: unset; */
@@ -20,28 +23,34 @@
20
23
  }
21
24
 
22
25
  .container {
23
- padding-inline-start: var(--conduction-card-wrapper-padding-inline-start);
24
- padding-inline-end: var(--conduction-card-wrapper-padding-inline-end);
25
- padding-block-start: var(--conduction-card-wrapper-padding-block-start);
26
- padding-block-end: var(--conduction-card-wrapper-padding-block-end);
27
-
28
- color: var(--conduction-card-wrapper-color);
29
26
  background-color: var(--conduction-card-wrapper-background-color);
27
+ color: var(--conduction-card-wrapper-color);
28
+ position: relative;
29
+ box-shadow: var(--conduction-card-wrapper-box-shadow);
30
30
 
31
31
  border-radius: var(--conduction-card-wrapper-border-radius);
32
32
  border-width: var(--conduction-card-wrapper-border-width);
33
- border: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
34
- border-bottom: var(--conduction-card-wrapper-border-bottom-width, var(--conduction-card-wrapper-border-width))
35
- var(--conduction-card-wrapper-border-bottom-style, var(--conduction-card-wrapper-border-style))
36
- var(--conduction-card-wrapper-border-bottom-color, var(--conduction-card-wrapper-border-color));
37
- position: relative;
38
- box-shadow: var(--conduction-card-wrapper-box-shadow);
33
+ border-style: var(--conduction-card-wrapper-border-style);
34
+ border-color: var(--conduction-card-wrapper-border-color);
35
+ border-bottom-width: var(--conduction-card-wrapper-border-bottom-width, var(--conduction-card-wrapper-border-width));
36
+ border-bottom-style: var(--conduction-card-wrapper-border-bottom-style, var(--conduction-card-wrapper-border-style));
37
+ border-bottom-color: var(--conduction-card-wrapper-border-bottom-color, var(--conduction-card-wrapper-border-color));
38
+
39
+ padding-inline-start: var(--conduction-card-wrapper-padding-inline-start);
40
+ padding-inline-end: var(--conduction-card-wrapper-padding-inline-end);
41
+ padding-block-start: var(--conduction-card-wrapper-padding-block-start);
42
+ padding-block-end: var(--conduction-card-wrapper-padding-block-end);
39
43
  }
40
44
 
41
45
  .container:hover {
42
46
  background-color: var(--conduction-card-wrapper-hover-background-color, var(--conduction-card-wrapper-background-color));
43
- border-bottom: var(--conduction-card-wrapper-hover-border-bottom-width, var(--conduction-card-wrapper-border-width))
44
- var(--conduction-card-wrapper-hover-border-bottom-style, var(--conduction-card-wrapper-border-style))
45
- var(--conduction-card-wrapper-hover-border-bottom-color, var(--conduction-card-wrapper-border-color));
47
+ color: var(--conduction-card-wrapper-hover-color, var(--conduction-card-wrapper-color));
46
48
  cursor: pointer;
49
+
50
+ border-width: var(--conduction-card-wrapper-hover-border-width, var(--conduction-card-wrapper-border-width));
51
+ border-style: var(--conduction-card-wrapper-hover-border-style, var(--conduction-card-wrapper-border-style));
52
+ border-color: var(--conduction-card-wrapper-hover-border-color, var(--conduction-card-wrapper-border-color));
53
+ border-bottom-width: var(--conduction-card-wrapper-hover-border-bottom-width, var(--conduction-card-wrapper-hover-border-width, var(--conduction-card-wrapper-border-width)));
54
+ border-bottom-style: var(--conduction-card-wrapper-hover-border-bottom-style, var(--conduction-card-wrapper-hover-border-style, var(--conduction-card-wrapper-border-style)));
55
+ border-bottom-color: var(--conduction-card-wrapper-hover-border-bottom-color, var(--conduction-card-wrapper-hover-border-color, var(--conduction-card-wrapper-border-color)));
47
56
  }
package/src/components/card/downloadCard/DownloadCard.module.css CHANGED
@@ -52,6 +52,7 @@
52
52
 
53
53
  .icon {
54
54
  margin-inline-end: var(--conduction-download-card-icon-gap);
55
+ color: var(--conduction-download-card-icon-color);
55
56
  }
56
57
 
57
58
  .link {
package/src/components/displaySwitch/DisplaySwitch.module.css CHANGED
@@ -1,3 +1,7 @@
1
1
  .displaySwitchButtons {
2
2
  align-items: center;
3
3
  }
4
+
5
+ .button[aria-pressed="false"]:hover {
6
+ cursor: pointer;
7
+ }
package/src/components/displaySwitch/DisplaySwitch.tsx CHANGED
@@ -35,6 +35,7 @@ const DisplaySwitch: React.FC<DisplaySwitchProps> = ({ layoutClassName, buttons
35
35
  pressed={button.pressed}
36
36
  appearance={button.pressed ? "secondary-action-button" : "subtle-button"}
37
37
  onClick={button.handleClick}
38
+ className={styles.button}
38
39
  >
39
40
  {button.icon && <FontAwesomeIcon icon={[button.icon.prefix, button.icon.name]} />}
40
41
  <span>{button.label}</span>
package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -116,6 +116,23 @@
116
116
  fill: var(--conduction-primary-top-nav-current-color) !important;
117
117
  }
118
118
 
119
+ .dropdownCurrent {
120
+ background-color: var(--conduction-primary-top-nav-dropdown-current-background-color, var(--conduction-primary-top-nav-current-background-color));
121
+ box-shadow: var(--conduction-primary-top-nav-dropdown-current-box-shadow, var(--conduction-primary-top-nav-current-box-shadow));
122
+ }
123
+
124
+ .dropdownCurrent:hover > .dropdownCurrentLink {
125
+ color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color)) !important;
126
+ }
127
+
128
+ .dropdownCurrentLink {
129
+ color: var(--conduction-primary-top-nav-dropdown-current-color, var(--conduction-primary-top-nav-current-color)) !important;
130
+ }
131
+
132
+ .dropdownCurrentLink svg path {
133
+ fill: var(--conduction-primary-top-nav-dropdown-current-color, var(--conduction-primary-top-nav-current-color)) !important;
134
+ }
135
+
119
136
  .mobileLink {
120
137
  margin-block-end: 18px;
121
138
  }
package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx CHANGED
@@ -113,10 +113,10 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
113
113
  {subItems.map(({ label, icon, current, handleClick }, idx) => (
114
114
  <li
115
115
  key={idx}
116
- className={clsx(styles.li, current && styles.current)}
116
+ className={clsx(styles.li, current && styles.dropdownCurrent)}
117
117
  onClick={() => handleSubItemClick(handleClick)}
118
118
  >
119
- <Link className={clsx(styles.link, styles.label, current && styles.currentLink)}>
119
+ <Link className={clsx(styles.link, styles.label, current && styles.dropdownCurrentLink)}>
120
120
  {icon}
121
121
  {label}
122
122
  </Link>