@digigov/ui 0.30.2 → 0.31.0

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

@@ -0,0 +1,255 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { NavListAuto } from '@digigov/ui/core/NavList';
+import NavListItemAuto from '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto';
+import FieldContainer, { Fieldset } from '@digigov/ui/core/FieldContainer';
+import Hint from '@digigov/ui/typography/Hint';
+import { RadioContainer, RadioItem } from '@digigov/ui/core/RadioContainer';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
+var links = [{
+  name: 'Nav1',
+  label: 'Item list 1',
+  menu: {
+    title: 'This is the first Menu',
+    links: [{
+      name: 'Nav1__Nav1.1',
+      label: 'link navigation',
+      href: '?q=item'
+    }, {
+      name: 'Nav1__Nav1.2',
+      label: 'link navigation',
+      href: '?q=item'
+    }]
+  }
+}, {
+  name: 'Nav2',
+  label: 'Item list 2',
+  menu: {
+    title: 'This is the second Menu',
+    links: [{
+      name: 'Nav2__Nav2.1',
+      label: 'link navigation',
+      href: '?q=item'
+    }, {
+      name: 'Nav2__Nav2.2',
+      label: 'link navigation',
+      href: '?q=item'
+    }, {
+      name: 'Nav2__Nav2.3',
+      label: 'link navigation',
+      href: '?q=item'
+    }, {
+      name: 'Nav2__Nav2.4',
+      label: 'link navigation',
+      href: '?q=item'
+    }, {
+      name: 'Nav2__Nav2.5',
+      label: 'link navigation',
+      href: '?q=item'
+    }, {
+      name: 'Nav2__Nav2.6',
+      label: 'link navigation',
+      href: '?q=item'
+    }, {
+      name: 'Nav2__Nav2.7',
+      label: 'link navigation',
+      href: '?q=item'
+    }]
+  }
+}, {
+  name: 'Nav3',
+  label: 'Item list 3',
+  subMenu: [{
+    name: 'Nav3__Nav3.1',
+    label: 'Item list 4',
+    href: '?q=item4'
+  }, {
+    name: 'Nav3__Nav3.2',
+    label: 'Item list 5',
+    subMenu: [{
+      name: 'Nav3__Nav3.2__Nav3.2.1',
+      label: 'Item list 5.2',
+      menu: {
+        title: 'This is the fifth Menu',
+        links: [{
+          name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.1',
+          label: 'link navigation',
+          href: '?q=item'
+        }, {
+          name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.2',
+          label: 'link navigation',
+          href: '?q=item'
+        }, {
+          name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.3',
+          label: 'link navigation',
+          href: '?q=item'
+        }, {
+          name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.4',
+          label: 'link navigation',
+          href: '?q=item'
+        }, {
+          name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.5',
+          label: 'link navigation',
+          href: '?q=item'
+        }, {
+          name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.6',
+          label: 'link navigation',
+          href: '?q=item'
+        }, {
+          name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.7',
+          label: 'link navigation',
+          href: '?q=item'
+        }]
+      }
+    }]
+  }, {
+    name: 'Nav3__Nav3.3',
+    label: 'Item list 6',
+    menu: {
+      title: 'This is the sixth Menu',
+      links: [{
+        name: 'Nav3__Nav3.3__Nav3.3.1',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.2',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.3',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.4',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.5',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.6',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.7',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.8',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.9',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.10',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.11',
+        label: 'link navigation',
+        href: '?q=item'
+      }]
+    }
+  }]
+}];
+
+var _ref = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false,
+  size: "l"
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(Hint, {
+  id: "name-hint"
+}, "Layout options:");
+
+var _ref3 = /*#__PURE__*/React.createElement(Hint, {
+  id: "name-hint"
+}, "Bottom border:");
+
+var _ref4 = /*#__PURE__*/React.createElement(Hint, {
+  id: "name-hint"
+}, "Position fixed:");
+
+export var NavListSecondaryAutoExample = function NavListSecondaryAutoExample() {
+  var _useState = useState('horizontal'),
+      _useState2 = _slicedToArray(_useState, 2),
+      layout = _useState2[0],
+      setLayout = _useState2[1];
+
+  var _useState3 = useState('no'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      border = _useState4[0],
+      setBorder = _useState4[1];
+
+  var _useState5 = useState('no'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      fixed = _useState6[0],
+      setFixed = _useState6[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavListAuto, {
+    layout: layout,
+    border: border === 'yes',
+    fixed: fixed === 'yes',
+    links: links,
+    "aria-label": "Nav list"
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAuto, {
+      key: key,
+      item: item
+    });
+  })), _ref, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, {
+    "aria-describedby": "name-hint"
+  }, _ref2, /*#__PURE__*/React.createElement(RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/React.createElement(RadioItem, {
+    defaultChecked: layout === 'vertical',
+    name: "changed_display",
+    value: "vertical",
+    onClick: function onClick() {
+      return setLayout('vertical');
+    }
+  }, "Vertical"), /*#__PURE__*/React.createElement(RadioItem, {
+    defaultChecked: layout === 'horizontal',
+    name: "changed_display",
+    value: "horizontal",
+    onClick: function onClick() {
+      return setLayout('horizontal');
+    }
+  }, "Horizontal")), _ref3, /*#__PURE__*/React.createElement(RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/React.createElement(RadioItem, {
+    defaultChecked: border === 'yes',
+    name: "changed_border",
+    value: "yes",
+    onClick: function onClick() {
+      return setBorder('yes');
+    }
+  }, "Yes"), /*#__PURE__*/React.createElement(RadioItem, {
+    defaultChecked: border === 'no',
+    name: "changed_border",
+    value: "no",
+    onClick: function onClick() {
+      return setBorder('no');
+    }
+  }, "No")), _ref4, /*#__PURE__*/React.createElement(RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/React.createElement(RadioItem, {
+    defaultChecked: fixed === 'yes',
+    name: "changed_position",
+    value: "yes",
+    onClick: function onClick() {
+      return setFixed('yes');
+    }
+  }, "Yes"), /*#__PURE__*/React.createElement(RadioItem, {
+    defaultChecked: fixed === 'no',
+    name: "changed_position",
+    value: "no",
+    onClick: function onClick() {
+      return setFixed('no');
+    }
+  }, "No")))));
+};
+export default NavListSecondaryAutoExample;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { NavListAuto } from '@digigov/ui/core/NavList';
+import NavListItemAuto from '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto';
+var links = [{
+  name: 'Nav1',
+  label: 'Nav list item 1',
+  href: '#'
+}, {
+  name: 'Nav2',
+  label: 'Nav list item 2',
+  menu: {
+    title: 'This is the first Menu',
+    links: [{
+      name: 'Nav2.1',
+      label: 'link navigation',
+      href: '#'
+    }, {
+      name: 'Nav2.2',
+      label: 'link navigation',
+      href: '#'
+    }, {
+      name: 'Nav2.3',
+      label: 'link navigation',
+      href: '#'
+    }, {
+      name: 'Nav2.4',
+      label: 'link navigation',
+      href: '#'
+    }]
+  }
+}, {
+  name: 'Nav3',
+  label: 'Nav list item 3',
+  href: '#'
+}];
+export var NavListVerticalAutoExample = function NavListVerticalAutoExample() {
+  var layout = 'vertical';
+  var border = false;
+  return /*#__PURE__*/React.createElement(NavListAuto, {
+    layout: layout,
+    border: border,
+    links: links,
+    "aria-label": "Nav list"
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAuto, {
+      key: key,
+      item: item
+    });
+  }));
+};
+export default NavListVerticalAutoExample;

package/esm/core/NavList/index.js

@@ -1,11 +1,8 @@
 export * from '@digigov/ui/core/NavList/NavListItem';
-export * from '@digigov/ui/core/NavList/NavListAuto';
-export * from '@digigov/ui/core/NavList/NavListItemAuto';
-export * from '@digigov/ui/core/NavList/NavListSubMenu';
-export * from '@digigov/ui/core/NavList/NavListContext';
+export * from '@digigov/ui/core/NavList/NavListAuto/NavListAuto';
+export * from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
 export * from '@digigov/ui/core/NavList/Nav';
 export * from '@digigov/ui/core/NavList/NavList';
-export * from '@digigov/ui/core/NavList/NavListItem';
 export * from '@digigov/ui/core/NavList/NavListItemLink';
 export * from '@digigov/ui/core/NavList/NavListItemButton';
 export * from '@digigov/ui/core/NavList/NavMenu';

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Tabs, TabsList, TabsListItem, TabsPanel, useTabs } from '@digigov/ui/core/Tabs';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
 import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction } from '@digigov/ui/core/SummaryList';
 import { Link } from '@digigov/ui/core/Link';
 
-var _ref = /*#__PURE__*/React.createElement(Title, {
-  size: "md",
+var _ref = /*#__PURE__*/React.createElement(Heading, {
+  size: "m",
   element: "h3"
 }, "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7");
 
@@ -14,8 +14,8 @@ var _ref2 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/Rea
   href: "#"
 }, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03BF\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2 ")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC. \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, null, ' ', "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5 ")))));
 
-var _ref3 = /*#__PURE__*/React.createElement(Title, {
-  size: "md",
+var _ref3 = /*#__PURE__*/React.createElement(Heading, {
+  size: "m",
   element: "h3"
 }, "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2");
 

package/esm/core/Tabs/index.js

@@ -3,12 +3,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["register", "opened"];
 import { useCallback, useRef } from 'react';
 import Tabs from '@digigov/react-core/Tabs';
-import { useTogglableSections } from '@digigov/ui/hooks/useTogglableSections';
+import { useTogglableTab } from '@digigov/ui/hooks/useTogglableTab';
 export var useTabs = function useTabs() {
   var registeredPanels = useRef({});
   var goTo = useCallback(function (key) {
-    console.log(registeredPanels.current[key].offsetTop - rest.registered.current[key].offsetTop);
-
     if (registeredPanels.current[key].offsetTop - rest.registered.current[key].offsetTop >= 30) {
       var _registeredPanels$cur;
 
@@ -19,7 +17,7 @@ export var useTabs = function useTabs() {
     }
   }, []);
 
-  var _useTogglableSections = useTogglableSections({
+  var _useTogglableTab = useTogglableTab({
     singleOpen: true,
     toggleProperty: 'selected',
     onToggleProperty: 'onClick',
@@ -27,9 +25,9 @@ export var useTabs = function useTabs() {
     ariaNavigation: true,
     toggleHook: goTo
   }),
-      register = _useTogglableSections.register,
-      opened = _useTogglableSections.opened,
-      rest = _objectWithoutProperties(_useTogglableSections, _excluded);
+      register = _useTogglableTab.register,
+      opened = _useTogglableTab.opened,
+      rest = _objectWithoutProperties(_useTogglableTab, _excluded);
 
   var panel = useCallback(function (key) {
     return {

package/esm/hooks/useFontSize.js

@@ -0,0 +1,10 @@
+import useVariantVars from "@digigov/ui/hooks/useVariantVars";
+export var useFontSize = function useFontSize() {
+  var config = {
+    'name': 'font-size',
+    'variables': ['text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl', 'text-5xl'],
+    'variants': ['default', 'large']
+  };
+  return useVariantVars(config);
+};
+export default useFontSize;

package/esm/hooks/useHighlightLinks.js

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState, useEffect } from 'react';
+export var useHighlightLinks = function useHighlightLinks() {
+  var storedHighlightLinks = localStorage.getItem('--theme-highlight-links');
+
+  var _useState = useState(storedHighlightLinks || 'default'),
+      _useState2 = _slicedToArray(_useState, 2),
+      highlightLinks = _useState2[0],
+      changeHighlightLinks = _useState2[1];
+
+  useEffect(function () {
+    if (highlightLinks === 'highlight') {
+      document.documentElement.classList.add("govgr-highlight-links");
+    } else {
+      document.documentElement.classList.remove("govgr-highlight-links");
+    }
+
+    localStorage.setItem('--theme-highlight-links', highlightLinks);
+  }, [highlightLinks]);
+  useEffect(function () {
+    var beforePrintListener = function beforePrintListener() {
+      document.documentElement.classList.remove("govgr-highlight-links");
+    };
+
+    var afterPrintListener = function afterPrintListener() {
+      document.documentElement.classList.add(localStorage.getItem('--theme-highlight-links') === 'highlight' ? "govgr-highlight-links" : '');
+    };
+
+    window.addEventListener('beforeprint', beforePrintListener);
+    window.addEventListener('afterprint', afterPrintListener);
+    return function () {
+      window.removeEventListener('beforeprint', beforePrintListener);
+      window.removeEventListener('afterprint', afterPrintListener);
+    };
+  }, []);
+  return [highlightLinks, changeHighlightLinks];
+};
+export default useHighlightLinks;

package/esm/hooks/useLetterSpacing.js

@@ -0,0 +1,10 @@
+import useVariantVars from '@digigov/ui/hooks/useVariantVars';
+export var useLetterSpacing = function useLetterSpacing() {
+  var config = {
+    name: 'letter-spacing',
+    variables: ["letter-spacing-normal", "letter-spacing-wide", "letter-spacing-wider", "letter-spacing-widest"],
+    variants: ['default', 'extra']
+  };
+  return useVariantVars(config);
+};
+export default useLetterSpacing;

package/esm/hooks/useLineHeight.js

@@ -0,0 +1,10 @@
+import useVariantVars from '@digigov/ui/hooks/useVariantVars';
+export var useLineHeight = function useLineHeight() {
+  var config = {
+    name: 'line-height',
+    variables: ["line-h-sm", "line-h-base", "line-h-lg", "line-h-xl", "line-h-2xl", "line-h-3xl", "line-h-4xl", "line-h-5xl"],
+    variants: ['default', 'large']
+  };
+  return useVariantVars(config);
+};
+export default useLineHeight;

package/esm/hooks/useNavList.js

@@ -1,21 +1,23 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["register", "opened"];
+var _excluded = ["registerButton", "registerLink", "opened"];
+import { useTogglableNav } from '@digigov/ui/hooks/useTogglableNav';
 import { useCallback, useRef } from 'react';
-import { useTogglableSections } from '@digigov/ui/hooks/useTogglableSections';
 export var useNavList = function useNavList() {
   var registeredContainers = useRef({});
 
-  var _useTogglableSections = useTogglableSections({
+  var _useTogglableNav = useTogglableNav({
     singleOpen: true,
     toggleOpenClose: true,
+    toggleParentOpen: true,
     toggleProperty: 'active',
     onToggleProperty: 'onClick',
     ariaNavigation: true
   }),
-      register = _useTogglableSections.register,
-      opened = _useTogglableSections.opened,
-      rest = _objectWithoutProperties(_useTogglableSections, _excluded);
+      registerButton = _useTogglableNav.registerButton,
+      registerLink = _useTogglableNav.registerLink,
+      opened = _useTogglableNav.opened,
+      rest = _objectWithoutProperties(_useTogglableNav, _excluded);
 
   var container = useCallback(function (key) {
     return {
@@ -29,7 +31,8 @@ export var useNavList = function useNavList() {
     };
   }, [opened]);
   return _extends({
-    register: register,
+    registerButton: registerButton,
+    registerLink: registerLink,
     opened: opened,
     container: container
   }, rest);

package/esm/hooks/useTheme.js

@@ -1,9 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useState, useEffect } from 'react';
-;
 export var useTheme = function useTheme() {
   var prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  var storedTheme = localStorage.getItem('theme');
+  var storedTheme = localStorage.getItem('--theme-palette');
 
   var _useState = useState(storedTheme || 'auto'),
       _useState2 = _slicedToArray(_useState, 2),
@@ -11,21 +10,33 @@ export var useTheme = function useTheme() {
       changeTheme = _useState2[1];
 
   useEffect(function () {
+    document.documentElement.classList.remove('dark', 'light', 'auto');
+
     if (theme === 'auto') {
-      document.documentElement.className = prefersDarkScheme ? 'dark' : 'light';
+      document.documentElement.classList.add(prefersDarkScheme ? 'dark' : 'light');
     } else {
-      document.documentElement.className = theme;
+      document.documentElement.classList.add(theme);
     }
 
-    localStorage.setItem('theme', theme);
+    localStorage.setItem('--theme-palette', theme);
   }, [theme]);
   useEffect(function () {
     var beforePrintListener = function beforePrintListener() {
-      document.documentElement.className = 'light';
+      document.documentElement.classList.remove('dark');
+      document.documentElement.classList.add('light');
     };
 
     var afterPrintListener = function afterPrintListener() {
-      document.documentElement.className = localStorage.getItem('theme') || theme;
+      document.documentElement.classList.remove('light');
+      var localtheme;
+
+      if (localStorage.getItem('--theme-palette') === 'auto') {
+        localtheme = prefersDarkScheme ? 'dark' : 'light';
+      } else {
+        localtheme = localStorage.getItem('--theme-palette');
+      }
+
+      document.documentElement.classList.add(localtheme || theme);
     };
 
     window.addEventListener('beforeprint', beforePrintListener);
@@ -35,9 +46,6 @@ export var useTheme = function useTheme() {
       window.removeEventListener('afterprint', afterPrintListener);
     };
   }, []);
-  return {
-    theme: theme,
-    changeTheme: changeTheme
-  };
+  return [theme, changeTheme];
 };
 export default useTheme;