@digigov/ui 2.0.0-7d9a8d86 → 2.0.0-834daea4

package/src/layouts/Stack/doc.mdx

@@ -0,0 +1,38 @@
+---
+id: stack
+title: Stack
+---
+
+# Stack
+
+Use the Stack component in order to arrange elements vertically or horizontally.
+
+## How to use
+
+<code src="@digigov/ui/layouts/Stack/__stories__/Default.tsx" />
+
+### With align items
+
+<code src="@digigov/ui/layouts/Stack/__stories__/AlignItems.tsx" />
+
+### With justify content
+
+<code src="@digigov/ui/layouts/Stack/__stories__/JustifyContent.tsx" />
+
+### With no wrap
+
+<code src="@digigov/ui/layouts/Stack/__stories__/NoWrap.tsx" />
+
+### In row
+
+<code src="@digigov/ui/layouts/Stack/__stories__/Row.tsx" />
+
+### With spacing
+
+<code src="@digigov/ui/layouts/Stack/__stories__/Spacing.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={["Stack"]} /> 

package/src/layouts/Stack/index.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { AlignItems } from '@digigov/ui/layouts/Stack/__stories__/AlignItems';
+import { Default } from '@digigov/ui/layouts/Stack/__stories__/Default';
+import { JustifyContent } from '@digigov/ui/layouts/Stack/__stories__/JustifyContent';
+import { NoWrap } from '@digigov/ui/layouts/Stack/__stories__/NoWrap';
+import { Row } from '@digigov/ui/layouts/Stack/__stories__/Row';
+import { Spacing } from '@digigov/ui/layouts/Stack/__stories__/Spacing';
+
+test('renders the All Stack variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="AlignItems">
+      <AlignItems />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="JustifyContent">
+      <JustifyContent />
+    </TestVariant>
+    <TestVariant title="NoWrap">
+      <NoWrap />
+    </TestVariant>
+    <TestVariant title="Row">
+      <Row />
+    </TestVariant>
+    <TestVariant title="Spacing">
+      <Spacing />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/lazy.js

@@ -1,10 +1,6 @@
 import {lazy} from 'react';
 export default {
-    'APIError': lazy(() => import('@digigov/ui/api/APIErrors').then((module)=> ({default: module['APIError']}))),
-  'APIErrors': lazy(() => import('@digigov/ui/api/APIErrors').then((module)=> ({default: module['APIErrors']}))),
-  'APIContext': lazy(() => import('@digigov/ui/api/APIProvider').then((module)=> ({default: module['APIContext']}))),
-  'APIProvider': lazy(() => import('@digigov/ui/api/APIProvider').then((module)=> ({default: module['APIProvider']}))),
-  'StaticApp': lazy(() => import('@digigov/ui/app/App').then((module)=> ({default: module['StaticApp']}))),
+    'StaticApp': lazy(() => import('@digigov/ui/app/App').then((module)=> ({default: module['StaticApp']}))),
   'BannerContainer': lazy(() => import('@digigov/ui/app/BannerContainer').then((module)=> ({default: module['BannerContainer']}))),
   'BottomInfo': lazy(() => import('@digigov/ui/app/BottomInfo').then((module)=> ({default: module['BottomInfo']}))),
   'BottomInfoContent': lazy(() => import('@digigov/ui/app/BottomInfo').then((module)=> ({default: module['BottomInfoContent']}))),
@@ -43,21 +39,17 @@ export default {
   'PanelBody': lazy(() => import('@digigov/ui/app/Panel').then((module)=> ({default: module['PanelBody']}))),
   'PanelTitle': lazy(() => import('@digigov/ui/app/Panel').then((module)=> ({default: module['PanelTitle']}))),
   'LoaderContainer': lazy(() => import('@digigov/ui/app/Loader').then((module)=> ({default: module['LoaderContainer']}))),
-  'CircularProgress': lazy(() => import('@digigov/ui/app/Loader').then((module)=> ({default: module['CircularProgress']}))),
   'FullPageBackground': lazy(() => import('@digigov/ui/app/Loader').then((module)=> ({default: module['FullPageBackground']}))),
+  'CircularProgress': lazy(() => import('@digigov/ui/app/Loader/index.web').then((module)=> ({default: module['CircularProgress']}))),
   'Masthead': lazy(() => import('@digigov/ui/layouts/Basic/Masthead').then((module)=> ({default: module['Masthead']}))),
   'MastheadBody': lazy(() => import('@digigov/ui/layouts/Basic/Masthead').then((module)=> ({default: module['MastheadBody']}))),
   'MastheadLogo': lazy(() => import('@digigov/ui/layouts/Basic/Masthead').then((module)=> ({default: module['MastheadLogo']}))),
-  'Modal': lazy(() => import('@digigov/ui/app/Modal').then((module)=> ({default: module['Modal']}))),
-  'ModalBase': lazy(() => import('@digigov/ui/app/Modal').then((module)=> ({default: module['ModalBase']}))),
   'ModalContainer': lazy(() => import('@digigov/ui/app/Modal').then((module)=> ({default: module['ModalContainer']}))),
   'ModalHeading': lazy(() => import('@digigov/ui/app/Modal').then((module)=> ({default: module['ModalHeading']}))),
   'ModalContent': lazy(() => import('@digigov/ui/app/Modal').then((module)=> ({default: module['ModalContent']}))),
   'ModalAction': lazy(() => import('@digigov/ui/app/Modal').then((module)=> ({default: module['ModalAction']}))),
-  'ModalAuto': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalAuto']}))),
-  'ModalButtonAuto': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalButtonAuto']}))),
-  'ModalContext': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalContext']}))),
-  'ModalProvider': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalProvider']}))),
+  'Modal': lazy(() => import('@digigov/ui/app/Modal/index.web').then((module)=> ({default: module['Modal']}))),
+  'ModalBase': lazy(() => import('@digigov/ui/app/Modal/index.web').then((module)=> ({default: module['ModalBase']}))),
   'NotFound': lazy(() => import('@digigov/ui/app/NotFound').then((module)=> ({default: module['NotFound']}))),
   'PageTitleContainer': lazy(() => import('@digigov/ui/app/PageTitleContainer').then((module)=> ({default: module['PageTitleContainer']}))),
   'PageTitleCaption': lazy(() => import('@digigov/ui/app/PageTitleContainer').then((module)=> ({default: module['PageTitleCaption']}))),
@@ -66,7 +58,12 @@ export default {
   'QrCodeScanner': lazy(() => import('@digigov/ui/app/QrCodeScanner').then((module)=> ({default: module['QrCodeScanner']}))),
   'QrCodeViewer': lazy(() => import('@digigov/ui/app/QrCodeViewer').then((module)=> ({default: module['QrCodeViewer']}))),
   'ThemeOptions': lazy(() => import('@digigov/ui/app/ThemeOptions').then((module)=> ({default: module['ThemeOptions']}))),
+  'ModalAuto': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalAuto']}))),
+  'ModalButtonAuto': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalButtonAuto']}))),
+  'ModalContext': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalContext']}))),
+  'ModalProvider': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalProvider']}))),
   'MARGIN_SIZE': lazy(() => import('@digigov/ui/app/QrCodeViewer/utils').then((module)=> ({default: module['MARGIN_SIZE']}))),
+  'Skeleton': lazy(() => import('@digigov/ui/app/Skeleton').then((module)=> ({default: module['Skeleton']}))),
   'AccordionAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module)=> ({default: module['AccordionAuto']}))),
   'AccordionCloseAllButtonAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module)=> ({default: module['AccordionCloseAllButtonAuto']}))),
   'AccordionOpenAllButtonAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module)=> ({default: module['AccordionOpenAllButtonAuto']}))),
@@ -103,10 +100,6 @@ export default {
   'StepNavControls': lazy(() => import('@digigov/ui/content/StepNav').then((module)=> ({default: module['StepNavControls']}))),
   'StepNavList': lazy(() => import('@digigov/ui/content/StepNav').then((module)=> ({default: module['StepNavList']}))),
   'StepNavListItem': lazy(() => import('@digigov/ui/content/StepNav').then((module)=> ({default: module['StepNavListItem']}))),
-  'StepNavAccordionAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavAccordionAuto']}))),
-  'StepNavAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavAuto']}))),
-  'StepNavCloseAllButtonAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavCloseAllButtonAuto']}))),
-  'StepNavOpenAllButtonAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavOpenAllButtonAuto']}))),
   'StepNavAccordion': lazy(() => import('@digigov/ui/content/StepNav').then((module)=> ({default: module['StepNavAccordion']}))),
   'SummaryList': lazy(() => import('@digigov/ui/content/SummaryList').then((module)=> ({default: module['SummaryList']}))),
   'SummaryListItemAction': lazy(() => import('@digigov/ui/content/SummaryList').then((module)=> ({default: module['SummaryListItemAction']}))),
@@ -114,9 +107,8 @@ export default {
   'SummaryListItemKey': lazy(() => import('@digigov/ui/content/SummaryList').then((module)=> ({default: module['SummaryListItemKey']}))),
   'SummaryListItemValue': lazy(() => import('@digigov/ui/content/SummaryList').then((module)=> ({default: module['SummaryListItemValue']}))),
   'TableSortLabel': lazy(() => import('@digigov/ui/content/Table').then((module)=> ({default: module['TableSortLabel']}))),
-  'Table': lazy(() => import('@digigov/ui/content/Table').then((module)=> ({default: module['Table']}))),
-  'TableSortIconContainer': lazy(() => import('@digigov/ui/content/Table').then((module)=> ({default: module['TableSortIconContainer']}))),
   'TableContainer': lazy(() => import('@digigov/ui/content/Table').then((module)=> ({default: module['TableContainer']}))),
+  'Table': lazy(() => import('@digigov/ui/content/Table').then((module)=> ({default: module['Table']}))),
   'TableBody': lazy(() => import('@digigov/ui/content/Table').then((module)=> ({default: module['TableBody']}))),
   'TableCaption': lazy(() => import('@digigov/ui/content/Table').then((module)=> ({default: module['TableCaption']}))),
   'TableDataCell': lazy(() => import('@digigov/ui/content/Table').then((module)=> ({default: module['TableDataCell']}))),
@@ -125,6 +117,7 @@ export default {
   'TableRow': lazy(() => import('@digigov/ui/content/Table').then((module)=> ({default: module['TableRow']}))),
   'TableNoDataRow': lazy(() => import('@digigov/ui/content/Table').then((module)=> ({default: module['TableNoDataRow']}))),
   'TableLoaderBackground': lazy(() => import('@digigov/ui/content/Table').then((module)=> ({default: module['TableLoaderBackground']}))),
+  'TableSortIconContainer': lazy(() => import('@digigov/ui/content/Table').then((module)=> ({default: module['TableSortIconContainer']}))),
   'TableFloatingScroll': lazy(() => import('@digigov/ui/content/Table/TableFloatingScroll').then((module)=> ({default: module['TableFloatingScroll']}))),
   'TaskList': lazy(() => import('@digigov/ui/content/TaskList').then((module)=> ({default: module['TaskList']}))),
   'TaskListItem': lazy(() => import('@digigov/ui/content/TaskList').then((module)=> ({default: module['TaskListItem']}))),
@@ -138,6 +131,10 @@ export default {
   'TimelineActions': lazy(() => import('@digigov/ui/content/Timeline').then((module)=> ({default: module['TimelineActions']}))),
   'Markdown': lazy(() => import('@digigov/ui/content/Markdown').then((module)=> ({default: module['Markdown']}))),
   'SafeHTML': lazy(() => import('@digigov/ui/content/SafeHTML').then((module)=> ({default: module['SafeHTML']}))),
+  'StepNavAccordionAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavAccordionAuto']}))),
+  'StepNavAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavAuto']}))),
+  'StepNavCloseAllButtonAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavCloseAllButtonAuto']}))),
+  'StepNavOpenAllButtonAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavOpenAllButtonAuto']}))),
   'CopyToClipboard': lazy(() => import('@digigov/ui/feedback/CopyToClipboard').then((module)=> ({default: module['CopyToClipboard']}))),
   'CopyToClipboardContainer': lazy(() => import('@digigov/ui/feedback/CopyToClipboard').then((module)=> ({default: module['CopyToClipboardContainer']}))),
   'CopyToClipboardMessage': lazy(() => import('@digigov/ui/feedback/CopyToClipboard').then((module)=> ({default: module['CopyToClipboardMessage']}))),
@@ -152,16 +149,19 @@ export default {
   'PhaseBannerHeaderContainer': lazy(() => import('@digigov/ui/feedback/PhaseBanner').then((module)=> ({default: module['PhaseBannerHeaderContainer']}))),
   'PhaseBannerTag': lazy(() => import('@digigov/ui/feedback/PhaseBanner').then((module)=> ({default: module['PhaseBannerTag']}))),
   'PhaseBannerText': lazy(() => import('@digigov/ui/feedback/PhaseBanner').then((module)=> ({default: module['PhaseBannerText']}))),
+  'WarningTextAssistive': lazy(() => import('@digigov/ui/feedback/WarningText').then((module)=> ({default: module['WarningTextAssistive']}))),
   'WarningText': lazy(() => import('@digigov/ui/feedback/WarningText').then((module)=> ({default: module['WarningText']}))),
   'AutoComplete': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoComplete']}))),
   'AutoCompleteAssistiveHint': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteAssistiveHint']}))),
+  'AutoCompleteContainer': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteContainer']}))),
   'AutoCompleteInput': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteInput']}))),
   'AutoCompleteInputTypeahead': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteInputTypeahead']}))),
+  'AutoCompleteMultipleInput': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteMultipleInput']}))),
+  'AutoCompleteMultipleInputContainer': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteMultipleInputContainer']}))),
   'AutoCompleteResultList': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteResultList']}))),
   'AutoCompleteResultListItem': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteResultListItem']}))),
-  'AutoCompleteWrapper': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteWrapper']}))),
   'AutoCompleteStatus': lazy(() => import('@digigov/ui/form/AutoComplete/Status').then((module)=> ({default: module['AutoCompleteStatus']}))),
-  'AutoCompleteStatusWrapper': lazy(() => import('@digigov/ui/form/AutoComplete/Status').then((module)=> ({default: module['AutoCompleteStatusWrapper']}))),
+  'AutoCompleteStatusContainer': lazy(() => import('@digigov/ui/form/AutoComplete/Status').then((module)=> ({default: module['AutoCompleteStatusContainer']}))),
   'ButtonLink': lazy(() => import('@digigov/ui/form/Button/ButtonLink').then((module)=> ({default: module['ButtonLink']}))),
   'CallToAction': lazy(() => import('@digigov/ui/form/Button/CallToAction').then((module)=> ({default: module['CallToAction']}))),
   'ContinueButton': lazy(() => import('@digigov/ui/form/Button').then((module)=> ({default: module['ContinueButton']}))),
@@ -170,6 +170,7 @@ export default {
   'ButtonGroup': lazy(() => import('@digigov/ui/form/Button').then((module)=> ({default: module['ButtonGroup']}))),
   'Checkbox': lazy(() => import('@digigov/ui/form/Checkbox').then((module)=> ({default: module['Checkbox']}))),
   'CheckboxItem': lazy(() => import('@digigov/ui/form/Checkbox').then((module)=> ({default: module['CheckboxItem']}))),
+  'CheckboxItemInput': lazy(() => import('@digigov/ui/form/Checkbox').then((module)=> ({default: module['CheckboxItemInput']}))),
   'CheckboxConditional': lazy(() => import('@digigov/ui/form/Checkbox').then((module)=> ({default: module['CheckboxConditional']}))),
   'DateInputContainer': lazy(() => import('@digigov/ui/form/DateInputContainer').then((module)=> ({default: module['DateInputContainer']}))),
   'DateInputItem': lazy(() => import('@digigov/ui/form/DateInputContainer').then((module)=> ({default: module['DateInputItem']}))),
@@ -253,11 +254,6 @@ export default {
   'BreadcrumbsListItem': lazy(() => import('@digigov/ui/navigation/Breadcrumbs').then((module)=> ({default: module['BreadcrumbsListItem']}))),
   'Drawer': lazy(() => import('@digigov/ui/navigation/Drawer').then((module)=> ({default: module['Drawer']}))),
   'DrawerHeading': lazy(() => import('@digigov/ui/navigation/Drawer').then((module)=> ({default: module['DrawerHeading']}))),
-  'DrawerAuto': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerAuto']}))),
-  'DrawerButtonAuto': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerButtonAuto']}))),
-  'DrawerContext': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerContext']}))),
-  'DrawerHeadingAuto': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerHeadingAuto']}))),
-  'DrawerProvider': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerProvider']}))),
   'Dropdown': lazy(() => import('@digigov/ui/navigation/Dropdown').then((module)=> ({default: module['Dropdown']}))),
   'DropdownBase': lazy(() => import('@digigov/ui/navigation/Dropdown').then((module)=> ({default: module['DropdownBase']}))),
   'DropdownButton': lazy(() => import('@digigov/ui/navigation/Dropdown').then((module)=> ({default: module['DropdownButton']}))),
@@ -266,41 +262,33 @@ export default {
   'Link': lazy(() => import('@digigov/ui/navigation/Link').then((module)=> ({default: module['Link']}))),
   'LinkBase': lazy(() => import('@digigov/ui/navigation/Link').then((module)=> ({default: module['LinkBase']}))),
   'LinkProvider': lazy(() => import('@digigov/ui/navigation/Link').then((module)=> ({default: module['LinkProvider']}))),
-  'NavList': lazy(() => import('@digigov/ui/navigation/NavList/NavList').then((module)=> ({default: module['NavList']}))),
   'NavListAuto': lazy(() => import('@digigov/ui/navigation/NavList/NavListAuto').then((module)=> ({default: module['NavListAuto']}))),
   'NavMenuContentList': lazy(() => import('@digigov/ui/navigation/NavList/NavMenuContentList').then((module)=> ({default: module['NavMenuContentList']}))),
   'NavMenuContentListBase': lazy(() => import('@digigov/ui/navigation/NavList/NavMenuContentList').then((module)=> ({default: module['NavMenuContentListBase']}))),
   'Nav': lazy(() => import('@digigov/ui/navigation/NavList/Nav').then((module)=> ({default: module['Nav']}))),
+  'NavList': lazy(() => import('@digigov/ui/navigation/NavList/NavList').then((module)=> ({default: module['NavList']}))),
   'NavMenuContainer': lazy(() => import('@digigov/ui/navigation/NavList').then((module)=> ({default: module['NavMenuContainer']}))),
   'NavMenuContent': lazy(() => import('@digigov/ui/navigation/NavList').then((module)=> ({default: module['NavMenuContent']}))),
   'NavMenuContentListItem': lazy(() => import('@digigov/ui/navigation/NavList').then((module)=> ({default: module['NavMenuContentListItem']}))),
   'NavMenuTitle': lazy(() => import('@digigov/ui/navigation/NavList').then((module)=> ({default: module['NavMenuTitle']}))),
   'NavListItemActionContainer': lazy(() => import('@digigov/ui/navigation/NavList').then((module)=> ({default: module['NavListItemActionContainer']}))),
   'NavListItemAction': lazy(() => import('@digigov/ui/navigation/NavList').then((module)=> ({default: module['NavListItemAction']}))),
-  'NavListItemLink': lazy(() => import('@digigov/ui/navigation/NavList').then((module)=> ({default: module['NavListItemLink']}))),
+  'NavListItemBadge': lazy(() => import('@digigov/ui/navigation/NavList').then((module)=> ({default: module['NavListItemBadge']}))),
   'NavListItemButton': lazy(() => import('@digigov/ui/navigation/NavList').then((module)=> ({default: module['NavListItemButton']}))),
-  'PaginationLabel': lazy(() => import('@digigov/ui/navigation/Pagination').then((module)=> ({default: module['PaginationLabel']}))),
+  'NavListItemLink': lazy(() => import('@digigov/ui/navigation/NavList').then((module)=> ({default: module['NavListItemLink']}))),
   'PaginationLabelContainer': lazy(() => import('@digigov/ui/navigation/Pagination').then((module)=> ({default: module['PaginationLabelContainer']}))),
-  'PaginationListItemButton': lazy(() => import('@digigov/ui/navigation/Pagination').then((module)=> ({default: module['PaginationListItemButton']}))),
-  'PaginationResultsPerPageSelect': lazy(() => import('@digigov/ui/navigation/Pagination').then((module)=> ({default: module['PaginationResultsPerPageSelect']}))),
+  'PaginationLabel': lazy(() => import('@digigov/ui/navigation/Pagination/Pagination').then((module)=> ({default: module['PaginationLabel']}))),
+  'PaginationListItemButton': lazy(() => import('@digigov/ui/navigation/Pagination/Pagination').then((module)=> ({default: module['PaginationListItemButton']}))),
+  'PaginationResultsPerPageSelect': lazy(() => import('@digigov/ui/navigation/Pagination/Pagination').then((module)=> ({default: module['PaginationResultsPerPageSelect']}))),
   'Pagination': lazy(() => import('@digigov/ui/navigation/Pagination').then((module)=> ({default: module['Pagination']}))),
-  'PaginationListItem': lazy(() => import('@digigov/ui/navigation/Pagination').then((module)=> ({default: module['PaginationListItem']}))),
   'PaginationList': lazy(() => import('@digigov/ui/navigation/Pagination').then((module)=> ({default: module['PaginationList']}))),
-  'PaginationAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationAuto']}))),
-  'PaginationContextAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationContextAuto']}))),
-  'PaginationLabelAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationLabelAuto']}))),
-  'PaginationListAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationListAuto']}))),
-  'PaginationResultsPerPageSelectAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationResultsPerPageSelectAuto']}))),
+  'PaginationListItem': lazy(() => import('@digigov/ui/navigation/Pagination').then((module)=> ({default: module['PaginationListItem']}))),
   'SkipLink': lazy(() => import('@digigov/ui/navigation/SkipLink').then((module)=> ({default: module['SkipLink']}))),
   'Tabs': lazy(() => import('@digigov/ui/navigation/Tabs').then((module)=> ({default: module['Tabs']}))),
   'TabsList': lazy(() => import('@digigov/ui/navigation/Tabs').then((module)=> ({default: module['TabsList']}))),
   'TabsListItemBase': lazy(() => import('@digigov/ui/navigation/Tabs').then((module)=> ({default: module['TabsListItemBase']}))),
   'TabsPanelBase': lazy(() => import('@digigov/ui/navigation/Tabs').then((module)=> ({default: module['TabsPanelBase']}))),
   'TabsHeading': lazy(() => import('@digigov/ui/navigation/Tabs').then((module)=> ({default: module['TabsHeading']}))),
-  'TabsAuto': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsAuto']}))),
-  'TabsContext': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsContext']}))),
-  'TabsListItem': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsListItem']}))),
-  'TabsPanel': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsPanel']}))),
   'Heading': lazy(() => import('@digigov/ui/typography/Heading').then((module)=> ({default: module['Heading']}))),
   'HeadingCaption': lazy(() => import('@digigov/ui/typography/HeadingCaption').then((module)=> ({default: module['HeadingCaption']}))),
   'Paragraph': lazy(() => import('@digigov/ui/typography/Paragraph').then((module)=> ({default: module['Paragraph']}))),
@@ -313,10 +301,31 @@ export default {
   'Screen': lazy(() => import('@digigov/ui/layouts/Screen').then((module)=> ({default: module['Screen']}))),
   'Section': lazy(() => import('@digigov/ui/layouts/Section').then((module)=> ({default: module['Section']}))),
   'BackToTop': lazy(() => import('@digigov/ui/navigation/BackToTopLink').then((module)=> ({default: module['BackToTop']}))),
-  'BackToTopContainer': lazy(() => import('@digigov/ui/navigation/BackToTopLink').then((module)=> ({default: module['BackToTopContainer']}))),
   'BackToTopLink': lazy(() => import('@digigov/ui/navigation/BackToTopLink').then((module)=> ({default: module['BackToTopLink']}))),
   'BackToTopLimit': lazy(() => import('@digigov/ui/navigation/BackToTopLink').then((module)=> ({default: module['BackToTopLimit']}))),
+  'BackToTopContainer': lazy(() => import('@digigov/ui/navigation/BackToTopLink').then((module)=> ({default: module['BackToTopContainer']}))),
+  'BreadcrumbsAuto': lazy(() => import('@digigov/ui/navigation/Breadcrumbs/auto').then((module)=> ({default: module['BreadcrumbsAuto']}))),
+  'BreadcrumbsContext': lazy(() => import('@digigov/ui/navigation/Breadcrumbs/auto').then((module)=> ({default: module['BreadcrumbsContext']}))),
+  'BreadcrumbsListAuto': lazy(() => import('@digigov/ui/navigation/Breadcrumbs/auto').then((module)=> ({default: module['BreadcrumbsListAuto']}))),
+  'DrawerAuto': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerAuto']}))),
+  'DrawerButtonAuto': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerButtonAuto']}))),
+  'DrawerContext': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerContext']}))),
+  'DrawerHeadingAuto': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerHeadingAuto']}))),
+  'DrawerProvider': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerProvider']}))),
+  'PaginationAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationAuto']}))),
+  'PaginationContextAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationContextAuto']}))),
+  'PaginationLabelAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationLabelAuto']}))),
+  'PaginationListAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationListAuto']}))),
+  'PaginationResultsPerPageSelectAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationResultsPerPageSelectAuto']}))),
+  'TabsAuto': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsAuto']}))),
+  'TabsContext': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsContext']}))),
+  'TabsListItem': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsListItem']}))),
+  'TabsPanel': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsPanel']}))),
   'Code': lazy(() => import('@digigov/ui/typography/Code').then((module)=> ({default: module['Code']}))),
   'CodeBlock': lazy(() => import('@digigov/ui/typography/CodeBlock').then((module)=> ({default: module['CodeBlock']}))),
+  'CodeBlockContent': lazy(() => import('@digigov/ui/typography/CodeBlock').then((module)=> ({default: module['CodeBlockContent']}))),
+  'CodeBlockHeader': lazy(() => import('@digigov/ui/typography/CodeBlock').then((module)=> ({default: module['CodeBlockHeader']}))),
+  'CodeBlockContainer': lazy(() => import('@digigov/ui/typography/CodeBlock').then((module)=> ({default: module['CodeBlockContainer']}))),
+  'TestVariant': lazy(() => import('@digigov/ui/utils/TestVariant').then((module)=> ({default: module['TestVariant']}))),
 
 }

package/src/navigation/BackLink/BackLink.stories.js

@@ -4,4 +4,4 @@ export default {
   component: BackLink,
   displayName: 'BackLink',
 };
-export * from '@digigov/ui/navigation/BackLink/__stories__/Default';
+export { Default } from '@digigov/ui/navigation/BackLink/__stories__/Default';

package/src/navigation/BackLink/{index.mdx → doc.mdx}

@@ -9,11 +9,7 @@ Use the back link component to help users go back to the previous page in a mult
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/BackLink"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/navigation/BackLink/__stories__/Default.tsx" />
 
 ## API
 

package/src/navigation/BackLink/index.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/navigation/BackLink/__stories__/Default';
+
+test('renders the All BackLink variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/navigation/BackLink/interaction.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Default } from '@digigov/ui/navigation/BackLink/__stories__/Default';
+
+test('renders the Default Click link', async ({ mount, page }) => {
+  await mount(
+    <Default />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>a").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/navigation/BackToTopLink/BackToTopLink.stories.js

@@ -4,5 +4,5 @@ export default {
   component: BackToTopLink,
   displayName: 'BackToTopLink',
 };
-export * from '@digigov/ui/navigation/BackToTopLink/__stories__/Default';
-export * from '@digigov/ui/navigation/BackToTopLink/__stories__/InMain';
+export { Default } from '@digigov/ui/navigation/BackToTopLink/__stories__/Default';
+export { InMain } from '@digigov/ui/navigation/BackToTopLink/__stories__/InMain';

package/src/navigation/BackToTopLink/index.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/navigation/BackToTopLink/__stories__/Default';
+import { InMain } from '@digigov/ui/navigation/BackToTopLink/__stories__/InMain';
+
+test('renders the All BackToTopLink variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="InMain">
+      <InMain />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/navigation/Breadcrumbs/Breadcrumbs.stories.js

@@ -7,4 +7,7 @@ export default {
   component: Breadcrumbs,
   displayName: 'Breadcrumbs',
 };
-export * from '@digigov/ui/navigation/Breadcrumbs/__stories__/Default';
+export { Default } from '@digigov/ui/navigation/Breadcrumbs/__stories__/Default';
+export { WithoutCurrentPage } from '@digigov/ui/navigation/Breadcrumbs/__stories__/WithoutCurrentPage';
+export { WithHook } from '@digigov/ui/navigation/Breadcrumbs/__stories__/WithHook';
+export { Auto } from '@digigov/ui/navigation/Breadcrumbs/__stories__/Auto';

package/src/navigation/Breadcrumbs/__stories__/Auto.tsx

@@ -0,0 +1,200 @@
+import React from 'react';
+import { List, ListItem } from '@digigov/ui/content/List';
+import {
+  BreadcrumbsAuto,
+  BreadcrumbsListAuto,
+  useBreadcrumbsContext,
+} from '@digigov/ui/navigation/Breadcrumbs/auto';
+import { Heading } from '@digigov/ui/typography';
+import { Button } from '@digigov/ui/form/Button/';
+import { BreadcrumbItem } from '@digigov/ui/navigation/Breadcrumbs/hooks';
+
+const items: BreadcrumbItem[] = [
+  {
+    title: 'Νομοθεσία Πυροπροστασίας',
+    children: [
+      { title: 'Εγχειρίδια Νομοθεσίας Πυρασφάλειας', pdf: '#' },
+      { title: 'Διάγραμμα Ισχύουσας Νομοθεσίας' },
+      { title: 'Οδηγίες Επί Προτύπων Πυροπροστασίας' },
+      { title: 'Απλουστεύσεις Διαδικασιών' },
+      { title: 'Χρήσιμα Έγγραφα' },
+      {
+        title: 'Νομοθεσία Πυρασφάλειας',
+        children: [
+          {
+            title: 'Λοιπές Δραστηριότητες Εγκαταστάσεις',
+          },
+          {
+            title:
+              'Εγκαταστάσεις Πετρελαιοειδών Προϊόντων – Υγραερίου – Φυσικού Αερίου',
+          },
+          { title: 'Διατάξεις Προληπτικής Πυροπροστασίας' },
+          { title: 'Συνδρομητική Νομοθεσία Πυροπροστασίας' },
+          {
+            title:
+              'Δραστηριότητες – Εγκαταστάσεις που δεν υπάγονται σε Νομοθετικό Πλαίσιο',
+          },
+          {
+            title: 'Κανονισμοί Πυροπροστασίας Κτιρίων',
+            // href: '/kanonismoi-pyroprostasias',
+            children: [
+              {
+                title: 'Κατοικίες',
+              },
+              {
+                title: 'Εγκαταστάσεις Κεντρικής Θέρμανσης',
+              },
+              {
+                title: 'Προσωρινή Διαμονή (Ξεν/χεία-Κατ/σεις)',
+              },
+              {
+                title: 'Εκπαιδευτήρια',
+              },
+              {
+                title: 'Γραφεία',
+              },
+              {
+                title: 'Εμπόριο (Καταστήματα)',
+              },
+              {
+                title: 'Συνάθροιση Κοινού',
+              },
+              {
+                title: 'Υγεία & Κοινωνική Πρόνοια',
+              },
+              {
+                title: 'Σωφρονισμός',
+              },
+              {
+                title: 'Στάθμευση Αυτοκινήτων',
+              },
+
+              {
+                title: 'Λοιπές Βιομηχανικές Εγκαταστάσεις',
+              },
+              {
+                title: 'Αποθήκευση',
+              },
+              {
+                title: 'Συνεργεία, ΙΚτέο, Εμπ.Σταθμοί, Κτελ, Πλυντ.-Λιπαντ.',
+              },
+              {
+                title: 'Πρατήρια Υγρών Καυσίμων',
+              },
+              {
+                title: 'Πρατήρια Αερίων Καυσίμων',
+              },
+              {
+                title: 'Μεταποιητικές & Συναφείς Εγκαταστάσεις',
+                // href: '/metapoiitikes-egkatastaseis',
+                children: [
+                  {
+                    title: 'ΠΔ 41/2018 & ΚΥΑ ΑΠ-136860-1673-Φ15-2018',
+                  },
+                  {
+                    title: 'ΚΥΑ ΑΠ-136860-1673-Φ15-2018',
+                  },
+                  {
+                    title: 'ΠΔ 71/1988 ΚΥΑ ΑΠ-136860-1673-Φ15-2018',
+                    children: [
+                      { title: 'Γενικές Διατάξεις ΠΔ 41/2018' },
+                      { title: 'ΚΥΑ ΑΠ-136860-1673-Φ15-2018' },
+                      {
+                        title: 'Γενικές Διατάξεις ΠΔ 71/2018',
+                        children: [
+                          {
+                            title: 'Άρθρο 1: Ορισμοί – Ταξινόμηση Κτιρίων',
+                          },
+                          {
+                            title: 'Άρθρο 2: Οδεύσεις Διαφυγής',
+                          },
+                          {
+                            title: 'Άρθρο 3: Δομική Προστασία',
+                          },
+                          {
+                            title: 'Άρθρο 4: Ενεργητικά Μέτρα Πυροπροστασίας',
+                            pdf: '#pdf',
+                          },
+                          {
+                            title:
+                              'Άρθρο 14: Παράρτημα Α - Δείκτες Πυραντίστασης',
+                          },
+                          {
+                            title:
+                              'Άρθρο 14: Παράρτημα Β – Εσωτερικά Τελειώματα',
+                          },
+                          {
+                            title: 'Άρθρο 15: Εφαρμογή ΠΔ 71/1988',
+                          },
+                          {
+                            title:
+                              'Άρθρο 23-24: Έναρξη Εφαρμογής – Καταργούμενες Διατάξεις',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const getListChild = (item, setActive) => {
+  return item.children ? (
+    <>
+      <Heading size="sm" mb={0}>
+        {item.title}
+      </Heading>
+      <List listStyle="number">
+        {item.children?.map((subMenu, key) => (
+          <ListItem key={key}>{getListChild(subMenu, setActive)}</ListItem>
+        ))}
+      </List>
+    </>
+  ) : (
+    <Button
+      variant="link"
+      role="menuitem"
+      id={item.title}
+      onClick={(e) => {
+        e.preventDefault(), setActive(item);
+      }}
+    >
+      {item.title}
+    </Button>
+  );
+};
+
+export const Auto = () => {
+  return (
+    <BreadcrumbsAuto
+      items={items}
+      initialUrlRoute="/nomothesia-pyroprostasias/odigies-epi-protypon-pyroprostasias"
+    >
+      <BreadcrumbsListAuto mb={8} />
+      <ContentRoutes />
+    </BreadcrumbsAuto>
+  );
+};
+
+const ContentRoutes = () => {
+  const { breadcrumbs, setActiveItem } = useBreadcrumbsContext();
+
+  return (
+    <>
+      {breadcrumbs.length > 0 && (
+        <Heading size="xl">
+          {breadcrumbs[breadcrumbs.length - 1]?.title}
+        </Heading>
+      )}
+      {items.map((item) => getListChild(item, setActiveItem))}
+    </>
+  );
+};
+
+export default Auto;