@conduction/components 2.2.50 → 2.2.52

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 (33) hide show
  1. package/.prettierrc +30 -30
  2. package/README.md +212 -206
  3. package/lib/components/badgeCounter/BadgeCounter.module.css +27 -27
  4. package/lib/components/card/cardHeader/CardHeader.module.css +52 -43
  5. package/lib/components/card/infoCard/InfoCard.module.css +26 -26
  6. package/lib/components/codeBlock/CodeBlock.module.css +6 -6
  7. package/lib/components/formFields/checkbox/Checkbox.module.css +4 -0
  8. package/lib/components/formFields/date/Date.module.css +12 -12
  9. package/lib/components/formFields/select/select.d.ts +2 -2
  10. package/lib/components/imageDivider/imageDivider.module.css +5 -5
  11. package/lib/components/logo/Logo.module.css +13 -0
  12. package/lib/components/metaIcon/MetaIcon.module.css +29 -29
  13. package/lib/components/quoteWrapper/QuoteWrapper.module.css +12 -12
  14. package/lib/components/tag/Tag.module.css +44 -44
  15. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +308 -290
  16. package/package.json +50 -50
  17. package/src/components/badgeCounter/BadgeCounter.module.css +27 -27
  18. package/src/components/card/cardHeader/CardHeader.module.css +52 -43
  19. package/src/components/card/infoCard/InfoCard.module.css +26 -26
  20. package/src/components/codeBlock/CodeBlock.module.css +6 -6
  21. package/src/components/formFields/checkbox/Checkbox.module.css +4 -0
  22. package/src/components/formFields/date/Date.module.css +12 -12
  23. package/src/components/formFields/select/select.tsx +1 -1
  24. package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx +80 -80
  25. package/src/components/imageDivider/imageDivider.module.css +5 -5
  26. package/src/components/logo/Logo.module.css +13 -0
  27. package/src/components/metaIcon/MetaIcon.module.css +29 -29
  28. package/src/components/quoteWrapper/QuoteWrapper.module.css +12 -12
  29. package/src/components/tag/Tag.module.css +44 -44
  30. package/src/components/topNav/index.ts +4 -4
  31. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +308 -290
  32. package/src/custom.d.ts +4 -4
  33. package/tsconfig.json +21 -21
package/lib/components/card/cardHeader/CardHeader.module.css CHANGED
@@ -1,43 +1,52 @@
1
- :root {
2
- /* --conduction-card-header-border-bottom-width: unset;
3
- --conduction-card-header-border-bottom-style: unset;
4
- --conduction-card-header-border-bottom-color: unset; */
5
- /* --conduction-card-header-hover-border-bottom-width: unset; */
6
- /* --conduction-card-header-hover-border-bottom-style: unset; */
7
- /* --conduction-card-header-hover-border-bottom-color: unset; */
8
- --conduction-card-header-title-color: #000000;
9
- /* --conduction-card-header-title-hover-color: #000000; */
10
- --conduction-card-header-date-color: #000000;
11
- --conduction-card-header-date-font-size: 16px;
12
- --conduction-card-header-date-font-weight: 100;
13
- /* --conduction-card-header-date-font-style: normal; */
14
- --conduction-card-header-date-margin-block-end: 8px;
15
- }
16
-
17
- .container {
18
- border-bottom-width: var(--conduction-card-header-border-bottom-width);
19
- border-bottom-color: var(--conduction-card-header-border-bottom-color);
20
- border-bottom-style: var(--conduction-card-header-border-bottom-style);
21
- }
22
-
23
- .container:hover {
24
- border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
25
- border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
26
- border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
27
- }
28
-
29
- .title > * {
30
- color: var(--conduction-card-header-title-color) !important;
31
- }
32
-
33
- .title:hover > * {
34
- color: var(--conduction-card-header-title-hover-color, var(--conduction-card-header-title-color)) !important;
35
- }
36
-
37
- .date {
38
- color: var(--conduction-card-header-date-color);
39
- font-size: var(--conduction-card-header-date-font-size);
40
- font-weight: var(--conduction-card-header-date-font-weight);
41
- font-style: var(--conduction-card-header-date-font-style);
42
- margin-block-end: var(--conduction-card-header-date-margin-block-end);
43
- }
1
+ :root {
2
+ /* --conduction-card-header-border-bottom-width: unset;
3
+ --conduction-card-header-border-bottom-style: unset;
4
+ --conduction-card-header-border-bottom-color: unset; */
5
+ /* --conduction-card-header-hover-border-bottom-width: unset; */
6
+ /* --conduction-card-header-hover-border-bottom-style: unset; */
7
+ /* --conduction-card-header-hover-border-bottom-color: unset; */
8
+ --conduction-card-header-title-color: #000000;
9
+ /* --conduction-card-header-title-text-decoration: none; */
10
+ /* --conduction-card-header-title-text-underline-offset: 2px; */
11
+ /* --conduction-card-header-title-hover-color: #000000; */
12
+ /* --conduction-card-header-title-hover-text-decoration: none; */
13
+ /* --conduction-card-header-title-hover-text-underline-offset: 2px; */
14
+
15
+ --conduction-card-header-date-color: #000000;
16
+ --conduction-card-header-date-font-size: 16px;
17
+ --conduction-card-header-date-font-weight: 100;
18
+ /* --conduction-card-header-date-font-style: normal; */
19
+ --conduction-card-header-date-margin-block-end: 8px;
20
+ }
21
+
22
+ .container {
23
+ border-bottom-width: var(--conduction-card-header-border-bottom-width);
24
+ border-bottom-color: var(--conduction-card-header-border-bottom-color);
25
+ border-bottom-style: var(--conduction-card-header-border-bottom-style);
26
+ }
27
+
28
+ .container:hover {
29
+ border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
30
+ border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
31
+ border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
32
+ }
33
+
34
+ .title > * {
35
+ color: var(--conduction-card-header-title-color) !important;
36
+ text-decoration: var(--conduction-card-header-title-text-decoration) !important;
37
+ text-underline-offset: var(--conduction-card-header-title-text-underline-offset) !important;
38
+ }
39
+
40
+ .title:hover > * {
41
+ color: var(--conduction-card-header-title-hover-color, var(--conduction-card-header-title-color)) !important;
42
+ text-decoration: var(--conduction-card-header-title-hover-text-decoration, var(--conduction-card-header-title-text-decoration)) !important;
43
+ text-underline-offset: var(--conduction-card-header-title-hover-text-underline-offset, var(--conduction-card-header-title-text-underline-offset)) !important;
44
+ }
45
+
46
+ .date {
47
+ color: var(--conduction-card-header-date-color);
48
+ font-size: var(--conduction-card-header-date-font-size);
49
+ font-weight: var(--conduction-card-header-date-font-weight);
50
+ font-style: var(--conduction-card-header-date-font-style);
51
+ margin-block-end: var(--conduction-card-header-date-margin-block-end);
52
+ }
package/lib/components/card/infoCard/InfoCard.module.css CHANGED
@@ -1,26 +1,26 @@
1
- .container {
2
- background-color: var(--skeleton-color-grey-1);
3
- border-radius: var(--skeleton-border-radius-md);
4
- padding-inline-start: var(--skeleton-size-md);
5
- padding-inline-end: var(--skeleton-size-md);
6
- padding-block-start: var(--skeleton-size-md);
7
- padding-block-end: var(--skeleton-size-md);
8
- }
9
-
10
- .container > * {
11
- display: block;
12
- }
13
-
14
- .container > *:not(:last-child) {
15
- margin-block-end: var(--skeleton-size-xs);
16
- }
17
-
18
- .container > .title {
19
- font-weight: var(--skeleton-font-weight-bold);
20
- font-size: var(--skeleton-font-size-xl);
21
- color: var(--skeleton-color-black);
22
- }
23
-
24
- .content {
25
- color: var(--skeleton-color-black);
26
- }
1
+ .container {
2
+ background-color: var(--skeleton-color-grey-1);
3
+ border-radius: var(--skeleton-border-radius-md);
4
+ padding-inline-start: var(--skeleton-size-md);
5
+ padding-inline-end: var(--skeleton-size-md);
6
+ padding-block-start: var(--skeleton-size-md);
7
+ padding-block-end: var(--skeleton-size-md);
8
+ }
9
+
10
+ .container > * {
11
+ display: block;
12
+ }
13
+
14
+ .container > *:not(:last-child) {
15
+ margin-block-end: var(--skeleton-size-xs);
16
+ }
17
+
18
+ .container > .title {
19
+ font-weight: var(--skeleton-font-weight-bold);
20
+ font-size: var(--skeleton-font-size-xl);
21
+ color: var(--skeleton-color-black);
22
+ }
23
+
24
+ .content {
25
+ color: var(--skeleton-color-black);
26
+ }
package/lib/components/codeBlock/CodeBlock.module.css CHANGED
@@ -1,6 +1,6 @@
1
- .code {
2
- margin-block: var(--skeleton-size-sm);
3
- background-color: var(--skeleton-color-grey-1);
4
- border-radius: var(--skeleton-size-2xs);
5
- padding: var(--skeleton-size-lg);
6
- }
1
+ .code {
2
+ margin-block: var(--skeleton-size-sm);
3
+ background-color: var(--skeleton-color-grey-1);
4
+ border-radius: var(--skeleton-size-2xs);
5
+ padding: var(--skeleton-size-lg);
6
+ }
package/lib/components/formFields/checkbox/Checkbox.module.css CHANGED
@@ -103,6 +103,10 @@
103
103
  box-sizing: border-box;
104
104
  }
105
105
 
106
+ .checkbox:hover + label {
107
+ color: var(--conduction-input-checkbox-label-hover-color, var(--conduction-input-checkbox-label-color, var(--utrecht-document-color)));
108
+
109
+ }
106
110
  .checkbox:hover + label::before {
107
111
  content: " ";
108
112
  display: inline-block;
package/lib/components/formFields/date/Date.module.css CHANGED
@@ -1,12 +1,12 @@
1
- .container {
2
- display: flex;
3
- }
4
-
5
- .calendar {
6
- display: flex;
7
- }
8
-
9
- .calendar > div::before,
10
- .calendar > div::after {
11
- display: none;
12
- }
1
+ .container {
2
+ display: flex;
3
+ }
4
+
5
+ .calendar {
6
+ display: flex;
7
+ }
8
+
9
+ .calendar > div::before,
10
+ .calendar > div::after {
11
+ display: none;
12
+ }
package/lib/components/formFields/select/select.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { MenuPlacement } from "react-select";
3
- import { Control, FieldValues } from "react-hook-form";
3
+ import { Control } from "react-hook-form";
4
4
  import { IReactHookFormProps } from "../types";
5
5
  export type TSelectOption = {
6
6
  label: string;
@@ -11,7 +11,7 @@ export type TGroupedSelectOption = {
11
11
  options: TSelectOption[];
12
12
  };
13
13
  interface ISelectProps {
14
- control: Control<FieldValues, any>;
14
+ control: Control<any, any>;
15
15
  options: TSelectOption[] | TGroupedSelectOption[];
16
16
  name: string;
17
17
  ariaLabel: string;
package/lib/components/imageDivider/imageDivider.module.css CHANGED
@@ -1,5 +1,5 @@
1
- .divider {
2
- display: block;
3
- object-fit: cover;
4
- width: 100%;
5
- }
1
+ .divider {
2
+ display: block;
3
+ object-fit: cover;
4
+ width: 100%;
5
+ }
package/lib/components/logo/Logo.module.css CHANGED
@@ -2,14 +2,17 @@
2
2
  --conduction-logo-header-inline-size: 220px;
3
3
  --conduction-logo-header-block-size: 40px;
4
4
  --conduction-logo-header-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
5
+ /* --conduction-logo-header-hover-filter: brightness(1.1); */
5
6
 
6
7
  --conduction-logo-footer-inline-size: 330px;
7
8
  --conduction-logo-footer-block-size: 60px;
8
9
  --conduction-logo-footer-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
10
+ /* --conduction-logo-footer-hover-filter: brightness(1.1); */
9
11
 
10
12
  --conduction-logo-navbar-inline-size: 150px;
11
13
  --conduction-logo-navbar-block-size: 40px;
12
14
  --conduction-logo-navbar-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
15
+ /* --conduction-logo-navbar-hover-filter: brightness(1.1); */
13
16
  }
14
17
 
15
18
  .container {
@@ -23,12 +26,18 @@
23
26
  block-size: var(--conduction-logo-header-block-size);
24
27
  background-image: var(--conduction-logo-header-background-image);
25
28
  }
29
+ .container.header:hover {
30
+ filter: var(--conduction-logo-header-hover-filter);
31
+ }
26
32
 
27
33
  .container.footer {
28
34
  inline-size: var(--conduction-logo-footer-inline-size);
29
35
  block-size: var(--conduction-logo-footer-block-size);
30
36
  background-image: var(--conduction-logo-footer-background-image);
31
37
  }
38
+ .container.footer:hover {
39
+ filter: var(--conduction-logo-footer-hover-filter);
40
+ }
32
41
 
33
42
  .container.navbar {
34
43
  inline-size: var(--conduction-logo-navbar-inline-size);
@@ -36,6 +45,10 @@
36
45
  background-image: var(--conduction-logo-navbar-background-image);
37
46
  }
38
47
 
48
+ .container.navbar:hover {
49
+ filter: var(--conduction-logo-navbar-hover-filter);
50
+ }
51
+
39
52
  .container.clickable:hover {
40
53
  cursor: pointer;
41
54
  }
package/lib/components/metaIcon/MetaIcon.module.css CHANGED
@@ -1,29 +1,29 @@
1
- :root {
2
- --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
3
- --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
4
- }
5
-
6
- .container {
7
- display: flex;
8
- align-items: center;
9
- flex-direction: column;
10
- }
11
-
12
- .container > *:not(:last-child) {
13
- margin-block-end: var(--skeleton-size-xs);
14
- }
15
-
16
- .icon {
17
- color: var(--conduction-meta-icon-icon-color);
18
- height: var(--conduction-meta-icon-icon-size);
19
- width: var(--conduction-meta-icon-icon-size);
20
- }
21
-
22
- .icon > svg {
23
- height: 100%;
24
- width: 100%;
25
- }
26
-
27
- .value {
28
- font-weight: var(--skeleton-font-weight-bold);
29
- }
1
+ :root {
2
+ --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
3
+ --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
4
+ }
5
+
6
+ .container {
7
+ display: flex;
8
+ align-items: center;
9
+ flex-direction: column;
10
+ }
11
+
12
+ .container > *:not(:last-child) {
13
+ margin-block-end: var(--skeleton-size-xs);
14
+ }
15
+
16
+ .icon {
17
+ color: var(--conduction-meta-icon-icon-color);
18
+ height: var(--conduction-meta-icon-icon-size);
19
+ width: var(--conduction-meta-icon-icon-size);
20
+ }
21
+
22
+ .icon > svg {
23
+ height: 100%;
24
+ width: 100%;
25
+ }
26
+
27
+ .value {
28
+ font-weight: var(--skeleton-font-weight-bold);
29
+ }
package/lib/components/quoteWrapper/QuoteWrapper.module.css CHANGED
@@ -1,12 +1,12 @@
1
- :root {
2
- --conduction-quote-wrapper-border-width: var(--skeleton-size-sm);
3
- --conduction-quote-wrapper-border-color: var(--skeleton-color-grey-1);
4
- --conduction-quote-wrapper-padding-inline: var(--skeleton-size-lg);
5
- }
6
-
7
- .container {
8
- border-left-width: var(--conduction-quote-wrapper-border-width);
9
- border-left-style: solid;
10
- border-left-color: var(--conduction-quote-wrapper-border-color);
11
- padding-inline-start: var(--conduction-quote-wrapper-padding-inline);
12
- }
1
+ :root {
2
+ --conduction-quote-wrapper-border-width: var(--skeleton-size-sm);
3
+ --conduction-quote-wrapper-border-color: var(--skeleton-color-grey-1);
4
+ --conduction-quote-wrapper-padding-inline: var(--skeleton-size-lg);
5
+ }
6
+
7
+ .container {
8
+ border-left-width: var(--conduction-quote-wrapper-border-width);
9
+ border-left-style: solid;
10
+ border-left-color: var(--conduction-quote-wrapper-border-color);
11
+ padding-inline-start: var(--conduction-quote-wrapper-padding-inline);
12
+ }
package/lib/components/tag/Tag.module.css CHANGED
@@ -1,44 +1,44 @@
1
- :root {
2
- --conduction-tag-font-size: var(--skeleton-font-size-sm);
3
- --conduction-tag-color: var(--skeleton-black);
4
- --conduction-tag-background-color: var(--skeleton-color-grey-1);
5
- --conduction-tag-border-radius: var(--skeleton-border-radius-md);
6
- --conduction-tag-padding: var(--skeleton-size-xs);
7
- --conduction-tag-icon-margin-inline-end: var(--skeleton-size-2xs);
8
- --conduction-tag-remove-background-color: #ffbdad;
9
- --conduction-tag-remove-text-color: #e44f2a;
10
- }
11
-
12
- .tag {
13
- display: inline-block;
14
- width: fit-content;
15
- font-size: var(--conduction-tag-font-size);
16
- color: var(--conduction-tag-color);
17
- background-color: var(--conduction-tag-background-color);
18
- padding-inline-start: var(--conduction-tag-padding);
19
- padding-inline-end: var(--conduction-tag-padding);
20
- padding-block-start: var(--conduction-tag-padding);
21
- padding-block-end: var(--conduction-tag-padding);
22
- }
23
-
24
- .tag > *:not(:last-child) {
25
- margin-inline-end: var(--conduction-tag-icon-margin-inline-end);
26
- }
27
-
28
- .clickable :hover {
29
- cursor: pointer;
30
- }
31
-
32
- .remove {
33
- padding-inline-end: 4px;
34
- }
35
-
36
- .tagContainer {
37
- display: flex;
38
- }
39
-
40
- .removeTag:hover {
41
- cursor: pointer;
42
- background-color: var(--conduction-tag-remove-background-color);
43
- color: var(--conduction-tag-remove-text-color);
44
- }
1
+ :root {
2
+ --conduction-tag-font-size: var(--skeleton-font-size-sm);
3
+ --conduction-tag-color: var(--skeleton-black);
4
+ --conduction-tag-background-color: var(--skeleton-color-grey-1);
5
+ --conduction-tag-border-radius: var(--skeleton-border-radius-md);
6
+ --conduction-tag-padding: var(--skeleton-size-xs);
7
+ --conduction-tag-icon-margin-inline-end: var(--skeleton-size-2xs);
8
+ --conduction-tag-remove-background-color: #ffbdad;
9
+ --conduction-tag-remove-text-color: #e44f2a;
10
+ }
11
+
12
+ .tag {
13
+ display: inline-block;
14
+ width: fit-content;
15
+ font-size: var(--conduction-tag-font-size);
16
+ color: var(--conduction-tag-color);
17
+ background-color: var(--conduction-tag-background-color);
18
+ padding-inline-start: var(--conduction-tag-padding);
19
+ padding-inline-end: var(--conduction-tag-padding);
20
+ padding-block-start: var(--conduction-tag-padding);
21
+ padding-block-end: var(--conduction-tag-padding);
22
+ }
23
+
24
+ .tag > *:not(:last-child) {
25
+ margin-inline-end: var(--conduction-tag-icon-margin-inline-end);
26
+ }
27
+
28
+ .clickable :hover {
29
+ cursor: pointer;
30
+ }
31
+
32
+ .remove {
33
+ padding-inline-end: 4px;
34
+ }
35
+
36
+ .tagContainer {
37
+ display: flex;
38
+ }
39
+
40
+ .removeTag:hover {
41
+ cursor: pointer;
42
+ background-color: var(--conduction-tag-remove-background-color);
43
+ color: var(--conduction-tag-remove-text-color);
44
+ }