@digigov/ui 0.21.3 → 0.22.0

package/esm/core/Accordion/index.mdx

@@ -1,101 +1,28 @@
 ---
+id: accordion
 title: Accordion
-parent: docs/ui/components
 ---
 
-import {
-  Accordion,
-  AccordionItem,
-  AccordionItemDetails,
-  AccordionItemSummary,
-} from '@digigov/ui/core/Accordion';
 
-## Example
+# Accordion
 
-<Accordion>
-  <AccordionItem>
-    <AccordionItemSummary>Βασικες Ρυθμισεις</AccordionItemSummary>
-    <AccordionItemDetails>Περιεχομενο Βασικων Ρυθμισεων</AccordionItemDetails>
-  </AccordionItem>
-  <AccordionItem>
-    <AccordionItemSummary>Υπολοιπες Ρυθμισεις</AccordionItemSummary>
-    <AccordionItemDetails>Περιεχομενο Υπολοιπων Ρυθμισεων</AccordionItemDetails>
-  </AccordionItem>
-</Accordion>
+This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.
 
-## How to use
-
-```jsx live path=core/Accordion/index.tsx
-import {
-  Accordion,
-  AccordionItem,
-  AccordionItemDetails,
-  AccordionItemSummary,
-} from 'govgr/components/Accordion';
-
-function CustomAccordion() {
-  return (
-    <Accordion>
-      <AccordionItem>
-        <AccordionItemSummary>Βασικες Ρυθμισεις</AccordionItemSummary>
-        <AccordionItemDetails>
-          Περιεχομενο Βασικων Ρυθμισεων
-        </AccordionItemDetails>
-      </AccordionItem>
-      <AccordionItem>
-        <AccordionItemSummary>Υπολοιπες Ρυθμισεις</AccordionItemSummary>
-        <AccordionItemDetails>
-          Περιεχομενο Υπολοιπων Ρυθμισεων
-        </AccordionItemDetails>
-      </AccordionItem>
-    </Accordion>
-  );
-}
-```
-
-## When to use this component
-
-Only use an accordion if there’s evidence it’s helpful for users to:
-
-- see an overview of multiple, related sections of content
-- show and hide those sections as needed
+The accordion component lets users show and hide sections of related content on a page.
 
-Accordions can work well for people who use a service regularly, for example users of caseworking systems who need to perform familiar tasks quickly.
+ 
 
-## When not to use this component
 
-Accordions hide content from users and not everyone will notice them or understand how they work. For this reason do not use an accordion for content which is essential to all users.
+```bash
+import Accordion from '@digigov/ui/core/Accordion';
+``` 
 
-Test your content without an accordion first. Consider if it’s better to:
-
-- simplify and reduce the amount of content
-- split the content across multiple pages
-- keep the content on a single page, separated by headings
-- use a list of links to let users navigate quickly to specific sections of content
-
-Do not use the accordion component if the amount of content it would need to contain will make the page slow to load.
-
-Accordions work best for simple content and links. Do not use accordions to split up a series of questions into sections. Use separate pages instead.
-
-## API
+## How to use
 
-### Properties
+<Story packageName="@digigov/ui" component="core/Accordion" story="Default.tsx" />
 
-<PropsDoc data={Accordion.__doc__} />
-<br />
-<PropsDoc data={AccordionItem.__doc__} />
-<br />
-<PropsDoc data={AccordionItemSummary.__doc__} />
-<br />
-<PropsDoc data={AccordionItemDetails.__doc__} />
+### Accordion with Hints
 
-### Styles
+Accordions hide content, so the labels need to be clear. If necessary, you can add a summary line to help users understand what is in the section.
 
-<StylesDoc data={Accordion.__doc__} />
-<br />
-<StylesDoc data={AccordionItem.__doc__} />
-<br />
-<StylesDoc data={AccordionItemSummary.__doc__} />
-<br />
-<StylesDoc data={AccordionItemDetails.__doc__} />
-<br />
+<Story packageName="@digigov/ui" component="core/Accordion" story="WithHints.tsx" />

package/esm/core/BackLink/index.mdx

@@ -0,0 +1,16 @@
+---
+id: back-link
+title: Back Link
+---
+
+# Back Link
+
+Use the back link component to help users go back to the previous page in a multi-page transaction.
+
+```bash
+import BackLink from "@digigov/ui/core/BackLink";
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/BackLink" story="Default.tsx" />

package/esm/core/Blockquote/index.mdx

@@ -1,8 +1,23 @@
 ---
-parent: docs/ui/components
+id: blockquote
 title: Blockquote
 ---
 
+
+# Blockquote
+
+This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.
+
+The Blockquote component lets users show and hide sections of related content on a page.
+
+ 
+
+
+```bash
 import Blockquote from '@digigov/ui/core/Blockquote';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Blockquote" story="Default.tsx" />
 
-## Example

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

@@ -1,7 +1,15 @@
 import React from 'react';
 import Breadcrumbs, { BreadcrumbsList, BreadcrumbsListItem } from '@digigov/ui/core/Breadcrumbs';
 
-var _ref = /*#__PURE__*/React.createElement(Breadcrumbs, null, /*#__PURE__*/React.createElement(BreadcrumbsList, null, /*#__PURE__*/React.createElement(BreadcrumbsListItem, null, "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE"), /*#__PURE__*/React.createElement(BreadcrumbsListItem, null, "\u03A5\u03B3\u03B5\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03C0\u03C1\u03CC\u03BD\u03BF\u03B9\u03B1"), /*#__PURE__*/React.createElement(BreadcrumbsListItem, null, "\u03A6\u03AC\u03BA\u03B5\u03BB\u03BF\u03C2 \u03C5\u03B3\u03B5\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(BreadcrumbsListItem, null, "\u0386\u03C5\u03BB\u03B7 \u03C3\u03C5\u03BD\u03C4\u03B1\u03B3\u03BF\u03B3\u03C1\u03AC\u03C6\u03B7\u03C3\u03B7")));
+var _ref = /*#__PURE__*/React.createElement(Breadcrumbs, null, /*#__PURE__*/React.createElement(BreadcrumbsList, null, /*#__PURE__*/React.createElement(BreadcrumbsListItem, {
+  href: "#"
+}, "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE"), /*#__PURE__*/React.createElement(BreadcrumbsListItem, {
+  href: "#"
+}, "\u03A5\u03B3\u03B5\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03C0\u03C1\u03CC\u03BD\u03BF\u03B9\u03B1"), /*#__PURE__*/React.createElement(BreadcrumbsListItem, {
+  href: "#"
+}, "\u03A6\u03AC\u03BA\u03B5\u03BB\u03BF\u03C2 \u03C5\u03B3\u03B5\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(BreadcrumbsListItem, {
+  href: "#"
+}, "\u0386\u03C5\u03BB\u03B7 \u03C3\u03C5\u03BD\u03C4\u03B1\u03B3\u03BF\u03B3\u03C1\u03AC\u03C6\u03B7\u03C3\u03B7")));
 
 export var Default = function Default() {
   return _ref;

package/esm/core/Breadcrumbs/breadcrumbs.mdx

@@ -0,0 +1,22 @@
+---
+id: breadcrumbs
+title: Breadcrumbs
+---
+
+
+# Breadcrumbs
+
+This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.
+
+The Breadcrumbs component lets users show and hide sections of related content on a page.
+
+ 
+
+
+```bash
+import Breadcrumbs from '@digigov/ui/core/Breadcrumbs';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Breadcrumbs" story="Default.tsx" />

package/esm/core/Button/Button.mdx

@@ -9,18 +9,53 @@ Use the button component to help users carry out an action like starting an
 application or saving their information.
 
  
-## How to import
+
 
 ```bash
 import Button from '@digigov/ui/core/Button';
 ``` 
 
-## Usage
+## How to use
+
+### Default buttons
+
+Use a default button for the main call to action on a page.
 
 <Story packageName="@digigov/ui" component="core/Button" story="Primary.tsx" />
 
+
+### Start buttons
+Use a start button for the main call to action on your service’s start page. Start buttons do not submit form data, so they use a link tag rather than a button tag.
+
+<Story packageName="@digigov/ui" component="core/Button" story="CallToActionButton.tsx" />
+
+### Secondary buttons
+Use secondary buttons for secondary calls to action on a page.
+
 <Story packageName="@digigov/ui" component="core/Button" story="Secondary.tsx" />
 
+### Warning buttons
+Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.
+
+<Story packageName="@digigov/ui" component="core/Button" story="Warning.tsx" />
+
+### Disable buttons
+Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.
+
+<Story packageName="@digigov/ui" component="core/Button" story="Disabled.tsx" />
+
+
+### Grouping buttons
+Use a button group when two or more buttons are placed together.
+
+<Story packageName="@digigov/ui" component="core/Button" story="GroupingButtons.tsx" />
+
+Any links within a button group will automatically align with the buttons.
+
+<Story packageName="@digigov/ui" component="core/Button" story="GroupingButtonsAndLinks.tsx" />
+
+
+
 Write button text in sentence case, describing the action it performs. For
 example:'
 

package/esm/core/Button/Button.stories.js

@@ -7,4 +7,6 @@ export * from './__stories__/Primary';
 export * from './__stories__/Secondary';
 export * from './__stories__/Warning';
 export * from './__stories__/GroupingButtons';
-export * from './__stories__/GroupingButtonsAndLinks';
+export * from './__stories__/GroupingButtonsAndLinks';
+export * from './__stories__/CallToActionButton';
+export * from './__stories__/Disabled';

package/esm/core/Button/__stories__/CallToActionButton.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CallToAction } from '@digigov/ui/core/Button';
+
+var _ref = /*#__PURE__*/React.createElement(CallToAction, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var CallToActionButton = function CallToActionButton() {
+  return _ref;
+};
+export default CallToActionButton;

package/esm/core/Button/__stories__/Disabled.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Button from '@digigov/ui/core/Button';
+/**
+ * My primary descrition is the best description that was described
+ */
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  disabled: true
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Disabled = function Disabled() {
+  return _ref;
+};
+export default Disabled;

package/esm/core/Button/__stories__/Warning.js

@@ -7,4 +7,5 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 
 export var Warning = function Warning() {
   return _ref;
-};
+};
+export default Warning;

package/esm/core/Card/Card.stories.js

@@ -10,4 +10,5 @@ export * from '@digigov/ui/core/Card/__stories__/WithGrayTopBorder';
 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__/WithClickableLink';
+export * from '@digigov/ui/core/Card/__stories__/WithGroupButton';

package/esm/core/Card/__stories__/WithClickableLink.js

@@ -1,11 +1,10 @@
 import React from 'react';
-import Card, { CardAction, CardHeading, CardText } from '@digigov/ui/core/Card';
-import Button from '@digigov/ui/core/Button';
+import Card, { CardHeading, CardText } from '@digigov/ui/core/Card';
 import Link from '@digigov/ui/core/Link';
 
 var _ref = /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeading, null, /*#__PURE__*/React.createElement(Link, {
   href: "#"
-}, "\u0393\u03B5\u03C9\u03C1\u03B3\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03AF\u03B1")), /*#__PURE__*/React.createElement(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.createElement(CardAction, null, /*#__PURE__*/React.createElement(Button, 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.createElement(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."));
 
 export var WithClickableLink = function WithClickableLink() {
   return _ref;

package/esm/core/Card/__stories__/WithGroupButton.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Card, { CardHeading, CardText, CardAction } from '@digigov/ui/core/Card';
+import Button, { ButtonGroup } from '@digigov/ui/core/Button';
+import Link from '@digigov/ui/core/Link';
+
+var _ref = /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(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.createElement(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.createElement(CardAction, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1"), /*#__PURE__*/React.createElement(Link, null, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
+
+export var WithGroupButton = function WithGroupButton() {
+  return _ref;
+};
+export default WithGroupButton;

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

@@ -7,5 +7,6 @@ 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';

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/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/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/DateInput/DateInput.stories.js

@@ -4,5 +4,6 @@ export default {
   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

@@ -3,7 +3,9 @@ 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, 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(DateInput, null, /*#__PURE__*/React.createElement(DateInputItem, {
+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"

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/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/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" />