@digigov/form 0.12.6 → 0.13.0

package/inputs/AutoComplete/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ControlledFieldProps } from '@digigov/form/Field/types';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
 import { AutoCompleteProps as UIAutoCompleteProps } from '@digigov/ui/admin/AutoComplete';
+import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import { ControlledFieldProps } from '@digigov/form/Field/types';
 export interface AutoCompleteExtra extends Omit<UIAutoCompleteProps, 'source' | 'id' | 'templates' | 'defaultValue' | 'onConfirm' | 'dropdownArrow'> {
     options: Array<FieldOptionProps>;
 }

package/inputs/AutoComplete/index.js

@@ -15,10 +15,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactCore = require("@digigov/react-core");
-
 var _AutoComplete = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete"));
 
+var _reactCore = require("@digigov/react-core");
+
 var _excluded = ["name", "extra", "onChange", "value"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/inputs/Checkboxes/Checkboxes.stories.d.ts

@@ -5,4 +5,6 @@ declare namespace _default {
 }
 export default _default;
 export * from "@digigov/form/inputs/Checkboxes/__stories__/Default";
+export * from "@digigov/form/inputs/Checkboxes/__stories__/WithDivider";
+export * from "@digigov/form/inputs/Checkboxes/__stories__/Conditional";
 import Checkboxes from "@digigov/form/inputs/Checkboxes";

package/inputs/Checkboxes/Checkboxes.stories.js

@@ -23,6 +23,34 @@ Object.keys(_Default).forEach(function (key) {
     }
   });
 });
+
+var _WithDivider = require("@digigov/form/inputs/Checkboxes/__stories__/WithDivider");
+
+Object.keys(_WithDivider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithDivider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithDivider[key];
+    }
+  });
+});
+
+var _Conditional = require("@digigov/form/inputs/Checkboxes/__stories__/Conditional");
+
+Object.keys(_Conditional).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Conditional[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Conditional[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov Form/inputs/Checkboxes',
   component: _Checkboxes["default"],

package/inputs/Checkboxes/Checkboxes.stories.playwright.json

@@ -64,6 +64,22 @@
           "title": "Focus and check using keyboard, click box and submit"
         }
       ]
+    },
+    "digigov-form-inputs-checkboxes--conditional": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>div:nth-child(1)>label>input"
+              }
+            }
+          ],
+          "id": "zpUjNzrqwtmW",
+          "title": "Checkboxes conditional action"
+        }
+      ]
     }
   }
 }

package/inputs/Checkboxes/__stories__/Conditional.d.ts

@@ -0,0 +1 @@
+export declare const Conditional: () => JSX.Element;

package/inputs/Checkboxes/__stories__/Conditional.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Conditional = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _form = _interopRequireWildcard(require("@digigov/form"));
+
+var _core = require("@digigov/ui/core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var fields = [{
+  key: 'landline',
+  type: 'phone_number',
+  label: {
+    secondary: 'Εισάγετε το νούμερο του σταθερού σας τηλεφώνου.'
+  },
+  enabled: false,
+  condition: {
+    auth_form: {
+      is: 'via_mobile_phone',
+      then: {
+        enabled: true,
+        required: true
+      }
+    }
+  }
+}, {
+  key: 'mobile_phone',
+  type: 'mobile_phone',
+  label: {
+    secondary: 'Εισάγετε το νούμερο του κινητού σας τηλεφώνου.'
+  },
+  enabled: false,
+  condition: {
+    auth_form: {
+      is: 'via_mobile_phone',
+      then: {
+        enabled: true,
+        required: true
+      }
+    }
+  }
+}, {
+  key: 'email',
+  type: 'email',
+  label: {
+    secondary: 'Εισάγετε την διεύθυνση του ηλεκτρονικού σας ταχυδρομείου.'
+  },
+  enabled: false,
+  condition: {
+    auth_form: {
+      is: 'via_email',
+      then: {
+        enabled: true,
+        required: true
+      }
+    }
+  }
+}, {
+  key: 'auth_form',
+  type: 'choice:multiple',
+  required: true,
+  label: {
+    primary: 'Επιλέξτε μέθοδο πιστοποίησης',
+    secondary: 'Για την ολοκλήρωση της δήλωσης σας, θα χρειαστεί επιπλέον πιστοποίηση. Θα σας στείλουμε ένα κωδικό μιας χρήσης είτε στο τηλέφωνο είτε στην ηλεκτρονική σας διεύθυνση.'
+  },
+  extra: {
+    options: [{
+      key: 'via_mobile_phone',
+      label: {
+        primary: 'Mέσω κινητού τηλεφώνου'
+      },
+      value: 'via_mobile_phone',
+      show: ['mobile_phone', 'landline']
+    }, {
+      key: 'via_email',
+      label: {
+        primary: 'Μέσω διεύθυνσης ηλεκτρονικού ταχυδρομείου (e-mail)'
+      },
+      value: 'via_email',
+      show: ['email']
+    }]
+  }
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_form.Field, {
+  key: "auth_form",
+  name: "auth_form"
+});
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var Conditional = function Conditional() {
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    },
+    fields: fields
+  }, _ref, _ref2);
+};
+
+exports.Conditional = Conditional;

package/inputs/Checkboxes/__stories__/WithDivider.d.ts

@@ -0,0 +1,2 @@
+export declare const WithDivider: () => JSX.Element;
+export default WithDivider;

package/inputs/Checkboxes/__stories__/WithDivider.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithDivider = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _form = _interopRequireWildcard(require("@digigov/form"));
+
+var _core = require("@digigov/ui/core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var WithDivider = function WithDivider() {
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form.Field, {
+    key: 'string',
+    name: "string",
+    type: "choice:multiple",
+    required: true,
+    label: {
+      primary: 'Πώς αισθάνεστε αυτή τη στιγμή;'
+    },
+    extra: {
+      options: [{
+        label: {
+          primary: 'Έχω συνάχι'
+        },
+        value: 'runny-nose'
+      }, {
+        label: {
+          primary: 'Έχω πυρετό'
+        },
+        value: 'fever'
+      }, {
+        label: {
+          primary: 'Αισθάνομαι κούραση'
+        },
+        value: 'fatigue',
+        divider: 'ή'
+      }]
+    }
+  }), _ref);
+};
+
+exports.WithDivider = WithDivider;
+var _default = WithDivider;
+exports["default"] = _default;

package/inputs/Checkboxes/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ControlledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import { ControlledFieldProps } from '@digigov/form/Field/types';
 export interface CheckboxesProps extends Omit<ControlledFieldProps, 'extra' | 'value'> {
     value?: string[];
     extra: {

package/inputs/Checkboxes/index.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,9 +11,13 @@ exports["default"] = exports.Checkboxes = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _i18n = require("@digigov/ui/app/i18n");
 
 var _Checkbox = _interopRequireDefault(require("@digigov/react-core/Checkbox"));
 
@@ -19,9 +25,16 @@ var _CheckboxItem = _interopRequireDefault(require("@digigov/react-core/Checkbox
 
 var _Hint = _interopRequireDefault(require("@digigov/react-core/Hint"));
 
-var _i18n = require("@digigov/ui/app/i18n");
+var _form = require("@digigov/form");
+
+var _reactCore = require("@digigov/react-core");
 
-var _excluded = ["name", "onChange", "value", "extra", "disabled"];
+var _excluded = ["name", "onChange", "value", "extra", "disabled"],
+    _excluded2 = ["label", "value", "show", "disabled", "selected"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var Checkboxes = function Checkboxes(_ref) {
   var name = _ref.name,
@@ -34,7 +47,7 @@ var Checkboxes = function Checkboxes(_ref) {
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   if (!value) value = [];
 
-  var handleChange = function handleChange(optionValue) {
+  var handleChange = function handleChange(optionValue, idx, show) {
     return function (evt) {
       var newValue;
 
@@ -48,6 +61,14 @@ var Checkboxes = function Checkboxes(_ref) {
         newValue = value.filter(function (val) {
           return val !== optionValue;
         });
+      }
+
+      if (show && show.length > 0) {
+        setChecked(function (items) {
+          return items.map(function (item, index) {
+            return index === idx ? !item : item;
+          });
+        });
       } // reset value to undefined instead of an empty array
       // so the error state mechanism can throw validation errors
 
@@ -60,17 +81,31 @@ var Checkboxes = function Checkboxes(_ref) {
   var _useTranslation = (0, _i18n.useTranslation)(),
       t = _useTranslation.t;
 
+  var _useState = (0, _react.useState)(Array(options.length).fill(false)),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      checked = _useState2[0],
+      setChecked = _useState2[1];
+
   return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
     className: className
-  }, options.map(function (option, key) {
-    return /*#__PURE__*/_react["default"].createElement(_CheckboxItem["default"], (0, _extends2["default"])({
+  }, options.map(function (_ref2, index) {
+    var _value;
+
+    var label = _ref2.label,
+        v = _ref2.value,
+        show = _ref2.show,
+        optionDisabled = _ref2.disabled,
+        selected = _ref2.selected,
+        option = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement(_CheckboxItem["default"], (0, _extends2["default"])({
+      key: "".concat(name, ".").concat(index),
       name: name,
-      disabled: disabled,
-      key: key // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      ,
-      checked: value.includes(option.value),
-      onChange: handleChange(option.value)
+      value: v,
+      disabled: disabled || optionDisabled,
+      checked: (_value = value) === null || _value === void 0 ? void 0 : _value.includes(v),
+      onChange: handleChange(v, index, show)
     }, option, (0, _extends2["default"])({}, props, {
       reset: undefined,
       defaultValue: undefined,
@@ -78,7 +113,12 @@ var Checkboxes = function Checkboxes(_ref) {
       required: undefined,
       'aria-describedby': undefined,
       type: 'checkbox'
-    })), option.label && option.label.primary && t(option.label.primary) || value, option.label && option.label.secondary && /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, t(option.label.secondary)));
+    })), label && label.primary && t(label.primary) || value, label && label.secondary && /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, t(label.secondary))), !!checked[index] && show && /*#__PURE__*/_react["default"].createElement(_reactCore.CheckboxConditional, null, show.map(function (fieldName) {
+      return /*#__PURE__*/_react["default"].createElement(_form.Field, {
+        name: fieldName,
+        key: fieldName
+      });
+    })), selected && selected());
   }));
 };
 

package/inputs/DateInput/index.js

@@ -19,12 +19,12 @@ var _dayjs = _interopRequireDefault(require("dayjs"));
 
 var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
 
+var _i18n = require("@digigov/ui/app/i18n");
+
 var _DateInputContainer = _interopRequireDefault(require("@digigov/react-core/DateInputContainer"));
 
 var _DateInputItem = _interopRequireDefault(require("@digigov/react-core/DateInputItem"));
 
-var _i18n = require("@digigov/ui/app/i18n");
-
 var _excluded = ["label"],
     _excluded2 = ["name", "type"];
 

package/inputs/FileInput/index.js

@@ -19,17 +19,17 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _FileUpload = _interopRequireDefault(require("@digigov/react-core/FileUpload"));
+var _i18n = require("@digigov/ui/app/i18n");
 
-var _FileUploadContainer = _interopRequireDefault(require("@digigov/react-core/FileUploadContainer"));
+var _Paragraph = _interopRequireDefault(require("@digigov/ui/typography/Paragraph"));
 
 var _Hint = _interopRequireDefault(require("@digigov/react-core/Hint"));
 
-var _i18n = require("@digigov/ui/app/i18n");
-
 var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
 
-var _Paragraph = _interopRequireDefault(require("@digigov/ui/typography/Paragraph"));
+var _FileUploadContainer = _interopRequireDefault(require("@digigov/react-core/FileUploadContainer"));
+
+var _FileUpload = _interopRequireDefault(require("@digigov/react-core/FileUpload"));
 
 var _excluded = ["name", "extra", "disabled", "reset", "onChange"];
 

package/inputs/Input/Input.stories.d.ts

@@ -12,4 +12,5 @@ export * from "@digigov/form/inputs/Input/__stories__/MobilePhone";
 export * from "@digigov/form/inputs/Input/__stories__/AFM";
 export * from "@digigov/form/inputs/Input/__stories__/IBAN";
 export * from "@digigov/form/inputs/Input/__stories__/PostalCode";
+export * from "@digigov/form/inputs/Input/__stories__/TextWithCharacterLimit";
 import Input from "@digigov/form/inputs/Input";

package/inputs/Input/Input.stories.js

@@ -121,6 +121,20 @@ Object.keys(_PostalCode).forEach(function (key) {
     }
   });
 });
+
+var _TextWithCharacterLimit = require("@digigov/form/inputs/Input/__stories__/TextWithCharacterLimit");
+
+Object.keys(_TextWithCharacterLimit).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TextWithCharacterLimit[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TextWithCharacterLimit[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov Form/inputs/Input',
   component: _Input["default"],

package/inputs/Input/__stories__/TextWithCharacterLimit.d.ts

@@ -0,0 +1,2 @@
+export declare const TextWithCharacterLimit: () => JSX.Element;
+export default TextWithCharacterLimit;

package/inputs/Input/__stories__/TextWithCharacterLimit.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TextWithCharacterLimit = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _form = _interopRequireWildcard(require("@digigov/form"));
+
+var _core = require("@digigov/ui/core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var TextWithCharacterLimit = function TextWithCharacterLimit() {
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form.Field, {
+    key: "text",
+    name: "text",
+    type: "text",
+    label: {
+      primary: 'Μπορείτε να δώσετε περισσότερες πληροφορίες;'
+    },
+    required: true,
+    extra: {
+      limit: {
+        min: 3,
+        max: 10
+      },
+      multiline: true
+    }
+  }), _ref);
+};
+
+exports.TextWithCharacterLimit = TextWithCharacterLimit;
+var _default = TextWithCharacterLimit;
+exports["default"] = _default;

package/inputs/Input/index.d.ts

@@ -6,6 +6,10 @@ export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
         multiline?: boolean;
         className?: string;
         rows?: any;
+        limit: {
+            min?: number;
+            max?: number;
+        };
     };
 }
 export declare const Input: React.ExoticComponent<InputProps>;

package/inputs/Input/index.js

@@ -13,11 +13,17 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
+var _TextInput = _interopRequireDefault(require("@digigov/react-core/TextInput"));
+
 var _TextArea = _interopRequireDefault(require("@digigov/react-core/TextArea"));
 
-var _TextInput = _interopRequireDefault(require("@digigov/react-core/TextInput"));
+var _reactCore = require("@digigov/react-core");
+
+var _reactHookForm = require("react-hook-form");
 
-var _excluded = ["name", "type", "extra"];
+var _i18n = require("@digigov/ui/app/i18n");
+
+var _excluded = ["name", "control", "type", "extra"];
 var TYPES_MAP = {
   string: 'text',
   "int": 'text',
@@ -27,14 +33,17 @@ var TYPES_MAP = {
 
 var Input = /*#__PURE__*/_react["default"].forwardRef(function WrappedInput(_ref, ref) {
   var name = _ref.name,
+      control = _ref.control,
       type = _ref.type,
       extra = _ref.extra,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
 
+  // eslint-disable-next-line prefer-const
   var _ref2 = extra || {},
       _ref2$multiline = _ref2.multiline,
       multiline = _ref2$multiline === void 0 ? false : _ref2$multiline,
-      rows = _ref2.rows;
+      rows = _ref2.rows,
+      limit = _ref2.limit;
 
   var _ref3 = extra || {},
       className = _ref3.className; // if enforced to multiline use true. Derive from type otherwise.
@@ -46,8 +55,16 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function WrappedInput(_ref
 
   var fieldType = TYPES_MAP[type || 'text'] || 'text';
 
+  var _useTranslation = (0, _i18n.useTranslation)(),
+      t = _useTranslation.t;
+
+  var currentValue = (0, _reactHookForm.useWatch)({
+    control: control,
+    name: name
+  });
+
   if (multiline === true) {
-    return /*#__PURE__*/_react["default"].createElement(_TextArea["default"], (0, _extends2["default"])({
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TextArea["default"], (0, _extends2["default"])({
       name: name,
       className: className,
       rows: rows,
@@ -56,7 +73,11 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function WrappedInput(_ref
       reset: undefined,
       required: undefined,
       type: fieldType
-    })));
+    }))), (limit === null || limit === void 0 ? void 0 : limit.max) && /*#__PURE__*/_react["default"].createElement(_reactCore.Hint, null, currentValue === undefined || (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) >= 0 && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) <= (limit === null || limit === void 0 ? void 0 : limit.max) ? /*#__PURE__*/_react["default"].createElement("span", null, t('form.info.text.you_have'), ' ', /*#__PURE__*/_react["default"].createElement("b", null, !currentValue ? limit.max : (limit === null || limit === void 0 ? void 0 : limit.max) - (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length)), ' ', currentValue && (limit === null || limit === void 0 ? void 0 : limit.max) - (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) === 1 ? "".concat(t('form.info.text.character')) : "".concat(t('form.info.text.characters')), ' ', t('form.info.text.remaining'), ".") : /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        color: '#b60202'
+      }
+    }, t('form.info.text.you_have'), ' ', /*#__PURE__*/_react["default"].createElement("b", null, currentValue && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) - (limit === null || limit === void 0 ? void 0 : limit.max)), ' ', (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) - (limit === null || limit === void 0 ? void 0 : limit.max) === 1 ? "".concat(t('form.info.text.character')) : "".concat(t('form.info.text.characters')), ' ', t('form.info.text.too_many'), ".")));
   } else {
     return /*#__PURE__*/_react["default"].createElement(_TextInput["default"], (0, _extends2["default"])({
       name: name,

package/inputs/Label/index.d.ts

@@ -3,8 +3,10 @@ import { FieldLabelProps } from '@digigov/form/types';
 export interface FieldOptionProps {
     label?: FieldLabelProps;
     value: string;
+    show?: string[];
     disabled?: boolean;
     selected?: () => React.FC;
+    divider?: string;
 }
 export interface LabelProps {
     primary?: string;

package/inputs/Label/index.js

@@ -9,10 +9,10 @@ exports["default"] = exports.Label = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Hint = _interopRequireDefault(require("@digigov/react-core/Hint"));
-
 var _LabelTitle = _interopRequireDefault(require("@digigov/react-core/LabelTitle"));
 
+var _Hint = _interopRequireDefault(require("@digigov/react-core/Hint"));
+
 var _i18n = require("@digigov/ui/app/i18n");
 
 var Label = function Label(_ref) {

package/inputs/Radio/Radio.stories.d.ts

@@ -5,4 +5,6 @@ declare namespace _default {
 }
 export default _default;
 export * from "@digigov/form/inputs/Radio/__stories__/Default";
+export * from "@digigov/form/inputs/Radio/__stories__/WithDivider";
+export * from "@digigov/form/inputs/Radio/__stories__/Conditional";
 import Radio from "@digigov/form/inputs/Radio";