@digigov/ui 1.0.0-002c630d → 1.0.0-00643e1d

package/src/navigation/Tabs/Tabs.stories.playwright.json

@@ -8,13 +8,13 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>button"
               }
             },
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>button"
               }
             }
           ],

package/src/navigation/Tabs/__stories__/Default.tsx

@@ -10,6 +10,7 @@ import {
 import { Link } from '@digigov/ui/navigation/Link';
 import {
   Tabs,
+  TabsHeading,
   TabsList,
   TabsListItem,
   TabsPanel,
@@ -20,14 +21,17 @@ import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
 export function Default() {
-  const { register, panel } = useTabs();
+  const { register, opened, panel } = useTabs();
+
   return (
     <Tabs>
+      <TabsHeading size='md'>Περιεχόμενα</TabsHeading>
       <TabsList>
-        <TabsListItem {...register('a')}>Στοιχεία πολίτη</TabsListItem>
-        <TabsListItem {...register('b')}>Yποθέσεις</TabsListItem>
+        <TabsListItem {...register('citizen')} open={Object.keys(opened).length === 0 || opened['citizen']}>Στοιχεία πολίτη</TabsListItem>
+        <TabsListItem {...register('cases')}>Οι υποθέσεις τους</TabsListItem>
+        <TabsListItem {...register('history')}>Ιστορικό</TabsListItem>
       </TabsList>
-      <TabsPanel {...panel('a')}>
+      <TabsPanel {...panel('citizen')} active={Object.keys(opened).length === 0 || opened['citizen']}>
         <Heading size="md" element="h3">
           Στοιχεία πολίτη
         </Heading>
@@ -36,7 +40,6 @@ export function Default() {
             <SummaryListItemKey>Όνομα</SummaryListItemKey>
             <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
             <SummaryListItemAction>
-              {' '}
               <Link href="#">
                 Αλλαγή <VisuallyHidden> ονόματος </VisuallyHidden>
               </Link>
@@ -50,21 +53,25 @@ export function Default() {
             <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
             <SummaryListItemValue>6941234567</SummaryListItemValue>
             <SummaryListItemAction>
-              {' '}
               <Link>
-                {' '}
                 Αλλαγή <VisuallyHidden> τηλεφώνου </VisuallyHidden>
               </Link>
             </SummaryListItemAction>
           </SummaryListItem>
         </SummaryList>
       </TabsPanel>
-      <TabsPanel {...panel('b')}>
+      <TabsPanel {...panel('cases')}>
         <Heading size="md" element="h3">
-          Yποθέσεις
+          Οι υποθέσεις τους
         </Heading>
         Περιεχόμενα υποθέσεων
       </TabsPanel>
+      <TabsPanel {...panel('history')}>
+        <Heading size="md" element="h3">
+          Ιστορικό
+        </Heading>
+        Περιεχόμενο ιστορικού
+      </TabsPanel>
     </Tabs>
   );
 }

package/src/navigation/Tabs/index.mdx

@@ -11,11 +11,13 @@ import Tabs from '@digigov/ui/navigation/Tabs';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Tabs"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Tabs" story="Default.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Tabs
+implementation in the ARIA Authoring Practices Guide (APG) at [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) section.
+
 
 ## API
 

package/src/navigation/Tabs/index.tsx

@@ -24,7 +24,7 @@ export const useTabs = (): UseTabsReturn => {
   }, []);
   const { register, opened, ...rest } = useTogglableTab({
     singleOpen: true,
-    toggleProperty: 'selected',
+    toggleProperty: 'open',
     onToggleProperty: 'onClick',
     firstOpen: true,
     ariaNavigation: true,

package/src/registry.js

@@ -11,15 +11,14 @@ import * as _digigov_ui_app_AccessibilityMenu from '@digigov/ui/app/Accessibilit
 import * as _digigov_ui_app_App from '@digigov/ui/app/App';
 import * as _digigov_ui_app_BannerContainer from '@digigov/ui/app/BannerContainer';
 import * as _digigov_ui_app_BottomInfo from '@digigov/ui/app/BottomInfo';
-import * as _digigov_ui_app_Confirmation from '@digigov/ui/app/Confirmation';
-import * as _digigov_ui_app_FilterSection from '@digigov/ui/app/FilterSection';
+import * as _digigov_ui_app_CloseButton from '@digigov/ui/app/CloseButton';
+import * as _digigov_ui_app_FilterContainer from '@digigov/ui/app/FilterContainer';
 import * as _digigov_ui_app_Footer from '@digigov/ui/app/Footer';
 import * as _digigov_ui_app_Header_HeaderContent from '@digigov/ui/app/Header/HeaderContent';
 import * as _digigov_ui_app_Header_HeaderLogo from '@digigov/ui/app/Header/HeaderLogo';
 import * as _digigov_ui_app_Header_HeaderNavMenuContent from '@digigov/ui/app/Header/HeaderNavMenuContent';
 import * as _digigov_ui_app_Header_HeaderSecondaryLogo from '@digigov/ui/app/Header/HeaderSecondaryLogo';
 import * as _digigov_ui_app_Header_HeaderSection from '@digigov/ui/app/Header/HeaderSection';
-import * as _digigov_ui_app_Header_HeaderSubtitle from '@digigov/ui/app/Header/HeaderSubtitle';
 import * as _digigov_ui_app_Header_HeaderTitle from '@digigov/ui/app/Header/HeaderTitle';
 import * as _digigov_ui_app_Header from '@digigov/ui/app/Header';
 import * as _digigov_ui_app_hooks_useFontSize from '@digigov/ui/app/hooks/useFontSize';
@@ -36,7 +35,8 @@ import * as _digigov_ui_app_NotFound from '@digigov/ui/app/NotFound';
 import * as _digigov_ui_app_OutdatedBrowserBanner_hooks_evaluateBrowserVersion from '@digigov/ui/app/OutdatedBrowserBanner/hooks/evaluateBrowserVersion';
 import * as _digigov_ui_app_OutdatedBrowserBanner_hooks_useOutdatedBrowserCheck from '@digigov/ui/app/OutdatedBrowserBanner/hooks/useOutdatedBrowserCheck';
 import * as _digigov_ui_app_OutdatedBrowserBanner from '@digigov/ui/app/OutdatedBrowserBanner';
-import * as _digigov_ui_app_PageTitle from '@digigov/ui/app/PageTitle';
+import * as _digigov_ui_app_PageTitleContainer from '@digigov/ui/app/PageTitleContainer';
+import * as _digigov_ui_app_Panel from '@digigov/ui/app/Panel';
 import * as _digigov_ui_app_PhaseBannerHeader from '@digigov/ui/app/PhaseBannerHeader';
 import * as _digigov_ui_app_QrCodeScanner from '@digigov/ui/app/QrCodeScanner';
 import * as _digigov_ui_app_QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
@@ -90,9 +90,9 @@ import * as _digigov_ui_form_Form from '@digigov/ui/form/Form';
 import * as _digigov_ui_form from '@digigov/ui/form';
 import * as _digigov_ui_form_LabelContainer from '@digigov/ui/form/LabelContainer';
 import * as _digigov_ui_form_RadioContainer from '@digigov/ui/form/RadioContainer';
-import * as _digigov_ui_form_SearchSection from '@digigov/ui/form/SearchSection';
+import * as _digigov_ui_form_SearchContainer from '@digigov/ui/form/SearchContainer';
 import * as _digigov_ui_form_SelectContainer from '@digigov/ui/form/SelectContainer';
-import * as _digigov_ui_form_SingleCharacterInputContainer from '@digigov/ui/form/SingleCharacterInputContainer';
+import * as _digigov_ui_form_SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';
 import * as _digigov_ui_form_TextArea from '@digigov/ui/form/TextArea';
 import * as _digigov_ui_form_TextInput from '@digigov/ui/form/TextInput';
 import * as _digigov_ui_govgr_Footer_Copyright from '@digigov/ui/govgr/Footer/Copyright';
@@ -117,6 +117,8 @@ import * as _digigov_ui_i18n from '@digigov/ui/i18n';
 import * as _digigov_ui_i18n_locales_el from '@digigov/ui/i18n/locales/el';
 import * as _digigov_ui_i18n_locales_en from '@digigov/ui/i18n/locales/en';
 import * as _digigov_ui_icons_Icon from '@digigov/ui/icons/Icon';
+import * as _digigov_ui_icons_ImageLogo from '@digigov/ui/icons/ImageLogo';
+import * as _digigov_ui_icons_ImageLogoSet from '@digigov/ui/icons/ImageLogoSet';
 import * as _digigov_ui_icons from '@digigov/ui/icons';
 import * as _digigov_ui from '@digigov/ui';
 import * as _digigov_ui_layouts_Admin from '@digigov/ui/layouts/Admin';
@@ -133,7 +135,9 @@ import * as _digigov_ui_layouts_Divider from '@digigov/ui/layouts/Divider';
 import * as _digigov_ui_layouts_Grid from '@digigov/ui/layouts/Grid';
 import * as _digigov_ui_layouts_Hidden from '@digigov/ui/layouts/Hidden';
 import * as _digigov_ui_layouts from '@digigov/ui/layouts';
+import * as _digigov_ui_layouts_Section from '@digigov/ui/layouts/Section';
 import * as _digigov_ui_layouts_SectionBreak from '@digigov/ui/layouts/SectionBreak';
+import * as _digigov_ui_layouts_Stack from '@digigov/ui/layouts/Stack';
 import * as _digigov_ui_misc_KitchenSink from '@digigov/ui/misc/KitchenSink';
 import * as _digigov_ui_navigation_BackLink from '@digigov/ui/navigation/BackLink';
 import * as _digigov_ui_navigation_Breadcrumbs from '@digigov/ui/navigation/Breadcrumbs';
@@ -146,26 +150,8 @@ import * as _digigov_ui_navigation_NavList_hooks_useTogglableNav from '@digigov/
 import * as _digigov_ui_navigation_NavList from '@digigov/ui/navigation/NavList';
 import * as _digigov_ui_navigation_NavList_Nav from '@digigov/ui/navigation/NavList/Nav';
 import * as _digigov_ui_navigation_NavList_NavList from '@digigov/ui/navigation/NavList/NavList';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListBaseAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListBaseAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListContextAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListContextAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListItemAnchorAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAnchorAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListItemAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListItemButtonAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListItemButtonAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListMenuAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListMenuAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListSubMenuAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListSubMenuAuto';
-import * as _digigov_ui_navigation_NavList_NavListItem from '@digigov/ui/navigation/NavList/NavListItem';
-import * as _digigov_ui_navigation_NavList_NavListItemBase from '@digigov/ui/navigation/NavList/NavListItemBase';
-import * as _digigov_ui_navigation_NavList_NavListItemButton from '@digigov/ui/navigation/NavList/NavListItemButton';
-import * as _digigov_ui_navigation_NavList_NavListItemLink from '@digigov/ui/navigation/NavList/NavListItemLink';
-import * as _digigov_ui_navigation_NavList_NavMenu from '@digigov/ui/navigation/NavList/NavMenu';
-import * as _digigov_ui_navigation_NavList_NavMenuContainer from '@digigov/ui/navigation/NavList/NavMenuContainer';
-import * as _digigov_ui_navigation_NavList_NavMenuContainerContent from '@digigov/ui/navigation/NavList/NavMenuContainerContent';
-import * as _digigov_ui_navigation_NavList_NavMenuContainerContentList from '@digigov/ui/navigation/NavList/NavMenuContainerContentList';
-import * as _digigov_ui_navigation_NavList_NavMenuContainerContentListItem from '@digigov/ui/navigation/NavList/NavMenuContainerContentListItem';
-import * as _digigov_ui_navigation_NavList_NavMenuContainerTitle from '@digigov/ui/navigation/NavList/NavMenuContainerTitle';
-import * as _digigov_ui_navigation_NavList_NavVertical from '@digigov/ui/navigation/NavList/NavVertical';
-import * as _digigov_ui_navigation_NavList_NavVerticalItem from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import * as _digigov_ui_navigation_NavList_NavListAuto from '@digigov/ui/navigation/NavList/NavListAuto';
+import * as _digigov_ui_navigation_NavList_NavMenuContentList from '@digigov/ui/navigation/NavList/NavMenuContentList';
 import * as _digigov_ui_navigation_NavList_types from '@digigov/ui/navigation/NavList/types';
 import * as _digigov_ui_navigation_Pagination from '@digigov/ui/navigation/Pagination';
 import * as _digigov_ui_navigation_SkipLink from '@digigov/ui/navigation/SkipLink';
@@ -191,6 +177,7 @@ import * as _digigov_ui_utils_Kitchensink_KitchensinkByLetter from '@digigov/ui/
 import * as _digigov_ui_utils_Kitchensink_KitchensinkComponent from '@digigov/ui/utils/Kitchensink/KitchensinkComponent';
 import * as _digigov_ui_utils_Kitchensink_KitchensinkDashboard from '@digigov/ui/utils/Kitchensink/KitchensinkDashboard';
 import * as _digigov_ui_utils_SvgIcon from '@digigov/ui/utils/SvgIcon';
+import * as _digigov_ui_utils_Typography from '@digigov/ui/utils/Typography';
 import * as _digigov_ui_utils_VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 import * as _digigov_ui_utils_withDeprecation from '@digigov/ui/utils/withDeprecation'
 function lazyImport(pkgImport) {
@@ -225,15 +212,14 @@ export default {
   '@digigov/ui/app/App': lazyImport(_digigov_ui_app_App),
   '@digigov/ui/app/BannerContainer': lazyImport(_digigov_ui_app_BannerContainer),
   '@digigov/ui/app/BottomInfo': lazyImport(_digigov_ui_app_BottomInfo),
-  '@digigov/ui/app/Confirmation': lazyImport(_digigov_ui_app_Confirmation),
-  '@digigov/ui/app/FilterSection': lazyImport(_digigov_ui_app_FilterSection),
+  '@digigov/ui/app/CloseButton': lazyImport(_digigov_ui_app_CloseButton),
+  '@digigov/ui/app/FilterContainer': lazyImport(_digigov_ui_app_FilterContainer),
   '@digigov/ui/app/Footer': lazyImport(_digigov_ui_app_Footer),
   '@digigov/ui/app/Header/HeaderContent': lazyImport(_digigov_ui_app_Header_HeaderContent),
   '@digigov/ui/app/Header/HeaderLogo': lazyImport(_digigov_ui_app_Header_HeaderLogo),
   '@digigov/ui/app/Header/HeaderNavMenuContent': lazyImport(_digigov_ui_app_Header_HeaderNavMenuContent),
   '@digigov/ui/app/Header/HeaderSecondaryLogo': lazyImport(_digigov_ui_app_Header_HeaderSecondaryLogo),
   '@digigov/ui/app/Header/HeaderSection': lazyImport(_digigov_ui_app_Header_HeaderSection),
-  '@digigov/ui/app/Header/HeaderSubtitle': lazyImport(_digigov_ui_app_Header_HeaderSubtitle),
   '@digigov/ui/app/Header/HeaderTitle': lazyImport(_digigov_ui_app_Header_HeaderTitle),
   '@digigov/ui/app/Header': lazyImport(_digigov_ui_app_Header),
   '@digigov/ui/app/hooks/useFontSize': lazyImport(_digigov_ui_app_hooks_useFontSize),
@@ -250,7 +236,8 @@ export default {
   '@digigov/ui/app/OutdatedBrowserBanner/hooks/evaluateBrowserVersion': lazyImport(_digigov_ui_app_OutdatedBrowserBanner_hooks_evaluateBrowserVersion),
   '@digigov/ui/app/OutdatedBrowserBanner/hooks/useOutdatedBrowserCheck': lazyImport(_digigov_ui_app_OutdatedBrowserBanner_hooks_useOutdatedBrowserCheck),
   '@digigov/ui/app/OutdatedBrowserBanner': lazyImport(_digigov_ui_app_OutdatedBrowserBanner),
-  '@digigov/ui/app/PageTitle': lazyImport(_digigov_ui_app_PageTitle),
+  '@digigov/ui/app/PageTitleContainer': lazyImport(_digigov_ui_app_PageTitleContainer),
+  '@digigov/ui/app/Panel': lazyImport(_digigov_ui_app_Panel),
   '@digigov/ui/app/PhaseBannerHeader': lazyImport(_digigov_ui_app_PhaseBannerHeader),
   '@digigov/ui/app/QrCodeScanner': lazyImport(_digigov_ui_app_QrCodeScanner),
   '@digigov/ui/app/QrCodeViewer': lazyImport(_digigov_ui_app_QrCodeViewer),
@@ -304,9 +291,9 @@ export default {
   '@digigov/ui/form': lazyImport(_digigov_ui_form),
   '@digigov/ui/form/LabelContainer': lazyImport(_digigov_ui_form_LabelContainer),
   '@digigov/ui/form/RadioContainer': lazyImport(_digigov_ui_form_RadioContainer),
-  '@digigov/ui/form/SearchSection': lazyImport(_digigov_ui_form_SearchSection),
+  '@digigov/ui/form/SearchContainer': lazyImport(_digigov_ui_form_SearchContainer),
   '@digigov/ui/form/SelectContainer': lazyImport(_digigov_ui_form_SelectContainer),
-  '@digigov/ui/form/SingleCharacterInputContainer': lazyImport(_digigov_ui_form_SingleCharacterInputContainer),
+  '@digigov/ui/form/SingleCharacterInputs': lazyImport(_digigov_ui_form_SingleCharacterInputs),
   '@digigov/ui/form/TextArea': lazyImport(_digigov_ui_form_TextArea),
   '@digigov/ui/form/TextInput': lazyImport(_digigov_ui_form_TextInput),
   '@digigov/ui/govgr/Footer/Copyright': lazyImport(_digigov_ui_govgr_Footer_Copyright),
@@ -331,6 +318,8 @@ export default {
   '@digigov/ui/i18n/locales/el': lazyImport(_digigov_ui_i18n_locales_el),
   '@digigov/ui/i18n/locales/en': lazyImport(_digigov_ui_i18n_locales_en),
   '@digigov/ui/icons/Icon': lazyImport(_digigov_ui_icons_Icon),
+  '@digigov/ui/icons/ImageLogo': lazyImport(_digigov_ui_icons_ImageLogo),
+  '@digigov/ui/icons/ImageLogoSet': lazyImport(_digigov_ui_icons_ImageLogoSet),
   '@digigov/ui/icons': lazyImport(_digigov_ui_icons),
   '@digigov/ui': lazyImport(_digigov_ui),
   '@digigov/ui/layouts/Admin': lazyImport(_digigov_ui_layouts_Admin),
@@ -347,7 +336,9 @@ export default {
   '@digigov/ui/layouts/Grid': lazyImport(_digigov_ui_layouts_Grid),
   '@digigov/ui/layouts/Hidden': lazyImport(_digigov_ui_layouts_Hidden),
   '@digigov/ui/layouts': lazyImport(_digigov_ui_layouts),
+  '@digigov/ui/layouts/Section': lazyImport(_digigov_ui_layouts_Section),
   '@digigov/ui/layouts/SectionBreak': lazyImport(_digigov_ui_layouts_SectionBreak),
+  '@digigov/ui/layouts/Stack': lazyImport(_digigov_ui_layouts_Stack),
   '@digigov/ui/misc/KitchenSink': lazyImport(_digigov_ui_misc_KitchenSink),
   '@digigov/ui/navigation/BackLink': lazyImport(_digigov_ui_navigation_BackLink),
   '@digigov/ui/navigation/Breadcrumbs': lazyImport(_digigov_ui_navigation_Breadcrumbs),
@@ -360,26 +351,8 @@ export default {
   '@digigov/ui/navigation/NavList': lazyImport(_digigov_ui_navigation_NavList),
   '@digigov/ui/navigation/NavList/Nav': lazyImport(_digigov_ui_navigation_NavList_Nav),
   '@digigov/ui/navigation/NavList/NavList': lazyImport(_digigov_ui_navigation_NavList_NavList),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListBaseAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListBaseAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListContextAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListContextAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAnchorAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListItemAnchorAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListItemAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListItemButtonAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListItemButtonAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListMenuAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListMenuAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListSubMenuAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListSubMenuAuto),
-  '@digigov/ui/navigation/NavList/NavListItem': lazyImport(_digigov_ui_navigation_NavList_NavListItem),
-  '@digigov/ui/navigation/NavList/NavListItemBase': lazyImport(_digigov_ui_navigation_NavList_NavListItemBase),
-  '@digigov/ui/navigation/NavList/NavListItemButton': lazyImport(_digigov_ui_navigation_NavList_NavListItemButton),
-  '@digigov/ui/navigation/NavList/NavListItemLink': lazyImport(_digigov_ui_navigation_NavList_NavListItemLink),
-  '@digigov/ui/navigation/NavList/NavMenu': lazyImport(_digigov_ui_navigation_NavList_NavMenu),
-  '@digigov/ui/navigation/NavList/NavMenuContainer': lazyImport(_digigov_ui_navigation_NavList_NavMenuContainer),
-  '@digigov/ui/navigation/NavList/NavMenuContainerContent': lazyImport(_digigov_ui_navigation_NavList_NavMenuContainerContent),
-  '@digigov/ui/navigation/NavList/NavMenuContainerContentList': lazyImport(_digigov_ui_navigation_NavList_NavMenuContainerContentList),
-  '@digigov/ui/navigation/NavList/NavMenuContainerContentListItem': lazyImport(_digigov_ui_navigation_NavList_NavMenuContainerContentListItem),
-  '@digigov/ui/navigation/NavList/NavMenuContainerTitle': lazyImport(_digigov_ui_navigation_NavList_NavMenuContainerTitle),
-  '@digigov/ui/navigation/NavList/NavVertical': lazyImport(_digigov_ui_navigation_NavList_NavVertical),
-  '@digigov/ui/navigation/NavList/NavVerticalItem': lazyImport(_digigov_ui_navigation_NavList_NavVerticalItem),
+  '@digigov/ui/navigation/NavList/NavListAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto),
+  '@digigov/ui/navigation/NavList/NavMenuContentList': lazyImport(_digigov_ui_navigation_NavList_NavMenuContentList),
   '@digigov/ui/navigation/NavList/types': lazyImport(_digigov_ui_navigation_NavList_types),
   '@digigov/ui/navigation/Pagination': lazyImport(_digigov_ui_navigation_Pagination),
   '@digigov/ui/navigation/SkipLink': lazyImport(_digigov_ui_navigation_SkipLink),
@@ -405,16 +378,18 @@ export default {
   '@digigov/ui/utils/Kitchensink/KitchensinkComponent': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkComponent),
   '@digigov/ui/utils/Kitchensink/KitchensinkDashboard': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkDashboard),
   '@digigov/ui/utils/SvgIcon': lazyImport(_digigov_ui_utils_SvgIcon),
+  '@digigov/ui/utils/Typography': lazyImport(_digigov_ui_utils_Typography),
   '@digigov/ui/utils/VisuallyHidden': lazyImport(_digigov_ui_utils_VisuallyHidden),
   '@digigov/ui/utils/withDeprecation': lazyImport(_digigov_ui_utils_withDeprecation)
 };
-  import * as _digigov_ui_app_Confirmation_Confirmation_stories from '@digigov/ui/app/Confirmation/Confirmation.stories';
+  import * as _digigov_ui_app_BannerContainer_BannerContainer_stories from '@digigov/ui/app/BannerContainer/BannerContainer.stories';
 import * as _digigov_ui_app_Footer_Footer_stories from '@digigov/ui/app/Footer/Footer.stories';
 import * as _digigov_ui_app_Header_Header_stories from '@digigov/ui/app/Header/Header.stories';
 import * as _digigov_ui_app_Loader_Loader_stories from '@digigov/ui/app/Loader/Loader.stories';
 import * as _digigov_ui_app_Masthead_Masthead_stories from '@digigov/ui/app/Masthead/Masthead.stories';
 import * as _digigov_ui_app_Modal_Modal_stories from '@digigov/ui/app/Modal/Modal.stories';
 import * as _digigov_ui_app_NotFound_NotFound_stories from '@digigov/ui/app/NotFound/NotFound.stories';
+import * as _digigov_ui_app_Panel_Panel_stories from '@digigov/ui/app/Panel/Panel.stories';
 import * as _digigov_ui_app_PhaseBannerHeader_PhaseBannerHeader_stories from '@digigov/ui/app/PhaseBannerHeader/PhaseBannerHeader.stories';
 import * as _digigov_ui_app_QrCodeScanner_QrCodeScanner_stories from '@digigov/ui/app/QrCodeScanner/QrCodeScanner.stories';
 import * as _digigov_ui_app_QrCodeViewer_QRCode_stories from '@digigov/ui/app/QrCodeViewer/QRCode.stories';
@@ -441,13 +416,14 @@ import * as _digigov_ui_form_DateInputContainer_DateInputContainer_stories from
 import * as _digigov_ui_form_ErrorMessage_ErrorMessage_stories from '@digigov/ui/form/ErrorMessage/ErrorMessage.stories';
 import * as _digigov_ui_form_FileUpload_FileUpload_stories from '@digigov/ui/form/FileUpload/FileUpload.stories';
 import * as _digigov_ui_form_RadioContainer_RadioContainer_stories from '@digigov/ui/form/RadioContainer/RadioContainer.stories';
-import * as _digigov_ui_form_SelectContainer_Select_stories from '@digigov/ui/form/SelectContainer/Select.stories';
-import * as _digigov_ui_form_SingleCharacterInputContainer_SingleCharacterInputContainer_stories from '@digigov/ui/form/SingleCharacterInputContainer/SingleCharacterInputContainer.stories';
+import * as _digigov_ui_form_SelectContainer_SelectContainer_stories from '@digigov/ui/form/SelectContainer/SelectContainer.stories';
+import * as _digigov_ui_form_SingleCharacterInputs_SingleCharacterInput_stories from '@digigov/ui/form/SingleCharacterInputs/SingleCharacterInput.stories';
 import * as _digigov_ui_form_TextArea_TextArea_stories from '@digigov/ui/form/TextArea/TextArea.stories';
 import * as _digigov_ui_form_TextInput_TextInput_stories from '@digigov/ui/form/TextInput/TextInput.stories';
 import * as _digigov_ui_layouts_Basic_Basic_stories from '@digigov/ui/layouts/Basic/Basic.stories';
 import * as _digigov_ui_layouts_Divider_Divider_stories from '@digigov/ui/layouts/Divider/Divider.stories';
 import * as _digigov_ui_layouts_Grid_Grid_stories from '@digigov/ui/layouts/Grid/Grid.stories';
+import * as _digigov_ui_layouts_Stack_Stack_stories from '@digigov/ui/layouts/Stack/Stack.stories';
 import * as _digigov_ui_navigation_BackLink_BackLink_stories from '@digigov/ui/navigation/BackLink/BackLink.stories';
 import * as _digigov_ui_navigation_Breadcrumbs_Breadcrumbs_stories from '@digigov/ui/navigation/Breadcrumbs/Breadcrumbs.stories';
 import * as _digigov_ui_navigation_Drawer_Drawer_stories from '@digigov/ui/navigation/Drawer/Drawer.stories';
@@ -455,6 +431,7 @@ import * as _digigov_ui_navigation_Dropdown_Dropdown_stories from '@digigov/ui/n
 import * as _digigov_ui_navigation_Link_Link_stories from '@digigov/ui/navigation/Link/Link.stories';
 import * as _digigov_ui_navigation_NavList_NavList_stories from '@digigov/ui/navigation/NavList/NavList.stories';
 import * as _digigov_ui_navigation_Pagination_Pagination_stories from '@digigov/ui/navigation/Pagination/Pagination.stories';
+import * as _digigov_ui_navigation_SkipLink_SkipLink_stories from '@digigov/ui/navigation/SkipLink/SkipLink.stories';
 import * as _digigov_ui_navigation_Tabs_Tabs_stories from '@digigov/ui/navigation/Tabs/Tabs.stories';
 import * as _digigov_ui_typography_Heading_Heading_stories from '@digigov/ui/typography/Heading/Heading.stories';
 import * as _digigov_ui_typography_HeadingCaption_HeadingCaption_stories from '@digigov/ui/typography/HeadingCaption/HeadingCaption.stories';
@@ -464,13 +441,14 @@ import * as _digigov_ui_typography_Paragraph_Paragraph_stories from '@digigov/ui
 import * as _digigov_ui_utils_VisuallyHidden_VisuallyHidden_stories from '@digigov/ui/utils/VisuallyHidden/VisuallyHidden.stories'
 
   export const stories = {
-      '@digigov/ui/app/Confirmation/Confirmation.stories': _digigov_ui_app_Confirmation_Confirmation_stories,
+      '@digigov/ui/app/BannerContainer/BannerContainer.stories': _digigov_ui_app_BannerContainer_BannerContainer_stories,
   '@digigov/ui/app/Footer/Footer.stories': _digigov_ui_app_Footer_Footer_stories,
   '@digigov/ui/app/Header/Header.stories': _digigov_ui_app_Header_Header_stories,
   '@digigov/ui/app/Loader/Loader.stories': _digigov_ui_app_Loader_Loader_stories,
   '@digigov/ui/app/Masthead/Masthead.stories': _digigov_ui_app_Masthead_Masthead_stories,
   '@digigov/ui/app/Modal/Modal.stories': _digigov_ui_app_Modal_Modal_stories,
   '@digigov/ui/app/NotFound/NotFound.stories': _digigov_ui_app_NotFound_NotFound_stories,
+  '@digigov/ui/app/Panel/Panel.stories': _digigov_ui_app_Panel_Panel_stories,
   '@digigov/ui/app/PhaseBannerHeader/PhaseBannerHeader.stories': _digigov_ui_app_PhaseBannerHeader_PhaseBannerHeader_stories,
   '@digigov/ui/app/QrCodeScanner/QrCodeScanner.stories': _digigov_ui_app_QrCodeScanner_QrCodeScanner_stories,
   '@digigov/ui/app/QrCodeViewer/QRCode.stories': _digigov_ui_app_QrCodeViewer_QRCode_stories,
@@ -497,13 +475,14 @@ import * as _digigov_ui_utils_VisuallyHidden_VisuallyHidden_stories from '@digig
   '@digigov/ui/form/ErrorMessage/ErrorMessage.stories': _digigov_ui_form_ErrorMessage_ErrorMessage_stories,
   '@digigov/ui/form/FileUpload/FileUpload.stories': _digigov_ui_form_FileUpload_FileUpload_stories,
   '@digigov/ui/form/RadioContainer/RadioContainer.stories': _digigov_ui_form_RadioContainer_RadioContainer_stories,
-  '@digigov/ui/form/SelectContainer/Select.stories': _digigov_ui_form_SelectContainer_Select_stories,
-  '@digigov/ui/form/SingleCharacterInputContainer/SingleCharacterInputContainer.stories': _digigov_ui_form_SingleCharacterInputContainer_SingleCharacterInputContainer_stories,
+  '@digigov/ui/form/SelectContainer/SelectContainer.stories': _digigov_ui_form_SelectContainer_SelectContainer_stories,
+  '@digigov/ui/form/SingleCharacterInputs/SingleCharacterInput.stories': _digigov_ui_form_SingleCharacterInputs_SingleCharacterInput_stories,
   '@digigov/ui/form/TextArea/TextArea.stories': _digigov_ui_form_TextArea_TextArea_stories,
   '@digigov/ui/form/TextInput/TextInput.stories': _digigov_ui_form_TextInput_TextInput_stories,
   '@digigov/ui/layouts/Basic/Basic.stories': _digigov_ui_layouts_Basic_Basic_stories,
   '@digigov/ui/layouts/Divider/Divider.stories': _digigov_ui_layouts_Divider_Divider_stories,
   '@digigov/ui/layouts/Grid/Grid.stories': _digigov_ui_layouts_Grid_Grid_stories,
+  '@digigov/ui/layouts/Stack/Stack.stories': _digigov_ui_layouts_Stack_Stack_stories,
   '@digigov/ui/navigation/BackLink/BackLink.stories': _digigov_ui_navigation_BackLink_BackLink_stories,
   '@digigov/ui/navigation/Breadcrumbs/Breadcrumbs.stories': _digigov_ui_navigation_Breadcrumbs_Breadcrumbs_stories,
   '@digigov/ui/navigation/Drawer/Drawer.stories': _digigov_ui_navigation_Drawer_Drawer_stories,
@@ -511,6 +490,7 @@ import * as _digigov_ui_utils_VisuallyHidden_VisuallyHidden_stories from '@digig
   '@digigov/ui/navigation/Link/Link.stories': _digigov_ui_navigation_Link_Link_stories,
   '@digigov/ui/navigation/NavList/NavList.stories': _digigov_ui_navigation_NavList_NavList_stories,
   '@digigov/ui/navigation/Pagination/Pagination.stories': _digigov_ui_navigation_Pagination_Pagination_stories,
+  '@digigov/ui/navigation/SkipLink/SkipLink.stories': _digigov_ui_navigation_SkipLink_SkipLink_stories,
   '@digigov/ui/navigation/Tabs/Tabs.stories': _digigov_ui_navigation_Tabs_Tabs_stories,
   '@digigov/ui/typography/Heading/Heading.stories': _digigov_ui_typography_Heading_Heading_stories,
   '@digigov/ui/typography/HeadingCaption/HeadingCaption.stories': _digigov_ui_typography_HeadingCaption_HeadingCaption_stories,

package/src/typography/Heading/__stories__/Default.tsx

@@ -5,16 +5,16 @@ export const Default = () => (
   <>
     <Heading> govgr-heading-xl </Heading>
     <Heading size="lg" element="h2">
-      {' '}
-      govgr-heading-lg{' '}
+      govgr-heading-lg
     </Heading>
     <Heading size="md" element="h3">
-      {' '}
-      govgr-heading-md{' '}
+      govgr-heading-md
     </Heading>
     <Heading size="sm" element="h4">
-      {' '}
-      govgr-heading-sm{' '}
+      govgr-heading-sm
+    </Heading>
+    <Heading size="xs" element="h5">
+      govgr-heading-xs
     </Heading>
   </>
 );

package/src/typography/Heading/index.mdx

@@ -9,11 +9,7 @@ import Heading from '@digigov/ui/typography/Heading';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Heading"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Heading"story="Default.tsx" />
 
 ## API
 

package/src/typography/HeadingCaption/index.mdx

@@ -9,11 +9,7 @@ import HeadingCaption from '@digigov/ui/typography/HeadingCaption';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/HeadingCaption"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/HeadingCaption" story="Default.tsx" />
 
 ### Nested caption to title
 

package/src/typography/Hint/__stories__/FontSizes.tsx

@@ -3,10 +3,10 @@ import { Hint } from '@digigov/ui/typography/Hint';
 
 export const FontSizes = () => (
   <>
-    <Hint fontSize="14"> govgr-hint </Hint>
-    <Hint fontSize="16"> govgr-hint </Hint>
+    <Hint fontSize={14}> govgr-hint </Hint>
+    <Hint fontSize={16}> govgr-hint </Hint>
     <Hint> govgr-hint </Hint>
-    <Hint fontSize="24"> govgr-hint </Hint>
+    <Hint fontSize={24}> govgr-hint </Hint>
   </>
 );
 

package/src/typography/Hint/index.mdx

@@ -9,14 +9,12 @@ import Hint from '@digigov/ui/typography/Hint';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Hint"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Hint" story="Default.tsx" />
 
 ### Font sizes
 
+<Story packageName="@digigov/ui" component="typography/Hint" story="FontSizes.tsx" />
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Hint" />

package/src/typography/NormalText/__stories__/FontSizes.tsx

@@ -4,19 +4,19 @@ import { NormalText } from '@digigov/ui/typography/NormalText';
 
 export const FontSizes = () => (
   <>
-    <NormalText fontSize="14"> govgr-!-font-size-14 </NormalText>
+    <NormalText fontSize={14}> govgr-!-font-size-14 </NormalText>
     <SectionBreak visible={false} />
-    <NormalText fontSize="16"> govgr-!-font-size-16 </NormalText>
+    <NormalText fontSize={16}> govgr-!-font-size-16 </NormalText>
     <SectionBreak visible={false} />
-    <NormalText fontSize="19"> govgr-!-font-size-19 </NormalText>
+    <NormalText fontSize={19}> govgr-!-font-size-19 </NormalText>
     <SectionBreak visible={false} />
-    <NormalText fontSize="24"> govgr-!-font-size-24 </NormalText>
+    <NormalText fontSize={24}> govgr-!-font-size-24 </NormalText>
     <SectionBreak visible={false} />
-    <NormalText fontSize="30"> govgr-!-font-size-30 </NormalText>
+    <NormalText fontSize={30}> govgr-!-font-size-30 </NormalText>
     <SectionBreak visible={false} />
-    <NormalText fontSize="48"> govgr-!-font-size-48 </NormalText>
+    <NormalText fontSize={48}> govgr-!-font-size-48 </NormalText>
     <SectionBreak visible={false} />
-    <NormalText fontSize="72"> govgr-!-font-size-72 </NormalText>
+    <NormalText fontSize={72}> govgr-!-font-size-72 </NormalText>
   </>
 );
 

package/src/typography/NormalText/__stories__/Variants.tsx

@@ -4,9 +4,9 @@ import { NormalText } from '@digigov/ui/typography/NormalText';
 
 export const Variants = () => (
   <>
-    <NormalText variant={'sm'}> govgr-variant-small </NormalText>
+    <NormalText size={'sm'}> govgr-size-small </NormalText>
     <SectionBreak visible={false} />
-    <NormalText variant={'lg'}> govgr-variant-lead </NormalText>
+    <NormalText size={'lg'}> govgr-size-large </NormalText>
   </>
 );
 

package/src/typography/NormalText/index.mdx

@@ -9,32 +9,22 @@ import NormalText from '@digigov/ui/typography/NormalText';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/NormalText" story="Default.tsx" />
 
 ### Variants
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="Variants.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/NormalText" story="Variants.tsx" />
 
 ## Font override classes
 
 ### Font size
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="FontSizes.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/NormalText" story="FontSizes.tsx" />
 
 ### Font weight
 
+<Story packageName="@digigov/ui" component="typography/NormalText" story="FontWeight.tsx" />
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="NormalText" />

package/src/typography/Paragraph/__stories__/FontSizes.tsx

@@ -3,13 +3,13 @@ import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 export const FontSizes = () => (
   <>
-    <Paragraph fontSize="14"> govgr-!-font-size-14 </Paragraph>
-    <Paragraph fontSize="16"> govgr-!-font-size-16 </Paragraph>
-    <Paragraph fontSize="19"> govgr-!-font-size-19 </Paragraph>
-    <Paragraph fontSize="24"> govgr-!-font-size-24 </Paragraph>
-    <Paragraph fontSize="30"> govgr-!-font-size-30 </Paragraph>
-    <Paragraph fontSize="48"> govgr-!-font-size-48 </Paragraph>
-    <Paragraph fontSize="72"> govgr-!-font-size-72 </Paragraph>
+    <Paragraph fontSize={14}> govgr-!-font-size-14 </Paragraph>
+    <Paragraph fontSize={16}> govgr-!-font-size-16 </Paragraph>
+    <Paragraph fontSize={19}> govgr-!-font-size-19 </Paragraph>
+    <Paragraph fontSize={24}> govgr-!-font-size-24 </Paragraph>
+    <Paragraph fontSize={30}> govgr-!-font-size-30 </Paragraph>
+    <Paragraph fontSize={48}> govgr-!-font-size-48 </Paragraph>
+    <Paragraph fontSize={72}> govgr-!-font-size-72 </Paragraph>
   </>
 );
 

package/src/typography/Paragraph/__stories__/LeadVariant.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 export const LeadVariant = () => (
-  <Paragraph variant={'lg'}>govgr-body</Paragraph>
+  <Paragraph size={'lg'}>govgr-body</Paragraph>
 );
 
 export default LeadVariant;

package/src/typography/Paragraph/__stories__/SmallVariant.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 export const SmallVariant = () => (
-  <Paragraph variant={'sm'}>govgr-body</Paragraph>
+  <Paragraph size={'sm'}>govgr-body</Paragraph>
 );
 
 export default SmallVariant;