@digigov/ui 0.21.3 → 0.24.0

package/core/DateInput/__stories__/MultipleQuestions.d.ts

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

package/core/DateInput/__stories__/MultipleQuestions.js

@@ -0,0 +1,41 @@
+"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.MultipleQuestions = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DateInput = _interopRequireWildcard(require("@digigov/ui/core/DateInput"));
+
+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, {
+  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["default"].createElement(_Hint["default"], null, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null, /*#__PURE__*/_react["default"].createElement(_DateInput.DateInputItem, {
+  name: "day"
+}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/_react["default"].createElement(_DateInput.DateInputItem, {
+  name: "month"
+}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_DateInput.DateInputItem, {
+  width: 4,
+  name: "year"
+}, "\u03A7\u03C1\u03CC\u03BD\u03BF\u03C2"))));
+
+var MultipleQuestions = function MultipleQuestions() {
+  return _ref;
+};
+
+exports.MultipleQuestions = MultipleQuestions;
+var _default = MultipleQuestions;
+exports["default"] = _default;

package/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/core/Details/index.mdx

@@ -1,34 +1,18 @@
 ---
-parent: docs/ui/components
+id: details
 title: Details
 ---
 
-## Example
+# Details
 
-```jsx live
-<Details>
-  <DetailsSummary>Help with nationality</DetailsSummary>
-  <DetailsContent>
-    We need to know your nationality so we can work out which elections you’re
-    entitled to vote in. If you cannot provide your nationality, you’ll have to
-    send copies of identity documents through the post.
-  </DetailsContent>
-</Details>
-```
+The details component is a short link that shows more detailed help text when a user clicks on it.
+ 
 
-<br />
 
-## When to use this component
+```bash
+import Details from '@digigov/ui/core/Details';
+``` 
 
-Use the Details component to make a page easier to scan when it contains
-information that only some users will need.
+## How to use
 
-## When not to use this component
-
-Do not use the Details component to hide information that the majority of
-your users should see.
-
-## How it works
-
-The Details component is a short link that expands into a text including some
-extra information, when a user clicks on it.
+<Story packageName="@digigov/ui" component="core/Details" story="Default.tsx" />

package/core/ErrorMessage/__stories__/Default.js

@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], {
   error: true
-}, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.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["default"].createElement(_Hint["default"], 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["default"].createElement(_ErrorMessage["default"], null, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], 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["default"].createElement(_Checkboxes["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {
+}, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.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["default"].createElement(_Hint["default"], 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["default"].createElement(_ErrorMessage["default"], null, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], 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["default"].createElement(_Checkboxes["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {
   name: "cold",
   value: "cold"
 }, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {

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

@@ -36,7 +36,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement("div", {
 }, /*#__PURE__*/_react["default"].createElement(_ErrorSummary["default"], null, /*#__PURE__*/_react["default"].createElement(_Title["default"], {
   size: "sm"
 }, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
-  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["default"].createElement(_Field["default"], {
   error: true
 }, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.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["default"].createElement(_Hint["default"], 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["default"].createElement(_ErrorMessage["default"], null, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], 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["default"].createElement(_Checkboxes["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {

package/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/core/FileUpload/__stories__/Default.d.ts

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

package/core/FileUpload/__stories__/Default.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Default = void 0;
+exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -29,4 +29,6 @@ var Default = function Default() {
   return _ref;
 };
 
-exports.Default = Default;
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/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/core/Link/__stories__/DarkBackground.js

@@ -13,11 +13,13 @@ var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
 
 var _layouts = require("@digigov/ui/layouts");
 
-var _Divider = _interopRequireDefault(require("../../Divider"));
+var _Divider = _interopRequireDefault(require("@digigov/ui/core/Divider"));
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_layouts.Masthead, null, /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+  "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["default"].createElement(_Divider["default"], null));
+}, "govgr link"), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null));
 
 var DarkBackground = function DarkBackground() {
   return _ref;

package/core/Link/__stories__/DarkBackgroundNoUnderline.js

@@ -13,12 +13,14 @@ var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
 
 var _layouts = require("@digigov/ui/layouts");
 
-var _Divider = _interopRequireDefault(require("../../Divider"));
+var _Divider = _interopRequireDefault(require("@digigov/ui/core/Divider"));
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_layouts.Masthead, null, /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+  "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["default"].createElement(_Divider["default"], null));
+}, "govgr link"), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null));
 
 var DarkBackgroundNoUnderline = function DarkBackgroundNoUnderline() {
   return _ref;

package/core/Link/__stories__/Default.js

@@ -12,8 +12,10 @@ var _react = _interopRequireDefault(require("react"));
 var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+  "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");
 
 var Default = function Default() {
   return _ref;

package/core/Link/__stories__/NoUnderline.js

@@ -12,9 +12,11 @@ var _react = _interopRequireDefault(require("react"));
 var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+  "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");
 
 var NoUnderline = function NoUnderline() {
   return _ref;

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

@@ -1,17 +1,4 @@
 import React from 'react';
-import { NavLinkInterface } from '@digigov/ui/core/NavList/NavListContext';
-import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
-export declare const useNavListStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"vertical" | "root" | "subMenu" | "floating" | "floatClear">;
-export interface NavListProps {
-    children?: React.ReactNode;
-    className?: string;
-    horizontal?: boolean;
-    openSubMenus?: boolean;
-    floating?: boolean;
-    subMenu?: boolean;
-    links?: NavLinkInterface[];
-    style?: BaseCSSProperties;
-}
-export declare const NavListBase: React.FC<NavListProps>;
+import { NavListProps } from '@digigov/ui/core/NavList/types';
 export declare const NavList: React.FC<NavListProps>;
 export default NavList;

package/core/NavList/NavList.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useNavListStyles = exports["default"] = exports.NavListBase = exports.NavList = void 0;
+exports["default"] = exports.NavList = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -13,84 +13,27 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _styles = require("@material-ui/core/styles");
-
 var _NavListContext = require("@digigov/ui/core/NavList/NavListContext");
 
-var _excluded = ["className", "children", "floating", "horizontal", "subMenu"],
-    _excluded2 = ["horizontal", "openSubMenus", "links"];
-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,
-      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = useNavListStyles();
-  return /*#__PURE__*/_react["default"].createElement("nav", null, /*#__PURE__*/_react["default"].createElement("ul", {
-    style: props.style,
-    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
-  }));
-};
+var _NavListBase = require("@digigov/ui/core/NavList/NavListBase");
 
-exports.NavListBase = NavListBase;
+var _excluded = ["horizontal", "openSubMenus", "links", "role"];
 
-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 = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_NavListContext.NavListProvider, {
     openSubMenus: openSubMenus,
     horizontal: horizontal,
     links: links
-  }, /*#__PURE__*/_react["default"].createElement(NavListBase, (0, _extends2["default"])({
-    horizontal: horizontal
+  }, /*#__PURE__*/_react["default"].createElement(_NavListBase.NavListBase, (0, _extends2["default"])({
+    horizontal: horizontal,
+    role: role
   }, props)));
 };
 

package/core/NavList/NavList.stories.d.ts

@@ -0,0 +1,8 @@
+declare namespace _default {
+    export const title: string;
+    export { NavList as component };
+}
+export default _default;
+export * from "@digigov/ui/core/NavList/__stories__/Default";
+export * from "@digigov/ui/core/NavList/__stories__/NavHorizontalLayout";
+import NavList from "@digigov/ui/core/NavList";

package/core/NavList/NavList.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _NavList = _interopRequireDefault(require("@digigov/ui/core/NavList"));
+
+var _Default = require("@digigov/ui/core/NavList/__stories__/Default");
+
+Object.keys(_Default).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Default[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Default[key];
+    }
+  });
+});
+
+var _NavHorizontalLayout = require("@digigov/ui/core/NavList/__stories__/NavHorizontalLayout");
+
+Object.keys(_NavHorizontalLayout).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _NavHorizontalLayout[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _NavHorizontalLayout[key];
+    }
+  });
+});
+var _default = {
+  title: 'Digigov UI/core/NavList',
+  component: _NavList["default"]
+};
+exports["default"] = _default;

package/core/NavList/NavListBase.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NavListProps } from '@digigov/ui/core/NavList/types';
+export declare const useNavListStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"vertical" | "root" | "subMenu" | "floating" | "floatClear">;
+export declare const NavListBase: React.FC<NavListProps>;