@digigov/ui 0.21.2 → 0.23.0

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,11 +1,13 @@
-import React from "react";
-import Link from "@digigov/ui/core/Link";
-import { Masthead } from "@digigov/ui/layouts";
-import SectionBreak from "../../Divider";
+import React from 'react';
+import Link from '@digigov/ui/core/Link';
+import { Masthead } from '@digigov/ui/layouts';
+import SectionBreak from '@digigov/ui/core/Divider';
 
 var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, null), /*#__PURE__*/React.createElement(Link, {
+  "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",
+  role: "link",
   href: "#"
-}, " govgr link  "), /*#__PURE__*/React.createElement(SectionBreak, null));
+}, "govgr link"), /*#__PURE__*/React.createElement(SectionBreak, null));
 
 export var DarkBackground = function DarkBackground() {
   return _ref;

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

@@ -1,12 +1,14 @@
-import React from "react";
-import Link from "@digigov/ui/core/Link";
-import { Masthead } from "@digigov/ui/layouts";
-import SectionBreak from "../../Divider";
+import React from 'react';
+import Link from '@digigov/ui/core/Link';
+import { Masthead } from '@digigov/ui/layouts';
+import SectionBreak from '@digigov/ui/core/Divider';
 
 var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, null), /*#__PURE__*/React.createElement(Link, {
+  "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",
+  role: "link",
   href: "#",
   underline: false
-}, " govgr link"), /*#__PURE__*/React.createElement(SectionBreak, null));
+}, "govgr link"), /*#__PURE__*/React.createElement(SectionBreak, null));
 
 export var DarkBackgroundNoUnderline = function DarkBackgroundNoUnderline() {
   return _ref;

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

@@ -1,9 +1,11 @@
-import React from "react";
-import Link from "@digigov/ui/core/Link";
+import React from 'react';
+import Link from '@digigov/ui/core/Link';
 
 var _ref = /*#__PURE__*/React.createElement(Link, {
+  "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",
+  role: "link",
   href: "#"
-}, " govgr link ");
+}, "govgr link");
 
 export var Default = function Default() {
   return _ref;

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

@@ -1,10 +1,12 @@
-import React from "react";
-import Link from "@digigov/ui/core/Link";
+import React from 'react';
+import Link from '@digigov/ui/core/Link';
 
 var _ref = /*#__PURE__*/React.createElement(Link, {
+  "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",
+  role: "link",
   href: "#",
   underline: false
-}, " govgr link ");
+}, "govgr link");
 
 export var NoUnderline = function NoUnderline() {
   return _ref;

package/esm/core/Link/link.mdx

@@ -0,0 +1,34 @@
+---
+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" />
+
+You can read more about the accessibility patterns used in our Link
+implementation in the ARIA Authoring Practices Guide (APG) at 
+[Link](https://www.w3.org/WAI/ARIA/apg/patterns/link/) section.

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,78 +1,25 @@
 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", "role"];
 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,
+      role = _ref.role,
       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,
     links: links
   }, /*#__PURE__*/React.createElement(NavListBase, _extends({
-    horizontal: horizontal
+    horizontal: horizontal,
+    role: role
   }, props)));
 };
 export default NavList;

package/esm/core/NavList/NavList.stories.js

@@ -0,0 +1,7 @@
+import NavList from '@digigov/ui/core/NavList';
+export default {
+  title: 'Digigov UI/core/NavList',
+  component: NavList
+};
+export * from '@digigov/ui/core/NavList/__stories__/Default';
+export * from '@digigov/ui/core/NavList/__stories__/NavHorizontalLayout';

package/esm/core/NavList/NavListBase.js

@@ -0,0 +1,60 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children", "floating", "horizontal", "subMenu", "role"];
+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,
+      role = _ref.role,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var classes = useNavListStyles();
+  return /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("ul", {
+    style: props.style,
+    role: role,
+    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/NavListItem.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "expandOn", "children", "href", "className", "selected"];
+var _excluded = ["name", "expandOn", "children", "href", "className", "selected", "role"];
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import Divider from '@digigov/react-core/SectionBreak';
@@ -41,6 +41,7 @@ export var NavListItem = function NavListItem(_ref) {
       href = _ref.href,
       className = _ref.className,
       passSelected = _ref.selected,
+      role = _ref.role,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = useState(false),
@@ -132,6 +133,7 @@ export var NavListItem = function NavListItem(_ref) {
     selected: selected,
     isNested: subMenu && subMenu.length > 0,
     horizontal: horizontal,
+    role: role,
     className: clsx(className, classes.root)
   }, handlerProps, props), (open || openSubMenus) && subMenu && subMenu.length && /*#__PURE__*/React.createElement(NavListSubMenu, {
     style: style,

package/esm/core/NavList/NavListItemBase.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
-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"];
 import React, { useState, useEffect } from 'react';
 import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
@@ -93,6 +93,7 @@ export var NavListItemBase = /*#__PURE__*/React.forwardRef(function NavListItemB
       isNested = _ref.isNested,
       expandOn = _ref.expandOn,
       onClick = _ref.onClick,
+      role = _ref.role,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var classes = useNavListItemBaseStyles();
@@ -116,13 +117,16 @@ export var NavListItemBase = /*#__PURE__*/React.forwardRef(function NavListItemB
   return /*#__PURE__*/React.createElement("li", {
     ref: ref,
     className: clsx(className, classes.root, horizontal && classes.horizontal),
-    onClick: onClick
+    onClick: onClick,
+    role: "none"
   }, /*#__PURE__*/React.createElement("div", {
     className: clsx(horizontal ? classes.horizontal : classes.vertical, (selected || privateSelected) && classes.selected)
   }, /*#__PURE__*/React.createElement(Link, _extends({
     href: href,
     className: classes.link
-  }, props), /*#__PURE__*/React.createElement("span", {
+  }, props, {
+    role: role
+  }), /*#__PURE__*/React.createElement("span", {
     className: classes.label
   }, label), /*#__PURE__*/React.createElement("span", {
     className: clsx(classes.icon, open && classes.open)

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import NavList, { NavListItem } from '@digigov/ui/core/NavList';
+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'
+}];
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavList, {
+    links: links,
+    "aria-label": "Nav list",
+    role: "menu"
+  }, links.map(function (link, key) {
+    return /*#__PURE__*/React.createElement(NavListItem, {
+      key: key,
+      name: link.name,
+      "aria-label": link.label,
+      role: "menuitem",
+      "aria-haspopup": link.subMenu ? 'true' : 'false'
+    });
+  })));
+};
+export default Default;

package/esm/core/NavList/__stories__/NavHorizontalLayout.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import NavList, { NavListItem } from '@digigov/ui/core/NavList';
+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'
+}];
+export var NavHorizontalLayout = function NavHorizontalLayout() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavList, {
+    horizontal: true,
+    links: links,
+    role: "menubar",
+    "aria-orientation": "horizontal",
+    "aria-label": "Nav list"
+  }, links.map(function (link, key) {
+    return /*#__PURE__*/React.createElement(NavListItem, {
+      "aria-label": link.label,
+      role: "menuitem",
+      "aria-haspopup": link.subMenu ? 'true' : 'false',
+      key: key,
+      name: link.name
+    });
+  })));
+};
+export default NavHorizontalLayout;

package/esm/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/esm/core/NavList/types.js

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