@digigov/form 0.8.6 → 0.9.0-alpha

package/MultiplicityField/MultiplicityField.stories.d.ts

@@ -8,4 +8,5 @@ export * from "@digigov/form/MultiplicityField/__stories__/WithMinLength";
 export * from "@digigov/form/MultiplicityField/__stories__/WithMaxLength";
 export * from "@digigov/form/MultiplicityField/__stories__/WithMinAndMaxLength";
 export * from "@digigov/form/MultiplicityField/__stories__/WithExactLength";
+export * from "@digigov/form/MultiplicityField/__stories__/PreviewDisplay";
 import MultiplicityField from "@digigov/form/MultiplicityField";

package/MultiplicityField/MultiplicityField.stories.js

@@ -79,6 +79,20 @@ Object.keys(_WithExactLength).forEach(function (key) {
     }
   });
 });
+
+var _PreviewDisplay = require("@digigov/form/MultiplicityField/__stories__/PreviewDisplay");
+
+Object.keys(_PreviewDisplay).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PreviewDisplay[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _PreviewDisplay[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov Form/MultiplicityField',
   component: _MultiplicityField["default"]

package/MultiplicityField/__stories__/PreviewDisplay.d.ts

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

package/MultiplicityField/__stories__/PreviewDisplay.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewDisplay = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Basic = _interopRequireWildcard(require("@digigov/ui/layouts/Basic/"));
+
+var _SummaryList = _interopRequireWildcard(require("@digigov/ui/core/SummaryList"));
+
+var _ui = require("@digigov/ui");
+
+var _Footer = _interopRequireDefault(require("@digigov/ui/govgr/Footer"));
+
+var _Logo = _interopRequireDefault(require("@digigov/ui/govgr/Logo"));
+
+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 = [{
+  name: 'Όνομα',
+  value: 'ΜΑΡΙΟΣ'
+}, {
+  name: 'Επώνυμο',
+  value: 'ΜΕΝΕΞΕΣ'
+}, {
+  name: 'Όνομα Πατέρα',
+  value: 'ΝΙΚΟΣ'
+}, {
+  name: 'Όνομα Μητέρα',
+  value: 'ΜΑΡΙΑ'
+}, {
+  name: 'Α.Φ.Μ',
+  value: '12030454'
+}, {
+  name: 'Τηλέφωνο',
+  value: '6984386756'
+}, {
+  name: 'Ημερομηνία Γέννησης',
+  value: '22/03/78'
+}, {
+  name: 'Α.Δ.Τ',
+  value: 'Ψ456789'
+}, {
+  name: 'Τύπος A.Δ.Τ',
+  value: 'ΚΑΡΤΑ'
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_ui.Header, null, /*#__PURE__*/_react["default"].createElement(_ui.HeaderSection, null, /*#__PURE__*/_react["default"].createElement(_ui.HeaderContent, null, /*#__PURE__*/_react["default"].createElement(_Logo["default"], {
+  href: "#"
+}), /*#__PURE__*/_react["default"].createElement(_ui.HeaderTitle, null, "\u03A0\u03C1\u03CC\u03C4\u03C5\u03C0\u03BF-\u0391\u03BD\u03B1\u03C6\u03BF\u03C1\u03AC\u03C2"))));
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_ui.Caption, null, "\u03A8\u03B7\u03C6\u03B9\u03B1\u03BA\u03AE \u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7 \u03B9\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03BF\u03CD \u03C3\u03C5\u03BC\u03C6\u03C9\u03BD\u03B7\u03C4\u03B9\u03BA\u03BF\u03CD");
+
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_ui.Title, null, "\u03A0\u03C1\u03BF\u03B5\u03C0\u03B9\u03C3\u03BA\u03CC\u03C0\u03B7\u03C3\u03B7");
+
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_ui.Paragraph, null, /*#__PURE__*/_react["default"].createElement(_ui.Paragraph, null, "\u03A0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03B5\u03BC\u03C6\u03B1\u03BD\u03AF\u03B6\u03BF\u03BD\u03C4\u03B1\u03B9 \u03BF\u03B9 \u03C3\u03C5\u03BD\u03C5\u03C0\u03BF\u03B3\u03C1\u03AC\u03C6\u03BF\u03BD\u03C4\u03B5\u03C2 \u03C4\u03BF\u03C5 \u03B9\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03BF\u03CD \u03C3\u03C5\u03BC\u03C6\u03C9\u03BD\u03B7\u03C4\u03B9\u03BA\u03BF\u03CD"));
+
+var _ref5 = /*#__PURE__*/_react["default"].createElement(_ui.CardHeading, null, "\u03A3\u03C5\u03BD\u03C5\u03C0\u03BF\u03B3\u03C1\u03AC\u03C6\u03BF\u03BD\u03C4\u03B1\u03C2 1");
+
+var _ref6 = /*#__PURE__*/_react["default"].createElement(_ui.CardHeading, null, "\u03A3\u03C5\u03BD\u03C5\u03C0\u03BF\u03B3\u03C1\u03AC\u03C6\u03BF\u03BD\u03C4\u03B1\u03C2 2");
+
+var _ref7 = /*#__PURE__*/_react["default"].createElement(_ui.Card, {
+  variant: "border",
+  borderColor: "dark"
+}, /*#__PURE__*/_react["default"].createElement(_ui.CardHeading, null, "\u03A3\u03C5\u03BD\u03C5\u03C0\u03BF\u03B3\u03C1\u03AC\u03C6\u03BF\u03BD\u03C4\u03B1\u03C2 3"), /*#__PURE__*/_react["default"].createElement(_ui.CardText, null, /*#__PURE__*/_react["default"].createElement(_SummaryList["default"], null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u039C\u03AC\u03C1\u03B9\u03BF\u03C2")))));
+
+var _ref8 = /*#__PURE__*/_react["default"].createElement(_ui.Title, {
+  size: "md"
+}, "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u0394\u03AE\u03BB\u03C9\u03C3\u03B7\u03C2");
+
+var _ref9 = /*#__PURE__*/_react["default"].createElement(_SummaryList["default"], null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u039C\u0391\u03A1\u0399\u039F\u03A3")), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u0395\u03C0\u03CE\u03BD\u03C5\u03BC\u03BF"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u039C\u0395\u039D\u0395\u039E\u0395\u03A3")), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u0397\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "15/12/1988")), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u03A3\u03C7\u03BF\u03BB\u03B5\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, /*#__PURE__*/_react["default"].createElement(_ui.List, {
+  marginBottom: 0,
+  marginTop: 0,
+  listStyle: "bullet"
+}, /*#__PURE__*/_react["default"].createElement(_ui.ListItem, null, "2o \u0397\u039C\u0395\u03A1\u0397\u03A3\u0399\u039F \u0393\u0395\u039D\u0399\u039A\u039F \u039B\u03A5\u039A\u0395\u0399\u039F \u039E\u0391\u039D\u0398\u0397\u03A3"), /*#__PURE__*/_react["default"].createElement(_ui.ListItem, null, "2o \u0397\u039C\u0395\u03A1\u0397\u03A3\u0399\u039F \u0393\u0395\u039D\u0399\u039A\u039F \u039B\u03A5\u039A\u0395\u0399\u039F \u039E\u0391\u039D\u0398\u0397\u03A3"), /*#__PURE__*/_react["default"].createElement(_ui.ListItem, null, "2o \u0397\u039C\u0395\u03A1\u0397\u03A3\u0399\u039F \u0393\u0395\u039D\u0399\u039A\u039F \u039B\u03A5\u039A\u0395\u0399\u039F \u039E\u0391\u039D\u0398\u0397\u03A3"), /*#__PURE__*/_react["default"].createElement(_ui.ListItem, null, "15o \u0397\u039C\u0395\u03A1\u0397\u03A3\u0399\u039F \u0393\u0395\u039D\u0399\u039A\u039F \u0393\u03A5\u039C\u039D\u0391\u03A3\u0399\u039F \u0391\u0398\u0397\u039D\u03A9\u039D")))), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u039C\u03AC\u03C1\u03B9\u03BF\u03C2")));
+
+var _ref10 = /*#__PURE__*/_react["default"].createElement(_Footer["default"], null);
+
+var PreviewDisplay = function PreviewDisplay() {
+  return /*#__PURE__*/_react["default"].createElement(_Basic["default"], null, _ref, /*#__PURE__*/_react["default"].createElement(_Basic.Content, null, /*#__PURE__*/_react["default"].createElement(_Basic.Main, null, _ref2, _ref3, _ref4, /*#__PURE__*/_react["default"].createElement(_ui.Card, {
+    variant: "border",
+    borderColor: "dark"
+  }, _ref5, /*#__PURE__*/_react["default"].createElement(_ui.CardText, null, /*#__PURE__*/_react["default"].createElement(_SummaryList["default"], null, fields && fields.map(function (field, index) {
+    return /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, field.name), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, field.value));
+  })))), /*#__PURE__*/_react["default"].createElement(_ui.Card, {
+    variant: "border",
+    borderColor: "dark"
+  }, _ref6, /*#__PURE__*/_react["default"].createElement(_ui.CardText, null, /*#__PURE__*/_react["default"].createElement(_SummaryList["default"], null, fields && fields.map(function (field, index) {
+    return /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, field.name), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, field.value));
+  })))), _ref7, _ref8, _ref9)), _ref10);
+};
+
+exports.PreviewDisplay = PreviewDisplay;

package/create-simple-form.mdx

@@ -227,6 +227,9 @@ inputs with almost zero coding needed.
  
 That's good. But we have yet to gather data in our code when users submit the form.
 
+Note. We should note that behind the scenes the Digigov Form inherits a prop (from [React Hook Form](https://react-hook-form.com/api/useform/)) called `shouldFocusError`
+which sets focus on the first field that has an error. You can check it out by pessing the submit button.
+
 ## Handling onSubmit events
 
 Naturally, when we get data from HTML forms, we make use of the `submit` events

package/es/MultiplicityField/MultiplicityField.stories.js

@@ -7,4 +7,5 @@ export * from '@digigov/form/MultiplicityField/__stories__/Default';
 export * from '@digigov/form/MultiplicityField/__stories__/WithMinLength';
 export * from '@digigov/form/MultiplicityField/__stories__/WithMaxLength';
 export * from '@digigov/form/MultiplicityField/__stories__/WithMinAndMaxLength';
-export * from '@digigov/form/MultiplicityField/__stories__/WithExactLength';
+export * from '@digigov/form/MultiplicityField/__stories__/WithExactLength';
+export * from '@digigov/form/MultiplicityField/__stories__/PreviewDisplay';

package/es/MultiplicityField/__stories__/PreviewDisplay.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import Layout, { Content, Main } from '@digigov/ui/layouts/Basic/';
+import SummaryList, { SummaryListItem, SummaryListItemKey, SummaryListItemValue } from '@digigov/ui/core/SummaryList';
+import { Header, HeaderSection, HeaderContent, HeaderTitle, Caption, Title, Paragraph, Card, CardHeading, CardText, List, ListItem } from '@digigov/ui';
+import GovGRFooter from '@digigov/ui/govgr/Footer';
+import GovGRLogo from '@digigov/ui/govgr/Logo';
+var fields = [{
+  name: 'Όνομα',
+  value: 'ΜΑΡΙΟΣ'
+}, {
+  name: 'Επώνυμο',
+  value: 'ΜΕΝΕΞΕΣ'
+}, {
+  name: 'Όνομα Πατέρα',
+  value: 'ΝΙΚΟΣ'
+}, {
+  name: 'Όνομα Μητέρα',
+  value: 'ΜΑΡΙΑ'
+}, {
+  name: 'Α.Φ.Μ',
+  value: '12030454'
+}, {
+  name: 'Τηλέφωνο',
+  value: '6984386756'
+}, {
+  name: 'Ημερομηνία Γέννησης',
+  value: '22/03/78'
+}, {
+  name: 'Α.Δ.Τ',
+  value: 'Ψ456789'
+}, {
+  name: 'Τύπος A.Δ.Τ',
+  value: 'ΚΑΡΤΑ'
+}];
+
+var _ref = /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(GovGRLogo, {
+  href: "#"
+}), /*#__PURE__*/React.createElement(HeaderTitle, null, "\u03A0\u03C1\u03CC\u03C4\u03C5\u03C0\u03BF-\u0391\u03BD\u03B1\u03C6\u03BF\u03C1\u03AC\u03C2"))));
+
+var _ref2 = /*#__PURE__*/React.createElement(Caption, null, "\u03A8\u03B7\u03C6\u03B9\u03B1\u03BA\u03AE \u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7 \u03B9\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03BF\u03CD \u03C3\u03C5\u03BC\u03C6\u03C9\u03BD\u03B7\u03C4\u03B9\u03BA\u03BF\u03CD");
+
+var _ref3 = /*#__PURE__*/React.createElement(Title, null, "\u03A0\u03C1\u03BF\u03B5\u03C0\u03B9\u03C3\u03BA\u03CC\u03C0\u03B7\u03C3\u03B7");
+
+var _ref4 = /*#__PURE__*/React.createElement(Paragraph, null, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03B5\u03BC\u03C6\u03B1\u03BD\u03AF\u03B6\u03BF\u03BD\u03C4\u03B1\u03B9 \u03BF\u03B9 \u03C3\u03C5\u03BD\u03C5\u03C0\u03BF\u03B3\u03C1\u03AC\u03C6\u03BF\u03BD\u03C4\u03B5\u03C2 \u03C4\u03BF\u03C5 \u03B9\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03BF\u03CD \u03C3\u03C5\u03BC\u03C6\u03C9\u03BD\u03B7\u03C4\u03B9\u03BA\u03BF\u03CD"));
+
+var _ref5 = /*#__PURE__*/React.createElement(CardHeading, null, "\u03A3\u03C5\u03BD\u03C5\u03C0\u03BF\u03B3\u03C1\u03AC\u03C6\u03BF\u03BD\u03C4\u03B1\u03C2 1");
+
+var _ref6 = /*#__PURE__*/React.createElement(CardHeading, null, "\u03A3\u03C5\u03BD\u03C5\u03C0\u03BF\u03B3\u03C1\u03AC\u03C6\u03BF\u03BD\u03C4\u03B1\u03C2 2");
+
+var _ref7 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  borderColor: "dark"
+}, /*#__PURE__*/React.createElement(CardHeading, null, "\u03A3\u03C5\u03BD\u03C5\u03C0\u03BF\u03B3\u03C1\u03AC\u03C6\u03BF\u03BD\u03C4\u03B1\u03C2 3"), /*#__PURE__*/React.createElement(CardText, null, /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u039C\u03AC\u03C1\u03B9\u03BF\u03C2")))));
+
+var _ref8 = /*#__PURE__*/React.createElement(Title, {
+  size: "md"
+}, "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u0394\u03AE\u03BB\u03C9\u03C3\u03B7\u03C2");
+
+var _ref9 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u039C\u0391\u03A1\u0399\u039F\u03A3")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0395\u03C0\u03CE\u03BD\u03C5\u03BC\u03BF"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u039C\u0395\u039D\u0395\u039E\u0395\u03A3")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "15/12/1988")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A3\u03C7\u03BF\u03BB\u03B5\u03AF\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, /*#__PURE__*/React.createElement(List, {
+  marginBottom: 0,
+  marginTop: 0,
+  listStyle: "bullet"
+}, /*#__PURE__*/React.createElement(ListItem, null, "2o \u0397\u039C\u0395\u03A1\u0397\u03A3\u0399\u039F \u0393\u0395\u039D\u0399\u039A\u039F \u039B\u03A5\u039A\u0395\u0399\u039F \u039E\u0391\u039D\u0398\u0397\u03A3"), /*#__PURE__*/React.createElement(ListItem, null, "2o \u0397\u039C\u0395\u03A1\u0397\u03A3\u0399\u039F \u0393\u0395\u039D\u0399\u039A\u039F \u039B\u03A5\u039A\u0395\u0399\u039F \u039E\u0391\u039D\u0398\u0397\u03A3"), /*#__PURE__*/React.createElement(ListItem, null, "2o \u0397\u039C\u0395\u03A1\u0397\u03A3\u0399\u039F \u0393\u0395\u039D\u0399\u039A\u039F \u039B\u03A5\u039A\u0395\u0399\u039F \u039E\u0391\u039D\u0398\u0397\u03A3"), /*#__PURE__*/React.createElement(ListItem, null, "15o \u0397\u039C\u0395\u03A1\u0397\u03A3\u0399\u039F \u0393\u0395\u039D\u0399\u039A\u039F \u0393\u03A5\u039C\u039D\u0391\u03A3\u0399\u039F \u0391\u0398\u0397\u039D\u03A9\u039D")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u039C\u03AC\u03C1\u03B9\u03BF\u03C2")));
+
+var _ref10 = /*#__PURE__*/React.createElement(GovGRFooter, null);
+
+export var PreviewDisplay = function PreviewDisplay() {
+  return /*#__PURE__*/React.createElement(Layout, null, _ref, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Main, null, _ref2, _ref3, _ref4, /*#__PURE__*/React.createElement(Card, {
+    variant: "border",
+    borderColor: "dark"
+  }, _ref5, /*#__PURE__*/React.createElement(CardText, null, /*#__PURE__*/React.createElement(SummaryList, null, fields && fields.map(function (field, index) {
+    return /*#__PURE__*/React.createElement(SummaryListItem, {
+      key: index
+    }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, field.name), /*#__PURE__*/React.createElement(SummaryListItemValue, null, field.value));
+  })))), /*#__PURE__*/React.createElement(Card, {
+    variant: "border",
+    borderColor: "dark"
+  }, _ref6, /*#__PURE__*/React.createElement(CardText, null, /*#__PURE__*/React.createElement(SummaryList, null, fields && fields.map(function (field, index) {
+    return /*#__PURE__*/React.createElement(SummaryListItem, {
+      key: index
+    }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, field.name), /*#__PURE__*/React.createElement(SummaryListItemValue, null, field.value));
+  })))), _ref7, _ref8, _ref9)), _ref10);
+};

package/es/create-simple-form.mdx

@@ -227,6 +227,9 @@ inputs with almost zero coding needed.
  
 That's good. But we have yet to gather data in our code when users submit the form.
 
+Note. We should note that behind the scenes the Digigov Form inherits a prop (from [React Hook Form](https://react-hook-form.com/api/useform/)) called `shouldFocusError`
+which sets focus on the first field that has an error. You can check it out by pessing the submit button.
+
 ## Handling onSubmit events
 
 Naturally, when we get data from HTML forms, we make use of the `submit` events

package/es/internal.js

@@ -25,6 +25,7 @@ export * from '@digigov/form/inputs/Label';
 export { default as Radio } from '@digigov/form/inputs/Radio';
 export * from '@digigov/form/inputs/Radio';
 export { default as Select } from '@digigov/form/inputs/Select';
+export * from '@digigov/form/FormContext';
 export * from '@digigov/form/inputs/Select';
 export * from '@digigov/form/inputs';
 export * from '@digigov/form/internal';

package/esm/MultiplicityField/MultiplicityField.stories.js

@@ -7,4 +7,5 @@ export * from '@digigov/form/MultiplicityField/__stories__/Default';
 export * from '@digigov/form/MultiplicityField/__stories__/WithMinLength';
 export * from '@digigov/form/MultiplicityField/__stories__/WithMaxLength';
 export * from '@digigov/form/MultiplicityField/__stories__/WithMinAndMaxLength';
-export * from '@digigov/form/MultiplicityField/__stories__/WithExactLength';
+export * from '@digigov/form/MultiplicityField/__stories__/WithExactLength';
+export * from '@digigov/form/MultiplicityField/__stories__/PreviewDisplay';

package/esm/MultiplicityField/__stories__/PreviewDisplay.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import Layout, { Content, Main } from '@digigov/ui/layouts/Basic/';
+import SummaryList, { SummaryListItem, SummaryListItemKey, SummaryListItemValue } from '@digigov/ui/core/SummaryList';
+import { Header, HeaderSection, HeaderContent, HeaderTitle, Caption, Title, Paragraph, Card, CardHeading, CardText, List, ListItem } from '@digigov/ui';
+import GovGRFooter from '@digigov/ui/govgr/Footer';
+import GovGRLogo from '@digigov/ui/govgr/Logo';
+var fields = [{
+  name: 'Όνομα',
+  value: 'ΜΑΡΙΟΣ'
+}, {
+  name: 'Επώνυμο',
+  value: 'ΜΕΝΕΞΕΣ'
+}, {
+  name: 'Όνομα Πατέρα',
+  value: 'ΝΙΚΟΣ'
+}, {
+  name: 'Όνομα Μητέρα',
+  value: 'ΜΑΡΙΑ'
+}, {
+  name: 'Α.Φ.Μ',
+  value: '12030454'
+}, {
+  name: 'Τηλέφωνο',
+  value: '6984386756'
+}, {
+  name: 'Ημερομηνία Γέννησης',
+  value: '22/03/78'
+}, {
+  name: 'Α.Δ.Τ',
+  value: 'Ψ456789'
+}, {
+  name: 'Τύπος A.Δ.Τ',
+  value: 'ΚΑΡΤΑ'
+}];
+
+var _ref = /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(GovGRLogo, {
+  href: "#"
+}), /*#__PURE__*/React.createElement(HeaderTitle, null, "\u03A0\u03C1\u03CC\u03C4\u03C5\u03C0\u03BF-\u0391\u03BD\u03B1\u03C6\u03BF\u03C1\u03AC\u03C2"))));
+
+var _ref2 = /*#__PURE__*/React.createElement(Caption, null, "\u03A8\u03B7\u03C6\u03B9\u03B1\u03BA\u03AE \u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7 \u03B9\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03BF\u03CD \u03C3\u03C5\u03BC\u03C6\u03C9\u03BD\u03B7\u03C4\u03B9\u03BA\u03BF\u03CD");
+
+var _ref3 = /*#__PURE__*/React.createElement(Title, null, "\u03A0\u03C1\u03BF\u03B5\u03C0\u03B9\u03C3\u03BA\u03CC\u03C0\u03B7\u03C3\u03B7");
+
+var _ref4 = /*#__PURE__*/React.createElement(Paragraph, null, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03B5\u03BC\u03C6\u03B1\u03BD\u03AF\u03B6\u03BF\u03BD\u03C4\u03B1\u03B9 \u03BF\u03B9 \u03C3\u03C5\u03BD\u03C5\u03C0\u03BF\u03B3\u03C1\u03AC\u03C6\u03BF\u03BD\u03C4\u03B5\u03C2 \u03C4\u03BF\u03C5 \u03B9\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03BF\u03CD \u03C3\u03C5\u03BC\u03C6\u03C9\u03BD\u03B7\u03C4\u03B9\u03BA\u03BF\u03CD"));
+
+var _ref5 = /*#__PURE__*/React.createElement(CardHeading, null, "\u03A3\u03C5\u03BD\u03C5\u03C0\u03BF\u03B3\u03C1\u03AC\u03C6\u03BF\u03BD\u03C4\u03B1\u03C2 1");
+
+var _ref6 = /*#__PURE__*/React.createElement(CardHeading, null, "\u03A3\u03C5\u03BD\u03C5\u03C0\u03BF\u03B3\u03C1\u03AC\u03C6\u03BF\u03BD\u03C4\u03B1\u03C2 2");
+
+var _ref7 = /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  borderColor: "dark"
+}, /*#__PURE__*/React.createElement(CardHeading, null, "\u03A3\u03C5\u03BD\u03C5\u03C0\u03BF\u03B3\u03C1\u03AC\u03C6\u03BF\u03BD\u03C4\u03B1\u03C2 3"), /*#__PURE__*/React.createElement(CardText, null, /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u039C\u03AC\u03C1\u03B9\u03BF\u03C2")))));
+
+var _ref8 = /*#__PURE__*/React.createElement(Title, {
+  size: "md"
+}, "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u0394\u03AE\u03BB\u03C9\u03C3\u03B7\u03C2");
+
+var _ref9 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u039C\u0391\u03A1\u0399\u039F\u03A3")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0395\u03C0\u03CE\u03BD\u03C5\u03BC\u03BF"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u039C\u0395\u039D\u0395\u039E\u0395\u03A3")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "15/12/1988")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A3\u03C7\u03BF\u03BB\u03B5\u03AF\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, /*#__PURE__*/React.createElement(List, {
+  marginBottom: 0,
+  marginTop: 0,
+  listStyle: "bullet"
+}, /*#__PURE__*/React.createElement(ListItem, null, "2o \u0397\u039C\u0395\u03A1\u0397\u03A3\u0399\u039F \u0393\u0395\u039D\u0399\u039A\u039F \u039B\u03A5\u039A\u0395\u0399\u039F \u039E\u0391\u039D\u0398\u0397\u03A3"), /*#__PURE__*/React.createElement(ListItem, null, "2o \u0397\u039C\u0395\u03A1\u0397\u03A3\u0399\u039F \u0393\u0395\u039D\u0399\u039A\u039F \u039B\u03A5\u039A\u0395\u0399\u039F \u039E\u0391\u039D\u0398\u0397\u03A3"), /*#__PURE__*/React.createElement(ListItem, null, "2o \u0397\u039C\u0395\u03A1\u0397\u03A3\u0399\u039F \u0393\u0395\u039D\u0399\u039A\u039F \u039B\u03A5\u039A\u0395\u0399\u039F \u039E\u0391\u039D\u0398\u0397\u03A3"), /*#__PURE__*/React.createElement(ListItem, null, "15o \u0397\u039C\u0395\u03A1\u0397\u03A3\u0399\u039F \u0393\u0395\u039D\u0399\u039A\u039F \u0393\u03A5\u039C\u039D\u0391\u03A3\u0399\u039F \u0391\u0398\u0397\u039D\u03A9\u039D")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u039C\u03AC\u03C1\u03B9\u03BF\u03C2")));
+
+var _ref10 = /*#__PURE__*/React.createElement(GovGRFooter, null);
+
+export var PreviewDisplay = function PreviewDisplay() {
+  return /*#__PURE__*/React.createElement(Layout, null, _ref, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Main, null, _ref2, _ref3, _ref4, /*#__PURE__*/React.createElement(Card, {
+    variant: "border",
+    borderColor: "dark"
+  }, _ref5, /*#__PURE__*/React.createElement(CardText, null, /*#__PURE__*/React.createElement(SummaryList, null, fields && fields.map(function (field, index) {
+    return /*#__PURE__*/React.createElement(SummaryListItem, {
+      key: index
+    }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, field.name), /*#__PURE__*/React.createElement(SummaryListItemValue, null, field.value));
+  })))), /*#__PURE__*/React.createElement(Card, {
+    variant: "border",
+    borderColor: "dark"
+  }, _ref6, /*#__PURE__*/React.createElement(CardText, null, /*#__PURE__*/React.createElement(SummaryList, null, fields && fields.map(function (field, index) {
+    return /*#__PURE__*/React.createElement(SummaryListItem, {
+      key: index
+    }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, field.name), /*#__PURE__*/React.createElement(SummaryListItemValue, null, field.value));
+  })))), _ref7, _ref8, _ref9)), _ref10);
+};

package/esm/create-simple-form.mdx

@@ -227,6 +227,9 @@ inputs with almost zero coding needed.
  
 That's good. But we have yet to gather data in our code when users submit the form.
 
+Note. We should note that behind the scenes the Digigov Form inherits a prop (from [React Hook Form](https://react-hook-form.com/api/useform/)) called `shouldFocusError`
+which sets focus on the first field that has an error. You can check it out by pessing the submit button.
+
 ## Handling onSubmit events
 
 Naturally, when we get data from HTML forms, we make use of the `submit` events

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.8.6
+/** @license Digigov v0.9.0-alpha
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.

package/esm/internal.js

@@ -25,6 +25,7 @@ export * from '@digigov/form/inputs/Label';
 export { default as Radio } from '@digigov/form/inputs/Radio';
 export * from '@digigov/form/inputs/Radio';
 export { default as Select } from '@digigov/form/inputs/Select';
+export * from '@digigov/form/FormContext';
 export * from '@digigov/form/inputs/Select';
 export * from '@digigov/form/inputs';
 export * from '@digigov/form/internal';

package/internal.d.ts

@@ -25,6 +25,7 @@ export * from '@digigov/form/inputs/Label';
 export { default as Radio } from '@digigov/form/inputs/Radio';
 export * from '@digigov/form/inputs/Radio';
 export { default as Select } from '@digigov/form/inputs/Select';
+export * from '@digigov/form/FormContext';
 export * from '@digigov/form/inputs/Select';
 export * from '@digigov/form/inputs';
 export * from '@digigov/form/internal';

package/internal.js

@@ -302,6 +302,20 @@ Object.keys(_Select).forEach(function (key) {
   });
 });
 
+var _FormContext = require("@digigov/form/FormContext");
+
+Object.keys(_FormContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _FormContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _FormContext[key];
+    }
+  });
+});
+
 var _inputs = require("@digigov/form/inputs");
 
 Object.keys(_inputs).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/form",
-  "version": "0.8.6",
+  "version": "0.9.0-alpha",
   "description": "@digigov form builder",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -18,9 +18,9 @@
     "@hookform/resolvers": "2.9.6"
   },
   "peerDependencies": {
-    "@digigov/ui": "0.26.6",
-    "@digigov/react-core": "0.16.5",
-    "@digigov/react-extensions": "0.18.4",
+    "@digigov/ui": "0.26.7-alpha",
+    "@digigov/react-core": "0.16.6-alpha",
+    "@digigov/react-extensions": "0.18.5-alpha",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"