@conduction/components 2.0.3 → 2.0.5

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 (152) hide show
  1. package/.github/workflows/npm-publish.yml +39 -39
  2. package/.prettierrc +30 -30
  3. package/README.md +16 -14
  4. package/lib/components/card/detailsCard/DetailsCard.d.ts +14 -14
  5. package/lib/components/card/detailsCard/DetailsCard.js +10 -10
  6. package/lib/components/card/detailsCard/DetailsCard.module.css +51 -51
  7. package/lib/components/card/downloadCard/DownloadCard.d.ts +10 -10
  8. package/lib/components/card/downloadCard/DownloadCard.js +8 -8
  9. package/lib/components/card/downloadCard/DownloadCard.module.css +27 -27
  10. package/lib/components/card/horizontalImageCard/HorizontalImageCard.d.ts +13 -13
  11. package/lib/components/card/horizontalImageCard/HorizontalImageCard.js +9 -9
  12. package/lib/components/card/horizontalImageCard/HorizontalImageCard.module.css +34 -34
  13. package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.d.ts +14 -14
  14. package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.js +9 -9
  15. package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css +63 -63
  16. package/lib/components/card/index.d.ts +7 -7
  17. package/lib/components/card/index.js +7 -7
  18. package/lib/components/card/infoCard/InfoCard.d.ts +8 -7
  19. package/lib/components/card/infoCard/InfoCard.js +6 -5
  20. package/lib/components/card/infoCard/InfoCard.module.css +26 -26
  21. package/lib/components/card/richContentCard/RichContentCard.d.ts +19 -19
  22. package/lib/components/card/richContentCard/RichContentCard.js +15 -15
  23. package/lib/components/card/richContentCard/RichContentCard.module.css +93 -93
  24. package/lib/components/container/Container.d.ts +6 -6
  25. package/lib/components/container/Container.js +4 -4
  26. package/lib/components/container/Container.module.css +9 -9
  27. package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css +222 -222
  28. package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.d.ts +17 -17
  29. package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.js +20 -20
  30. package/lib/components/denhaag-wrappers/pagination/Pagination.css +120 -120
  31. package/lib/components/denhaag-wrappers/pagination/Pagination.d.ts +9 -9
  32. package/lib/components/denhaag-wrappers/pagination/Pagination.js +15 -15
  33. package/lib/components/editableTableRow/EditableTableRow.d.ts +14 -14
  34. package/lib/components/editableTableRow/EditableTableRow.js +31 -31
  35. package/lib/components/editableTableRow/EditableTableRow.module.css +25 -25
  36. package/lib/components/formFields/checkbox.d.ts +7 -7
  37. package/lib/components/formFields/checkbox.js +3 -3
  38. package/lib/components/formFields/index.d.ts +6 -6
  39. package/lib/components/formFields/index.js +6 -6
  40. package/lib/components/formFields/input.d.ts +19 -19
  41. package/lib/components/formFields/input.js +13 -13
  42. package/lib/components/formFields/radio.d.ts +9 -9
  43. package/lib/components/formFields/radio.js +3 -3
  44. package/lib/components/formFields/select/select.d.ts +17 -17
  45. package/lib/components/formFields/select/select.js +14 -14
  46. package/lib/components/formFields/select/select.module.css +35 -35
  47. package/lib/components/formFields/textarea.d.ts +8 -8
  48. package/lib/components/formFields/textarea.js +3 -3
  49. package/lib/components/formFields/types.d.ts +6 -6
  50. package/lib/components/formFields/types.js +1 -1
  51. package/lib/components/imageDivider/ImageDivider.d.ts +7 -7
  52. package/lib/components/imageDivider/ImageDivider.js +6 -6
  53. package/lib/components/imageDivider/imageDivider.module.css +5 -5
  54. package/lib/components/logo/Logo.d.ts +8 -8
  55. package/lib/components/logo/Logo.js +10 -10
  56. package/lib/components/logo/Logo.module.css +15 -15
  57. package/lib/components/metaIcon/MetaIcon.d.ts +7 -7
  58. package/lib/components/metaIcon/MetaIcon.js +3 -3
  59. package/lib/components/metaIcon/MetaIcon.module.css +29 -29
  60. package/lib/components/notificationPopUp/NotificationPopUp.d.ts +22 -22
  61. package/lib/components/notificationPopUp/NotificationPopUp.js +31 -31
  62. package/lib/components/notificationPopUp/NotificationPopUp.module.css +61 -61
  63. package/lib/components/privateRoute/PrivateRoute.d.ts +6 -6
  64. package/lib/components/privateRoute/PrivateRoute.js +15 -15
  65. package/lib/components/quoteWrapper/QuoteWrapper.d.ts +7 -7
  66. package/lib/components/quoteWrapper/QuoteWrapper.js +5 -5
  67. package/lib/components/quoteWrapper/QuoteWrapper.module.css +12 -12
  68. package/lib/components/statusSteps/StatusSteps.d.ts +13 -13
  69. package/lib/components/statusSteps/StatusSteps.js +5 -5
  70. package/lib/components/tag/Tag.d.ts +6 -6
  71. package/lib/components/tag/Tag.js +3 -3
  72. package/lib/components/tag/Tag.module.css +20 -20
  73. package/lib/components/topNav/index.d.ts +3 -3
  74. package/lib/components/topNav/index.js +3 -3
  75. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts +17 -17
  76. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js +7 -7
  77. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +60 -60
  78. package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.d.ts +11 -11
  79. package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.js +7 -7
  80. package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.module.css +43 -43
  81. package/lib/index.d.ts +24 -24
  82. package/lib/index.js +17 -17
  83. package/package.json +42 -42
  84. package/src/components/card/detailsCard/DetailsCard.module.css +51 -51
  85. package/src/components/card/detailsCard/DetailsCard.tsx +56 -56
  86. package/src/components/card/downloadCard/DownloadCard.js +10 -10
  87. package/src/components/card/downloadCard/DownloadCard.module.css +27 -27
  88. package/src/components/card/downloadCard/DownloadCard.tsx +31 -31
  89. package/src/components/card/horizontalImageCard/HorizontalImageCard.js +9 -9
  90. package/src/components/card/horizontalImageCard/HorizontalImageCard.module.css +34 -34
  91. package/src/components/card/horizontalImageCard/HorizontalImageCard.tsx +37 -37
  92. package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.js +9 -9
  93. package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css +63 -63
  94. package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.tsx +49 -49
  95. package/src/components/card/index.js +5 -5
  96. package/src/components/card/index.tsx +8 -8
  97. package/src/components/card/infoCard/InfoCard.module.css +26 -26
  98. package/src/components/card/infoCard/InfoCard.tsx +19 -17
  99. package/src/components/card/richContentCard/RichContentCard.js +17 -17
  100. package/src/components/card/richContentCard/RichContentCard.module.css +93 -93
  101. package/src/components/card/richContentCard/RichContentCard.tsx +98 -98
  102. package/src/components/container/Container.js +3 -3
  103. package/src/components/container/Container.module.css +9 -9
  104. package/src/components/container/Container.tsx +11 -11
  105. package/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css +222 -222
  106. package/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.js +20 -20
  107. package/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.tsx +89 -89
  108. package/src/components/denhaag-wrappers/pagination/Pagination.css +120 -120
  109. package/src/components/denhaag-wrappers/pagination/Pagination.tsx +112 -112
  110. package/src/components/editableTableRow/EditableTableRow.js +34 -34
  111. package/src/components/editableTableRow/EditableTableRow.module.css +25 -25
  112. package/src/components/editableTableRow/EditableTableRow.tsx +138 -138
  113. package/src/components/formFields/checkbox.js +3 -3
  114. package/src/components/formFields/checkbox.tsx +14 -14
  115. package/src/components/formFields/index.js +4 -4
  116. package/src/components/formFields/index.tsx +19 -19
  117. package/src/components/formFields/input.js +12 -12
  118. package/src/components/formFields/input.tsx +123 -123
  119. package/src/components/formFields/radio.tsx +21 -21
  120. package/src/components/formFields/select/select.module.css +35 -35
  121. package/src/components/formFields/select/select.tsx +63 -63
  122. package/src/components/formFields/textarea.js +3 -3
  123. package/src/components/formFields/textarea.tsx +13 -13
  124. package/src/components/formFields/types.js +1 -1
  125. package/src/components/formFields/types.ts +7 -7
  126. package/src/components/imageDivider/ImageDivider.js +6 -6
  127. package/src/components/imageDivider/ImageDivider.tsx +12 -12
  128. package/src/components/imageDivider/imageDivider.module.css +5 -5
  129. package/src/components/logo/Logo.js +10 -10
  130. package/src/components/logo/Logo.module.css +15 -15
  131. package/src/components/logo/Logo.tsx +25 -25
  132. package/src/components/metaIcon/MetaIcon.js +3 -3
  133. package/src/components/metaIcon/MetaIcon.module.css +29 -29
  134. package/src/components/metaIcon/MetaIcon.tsx +18 -18
  135. package/src/components/notificationPopUp/NotificationPopUp.module.css +61 -61
  136. package/src/components/notificationPopUp/NotificationPopUp.tsx +82 -82
  137. package/src/components/privateRoute/PrivateRoute.js +15 -15
  138. package/src/components/privateRoute/PrivateRoute.tsx +22 -22
  139. package/src/components/quoteWrapper/QuoteWrapper.module.css +12 -12
  140. package/src/components/quoteWrapper/QuoteWrapper.tsx +15 -15
  141. package/src/components/statusSteps/StatusSteps.js +5 -5
  142. package/src/components/statusSteps/StatusSteps.tsx +54 -54
  143. package/src/components/tag/Tag.module.css +20 -20
  144. package/src/components/tag/Tag.tsx +8 -8
  145. package/src/components/topNav/index.ts +4 -4
  146. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +60 -60
  147. package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx +52 -52
  148. package/src/components/topNav/secondaryTopNav/SecondaryTopNav.module.css +43 -43
  149. package/src/components/topNav/secondaryTopNav/SecondaryTopNav.tsx +27 -27
  150. package/src/custom.d.ts +4 -4
  151. package/src/index.js +14 -14
  152. package/src/index.ts +73 -73
@@ -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
+ }
@@ -1,13 +1,13 @@
1
- import * as React from "react";
2
- interface IStatusStep {
3
- title: string;
4
- checked?: boolean;
5
- current?: boolean;
6
- expanded?: boolean;
7
- subSteps?: string[];
8
- }
9
- interface StatusStepsProps {
10
- steps: IStatusStep[];
11
- }
12
- export declare const StatusSteps: React.FC<StatusStepsProps>;
13
- export {};
1
+ import * as React from "react";
2
+ interface IStatusStep {
3
+ title: string;
4
+ checked?: boolean;
5
+ current?: boolean;
6
+ expanded?: boolean;
7
+ subSteps?: string[];
8
+ }
9
+ interface StatusStepsProps {
10
+ steps: IStatusStep[];
11
+ }
12
+ export declare const StatusSteps: React.FC<StatusStepsProps>;
13
+ export {};
@@ -1,5 +1,5 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Step, StepExpandedIcon, StepHeader, StepHeading, StepList, StepMarker, StepSection, SubStep, SubStepHeading, SubStepList, SubStepMarker, } from "@gemeente-denhaag/process-steps";
3
- export const StatusSteps = ({ steps }) => {
4
- return (_jsx(StepList, { children: steps.map(({ title, checked, current, expanded, subSteps }, idx) => (_jsxs(Step, { ...{ checked, current, expanded }, children: [_jsx(StepSection, { children: _jsxs(StepHeader, { children: [_jsx(StepMarker, { children: idx + 1 }), _jsx(StepHeading, { children: title }), subSteps && _jsx(StepExpandedIcon, {})] }) }), subSteps && (_jsx(SubStepList, { children: subSteps.map((subStep) => (_jsxs(SubStep, { children: [_jsx(SubStepMarker, {}), _jsx(SubStepHeading, { children: subStep })] }, idx))) }))] }, idx))) }));
5
- };
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Step, StepExpandedIcon, StepHeader, StepHeading, StepList, StepMarker, StepSection, SubStep, SubStepHeading, SubStepList, SubStepMarker, } from "@gemeente-denhaag/process-steps";
3
+ export const StatusSteps = ({ steps }) => {
4
+ return (_jsx(StepList, { children: steps.map(({ title, checked, current, expanded, subSteps }, idx) => (_jsxs(Step, { ...{ checked, current, expanded }, children: [_jsx(StepSection, { children: _jsxs(StepHeader, { children: [_jsx(StepMarker, { children: idx + 1 }), _jsx(StepHeading, { children: title }), subSteps && _jsx(StepExpandedIcon, {})] }) }), subSteps && (_jsx(SubStepList, { children: subSteps.map((subStep) => (_jsxs(SubStep, { children: [_jsx(SubStepMarker, {}), _jsx(SubStepHeading, { children: subStep })] }, idx))) }))] }, idx))) }));
5
+ };
@@ -1,6 +1,6 @@
1
- import * as React from "react";
2
- interface TagProps {
3
- tag: string;
4
- }
5
- export declare const Tag: React.FC<TagProps>;
6
- export {};
1
+ import * as React from "react";
2
+ interface TagProps {
3
+ tag: string;
4
+ }
5
+ export declare const Tag: React.FC<TagProps>;
6
+ export {};
@@ -1,3 +1,3 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import * as styles from "./Tag.module.css";
3
- export const Tag = ({ tag }) => _jsx("span", { className: styles.tag, children: tag });
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as styles from "./Tag.module.css";
3
+ export const Tag = ({ tag }) => _jsx("span", { className: styles.tag, children: tag });
@@ -1,20 +1,20 @@
1
- :root {
2
- --conduction-tag-font-size: var(--skeleton-font-size-sm);
3
- --conduction-tag-color: var(--skeleton-black);
4
- --conduction-tag-backgrond-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
- }
8
-
9
- .tag {
10
- display: inline-block;
11
- width: fit-content;
12
- font-size: var(--conduction-tag-font-size);
13
- color: var(--conduction-tag-color);
14
- background-color: var(--conduction-tag-backgrond-color);
15
- border-radius: var(--conduction-tag-border-radius);
16
- padding-inline-start: var(--conduction-tag-padding);
17
- padding-inline-end: var(--conduction-tag-padding);
18
- padding-block-start: var(--conduction-tag-padding);
19
- padding-block-end: var(--conduction-tag-padding);
20
- }
1
+ :root {
2
+ --conduction-tag-font-size: var(--skeleton-font-size-sm);
3
+ --conduction-tag-color: var(--skeleton-black);
4
+ --conduction-tag-backgrond-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
+ }
8
+
9
+ .tag {
10
+ display: inline-block;
11
+ width: fit-content;
12
+ font-size: var(--conduction-tag-font-size);
13
+ color: var(--conduction-tag-color);
14
+ background-color: var(--conduction-tag-backgrond-color);
15
+ border-radius: var(--conduction-tag-border-radius);
16
+ padding-inline-start: var(--conduction-tag-padding);
17
+ padding-inline-end: var(--conduction-tag-padding);
18
+ padding-block-start: var(--conduction-tag-padding);
19
+ padding-block-end: var(--conduction-tag-padding);
20
+ }
@@ -1,3 +1,3 @@
1
- import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
2
- import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
3
- export { PrimaryTopNav, SecondaryTopNav };
1
+ import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
2
+ import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
3
+ export { PrimaryTopNav, SecondaryTopNav };
@@ -1,3 +1,3 @@
1
- import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
2
- import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
3
- export { PrimaryTopNav, SecondaryTopNav };
1
+ import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
2
+ import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
3
+ export { PrimaryTopNav, SecondaryTopNav };
@@ -1,17 +1,17 @@
1
- import * as React from "react";
2
- interface ITopNavItem {
3
- label: string;
4
- icon?: JSX.Element;
5
- handleClick?: () => any;
6
- subItems?: {
7
- label: string;
8
- icon?: JSX.Element;
9
- handleClick?: () => any;
10
- }[];
11
- }
12
- export interface TopNavProps {
13
- items: ITopNavItem[];
14
- layoutClassName?: string;
15
- }
16
- export declare const PrimaryTopNav: React.FC<TopNavProps>;
17
- export {};
1
+ import * as React from "react";
2
+ interface ITopNavItem {
3
+ label: string;
4
+ icon?: JSX.Element;
5
+ handleClick?: () => any;
6
+ subItems?: {
7
+ label: string;
8
+ icon?: JSX.Element;
9
+ handleClick?: () => any;
10
+ }[];
11
+ }
12
+ export interface TopNavProps {
13
+ items: ITopNavItem[];
14
+ layoutClassName?: string;
15
+ }
16
+ export declare const PrimaryTopNav: React.FC<TopNavProps>;
17
+ export {};
@@ -1,7 +1,7 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Link } from "@gemeente-denhaag/components-react";
3
- import * as styles from "./PrimaryTopNav.module.css";
4
- import clsx from "clsx";
5
- export const PrimaryTopNav = ({ items, layoutClassName }) => {
6
- return (_jsx("div", { className: clsx(styles.primary, layoutClassName && layoutClassName), children: _jsx("nav", { className: styles.primary, children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, handleClick, subItems }, idx) => (_jsxs("li", { className: styles.li, children: [_jsx("div", { onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }), subItems && (_jsx("ul", { className: styles.dropdown, children: subItems.map(({ label, icon, handleClick }, idx) => (_jsx("li", { className: styles.li, onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }))] }, idx))) }) }) }));
7
- };
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Link } from "@gemeente-denhaag/components-react";
3
+ import * as styles from "./PrimaryTopNav.module.css";
4
+ import clsx from "clsx";
5
+ export const PrimaryTopNav = ({ items, layoutClassName }) => {
6
+ return (_jsx("div", { className: clsx(styles.primary, layoutClassName && layoutClassName), children: _jsx("nav", { className: styles.primary, children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, handleClick, subItems }, idx) => (_jsxs("li", { className: styles.li, children: [_jsx("div", { onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }), subItems && (_jsx("ul", { className: styles.dropdown, children: subItems.map(({ label, icon, handleClick }, idx) => (_jsx("li", { className: styles.li, onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }))] }, idx))) }) }) }));
7
+ };
@@ -1,60 +1,60 @@
1
- :root {
2
- --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
3
- --conduction-primary-top-nav-color: var(--skeleton-color-white);
4
- --conduction-primary-top-nav-background-color: var(--skeleton-color-secondary-3);
5
- --conduction-primary-top-nav-background-color-hover: var(--skeleton-color-secondary-5);
6
- --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
7
- }
8
-
9
- .primary:hover {
10
- cursor: pointer;
11
- }
12
-
13
- .ul {
14
- margin: unset;
15
- display: flex;
16
- padding-inline-start: unset;
17
- align-items: center;
18
- }
19
-
20
- .li {
21
- list-style-type: none;
22
- display: block;
23
- position: relative;
24
- }
25
-
26
- .primary {
27
- font-weight: 500;
28
- width: fit-content;
29
- background-color: var(--conduction-primary-top-nav-background-color);
30
- }
31
-
32
- .primary .link {
33
- display: block;
34
- color: var(--conduction-primary-top-nav-color);
35
- padding-inline-start: var(--conduction-primary-top-nav-item-padding);
36
- padding-inline-end: var(--conduction-primary-top-nav-item-padding);
37
- padding-block-start: var(--conduction-primary-top-nav-item-padding);
38
- padding-block-end: var(--conduction-primary-top-nav-item-padding);
39
- }
40
-
41
- .primary .li:hover {
42
- background-color: var(--conduction-primary-top-nav-background-color-hover);
43
- }
44
-
45
- .primary .li:hover .dropdown {
46
- display: block;
47
- z-index: 1;
48
- }
49
-
50
- .dropdown {
51
- left: 0;
52
- padding: 0;
53
- width: 100%;
54
- display: none;
55
- position: absolute;
56
- list-style-type: none;
57
- background-color: var(--conduction-primary-top-nav-background-color);
58
- border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
59
- border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
60
- }
1
+ :root {
2
+ --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
3
+ --conduction-primary-top-nav-color: var(--skeleton-color-white);
4
+ --conduction-primary-top-nav-background-color: var(--skeleton-color-secondary-3);
5
+ --conduction-primary-top-nav-background-color-hover: var(--skeleton-color-secondary-5);
6
+ --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
7
+ }
8
+
9
+ .primary:hover {
10
+ cursor: pointer;
11
+ }
12
+
13
+ .ul {
14
+ margin: unset;
15
+ display: flex;
16
+ padding-inline-start: unset;
17
+ align-items: center;
18
+ }
19
+
20
+ .li {
21
+ list-style-type: none;
22
+ display: block;
23
+ position: relative;
24
+ }
25
+
26
+ .primary {
27
+ font-weight: 500;
28
+ width: fit-content;
29
+ background-color: var(--conduction-primary-top-nav-background-color);
30
+ }
31
+
32
+ .primary .link {
33
+ display: block;
34
+ color: var(--conduction-primary-top-nav-color);
35
+ padding-inline-start: var(--conduction-primary-top-nav-item-padding);
36
+ padding-inline-end: var(--conduction-primary-top-nav-item-padding);
37
+ padding-block-start: var(--conduction-primary-top-nav-item-padding);
38
+ padding-block-end: var(--conduction-primary-top-nav-item-padding);
39
+ }
40
+
41
+ .primary .li:hover {
42
+ background-color: var(--conduction-primary-top-nav-background-color-hover);
43
+ }
44
+
45
+ .primary .li:hover .dropdown {
46
+ display: block;
47
+ z-index: 1;
48
+ }
49
+
50
+ .dropdown {
51
+ left: 0;
52
+ padding: 0;
53
+ width: 100%;
54
+ display: none;
55
+ position: absolute;
56
+ list-style-type: none;
57
+ background-color: var(--conduction-primary-top-nav-background-color);
58
+ border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
59
+ border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
60
+ }
@@ -1,11 +1,11 @@
1
- import * as React from "react";
2
- interface TopNavProps {
3
- items: {
4
- label: string;
5
- icon?: JSX.Element;
6
- handleClick: () => any;
7
- }[];
8
- layoutClassName?: string;
9
- }
10
- export declare const SecondaryTopNav: React.FC<TopNavProps>;
11
- export {};
1
+ import * as React from "react";
2
+ interface TopNavProps {
3
+ items: {
4
+ label: string;
5
+ icon?: JSX.Element;
6
+ handleClick: () => any;
7
+ }[];
8
+ layoutClassName?: string;
9
+ }
10
+ export declare const SecondaryTopNav: React.FC<TopNavProps>;
11
+ export {};
@@ -1,7 +1,7 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import * as styles from "./SecondaryTopNav.module.css";
3
- import { Link } from "@gemeente-denhaag/components-react";
4
- import clsx from "clsx";
5
- export const SecondaryTopNav = ({ items, layoutClassName }) => {
6
- return (_jsx("div", { className: clsx(styles.secondary, layoutClassName && layoutClassName), children: _jsx("nav", { children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, handleClick }, idx) => (_jsx("li", { className: styles.li, onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }) }) }));
7
- };
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as styles from "./SecondaryTopNav.module.css";
3
+ import { Link } from "@gemeente-denhaag/components-react";
4
+ import clsx from "clsx";
5
+ export const SecondaryTopNav = ({ items, layoutClassName }) => {
6
+ return (_jsx("div", { className: clsx(styles.secondary, layoutClassName && layoutClassName), children: _jsx("nav", { children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, handleClick }, idx) => (_jsx("li", { className: styles.li, onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }) }) }));
7
+ };
@@ -1,43 +1,43 @@
1
- :root {
2
- --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md);
3
- --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md);
4
- --conduction-secondary-top-nav-color: var(--skeleton-color-white);
5
- --conduction-secondary-top-nav-background-color: var(--skeleton-color-secondary-5);
6
- --conduction-secondary-top-nav-background-color-hover: var(--skeleton-color-secondary-3);
7
- --conduction-secondary-top-nav-font-weight: var(--skeleton-font-weight-light);
8
- }
9
-
10
- .secondary:hover {
11
- cursor: pointer;
12
- }
13
-
14
- .ul {
15
- margin: unset;
16
- display: flex;
17
- padding-inline-start: unset;
18
- align-items: center;
19
- }
20
-
21
- .li {
22
- list-style-type: none;
23
- display: block;
24
- padding-inline-start: var(--conduction-secondary-top-nav-item-padding);
25
- padding-inline-end: var(--conduction-secondary-top-nav-item-padding);
26
- padding-block-start: var(--conduction-secondary-top-nav-item-padding);
27
- padding-block-end: var(--conduction-secondary-top-nav-item-padding);
28
- }
29
-
30
- .secondary {
31
- font-weight: var(--conduction-secondary-top-nav-font-weight);
32
- width: fit-content;
33
- font-size: var(--conduction-secondary-top-nav-font-size);
34
- background-color: var(--conduction-secondary-top-nav-background-color);
35
- }
36
-
37
- .secondary .link {
38
- color: var(--conduction-secondary-top-nav-color);
39
- }
40
-
41
- .secondary .li:hover {
42
- background-color: var(--conduction-secondary-top-nav-background-color-hover);
43
- }
1
+ :root {
2
+ --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md);
3
+ --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md);
4
+ --conduction-secondary-top-nav-color: var(--skeleton-color-white);
5
+ --conduction-secondary-top-nav-background-color: var(--skeleton-color-secondary-5);
6
+ --conduction-secondary-top-nav-background-color-hover: var(--skeleton-color-secondary-3);
7
+ --conduction-secondary-top-nav-font-weight: var(--skeleton-font-weight-light);
8
+ }
9
+
10
+ .secondary:hover {
11
+ cursor: pointer;
12
+ }
13
+
14
+ .ul {
15
+ margin: unset;
16
+ display: flex;
17
+ padding-inline-start: unset;
18
+ align-items: center;
19
+ }
20
+
21
+ .li {
22
+ list-style-type: none;
23
+ display: block;
24
+ padding-inline-start: var(--conduction-secondary-top-nav-item-padding);
25
+ padding-inline-end: var(--conduction-secondary-top-nav-item-padding);
26
+ padding-block-start: var(--conduction-secondary-top-nav-item-padding);
27
+ padding-block-end: var(--conduction-secondary-top-nav-item-padding);
28
+ }
29
+
30
+ .secondary {
31
+ font-weight: var(--conduction-secondary-top-nav-font-weight);
32
+ width: fit-content;
33
+ font-size: var(--conduction-secondary-top-nav-font-size);
34
+ background-color: var(--conduction-secondary-top-nav-background-color);
35
+ }
36
+
37
+ .secondary .link {
38
+ color: var(--conduction-secondary-top-nav-color);
39
+ }
40
+
41
+ .secondary .li:hover {
42
+ background-color: var(--conduction-secondary-top-nav-background-color-hover);
43
+ }
package/lib/index.d.ts CHANGED
@@ -1,24 +1,24 @@
1
- /// <reference types="react" />
2
- import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard } from "./components/card";
3
- import { Container } from "./components/container/Container";
4
- import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
5
- import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
6
- import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputRadio, InputFile, SelectMultiple, SelectSingle } from "./components/formFields";
7
- import { ImageDivider } from "./components/imageDivider/ImageDivider";
8
- import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
9
- import { MetaIcon } from "./components/metaIcon/MetaIcon";
10
- import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
11
- import { StatusSteps } from "./components/statusSteps/StatusSteps";
12
- import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
13
- import { Tag } from "./components/tag/Tag";
14
- declare const NotificationPopUp: {
15
- controller: () => {
16
- isVisible: boolean;
17
- show: () => void;
18
- hide: () => void;
19
- };
20
- NotificationPopUp: import("react").FC<import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps>;
21
- };
22
- import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
23
- import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
24
- export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, };
1
+ /// <reference types="react" />
2
+ import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard } from "./components/card";
3
+ import { Container } from "./components/container/Container";
4
+ import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
5
+ import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
6
+ import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputRadio, InputFile, SelectMultiple, SelectSingle } from "./components/formFields";
7
+ import { ImageDivider } from "./components/imageDivider/ImageDivider";
8
+ import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
9
+ import { MetaIcon } from "./components/metaIcon/MetaIcon";
10
+ import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
11
+ import { StatusSteps } from "./components/statusSteps/StatusSteps";
12
+ import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
13
+ import { Tag } from "./components/tag/Tag";
14
+ declare const NotificationPopUp: {
15
+ controller: () => {
16
+ isVisible: boolean;
17
+ show: () => void;
18
+ hide: () => void;
19
+ };
20
+ NotificationPopUp: import("react").FC<import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps>;
21
+ };
22
+ import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
23
+ import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
24
+ export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, };
package/lib/index.js CHANGED
@@ -1,17 +1,17 @@
1
- import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, } from "./components/card";
2
- import { Container } from "./components/container/Container";
3
- import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
4
- import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
5
- import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputRadio, InputFile, SelectMultiple, SelectSingle, } from "./components/formFields";
6
- import { ImageDivider } from "./components/imageDivider/ImageDivider";
7
- import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
8
- import { MetaIcon } from "./components/metaIcon/MetaIcon";
9
- import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
10
- import { StatusSteps } from "./components/statusSteps/StatusSteps";
11
- import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
12
- import { Tag } from "./components/tag/Tag";
13
- import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, } from "./components/notificationPopUp/NotificationPopUp";
14
- const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
15
- import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
16
- import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
17
- export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, };
1
+ import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, } from "./components/card";
2
+ import { Container } from "./components/container/Container";
3
+ import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
4
+ import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
5
+ import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputRadio, InputFile, SelectMultiple, SelectSingle, } from "./components/formFields";
6
+ import { ImageDivider } from "./components/imageDivider/ImageDivider";
7
+ import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
8
+ import { MetaIcon } from "./components/metaIcon/MetaIcon";
9
+ import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
10
+ import { StatusSteps } from "./components/statusSteps/StatusSteps";
11
+ import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
12
+ import { Tag } from "./components/tag/Tag";
13
+ import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, } from "./components/notificationPopUp/NotificationPopUp";
14
+ const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
15
+ import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
16
+ import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
17
+ export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, };
package/package.json CHANGED
@@ -1,42 +1,42 @@
1
- {
2
- "name": "@conduction/components",
3
- "version": "2.0.3",
4
- "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
- "main": "lib/index.js",
6
- "scripts": {
7
- "build": "tsc",
8
- "test": "echo \"Error: no test specified\" && exit 1"
9
- },
10
- "repository": {
11
- "type": "git",
12
- "url": "git+https://github.com/ConductionNL/conduction-components.git"
13
- },
14
- "keywords": ["React", "Gatsby", "Conduction", "Components"],
15
- "author": "Conduction B.V.",
16
- "license": "ISC",
17
- "bugs": {
18
- "url": "https://github.com/ConductionNL/conduction-components/issues"
19
- },
20
- "homepage": "https://github.com/ConductionNL/conduction-components#readme",
21
- "dependencies": {
22
- "@gemeente-denhaag/components-react": "^0.1.1-alpha.143",
23
- "@gemeente-denhaag/design-tokens-components": "^0.2.3-alpha.178",
24
- "@gemeente-denhaag/form-field": "^0.1.1-alpha.67",
25
- "@gemeente-denhaag/process-steps": "^0.1.0-alpha.18",
26
- "@gemeente-denhaag/sidenav": "^0.1.0-alpha.1",
27
- "@gemeente-denhaag/table": "^0.1.1-alpha.87",
28
- "@gemeente-denhaag/textarea": "^0.1.1-alpha.65",
29
- "clsx": "^1.1.1",
30
- "gatsby": "^4.11.1",
31
- "react": "^17.0.1",
32
- "react-hook-form": "7.29.0",
33
- "react-select": "5.3.2"
34
- },
35
- "devDependencies": {
36
- "@types/node": "^17.0.23",
37
- "@types/react": "^17.0.43",
38
- "@types/react-dom": "^17.0.14",
39
- "tsc-hooks": "^1.1.1",
40
- "typescript": "^4.6.3"
41
- }
42
- }
1
+ {
2
+ "name": "@conduction/components",
3
+ "version": "2.0.5",
4
+ "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
+ "main": "lib/index.js",
6
+ "scripts": {
7
+ "build": "tsc",
8
+ "test": "echo \"Error: no test specified\" && exit 1"
9
+ },
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "git+https://github.com/ConductionNL/conduction-components.git"
13
+ },
14
+ "keywords": ["React", "Gatsby", "Conduction", "Components"],
15
+ "author": "Conduction B.V.",
16
+ "license": "ISC",
17
+ "bugs": {
18
+ "url": "https://github.com/ConductionNL/conduction-components/issues"
19
+ },
20
+ "homepage": "https://github.com/ConductionNL/conduction-components#readme",
21
+ "dependencies": {
22
+ "@gemeente-denhaag/components-react": "^0.1.1-alpha.143",
23
+ "@gemeente-denhaag/design-tokens-components": "^0.2.3-alpha.178",
24
+ "@gemeente-denhaag/form-field": "^0.1.1-alpha.67",
25
+ "@gemeente-denhaag/process-steps": "^0.1.0-alpha.18",
26
+ "@gemeente-denhaag/sidenav": "^0.1.0-alpha.1",
27
+ "@gemeente-denhaag/table": "^0.1.1-alpha.87",
28
+ "@gemeente-denhaag/textarea": "^0.1.1-alpha.65",
29
+ "clsx": "^1.1.1",
30
+ "gatsby": "^4.11.1",
31
+ "react": "^17.0.1",
32
+ "react-hook-form": "7.29.0",
33
+ "react-select": "5.3.2"
34
+ },
35
+ "devDependencies": {
36
+ "@types/node": "^17.0.23",
37
+ "@types/react": "^17.0.43",
38
+ "@types/react-dom": "^17.0.14",
39
+ "tsc-hooks": "^1.1.1",
40
+ "typescript": "^4.6.3"
41
+ }
42
+ }