@conduction/components 2.0.30 → 2.0.32

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 (172) hide show
  1. package/.github/workflows/npm-publish.yml +39 -39
  2. package/.prettierrc +30 -30
  3. package/README.md +64 -60
  4. package/lib/components/badgeCounter/BadgeCounter.d.ts +8 -8
  5. package/lib/components/badgeCounter/BadgeCounter.js +4 -4
  6. package/lib/components/badgeCounter/BadgeCounter.module.css +27 -27
  7. package/lib/components/card/detailsCard/DetailsCard.d.ts +14 -14
  8. package/lib/components/card/detailsCard/DetailsCard.js +10 -10
  9. package/lib/components/card/detailsCard/DetailsCard.module.css +51 -51
  10. package/lib/components/card/downloadCard/DownloadCard.d.ts +11 -11
  11. package/lib/components/card/downloadCard/DownloadCard.js +8 -8
  12. package/lib/components/card/downloadCard/DownloadCard.module.css +27 -27
  13. package/lib/components/card/horizontalImageCard/HorizontalImageCard.d.ts +13 -13
  14. package/lib/components/card/horizontalImageCard/HorizontalImageCard.js +9 -9
  15. package/lib/components/card/horizontalImageCard/HorizontalImageCard.module.css +34 -34
  16. package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.d.ts +14 -14
  17. package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.js +9 -9
  18. package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css +63 -63
  19. package/lib/components/card/index.d.ts +7 -7
  20. package/lib/components/card/index.js +7 -7
  21. package/lib/components/card/infoCard/InfoCard.d.ts +8 -8
  22. package/lib/components/card/infoCard/InfoCard.js +6 -6
  23. package/lib/components/card/infoCard/InfoCard.module.css +26 -26
  24. package/lib/components/card/richContentCard/RichContentCard.d.ts +19 -19
  25. package/lib/components/card/richContentCard/RichContentCard.js +15 -15
  26. package/lib/components/card/richContentCard/RichContentCard.module.css +93 -93
  27. package/lib/components/codeBlock/CodeBlock.d.ts +6 -6
  28. package/lib/components/codeBlock/CodeBlock.js +3 -3
  29. package/lib/components/codeBlock/CodeBlock.module.css +6 -6
  30. package/lib/components/container/Container.d.ts +6 -6
  31. package/lib/components/container/Container.js +4 -4
  32. package/lib/components/container/Container.module.css +9 -9
  33. package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css +222 -222
  34. package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.d.ts +17 -17
  35. package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.js +20 -20
  36. package/lib/components/denhaag-wrappers/pagination/Pagination.css +120 -120
  37. package/lib/components/denhaag-wrappers/pagination/Pagination.d.ts +9 -9
  38. package/lib/components/denhaag-wrappers/pagination/Pagination.js +15 -15
  39. package/lib/components/editableTableRow/EditableTableRow.d.ts +14 -14
  40. package/lib/components/editableTableRow/EditableTableRow.js +31 -31
  41. package/lib/components/editableTableRow/EditableTableRow.module.css +25 -25
  42. package/lib/components/formFields/checkbox.d.ts +9 -9
  43. package/lib/components/formFields/checkbox.js +3 -3
  44. package/lib/components/formFields/createKeyValue/CreateKeyValue.d.ts +17 -17
  45. package/lib/components/formFields/createKeyValue/CreateKeyValue.js +31 -31
  46. package/lib/components/formFields/createKeyValue/CreateKeyValue.module.css +43 -43
  47. package/lib/components/formFields/index.d.ts +7 -7
  48. package/lib/components/formFields/index.js +7 -7
  49. package/lib/components/formFields/input.d.ts +22 -22
  50. package/lib/components/formFields/input.js +16 -16
  51. package/lib/components/formFields/radio.d.ts +9 -9
  52. package/lib/components/formFields/radio.js +3 -3
  53. package/lib/components/formFields/select/select.d.ts +18 -18
  54. package/lib/components/formFields/select/select.js +21 -21
  55. package/lib/components/formFields/select/select.module.css +38 -38
  56. package/lib/components/formFields/textarea.d.ts +8 -8
  57. package/lib/components/formFields/textarea.js +3 -3
  58. package/lib/components/formFields/types.d.ts +6 -6
  59. package/lib/components/formFields/types.js +1 -1
  60. package/lib/components/imageDivider/ImageDivider.d.ts +7 -7
  61. package/lib/components/imageDivider/ImageDivider.js +6 -6
  62. package/lib/components/imageDivider/imageDivider.module.css +5 -5
  63. package/lib/components/logo/Logo.d.ts +8 -8
  64. package/lib/components/logo/Logo.js +10 -10
  65. package/lib/components/logo/Logo.module.css +15 -15
  66. package/lib/components/metaIcon/MetaIcon.d.ts +7 -7
  67. package/lib/components/metaIcon/MetaIcon.js +3 -3
  68. package/lib/components/metaIcon/MetaIcon.module.css +29 -29
  69. package/lib/components/notificationPopUp/NotificationPopUp.d.ts +24 -24
  70. package/lib/components/notificationPopUp/NotificationPopUp.js +31 -31
  71. package/lib/components/notificationPopUp/NotificationPopUp.module.css +61 -61
  72. package/lib/components/privateRoute/PrivateRoute.d.ts +6 -6
  73. package/lib/components/privateRoute/PrivateRoute.js +15 -15
  74. package/lib/components/quoteWrapper/QuoteWrapper.d.ts +7 -7
  75. package/lib/components/quoteWrapper/QuoteWrapper.js +5 -5
  76. package/lib/components/quoteWrapper/QuoteWrapper.module.css +12 -12
  77. package/lib/components/statusSteps/StatusSteps.d.ts +13 -13
  78. package/lib/components/statusSteps/StatusSteps.js +5 -5
  79. package/lib/components/tag/Tag.d.ts +10 -10
  80. package/lib/components/tag/Tag.js +6 -6
  81. package/lib/components/tag/Tag.module.css +44 -44
  82. package/lib/components/toolTip/ToolTip.d.ts +9 -9
  83. package/lib/components/toolTip/ToolTip.js +7 -7
  84. package/lib/components/toolTip/ToolTip.module.css +4 -4
  85. package/lib/components/topNav/index.d.ts +3 -3
  86. package/lib/components/topNav/index.js +3 -3
  87. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts +20 -20
  88. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js +17 -17
  89. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +140 -139
  90. package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.d.ts +12 -12
  91. package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.js +7 -7
  92. package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.module.css +63 -63
  93. package/lib/index.d.ts +27 -27
  94. package/lib/index.js +20 -20
  95. package/package.json +46 -46
  96. package/src/components/badgeCounter/BadgeCounter.module.css +27 -27
  97. package/src/components/badgeCounter/BadgeCounter.tsx +16 -16
  98. package/src/components/card/detailsCard/DetailsCard.module.css +51 -51
  99. package/src/components/card/detailsCard/DetailsCard.tsx +56 -56
  100. package/src/components/card/downloadCard/DownloadCard.js +10 -10
  101. package/src/components/card/downloadCard/DownloadCard.module.css +27 -27
  102. package/src/components/card/downloadCard/DownloadCard.tsx +40 -40
  103. package/src/components/card/horizontalImageCard/HorizontalImageCard.js +9 -9
  104. package/src/components/card/horizontalImageCard/HorizontalImageCard.module.css +34 -34
  105. package/src/components/card/horizontalImageCard/HorizontalImageCard.tsx +37 -37
  106. package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.js +9 -9
  107. package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css +63 -63
  108. package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.tsx +49 -49
  109. package/src/components/card/index.js +5 -5
  110. package/src/components/card/index.tsx +8 -8
  111. package/src/components/card/infoCard/InfoCard.module.css +26 -26
  112. package/src/components/card/infoCard/InfoCard.tsx +19 -19
  113. package/src/components/card/richContentCard/RichContentCard.js +17 -17
  114. package/src/components/card/richContentCard/RichContentCard.module.css +93 -93
  115. package/src/components/card/richContentCard/RichContentCard.tsx +98 -98
  116. package/src/components/codeBlock/CodeBlock.module.css +6 -6
  117. package/src/components/codeBlock/CodeBlock.tsx +8 -8
  118. package/src/components/container/Container.js +3 -3
  119. package/src/components/container/Container.module.css +9 -9
  120. package/src/components/container/Container.tsx +11 -11
  121. package/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css +222 -222
  122. package/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.js +20 -20
  123. package/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.tsx +89 -89
  124. package/src/components/denhaag-wrappers/pagination/Pagination.css +120 -120
  125. package/src/components/denhaag-wrappers/pagination/Pagination.tsx +112 -112
  126. package/src/components/editableTableRow/EditableTableRow.js +34 -34
  127. package/src/components/editableTableRow/EditableTableRow.module.css +25 -25
  128. package/src/components/editableTableRow/EditableTableRow.tsx +138 -138
  129. package/src/components/formFields/checkbox.js +3 -3
  130. package/src/components/formFields/checkbox.tsx +30 -30
  131. package/src/components/formFields/createKeyValue/CreateKeyValue.module.css +43 -43
  132. package/src/components/formFields/createKeyValue/CreateKeyValue.tsx +125 -125
  133. package/src/components/formFields/index.js +4 -4
  134. package/src/components/formFields/index.tsx +32 -32
  135. package/src/components/formFields/input.js +12 -12
  136. package/src/components/formFields/input.tsx +176 -176
  137. package/src/components/formFields/radio.tsx +21 -21
  138. package/src/components/formFields/select/select.module.css +38 -38
  139. package/src/components/formFields/select/select.tsx +105 -105
  140. package/src/components/formFields/textarea.js +3 -3
  141. package/src/components/formFields/textarea.tsx +17 -17
  142. package/src/components/formFields/types.js +1 -1
  143. package/src/components/formFields/types.ts +7 -7
  144. package/src/components/imageDivider/ImageDivider.js +6 -6
  145. package/src/components/imageDivider/ImageDivider.tsx +12 -12
  146. package/src/components/imageDivider/imageDivider.module.css +5 -5
  147. package/src/components/logo/Logo.js +10 -10
  148. package/src/components/logo/Logo.module.css +15 -15
  149. package/src/components/logo/Logo.tsx +25 -25
  150. package/src/components/metaIcon/MetaIcon.js +3 -3
  151. package/src/components/metaIcon/MetaIcon.module.css +29 -29
  152. package/src/components/metaIcon/MetaIcon.tsx +18 -18
  153. package/src/components/notificationPopUp/NotificationPopUp.module.css +61 -61
  154. package/src/components/notificationPopUp/NotificationPopUp.tsx +87 -87
  155. package/src/components/privateRoute/PrivateRoute.js +15 -15
  156. package/src/components/privateRoute/PrivateRoute.tsx +22 -22
  157. package/src/components/quoteWrapper/QuoteWrapper.module.css +12 -12
  158. package/src/components/quoteWrapper/QuoteWrapper.tsx +15 -15
  159. package/src/components/statusSteps/StatusSteps.js +5 -5
  160. package/src/components/statusSteps/StatusSteps.tsx +54 -54
  161. package/src/components/tag/Tag.module.css +44 -44
  162. package/src/components/tag/Tag.tsx +37 -37
  163. package/src/components/toolTip/ToolTip.module.css +4 -4
  164. package/src/components/toolTip/ToolTip.tsx +24 -24
  165. package/src/components/topNav/index.ts +4 -4
  166. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +140 -139
  167. package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx +81 -79
  168. package/src/components/topNav/secondaryTopNav/SecondaryTopNav.module.css +63 -63
  169. package/src/components/topNav/secondaryTopNav/SecondaryTopNav.tsx +27 -27
  170. package/src/custom.d.ts +4 -4
  171. package/src/index.js +14 -14
  172. package/src/index.ts +79 -79
@@ -1,43 +1,43 @@
1
- :root {
2
- --conduction-create-key-value-table-row-border: 1px solid var(--skeleton-color-grey-1);
3
- }
4
-
5
- .keyValue {
6
- width: 100%;
7
- display: flex;
8
- flex-direction: column;
9
- }
10
-
11
- .table {
12
- border-collapse: collapse;
13
- }
14
-
15
- .table td,
16
- .table th {
17
- text-align: left;
18
- padding-inline: 0;
19
- padding-block: var(--skeleton-size-md);
20
- }
21
-
22
- .tdDelete {
23
- display: flex;
24
- justify-content: flex-end;
25
- }
26
-
27
- .form {
28
- width: 100%;
29
- display: flex;
30
- }
31
-
32
- .form > *:not(:last-child) {
33
- margin-right: 10px;
34
- }
35
-
36
- .form > input {
37
- flex: 5;
38
- }
39
-
40
- .form > button {
41
- flex: 2;
42
- max-width: fit-content;
43
- }
1
+ :root {
2
+ --conduction-create-key-value-table-row-border: 1px solid var(--skeleton-color-grey-1);
3
+ }
4
+
5
+ .keyValue {
6
+ width: 100%;
7
+ display: flex;
8
+ flex-direction: column;
9
+ }
10
+
11
+ .table {
12
+ border-collapse: collapse;
13
+ }
14
+
15
+ .table td,
16
+ .table th {
17
+ text-align: left;
18
+ padding-inline: 0;
19
+ padding-block: var(--skeleton-size-md);
20
+ }
21
+
22
+ .tdDelete {
23
+ display: flex;
24
+ justify-content: flex-end;
25
+ }
26
+
27
+ .form {
28
+ width: 100%;
29
+ display: flex;
30
+ }
31
+
32
+ .form > *:not(:last-child) {
33
+ margin-right: 10px;
34
+ }
35
+
36
+ .form > input {
37
+ flex: 5;
38
+ }
39
+
40
+ .form > button {
41
+ flex: 2;
42
+ max-width: fit-content;
43
+ }
@@ -1,7 +1,7 @@
1
- import { InputText, InputPassword, InputEmail, InputURL, InputDate, InputDateTime, InputNumber, InputFile } from "./input";
2
- import { Textarea } from "./textarea";
3
- import { InputCheckbox } from "./checkbox";
4
- import { InputRadio } from "./radio";
5
- import { SelectSingle, SelectMultiple } from "./select/select";
6
- import { CreateKeyValue } from "./createKeyValue/CreateKeyValue";
7
- export { InputRadio, InputText, InputPassword, InputEmail, InputURL, InputDate, InputDateTime, InputNumber, InputCheckbox, InputFile, Textarea, SelectSingle, SelectMultiple, CreateKeyValue, };
1
+ import { InputText, InputPassword, InputEmail, InputURL, InputDate, InputDateTime, InputNumber, InputFile } from "./input";
2
+ import { Textarea } from "./textarea";
3
+ import { InputCheckbox } from "./checkbox";
4
+ import { InputRadio } from "./radio";
5
+ import { SelectSingle, SelectMultiple } from "./select/select";
6
+ import { CreateKeyValue } from "./createKeyValue/CreateKeyValue";
7
+ export { InputRadio, InputText, InputPassword, InputEmail, InputURL, InputDate, InputDateTime, InputNumber, InputCheckbox, InputFile, Textarea, SelectSingle, SelectMultiple, CreateKeyValue, };
@@ -1,7 +1,7 @@
1
- import { InputText, InputPassword, InputEmail, InputURL, InputDate, InputDateTime, InputNumber, InputFile, } from "./input";
2
- import { Textarea } from "./textarea";
3
- import { InputCheckbox } from "./checkbox";
4
- import { InputRadio } from "./radio";
5
- import { SelectSingle, SelectMultiple } from "./select/select";
6
- import { CreateKeyValue } from "./createKeyValue/CreateKeyValue";
7
- export { InputRadio, InputText, InputPassword, InputEmail, InputURL, InputDate, InputDateTime, InputNumber, InputCheckbox, InputFile, Textarea, SelectSingle, SelectMultiple, CreateKeyValue, };
1
+ import { InputText, InputPassword, InputEmail, InputURL, InputDate, InputDateTime, InputNumber, InputFile, } from "./input";
2
+ import { Textarea } from "./textarea";
3
+ import { InputCheckbox } from "./checkbox";
4
+ import { InputRadio } from "./radio";
5
+ import { SelectSingle, SelectMultiple } from "./select/select";
6
+ import { CreateKeyValue } from "./createKeyValue/CreateKeyValue";
7
+ export { InputRadio, InputText, InputPassword, InputEmail, InputURL, InputDate, InputDateTime, InputNumber, InputCheckbox, InputFile, Textarea, SelectSingle, SelectMultiple, CreateKeyValue, };
@@ -1,22 +1,22 @@
1
- import * as React from "react";
2
- import { IReactHookFormProps } from "./types";
3
- export interface IInputProps {
4
- name: string;
5
- disabled?: boolean;
6
- defaultValue?: string;
7
- icon?: JSX.Element;
8
- placeholder?: string;
9
- }
10
- export declare const InputPassword: React.FC<IInputProps & IReactHookFormProps>;
11
- export declare const InputText: React.FC<IInputProps & IReactHookFormProps>;
12
- export declare const InputEmail: React.FC<IInputProps & IReactHookFormProps>;
13
- export declare const InputURL: React.FC<IInputProps & IReactHookFormProps>;
14
- export declare const InputDate: React.FC<IInputProps & IReactHookFormProps>;
15
- export declare const InputDateTime: React.FC<IInputProps & IReactHookFormProps>;
16
- export declare const InputNumber: React.FC<IInputProps & IReactHookFormProps>;
17
- export declare const InputFloat: React.FC<IInputProps & IReactHookFormProps>;
18
- interface IInputFileProps {
19
- accept?: string;
20
- }
21
- export declare const InputFile: React.FC<IInputFileProps & IInputProps & IReactHookFormProps>;
22
- export {};
1
+ import * as React from "react";
2
+ import { IReactHookFormProps } from "./types";
3
+ export interface IInputProps {
4
+ name: string;
5
+ disabled?: boolean;
6
+ defaultValue?: string;
7
+ icon?: JSX.Element;
8
+ placeholder?: string;
9
+ }
10
+ export declare const InputPassword: React.FC<IInputProps & IReactHookFormProps>;
11
+ export declare const InputText: React.FC<IInputProps & IReactHookFormProps>;
12
+ export declare const InputEmail: React.FC<IInputProps & IReactHookFormProps>;
13
+ export declare const InputURL: React.FC<IInputProps & IReactHookFormProps>;
14
+ export declare const InputDate: React.FC<IInputProps & IReactHookFormProps>;
15
+ export declare const InputDateTime: React.FC<IInputProps & IReactHookFormProps>;
16
+ export declare const InputNumber: React.FC<IInputProps & IReactHookFormProps>;
17
+ export declare const InputFloat: React.FC<IInputProps & IReactHookFormProps>;
18
+ interface IInputFileProps {
19
+ accept?: string;
20
+ }
21
+ export declare const InputFile: React.FC<IInputFileProps & IInputProps & IReactHookFormProps>;
22
+ export {};
@@ -1,16 +1,16 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import { TextField } from "@gemeente-denhaag/components-react";
4
- import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
5
- export const InputPassword = ({ disabled, name, validation, register, placeholder, errors, }) => {
6
- const [showPassword, setShowPassword] = React.useState(false);
7
- return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled, placeholder }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }) }));
8
- };
9
- export const InputText = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
10
- export const InputEmail = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
11
- export const InputURL = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "url", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
12
- export const InputDate = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "date", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
13
- export const InputDateTime = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "datetime-local", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
14
- export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }));
15
- export const InputFloat = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "number", step: ".01", ...{ disabled, placeholder, icon, defaultValue }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }));
16
- export const InputFile = ({ disabled, name, accept, defaultValue, validation, register, }) => (_jsx("input", { className: "denhaag-textfield__input", type: "file", ...{ defaultValue, disabled, accept }, ...register(name, { ...validation }) }));
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { TextField } from "@gemeente-denhaag/components-react";
4
+ import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
5
+ export const InputPassword = ({ disabled, name, validation, register, placeholder, errors, }) => {
6
+ const [showPassword, setShowPassword] = React.useState(false);
7
+ return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled, placeholder }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }) }));
8
+ };
9
+ export const InputText = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
10
+ export const InputEmail = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
11
+ export const InputURL = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "url", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
12
+ export const InputDate = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "date", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
13
+ export const InputDateTime = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "datetime-local", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
14
+ export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }));
15
+ export const InputFloat = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "number", step: ".01", ...{ disabled, placeholder, icon, defaultValue }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }));
16
+ export const InputFile = ({ disabled, name, accept, defaultValue, validation, register, }) => (_jsx("input", { className: "denhaag-textfield__input", type: "file", ...{ defaultValue, disabled, accept }, ...register(name, { ...validation }) }));
@@ -1,9 +1,9 @@
1
- /// <reference types="react" />
2
- import { IReactHookFormProps } from "./types";
3
- interface IRadioProps {
4
- label: string;
5
- name: string;
6
- value: string;
7
- }
8
- export declare const InputRadio: React.FC<IRadioProps & IReactHookFormProps>;
9
- export {};
1
+ /// <reference types="react" />
2
+ import { IReactHookFormProps } from "./types";
3
+ interface IRadioProps {
4
+ label: string;
5
+ name: string;
6
+ value: string;
7
+ }
8
+ export declare const InputRadio: React.FC<IRadioProps & IReactHookFormProps>;
9
+ export {};
@@ -1,3 +1,3 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { FormControlLabel } from "@gemeente-denhaag/components-react";
3
- export const InputRadio = ({ name, validation, register, label, value, }) => (_jsx(FormControlLabel, { input: _jsx("input", { type: "radio", ...{ value }, ...register(name, { ...validation }) }), ...{ label } }));
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { FormControlLabel } from "@gemeente-denhaag/components-react";
3
+ export const InputRadio = ({ name, validation, register, label, value, }) => (_jsx(FormControlLabel, { input: _jsx("input", { type: "radio", ...{ value }, ...register(name, { ...validation }) }), ...{ label } }));
@@ -1,18 +1,18 @@
1
- import * as React from "react";
2
- import { Control, FieldValues } from "react-hook-form";
3
- import { IReactHookFormProps } from "../types";
4
- interface ISelectProps {
5
- control: Control<FieldValues, any>;
6
- options: {
7
- label: string;
8
- value: string;
9
- }[];
10
- name: string;
11
- defaultValue?: any;
12
- disabled?: boolean;
13
- isClearable?: boolean;
14
- }
15
- export declare const SelectMultiple: React.FC<ISelectProps & IReactHookFormProps>;
16
- export declare const SelectCreate: React.FC<ISelectProps & IReactHookFormProps>;
17
- export declare const SelectSingle: React.FC<ISelectProps & IReactHookFormProps>;
18
- export {};
1
+ import * as React from "react";
2
+ import { Control, FieldValues } from "react-hook-form";
3
+ import { IReactHookFormProps } from "../types";
4
+ interface ISelectProps {
5
+ control: Control<FieldValues, any>;
6
+ options: {
7
+ label: string;
8
+ value: string;
9
+ }[];
10
+ name: string;
11
+ defaultValue?: any;
12
+ disabled?: boolean;
13
+ isClearable?: boolean;
14
+ }
15
+ export declare const SelectMultiple: React.FC<ISelectProps & IReactHookFormProps>;
16
+ export declare const SelectCreate: React.FC<ISelectProps & IReactHookFormProps>;
17
+ export declare const SelectSingle: React.FC<ISelectProps & IReactHookFormProps>;
18
+ export {};
@@ -1,21 +1,21 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import * as styles from "./select.module.css";
3
- import { Controller } from "react-hook-form";
4
- import ReactSelect from "react-select";
5
- import CreatableSelect from "react-select/creatable";
6
- import clsx from "clsx";
7
- export const SelectMultiple = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
8
- return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
9
- return (_jsx(ReactSelect, { className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, value, onChange, errors, defaultValue }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }));
10
- } }));
11
- };
12
- export const SelectCreate = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
13
- return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
14
- return (_jsx(CreatableSelect, { placeholder: "Select existing or create new entries", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, value, onChange, errors, defaultValue }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }));
15
- } }));
16
- };
17
- export const SelectSingle = ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, }) => {
18
- return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
19
- return (_jsx(ReactSelect, { value: value || "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable, defaultValue }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }));
20
- } }));
21
- };
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as styles from "./select.module.css";
3
+ import { Controller } from "react-hook-form";
4
+ import ReactSelect from "react-select";
5
+ import CreatableSelect from "react-select/creatable";
6
+ import clsx from "clsx";
7
+ export const SelectMultiple = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
8
+ return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
9
+ return (_jsx(ReactSelect, { className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, value, onChange, errors, defaultValue }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }));
10
+ } }));
11
+ };
12
+ export const SelectCreate = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
13
+ return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
14
+ return (_jsx(CreatableSelect, { placeholder: "Select existing or create new entries", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, value, onChange, errors, defaultValue }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }));
15
+ } }));
16
+ };
17
+ export const SelectSingle = ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, }) => {
18
+ return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
19
+ return (_jsx(ReactSelect, { value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }));
20
+ } }));
21
+ };
@@ -1,38 +1,38 @@
1
- :root {
2
- --conduction-input-select-border: 1px solid var(--skeleton-color-grey-3);
3
- --conduction-input-select-border-focus: 2px dashed var(--skeleton-color-grey-5);
4
- }
5
-
6
- .select > div {
7
- background-color: var(--skeleton-color-white);
8
- border: var(--conduction-input-select-border);
9
- border-radius: var(--skeleton-border-radius-md);
10
- box-sizing: border-box;
11
- padding-block-start: var(--skeleton-size-xs);
12
- padding-block-end: var(--skeleton-size-xs);
13
- }
14
-
15
- .select.error > div {
16
- border-color: var(
17
- --utrecht-textbox-invalid-border-color,
18
- var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
19
- );
20
- }
21
-
22
- .select .select > div:focus-within {
23
- outline: none;
24
- box-shadow: none;
25
- }
26
-
27
- .select > div:focus-within::after {
28
- content: "";
29
- display: block;
30
- position: absolute;
31
- pointer-events: none;
32
- bottom: calc(var(--skeleton-size-2xs) * -1);
33
- left: calc(var(--skeleton-size-2xs) * -1);
34
- right: calc(var(--skeleton-size-2xs) * -1);
35
- top: calc(var(--skeleton-size-2xs) * -1);
36
- border: var(--conduction-input-select-border-focus);
37
- border-radius: var(--skeleton-border-radius-md);
38
- }
1
+ :root {
2
+ --conduction-input-select-border: 1px solid var(--skeleton-color-grey-3);
3
+ --conduction-input-select-border-focus: 2px dashed var(--skeleton-color-grey-5);
4
+ }
5
+
6
+ .select > div {
7
+ background-color: var(--skeleton-color-white);
8
+ border: var(--conduction-input-select-border);
9
+ border-radius: var(--skeleton-border-radius-md);
10
+ box-sizing: border-box;
11
+ padding-block-start: var(--skeleton-size-xs);
12
+ padding-block-end: var(--skeleton-size-xs);
13
+ }
14
+
15
+ .select.error > div {
16
+ border-color: var(
17
+ --utrecht-textbox-invalid-border-color,
18
+ var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
19
+ );
20
+ }
21
+
22
+ .select .select > div:focus-within {
23
+ outline: none;
24
+ box-shadow: none;
25
+ }
26
+
27
+ .select > div:focus-within::after {
28
+ content: "";
29
+ display: block;
30
+ position: absolute;
31
+ pointer-events: none;
32
+ bottom: calc(var(--skeleton-size-2xs) * -1);
33
+ left: calc(var(--skeleton-size-2xs) * -1);
34
+ right: calc(var(--skeleton-size-2xs) * -1);
35
+ top: calc(var(--skeleton-size-2xs) * -1);
36
+ border: var(--conduction-input-select-border-focus);
37
+ border-radius: var(--skeleton-border-radius-md);
38
+ }
@@ -1,8 +1,8 @@
1
- import * as React from "react";
2
- import { IReactHookFormProps } from "./types";
3
- export interface ITextAreaProps {
4
- name: string;
5
- disabled?: boolean;
6
- defaultValue?: string;
7
- }
8
- export declare const Textarea: React.FC<ITextAreaProps & IReactHookFormProps>;
1
+ import * as React from "react";
2
+ import { IReactHookFormProps } from "./types";
3
+ export interface ITextAreaProps {
4
+ name: string;
5
+ disabled?: boolean;
6
+ defaultValue?: string;
7
+ }
8
+ export declare const Textarea: React.FC<ITextAreaProps & IReactHookFormProps>;
@@ -1,3 +1,3 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { TextArea } from "@gemeente-denhaag/textarea";
3
- export const Textarea = ({ name, validation, register, errors, disabled, }) => _jsx(TextArea, { ...register(name, { ...validation }), ...{ disabled }, invalid: errors[name] });
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { TextArea } from "@gemeente-denhaag/textarea";
3
+ export const Textarea = ({ name, validation, register, errors, disabled, }) => _jsx(TextArea, { ...register(name, { ...validation }), ...{ disabled }, invalid: errors[name] });
@@ -1,6 +1,6 @@
1
- import { FieldErrors, FieldValues, RegisterOptions, UseFormRegister } from "react-hook-form";
2
- export interface IReactHookFormProps {
3
- register: UseFormRegister<FieldValues>;
4
- errors: FieldErrors;
5
- validation?: Omit<RegisterOptions<FieldValues, any>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled">;
6
- }
1
+ import { FieldErrors, FieldValues, RegisterOptions, UseFormRegister } from "react-hook-form";
2
+ export interface IReactHookFormProps {
3
+ register: UseFormRegister<FieldValues>;
4
+ errors: FieldErrors;
5
+ validation?: Omit<RegisterOptions<FieldValues, any>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled">;
6
+ }
@@ -1 +1 @@
1
- export {};
1
+ export {};
@@ -1,7 +1,7 @@
1
- import * as React from "react";
2
- interface ImageDividerProps {
3
- image: string;
4
- layoutClassName: string;
5
- }
6
- export declare const ImageDivider: React.FC<ImageDividerProps>;
7
- export {};
1
+ import * as React from "react";
2
+ interface ImageDividerProps {
3
+ image: string;
4
+ layoutClassName: string;
5
+ }
6
+ export declare const ImageDivider: React.FC<ImageDividerProps>;
7
+ export {};
@@ -1,6 +1,6 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import clsx from "clsx";
3
- import * as styles from "./imageDivider.module.css";
4
- export const ImageDivider = ({ image, layoutClassName }) => {
5
- return _jsx("img", { src: image, className: clsx(styles.divider, layoutClassName) });
6
- };
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import clsx from "clsx";
3
+ import * as styles from "./imageDivider.module.css";
4
+ export const ImageDivider = ({ image, layoutClassName }) => {
5
+ return _jsx("img", { src: image, className: clsx(styles.divider, layoutClassName) });
6
+ };
@@ -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
+ }
@@ -1,8 +1,8 @@
1
- import * as React from "react";
2
- interface LogoProps {
3
- layoutClassName: string;
4
- href?: string;
5
- }
6
- export declare const AuthenticatedLogo: React.FC<LogoProps>;
7
- export declare const UnauthenticatedLogo: React.FC<LogoProps>;
8
- export {};
1
+ import * as React from "react";
2
+ interface LogoProps {
3
+ layoutClassName: string;
4
+ href?: string;
5
+ }
6
+ export declare const AuthenticatedLogo: React.FC<LogoProps>;
7
+ export declare const UnauthenticatedLogo: React.FC<LogoProps>;
8
+ export {};
@@ -1,10 +1,10 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import clsx from "clsx";
3
- import { Link } from "gatsby";
4
- import * as styles from "./Logo.module.css";
5
- export const AuthenticatedLogo = ({ layoutClassName, href }) => {
6
- return (_jsx(Link, { className: styles.logoContainer, to: href ?? "#", children: _jsx("div", { className: clsx(styles.authenticatedLogo, styles.logo, layoutClassName) }) }));
7
- };
8
- export const UnauthenticatedLogo = ({ layoutClassName, href }) => {
9
- return (_jsx(Link, { className: styles.logoContainer, to: href ?? "#", children: _jsx("div", { className: clsx(styles.unauthenticatedLogo, styles.logo, layoutClassName) }) }));
10
- };
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import clsx from "clsx";
3
+ import { Link } from "gatsby";
4
+ import * as styles from "./Logo.module.css";
5
+ export const AuthenticatedLogo = ({ layoutClassName, href }) => {
6
+ return (_jsx(Link, { className: styles.logoContainer, to: href ?? "#", children: _jsx("div", { className: clsx(styles.authenticatedLogo, styles.logo, layoutClassName) }) }));
7
+ };
8
+ export const UnauthenticatedLogo = ({ layoutClassName, href }) => {
9
+ return (_jsx(Link, { className: styles.logoContainer, to: href ?? "#", children: _jsx("div", { className: clsx(styles.unauthenticatedLogo, styles.logo, layoutClassName) }) }));
10
+ };
@@ -1,15 +1,15 @@
1
- .logoContainer {
2
- height: 100%;
3
- }
4
-
5
- .logo {
6
- background-size: 100% 100%;
7
- }
8
-
9
- .authenticatedLogo {
10
- background-image: var(--conduction-authenticated-logo-background);
11
- }
12
-
13
- .unauthenticatedLogo {
14
- background-image: var(--conduction-unauthenticated-logo-background);
15
- }
1
+ .logoContainer {
2
+ height: 100%;
3
+ }
4
+
5
+ .logo {
6
+ background-size: 100% 100%;
7
+ }
8
+
9
+ .authenticatedLogo {
10
+ background-image: var(--conduction-authenticated-logo-background);
11
+ }
12
+
13
+ .unauthenticatedLogo {
14
+ background-image: var(--conduction-unauthenticated-logo-background);
15
+ }
@@ -1,7 +1,7 @@
1
- import * as React from "react";
2
- export interface MetaIconProps {
3
- icon: JSX.Element;
4
- label: string;
5
- value: string;
6
- }
7
- export declare const MetaIcon: React.FC<MetaIconProps>;
1
+ import * as React from "react";
2
+ export interface MetaIconProps {
3
+ icon: JSX.Element;
4
+ label: string;
5
+ value: string;
6
+ }
7
+ export declare const MetaIcon: React.FC<MetaIconProps>;
@@ -1,3 +1,3 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import * as styles from "./MetaIcon.module.css";
3
- export const MetaIcon = ({ icon, label, value }) => (_jsxs("div", { className: styles.container, children: [_jsx("span", { className: styles.icon, children: icon }), _jsx("span", { children: label }), _jsx("span", { className: styles.value, children: value })] }));
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as styles from "./MetaIcon.module.css";
3
+ export const MetaIcon = ({ icon, label, value }) => (_jsxs("div", { className: styles.container, children: [_jsx("span", { className: styles.icon, children: icon }), _jsx("span", { children: label }), _jsx("span", { className: styles.value, children: value })] }));
@@ -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
+ }