@conduction/components 2.2.13 → 2.2.15

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 (6) hide show
  1. package/README.md +2 -1
  2. package/lib/components/Pagination/Pagination.module.css +41 -5
  3. package/lib/components/formFields/select/select.js +2 -2
  4. package/package.json +1 -1
  5. package/src/components/Pagination/Pagination.module.css +41 -5
  6. package/src/components/formFields/select/select.tsx +2 -2
package/README.md CHANGED
@@ -4,7 +4,8 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
- - 2.2.13:
7
+ - 2.2.15: Added more NLDS options to Pagination.
8
+ - 2.2.13/2.2.14:
8
9
  - Updated Textarea and all Input components to allow aria-label.
9
10
  - Updated Select components.
10
11
  - 2.2.12: Updated Select components to WCAG with aria-label and role.
package/lib/components/Pagination/Pagination.module.css CHANGED
@@ -20,13 +20,30 @@
20
20
  --conduction-pagination-item-border-style: unset;
21
21
  --conduction-pagination-item-border-color: unset;
22
22
 
23
+ /* --conduction-pagination-navigation-button-background-color: #4376fc; */
24
+ /* --conduction-pagination-navigation-button-color: #ffffff; */
25
+ /* --conduction-pagination-navigation-button-border-width: 1px; */
26
+ /* --conduction-pagination-navigation-button-border-style: solid; */
27
+ /* --conduction-pagination-navigation-button-border-color: #4376fc; */
28
+ /* --conduction-pagination-navigation-button-border-radius: 1px; */
23
29
  --conduction-pagination-navigation-button-padding-inline-start: 8px;
24
30
  --conduction-pagination-navigation-button-padding-inline-end: 8px;
25
31
  --conduction-pagination-navigation-button-padding-block-start: 0px;
26
32
  --conduction-pagination-navigation-button-padding-block-end: 0px;
27
33
 
28
- --conduction-pagination-disabled-color: #d1d1d1;
29
- --conduction-pagination-disabled-background-color: #fefefe;
34
+ --conduction-pagination-navigation-button-disabled-color: #d1d1d1;
35
+ --conduction-pagination-navigation-button-disabled-background-color: #fefefe;
36
+ /* --conduction-pagination-navigation-button-disabled-border-width: 1px; */
37
+ /* --conduction-pagination-navigation-button-disabled-border-style: solid; */
38
+ /* --conduction-pagination-navigation-button-disabled-border-color: #4376fc; */
39
+ /* --conduction-pagination-navigation-button-disabled-border-radius: 1px; */
40
+
41
+ --conduction-pagination-navigation-button-hover-color: #d1d1d1;
42
+ --conduction-pagination-navigation-button-hover-background-color: #fefefe;
43
+ /* --conduction-pagination-navigation-button-hover-border-width: 1px; */
44
+ /* --conduction-pagination-navigation-button-hover-border-style: solid; */
45
+ /* --conduction-pagination-navigation-button-hover-border-color: #4376fc; */
46
+ /* --conduction-pagination-navigation-button-hover-border-radius: 1px; */
30
47
 
31
48
  --conduction-pagination-current-page-background-color: #4376fc;
32
49
  --conduction-pagination-current-page-color: #ffffff;
@@ -97,9 +114,22 @@
97
114
  cursor: not-allowed;
98
115
  }
99
116
 
100
- .container > li.disabled > a {
101
- color: var(--conduction-pagination-disabled-color);
102
- background-color: var(--conduction-pagination-disabled-background-color);
117
+ .container > li.disabled > a > .button {
118
+ color: var(--conduction-pagination-navigation-button-disabled-color) !important;
119
+ 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));
124
+ }
125
+
126
+ .container > li:hover:not(.disabled) > a > .button {
127
+ color: var(--conduction-pagination-navigation-button-hover-color) !important;
128
+ 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));
103
133
  }
104
134
 
105
135
  .container > li:hover:not(.disabled):not(.currentPage) {
@@ -115,6 +145,12 @@
115
145
  }
116
146
 
117
147
  .button {
148
+ background-color: var(--conduction-pagination-navigation-button-background-color, var(--utrecht-button-background-color)) !important;
149
+ color: var(--conduction-pagination-navigation-button-color, var(--utrecht-button-color)) !important;
150
+ border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width));
151
+ border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style));
152
+ border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color));
153
+ border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius));
118
154
  padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
119
155
  padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;
120
156
  padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important;
package/lib/components/formFields/select/select.js CHANGED
@@ -54,7 +54,7 @@ export const SelectMultiple = ({ id, name, options, errors, control, validation,
54
54
  element.setAttribute("role", "presentation");
55
55
  }
56
56
  });
57
- document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => {
57
+ document.querySelectorAll('[class*="a11yText"]').forEach((element) => {
58
58
  if (element.role !== "presentation") {
59
59
  element.setAttribute("role", "presentation");
60
60
  }
@@ -98,7 +98,7 @@ export const SelectSingle = ({ id, name, options, errors, control, validation, i
98
98
  element.setAttribute("role", "presentation");
99
99
  }
100
100
  });
101
- document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => {
101
+ document.querySelectorAll('[class*="a11yText"]').forEach((element) => {
102
102
  if (element.role !== "presentation") {
103
103
  element.setAttribute("role", "presentation");
104
104
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.13",
3
+ "version": "2.2.15",
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
@@ -20,13 +20,30 @@
20
20
  --conduction-pagination-item-border-style: unset;
21
21
  --conduction-pagination-item-border-color: unset;
22
22
 
23
+ /* --conduction-pagination-navigation-button-background-color: #4376fc; */
24
+ /* --conduction-pagination-navigation-button-color: #ffffff; */
25
+ /* --conduction-pagination-navigation-button-border-width: 1px; */
26
+ /* --conduction-pagination-navigation-button-border-style: solid; */
27
+ /* --conduction-pagination-navigation-button-border-color: #4376fc; */
28
+ /* --conduction-pagination-navigation-button-border-radius: 1px; */
23
29
  --conduction-pagination-navigation-button-padding-inline-start: 8px;
24
30
  --conduction-pagination-navigation-button-padding-inline-end: 8px;
25
31
  --conduction-pagination-navigation-button-padding-block-start: 0px;
26
32
  --conduction-pagination-navigation-button-padding-block-end: 0px;
27
33
 
28
- --conduction-pagination-disabled-color: #d1d1d1;
29
- --conduction-pagination-disabled-background-color: #fefefe;
34
+ --conduction-pagination-navigation-button-disabled-color: #d1d1d1;
35
+ --conduction-pagination-navigation-button-disabled-background-color: #fefefe;
36
+ /* --conduction-pagination-navigation-button-disabled-border-width: 1px; */
37
+ /* --conduction-pagination-navigation-button-disabled-border-style: solid; */
38
+ /* --conduction-pagination-navigation-button-disabled-border-color: #4376fc; */
39
+ /* --conduction-pagination-navigation-button-disabled-border-radius: 1px; */
40
+
41
+ --conduction-pagination-navigation-button-hover-color: #d1d1d1;
42
+ --conduction-pagination-navigation-button-hover-background-color: #fefefe;
43
+ /* --conduction-pagination-navigation-button-hover-border-width: 1px; */
44
+ /* --conduction-pagination-navigation-button-hover-border-style: solid; */
45
+ /* --conduction-pagination-navigation-button-hover-border-color: #4376fc; */
46
+ /* --conduction-pagination-navigation-button-hover-border-radius: 1px; */
30
47
 
31
48
  --conduction-pagination-current-page-background-color: #4376fc;
32
49
  --conduction-pagination-current-page-color: #ffffff;
@@ -97,9 +114,22 @@
97
114
  cursor: not-allowed;
98
115
  }
99
116
 
100
- .container > li.disabled > a {
101
- color: var(--conduction-pagination-disabled-color);
102
- background-color: var(--conduction-pagination-disabled-background-color);
117
+ .container > li.disabled > a > .button {
118
+ color: var(--conduction-pagination-navigation-button-disabled-color) !important;
119
+ 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));
124
+ }
125
+
126
+ .container > li:hover:not(.disabled) > a > .button {
127
+ color: var(--conduction-pagination-navigation-button-hover-color) !important;
128
+ 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));
103
133
  }
104
134
 
105
135
  .container > li:hover:not(.disabled):not(.currentPage) {
@@ -115,6 +145,12 @@
115
145
  }
116
146
 
117
147
  .button {
148
+ background-color: var(--conduction-pagination-navigation-button-background-color, var(--utrecht-button-background-color)) !important;
149
+ color: var(--conduction-pagination-navigation-button-color, var(--utrecht-button-color)) !important;
150
+ border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width));
151
+ border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style));
152
+ border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color));
153
+ border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius));
118
154
  padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
119
155
  padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;
120
156
  padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important;
package/src/components/formFields/select/select.tsx CHANGED
@@ -86,7 +86,7 @@ export const SelectMultiple = ({
86
86
  element.setAttribute("role", "presentation");
87
87
  }
88
88
  });
89
- document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
89
+ document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
90
90
  if (element.role !== "presentation") {
91
91
  element.setAttribute("role", "presentation");
92
92
  }
@@ -205,7 +205,7 @@ export const SelectSingle = ({
205
205
  element.setAttribute("role", "presentation");
206
206
  }
207
207
  });
208
- document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => {
208
+ document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
209
209
  if (element.role !== "presentation") {
210
210
  element.setAttribute("role", "presentation");
211
211
  }