@digigov/ui 0.30.3 → 0.32.0

package/registry.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.stories = exports["default"] = void 0;
 
+var _digigov_ui_admin_AccessibilityMenu = _interopRequireWildcard(require("@digigov/ui/admin/AccessibilityMenu"));
+
 var _digigov_ui_admin_AdminLayout = _interopRequireWildcard(require("@digigov/ui/admin/AdminLayout"));
 
 var _digigov_ui_admin_AutoComplete = _interopRequireWildcard(require("@digigov/ui/admin/AutoComplete"));
@@ -121,7 +123,9 @@ var _digigov_ui_app_QrCodeViewer_types = _interopRequireWildcard(require("@digig
 
 var _digigov_ui_app_QrCodeViewer_utils = _interopRequireWildcard(require("@digigov/ui/app/QrCodeViewer/utils"));
 
-var _digigov_ui_app_ThemeSelectorOptions = _interopRequireWildcard(require("@digigov/ui/app/ThemeSelectorOptions"));
+var _digigov_ui_app_ThemeOptionsForm = _interopRequireWildcard(require("@digigov/ui/app/ThemeOptionsForm"));
+
+var _digigov_ui_app_ThemePaletteForm = _interopRequireWildcard(require("@digigov/ui/app/ThemePaletteForm"));
 
 var _digigov_ui_core_Accordion = _interopRequireWildcard(require("@digigov/ui/core/Accordion"));
 
@@ -197,15 +201,23 @@ var _digigov_ui_core_NavList_Nav = _interopRequireWildcard(require("@digigov/ui/
 
 var _digigov_ui_core_NavList_NavList = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavList"));
 
-var _digigov_ui_core_NavList_NavListAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto"));
+var _digigov_ui_core_NavList_NavListAuto_NavListAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListAuto"));
 
-var _digigov_ui_core_NavList_NavListBase = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListBase"));
+var _digigov_ui_core_NavList_NavListAuto_NavListBaseAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListBaseAuto"));
 
-var _digigov_ui_core_NavList_NavListContext = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListContext"));
+var _digigov_ui_core_NavList_NavListAuto_NavListContextAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListContextAuto"));
 
-var _digigov_ui_core_NavList_NavListItem = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListItem"));
+var _digigov_ui_core_NavList_NavListAuto_NavListItemAnchorAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListItemAnchorAuto"));
+
+var _digigov_ui_core_NavList_NavListAuto_NavListItemAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListItemAuto"));
+
+var _digigov_ui_core_NavList_NavListAuto_NavListItemButtonAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListItemButtonAuto"));
 
-var _digigov_ui_core_NavList_NavListItemAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListItemAuto"));
+var _digigov_ui_core_NavList_NavListAuto_NavListMenuAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListMenuAuto"));
+
+var _digigov_ui_core_NavList_NavListAuto_NavListSubMenuAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListSubMenuAuto"));
+
+var _digigov_ui_core_NavList_NavListItem = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListItem"));
 
 var _digigov_ui_core_NavList_NavListItemBase = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListItemBase"));
 
@@ -213,8 +225,6 @@ var _digigov_ui_core_NavList_NavListItemButton = _interopRequireWildcard(require
 
 var _digigov_ui_core_NavList_NavListItemLink = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListItemLink"));
 
-var _digigov_ui_core_NavList_NavListSubMenu = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListSubMenu"));
-
 var _digigov_ui_core_NavList_NavMenu = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavMenu"));
 
 var _digigov_ui_core_NavList_NavMenuContainer = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavMenuContainer"));
@@ -245,6 +255,8 @@ var _digigov_ui_core_SelectContainer = _interopRequireWildcard(require("@digigov
 
 var _digigov_ui_core_ServiceBadge = _interopRequireWildcard(require("@digigov/ui/core/ServiceBadge"));
 
+var _digigov_ui_core_SingleCharacterInputContainer = _interopRequireWildcard(require("@digigov/ui/core/SingleCharacterInputContainer"));
+
 var _digigov_ui_core_SkipLink = _interopRequireWildcard(require("@digigov/ui/core/SkipLink"));
 
 var _digigov_ui_core_SummaryList = _interopRequireWildcard(require("@digigov/ui/core/SummaryList"));
@@ -301,10 +313,18 @@ var _digigov_ui_govgr = _interopRequireWildcard(require("@digigov/ui/govgr"));
 
 var _digigov_ui_hooks_useDebounce = _interopRequireWildcard(require("@digigov/ui/hooks/useDebounce"));
 
+var _digigov_ui_hooks_useFontSize = _interopRequireWildcard(require("@digigov/ui/hooks/useFontSize"));
+
+var _digigov_ui_hooks_useHighlightLinks = _interopRequireWildcard(require("@digigov/ui/hooks/useHighlightLinks"));
+
 var _digigov_ui_hooks_useKeypress = _interopRequireWildcard(require("@digigov/ui/hooks/useKeypress"));
 
 var _digigov_ui_hooks_useLatest = _interopRequireWildcard(require("@digigov/ui/hooks/useLatest"));
 
+var _digigov_ui_hooks_useLetterSpacing = _interopRequireWildcard(require("@digigov/ui/hooks/useLetterSpacing"));
+
+var _digigov_ui_hooks_useLineHeight = _interopRequireWildcard(require("@digigov/ui/hooks/useLineHeight"));
+
 var _digigov_ui_hooks_useNavList = _interopRequireWildcard(require("@digigov/ui/hooks/useNavList"));
 
 var _digigov_ui_hooks_useOutdatedBrowserCheck = _interopRequireWildcard(require("@digigov/ui/hooks/useOutdatedBrowserCheck"));
@@ -313,7 +333,11 @@ var _digigov_ui_hooks_useSearch = _interopRequireWildcard(require("@digigov/ui/h
 
 var _digigov_ui_hooks_useTheme = _interopRequireWildcard(require("@digigov/ui/hooks/useTheme"));
 
-var _digigov_ui_hooks_useTogglableSections = _interopRequireWildcard(require("@digigov/ui/hooks/useTogglableSections"));
+var _digigov_ui_hooks_useTogglableNav = _interopRequireWildcard(require("@digigov/ui/hooks/useTogglableNav"));
+
+var _digigov_ui_hooks_useTogglableTab = _interopRequireWildcard(require("@digigov/ui/hooks/useTogglableTab"));
+
+var _digigov_ui_hooks_useVariantVars = _interopRequireWildcard(require("@digigov/ui/hooks/useVariantVars"));
 
 var _digigov_ui = _interopRequireWildcard(require("@digigov/ui"));
 
@@ -451,6 +475,8 @@ var _digigov_ui_core_RadioContainer_RadioContainer_stories = _interopRequireWild
 
 var _digigov_ui_core_SelectContainer_Select_stories = _interopRequireWildcard(require("@digigov/ui/core/SelectContainer/Select.stories"));
 
+var _digigov_ui_core_SingleCharacterInputContainer_SingleCharacterInputContainer_stories = _interopRequireWildcard(require("@digigov/ui/core/SingleCharacterInputContainer/SingleCharacterInputContainer.stories"));
+
 var _digigov_ui_core_SummaryList_SummaryList_stories = _interopRequireWildcard(require("@digigov/ui/core/SummaryList/SummaryList.stories"));
 
 var _digigov_ui_core_Table_Table_stories = _interopRequireWildcard(require("@digigov/ui/core/Table/Table.stories"));
@@ -498,6 +524,7 @@ function lazyImport(pkgImport) {
 }
 
 var _default = {
+  '@digigov/ui/admin/AccessibilityMenu': lazyImport(_digigov_ui_admin_AccessibilityMenu),
   '@digigov/ui/admin/AdminLayout': lazyImport(_digigov_ui_admin_AdminLayout),
   '@digigov/ui/admin/AutoComplete': lazyImport(_digigov_ui_admin_AutoComplete),
   '@digigov/ui/admin/AutoComplete/Status': lazyImport(_digigov_ui_admin_AutoComplete_Status),
@@ -555,7 +582,8 @@ var _default = {
   '@digigov/ui/app/QrCodeViewer/qrcodegen': lazyImport(_digigov_ui_app_QrCodeViewer_qrcodegen),
   '@digigov/ui/app/QrCodeViewer/types': lazyImport(_digigov_ui_app_QrCodeViewer_types),
   '@digigov/ui/app/QrCodeViewer/utils': lazyImport(_digigov_ui_app_QrCodeViewer_utils),
-  '@digigov/ui/app/ThemeSelectorOptions': lazyImport(_digigov_ui_app_ThemeSelectorOptions),
+  '@digigov/ui/app/ThemeOptionsForm': lazyImport(_digigov_ui_app_ThemeOptionsForm),
+  '@digigov/ui/app/ThemePaletteForm': lazyImport(_digigov_ui_app_ThemePaletteForm),
   '@digigov/ui/core/Accordion': lazyImport(_digigov_ui_core_Accordion),
   '@digigov/ui/core/BackLink': lazyImport(_digigov_ui_core_BackLink),
   '@digigov/ui/core/Base': lazyImport(_digigov_ui_core_Base),
@@ -593,15 +621,18 @@ var _default = {
   '@digigov/ui/core/NavList': lazyImport(_digigov_ui_core_NavList),
   '@digigov/ui/core/NavList/Nav': lazyImport(_digigov_ui_core_NavList_Nav),
   '@digigov/ui/core/NavList/NavList': lazyImport(_digigov_ui_core_NavList_NavList),
-  '@digigov/ui/core/NavList/NavListAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto),
-  '@digigov/ui/core/NavList/NavListBase': lazyImport(_digigov_ui_core_NavList_NavListBase),
-  '@digigov/ui/core/NavList/NavListContext': lazyImport(_digigov_ui_core_NavList_NavListContext),
+  '@digigov/ui/core/NavList/NavListAuto/NavListAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListAuto),
+  '@digigov/ui/core/NavList/NavListAuto/NavListBaseAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListBaseAuto),
+  '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListContextAuto),
+  '@digigov/ui/core/NavList/NavListAuto/NavListItemAnchorAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListItemAnchorAuto),
+  '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListItemAuto),
+  '@digigov/ui/core/NavList/NavListAuto/NavListItemButtonAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListItemButtonAuto),
+  '@digigov/ui/core/NavList/NavListAuto/NavListMenuAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListMenuAuto),
+  '@digigov/ui/core/NavList/NavListAuto/NavListSubMenuAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListSubMenuAuto),
   '@digigov/ui/core/NavList/NavListItem': lazyImport(_digigov_ui_core_NavList_NavListItem),
-  '@digigov/ui/core/NavList/NavListItemAuto': lazyImport(_digigov_ui_core_NavList_NavListItemAuto),
   '@digigov/ui/core/NavList/NavListItemBase': lazyImport(_digigov_ui_core_NavList_NavListItemBase),
   '@digigov/ui/core/NavList/NavListItemButton': lazyImport(_digigov_ui_core_NavList_NavListItemButton),
   '@digigov/ui/core/NavList/NavListItemLink': lazyImport(_digigov_ui_core_NavList_NavListItemLink),
-  '@digigov/ui/core/NavList/NavListSubMenu': lazyImport(_digigov_ui_core_NavList_NavListSubMenu),
   '@digigov/ui/core/NavList/NavMenu': lazyImport(_digigov_ui_core_NavList_NavMenu),
   '@digigov/ui/core/NavList/NavMenuContainer': lazyImport(_digigov_ui_core_NavList_NavMenuContainer),
   '@digigov/ui/core/NavList/NavMenuContainerContent': lazyImport(_digigov_ui_core_NavList_NavMenuContainerContent),
@@ -617,6 +648,7 @@ var _default = {
   '@digigov/ui/core/SectionBreak': lazyImport(_digigov_ui_core_SectionBreak),
   '@digigov/ui/core/SelectContainer': lazyImport(_digigov_ui_core_SelectContainer),
   '@digigov/ui/core/ServiceBadge': lazyImport(_digigov_ui_core_ServiceBadge),
+  '@digigov/ui/core/SingleCharacterInputContainer': lazyImport(_digigov_ui_core_SingleCharacterInputContainer),
   '@digigov/ui/core/SkipLink': lazyImport(_digigov_ui_core_SkipLink),
   '@digigov/ui/core/SummaryList': lazyImport(_digigov_ui_core_SummaryList),
   '@digigov/ui/core/SvgIcon': lazyImport(_digigov_ui_core_SvgIcon),
@@ -645,13 +677,19 @@ var _default = {
   '@digigov/ui/govgr/images/minedu-logo-black-base64': lazyImport(_digigov_ui_govgr_images_minedu_logo_black_base64),
   '@digigov/ui/govgr': lazyImport(_digigov_ui_govgr),
   '@digigov/ui/hooks/useDebounce': lazyImport(_digigov_ui_hooks_useDebounce),
+  '@digigov/ui/hooks/useFontSize': lazyImport(_digigov_ui_hooks_useFontSize),
+  '@digigov/ui/hooks/useHighlightLinks': lazyImport(_digigov_ui_hooks_useHighlightLinks),
   '@digigov/ui/hooks/useKeypress': lazyImport(_digigov_ui_hooks_useKeypress),
   '@digigov/ui/hooks/useLatest': lazyImport(_digigov_ui_hooks_useLatest),
+  '@digigov/ui/hooks/useLetterSpacing': lazyImport(_digigov_ui_hooks_useLetterSpacing),
+  '@digigov/ui/hooks/useLineHeight': lazyImport(_digigov_ui_hooks_useLineHeight),
   '@digigov/ui/hooks/useNavList': lazyImport(_digigov_ui_hooks_useNavList),
   '@digigov/ui/hooks/useOutdatedBrowserCheck': lazyImport(_digigov_ui_hooks_useOutdatedBrowserCheck),
   '@digigov/ui/hooks/useSearch': lazyImport(_digigov_ui_hooks_useSearch),
   '@digigov/ui/hooks/useTheme': lazyImport(_digigov_ui_hooks_useTheme),
-  '@digigov/ui/hooks/useTogglableSections': lazyImport(_digigov_ui_hooks_useTogglableSections),
+  '@digigov/ui/hooks/useTogglableNav': lazyImport(_digigov_ui_hooks_useTogglableNav),
+  '@digigov/ui/hooks/useTogglableTab': lazyImport(_digigov_ui_hooks_useTogglableTab),
+  '@digigov/ui/hooks/useVariantVars': lazyImport(_digigov_ui_hooks_useVariantVars),
   '@digigov/ui': lazyImport(_digigov_ui),
   '@digigov/ui/layouts/Basic/Aside': lazyImport(_digigov_ui_layouts_Basic_Aside),
   '@digigov/ui/layouts/Basic/Bottom': lazyImport(_digigov_ui_layouts_Basic_Bottom),
@@ -723,6 +761,7 @@ var stories = {
   '@digigov/ui/core/PhaseBanner/PhaseBanner.stories': _digigov_ui_core_PhaseBanner_PhaseBanner_stories,
   '@digigov/ui/core/RadioContainer/RadioContainer.stories': _digigov_ui_core_RadioContainer_RadioContainer_stories,
   '@digigov/ui/core/SelectContainer/Select.stories': _digigov_ui_core_SelectContainer_Select_stories,
+  '@digigov/ui/core/SingleCharacterInputContainer/SingleCharacterInputContainer.stories': _digigov_ui_core_SingleCharacterInputContainer_SingleCharacterInputContainer_stories,
   '@digigov/ui/core/SummaryList/SummaryList.stories': _digigov_ui_core_SummaryList_SummaryList_stories,
   '@digigov/ui/core/Table/Table.stories': _digigov_ui_core_Table_Table_stories,
   '@digigov/ui/core/Tabs/Tabs.stories': _digigov_ui_core_Tabs_Tabs_stories,

package/src/admin/AccessibilityMenu/index.tsx

@@ -0,0 +1,14 @@
+export * from '@digigov/react-extensions/admin/AccessibilityMenu';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuButton';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuContent';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuHeader';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuBody';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuList';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuListItem';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuOptionButton';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuSteps';
+export * from '@digigov/react-core/AccessibilityIcon';
+export * from '@digigov/react-core/AccessibilityTextIcon';
+
+import AccessibilityMenu from '@digigov/react-extensions/admin/AccessibilityMenu';
+export default AccessibilityMenu;

package/src/admin/AutoComplete/index.tsx

@@ -61,7 +61,7 @@ export type State = {
   ariaHint: boolean;
 };
 
-export type ΝewQueryProps = { menuOpen?: boolean; query?: string };
+export type NewQueryProps = { menuOpen?: boolean; query?: string };
 
 export default class AutoComplete extends Component<AutoCompleteProps, State> {
   static defaultProps = {
@@ -199,7 +199,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     return suggestionTemplate ? suggestionTemplate(value) : value;
   }
 
-  handleComponentBlur(newState: ΝewQueryProps): void {
+  handleComponentBlur(newState: NewQueryProps): void {
     const { options, query, selected } = this.state;
     let newQuery: string;
     if (this.props.confirmOnBlur) {

package/src/admin/Chip/index.tsx

@@ -3,6 +3,7 @@ export * from '@digigov/react-extensions/admin/ChipHeading';
 export * from '@digigov/react-extensions/admin/ChipSection';
 export * from '@digigov/react-extensions/admin/ChipSectionHorizontal';
 export * from '@digigov/react-extensions/admin/ChipSectionWrapper';
+export * from '@digigov/react-extensions/admin/ChipKeyValue';
 
 import Chip from '@digigov/react-extensions/admin/Chip';
 export default Chip;

package/src/admin/CopyToClipboard/CopyToClipboard.stories.playwright.json

@@ -12,7 +12,7 @@
               }
             }
           ],
-          "id": "BSaIJR2CMZJU",
+          "id": "slm0qFzUIkGw",
           "title": "Click button"
         }
       ]
@@ -28,7 +28,7 @@
               }
             }
           ],
-          "id": "T50MBtHpfRog",
+          "id": "dTykMmK3AzLT",
           "title": "Click button"
         }
       ]

package/src/admin/Drawer/__stories__/Default.tsx

@@ -11,7 +11,7 @@ import {
   NavMenuContainerContentListItem,
   NavMenuContainerTitle,
 } from '@digigov/ui/core/NavList';
-import { useNavList } from "@digigov/ui/hooks/useNavList";
+import { useNavList } from '@digigov/ui/hooks/useNavList';
 import { Title } from '@digigov/ui/typography/Title';
 import { DrawerHeading } from '@digigov/ui/admin/Drawer';
 import { Link } from '@digigov/ui/core';
@@ -59,12 +59,16 @@ const links = [
 export const Default = () => {
   const [open, toggleDrawer] = useDrawer();
 
-  const { container, register } = useNavList();
-  const setRegister = (name: string) => {
-    return { ...register(name) };
+  const { container, registerButton, registerLink } = useNavList();
+  const setRegisterButton = (name: string) => {
+    return { ...registerButton(name) };
+  };
+  const setRegisterLink = (name: string) => {
+    return { ...registerLink(name) };
   };
 
   const layout = 'vertical';
+  const border = false;
 
   return (
     <Drawer direction="left" open={open}>
@@ -74,15 +78,15 @@ export const Default = () => {
       <NavListAuto
         layout={layout}
         links={links}
+        border={border}
         aria-label="Nav list"
-        role="menu"
       >
         {links.map((item, key) => (
           <React.Fragment key={key}>
             <NavListItem
-              layout={layout}
               link={item}
-              setRegister={setRegister}
+              setRegisterButton={setRegisterButton}
+              setRegisterLink={setRegisterLink}
             />
             <NavMenu layout={layout} {...container(item.name)}>
               <NavMenuContainer
@@ -90,16 +94,23 @@ export const Default = () => {
                 paddingLeft={5}
                 paddingRight={5}
               >
-                <NavMenuContainerTitle layout={layout}>
-                  {item.label}
-                </NavMenuContainerTitle>
+                <NavMenuContainerTitle>{item.label}</NavMenuContainerTitle>
                 <NavMenuContainerContent>
-                  <NavMenuContainerContentList layout={layout}>
+                  <NavMenuContainerContentList role="menu">
                     {item.subMenu?.map((subMenu, menuIndex) => {
                       return (
                         isNavListItemLinkInterface(subMenu) && (
-                          <NavMenuContainerContentListItem key={menuIndex}>
-                            <Link href={subMenu.href}>{subMenu.label}</Link>
+                          <NavMenuContainerContentListItem
+                            key={menuIndex}
+                            role="presentation"
+                          >
+                            <Link
+                              role="menuitem"
+                              id={subMenu.name}
+                              href={subMenu.href}
+                            >
+                              {subMenu.label}
+                            </Link>
                           </NavMenuContainerContentListItem>
                         )
                       );

package/src/admin/Dropdown/__stories__/AlignRight.tsx

@@ -39,7 +39,7 @@ export const AlignRight = () => (
             <TextInput name="input-name" />
           </LabelContainer>
         </FieldContainer>
-        <SectionBreak visible role="separator" />
+        <SectionBreak role="separator" />
         <NavVertical role="menu">
           <NavVerticalItem role="menuitem" href="#">
             Επεξεργασία
@@ -51,7 +51,7 @@ export const AlignRight = () => (
             Οριστική διαγραφή
           </NavVerticalItem>
         </NavVertical>
-        <SectionBreak visible role="separator" />
+        <SectionBreak role="separator" />
         <Button role="menuitem">Ενέργεια</Button>
       </DropdownContent>
     </Dropdown>

package/src/admin/Dropdown/__stories__/Default.tsx

@@ -32,7 +32,7 @@ export const Default = () => (
           <TextInput name="input-name" />
         </LabelContainer>
       </FieldContainer>
-      <SectionBreak visible role="separator" />
+      <SectionBreak role="separator" />
       <NavVertical role="menu">
         <NavVerticalItem role="menuitem" href="#">
           Επεξεργασία
@@ -44,7 +44,7 @@ export const Default = () => (
           Οριστική διαγραφή
         </NavVerticalItem>
       </NavVertical>
-      <SectionBreak visible role="separator" />
+      <SectionBreak role="separator" />
       <Button role="menuitem">Ενέργεια</Button>
     </DropdownContent>
   </Dropdown>

package/src/admin/Dropdown/__stories__/PlacementTop.tsx

@@ -39,7 +39,7 @@ export const PlacementTop = () => (
             <TextInput name="input-name" />
           </LabelContainer>
         </FieldContainer>
-        <SectionBreak visible role="separator" />
+        <SectionBreak role="separator" />
         <NavVertical role="menu">
           <NavVerticalItem role="menuitem" href="#">
             Επεξεργασία
@@ -51,7 +51,7 @@ export const PlacementTop = () => (
             Οριστική διαγραφή
           </NavVerticalItem>
         </NavVertical>
-        <SectionBreak visible role="separator" />
+        <SectionBreak role="separator" />
         <Button role="menuitem">Ενέργεια</Button>
       </DropdownContent>
     </Dropdown>

package/src/admin/FilterSection/index.tsx

@@ -1,6 +1,5 @@
 export * from '@digigov/react-extensions/admin/FilterSection';
-export * from '@digigov/react-extensions/admin/FilterSectionHorizontal';
-export * from '@digigov/react-extensions/admin/FilterHeadingSection';
+export * from '@digigov/react-extensions/admin/FilterHeading';
 export * from '@digigov/react-extensions/admin/FilterContent';
 export * from '@digigov/react-extensions/admin/FilterOptionsSection';
 export * from '@digigov/react-extensions/admin/FilterSelectedHeading';

package/src/admin/Modal/index.tsx

@@ -42,46 +42,50 @@ export const useModal = (): {
   };
 };
 
-export const Modal = (props: ModalProps): React.ReactElement | null => {
-  if (props.open) {
-    return <ModalBase {...props} />;
-  } else {
-    return null;
+export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
+  function Modal({ ...props }, ref) {
+    if (props.open) {
+      return <ModalBase ref={ref} {...props} />;
+    } else {
+      return null;
+    }
   }
-};
+);
 
-export const ModalBase = ({
-  open,
-  children,
-  onEscape,
-  ...props
-}: ModalProps): React.ReactElement => {
-  const firstModalElement = useRef() as React.MutableRefObject<HTMLSpanElement>;
-  const lastModalElement = useRef() as React.MutableRefObject<HTMLSpanElement>;
-  const handleFocus = useCallback(() => {
-    firstModalElement.current.focus();
-  }, []);
-  useKeypress('Escape', onEscape);
-  useEffect(() => {
-    handleFocus();
-    lastModalElement.current.addEventListener('focus', handleFocus);
-    return () => {
-      lastModalElement.current.removeEventListener('focus', handleFocus);
-    };
-  }, [open]);
-  return (
-    <ModalContainer
-      open={open}
-      role="dialog"
-      {...props}
-      aria-hidden="false"
-      aria-modal="true"
-    >
-      <span tabIndex={-1} ref={firstModalElement} aria-hidden="true" />
-      {open && children}
-      <span tabIndex={0} ref={lastModalElement} aria-hidden="true" />
-    </ModalContainer>
-  );
-};
+export const ModalBase = React.forwardRef<HTMLDivElement, ModalProps>(
+  function ModalBase({ open, children, onEscape, ...props }, ref) {
+    const firstModalElement = useRef() as React.MutableRefObject<
+      HTMLSpanElement
+    >;
+    const lastModalElement = useRef() as React.MutableRefObject<
+      HTMLSpanElement
+    >;
+    const handleFocus = useCallback(() => {
+      firstModalElement.current.focus();
+    }, []);
+    useKeypress('Escape', onEscape);
+    useEffect(() => {
+      handleFocus();
+      lastModalElement.current.addEventListener('focus', handleFocus);
+      return () => {
+        lastModalElement.current.removeEventListener('focus', handleFocus);
+      };
+    }, [open]);
+    return (
+      <ModalContainer
+        open={open}
+        role="dialog"
+        ref={ref}
+        {...props}
+        aria-hidden="false"
+        aria-modal="true"
+      >
+        <span tabIndex={-1} ref={firstModalElement} aria-hidden="true" />
+        {open && children}
+        <span tabIndex={0} ref={lastModalElement} aria-hidden="true" />
+      </ModalContainer>
+    );
+  }
+);
 
 export default Modal;

package/src/admin/Pagination/__stories__/Default.tsx

@@ -9,7 +9,7 @@ import {
 
 import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
 import { Link } from '@digigov/ui/core/Link';
-import { Divider } from '@digigov/ui/core/Divider';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 import { I18NProvider } from '@digigov/ui/app/i18n';
 
 export const Default = () => (
@@ -50,7 +50,7 @@ export const Default = () => (
         </PaginationList>
       </Pagination>
 
-      <Divider visible size="l" />
+      <SectionBreak size="l" />
 
       <Pagination>
         <PaginationLabel start={10} end={20} total={10000}></PaginationLabel>
@@ -87,7 +87,7 @@ export const Default = () => (
         </PaginationList>
       </Pagination>
 
-      <Divider visible size="l" />
+      <SectionBreak size="l" />
 
       <Pagination>
         <PaginationLabel start={10} end={20} total={10000}></PaginationLabel>
@@ -124,7 +124,7 @@ export const Default = () => (
         </PaginationList>
       </Pagination>
 
-      <Divider visible size="l" />
+      <SectionBreak size="l" />
 
       <Pagination>
         <PaginationLabel start={1} end={10} total={15}></PaginationLabel>

package/src/admin/Pagination/__stories__/PaginationSmall.tsx

@@ -9,7 +9,7 @@ import {
 
 import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
 import { Link } from '@digigov/ui/core/Link';
-import { Divider } from '@digigov/ui/core/Divider';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 import { I18NProvider } from '@digigov/ui/app/i18n';
 
 export const PaginationSmall = () => (
@@ -36,7 +36,7 @@ export const PaginationSmall = () => (
           </PaginationListItem>
         </PaginationList>
       </Pagination>
-      <Divider visible size="l" />
+      <SectionBreak size="l" />
     </I18NProvider>
   </div>
 );

package/src/app/Footer/__stories__/FooterAllInclusive.tsx

@@ -58,7 +58,7 @@ export const FooterAllInclusive = () => {
           </FooterList>
         </FooterSection>
       </FooterNavigation>
-      <SectionBreak size="m" />
+      <SectionBreak visible={false} size="m" />
       <FooterMeta>
         <FooterMetaItem grow>
           <FooterContent>

package/src/app/Footer/__stories__/FooterWithSecondaryNavigation.tsx

@@ -52,7 +52,7 @@ export const FooterWithSecondaryNavigation = () => {
           </FooterList>
         </FooterSection>
       </FooterNavigation>
-      <SectionBreak size="m" />
+      <SectionBreak visible={false} size="m" />
       <FooterMeta>
         <FooterMetaItem grow>
           <FooterContent>

package/src/app/Header/__stories__/WithNavigation.tsx

@@ -11,10 +11,10 @@ import { SectionBreak } from '@digigov/ui';
 import { useNavList } from '@digigov/ui/hooks/useNavList';
 
 export const WithNavigation = () => {
-  const { register } = useNavList();
+  const { registerButton } = useNavList();
 
-  const setRegister = (name: string) => {
-    return { ...register(name) };
+  const setRegisterButton = (name: string) => {
+    return { ...registerButton(name) };
   };
 
   return (
@@ -34,21 +34,21 @@ export const WithNavigation = () => {
               label: 'Home',
               subMenu: [],
             }}
-            setRegister={setRegister}
+            setRegisterButton={setRegisterButton}
           />
           <NavListItem
             link={{ name: 'form', label: 'Form registration', subMenu: [] }}
-            setRegister={setRegister}
+            setRegisterButton={setRegisterButton}
           />
           <NavListItem
             link={{ name: 'news', label: 'News', subMenu: [] }}
-            setRegister={setRegister}
+            setRegisterButton={setRegisterButton}
           />
           <NavListItem
             link={{ name: 'contact', label: 'Contact', subMenu: [] }}
-            setRegister={setRegister}
+            setRegisterButton={setRegisterButton}
           />
-          <SectionBreak></SectionBreak>
+          <SectionBreak visible={false} />
         </NavList>
       </Nav>
     </Top>

package/src/app/QrCodeScanner/__stories__/Default.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense, useState } from 'react';
 import { QrCodeScanner } from '@digigov/ui/app/QrCodeScanner';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
 
 export const Default = () => {
@@ -32,7 +32,7 @@ export const Default = () => {
       >
         {error.message && (
           <ErrorSummary>
-            <Title size="sm">{error.message}</Title>
+            <Heading size="s">{error.message}</Heading>
           </ErrorSummary>
         )}
       </QrCodeScanner>