@digigov/ui 0.30.2 → 0.31.0

package/esm/app/ThemeOptionsForm/index.js

@@ -0,0 +1,215 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import Button from '@digigov/ui/core/Button';
+import FieldContainer, { Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { RadioContainer, RadioItem } from '@digigov/ui/core/RadioContainer';
+import SectionBreak from '@digigov/ui/core/SectionBreak';
+import useTheme from '@digigov/ui/hooks/useTheme';
+import useFontSize from '@digigov/ui/hooks/useFontSize';
+import useLineHeight from '@digigov/ui/hooks/useLineHeight';
+import useLetterSpacing from '@digigov/ui/hooks/useLetterSpacing';
+import useHighlightLinks from '@digigov/ui/hooks/useHighlightLinks';
+
+var _ref = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "s"
+}, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE \u03B8\u03AD\u03BC\u03B1\u03C4\u03BF\u03C2");
+
+var _ref2 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "s"
+}, "M\u03AD\u03B3\u03B5\u03B8\u03BF\u03C2 \u03B3\u03C1\u03B1\u03BC\u03BC\u03AC\u03C4\u03C9\u03BD");
+
+var _ref3 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "s"
+}, "\u038E\u03C8\u03BF\u03C2 \u03B3\u03C1\u03B1\u03BC\u03BC\u03AE\u03C2 \u03BA\u03B5\u03B9\u03BC\u03AD\u03BD\u03C9\u03BD");
+
+var _ref4 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "s"
+}, "\u0391\u03C0\u03CC\u03C3\u03C4\u03B1\u03C3\u03B7 \u03B3\u03C1\u03B1\u03BC\u03BC\u03AC\u03C4\u03C9\u03BD");
+
+var _ref5 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "s"
+}, "\u0388\u03BD\u03C4\u03BF\u03BD\u03B7 \u03B5\u03BC\u03C6\u03AC\u03BD\u03B9\u03C3\u03B7 \u03C3\u03C5\u03BD\u03B4\u03AD\u03C3\u03BC\u03C9\u03BD");
+
+var _ref6 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
+
+export var ThemeOptionsForm = function ThemeOptionsForm() {
+  var _useTheme = useTheme(),
+      _useTheme2 = _slicedToArray(_useTheme, 2),
+      theme = _useTheme2[0],
+      changeTheme = _useTheme2[1];
+
+  var _useState = useState(theme || 'auto'),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedTheme = _useState2[0],
+      setSelectedTheme = _useState2[1];
+
+  var _useFontSize = useFontSize(),
+      _useFontSize2 = _slicedToArray(_useFontSize, 2),
+      fontSize = _useFontSize2[0],
+      changeFontSize = _useFontSize2[1];
+
+  var _useState3 = useState(fontSize || 'default'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedFontSize = _useState4[0],
+      setSelectedFontSize = _useState4[1];
+
+  var _useLineHeight = useLineHeight(),
+      _useLineHeight2 = _slicedToArray(_useLineHeight, 2),
+      lineHeight = _useLineHeight2[0],
+      changeLineHeight = _useLineHeight2[1];
+
+  var _useState5 = useState(lineHeight || 'default'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      selectedLineHeight = _useState6[0],
+      setSelectedLineHeight = _useState6[1];
+
+  var _useLetterSpacing = useLetterSpacing(),
+      _useLetterSpacing2 = _slicedToArray(_useLetterSpacing, 2),
+      letterSpacing = _useLetterSpacing2[0],
+      changeLetterSpacing = _useLetterSpacing2[1];
+
+  var _useState7 = useState(letterSpacing || 'default'),
+      _useState8 = _slicedToArray(_useState7, 2),
+      selectedLetterSpacing = _useState8[0],
+      setSelectedLetterSpacing = _useState8[1];
+
+  var _useHighlightLinks = useHighlightLinks(),
+      _useHighlightLinks2 = _slicedToArray(_useHighlightLinks, 2),
+      highlightLinks = _useHighlightLinks2[0],
+      changeHighlightLinks = _useHighlightLinks2[1];
+
+  var _useState9 = useState(highlightLinks || 'default'),
+      _useState10 = _slicedToArray(_useState9, 2),
+      selectedHighlightLinks = _useState10[0],
+      setSelectedHighlightLinks = _useState10[1];
+
+  function handleOptions() {
+    changeTheme(selectedTheme);
+    changeFontSize(selectedFontSize);
+    changeLineHeight(selectedLineHeight);
+    changeLetterSpacing(selectedLetterSpacing);
+    changeHighlightLinks(selectedHighlightLinks);
+  }
+
+  function resetOptions() {
+    setSelectedTheme('light');
+    setSelectedFontSize('default');
+    setSelectedLineHeight('default');
+    setSelectedLetterSpacing('default');
+    setSelectedHighlightLinks('default');
+  }
+
+  function optionsHasChanged() {
+    if (theme != selectedTheme || fontSize != selectedFontSize || lineHeight != selectedLineHeight || letterSpacing != selectedLetterSpacing || highlightLinks != selectedHighlightLinks) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldContainer, {
+    marginBottom: 4
+  }, /*#__PURE__*/React.createElement(Fieldset, null, _ref, /*#__PURE__*/React.createElement(RadioContainer, null, /*#__PURE__*/React.createElement(RadioItem, {
+    name: "theme_mode",
+    value: "light",
+    onChange: function onChange() {
+      return setSelectedTheme('light');
+    },
+    checked: selectedTheme === 'light'
+  }, "\u03A6\u03C9\u03C4\u03B5\u03B9\u03BD\u03CC \u03B8\u03AD\u03BC\u03B1"), /*#__PURE__*/React.createElement(RadioItem, {
+    name: "theme_mode",
+    value: "dark",
+    onChange: function onChange() {
+      return setSelectedTheme('dark');
+    },
+    checked: selectedTheme === 'dark'
+  }, "\u03A3\u03BA\u03BF\u03CD\u03C1\u03BF \u03B8\u03AD\u03BC\u03B1"), /*#__PURE__*/React.createElement(RadioItem, {
+    name: "theme_mode",
+    value: "auto",
+    onChange: function onChange() {
+      return setSelectedTheme('auto');
+    },
+    checked: selectedTheme === 'auto'
+  }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE \u03C3\u03C5\u03C3\u03C4\u03AE\u03BC\u03B1\u03C4\u03BF\u03C2")))), /*#__PURE__*/React.createElement(FieldContainer, {
+    marginBottom: 4
+  }, /*#__PURE__*/React.createElement(Fieldset, null, _ref2, /*#__PURE__*/React.createElement(RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/React.createElement(RadioItem, {
+    name: "font-size",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedFontSize('default');
+    },
+    checked: selectedFontSize === 'default'
+  }, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/React.createElement(RadioItem, {
+    name: "font-size",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedFontSize('large');
+    },
+    checked: selectedFontSize === 'large'
+  }, "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03BF")))), /*#__PURE__*/React.createElement(FieldContainer, {
+    marginBottom: 4
+  }, /*#__PURE__*/React.createElement(Fieldset, null, _ref3, /*#__PURE__*/React.createElement(RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/React.createElement(RadioItem, {
+    name: "line-height",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedLineHeight('default');
+    },
+    checked: selectedLineHeight === 'default'
+  }, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/React.createElement(RadioItem, {
+    name: "line-height",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedLineHeight('large');
+    },
+    checked: selectedLineHeight === 'large'
+  }, "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03BF")))), /*#__PURE__*/React.createElement(FieldContainer, {
+    marginBottom: 4
+  }, /*#__PURE__*/React.createElement(Fieldset, null, _ref4, /*#__PURE__*/React.createElement(RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/React.createElement(RadioItem, {
+    name: "letter-spacing",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedLetterSpacing('default');
+    },
+    checked: selectedLetterSpacing === 'default'
+  }, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03AE (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/React.createElement(RadioItem, {
+    name: "letter-spacing",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedLetterSpacing('extra');
+    },
+    checked: selectedLetterSpacing === 'extra'
+  }, "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03B7")))), /*#__PURE__*/React.createElement(FieldContainer, {
+    marginBottom: 4
+  }, /*#__PURE__*/React.createElement(Fieldset, null, _ref5, /*#__PURE__*/React.createElement(RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/React.createElement(RadioItem, {
+    name: "highlight-links",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedHighlightLinks('default');
+    },
+    checked: selectedHighlightLinks === 'default'
+  }, "\u038C\u03C7\u03B9 (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/React.createElement(RadioItem, {
+    name: "highlight-links",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedHighlightLinks('highlight');
+    },
+    checked: selectedHighlightLinks === 'highlight'
+  }, "\u039D\u03B1\u03B9")), /*#__PURE__*/React.createElement(Button, {
+    onClick: resetOptions,
+    variant: "link"
+  }, "\u0395\u03C0\u03B1\u03BD\u03B1\u03C6\u03BF\u03C1\u03AC \u03CC\u03BB\u03C9\u03BD \u03C4\u03C9\u03BD \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03CE\u03BD"))), _ref6, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleOptions,
+    disabled: !optionsHasChanged()
+  }, "\u0395\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE"));
+};
+export default ThemeOptionsForm;

package/esm/app/{ThemeSelectorOptions → ThemePaletteForm}/index.js

@@ -11,10 +11,11 @@ var _ref = /*#__PURE__*/React.createElement(FieldsetLegend, null, /*#__PURE__*/R
 
 var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, null);
 
-export var ThemeToggleOptions = function ThemeToggleOptions() {
+export var ThemePaletteForm = function ThemePaletteForm() {
   var _useTheme = useTheme(),
-      theme = _useTheme.theme,
-      changeTheme = _useTheme.changeTheme;
+      _useTheme2 = _slicedToArray(_useTheme, 2),
+      theme = _useTheme2[0],
+      changeTheme = _useTheme2[1];
 
   var _useState = useState(theme || 'auto'),
       _useState2 = _slicedToArray(_useState, 2),
@@ -52,4 +53,4 @@ export var ThemeToggleOptions = function ThemeToggleOptions() {
     }
   }, "\u0395\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE"));
 };
-export default ThemeToggleOptions;
+export default ThemePaletteForm;

package/esm/app/index.js

@@ -10,4 +10,5 @@ export * from '@digigov/ui/app/Header';
 export * from '@digigov/ui/app/i18n';
 export * from '@digigov/ui/app/I18nText';
 export * from '@digigov/ui/app/PhaseBannerHeader';
-export * from '@digigov/ui/app/ThemeSelectorOptions';
+export * from '@digigov/ui/app/ThemePaletteForm';
+export * from '@digigov/ui/app/ThemeOptionsForm';

package/esm/core/Accordion/index.js

@@ -12,7 +12,7 @@ import AccordionSectionSummaryHeading from '@digigov/react-core/AccordionSection
 import AccordionSectionSummary from '@digigov/react-core/AccordionSectionSummary';
 import AccordionControls from '@digigov/react-core/AccordionControls';
 import withDeprecation from '@digigov/ui/utils/withDeprecation';
-import { useTogglableSections } from '@digigov/ui/hooks/useTogglableSections';
+import { useTogglableTab } from '@digigov/ui/hooks/useTogglableTab';
 export var AccordionItemDetails = withDeprecation(AccordionSectionContent, {
   name: 'AccordionItemDetails',
   rename: 'AccordionSectionContent'
@@ -34,16 +34,16 @@ export var AccordionItem = withDeprecation( /*#__PURE__*/React.memo(AccordionSec
 });
 
 var useAccordion = function useAccordion(props) {
-  var _useTogglableSections = useTogglableSections({
+  var _useTogglableTab = useTogglableTab({
     toggleProperty: 'open',
     onToggleProperty: 'onToggle',
     singleOpen: props && !!props.singleOpen
   }),
-      register = _useTogglableSections.register,
-      setOpened = _useTogglableSections.setOpened,
-      opened = _useTogglableSections.opened,
-      registered = _useTogglableSections.registered,
-      rest = _objectWithoutProperties(_useTogglableSections, _excluded2);
+      register = _useTogglableTab.register,
+      setOpened = _useTogglableTab.setOpened,
+      opened = _useTogglableTab.opened,
+      registered = _useTogglableTab.registered,
+      rest = _objectWithoutProperties(_useTogglableTab, _excluded2);
 
   return _extends({
     register: register,

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

@@ -1,22 +1,17 @@
 import React from 'react';
-import { Divider } from '@digigov/ui/core/Divider';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 
-var _ref = /*#__PURE__*/React.createElement(Divider, {
-  visible: true
-});
+var _ref = /*#__PURE__*/React.createElement(SectionBreak, null);
 
-var _ref2 = /*#__PURE__*/React.createElement(Divider, {
-  visible: true,
+var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
   size: "m"
 });
 
-var _ref3 = /*#__PURE__*/React.createElement(Divider, {
-  visible: true,
+var _ref3 = /*#__PURE__*/React.createElement(SectionBreak, {
   size: "l"
 });
 
-var _ref4 = /*#__PURE__*/React.createElement(Divider, {
-  visible: true,
+var _ref4 = /*#__PURE__*/React.createElement(SectionBreak, {
   size: "xl"
 });
 

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { Link } from '@digigov/ui/core/Link';
 
-var _ref = /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Title, {
-  size: "sm"
+var _ref = /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Heading, {
+  size: "s"
 }, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/React.createElement(Link, null, "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03AD\u03C4\u03BF\u03C2"));
 
 export var Default = function Default() {

package/esm/core/ErrorSummary/__stories__/LinkedToCheckbox.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { Link } from '@digigov/ui/core/Link';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
@@ -10,8 +10,8 @@ import { Checkbox, CheckboxItem } from '@digigov/ui/core/Checkbox';
 
 var _ref = /*#__PURE__*/React.createElement("div", {
   className: "example"
-}, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Title, {
-  size: "sm"
+}, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Heading, {
+  size: "s"
 }, "\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: "#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(FieldContainer, {

package/esm/core/ErrorSummary/__stories__/LinkedToField.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { Link } from '@digigov/ui/core/Link';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
@@ -10,8 +10,8 @@ import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/Field
 
 var _ref = /*#__PURE__*/React.createElement("div", {
   className: "example"
-}, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Title, {
-  size: "sm"
+}, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Heading, {
+  size: "s"
 }, "\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: "#passport-date"
 }, "\u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03AD\u03BA\u03B4\u03BF\u03C3\u03B7\u03C2 \u03C4\u03BF\u03C5 \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03B7\u03C1\u03AF\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD.")), /*#__PURE__*/React.createElement(FieldContainer, {

package/esm/core/ErrorSummary/__stories__/LinkedToInput.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { Link } from '@digigov/ui/core/Link';
 import { TextInput } from '@digigov/ui/core/TextInput';
 import { FieldContainer } from '@digigov/ui/core/FieldContainer';
@@ -12,8 +12,8 @@ import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
 
 var _ref = /*#__PURE__*/React.createElement("div", {
   className: "example"
-}, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Title, {
-  size: "sm"
+}, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Heading, {
+  size: "s"
 }, "\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: "#business-name"
 }, "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2")), /*#__PURE__*/React.createElement(FieldContainer, {

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

@@ -3,11 +3,15 @@ import { Link } from '@digigov/ui/core/Link';
 import { Masthead } from '@digigov/ui/layouts/Basic/Masthead';
 import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 
-var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, null), /*#__PURE__*/React.createElement(Link, {
+var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+}), /*#__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, {
+  visible: false
+}));
 
 export var DarkBackground = function DarkBackground() {
   return _ref;

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

@@ -3,12 +3,16 @@ import { Link } from '@digigov/ui/core/Link';
 import { Masthead } from '@digigov/ui/layouts/Basic/Masthead';
 import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 
-var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, null), /*#__PURE__*/React.createElement(Link, {
+var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+}), /*#__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, {
+  visible: false
+}));
 
 export var DarkBackgroundNoUnderline = function DarkBackgroundNoUnderline() {
   return _ref;

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

@@ -7,6 +7,8 @@ export default {
   displayName: 'NavList'
 };
 export * from '@digigov/ui/core/NavList/__stories__/Default';
-export * from '@digigov/ui/core/NavList/__stories__/NavListAutoExample';
+export * from '@digigov/ui/core/NavList/__stories__/NavListHorizontalAutoExample';
+export * from '@digigov/ui/core/NavList/__stories__/NavListVerticalAutoExample';
+export * from '@digigov/ui/core/NavList/__stories__/NavListSecondaryAutoExample';
 export * from '@digigov/ui/core/NavList/__stories__/NavListEpathlaExample';
 export * from '@digigov/ui/core/NavList/__stories__/NavHorizontalLayout';

package/esm/core/NavList/NavList.stories.playwright.json

@@ -6,26 +6,26 @@
         {
           "actions": [
             {
-              "name": "click",
+              "name": "hover",
               "args": {
                 "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(3)>button"
               }
             }
           ],
-          "id": "WMfgyO3E_9S_",
-          "title": "Open sub menu"
+          "id": "dHQxEQCIJ4bJ",
+          "title": "Hover item"
         },
         {
           "actions": [
             {
-              "name": "hover",
+              "name": "click",
               "args": {
                 "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(3)>button"
               }
             }
           ],
-          "id": "dHQxEQCIJ4bJ",
-          "title": "Hover item"
+          "id": "WMfgyO3E_9S_",
+          "title": "Open sub menu"
         }
       ]
     }

package/{es/core/NavList → esm/core/NavList/NavListAuto}/NavListAuto.js

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["layout", "openSubMenus", "links", "role"];
+var _excluded = ["layout", "border", "fixed", "openSubMenus", "links", "role"];
 import React from 'react';
-import { NavListProvider } from '@digigov/ui/core/NavList/NavListContext';
-import { NavListBase } from '@digigov/ui/core/NavList/NavListBase';
+import { NavListProviderAuto } from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
+import { NavListBaseAuto } from '@digigov/ui/core/NavList/NavListAuto/NavListBaseAuto';
 export var NavListAuto = function NavListAuto(_ref) {
   var layout = _ref.layout,
+      border = _ref.border,
+      fixed = _ref.fixed,
       _ref$openSubMenus = _ref.openSubMenus,
       openSubMenus = _ref$openSubMenus === void 0 ? false : _ref$openSubMenus,
       _ref$links = _ref.links,
@@ -13,12 +15,16 @@ export var NavListAuto = function NavListAuto(_ref) {
       role = _ref.role,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(NavListProvider, {
+  return /*#__PURE__*/React.createElement(NavListProviderAuto, {
     openSubMenus: openSubMenus,
     layout: layout,
+    border: border,
+    fixed: fixed,
     links: links
-  }, /*#__PURE__*/React.createElement(NavListBase, _extends({
+  }, /*#__PURE__*/React.createElement(NavListBaseAuto, _extends({
     layout: layout,
+    border: border,
+    fixed: fixed,
     role: role
   }, props)));
 };

package/{es/core/NavList/NavListBase.js → esm/core/NavList/NavListAuto/NavListBaseAuto.js}

@@ -4,7 +4,7 @@ var _excluded = ["className", "children", "floating", "layout", "subMenu", "role
 import React from 'react';
 import Nav from '@digigov/ui/core/NavList/Nav';
 import NavList from '@digigov/ui/core/NavList/NavList';
-export var NavListBase = function NavListBase(_ref) {
+export var NavListBaseAuto = function NavListBaseAuto(_ref) {
   var className = _ref.className,
       children = _ref.children,
       floating = _ref.floating,
@@ -16,7 +16,9 @@ export var NavListBase = function NavListBase(_ref) {
   return /*#__PURE__*/React.createElement(Nav, _extends({
     open: true,
     layout: layout
-  }, props), /*#__PURE__*/React.createElement(NavList, {
+  }, props, {
+    "aria-orientation": layout
+  }), /*#__PURE__*/React.createElement(NavList, {
     layout: layout
   }, children));
 };

package/esm/core/NavList/{NavListContext.js → NavListAuto/NavListContextAuto.js}

@@ -2,17 +2,21 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useNavList } from '@digigov/ui/hooks/useNavList';
 import React, { createContext, useEffect, useState } from 'react';
-export var NavListContext = /*#__PURE__*/createContext({
+export var NavListContextAuto = /*#__PURE__*/createContext({
   layout: 'horizontal',
+  border: true,
+  fixed: true,
   openSubMenus: false,
   links: [],
   activeLink: {},
   activeSubMenu: []
 });
 var TRAILING_SLASH = /\/$/gm;
-export var NavListProvider = function NavListProvider(_ref) {
+export var NavListProviderAuto = function NavListProviderAuto(_ref) {
   var children = _ref.children,
       layout = _ref.layout,
+      border = _ref.border,
+      fixed = _ref.fixed,
       _ref$openSubMenus = _ref.openSubMenus,
       openSubMenus = _ref$openSubMenus === void 0 ? false : _ref$openSubMenus,
       _ref$showDividers = _ref.showDividers,
@@ -32,10 +36,15 @@ export var NavListProvider = function NavListProvider(_ref) {
 
   var _useNavList = useNavList(),
       container = _useNavList.container,
-      register = _useNavList.register;
+      registerButton = _useNavList.registerButton,
+      registerLink = _useNavList.registerLink;
 
-  var setRegister = function setRegister(name) {
-    return _extends({}, register(name));
+  var setRegisterButton = function setRegisterButton(name) {
+    return _extends({}, registerButton(name));
+  };
+
+  var setRegisterLink = function setRegisterLink(name) {
+    return _extends({}, registerLink(name));
   }; // TODO: Cleanup unused props
 
 
@@ -75,18 +84,21 @@ export var NavListProvider = function NavListProvider(_ref) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(NavListContext.Provider, {
+  return /*#__PURE__*/React.createElement(NavListContextAuto.Provider, {
     value: {
       openSubMenus: openSubMenus,
       layout: layout,
+      border: border,
+      fixed: fixed,
       showDividers: showDividers,
       links: links,
       activeLink: activeLink,
       activeSubMenu: activeSubMenu,
       onSubMenuActive: onSubMenuActive,
       container: container,
-      setRegister: setRegister
+      setRegisterButton: setRegisterButton,
+      setRegisterLink: setRegisterLink
     }
   }, children);
 };
-export default NavListContext;
+export default NavListContextAuto;

package/esm/core/NavList/NavListAuto/NavListItemAnchorAuto.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "href", "active", "layout", "children"];
+import React, { useContext } from 'react';
+import { NavListItemLink } from '@digigov/ui/core/NavList/NavListItemLink';
+import NavListContextAuto from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
+import NavListItem from '@digigov/react-core/NavListItem';
+export var NavListItemAnchorAuto = function NavListItemAnchorAuto(_ref) {
+  var _container;
+
+  var name = _ref.name,
+      href = _ref.href,
+      active = _ref.active,
+      layout = _ref.layout,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useContext = useContext(NavListContextAuto),
+      container = _useContext.container,
+      setRegisterLink = _useContext.setRegisterLink;
+
+  return /*#__PURE__*/React.createElement(NavListItem, {
+    layout: layout
+  }, setRegisterLink && /*#__PURE__*/React.createElement(NavListItemLink, _extends({
+    href: href,
+    active: active || container && ((_container = container(name)) === null || _container === void 0 ? void 0 : _container.active)
+  }, props, setRegisterLink(name)), children));
+};
+export default NavListItemAnchorAuto;