@conduction/components 1.0.18 → 1.0.21

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 (15) hide show
  1. package/lib/components/formFields/index.d.ts +2 -2
  2. package/lib/components/formFields/index.js +2 -2
  3. package/lib/components/formFields/input.d.ts +2 -0
  4. package/lib/components/formFields/input.js +5 -5
  5. package/lib/components/quoteWrapper/QuoteWrapper.d.ts +7 -0
  6. package/lib/components/quoteWrapper/QuoteWrapper.js +5 -0
  7. package/lib/components/quoteWrapper/QuoteWrapper.module.css +12 -0
  8. package/lib/index.d.ts +3 -2
  9. package/lib/index.js +3 -2
  10. package/package.json +1 -1
  11. package/src/components/formFields/index.tsx +2 -1
  12. package/src/components/formFields/input.tsx +14 -5
  13. package/src/components/quoteWrapper/QuoteWrapper.module.css +12 -0
  14. package/src/components/quoteWrapper/QuoteWrapper.tsx +15 -0
  15. package/src/index.ts +4 -2
package/lib/components/formFields/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
1
+ import { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile } from "./input";
2
2
  import { Textarea } from "./textarea";
3
3
  import { InputCheckbox } from "./checkbox";
4
4
  import { InputRadio } from "./radio";
5
5
  import { SelectSingle, SelectMultiple } from "./select/select";
6
- export { InputRadio, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea, SelectSingle, SelectMultiple, };
6
+ export { InputRadio, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, InputFile, Textarea, SelectSingle, SelectMultiple, };
package/lib/components/formFields/index.js CHANGED
@@ -1,6 +1,6 @@
1
- import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
1
+ import { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile } from "./input";
2
2
  import { Textarea } from "./textarea";
3
3
  import { InputCheckbox } from "./checkbox";
4
4
  import { InputRadio } from "./radio";
5
5
  import { SelectSingle, SelectMultiple } from "./select/select";
6
- export { InputRadio, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea, SelectSingle, SelectMultiple, };
6
+ export { InputRadio, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, InputFile, Textarea, SelectSingle, SelectMultiple, };
package/lib/components/formFields/input.d.ts CHANGED
@@ -4,6 +4,8 @@ export interface IInputProps {
4
4
  name: string;
5
5
  disabled?: boolean;
6
6
  defaultValue?: string;
7
+ icon?: JSX.Element;
8
+ placeholder?: string;
7
9
  }
8
10
  export declare const InputPassword: React.FC<IInputProps & IReactHookFormProps>;
9
11
  export declare const InputText: React.FC<IInputProps & IReactHookFormProps>;
package/lib/components/formFields/input.js CHANGED
@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
3
  import { TextField } from "@gemeente-denhaag/components-react";
4
4
  import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
5
- export const InputPassword = ({ disabled, name, validation, register, errors, }) => {
5
+ export const InputPassword = ({ disabled, name, validation, register, placeholder, errors, }) => {
6
6
  const [showPassword, setShowPassword] = React.useState(false);
7
- return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }) }));
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
8
  };
9
- export const InputText = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
10
- export const InputEmail = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
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
11
  export const InputDate = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "date", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
12
- export const InputNumber = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
12
+ export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
13
13
  export const InputFile = ({ disabled, name, accept, defaultValue, validation, register, }) => (_jsx("input", { className: "denhaag-textfield__input", type: "file", ...{ defaultValue, disabled, accept }, ...register(name, { ...validation }) }));
package/lib/components/quoteWrapper/QuoteWrapper.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import * as React from "react";
2
+ interface QuoteWrapperProps {
3
+ borderColor?: string;
4
+ borderWidth?: string;
5
+ }
6
+ export declare const QuoteWrapper: React.FC<QuoteWrapperProps>;
7
+ export {};
package/lib/components/quoteWrapper/QuoteWrapper.js ADDED
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as styles from "./QuoteWrapper.module.css";
3
+ export const QuoteWrapper = ({ children, borderColor, borderWidth }) => {
4
+ return (_jsx("div", { style: { borderLeftColor: borderColor, borderLeftWidth: borderWidth }, className: styles.container, children: children }));
5
+ };
package/lib/components/quoteWrapper/QuoteWrapper.module.css ADDED
@@ -0,0 +1,12 @@
1
+ :root {
2
+ --conduction-quote-border-width: 12px;
3
+ --conduction-quote-border-color: #f5f5f5;
4
+ --conduction-quote-padding-inline: 24px;
5
+ }
6
+
7
+ .container {
8
+ border-left-width: var(--conduction-quote-border-width);
9
+ border-left-style: solid;
10
+ border-left-color: var(--conduction-quote-border-color);
11
+ padding-inline-start: var(--conduction-quote-padding-inline);
12
+ }
package/lib/index.d.ts CHANGED
@@ -3,7 +3,7 @@ import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard
3
3
  import { Container } from "./components/container/Container";
4
4
  import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
5
5
  import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
6
- import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputRadio, SelectMultiple, SelectSingle } from "./components/formFields";
6
+ import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputRadio, InputFile, SelectMultiple, SelectSingle } from "./components/formFields";
7
7
  import { ImageDivider } from "./components/imageDivider/ImageDivider";
8
8
  import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
9
9
  import { MetaIcon } from "./components/metaIcon/MetaIcon";
@@ -19,4 +19,5 @@ declare const NotificationPopUp: {
19
19
  };
20
20
  NotificationPopUp: import("react").FC<import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps>;
21
21
  };
22
- export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, };
22
+ import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
23
+ 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, };
package/lib/index.js CHANGED
@@ -2,7 +2,7 @@ import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard
2
2
  import { Container } from "./components/container/Container";
3
3
  import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
4
4
  import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
5
- import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputRadio, SelectMultiple, SelectSingle, } from "./components/formFields";
5
+ import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputRadio, InputFile, SelectMultiple, SelectSingle, } from "./components/formFields";
6
6
  import { ImageDivider } from "./components/imageDivider/ImageDivider";
7
7
  import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
8
8
  import { MetaIcon } from "./components/metaIcon/MetaIcon";
@@ -12,4 +12,5 @@ import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
12
12
  import { Tag } from "./components/tag/Tag";
13
13
  import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, } from "./components/notificationPopUp/NotificationPopUp";
14
14
  const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
15
- export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, };
15
+ import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
16
+ 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, };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "1.0.18",
3
+ "version": "1.0.21",
4
4
  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/formFields/index.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
1
+ import { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile } from "./input";
2
2
  import { Textarea } from "./textarea";
3
3
  import { InputCheckbox } from "./checkbox";
4
4
  import { InputRadio } from "./radio";
@@ -12,6 +12,7 @@ export {
12
12
  InputDate,
13
13
  InputNumber,
14
14
  InputCheckbox,
15
+ InputFile,
15
16
  Textarea,
16
17
  SelectSingle,
17
18
  SelectMultiple,
package/src/components/formFields/input.tsx CHANGED
@@ -1,12 +1,14 @@
1
1
  import * as React from "react";
2
2
  import { TextField } from "@gemeente-denhaag/components-react";
3
- import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
3
+ import { ShowIcon, HideIcon, EmailIcon } from "@gemeente-denhaag/icons";
4
4
  import { IReactHookFormProps } from "./types";
5
5
 
6
6
  export interface IInputProps {
7
7
  name: string;
8
8
  disabled?: boolean;
9
9
  defaultValue?: string;
10
+ icon?: JSX.Element;
11
+ placeholder?: string;
10
12
  }
11
13
 
12
14
  export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -14,6 +16,7 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
14
16
  name,
15
17
  validation,
16
18
  register,
19
+ placeholder,
17
20
  errors,
18
21
  }) => {
19
22
  const [showPassword, setShowPassword] = React.useState<boolean>(false);
@@ -21,7 +24,7 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
21
24
  return (
22
25
  <TextField
23
26
  type={showPassword ? "text" : "password"}
24
- {...{ disabled }}
27
+ {...{ disabled, placeholder }}
25
28
  {...register(name, { ...validation })}
26
29
  invalid={errors[name]}
27
30
  icon={<span onClick={() => setShowPassword(!showPassword)}>{showPassword ? <HideIcon /> : <ShowIcon />}</span>}
@@ -35,11 +38,13 @@ export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
35
38
  defaultValue,
36
39
  validation,
37
40
  register,
41
+ icon,
42
+ placeholder,
38
43
  errors,
39
44
  }) => (
40
45
  <TextField
41
46
  type="text"
42
- {...{ defaultValue, disabled }}
47
+ {...{ defaultValue, disabled, placeholder, icon }}
43
48
  {...register(name, { ...validation })}
44
49
  invalid={errors[name]}
45
50
  />
@@ -51,11 +56,13 @@ export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
51
56
  defaultValue,
52
57
  validation,
53
58
  register,
59
+ icon,
60
+ placeholder,
54
61
  errors,
55
62
  }) => (
56
63
  <TextField
57
64
  type="email"
58
- {...{ defaultValue, disabled }}
65
+ {...{ defaultValue, disabled, placeholder, icon }}
59
66
  {...register(name, { ...validation })}
60
67
  invalid={errors[name]}
61
68
  />
@@ -83,11 +90,13 @@ export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
83
90
  defaultValue,
84
91
  validation,
85
92
  register,
93
+ icon,
94
+ placeholder,
86
95
  errors,
87
96
  }) => (
88
97
  <TextField
89
98
  type="number"
90
- {...{ defaultValue, disabled }}
99
+ {...{ defaultValue, disabled, placeholder, icon }}
91
100
  {...register(name, { ...validation })}
92
101
  invalid={errors[name]}
93
102
  />
package/src/components/quoteWrapper/QuoteWrapper.module.css ADDED
@@ -0,0 +1,12 @@
1
+ :root {
2
+ --conduction-quote-border-width: 12px;
3
+ --conduction-quote-border-color: #f5f5f5;
4
+ --conduction-quote-padding-inline: 24px;
5
+ }
6
+
7
+ .container {
8
+ border-left-width: var(--conduction-quote-border-width);
9
+ border-left-style: solid;
10
+ border-left-color: var(--conduction-quote-border-color);
11
+ padding-inline-start: var(--conduction-quote-padding-inline);
12
+ }
package/src/components/quoteWrapper/QuoteWrapper.tsx ADDED
@@ -0,0 +1,15 @@
1
+ import * as React from "react";
2
+ import * as styles from "./QuoteWrapper.module.css";
3
+
4
+ interface QuoteWrapperProps {
5
+ borderColor?: string;
6
+ borderWidth?: string;
7
+ }
8
+
9
+ export const QuoteWrapper: React.FC<QuoteWrapperProps> = ({ children, borderColor, borderWidth }) => {
10
+ return (
11
+ <div style={{ borderLeftColor: borderColor, borderLeftWidth: borderWidth }} className={styles.container}>
12
+ {children}
13
+ </div>
14
+ );
15
+ };
package/src/index.ts CHANGED
@@ -18,6 +18,7 @@ import {
18
18
  Textarea,
19
19
  InputCheckbox,
20
20
  InputRadio,
21
+ InputFile,
21
22
  SelectMultiple,
22
23
  SelectSingle,
23
24
  } from "./components/formFields";
@@ -28,13 +29,12 @@ import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
28
29
  import { StatusSteps } from "./components/statusSteps/StatusSteps";
29
30
  import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
30
31
  import { Tag } from "./components/tag/Tag";
31
-
32
32
  import {
33
33
  NotificationPopUpController,
34
34
  NotificationPopUp as _NotificationPopUp,
35
35
  } from "./components/notificationPopUp/NotificationPopUp";
36
-
37
36
  const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
37
+ import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
38
38
 
39
39
  export {
40
40
  InputRadio,
@@ -52,6 +52,7 @@ export {
52
52
  InputEmail,
53
53
  InputDate,
54
54
  InputNumber,
55
+ InputFile,
55
56
  Textarea,
56
57
  InputCheckbox,
57
58
  SelectMultiple,
@@ -66,4 +67,5 @@ export {
66
67
  SecondaryTopNav,
67
68
  Tag,
68
69
  NotificationPopUp,
70
+ QuoteWrapper,
69
71
  };