@digigov/ui 1.0.0-88820b1e → 1.0.0-8bbf3ef2

package/feedback/ServiceBadge/index.mdx

@@ -5,17 +5,21 @@ parent: docs/ui/component
 ---
 
 import ServiceBadge from '@digigov/ui/feedback/ServiceBadge';
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import Header, { HeaderContent, HeaderSection, HeaderTitle } from '@digigov/ui/app/Header';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
 
 ## Example
 
 <Header>
-  <GovGRLogo />
-  <HeaderTitle>
-    Service Name <ServiceBadge label="ALPHA" />
-  </HeaderTitle>
+  <HeaderContent>
+    <HeaderSection>
+      <GovGRLogo />
+      <HeaderTitle>Service Name </HeaderTitle>
+      <ServiceBadge label="ALPHA" />
+    </HeaderSection>
+  </HeaderContent>
 </Header>
+<br/>
 
 ## How to use
 

package/feedback/WarningText/WarningText.stories.d.ts

@@ -8,4 +8,5 @@ declare namespace _default {
 export default _default;
 export * from "@digigov/ui/feedback/WarningText/__stories__/Default";
 export * from "@digigov/ui/feedback/WarningText/__stories__/AssistiveText";
+export * from "@digigov/ui/feedback/WarningText/__stories__/Dense";
 import WarningText from "@digigov/ui/feedback/WarningText";

package/feedback/WarningText/WarningText.stories.js

@@ -37,6 +37,20 @@ Object.keys(_AssistiveText).forEach(function (key) {
     }
   });
 });
+
+var _Dense = require("@digigov/ui/feedback/WarningText/__stories__/Dense");
+
+Object.keys(_Dense).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Dense[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dense[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov UI/feedback/WarningText',
   description: 'Use the warning text component when you need to warn users about something important, such as legal consequences of an action, or lack of action, that they might take.',

package/feedback/WarningText/__stories__/Dense.d.ts

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

package/feedback/WarningText/__stories__/Dense.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Dense = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _WarningText = require("@digigov/ui/feedback/WarningText");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_WarningText.WarningText, {
+  dense: true
+}, "\u039C\u03C0\u03BF\u03C1\u03B5\u03AF \u03BD\u03B1 \u03C3\u03B1\u03C2 \u03B5\u03C0\u03B9\u03B2\u03BB\u03B7\u03B8\u03B5\u03AF \u03C0\u03C1\u03CC\u03C3\u03C4\u03B9\u03BC\u03BF \u03AD\u03C9\u03C2 \u03BA\u03B1\u03B9 5.000 \u03B5\u03C5\u03C1\u03CE \u03B5\u03AC\u03BD \u03B4\u03B5\u03BD \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03B5\u03AF\u03C4\u03B5.");
+
+var Dense = function Dense() {
+  return _ref;
+};
+
+exports.Dense = Dense;
+var _default = Dense;
+exports["default"] = _default;

package/form/Button/Button.stories.d.ts

@@ -13,6 +13,7 @@ export * from "./__stories__/GroupingButtons";
 export * from "./__stories__/GroupingButtonsAndLinks";
 export * from "./__stories__/CallToActionButton";
 export * from "./__stories__/Disabled";
+export * from "./__stories__/Dense";
 export * from "./__stories__/ButtonLinkButton";
 export * from "./__stories__/Back";
 export * from "./__stories__/WithVariantLink";

package/form/Button/Button.stories.js

@@ -108,6 +108,20 @@ Object.keys(_Disabled).forEach(function (key) {
   });
 });
 
+var _Dense = require("./__stories__/Dense");
+
+Object.keys(_Dense).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Dense[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dense[key];
+    }
+  });
+});
+
 var _ButtonLinkButton = require("./__stories__/ButtonLinkButton");
 
 Object.keys(_ButtonLinkButton).forEach(function (key) {

package/form/Button/__stories__/CallToActionButton.d.ts

@@ -1,5 +1,2 @@
-/**
- * My primary descrition is the best description that was described
- */
 export declare const CallToActionButton: () => JSX.Element;
 export default CallToActionButton;

package/form/Button/__stories__/CallToActionButton.js

@@ -16,11 +16,8 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_CallToAction.CallToActi
   role: "button",
   "aria-label": "\u0395\u03AF\u03C3\u03BF\u03B4\u03BF\u03C2 \u03C3\u03C4\u03B7\u03BD \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1",
   tabIndex: 0
-}, "\u0395\u03AF\u03C3\u03BF\u03B4\u03BF\u03C2");
+}, "\u0395\u03AF\u03C3\u03BF\u03B4\u03BF\u03C2 \u03C3\u03C4\u03B7\u03BD \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1");
 
-/**
- * My primary descrition is the best description that was described
- */
 var CallToActionButton = function CallToActionButton() {
   return _ref;
 };

package/form/Button/__stories__/Dense.d.ts

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

package/form/Button/__stories__/Dense.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Dense = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = require("@digigov/ui/form/Button");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  dense: true,
+  "aria-label": "\u03A0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AE \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF\u03C5"
+}, "\u03A0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AE \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF\u03C5");
+
+var Dense = function Dense() {
+  return _ref;
+};
+
+exports.Dense = Dense;
+var _default = Dense;
+exports["default"] = _default;

package/form/Button/__stories__/GroupingButtons.d.ts

@@ -1,5 +1,2 @@
-/**
- * My deescrition is the best description that was described
- */
 export declare const GroupingButtons: () => JSX.Element;
 export default GroupingButtons;

package/form/Button/__stories__/GroupingButtons.js

@@ -15,9 +15,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Button.ButtonGroup, nul
   color: "secondary"
 }, "\u0391\u03C0\u03BF\u03B8\u03AE\u03BA\u03B5\u03C5\u03C3\u03B7"));
 
-/**
- * My deescrition is the best description that was described
- */
 var GroupingButtons = function GroupingButtons() {
   return _ref;
 };

package/form/Button/__stories__/GroupingButtonsAndLinks.d.ts

@@ -1,5 +1,2 @@
-/**
- * My deescrition is the best description that was described
- */
 export declare const GroupingButtonsAndLinks: () => JSX.Element;
 export default GroupingButtonsAndLinks;

package/form/Button/__stories__/GroupingButtonsAndLinks.js

@@ -17,9 +17,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Button.ButtonGroup, nul
   "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
 }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1"), /*#__PURE__*/_react["default"].createElement(_Link.Link, null, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"));
 
-/**
- * My deescrition is the best description that was described
- */
 var GroupingButtonsAndLinks = function GroupingButtonsAndLinks() {
   return _ref;
 };

package/form/Button/__stories__/Primary.d.ts

@@ -1,5 +1,2 @@
-/**
- * My primary descrition is the best description that was described
- */
 export declare const Primary: () => JSX.Element;
 export default Primary;

package/form/Button/__stories__/Primary.js

@@ -15,9 +15,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
   "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
 }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
-/**
- * My primary descrition is the best description that was described
- */
 var Primary = function Primary() {
   return _ref;
 };

package/form/Button/__stories__/Secondary.d.ts

@@ -1,5 +1,2 @@
-/**
- * My primary descrition is the best description that was described
- */
 export declare const Secondary: () => JSX.Element;
 export default Secondary;

package/form/Button/__stories__/Secondary.js

@@ -16,9 +16,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
   "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
 }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
-/**
- * My primary descrition is the best description that was described
- */
 var Secondary = function Secondary() {
   return _ref;
 };

package/form/Button/__stories__/WithVariantLink.d.ts

@@ -1,5 +1,2 @@
-/**
- * My primary descrition is the best description that was described
- */
 export declare const WithVariantLink: () => JSX.Element;
 export default WithVariantLink;

package/form/Button/__stories__/WithVariantLink.js

@@ -11,9 +11,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Button = require("@digigov/ui/form/Button");
 
-/**
- * My primary descrition is the best description that was described
- */
 var WithVariantLink = function WithVariantLink() {
   return /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     onClick: function onClick() {

package/form/Button/index.mdx

@@ -55,7 +55,7 @@ Any links within a button group will automatically align with the buttons.
 <Story packageName="@digigov/ui" component="form/Button" story="GroupingButtonsAndLinks.tsx" />
 
 Write button text in sentence case, describing the action it performs. For
-example:'
+example:
 
 - `Start now` at the [start of the service](https://guide.services.gov.gr/docs/start-pages)
 - `Sign in` to an account a user has already created
@@ -85,12 +85,12 @@ to do next.
 
 ## API Docs
 
-Read more about [how to use the React types](/docs/api/Button)
+Read more about [how to use the React types](/docs/api/Button).
 
 ## Accessibility
 
-You can read more about the accessibility patterns used in our Select
-implementation in the ARIA Authoring Practices Guide (APG) at
+You can read more about the accessibility patterns used in our Button
+implementation in the ARIA Authoring Practices Guide (APG) at [button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) section.
 
 ## API
 

package/form/Checkbox/Checkbox.stories.d.ts

@@ -15,4 +15,5 @@ export * from "@digigov/ui/form/Checkbox/__stories__/NoneAnswer";
 export * from "@digigov/ui/form/Checkbox/__stories__/NoneAnswerWithError";
 export * from "@digigov/ui/form/Checkbox/__stories__/WithErrorMessage";
 export * from "@digigov/ui/form/Checkbox/__stories__/ConditionalReveal";
+export * from "@digigov/ui/form/Checkbox/__stories__/Dense";
 import Checkbox from "@digigov/ui/form/Checkbox";

package/form/Checkbox/Checkbox.stories.js

@@ -135,6 +135,20 @@ Object.keys(_ConditionalReveal).forEach(function (key) {
     }
   });
 });
+
+var _Dense = require("@digigov/ui/form/Checkbox/__stories__/Dense");
+
+Object.keys(_Dense).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Dense[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dense[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov UI/form/Checkbox',
   description: 'Let users select one or more options by using the checkboxes component.',

package/form/Checkbox/__stories__/Dense.d.ts

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

package/form/Checkbox/__stories__/Dense.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Dense = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Checkbox = require("@digigov/ui/form/Checkbox");
+
+var _FieldContainer = require("@digigov/ui/form/FieldContainer");
+
+var _Hint = require("@digigov/ui/typography/Hint");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, {
+  "aria-describedby": "feeling-hint"
+}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u03A0\u03CE\u03C2 \u03B1\u03B9\u03C3\u03B8\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03C5\u03C4\u03AE \u03C4\u03B7 \u03C3\u03C4\u03B9\u03B3\u03BC\u03AE;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
+  id: "feeling-hint"
+}, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/_react["default"].createElement(_Checkbox.Checkbox, {
+  dense: true
+}, /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
+  name: "feeling",
+  value: "cold"
+}, "\u0388\u03C7\u03C9 \u03C3\u03C5\u03BD\u03AC\u03C7\u03B9"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
+  name: "feeling",
+  value: "fever"
+}, "\u0388\u03C7\u03C9 \u03C0\u03C5\u03C1\u03B5\u03C4\u03CC"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
+  name: "feeling",
+  value: "fatigue"
+}, "\u0391\u03B9\u03C3\u03B8\u03AC\u03BD\u03BF\u03BC\u03B1\u03B9 \u03BA\u03BF\u03CD\u03C1\u03B1\u03C3\u03B7"))));
+
+var Dense = function Dense() {
+  return _ref;
+};
+
+exports.Dense = Dense;
+var _default = Dense;
+exports["default"] = _default;

package/form/Checkbox/__stories__/WithHint.js

@@ -17,7 +17,7 @@ var _Hint = require("@digigov/ui/typography/Hint");
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, {
   "aria-describedby": "nationality-hint"
-}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
+}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03AC \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
   id: "nationality-hint"
 }, "\u0391\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C0\u03BF\u03BB\u03BB\u03B1\u03C0\u03BB\u03AE \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1, \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/_react["default"].createElement(_Checkbox.Checkbox, null, /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
   name: "nationality",

package/form/Checkbox/index.mdx

@@ -47,6 +47,11 @@ This might make 2 related questions easier to answer by grouping them on the sam
 
 <Story packageName="@digigov/ui" component="form/Checkbox" story="ConditionalReveal.tsx" />
 
+## Accessibility
+
+You can read more about the accessibility patterns used in our Checkbox
+implementation in the ARIA Authoring Practices Guide (APG) at [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) section.
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Checkbox" />

package/form/DateInputContainer/DateInputContainer.stories.d.ts

@@ -10,4 +10,5 @@ export * from "@digigov/ui/form/DateInputContainer/__stories__/Default";
 export * from "@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions";
 export * from "@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage";
 export * from "@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField";
+export * from "@digigov/ui/form/DateInputContainer/__stories__/Dense";
 import DateInputContainer from "@digigov/ui/form/DateInputContainer";

package/form/DateInputContainer/DateInputContainer.stories.js

@@ -65,6 +65,20 @@ Object.keys(_WithErrorMessageForSingleField).forEach(function (key) {
     }
   });
 });
+
+var _Dense = require("@digigov/ui/form/DateInputContainer/__stories__/Dense");
+
+Object.keys(_Dense).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Dense[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dense[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov UI/form/DateInputContainer',
   description: 'Use the date input component to help users enter a memorable date or one they can easily look up.',

package/form/DateInputContainer/__stories__/Default.js

@@ -28,7 +28,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
 }, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
   width: 4,
   name: "year"
-}, "\u03A7\u03C1\u03CC\u03BD\u03BF\u03C2"))));
+}, "\u0388\u03C4\u03BF\u03C2"))));
 
 var Default = function Default() {
   return _ref;

package/form/DateInputContainer/__stories__/Dense.d.ts

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

package/form/DateInputContainer/__stories__/Dense.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Dense = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DateInputContainer = require("@digigov/ui/form/DateInputContainer");
+
+var _FieldContainer = require("@digigov/ui/form/FieldContainer");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {
+  "aria-describedby": "passport-hint"
+}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
+  size: "md"
+}, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03CC \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputContainer, {
+  dense: true
+}, /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
+  name: "day"
+}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
+  name: "month"
+}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
+  width: 4,
+  name: "year"
+}, "\u0388\u03C4\u03BF\u03C2"))));
+
+var Dense = function Dense() {
+  return _ref;
+};
+
+exports.Dense = Dense;
+var _default = Dense;
+exports["default"] = _default;

package/form/DateInputContainer/__stories__/MultipleQuestions.js

@@ -19,7 +19,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   "aria-describedby": "passport-hint"
 }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
   size: "md"
-}, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03BF;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
+}, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03CC \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
   id: "passport-hint"
 }, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputContainer, null, /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
   name: "day"
@@ -28,7 +28,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
 }, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
   width: 4,
   name: "year"
-}, "\u03A7\u03C1\u03CC\u03BD\u03BF\u03C2"))));
+}, "\u0388\u03C4\u03BF\u03C2"))));
 
 var MultipleQuestions = function MultipleQuestions() {
   return _ref;

package/form/DateInputContainer/__stories__/WithErrorMessage.js

@@ -41,7 +41,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   width: 4,
   name: "year",
   defaultValue: 2043
-}, "\u03A7\u03C1\u03CC\u03BD\u03BF\u03C2"))));
+}, "\u0388\u03C4\u03BF\u03C2"))));
 
 var WithErrorMessage = function WithErrorMessage() {
   return _ref;

package/form/DateInputContainer/__stories__/WithErrorMessageForSingleField.js

@@ -38,7 +38,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   width: 4,
   name: "year",
   defaultValue: 2043
-}, "\u03A7\u03C1\u03CC\u03BD\u03BF\u03C2"))));
+}, "\u0388\u03C4\u03BF\u03C2"))));
 
 var WithErrorMessageForSingleField = function WithErrorMessageForSingleField() {
   return _ref;

package/form/DateInputContainer/index.mdx

@@ -26,3 +26,8 @@ If you’re highlighting the whole date, style all the fields like this:
 If you’re highlighting just one field - either the day, month or year - only style the field that has an error. The error message must say which field has an error, like this:
 
 <Story packageName="@digigov/ui" component="form/DateInputContainer"story="WithErrorMessageForSingleField.tsx" />
+
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="DateInputContainer" />

package/form/ErrorMessage/ErrorMessage.stories.d.ts

@@ -7,4 +7,6 @@ declare namespace _default {
 }
 export default _default;
 export * from "@digigov/ui/form/ErrorMessage/__stories__/Default";
+export * from "@digigov/ui/form/ErrorMessage/__stories__/DateInputError";
+export * from "@digigov/ui/form/ErrorMessage/__stories__/ErrorMessageOnly";
 import ErrorMessage from "@digigov/ui/form/ErrorMessage";

package/form/ErrorMessage/ErrorMessage.stories.js

@@ -23,6 +23,34 @@ Object.keys(_Default).forEach(function (key) {
     }
   });
 });
+
+var _DateInputError = require("@digigov/ui/form/ErrorMessage/__stories__/DateInputError");
+
+Object.keys(_DateInputError).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DateInputError[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DateInputError[key];
+    }
+  });
+});
+
+var _ErrorMessageOnly = require("@digigov/ui/form/ErrorMessage/__stories__/ErrorMessageOnly");
+
+Object.keys(_ErrorMessageOnly).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ErrorMessageOnly[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ErrorMessageOnly[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov UI/form/ErrorMessage',
   description: 'Show an error message next to the field and in the error summary when there is a validation error.',

package/form/ErrorMessage/__stories__/DateInputError.d.ts

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

package/form/ErrorMessage/__stories__/DateInputError.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DateInputError = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DateInputContainer = require("@digigov/ui/form/DateInputContainer");
+
+var _ErrorMessage = require("@digigov/ui/form/ErrorMessage");
+
+var _FieldContainer = require("@digigov/ui/form/FieldContainer");
+
+var _Hint = require("@digigov/ui/typography/Hint");
+
+var _VisuallyHidden = require("@digigov/ui/utils/VisuallyHidden");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {
+  error: true,
+  id: "passport-date"
+}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03AC \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03B3\u03AD\u03BD\u03BD\u03B7\u03C3\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, null, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/_react["default"].createElement(_ErrorMessage.ErrorMessage, null, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03B3\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03AD\u03C7\u03B5\u03B9 \u03AD\u03C4\u03BF\u03C2."), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputContainer, null, /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
+  name: "day"
+}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
+  name: "month"
+}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
+  error: true,
+  width: 4,
+  name: "year"
+}, "\u0388\u03C4\u03BF\u03C2"))));
+
+var DateInputError = function DateInputError() {
+  return _ref;
+};
+
+exports.DateInputError = DateInputError;
+var _default = DateInputError;
+exports["default"] = _default;