@digigov/form 0.11.0 → 0.12.0

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 (26) hide show
  1. package/CHANGELOG.md +15 -1
  2. package/FormBuilder/FormBuilder.js +2 -1
  3. package/Questions/Step/StepTitle.d.ts +1 -0
  4. package/Questions/Step/StepTitle.js +5 -4
  5. package/Questions/Step/types.d.ts +1 -0
  6. package/Questions/__stories__/Default.js +6 -1
  7. package/es/FormBuilder/FormBuilder.js +2 -1
  8. package/es/Questions/Step/StepTitle.js +5 -5
  9. package/es/Questions/__stories__/Default.js +6 -1
  10. package/es/inputs/DateInput/index.js +9 -6
  11. package/es/inputs/OtpInput/index.js +2 -1
  12. package/esm/FormBuilder/FormBuilder.js +2 -1
  13. package/esm/Questions/Step/StepTitle.js +5 -5
  14. package/esm/Questions/__stories__/Default.js +6 -1
  15. package/esm/index.js +1 -1
  16. package/esm/inputs/DateInput/index.js +9 -6
  17. package/esm/inputs/OtpInput/index.js +2 -1
  18. package/inputs/DateInput/index.js +9 -6
  19. package/inputs/OtpInput/index.js +2 -1
  20. package/package.json +4 -4
  21. package/src/FormBuilder/FormBuilder.tsx +1 -0
  22. package/src/Questions/Step/StepTitle.tsx +5 -3
  23. package/src/Questions/Step/types.tsx +1 -0
  24. package/src/Questions/__stories__/Default.tsx +4 -1
  25. package/src/inputs/DateInput/index.tsx +6 -3
  26. package/src/inputs/OtpInput/index.tsx +3 -0
package/CHANGELOG.md CHANGED
@@ -1,6 +1,20 @@
1
1
  # Change Log - @digigov/form
2
2
 
3
- This log was last generated on Tue, 02 May 2023 09:16:06 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 16 May 2023 13:42:28 GMT and should not be manually modified.
4
+
5
+ ## 0.12.0
6
+ Tue, 16 May 2023 13:42:28 GMT
7
+
8
+ ### Minor changes
9
+
10
+ - Add customisation options for back buttons in Questions and Step components
11
+
12
+ ## 0.11.1
13
+ Thu, 11 May 2023 10:48:56 GMT
14
+
15
+ ### Patches
16
+
17
+ - Fix input error validations for OtpInput and DateInput
4
18
 
5
19
  ## 0.11.0
6
20
  Tue, 02 May 2023 09:16:06 GMT
package/FormBuilder/FormBuilder.js CHANGED
@@ -80,7 +80,8 @@ var FormBase = /*#__PURE__*/_react["default"].forwardRef(function FormBase(_ref,
80
80
  clearErrors: form.clearErrors,
81
81
  getValues: form.getValues,
82
82
  unregister: form.unregister,
83
- componentRegistry: componentRegistry
83
+ componentRegistry: componentRegistry,
84
+ setError: form.setError
84
85
  };
85
86
  return /*#__PURE__*/_react["default"].createElement(_FormContext.FormContext.Provider, {
86
87
  value: ctx
package/Questions/Step/StepTitle.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { PageTitleHeadingProps } from '@digigov/ui/app/PageTitle';
3
3
  export interface StepTitleInterface {
4
4
  title?: string;
5
+ backButton?: string;
5
6
  caption?: string;
6
7
  step?: string;
7
8
  }
package/Questions/Step/StepTitle.js CHANGED
@@ -29,18 +29,17 @@ var StepTitleHeading = function StepTitleHeading(props) {
29
29
 
30
30
  exports.StepTitleHeading = StepTitleHeading;
31
31
 
32
- var _ref2 = /*#__PURE__*/_react["default"].createElement(_BackButton["default"], null, "\u03A0\u03AF\u03C3\u03C9");
33
-
34
32
  var StepTitleBase = function StepTitleBase(_ref) {
35
33
  var caption = _ref.caption,
36
34
  step = _ref.step,
37
35
  title = _ref.title,
36
+ backButton = _ref.backButton,
38
37
  children = _ref.children;
39
38
 
40
39
  var _useTranslation = (0, _i18n.useTranslation)(),
41
40
  t = _useTranslation.t;
42
41
 
43
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _ref2, /*#__PURE__*/_react["default"].createElement(_PageTitle["default"], null, children || /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_PageTitle.PageTitleSection, null, /*#__PURE__*/_react["default"].createElement(_PageTitle.PageTitleCaption, null, caption && t(caption)), step && /*#__PURE__*/_react["default"].createElement(_PageTitle.PageTitleCaption, null, step)), /*#__PURE__*/_react["default"].createElement(StepTitleHeading, null, title && t(title)))));
42
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_BackButton["default"], null, backButton || t('back.button')), /*#__PURE__*/_react["default"].createElement(_PageTitle["default"], null, children || /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_PageTitle.PageTitleSection, null, /*#__PURE__*/_react["default"].createElement(_PageTitle.PageTitleCaption, null, caption && t(caption)), step && /*#__PURE__*/_react["default"].createElement(_PageTitle.PageTitleCaption, null, step)), /*#__PURE__*/_react["default"].createElement(StepTitleHeading, null, title && t(title)))));
44
43
  };
45
44
  /**
46
45
  * The StepTitle component accepts a title, a caption and a step indicator
@@ -54,9 +53,11 @@ var StepTitle = function StepTitle(props) {
54
53
  var _useContext = (0, _react.useContext)(_StepContext.StepContext),
55
54
  caption = _useContext.caption,
56
55
  title = _useContext.title,
57
- step = _useContext.step;
56
+ step = _useContext.step,
57
+ backButton = _useContext.backButton;
58
58
 
59
59
  return /*#__PURE__*/_react["default"].createElement(StepTitleBase, {
60
+ backButton: backButton,
60
61
  caption: caption,
61
62
  step: step,
62
63
  title: title
package/Questions/Step/types.d.ts CHANGED
@@ -16,6 +16,7 @@ export interface StepInterface {
16
16
  title?: string;
17
17
  description?: string;
18
18
  caption?: string;
19
+ backButton?: string;
19
20
  step?: string;
20
21
  fields?: any;
21
22
  initial?: any;
package/Questions/__stories__/Default.js CHANGED
@@ -35,6 +35,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
35
35
  var steps = [{
36
36
  name: 'age',
37
37
  title: 'What is your age?',
38
+ backButton: 'Back',
38
39
  fields: [{
39
40
  key: 'age',
40
41
  type: 'int',
@@ -46,6 +47,7 @@ var steps = [{
46
47
  }, {
47
48
  name: 'citizen-underage',
48
49
  title: 'Are you a student?',
50
+ backButton: 'Back',
49
51
  fields: [{
50
52
  key: 'citizen-underage-student',
51
53
  type: 'radio',
@@ -65,6 +67,7 @@ var steps = [{
65
67
  }, {
66
68
  name: 'citizen-adult',
67
69
  title: 'Are you currently employed?',
70
+ backButton: 'Back',
68
71
  fields: [{
69
72
  key: 'citizen-adult-employed',
70
73
  type: 'radio',
@@ -107,7 +110,9 @@ var _ref3 = /*#__PURE__*/_react["default"].createElement(_Questions.Step, {
107
110
 
108
111
  var _ref4 = /*#__PURE__*/_react["default"].createElement(_Questions.Step, {
109
112
  name: "citizen-adult"
110
- }, /*#__PURE__*/_react["default"].createElement(_Questions.StepTitle, null), /*#__PURE__*/_react["default"].createElement(_Questions.StepForm, {
113
+ }, /*#__PURE__*/_react["default"].createElement(_Questions.StepTitle, {
114
+ backButton: "\u03A0\u03AF\u03C3\u03C9"
115
+ }), /*#__PURE__*/_react["default"].createElement(_Questions.StepForm, {
111
116
  submitButton: true
112
117
  }, /*#__PURE__*/_react["default"].createElement(_form.Field, {
113
118
  key: "citizen-adult-employed",
package/es/FormBuilder/FormBuilder.js CHANGED
@@ -56,7 +56,8 @@ export var FormBase = /*#__PURE__*/React.forwardRef(function FormBase(_ref, ref)
56
56
  clearErrors: form.clearErrors,
57
57
  getValues: form.getValues,
58
58
  unregister: form.unregister,
59
- componentRegistry: componentRegistry
59
+ componentRegistry: componentRegistry,
60
+ setError: form.setError
60
61
  };
61
62
  return /*#__PURE__*/React.createElement(FormContext.Provider, {
62
63
  value: ctx
package/es/Questions/Step/StepTitle.js CHANGED
@@ -6,19 +6,17 @@ import { useTranslation } from '@digigov/ui/app/i18n';
6
6
  export var StepTitleHeading = function StepTitleHeading(props) {
7
7
  return /*#__PURE__*/React.createElement(PageTitleHeading, null, props.children);
8
8
  };
9
-
10
- var _ref2 = /*#__PURE__*/React.createElement(BackButton, null, "\u03A0\u03AF\u03C3\u03C9");
11
-
12
9
  export var StepTitleBase = function StepTitleBase(_ref) {
13
10
  var caption = _ref.caption,
14
11
  step = _ref.step,
15
12
  title = _ref.title,
13
+ backButton = _ref.backButton,
16
14
  children = _ref.children;
17
15
 
18
16
  var _useTranslation = useTranslation(),
19
17
  t = _useTranslation.t;
20
18
 
21
- return /*#__PURE__*/React.createElement(React.Fragment, null, _ref2, /*#__PURE__*/React.createElement(PageTitle, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PageTitleSection, null, /*#__PURE__*/React.createElement(PageTitleCaption, null, caption && t(caption)), step && /*#__PURE__*/React.createElement(PageTitleCaption, null, step)), /*#__PURE__*/React.createElement(StepTitleHeading, null, title && t(title)))));
19
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BackButton, null, backButton || t('back.button')), /*#__PURE__*/React.createElement(PageTitle, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PageTitleSection, null, /*#__PURE__*/React.createElement(PageTitleCaption, null, caption && t(caption)), step && /*#__PURE__*/React.createElement(PageTitleCaption, null, step)), /*#__PURE__*/React.createElement(StepTitleHeading, null, title && t(title)))));
22
20
  };
23
21
  /**
24
22
  * The StepTitle component accepts a title, a caption and a step indicator
@@ -29,9 +27,11 @@ export var StepTitle = function StepTitle(props) {
29
27
  var _useContext = useContext(StepContext),
30
28
  caption = _useContext.caption,
31
29
  title = _useContext.title,
32
- step = _useContext.step;
30
+ step = _useContext.step,
31
+ backButton = _useContext.backButton;
33
32
 
34
33
  return /*#__PURE__*/React.createElement(StepTitleBase, {
34
+ backButton: backButton,
35
35
  caption: caption,
36
36
  step: step,
37
37
  title: title
package/es/Questions/__stories__/Default.js CHANGED
@@ -10,6 +10,7 @@ import { Field } from '@digigov/form';
10
10
  var steps = [{
11
11
  name: 'age',
12
12
  title: 'What is your age?',
13
+ backButton: 'Back',
13
14
  fields: [{
14
15
  key: 'age',
15
16
  type: 'int',
@@ -21,6 +22,7 @@ var steps = [{
21
22
  }, {
22
23
  name: 'citizen-underage',
23
24
  title: 'Are you a student?',
25
+ backButton: 'Back',
24
26
  fields: [{
25
27
  key: 'citizen-underage-student',
26
28
  type: 'radio',
@@ -40,6 +42,7 @@ var steps = [{
40
42
  }, {
41
43
  name: 'citizen-adult',
42
44
  title: 'Are you currently employed?',
45
+ backButton: 'Back',
43
46
  fields: [{
44
47
  key: 'citizen-adult-employed',
45
48
  type: 'radio',
@@ -82,7 +85,9 @@ var _ref3 = /*#__PURE__*/React.createElement(Step, {
82
85
 
83
86
  var _ref4 = /*#__PURE__*/React.createElement(Step, {
84
87
  name: "citizen-adult"
85
- }, /*#__PURE__*/React.createElement(StepTitle, null), /*#__PURE__*/React.createElement(StepForm, {
88
+ }, /*#__PURE__*/React.createElement(StepTitle, {
89
+ backButton: "\u03A0\u03AF\u03C3\u03C9"
90
+ }), /*#__PURE__*/React.createElement(StepForm, {
86
91
  submitButton: true
87
92
  }, /*#__PURE__*/React.createElement(Field, {
88
93
  key: "citizen-adult-employed",
package/es/inputs/DateInput/index.js CHANGED
@@ -123,9 +123,10 @@ export var DateInput = function DateInput(_ref2) {
123
123
  value: date.day,
124
124
  width: 2,
125
125
  name: "".concat(name, "-day"),
126
- maxlength: "2",
126
+ maxLength: "2",
127
127
  disabled: props.disabled,
128
- "aria-required": props['aria-required']
128
+ "aria-required": props['aria-required'],
129
+ error: !date.day ? props.error : false
129
130
  }), /*#__PURE__*/React.createElement(DatePart, {
130
131
  label: t('form.label.month'),
131
132
  onChange: date.setMonth,
@@ -135,18 +136,20 @@ export var DateInput = function DateInput(_ref2) {
135
136
  value: date.month,
136
137
  width: 2,
137
138
  name: "".concat(props.name, "-month"),
138
- maxlength: "2",
139
+ maxLength: "2",
139
140
  disabled: props.disabled,
140
- "aria-required": props['aria-required']
141
+ "aria-required": props['aria-required'],
142
+ error: !date.month ? props.error : false
141
143
  }), /*#__PURE__*/React.createElement(DatePart, {
142
144
  label: t('form.label.year'),
143
145
  onChange: date.setYear,
144
146
  value: date.year,
145
147
  width: 4,
146
148
  name: "".concat(props.name, "-year"),
147
- maxlength: "4",
149
+ maxLength: "4",
148
150
  disabled: props.disabled,
149
- "aria-required": props['aria-required']
151
+ "aria-required": props['aria-required'],
152
+ error: !date.year ? props.error : false
150
153
  }));
151
154
  };
152
155
  export default DateInput;
package/es/inputs/OtpInput/index.js CHANGED
@@ -160,7 +160,8 @@ export var OtpInput = function OtpInput(_ref2) {
160
160
  return otp.inputOnKeyDown(e, idx);
161
161
  },
162
162
  onFocus: otp.inputOnFocus,
163
- onPaste: otp.handleOnPaste
163
+ onPaste: otp.handleOnPaste,
164
+ error: !digit ? props.error : false
164
165
  });
165
166
  }));
166
167
  };
package/esm/FormBuilder/FormBuilder.js CHANGED
@@ -56,7 +56,8 @@ export var FormBase = /*#__PURE__*/React.forwardRef(function FormBase(_ref, ref)
56
56
  clearErrors: form.clearErrors,
57
57
  getValues: form.getValues,
58
58
  unregister: form.unregister,
59
- componentRegistry: componentRegistry
59
+ componentRegistry: componentRegistry,
60
+ setError: form.setError
60
61
  };
61
62
  return /*#__PURE__*/React.createElement(FormContext.Provider, {
62
63
  value: ctx
package/esm/Questions/Step/StepTitle.js CHANGED
@@ -6,19 +6,17 @@ import { useTranslation } from '@digigov/ui/app/i18n';
6
6
  export var StepTitleHeading = function StepTitleHeading(props) {
7
7
  return /*#__PURE__*/React.createElement(PageTitleHeading, null, props.children);
8
8
  };
9
-
10
- var _ref2 = /*#__PURE__*/React.createElement(BackButton, null, "\u03A0\u03AF\u03C3\u03C9");
11
-
12
9
  export var StepTitleBase = function StepTitleBase(_ref) {
13
10
  var caption = _ref.caption,
14
11
  step = _ref.step,
15
12
  title = _ref.title,
13
+ backButton = _ref.backButton,
16
14
  children = _ref.children;
17
15
 
18
16
  var _useTranslation = useTranslation(),
19
17
  t = _useTranslation.t;
20
18
 
21
- return /*#__PURE__*/React.createElement(React.Fragment, null, _ref2, /*#__PURE__*/React.createElement(PageTitle, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PageTitleSection, null, /*#__PURE__*/React.createElement(PageTitleCaption, null, caption && t(caption)), step && /*#__PURE__*/React.createElement(PageTitleCaption, null, step)), /*#__PURE__*/React.createElement(StepTitleHeading, null, title && t(title)))));
19
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BackButton, null, backButton || t('back.button')), /*#__PURE__*/React.createElement(PageTitle, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PageTitleSection, null, /*#__PURE__*/React.createElement(PageTitleCaption, null, caption && t(caption)), step && /*#__PURE__*/React.createElement(PageTitleCaption, null, step)), /*#__PURE__*/React.createElement(StepTitleHeading, null, title && t(title)))));
22
20
  };
23
21
  /**
24
22
  * The StepTitle component accepts a title, a caption and a step indicator
@@ -29,9 +27,11 @@ export var StepTitle = function StepTitle(props) {
29
27
  var _useContext = useContext(StepContext),
30
28
  caption = _useContext.caption,
31
29
  title = _useContext.title,
32
- step = _useContext.step;
30
+ step = _useContext.step,
31
+ backButton = _useContext.backButton;
33
32
 
34
33
  return /*#__PURE__*/React.createElement(StepTitleBase, {
34
+ backButton: backButton,
35
35
  caption: caption,
36
36
  step: step,
37
37
  title: title
package/esm/Questions/__stories__/Default.js CHANGED
@@ -10,6 +10,7 @@ import { Field } from '@digigov/form';
10
10
  var steps = [{
11
11
  name: 'age',
12
12
  title: 'What is your age?',
13
+ backButton: 'Back',
13
14
  fields: [{
14
15
  key: 'age',
15
16
  type: 'int',
@@ -21,6 +22,7 @@ var steps = [{
21
22
  }, {
22
23
  name: 'citizen-underage',
23
24
  title: 'Are you a student?',
25
+ backButton: 'Back',
24
26
  fields: [{
25
27
  key: 'citizen-underage-student',
26
28
  type: 'radio',
@@ -40,6 +42,7 @@ var steps = [{
40
42
  }, {
41
43
  name: 'citizen-adult',
42
44
  title: 'Are you currently employed?',
45
+ backButton: 'Back',
43
46
  fields: [{
44
47
  key: 'citizen-adult-employed',
45
48
  type: 'radio',
@@ -82,7 +85,9 @@ var _ref3 = /*#__PURE__*/React.createElement(Step, {
82
85
 
83
86
  var _ref4 = /*#__PURE__*/React.createElement(Step, {
84
87
  name: "citizen-adult"
85
- }, /*#__PURE__*/React.createElement(StepTitle, null), /*#__PURE__*/React.createElement(StepForm, {
88
+ }, /*#__PURE__*/React.createElement(StepTitle, {
89
+ backButton: "\u03A0\u03AF\u03C3\u03C9"
90
+ }), /*#__PURE__*/React.createElement(StepForm, {
86
91
  submitButton: true
87
92
  }, /*#__PURE__*/React.createElement(Field, {
88
93
  key: "citizen-adult-employed",
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license Digigov v0.11.0
1
+ /** @license Digigov v0.12.0
2
2
  *
3
3
  * This source code is licensed under the BSD-2-Clause license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/esm/inputs/DateInput/index.js CHANGED
@@ -123,9 +123,10 @@ export var DateInput = function DateInput(_ref2) {
123
123
  value: date.day,
124
124
  width: 2,
125
125
  name: "".concat(name, "-day"),
126
- maxlength: "2",
126
+ maxLength: "2",
127
127
  disabled: props.disabled,
128
- "aria-required": props['aria-required']
128
+ "aria-required": props['aria-required'],
129
+ error: !date.day ? props.error : false
129
130
  }), /*#__PURE__*/React.createElement(DatePart, {
130
131
  label: t('form.label.month'),
131
132
  onChange: date.setMonth,
@@ -135,18 +136,20 @@ export var DateInput = function DateInput(_ref2) {
135
136
  value: date.month,
136
137
  width: 2,
137
138
  name: "".concat(props.name, "-month"),
138
- maxlength: "2",
139
+ maxLength: "2",
139
140
  disabled: props.disabled,
140
- "aria-required": props['aria-required']
141
+ "aria-required": props['aria-required'],
142
+ error: !date.month ? props.error : false
141
143
  }), /*#__PURE__*/React.createElement(DatePart, {
142
144
  label: t('form.label.year'),
143
145
  onChange: date.setYear,
144
146
  value: date.year,
145
147
  width: 4,
146
148
  name: "".concat(props.name, "-year"),
147
- maxlength: "4",
149
+ maxLength: "4",
148
150
  disabled: props.disabled,
149
- "aria-required": props['aria-required']
151
+ "aria-required": props['aria-required'],
152
+ error: !date.year ? props.error : false
150
153
  }));
151
154
  };
152
155
  export default DateInput;
package/esm/inputs/OtpInput/index.js CHANGED
@@ -160,7 +160,8 @@ export var OtpInput = function OtpInput(_ref2) {
160
160
  return otp.inputOnKeyDown(e, idx);
161
161
  },
162
162
  onFocus: otp.inputOnFocus,
163
- onPaste: otp.handleOnPaste
163
+ onPaste: otp.handleOnPaste,
164
+ error: !digit ? props.error : false
164
165
  });
165
166
  }));
166
167
  };
package/inputs/DateInput/index.js CHANGED
@@ -146,9 +146,10 @@ var DateInput = function DateInput(_ref2) {
146
146
  value: date.day,
147
147
  width: 2,
148
148
  name: "".concat(name, "-day"),
149
- maxlength: "2",
149
+ maxLength: "2",
150
150
  disabled: props.disabled,
151
- "aria-required": props['aria-required']
151
+ "aria-required": props['aria-required'],
152
+ error: !date.day ? props.error : false
152
153
  }), /*#__PURE__*/_react["default"].createElement(DatePart, {
153
154
  label: t('form.label.month'),
154
155
  onChange: date.setMonth,
@@ -158,18 +159,20 @@ var DateInput = function DateInput(_ref2) {
158
159
  value: date.month,
159
160
  width: 2,
160
161
  name: "".concat(props.name, "-month"),
161
- maxlength: "2",
162
+ maxLength: "2",
162
163
  disabled: props.disabled,
163
- "aria-required": props['aria-required']
164
+ "aria-required": props['aria-required'],
165
+ error: !date.month ? props.error : false
164
166
  }), /*#__PURE__*/_react["default"].createElement(DatePart, {
165
167
  label: t('form.label.year'),
166
168
  onChange: date.setYear,
167
169
  value: date.year,
168
170
  width: 4,
169
171
  name: "".concat(props.name, "-year"),
170
- maxlength: "4",
172
+ maxLength: "4",
171
173
  disabled: props.disabled,
172
- "aria-required": props['aria-required']
174
+ "aria-required": props['aria-required'],
175
+ error: !date.year ? props.error : false
173
176
  }));
174
177
  };
175
178
 
package/inputs/OtpInput/index.js CHANGED
@@ -182,7 +182,8 @@ var OtpInput = function OtpInput(_ref2) {
182
182
  return otp.inputOnKeyDown(e, idx);
183
183
  },
184
184
  onFocus: otp.inputOnFocus,
185
- onPaste: otp.handleOnPaste
185
+ onPaste: otp.handleOnPaste,
186
+ error: !digit ? props.error : false
186
187
  });
187
188
  }));
188
189
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digigov/form",
3
- "version": "0.11.0",
3
+ "version": "0.12.0",
4
4
  "description": "@digigov form builder",
5
5
  "author": "GRNET Developers <devs@lists.grnet.gr>",
6
6
  "license": "BSD-2-Clause",
@@ -19,9 +19,9 @@
19
19
  "publint": "0.1.8"
20
20
  },
21
21
  "peerDependencies": {
22
- "@digigov/ui": "0.32.0",
23
- "@digigov/react-core": "0.23.0",
24
- "@digigov/react-extensions": "0.21.2",
22
+ "@digigov/ui": "0.32.2",
23
+ "@digigov/react-core": "0.23.1",
24
+ "@digigov/react-extensions": "0.21.3",
25
25
  "clsx": "1.1.1",
26
26
  "react": "^16.8.0 || ^17.0.0",
27
27
  "react-dom": "^16.8.0 || ^17.0.0"
package/src/FormBuilder/FormBuilder.tsx CHANGED
@@ -61,6 +61,7 @@ export const FormBase = React.forwardRef(function FormBase(
61
61
  getValues: form.getValues,
62
62
  unregister: form.unregister,
63
63
  componentRegistry,
64
+ setError: form.setError,
64
65
  };
65
66
  return (
66
67
  <FormContext.Provider value={ctx}>
package/src/Questions/Step/StepTitle.tsx CHANGED
@@ -11,6 +11,7 @@ import { useTranslation } from '@digigov/ui/app/i18n';
11
11
 
12
12
  export interface StepTitleInterface {
13
13
  title?: string;
14
+ backButton?: string;
14
15
  caption?: string;
15
16
  step?: string;
16
17
  }
@@ -23,12 +24,13 @@ export const StepTitleBase: React.FC<StepTitleInterface> = ({
23
24
  caption,
24
25
  step,
25
26
  title,
27
+ backButton,
26
28
  children,
27
29
  }): React.ReactElement => {
28
30
  const { t } = useTranslation();
29
31
  return (
30
32
  <>
31
- <BackButton>Πίσω</BackButton>
33
+ <BackButton>{backButton || t('back.button')}</BackButton>
32
34
  <PageTitle>
33
35
  {children || (
34
36
  <>
@@ -49,9 +51,9 @@ export const StepTitleBase: React.FC<StepTitleInterface> = ({
49
51
  * about the Step asked to the User
50
52
  */
51
53
  export const StepTitle: React.FC<StepTitleInterface> = (props) => {
52
- const { caption, title, step } = useContext(StepContext);
54
+ const { caption, title, step, backButton } = useContext(StepContext);
53
55
  return (
54
- <StepTitleBase caption={caption} step={step} title={title}>
56
+ <StepTitleBase backButton={backButton} caption={caption} step={step} title={title}>
55
57
  {props.children}
56
58
  </StepTitleBase>
57
59
  );
package/src/Questions/Step/types.tsx CHANGED
@@ -17,6 +17,7 @@ export interface StepInterface {
17
17
  title?: string;
18
18
  description?: string;
19
19
  caption?: string;
20
+ backButton?: string;
20
21
  step?: string;
21
22
  fields?: any;
22
23
  initial?: any;
package/src/Questions/__stories__/Default.tsx CHANGED
@@ -17,6 +17,7 @@ const steps = [
17
17
  {
18
18
  name: 'age',
19
19
  title: 'What is your age?',
20
+ backButton: 'Back',
20
21
  fields: [
21
22
  {
22
23
  key: 'age',
@@ -31,6 +32,7 @@ const steps = [
31
32
  {
32
33
  name: 'citizen-underage',
33
34
  title: 'Are you a student?',
35
+ backButton: 'Back',
34
36
  fields: [
35
37
  {
36
38
  key: 'citizen-underage-student',
@@ -52,6 +54,7 @@ const steps = [
52
54
  {
53
55
  name: 'citizen-adult',
54
56
  title: 'Are you currently employed?',
57
+ backButton: 'Back',
55
58
  fields: [
56
59
  {
57
60
  key: 'citizen-adult-employed',
@@ -109,7 +112,7 @@ export function Default() {
109
112
  </StepForm>
110
113
  </Step>
111
114
  <Step name="citizen-adult">
112
- <StepTitle />
115
+ <StepTitle backButton="Πίσω" />
113
116
  <StepForm submitButton={true}>
114
117
  <Field
115
118
  key="citizen-adult-employed"
package/src/inputs/DateInput/index.tsx CHANGED
@@ -99,9 +99,10 @@ export const DateInput = function DateInput({ name, type, ...props }) {
99
99
  value={date.day}
100
100
  width={2}
101
101
  name={`${name}-day`}
102
- maxlength="2"
102
+ maxLength="2"
103
103
  disabled={props.disabled}
104
104
  aria-required={props['aria-required']}
105
+ error={!date.day ? props.error : false}
105
106
  />
106
107
  <DatePart
107
108
  label={t('form.label.month')}
@@ -110,9 +111,10 @@ export const DateInput = function DateInput({ name, type, ...props }) {
110
111
  value={date.month}
111
112
  width={2}
112
113
  name={`${props.name}-month`}
113
- maxlength="2"
114
+ maxLength="2"
114
115
  disabled={props.disabled}
115
116
  aria-required={props['aria-required']}
117
+ error={!date.month ? props.error : false}
116
118
  />
117
119
  <DatePart
118
120
  label={t('form.label.year')}
@@ -120,9 +122,10 @@ export const DateInput = function DateInput({ name, type, ...props }) {
120
122
  value={date.year}
121
123
  width={4}
122
124
  name={`${props.name}-year`}
123
- maxlength="4"
125
+ maxLength="4"
124
126
  disabled={props.disabled}
125
127
  aria-required={props['aria-required']}
128
+ error={!date.year ? props.error : false}
126
129
  />
127
130
  </DateInputContainer>
128
131
  );
package/src/inputs/OtpInput/index.tsx CHANGED
@@ -119,6 +119,7 @@ function useOtp(onChange, maxLength) {
119
119
  },
120
120
  []
121
121
  );
122
+
122
123
  return {
123
124
  otpValues,
124
125
  inputOnChange,
@@ -134,6 +135,7 @@ const SingleCharacterInputItemPart = ({ ...props }) => {
134
135
 
135
136
  export const OtpInput = function OtpInput({ name, maxLength = 6, ...props }) {
136
137
  const otp = useOtp(props.onChange, maxLength);
138
+
137
139
  return (
138
140
  <SingleCharacterInputContainer>
139
141
  {otp.otpValues.map((digit, idx) => (
@@ -152,6 +154,7 @@ export const OtpInput = function OtpInput({ name, maxLength = 6, ...props }) {
152
154
  onKeyDown={(e) => otp.inputOnKeyDown(e, idx)}
153
155
  onFocus={otp.inputOnFocus}
154
156
  onPaste={otp.handleOnPaste}
157
+ error={!digit ? props.error : false}
155
158
  />
156
159
  ))}
157
160
  </SingleCharacterInputContainer>