@digigov/ui 0.21.3 → 0.24.0

package/core/NavList/NavListBase.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNavListStyles = exports.NavListBase = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _excluded = ["className", "children", "floating", "horizontal", "subMenu", "role"];
+var useNavListStyles = (0, _styles.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'
+});
+exports.useNavListStyles = useNavListStyles;
+
+var NavListBase = function NavListBase(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      floating = _ref.floating,
+      horizontal = _ref.horizontal,
+      subMenu = _ref.subMenu,
+      role = _ref.role,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var classes = useNavListStyles();
+  return /*#__PURE__*/_react["default"].createElement("nav", null, /*#__PURE__*/_react["default"].createElement("ul", {
+    style: props.style,
+    role: role,
+    className: (0, _clsx["default"])(className, classes.root, !horizontal && classes.vertical, floating && classes.floating, subMenu && classes.subMenu)
+  }, children), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.floatClear
+  }));
+};
+
+exports.NavListBase = NavListBase;

package/core/NavList/NavListItem.d.ts

@@ -7,6 +7,7 @@ export interface NavListItemProps {
     href?: string;
     selected?: boolean;
     expandOn?: 'hover' | 'click';
+    role?: string;
 }
 export declare const useNavListItemStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"link" | "root" | "selected">;
 export declare const NavListItem: React.FC<NavListItemProps>;

package/core/NavList/NavListItem.js

@@ -29,7 +29,7 @@ var _NavListSubMenu = _interopRequireDefault(require("@digigov/ui/core/NavList/N
 
 var _NavListContext = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListContext"));
 
-var _excluded = ["name", "expandOn", "children", "href", "className", "selected"];
+var _excluded = ["name", "expandOn", "children", "href", "className", "selected", "role"];
 
 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); }
 
@@ -68,6 +68,7 @@ var NavListItem = function NavListItem(_ref) {
       href = _ref.href,
       className = _ref.className,
       passSelected = _ref.selected,
+      role = _ref.role,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -159,6 +160,7 @@ var NavListItem = function NavListItem(_ref) {
     selected: selected,
     isNested: subMenu && subMenu.length > 0,
     horizontal: horizontal,
+    role: role,
     className: (0, _clsx["default"])(className, classes.root)
   }, handlerProps, props), (open || openSubMenus) && subMenu && subMenu.length && /*#__PURE__*/_react["default"].createElement(_NavListSubMenu["default"], {
     style: style,

package/core/NavList/NavListItemBase.d.ts

@@ -11,6 +11,7 @@ export interface NavListItemBaseProps {
     horizontal?: boolean;
     open?: boolean;
     onClick?: (e: any) => void;
+    role?: string;
 }
 export declare const NavListItemBase: React.ForwardRefExoticComponent<NavListItemBaseProps & React.RefAttributes<HTMLLIElement>>;
 export default NavListItemBase;

package/core/NavList/NavListItemBase.js

@@ -27,7 +27,7 @@ var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
 
 var _router = require("@digigov/ui/router");
 
-var _excluded = ["href", "label", "children", "className", "open", "horizontal", "selected", "isNested", "expandOn", "onClick"];
+var _excluded = ["href", "label", "children", "className", "open", "horizontal", "selected", "isNested", "expandOn", "onClick", "role"];
 
 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); }
 
@@ -119,6 +119,7 @@ var NavListItemBase = /*#__PURE__*/_react["default"].forwardRef(function NavList
       isNested = _ref.isNested,
       expandOn = _ref.expandOn,
       onClick = _ref.onClick,
+      role = _ref.role,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var classes = useNavListItemBaseStyles();
 
@@ -141,13 +142,16 @@ var NavListItemBase = /*#__PURE__*/_react["default"].forwardRef(function NavList
   return /*#__PURE__*/_react["default"].createElement("li", {
     ref: ref,
     className: (0, _clsx["default"])(className, classes.root, horizontal && classes.horizontal),
-    onClick: onClick
+    onClick: onClick,
+    role: "none"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _clsx["default"])(horizontal ? classes.horizontal : classes.vertical, (selected || privateSelected) && classes.selected)
   }, /*#__PURE__*/_react["default"].createElement(_Link["default"], (0, _extends2["default"])({
     href: href,
     className: classes.link
-  }, props), /*#__PURE__*/_react["default"].createElement("span", {
+  }, props, {
+    role: role
+  }), /*#__PURE__*/_react["default"].createElement("span", {
     className: classes.label
   }, label), /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _clsx["default"])(classes.icon, open && classes.open)

package/core/NavList/NavListSubMenu.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavListProps } from '@digigov/ui/core/NavList';
+import { NavListProps } from '@digigov/ui/core/NavList/types';
 import { NavLinkInterface } from '@digigov/ui/core/NavList/NavListContext';
 export interface NavListSubMenuProps extends NavListProps {
     links: NavLinkInterface[];

package/core/NavList/NavListSubMenu.js

@@ -15,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _NavList = require("@digigov/ui/core/NavList");
+var _NavListBase = require("@digigov/ui/core/NavList/NavListBase");
 
 var _NavListItemBase = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListItemBase"));
 
@@ -34,7 +34,7 @@ var NavListSubMenu = function NavListSubMenu(_ref) {
   var _useContext = (0, _react.useContext)(_NavListContext["default"]),
       horizontal = _useContext.horizontal;
 
-  return /*#__PURE__*/_react["default"].createElement(_NavList.NavListBase, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_NavListBase.NavListBase, (0, _extends2["default"])({
     subMenu: true,
     floating: horizontal
   }, props), links && links.map(function (subMenuLink, key) {

package/core/NavList/__stories__/Default.d.ts

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

package/core/NavList/__stories__/Default.js

@@ -0,0 +1,69 @@
+"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.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _NavList = _interopRequireWildcard(require("@digigov/ui/core/NavList"));
+
+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 links = [{
+  name: 'Nav1',
+  href: '#',
+  label: 'Nav list item 1'
+}, {
+  name: 'Nav2',
+  href: '#',
+  label: 'Nav list item 2',
+  subMenu: [{
+    name: 'Nav2.1',
+    href: '#',
+    label: 'Nav list item 2.1'
+  }, {
+    name: 'Nav2.2',
+    href: '#',
+    label: 'Nav list item 2.2'
+  }, {
+    name: 'Nav2.3',
+    href: '#',
+    label: 'Nav list item 2.3'
+  }, {
+    name: 'Nav2.4',
+    href: '#',
+    label: 'Nav list item 2.4'
+  }]
+}, {
+  name: 'Nav3',
+  href: '#',
+  label: 'Nav list item 3'
+}];
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_NavList["default"], {
+    links: links,
+    "aria-label": "Nav list",
+    role: "menu"
+  }, links.map(function (link, key) {
+    return /*#__PURE__*/_react["default"].createElement(_NavList.NavListItem, {
+      key: key,
+      name: link.name,
+      "aria-label": link.label,
+      role: "menuitem",
+      "aria-haspopup": link.subMenu ? 'true' : 'false'
+    });
+  })));
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/core/NavList/__stories__/NavHorizontalLayout.d.ts

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

package/core/NavList/__stories__/NavHorizontalLayout.js

@@ -0,0 +1,67 @@
+"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.NavHorizontalLayout = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _NavList = _interopRequireWildcard(require("@digigov/ui/core/NavList"));
+
+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 links = [{
+  name: 'Nav1',
+  href: '#',
+  label: 'Nav list item 1'
+}, {
+  name: 'Nav2',
+  href: '#',
+  label: 'Nav list item 2',
+  subMenu: [{
+    name: 'Nav2.1',
+    href: '#',
+    label: 'Nav list item 2.1'
+  }, {
+    name: 'Nav2.2',
+    href: '#',
+    label: 'Nav list item 2.2'
+  }, {
+    name: 'Nav2.3',
+    href: '#',
+    label: 'Nav list item 2.3'
+  }]
+}, {
+  name: 'Nav3',
+  href: '#',
+  label: 'Nav list item 3'
+}];
+
+var NavHorizontalLayout = function NavHorizontalLayout() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_NavList["default"], {
+    horizontal: true,
+    links: links,
+    role: "menubar",
+    "aria-orientation": "horizontal",
+    "aria-label": "Nav list"
+  }, links.map(function (link, key) {
+    return /*#__PURE__*/_react["default"].createElement(_NavList.NavListItem, {
+      "aria-label": link.label,
+      role: "menuitem",
+      "aria-haspopup": link.subMenu ? 'true' : 'false',
+      key: key,
+      name: link.name
+    });
+  })));
+};
+
+exports.NavHorizontalLayout = NavHorizontalLayout;
+var _default = NavHorizontalLayout;
+exports["default"] = _default;

package/core/NavList/index.mdx

@@ -1,4 +1,25 @@
 ---
+id: NavList
 title: NavList
-parent: docs/ui/components
 ---
+
+```bash
+import NavList, { NavListItem } from '@digigov/ui/core/NavList';
+```
+
+## How to use
+
+### Vertical NavList
+
+<Story packageName="@digigov/ui" component="core/NavList" story="Default.tsx" />
+
+### Horizontal NavList
+
+<Story packageName="@digigov/ui" component="core/NavList" story="NavHorizontalLayout.tsx" />
+
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our NavList
+implementation in the ARIA Authoring Practices Guide (APG) at
+[Menu or Menu bar](https://www.w3.org/WAI/ARIA/apg/patterns/menu/).

package/core/NavList/types.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { NavLinkInterface } from '@digigov/ui/core/NavList/NavListContext';
+import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
+export interface NavListProps {
+    children?: React.ReactNode;
+    className?: string;
+    horizontal?: boolean;
+    role?: string;
+    openSubMenus?: boolean;
+    floating?: boolean;
+    subMenu?: boolean;
+    links?: NavLinkInterface[];
+    style?: BaseCSSProperties;
+}

package/core/NavList/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/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/core/PhaseBanner/PhaseBanner.stories.d.ts

@@ -4,4 +4,5 @@ declare namespace _default {
 }
 export default _default;
 export * from "./__stories__/Default";
+export * from "./__stories__/Underlined";
 import PhaseBanner from "@digigov/ui/core/PhaseBanner";

package/core/PhaseBanner/PhaseBanner.stories.js

@@ -23,6 +23,20 @@ Object.keys(_Default).forEach(function (key) {
     }
   });
 });
+
+var _Underlined = require("./__stories__/Underlined");
+
+Object.keys(_Underlined).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Underlined[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Underlined[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov UI/core/PhaseBanner',
   component: _PhaseBanner["default"]

package/core/PhaseBanner/__stories__/Underlined.d.ts

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

package/{admin/CopyToClipboardMessage/index.js → core/PhaseBanner/__stories__/Underlined.js}

@@ -1,30 +1,34 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
-exports["default"] = void 0;
-
-var _CopyToClipboardMessage = _interopRequireWildcard(require("@digigov/react-extensions/admin/CopyToClipboardMessage"));
-
-Object.keys(_CopyToClipboardMessage).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _CopyToClipboardMessage[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _CopyToClipboardMessage[key];
-    }
-  });
-});
+exports["default"] = exports.Underlined = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PhaseBanner = _interopRequireWildcard(require("@digigov/ui/core/PhaseBanner"));
+
+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 _default = _CopyToClipboardMessage["default"];
+var _ref = /*#__PURE__*/_react["default"].createElement(_PhaseBanner["default"], {
+  underline: true
+}, /*#__PURE__*/_react["default"].createElement(_PhaseBanner.PhaseBannerTag, null, "ALPHA"), /*#__PURE__*/_react["default"].createElement(_PhaseBanner.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["default"].createElement(_Link["default"], {
+  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."));
+
+var Underlined = function Underlined() {
+  return _ref;
+};
+
+exports.Underlined = Underlined;
+var _default = Underlined;
 exports["default"] = _default;

package/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/core/Radios/__stories__/ConditionalReveal.js

@@ -23,7 +23,11 @@ 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\u03C9\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AE\u03C3\u03BF\u03C5\u03BC\u03B5 \u03BC\u03B1\u03B6\u03AF \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9 \u03C3\u03C4\u03B7\u03BD \u03C0\u03B5\u03C1\u03AF\u03C0\u03C4\u03C9\u03C3\u03B7 \u03C3\u03B1\u03C2."), /*#__PURE__*/_react["default"].createElement(_Radios["default"], null, /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, {
+  "aria-describedby": "contact-hint"
+}, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, null, "\u03A0\u03C9\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AE\u03C3\u03BF\u03C5\u03BC\u03B5 \u03BC\u03B1\u03B6\u03AF \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], {
+  id: "contact-hint"
+}, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9 \u03C3\u03C4\u03B7\u03BD \u03C0\u03B5\u03C1\u03AF\u03C0\u03C4\u03C9\u03C3\u03B7 \u03C3\u03B1\u03C2."), /*#__PURE__*/_react["default"].createElement(_Radios["default"], null, /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {
   checked: true,
   name: "contact",
   value: "email"

package/core/Radios/__stories__/Default.js

@@ -15,13 +15,11 @@ var _Radios = _interopRequireWildcard(require("@digigov/ui/core/Radios"));
 
 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, 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["default"].createElement(_Hint["default"], 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["default"].createElement(_Radios["default"], null, /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.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["default"].createElement(_Radios["default"], null, /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {
   name: "country",
   value: "greece"
 }, "\u0395\u03BB\u03BB\u03AC\u03B4\u03B1"), /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {

package/core/Radios/__stories__/Inline.js

@@ -21,7 +21,11 @@ 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, "\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03BB\u03BB\u03AC\u03BE\u03B5\u03B9 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, "\u03A3\u03C5\u03BC\u03C0\u03B5\u03C1\u03B9\u03BB\u03B1\u03BC\u03B2\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03B5\u03C0\u03AF\u03B8\u03B5\u03C4\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03AE \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03C4\u03C1\u03CC\u03C0\u03BF\u03C5 \u03C0\u03BF\u03C5 \u03B3\u03C1\u03AC\u03C6\u03B5\u03C4\u03B5 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2."), /*#__PURE__*/_react["default"].createElement(_Radios["default"], {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, {
+  "aria-describedby": "name-hint"
+}, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, null, "\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03BB\u03BB\u03AC\u03BE\u03B5\u03B9 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], {
+  id: "name-hint"
+}, "\u03A3\u03C5\u03BC\u03C0\u03B5\u03C1\u03B9\u03BB\u03B1\u03BC\u03B2\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03B5\u03C0\u03AF\u03B8\u03B5\u03C4\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03AE \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03C4\u03C1\u03CC\u03C0\u03BF\u03C5 \u03C0\u03BF\u03C5 \u03B3\u03C1\u03AC\u03C6\u03B5\u03C4\u03B5 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2."), /*#__PURE__*/_react["default"].createElement(_Radios["default"], {
   inline: true
 }, /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {
   name: "changed_name",