@digigov/ui 0.21.3 → 0.22.0

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

@@ -7,7 +7,7 @@ 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, {
+}, /*#__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, {

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/__stories__/LinkedToCheckbox.js

@@ -13,7 +13,7 @@ var _ref = /*#__PURE__*/React.createElement("div", {
 }, /*#__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: "#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.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, {

package/esm/core/ErrorSummary/index.mdx

@@ -1,59 +1,42 @@
 ---
-title: Error Summary
-parent: docs/ui/components
+id: error-summary
+title: ErrorSummary
 ---
 
-# Error Summary
 
-import ErrorSummary from '@digigov/ui/core/ErrorSummary';
+# ErrorSummary
 
-## Example
+Use this component at the top of a page to summarise any errors a user has made.
 
-```jsx live path=core/ErrorSummary/index.tsx
-import ErrorSummary from '@digigov/ui/core/ErrorSummary';
-import Paragraph from '@digigov/ui/typography/Paragraph';
-function CustomWarning (props){
- return (
-  <ErrorSummary><Paragraph>Action Label</Paragraph></ErrorSummary>
- )
-}
-export CustomErrorSummary
+When a user makes an error, you must show both an error summary and an error message next to each answer that contains an error.
+ 
 
-```
 
-<br />
+```bash
+import ErrorSummary from '@digigov/ui/core/ErrorSummary';
+``` 
+
+## How to use
 
-## When to use this component
+<Story packageName="@digigov/ui" component="core/ErrorSummary" story="Default.tsx" />
 
-Use this component at the top of a page to summarise any errors a user has
-made.
 
-When a user makes an error, you must show both an error summary and an error
-message next to each answer that contains an error.
+### Linking from the error summary to each answer
 
-## How it works
+You must link the errors in the error summary to the answer they relate to.
 
-You must:
+For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the field.
 
-- move keyboard focus to the error summary
-- include the heading "There is a problem"
-- link to each of the answers that have validation errors
-- make sure the error messages in the error summary are worded the same as
-  those which appear next to the inputs with errors
+<Story packageName="@digigov/ui" component="core/ErrorSummary" story="LinkedToInput.tsx" />
 
-As well as showing an error summary, follow the validation pattern - for
-example, by adding "Error: " to the beginning of the page `<title>` so screen
-readers read it out as soon as possible.
+When a user has to enter their answer into multiple fields, such as the day, month and year fields in the date input component, link to the first field that contains an error.
 
-And make your error messages clear and concise.
+If you do not know which field contains an error, link to the first field.
 
-## API
+<Story packageName="@digigov/ui" component="core/ErrorSummary" story="LinkedToField.tsx" />
 
-### Properties
+For questions that require a user to select one or more options from a list using radios or checkboxes, link to the first radio or checkbox.
 
-<PropsDoc data={ErrorSummary.__doc__} />
-<br />
+<Story packageName="@digigov/ui" component="core/ErrorSummary" story="LinkedToCheckbox.tsx" />
 
-### Styles
 
-<StylesDoc data={ErrorSummary.__doc__} />

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

@@ -9,4 +9,5 @@ var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.crea
 
 export var Default = function Default() {
   return _ref;
-};
+};
+export default Default;

package/esm/core/FileUpload/index.mdx

@@ -0,0 +1,22 @@
+---
+id: file-upload
+title: FileUpload
+---
+
+# FileUpload
+ 
+
+
+```bash
+import FileUpload from '@digigov/ui/core/FileUpload';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/FileUpload" story="Default.tsx" />
+
+### Error message
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/FileUpload" story="WithErrorMessage.tsx" />

package/esm/core/Link/__stories__/DarkBackground.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Link from "@digigov/ui/core/Link";
 import { Masthead } from "@digigov/ui/layouts";
-import SectionBreak from "../../Divider";
+import SectionBreak from "@digigov/ui/core/Divider";
 
 var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, null), /*#__PURE__*/React.createElement(Link, {
   href: "#"

package/esm/core/Link/__stories__/DarkBackgroundNoUnderline.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Link from "@digigov/ui/core/Link";
 import { Masthead } from "@digigov/ui/layouts";
-import SectionBreak from "../../Divider";
+import SectionBreak from "@digigov/ui/core/Divider";
 
 var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, null), /*#__PURE__*/React.createElement(Link, {
   href: "#",

package/esm/core/Link/link.mdx

@@ -0,0 +1,30 @@
+---
+id: link
+title: Link
+---
+
+```bash
+import Link from '@digigov/ui/core/Link';
+``` 
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="core/Link" story="Default.tsx" />
+
+### No Underline
+
+<Story packageName="@digigov/ui" component="core/Link" story="NoUnderline.tsx" />
+
+### Opens in a new tab
+
+<Story packageName="@digigov/ui" component="core/Link" story="OpensInNewTab.tsx" />
+
+### At dark background
+
+<Story packageName="@digigov/ui" component="core/Link" story="DarkBackground.tsx" />
+
+### At dark background and no underline
+
+<Story packageName="@digigov/ui" component="core/Link" story="DarkBackgroundNoUnderline.tsx" />

package/esm/core/List/index.mdx

@@ -1,8 +1,27 @@
 ---
+id: list
 title: List
-parent: docs/ui/components
 ---
 
-import List, { ListItem } from '@digigov/ui/core/List';
 
-## Examples
+```bash
+import List from '@digigov/ui/core/List';
+``` 
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="core/List" story="Default.tsx" />
+
+### List with bullets
+
+<Story packageName="@digigov/ui" component="core/List" story="BulletList.tsx" />
+
+### List with numbers
+
+<Story packageName="@digigov/ui" component="core/List" story="NumberedList.tsx" />
+
+### List with extra space
+
+<Story packageName="@digigov/ui" component="core/List" story="WithExtraSpace.tsx" />

package/esm/core/Masthead/masthead.mdx

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

package/esm/core/NavList/NavList.js

@@ -1,72 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "floating", "horizontal", "subMenu"],
-    _excluded2 = ["horizontal", "openSubMenus", "links"];
+var _excluded = ["horizontal", "openSubMenus", "links"];
 import React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
 import { NavListProvider } from '@digigov/ui/core/NavList/NavListContext';
-export var useNavListStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      padding: theme.spacing(0),
-      margin: theme.spacing(0),
-      display: 'flex',
-      '&$vertical': {
-        flexDirection: 'column'
-      }
-    },
-    subMenu: {
-      marginLeft: theme.spacing(3)
-    },
-    floating: {
-      left: 0,
-      zIndex: 99,
-      position: 'absolute',
-      background: theme.palette.grey['100'],
-      borderTop: "1px solid ".concat(theme.palette.grey['500']),
-      borderRight: "1px solid ".concat(theme.palette.grey['500']),
-      borderLeft: "1px solid ".concat(theme.palette.grey['500']),
-      margin: theme.spacing(1.5, 0, 0, 0),
-      boxShadow: theme.shadows[3],
-      '& > li': {
-        width: '100%',
-        borderBottom: "1px solid ".concat(theme.palette.grey['500']),
-        margin: 0
-      }
-    },
-    vertical: {},
-    floatClear: {
-      clear: 'both'
-    }
-  };
-}, {
-  name: 'MuiNavList'
-});
-export var NavListBase = function NavListBase(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      floating = _ref.floating,
-      horizontal = _ref.horizontal,
-      subMenu = _ref.subMenu,
+import { NavListBase } from '@digigov/ui/core/NavList/NavListBase';
+export var NavList = function NavList(_ref) {
+  var horizontal = _ref.horizontal,
+      _ref$openSubMenus = _ref.openSubMenus,
+      openSubMenus = _ref$openSubMenus === void 0 ? false : _ref$openSubMenus,
+      _ref$links = _ref.links,
+      links = _ref$links === void 0 ? [] : _ref$links,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = useNavListStyles();
-  return /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("ul", {
-    style: props.style,
-    className: clsx(className, classes.root, !horizontal && classes.vertical, floating && classes.floating, subMenu && classes.subMenu)
-  }, children), /*#__PURE__*/React.createElement("div", {
-    className: classes.floatClear
-  }));
-};
-export var NavList = function NavList(_ref2) {
-  var horizontal = _ref2.horizontal,
-      _ref2$openSubMenus = _ref2.openSubMenus,
-      openSubMenus = _ref2$openSubMenus === void 0 ? false : _ref2$openSubMenus,
-      _ref2$links = _ref2.links,
-      links = _ref2$links === void 0 ? [] : _ref2$links,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-
   return /*#__PURE__*/React.createElement(NavListProvider, {
     openSubMenus: openSubMenus,
     horizontal: horizontal,

package/esm/core/NavList/NavListBase.js

@@ -0,0 +1,58 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children", "floating", "horizontal", "subMenu"];
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+export var useNavListStyles = makeStyles(function (theme) {
+  return {
+    root: {
+      padding: theme.spacing(0),
+      margin: theme.spacing(0),
+      display: 'flex',
+      '&$vertical': {
+        flexDirection: 'column'
+      }
+    },
+    subMenu: {
+      marginLeft: theme.spacing(3)
+    },
+    floating: {
+      left: 0,
+      zIndex: 99,
+      position: 'absolute',
+      background: theme.palette.grey['100'],
+      borderTop: "1px solid ".concat(theme.palette.grey['500']),
+      borderRight: "1px solid ".concat(theme.palette.grey['500']),
+      borderLeft: "1px solid ".concat(theme.palette.grey['500']),
+      margin: theme.spacing(1.5, 0, 0, 0),
+      boxShadow: theme.shadows[3],
+      '& > li': {
+        width: '100%',
+        borderBottom: "1px solid ".concat(theme.palette.grey['500']),
+        margin: 0
+      }
+    },
+    vertical: {},
+    floatClear: {
+      clear: 'both'
+    }
+  };
+}, {
+  name: 'MuiNavList'
+});
+export var NavListBase = function NavListBase(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      floating = _ref.floating,
+      horizontal = _ref.horizontal,
+      subMenu = _ref.subMenu,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var classes = useNavListStyles();
+  return /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("ul", {
+    style: props.style,
+    className: clsx(className, classes.root, !horizontal && classes.vertical, floating && classes.floating, subMenu && classes.subMenu)
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: classes.floatClear
+  }));
+};

package/esm/core/NavList/NavListSubMenu.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["links"];
 import React, { useContext } from 'react';
-import { NavListBase } from '@digigov/ui/core/NavList';
+import { NavListBase } from '@digigov/ui/core/NavList/NavListBase';
 import NavListItemBase from '@digigov/ui/core/NavList/NavListItemBase';
 import NavListContext from '@digigov/ui/core/NavList/NavListContext';
 export var NavListSubMenu = function NavListSubMenu(_ref) {

package/esm/core/NavList/types.js

@@ -0,0 +1 @@
+export {};

package/esm/core/NotificationBanner/index.mdx

@@ -1,75 +1,28 @@
 ---
+id: notification-banner
 title: NotificationBanner
-parent: docs/ui/components
 ---
 
 # NotificationBanner
 
-import { NotificationBanner } from '@digigov/ui/core';
+This component is currently experimental because more research is needed to validate it.
 
-### Example for "Important"
+Use a notification banner to tell the user about something they need to know about, but that’s not directly related to the page content.
+ 
 
-```jsx live path=layouts/Basic/index.tsx
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
-import Paragraph from '@digigov/ui/typography/Paragraph';
 
-function NotificationBanner{
- return (
-      <NotificationBanner>
-      This is important !
-     </NotificationBanner>
- )
-}
-export NotificationBanner
+```bash
+import NotificationBanner from '@digigov/ui/core/NotificationBanner';
+``` 
 
-```
+## How to use
 
-<br />
+Use a ‘neutral’ blue notification banner if the user needs to know about a problem with the service as a whole.
 
-### Example for "NotificationBanner"
+Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service. 
 
-```jsx live path=layouts/Basic/index.tsx
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/Logo';
+<Story packageName="@digigov/ui" component="core/NotificationBanner" story="Default.tsx" />
 
+You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished using the service, so it does not make sense to use a confirmation page.
 
-function NotificationBanner{
- return (
-      <NotificationBanner variant="success">
-        Training outcome recorded and trainee withdrawn
-      </NotificationBanner>
- )
-}
-export NotificationBanner
-
-```
-
-<br />
-
-## When to use this component
-
-A notification banner lets you tell the user about something that’s not directly relevant to the thing they’re trying to do on that page of the service. For example:
-
-- telling the user about a problem that’s affecting the service as a whole (for example, delays in processing applications because of an emergency)
-- telling the user about something that affects them in particular (for example, an approaching deadline they need to meet)
-- telling the user about the outcome of something they’ve just done on a previous page (for example, confirming that an email has been sent)
-
-## When not to use this component
-
-Use notification banners sparingly. There’s evidence that people often miss them, and using them too often is likely to make this problem worse.
-
-If the information is directly relevant to the thing the user is doing on that page, put the information in the main page content instead. Use inset text or warning text if it needs to stand out.
-
-Don’t use a notification banner to tell the user about validation errors (use an error message and error summary instead).
-
-### API
-
-### Properties
-
-<PropsDoc data={NotificationBanner.__doc__} />
-
-<br />
-
-### Styles
-
-<StylesDoc data={NotificationBanner.__doc__} />
+<Story packageName="@digigov/ui" component="core/NotificationBanner" story="Success.tsx" />

package/esm/core/PhaseBanner/PhaseBanner.stories.js

@@ -3,4 +3,5 @@ export default {
   title: 'Digigov UI/core/PhaseBanner',
   component: PhaseBanner
 };
-export * from './__stories__/Default';
+export * from './__stories__/Default';
+export * from './__stories__/Underlined';

package/esm/core/PhaseBanner/__stories__/Underlined.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import PhaseBanner, { PhaseBannerTag, PhaseBannerText } from '@digigov/ui/core/PhaseBanner';
+import Link from '@digigov/ui/core/Link';
+
+var _ref = /*#__PURE__*/React.createElement(PhaseBanner, {
+  underline: true
+}, /*#__PURE__*/React.createElement(PhaseBannerTag, null, "ALPHA"), /*#__PURE__*/React.createElement(PhaseBannerText, null, "\u0391\u03C5\u03C4\u03AE \u03B5\u03AF\u03BD\u03B1\u03B9 \u03BC\u03AF\u03B1 \u03BD\u03AD\u03B1 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u2013 \u03C4\u03B1 ", /*#__PURE__*/React.createElement(Link, {
+  href: "#feedback"
+}, "\u03C3\u03C7\u03CC\u03BB\u03B9\u03AC"), " \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03BC\u03B1\u03C2 \u03B2\u03BF\u03B7\u03B8\u03AE\u03C3\u03BF\u03C5\u03BD \u03BD\u03B1 \u03C4\u03B7 \u03B2\u03B5\u03BB\u03C4\u03B9\u03CE\u03C3\u03BF\u03C5\u03BC\u03B5."));
+
+export var Underlined = function Underlined() {
+  return _ref;
+};
+export default Underlined;

package/esm/core/PhaseBanner/index.mdx

@@ -0,0 +1,24 @@
+---
+id: phase-banner
+title: PhaseBanner
+---
+
+# PhaseBanner
+
+Use the phase banner component to show users your service is still being worked on.
+ 
+
+
+```bash
+import PhaseBanner from '@digigov/ui/core/PhaseBanner';
+``` 
+
+## How to use
+
+Your banner must be directly under the blue GOV.GR header and colour bar.
+
+<Story packageName="@digigov/ui" component="core/PhaseBanner" story="Default.tsx" />
+
+### Underlined
+
+<Story packageName="@digigov/ui" component="core/PhaseBanner" story="Underlined.tsx" />

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import Radios, { RadioItem } from '@digigov/ui/core/Radios';
 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\u03B9\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__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(Radios, null, /*#__PURE__*/React.createElement(RadioItem, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03B9\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Radios, null, /*#__PURE__*/React.createElement(RadioItem, {
   name: "country",
   value: "greece"
 }, "\u0395\u03BB\u03BB\u03AC\u03B4\u03B1"), /*#__PURE__*/React.createElement(RadioItem, {

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

@@ -4,7 +4,7 @@ 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"
+  size: "s"
 }, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03B9\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__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(Radios, null, /*#__PURE__*/React.createElement(RadioItem, {
   name: "country",
   value: "greece"

package/esm/core/Radios/index.mdx

@@ -0,0 +1,56 @@
+---
+id: radios
+title: Radios
+---
+
+
+# Radios
+
+ 
+
+
+```bash
+import Radios from '@digigov/ui/core/Radios';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Radios" story="Default.tsx" />
+
+### If you’re asking more than one question on the page
+
+<Story packageName="@digigov/ui" component="core/Radios" story="MultipleQuestions.tsx" />
+
+### Inline radios
+
+<Story packageName="@digigov/ui" component="core/Radios" story="Inline.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/Radios" story="WithHints.tsx" />
+
+### Radio items with a text divider
+
+If one or more of your radio options is different from the others, it can help users if you separate them using a text divider. 
+The text is usually the word ‘or’.
+
+<Story packageName="@digigov/ui" component="core/Radios" story="NoneAnswer.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/Radios" story="ConditionalReveal.tsx" />
+
+### Error messages
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/Radios" story="WithErrorMessage.tsx" />
+
+
+

package/esm/core/Select/Select.stories.js

@@ -4,4 +4,5 @@ export default {
   component: Select
 };
 export * from './__stories__/Default';
-export * from './__stories__/DisabledInput';
+export * from './__stories__/DisabledInput';
+export * from './__stories__/WithHint';