@conduction/components 2.2.50 → 2.2.51

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 (30) hide show
  1. package/.prettierrc +30 -30
  2. package/README.md +210 -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/metaIcon/MetaIcon.module.css +29 -29
  12. package/lib/components/quoteWrapper/QuoteWrapper.module.css +12 -12
  13. package/lib/components/tag/Tag.module.css +44 -44
  14. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +308 -290
  15. package/package.json +50 -50
  16. package/src/components/badgeCounter/BadgeCounter.module.css +27 -27
  17. package/src/components/card/cardHeader/CardHeader.module.css +52 -43
  18. package/src/components/card/infoCard/InfoCard.module.css +26 -26
  19. package/src/components/codeBlock/CodeBlock.module.css +6 -6
  20. package/src/components/formFields/checkbox/Checkbox.module.css +4 -0
  21. package/src/components/formFields/date/Date.module.css +12 -12
  22. package/src/components/formFields/select/select.tsx +1 -1
  23. package/src/components/imageDivider/imageDivider.module.css +5 -5
  24. package/src/components/metaIcon/MetaIcon.module.css +29 -29
  25. package/src/components/quoteWrapper/QuoteWrapper.module.css +12 -12
  26. package/src/components/tag/Tag.module.css +44 -44
  27. package/src/components/topNav/index.ts +4 -4
  28. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +308 -290
  29. package/src/custom.d.ts +4 -4
  30. 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/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
+ }