@digigov/ui 0.21.1 → 0.22.0

package/esm/core/Checkboxes/__stories__/Default.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Hint from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(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.createElement(Hint, null, "\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.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "cold",
+  value: "cold"
+}, "\u0388\u03C7\u03C9 \u03C3\u03C5\u03BD\u03AC\u03C7\u03B9"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "fever",
+  value: "fever"
+}, "\u0388\u03C7\u03C9 \u03C0\u03C5\u03C1\u03B5\u03C4\u03CC"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "fatigue",
+  value: "fatigue"
+}, "\u0391\u03B9\u03C3\u03B8\u03AC\u03BD\u03BF\u03BC\u03B1\u03B9 \u03BA\u03BF\u03CD\u03C1\u03B1\u03C3\u03B7"))));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/esm/core/Checkboxes/__stories__/MultipleQuestions.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Hint from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "s"
+}, "\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.createElement(Hint, null, "\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.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "cold",
+  value: "cold"
+}, "\u0388\u03C7\u03C9 \u03C3\u03C5\u03BD\u03AC\u03C7\u03B9"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "fever",
+  value: "fever"
+}, "\u0388\u03C7\u03C9 \u03C0\u03C5\u03C1\u03B5\u03C4\u03CC"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "fatigue",
+  value: "fatigue"
+}, "\u0391\u03B9\u03C3\u03B8\u03AC\u03BD\u03BF\u03BC\u03B1\u03B9 \u03BA\u03BF\u03CD\u03C1\u03B1\u03C3\u03B7"))));
+
+export var MultipleQuestions = function MultipleQuestions() {
+  return _ref;
+};
+export default MultipleQuestions;

package/esm/core/Checkboxes/__stories__/NoneAnswer.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Hint from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(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.createElement(Hint, 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.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "cold",
+  value: "cold"
+}, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "fever",
+  value: "fever"
+}, "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement("div", {
+  className: "govgr-checkboxes__divider"
+}, "\u03AE"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "fatigue",
+  value: "fatigue"
+}, "\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"))));
+
+export var NoneAnswer = function NoneAnswer() {
+  return _ref;
+};
+export default NoneAnswer;

package/esm/core/Checkboxes/__stories__/NoneAnswerWithError.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Hint from '@digigov/ui/typography/Hint';
+import VisuallyHidden from '@digigov/react-core/VisuallyHidden';
+import ErrorMessage from '@digigov/react-core/ErrorMessage';
+
+var _ref = /*#__PURE__*/React.createElement(Field, {
+  error: true
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(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.createElement(Hint, 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.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, 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.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+  checked: true,
+  name: "en",
+  value: "en"
+}, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "fr",
+  value: "fever"
+}, "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement("div", {
+  className: "govgr-checkboxes__divider"
+}, "\u03AE"), /*#__PURE__*/React.createElement(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"))));
+
+export var NoneAnswer = function NoneAnswer() {
+  return _ref;
+};
+export default NoneAnswer;

package/esm/core/Checkboxes/__stories__/WithErrorMessage.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import ErrorMessage from '@digigov/ui/core/ErrorMessage';
+import Hint from '@digigov/ui/typography/Hint';
+import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+
+var _ref = /*#__PURE__*/React.createElement(Field, {
+  error: true
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(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.createElement(Hint, 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.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, 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.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "cold",
+  value: "cold"
+}, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "fever",
+  value: "fever"
+}, "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1"))));
+
+export var WithErrorMessage = function WithErrorMessage() {
+  return _ref;
+};
+export default WithErrorMessage;

package/esm/core/Checkboxes/__stories__/WithHint.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Hint from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03B5\u03B8\u03BD\u03B9\u03BA\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, 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.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "cold",
+  value: "cold"
+}, "\u0395\u03BB\u03BB\u03B7\u03BD\u03B9\u03BA\u03AE", /*#__PURE__*/React.createElement(Hint, null, "\u03C3\u03C5\u03BC\u03C0\u03B5\u03C1\u03B9\u03BB\u03B1\u03BC\u03B2\u03B1\u03BD\u03BF\u03BC\u03AD\u03BD\u03C9\u03BD \u03B1\u03C0\u03CC\u03B4\u03B7\u03BC\u03C9\u03BD \u03C0\u03BF\u03BB\u03B9\u03C4\u03CE\u03BD")), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "fever",
+  value: "fever"
+}, "\u039A\u03C5\u03C0\u03C1\u03B9\u03B1\u03BA\u03AE"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "fatigue",
+  value: "fatigue"
+}, "\u0386\u03BB\u03BB\u03B7 \u03C7\u03CE\u03C1\u03B1"))));
+
+export var WithHint = function WithHint() {
+  return _ref;
+};
+export default WithHint;

package/esm/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/esm/core/Checkboxes/index.js

@@ -0,0 +1,5 @@
+export * from '@digigov/react-core/Checkbox';
+export * from '@digigov/react-core/CheckboxItem';
+export * from '@digigov/react-core/CheckboxConditional';
+import Checkbox from '@digigov/react-core/Checkbox';
+export default Checkbox;

package/esm/core/Confirmation/Confirmation.stories.js

@@ -0,0 +1,6 @@
+import Confirmation from "@digigov/ui/core/Confirmation";
+export default {
+  title: 'Digigov UI/core/Confirmation',
+  component: Confirmation
+};
+export * from './__stories__/Default';

package/esm/core/Confirmation/__stories__/Default.js

@@ -0,0 +1,9 @@
+import React from "react";
+import Confirmation, { ConfirmationBody, ConfirmationTitle } from "@digigov/ui/core/Confirmation";
+
+var _ref = /*#__PURE__*/React.createElement(Confirmation, null, /*#__PURE__*/React.createElement(ConfirmationTitle, null, "\u0397 \u03C6\u03CC\u03C1\u03BC\u03B1 \u03C5\u03C0\u03BF\u03B2\u03BB\u03AE\u03B8\u03B7\u03BA\u03B5 \u03B5\u03C0\u03B9\u03C4\u03C5\u03C7\u03CE\u03C2"), /*#__PURE__*/React.createElement(ConfirmationBody, null, "\u039F \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u03B5\u03B3\u03B3\u03C1\u03AC\u03C6\u03BF\u03C5 ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "HDJ2123F")));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/esm/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/esm/core/Confirmation/index.js

@@ -0,0 +1,5 @@
+export * from '@digigov/react-core/Confirmation';
+export * from '@digigov/react-core/ConfirmationTitle';
+export * from '@digigov/react-core/ConfirmationBody';
+import Confirmation from '@digigov/react-core/Confirmation';
+export default Confirmation;

package/esm/core/DateInput/DateInput.stories.js

@@ -0,0 +1,9 @@
+import DateInput from '@digigov/ui/core/DateInput';
+export default {
+  title: 'Digigov UI/core/DateInput',
+  component: DateInput
+};
+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';

package/esm/core/DateInput/__stories__/Default.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import DateInput, { DateInputItem } from '@digigov/ui/core/DateInput';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Hint from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(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.createElement(Hint, null, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/React.createElement(DateInput, null, /*#__PURE__*/React.createElement(DateInputItem, {
+  name: "day"
+}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/React.createElement(DateInputItem, {
+  name: "month"
+}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/React.createElement(DateInputItem, {
+  width: 4,
+  name: "year"
+}, "\u03A7\u03C1\u03CC\u03BD\u03BF\u03C2"))));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/esm/core/DateInput/__stories__/MultipleQuestions.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import DateInput, { DateInputItem } from '@digigov/ui/core/DateInput';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Hint from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(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.createElement(Hint, null, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/React.createElement(DateInput, null, /*#__PURE__*/React.createElement(DateInputItem, {
+  name: "day"
+}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/React.createElement(DateInputItem, {
+  name: "month"
+}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/React.createElement(DateInputItem, {
+  width: 4,
+  name: "year"
+}, "\u03A7\u03C1\u03CC\u03BD\u03BF\u03C2"))));
+
+export var MultipleQuestions = function MultipleQuestions() {
+  return _ref;
+};
+export default MultipleQuestions;

package/esm/core/DateInput/__stories__/WithErrorMessage.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import DateInput, { DateInputItem } from '@digigov/ui/core/DateInput';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Hint from '@digigov/ui/typography/Hint';
+import ErrorMessage from '@digigov/ui/core/ErrorMessage';
+import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+
+var _ref = /*#__PURE__*/React.createElement(Field, {
+  error: true
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(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.createElement(Hint, null, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03AD\u03BA\u03B4\u03BF\u03C3\u03B7\u03C2 \u03C4\u03BF\u03C5 \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03B7\u03C1\u03AF\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD."), /*#__PURE__*/React.createElement(DateInput, null, /*#__PURE__*/React.createElement(DateInputItem, {
+  error: true,
+  name: "day"
+}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/React.createElement(DateInputItem, {
+  error: true,
+  name: "month"
+}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/React.createElement(DateInputItem, {
+  error: true,
+  width: 4,
+  name: "year"
+}, "\u03A7\u03C1\u03CC\u03BD\u03BF\u03C2"))));
+
+export var WithErrorMessage = function WithErrorMessage() {
+  return _ref;
+};
+export default WithErrorMessage;

package/esm/core/DateInput/__stories__/WithErrorMessageForSingleField.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import DateInput, { DateInputItem } from '@digigov/ui/core/DateInput';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Hint from '@digigov/ui/typography/Hint';
+import ErrorMessage from '@digigov/ui/core/ErrorMessage';
+import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+
+var _ref = /*#__PURE__*/React.createElement(Field, {
+  error: true
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(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.createElement(Hint, null, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03AD\u03BA\u03B4\u03BF\u03C3\u03B7\u03C2 \u03C4\u03BF\u03C5 \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03B7\u03C1\u03AF\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD."), /*#__PURE__*/React.createElement(DateInput, null, /*#__PURE__*/React.createElement(DateInputItem, {
+  name: "day"
+}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/React.createElement(DateInputItem, {
+  name: "month"
+}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/React.createElement(DateInputItem, {
+  error: true,
+  width: 4,
+  name: "year"
+}, "\u03A7\u03C1\u03CC\u03BD\u03BF\u03C2"))));
+
+export var WithErrorMessageForSingleField = function WithErrorMessageForSingleField() {
+  return _ref;
+};
+export default WithErrorMessageForSingleField;

package/esm/core/DateInput/index.js

@@ -0,0 +1,4 @@
+export * from '@digigov/react-core/DateInput';
+export * from '@digigov/react-core/DateInputItem';
+import DateInput from '@digigov/react-core/DateInput';
+export default DateInput;

package/esm/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/esm/core/Details/Details.stories.js

@@ -0,0 +1,6 @@
+import Details from "@digigov/ui/core/Details";
+export default {
+  title: 'Digigov UI/core/Details',
+  component: Details
+};
+export * from './__stories__/Default';

package/esm/core/Details/__stories__/Default.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import Details, { DetailsSummary, DetailsContent } from '@digigov/ui/core/Details';
+
+var _ref = /*#__PURE__*/React.createElement(Details, null, /*#__PURE__*/React.createElement(DetailsSummary, null, "\u0392\u03BF\u03AE\u03B8\u03B5\u03B9\u03B1 \u03BC\u03B5 \u03B4\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7 \u03BA\u03B1\u03C4\u03BF\u03B9\u03BA\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(DetailsContent, null, "\u03A7\u03C1\u03B5\u03B9\u03AC\u03B6\u03B5\u03C4\u03B1\u03B9 \u03BD\u03B1 \u03B3\u03BD\u03C9\u03C1\u03AF\u03B6\u03BF\u03C5\u03BC\u03B5 \u03C4\u03B7 \u03B4\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7 \u03BA\u03B1\u03C4\u03BF\u03B9\u03BA\u03AF\u03B1\u03C2 \u03C3\u03B1\u03C2 \u03CE\u03C3\u03C4\u03B5 \u03BD\u03B1 \u03BC\u03C0\u03BF\u03C1\u03BF\u03CD\u03BC\u03B5 \u03BD\u03B1 \u03C3\u03B1\u03C2 \u03C3\u03C4\u03B5\u03AF\u03BB\u03BF\u03C5\u03BC\u03B5 \u03C4\u03B1 \u03AD\u03BD\u03C4\u03C5\u03C0\u03B1 \u03BC\u03AD\u03C3\u03C9 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF\u03C5. \u03A3\u03B5 \u03C0\u03B5\u03C1\u03AF\u03C0\u03C4\u03C9\u03C3\u03B7 \u03C0\u03BF\u03C5 \u03B4\u03B5\u03BD \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03C0\u03B1\u03C1\u03AD\u03C7\u03B5\u03C4\u03B5 \u03BC\u03B9\u03B1 \u03AD\u03B3\u03BA\u03C5\u03C1\u03B7 \u03B4\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7 \u03BA\u03B1\u03C4\u03BF\u03B9\u03BA\u03AF\u03B1\u03C2, \u03C0\u03B1\u03C1\u03B1\u03BA\u03B1\u03BB\u03BF\u03CD\u03BC\u03B5 \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AE\u03C3\u03C4\u03B5 \u03BC\u03B1\u03B6\u03AF \u03BC\u03B1\u03C2."));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/esm/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/esm/core/Divider/Divider.stories.js

@@ -0,0 +1,7 @@
+/* eslint-disable digigov/no-relative-imports */
+import Divider from '@digigov/ui/core/Divider';
+export default {
+  title: 'Digigov UI/core/Divider',
+  component: Divider
+};
+export * from './__stories__/Default';

package/esm/core/Divider/__stories__/Default.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Divider from '@digigov/ui/core/Divider';
+
+var _ref = /*#__PURE__*/React.createElement(Divider, {
+  visible: true
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(Divider, {
+  visible: true,
+  size: "m"
+});
+
+var _ref3 = /*#__PURE__*/React.createElement(Divider, {
+  visible: true,
+  size: "l"
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(Divider, {
+  visible: true,
+  size: "xl"
+});
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2, _ref3, _ref4);
+};
+export default Default;

package/esm/core/ErrorMessage/ErrorMessage.stories.js

@@ -0,0 +1,6 @@
+import ErrorMessage from "@digigov/ui/core/ErrorMessage";
+export default {
+  title: 'Digigov UI/core/ErrorMessage',
+  component: ErrorMessage
+};
+export * from './__stories__/Default';

package/esm/core/ErrorMessage/__stories__/Default.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import ErrorMessage from '@digigov/ui/core/ErrorMessage';
+import Hint from '@digigov/ui/typography/Hint';
+import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+
+var _ref = /*#__PURE__*/React.createElement(Field, {
+  error: true
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(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.createElement(Hint, 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.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, 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.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "cold",
+  value: "cold"
+}, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "fever",
+  value: "fever"
+}, "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1"))));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/esm/core/ErrorMessage/index.js

@@ -0,0 +1,3 @@
+export * from '@digigov/react-core/ErrorMessage';
+import ErrorMessage from '@digigov/react-core/ErrorMessage';
+export default ErrorMessage;

package/esm/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/esm/core/ErrorSummary/ErrorSummary.stories.js

@@ -0,0 +1,9 @@
+import ErrorSummary from "@digigov/ui/core/ErrorSummary";
+export default {
+  title: 'Digigov UI/core/ErrorSummary',
+  component: ErrorSummary
+};
+export * from './__stories__/Default';
+export * from './__stories__/LinkedToInput';
+export * from './__stories__/LinkedToField';
+export * from './__stories__/LinkedToCheckbox';

package/esm/core/ErrorSummary/__stories__/Default.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import ErrorSummary from '@digigov/ui/core/ErrorSummary';
+import Title from '@digigov/ui/typography/Title';
+import Link from '@digigov/ui/core/Link';
+
+var _ref = /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Title, {
+  size: "sm"
+}, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/React.createElement(Link, null, "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03AD\u03C4\u03BF\u03C2"));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/esm/core/ErrorSummary/__stories__/LinkedToCheckbox.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import ErrorSummary from '@digigov/ui/core/ErrorSummary';
+import Title from '@digigov/ui/typography/Title';
+import Link from '@digigov/ui/core/Link';
+import Hint from '@digigov/ui/typography/Hint';
+import ErrorMessage from "@digigov/ui/core/ErrorMessage";
+import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
+import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
+
+var _ref = /*#__PURE__*/React.createElement("div", {
+  className: "example"
+}, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Title, {
+  size: "sm"
+}, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/React.createElement(Link, {
+  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.createElement(Field, {
+  error: true
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(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.createElement(Hint, 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.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, 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.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "england",
+  value: "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1",
+  id: "england"
+}, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "france",
+  value: "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1",
+  id: "france"
+}, "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1")))));
+
+export var LinkedToCheckbox = function LinkedToCheckbox() {
+  return _ref;
+};
+export default LinkedToCheckbox;