@digigov/ui 0.21.3 → 0.22.0

package/core/Button/__stories__/Warning.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Warning = void 0;
+exports["default"] = exports.Warning = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -19,4 +19,6 @@ var Warning = function Warning() {
   return _ref;
 };
 
-exports.Warning = Warning;
+exports.Warning = Warning;
+var _default = Warning;
+exports["default"] = _default;

package/core/Card/Card.stories.d.ts

@@ -11,4 +11,5 @@ export * from "@digigov/ui/core/Card/__stories__/WithDarkTopBorder";
 export * from "@digigov/ui/core/Card/__stories__/WithDivider";
 export * from "@digigov/ui/core/Card/__stories__/WithClickableContent";
 export * from "@digigov/ui/core/Card/__stories__/WithClickableLink";
+export * from "@digigov/ui/core/Card/__stories__/WithGroupButton";
 import Card from "@digigov/ui/core/Card";

package/core/Card/Card.stories.js

@@ -121,6 +121,20 @@ Object.keys(_WithClickableLink).forEach(function (key) {
     }
   });
 });
+
+var _WithGroupButton = require("@digigov/ui/core/Card/__stories__/WithGroupButton");
+
+Object.keys(_WithGroupButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithGroupButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithGroupButton[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov UI/core/Card',
   component: _Card["default"]

package/core/Card/__stories__/WithClickableLink.js

@@ -13,8 +13,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Card = _interopRequireWildcard(require("@digigov/ui/core/Card"));
 
-var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
-
 var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
 
 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); }
@@ -23,7 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Card["default"], null, /*#__PURE__*/_react["default"].createElement(_Card.CardHeading, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
   href: "#"
-}, "\u0393\u03B5\u03C9\u03C1\u03B3\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03AF\u03B1")), /*#__PURE__*/_react["default"].createElement(_Card.CardText, null, "\u0394\u03B9\u03B1\u03B4\u03B9\u03BA\u03B1\u03C3\u03AF\u03B5\u03C2, \u03B5\u03C0\u03B9\u03B4\u03BF\u03C4\u03AE\u03C3\u03B5\u03B9\u03C2 \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03B6\u03B7\u03BC\u03B9\u03CE\u03C3\u03B5\u03B9\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03B7\u03BD \u03B3\u03B5\u03C9\u03C1\u03B3\u03B9\u03BA\u03AE, \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03B9\u03BA\u03AE \u03AE \u03B1\u03BB\u03B9\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C3\u03B1\u03C2 \u03B4\u03C1\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1."), /*#__PURE__*/_react["default"].createElement(_Card.CardAction, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1")));
+}, "\u0393\u03B5\u03C9\u03C1\u03B3\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03AF\u03B1")), /*#__PURE__*/_react["default"].createElement(_Card.CardText, null, "\u0394\u03B9\u03B1\u03B4\u03B9\u03BA\u03B1\u03C3\u03AF\u03B5\u03C2, \u03B5\u03C0\u03B9\u03B4\u03BF\u03C4\u03AE\u03C3\u03B5\u03B9\u03C2 \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03B6\u03B7\u03BC\u03B9\u03CE\u03C3\u03B5\u03B9\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03B7\u03BD \u03B3\u03B5\u03C9\u03C1\u03B3\u03B9\u03BA\u03AE, \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03B9\u03BA\u03AE \u03AE \u03B1\u03BB\u03B9\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C3\u03B1\u03C2 \u03B4\u03C1\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1."));
 
 var WithClickableLink = function WithClickableLink() {
   return _ref;

package/core/Card/__stories__/WithGroupButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const WithGroupButton: () => JSX.Element;
+export default WithGroupButton;

package/core/Card/__stories__/WithGroupButton.js

@@ -0,0 +1,32 @@
+"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.WithGroupButton = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Card = _interopRequireWildcard(require("@digigov/ui/core/Card"));
+
+var _Button = _interopRequireWildcard(require("@digigov/ui/core/Button"));
+
+var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
+
+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(_Card["default"], null, /*#__PURE__*/_react["default"].createElement(_Card.CardHeading, null, "\u0393\u03B5\u03C9\u03C1\u03B3\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_Card.CardText, null, "\u0394\u03B9\u03B1\u03B4\u03B9\u03BA\u03B1\u03C3\u03AF\u03B5\u03C2, \u03B5\u03C0\u03B9\u03B4\u03BF\u03C4\u03AE\u03C3\u03B5\u03B9\u03C2 \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03B6\u03B7\u03BC\u03B9\u03CE\u03C3\u03B5\u03B9\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03B7\u03BD \u03B3\u03B5\u03C9\u03C1\u03B3\u03B9\u03BA\u03AE, \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03B9\u03BA\u03AE \u03AE \u03B1\u03BB\u03B9\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C3\u03B1\u03C2 \u03B4\u03C1\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1."), /*#__PURE__*/_react["default"].createElement(_Card.CardAction, null, /*#__PURE__*/_react["default"].createElement(_Button.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1"), /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
+
+var WithGroupButton = function WithGroupButton() {
+  return _ref;
+};
+
+exports.WithGroupButton = WithGroupButton;
+var _default = WithGroupButton;
+exports["default"] = _default;

package/core/Card/card.mdx

@@ -0,0 +1,78 @@
+---
+id: card
+title: Card
+---
+
+
+# Card
+
+Cards can be used to divide and organise interface content for better understandability and readability. 
+When used correctly, Cards can help users to scan through vast amounts of information quicker.
+
+ 
+
+
+```bash
+import Card from '@digigov/ui/core/Card';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Card" story="Default.tsx" />
+
+
+### Card with border
+
+You can set the color of the Card's border. You can choose between `dark` and `grey` color respectively.
+
+#### Card with gray border color
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithGrayBorder.tsx" />
+
+#### Card with dark border color
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithDarkBorder.tsx" />
+
+
+### Card with top border
+
+You can set the color of the Card's top border. You can choose between dark and grey color respectively. By default the top border color is grey
+
+#### Card with grey top border
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithGrayTopBorder.tsx" />
+
+#### Card with dark top border
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithDarkTopBorder.tsx" />
+
+
+### Card with divider
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithDivider.tsx" />
+
+
+### Card with actions
+
+#### Card with title link
+
+Cards can be used without an action button, but with a clickable title.
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithClickableLink.tsx" />
+
+#### Card with clickable content
+
+You can expand the clickable area of the link to fill Card's content.
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithClickableContent.tsx" />
+
+
+Cards also provides styles for actionable elements such as Buttons or Links.
+
+#### Card with button or link
+
+<Story packageName="@digigov/ui" component="core/Card" story="Default.tsx" />
+
+#### Card with a group of actions
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithGroupButton.tsx" />

package/core/Checkboxes/Checkbox.stories.d.ts

@@ -7,6 +7,7 @@ export * from "@digigov/ui/core/Checkboxes/__stories__/Default";
 export * from "@digigov/ui/core/Checkboxes/__stories__/MultipleQuestions";
 export * from "@digigov/ui/core/Checkboxes/__stories__/WithHint";
 export * from "@digigov/ui/core/Checkboxes/__stories__/NoneAnswer";
+export * from "@digigov/ui/core/Checkboxes/__stories__/NoneAnswerWithError";
 export * from "@digigov/ui/core/Checkboxes/__stories__/WithErrorMessage";
 export * from "@digigov/ui/core/Checkboxes/__stories__/ConditionalReveal";
 import Checkboxes from "@digigov/ui/core/Checkboxes";

package/core/Checkboxes/Checkbox.stories.js

@@ -66,6 +66,20 @@ Object.keys(_NoneAnswer).forEach(function (key) {
   });
 });
 
+var _NoneAnswerWithError = require("@digigov/ui/core/Checkboxes/__stories__/NoneAnswerWithError");
+
+Object.keys(_NoneAnswerWithError).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _NoneAnswerWithError[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _NoneAnswerWithError[key];
+    }
+  });
+});
+
 var _WithErrorMessage = require("@digigov/ui/core/Checkboxes/__stories__/WithErrorMessage");
 
 Object.keys(_WithErrorMessage).forEach(function (key) {

package/core/Checkboxes/__stories__/NoneAnswerWithError.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const NoneAnswer: () => JSX.Element;
+export default NoneAnswer;

package/core/Checkboxes/__stories__/NoneAnswerWithError.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.NoneAnswer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Checkboxes = _interopRequireWildcard(require("@digigov/ui/core/Checkboxes"));
+
+var _Field = _interopRequireWildcard(require("@digigov/ui/core/Field"));
+
+var _Hint = _interopRequireDefault(require("@digigov/ui/typography/Hint"));
+
+var _VisuallyHidden = _interopRequireDefault(require("@digigov/react-core/VisuallyHidden"));
+
+var _ErrorMessage = _interopRequireDefault(require("@digigov/react-core/ErrorMessage"));
+
+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(_Field["default"], {
+  error: true
+}, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, "\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(_ErrorMessage["default"], null, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2 \u03C3\u03C4\u03B9\u03C2 \u03BF\u03C0\u03BF\u03AF\u03B5\u03C2 \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5, \u03AE \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \xAB\u038C\u03C7\u03B9, \u03B4\u03B5\u03BD \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03C9 \u03C3\u03B5 \u03BA\u03B1\u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2\xBB."), /*#__PURE__*/_react["default"].createElement(_Checkboxes["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {
+  checked: true,
+  name: "en",
+  value: "en"
+}, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {
+  name: "fr",
+  value: "fever"
+}, "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement("div", {
+  className: "govgr-checkboxes__divider"
+}, "\u03AE"), /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {
+  checked: true,
+  name: "none",
+  value: "none"
+}, "\u038C\u03C7\u03B9, \u03B4\u03B5\u03BD \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03C9 \u03C3\u03B5 \u03BA\u03B1\u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2"))));
+
+var NoneAnswer = function NoneAnswer() {
+  return _ref;
+};
+
+exports.NoneAnswer = NoneAnswer;
+var _default = NoneAnswer;
+exports["default"] = _default;

package/core/Checkboxes/checkboxes.mdx

@@ -0,0 +1,54 @@
+---
+id: checkboxes
+title: Checkboxes
+---
+
+
+# Checkboxes
+
+ 
+
+
+```bash
+import Checkboxes from '@digigov/ui/core/Checkboxes';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Checkboxes" story="Default.tsx" />
+
+### If you’re asking more than one question on the page
+
+<Story packageName="@digigov/ui" component="core/Checkboxes" story="MultipleQuestions.tsx" />
+
+### Checkbox items with hints
+
+You can add hints to checkbox items to provide additional information about the options.
+
+<Story packageName="@digigov/ui" component="core/Checkboxes" story="WithHint.tsx" />
+
+### Add an option for ‘none’
+
+When ‘none’ would be a valid answer, give users the option to check a box to say none of the other options apply to them — without this option, users would have to leave all of the boxes unchecked. Giving users this option also makes sure they do not skip the question by accident.
+
+<Story packageName="@digigov/ui" component="core/Checkboxes" story="NoneAnswer.tsx" />
+
+If JavaScript is unavailable, and a user selects both the ‘none’ checkbox and another checkbox, display an error message.
+
+<Story packageName="@digigov/ui" component="core/Checkboxes" story="NoneAnswerWithError.tsx" />
+
+### Error messages
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/Checkboxes" story="WithErrorMessage.tsx" />
+
+## Conditionally revealing a related question
+
+You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.
+
+This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.
+
+<Story packageName="@digigov/ui" component="core/Checkboxes" story="ConditionalReveal.tsx" />
+
+

package/core/Confirmation/confirmation.mdx

@@ -0,0 +1,19 @@
+---
+id: confirmation
+title: Confirmation
+---
+
+
+# Confirmation
+
+
+ 
+
+
+```bash
+import Confirmation from '@digigov/ui/core/Confirmation';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Confirmation" story="Default.tsx" />

package/core/DateInput/DateInput.stories.d.ts

@@ -4,6 +4,7 @@ declare namespace _default {
 }
 export default _default;
 export * from "@digigov/ui/core/DateInput/__stories__/Default";
+export * from "@digigov/ui/core/DateInput/__stories__/MultipleQuestions";
 export * from "@digigov/ui/core/DateInput/__stories__/WithErrorMessage";
 export * from "@digigov/ui/core/DateInput/__stories__/WithErrorMessageForSingleField";
 import DateInput from "@digigov/ui/core/DateInput";

package/core/DateInput/DateInput.stories.js

@@ -24,6 +24,20 @@ Object.keys(_Default).forEach(function (key) {
   });
 });
 
+var _MultipleQuestions = require("@digigov/ui/core/DateInput/__stories__/MultipleQuestions");
+
+Object.keys(_MultipleQuestions).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _MultipleQuestions[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _MultipleQuestions[key];
+    }
+  });
+});
+
 var _WithErrorMessage = require("@digigov/ui/core/DateInput/__stories__/WithErrorMessage");
 
 Object.keys(_WithErrorMessage).forEach(function (key) {

package/core/DateInput/__stories__/Default.js

@@ -21,7 +21,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, null, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03BF \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null, /*#__PURE__*/_react["default"].createElement(_DateInput.DateInputItem, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, {
+  heading: true
+}, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03BF \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null, /*#__PURE__*/_react["default"].createElement(_DateInput.DateInputItem, {
   name: "day"
 }, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/_react["default"].createElement(_DateInput.DateInputItem, {
   name: "month"

package/core/DateInput/__stories__/MultipleQuestions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const MultipleQuestions: () => JSX.Element;
+export default MultipleQuestions;

package/core/DateInput/__stories__/MultipleQuestions.js

@@ -0,0 +1,41 @@
+"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.MultipleQuestions = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DateInput = _interopRequireWildcard(require("@digigov/ui/core/DateInput"));
+
+var _Field = _interopRequireWildcard(require("@digigov/ui/core/Field"));
+
+var _Hint = _interopRequireDefault(require("@digigov/ui/typography/Hint"));
+
+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(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, {
+  size: "m"
+}, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03BF \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null, /*#__PURE__*/_react["default"].createElement(_DateInput.DateInputItem, {
+  name: "day"
+}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/_react["default"].createElement(_DateInput.DateInputItem, {
+  name: "month"
+}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_DateInput.DateInputItem, {
+  width: 4,
+  name: "year"
+}, "\u03A7\u03C1\u03CC\u03BD\u03BF\u03C2"))));
+
+var MultipleQuestions = function MultipleQuestions() {
+  return _ref;
+};
+
+exports.MultipleQuestions = MultipleQuestions;
+var _default = MultipleQuestions;
+exports["default"] = _default;

package/core/DateInput/index.mdx

@@ -0,0 +1,34 @@
+---
+id: date-input
+title: DateInput
+---
+
+
+# DateInput
+
+
+ 
+
+
+```bash
+import DateInput from '@digigov/ui/core/DateInput';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/DateInput" story="Default.tsx" />
+
+### If you’re asking more than one question on the page
+
+<Story packageName="@digigov/ui" component="core/DateInput" story="MultipleQuestions.tsx" />
+
+
+### Error message
+
+If you’re highlighting the whole date, style all the fields like this:
+
+<Story packageName="@digigov/ui" component="core/DateInput" story="WithErrorMessage.tsx" />
+
+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="core/DateInput" story="WithErrorMessageForSingleField.tsx" />

package/core/Details/index.mdx

@@ -1,34 +1,18 @@
 ---
-parent: docs/ui/components
+id: details
 title: Details
 ---
 
-## Example
+# Details
 
-```jsx live
-<Details>
-  <DetailsSummary>Help with nationality</DetailsSummary>
-  <DetailsContent>
-    We need to know your nationality so we can work out which elections you’re
-    entitled to vote in. If you cannot provide your nationality, you’ll have to
-    send copies of identity documents through the post.
-  </DetailsContent>
-</Details>
-```
+The details component is a short link that shows more detailed help text when a user clicks on it.
+ 
 
-<br />
 
-## When to use this component
+```bash
+import Details from '@digigov/ui/core/Details';
+``` 
 
-Use the Details component to make a page easier to scan when it contains
-information that only some users will need.
+## How to use
 
-## When not to use this component
-
-Do not use the Details component to hide information that the majority of
-your users should see.
-
-## How it works
-
-The Details component is a short link that expands into a text including some
-extra information, when a user clicks on it.
+<Story packageName="@digigov/ui" component="core/Details" story="Default.tsx" />

package/core/ErrorMessage/__stories__/Default.js

@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], {
   error: true
-}, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, "\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(_ErrorMessage["default"], null, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2."), /*#__PURE__*/_react["default"].createElement(_Checkboxes["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {
+}, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, "\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(_ErrorMessage["default"], null, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2."), /*#__PURE__*/_react["default"].createElement(_Checkboxes["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {
   name: "cold",
   value: "cold"
 }, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {

package/core/ErrorMessage/index.mdx

@@ -0,0 +1,21 @@
+---
+id: error-message
+title: ErrorMessage
+---
+
+
+# ErrorMessage
+
+Follow the validation pattern and show an error message when there is a validation error. 
+In the error message explain what went wrong and how to fix it.
+ 
+
+
+```bash
+import ErrorMessage from '@digigov/ui/core/ErrorMessage';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/ErrorMessage" story="Default.tsx" />
+

package/core/ErrorSummary/__stories__/LinkedToCheckbox.js

@@ -36,7 +36,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement("div", {
 }, /*#__PURE__*/_react["default"].createElement(_ErrorSummary["default"], null, /*#__PURE__*/_react["default"].createElement(_Title["default"], {
   size: "sm"
 }, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
-  href: "#thisone"
+  href: "#england"
 }, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2.")), /*#__PURE__*/_react["default"].createElement(_Field["default"], {
   error: true
 }, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, "\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(_ErrorMessage["default"], null, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2."), /*#__PURE__*/_react["default"].createElement(_Checkboxes["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {