@digigov/ui 1.0.0-266e80f3 → 1.0.0-3bfc7d37

package/es/navigation/NavList/NavList.stories.playwright.json

@@ -1,7 +1,7 @@
 {
   "version": "4",
   "stories": {
-    "digigov-ui-navigation-navlist--default": {
+    "digigov-ui-navigation-navlist--with-sub-menu": {
       "actionSets": [
         {
           "actions": [
@@ -12,8 +12,8 @@
               }
             }
           ],
-          "id": "dHQxEQCIJ4bJ",
-          "title": "Hover item"
+          "id": "FO0jt9D4koTE",
+          "title": "Hover Item"
         },
         {
           "actions": [
@@ -24,8 +24,8 @@
               }
             }
           ],
-          "id": "WMfgyO3E_9S_",
-          "title": "Open sub menu"
+          "id": "pSAeXNWiklxX",
+          "title": "Open submenu"
         }
       ]
     }

package/es/navigation/NavList/__stories__/Default.js

@@ -1,73 +1,39 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { Fragment } from 'react';
-import { Nav, NavList, NavListItemAction, NavMenuContainer, NavMenuContent, NavMenuContentList, NavMenuContentListItem, NavMenuTitle, useNavList } from '@digigov/ui/navigation/NavList';
-import { Link } from '@digigov/ui/navigation/Link';
+import React from 'react';
+import { Nav, NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
 var links = [{
   name: 'home',
   href: '#home',
-  label: 'Αρχική'
+  label: 'Αρχική',
+  active: true
 }, {
-  name: 'educational',
-  label: 'Εκπαιδευτικό υλικό',
-  subMenu: [{
-    name: 'elearning',
-    href: '#elearning',
-    label: 'Εκπαιδευτική πλατφόρμα'
-  }, {
-    name: 'videos',
-    href: '#videos',
-    label: 'Βίντεο'
-  }, {
-    name: 'presentations',
-    href: '#presentations',
-    label: 'Παρουσιάσεις'
-  }, {
-    name: 'promoting',
-    href: '#promoting',
-    label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά'
-  }, {
-    name: 'other-texts',
-    href: '#other-texts',
-    label: 'Άλλα κείμενα'
-  }]
+  name: 'new_form',
+  href: '#new_form',
+  label: 'Καταχώριση φόρμας'
 }, {
   name: 'news',
   href: '#news',
   label: 'Νέα'
+}, {
+  name: 'contact',
+  href: '#contact',
+  label: 'Επικοινωνία'
 }];
 export var Default = function Default() {
-  var layout = 'horizontal';
-  var border = false;
-
   var _useNavList = useNavList(),
-      registerNavItemMenu = _useNavList.registerNavItemMenu,
       registerNavItem = _useNavList.registerNavItem;
 
   return /*#__PURE__*/React.createElement(Nav, {
-    open: true,
-    border: border,
-    "aria-orientation": layout
-  }, /*#__PURE__*/React.createElement(NavList, {
-    layout: layout
-  }, links.map(function (item, key) {
-    var _item$subMenu;
-
-    return /*#__PURE__*/React.createElement(Fragment, {
+    role: "menubar",
+    "aria-orientation": "horizontal",
+    "aria-label": "Nav list",
+    fixed: false
+  }, /*#__PURE__*/React.createElement(NavList, null, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAction, _extends({
       key: key
-    }, /*#__PURE__*/React.createElement(NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
-      layout: layout
-    }, registerNavItemMenu(item.name)), /*#__PURE__*/React.createElement(NavMenuTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
-      role: "menu"
-    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
-      return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/React.createElement(NavMenuContentListItem, {
-        key: menuIndex,
-        role: "presentation"
-      }, /*#__PURE__*/React.createElement(Link, {
-        role: "menuitem",
-        id: subMenu.name,
-        href: subMenu.href
-      }, subMenu.label));
-    })))));
+    }, registerNavItem(item), {
+      active: item === null || item === void 0 ? void 0 : item.active
+    }), item.label);
   })));
 };
 export default Default;

package/es/navigation/NavList/__stories__/NavVertical.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Nav, NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
+var links = [{
+  name: 'link_1',
+  href: '#link_1',
+  label: 'Σύνδεσμος 1',
+  active: true
+}, {
+  name: 'link_2',
+  href: '#link_2',
+  label: 'Σύνδεσμος 2'
+}, {
+  name: 'link_3',
+  href: '#link_3',
+  label: 'Σύνδεσμος 3'
+}];
+export var NavVertical = function NavVertical() {
+  var _useNavList = useNavList(),
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/React.createElement(Nav, {
+    "aria-orientation": "vertical",
+    "aria-label": "Nav list",
+    fixed: false,
+    border: false
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: "vertical"
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAction, _extends({
+      key: key
+    }, registerNavItem(item), {
+      active: item === null || item === void 0 ? void 0 : item.active
+    }), item.label);
+  })));
+};
+export default NavVertical;

package/es/navigation/NavList/__stories__/NavVerticalWithTitle.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Nav, NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
+import { Heading } from '@digigov/ui/typography/Heading';
+var links = [{
+  name: 'link_1',
+  href: '#link_1',
+  label: 'Σύνδεσμος 1',
+  active: true
+}, {
+  name: 'link_2',
+  href: '#link_2',
+  label: 'Σύνδεσμος 2'
+}, {
+  name: 'link_3',
+  href: '#link_3',
+  label: 'Σύνδεσμος 3'
+}];
+
+var _ref = /*#__PURE__*/React.createElement(Heading, {
+  size: "sm"
+}, "\u03A3\u03C7\u03B5\u03C4\u03B9\u03BA\u03BF\u03AF \u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03BC\u03BF\u03B9");
+
+export var NavVerticalWithTitle = function NavVerticalWithTitle() {
+  var _useNavList = useNavList(),
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/React.createElement("div", null, _ref, /*#__PURE__*/React.createElement(Nav, {
+    "aria-orientation": "vertical",
+    "aria-label": "Nav list",
+    fixed: false,
+    border: false
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: "vertical"
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAction, _extends({
+      key: key
+    }, registerNavItem(item), {
+      active: item === null || item === void 0 ? void 0 : item.active
+    }), item.label);
+  }))));
+};
+export default NavVerticalWithTitle;

package/es/navigation/NavList/__stories__/WithBurgerIcon.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import NavList from '@digigov/ui/navigation/NavList/NavList';
+import { BurgerIcon } from '@digigov/ui/icons';
+import { Nav, NavListItemAction } from '@digigov/ui/navigation/NavList';
+import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
+var links = [{
+  name: 'home',
+  href: '#home',
+  label: 'Αρχική',
+  active: true
+}, {
+  name: 'new_form',
+  href: '#new_form',
+  label: 'Καταχώριση φόρμας'
+}, {
+  name: 'news',
+  href: '#news',
+  label: 'Νέα'
+}, {
+  name: 'contact',
+  href: '#contact',
+  label: 'Επικοινωνία'
+}];
+export var WithBurgerIcon = function WithBurgerIcon() {
+  var _useNavList = useNavList(),
+      registerNavItem = _useNavList.registerNavItem;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BurgerIcon, {
+    mdUpHidden: true,
+    size: "lg",
+    onClick: function onClick() {
+      setOpen(!open);
+    }
+  }), /*#__PURE__*/React.createElement(Nav, {
+    role: "menubar",
+    "aria-orientation": "horizontal",
+    "aria-label": "Nav list",
+    fixed: false,
+    border: false,
+    open: open
+  }, /*#__PURE__*/React.createElement(NavList, null, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAction, _extends({
+      key: key
+    }, registerNavItem(item), {
+      active: item === null || item === void 0 ? void 0 : item.active
+    }), item.label);
+  }))));
+};
+export default WithBurgerIcon;

package/es/navigation/NavList/__stories__/WithSubMenu.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Fragment } from 'react';
+import { Nav, NavList, NavListItemAction, NavMenuContainer, NavMenuContent, NavMenuContentList, NavMenuContentListItem, NavMenuTitle, useNavList } from '@digigov/ui/navigation/NavList';
+import { Link } from '@digigov/ui/navigation/Link';
+var links = [{
+  name: 'home',
+  href: '#home',
+  label: 'Αρχική'
+}, {
+  name: 'educational',
+  label: 'Εκπαιδευτικό υλικό',
+  subMenu: [{
+    name: 'elearning',
+    href: '#elearning',
+    label: 'Εκπαιδευτική πλατφόρμα'
+  }, {
+    name: 'videos',
+    href: '#videos',
+    label: 'Βίντεο'
+  }, {
+    name: 'presentations',
+    href: '#presentations',
+    label: 'Παρουσιάσεις'
+  }, {
+    name: 'promoting',
+    href: '#promoting',
+    label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά'
+  }, {
+    name: 'other-texts',
+    href: '#other-texts',
+    label: 'Άλλα κείμενα'
+  }]
+}, {
+  name: 'news',
+  href: '#news',
+  label: 'Νέα'
+}];
+export var WithSubMenu = function WithSubMenu() {
+  var layout = 'horizontal';
+  var border = false;
+
+  var _useNavList = useNavList(),
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/React.createElement(Nav, {
+    open: true,
+    border: border,
+    "aria-orientation": layout
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
+    var _item$subMenu;
+
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: key
+    }, /*#__PURE__*/React.createElement(NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
+      layout: layout
+    }, registerNavItemMenu(item.name)), /*#__PURE__*/React.createElement(NavMenuTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
+      role: "menu"
+    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+      return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/React.createElement(NavMenuContentListItem, {
+        key: menuIndex,
+        role: "presentation"
+      }, /*#__PURE__*/React.createElement(Link, {
+        role: "menuitem",
+        id: subMenu.name,
+        href: subMenu.href
+      }, subMenu.label));
+    })))));
+  })));
+};
+export default WithSubMenu;

package/es/navigation/Tabs/__stories__/Default.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction } from '@digigov/ui/content/SummaryList';
 import { Link } from '@digigov/ui/navigation/Link';
@@ -14,20 +15,30 @@ var _ref2 = /*#__PURE__*/React.createElement(Heading, {
   element: "h3"
 }, "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7");
 
-var _ref3 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, {
+var _ref3 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
   href: "#"
-}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03BF\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2 ")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC. \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, null, ' ', "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5 ")))));
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03BF\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2 ")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC. \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, null, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5 ")))));
 
 var _ref4 = /*#__PURE__*/React.createElement(Heading, {
   size: "md",
   element: "h3"
-}, "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2");
+}, "\u039F\u03B9 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2 \u03C4\u03BF\u03C5\u03C2");
+
+var _ref5 = /*#__PURE__*/React.createElement(Heading, {
+  size: "md",
+  element: "h3"
+}, "\u0399\u03C3\u03C4\u03BF\u03C1\u03B9\u03BA\u03CC");
 
 export function Default() {
   var _useTabs = useTabs(),
       register = _useTabs.register,
+      opened = _useTabs.opened,
       panel = _useTabs.panel;
 
-  return /*#__PURE__*/React.createElement(Tabs, null, _ref, /*#__PURE__*/React.createElement(TabsList, null, /*#__PURE__*/React.createElement(TabsListItem, register('a'), "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__PURE__*/React.createElement(TabsListItem, register('b'), "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(TabsPanel, panel('a'), _ref2, _ref3), /*#__PURE__*/React.createElement(TabsPanel, panel('b'), _ref4, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03C9\u03BD"));
+  return /*#__PURE__*/React.createElement(Tabs, null, _ref, /*#__PURE__*/React.createElement(TabsList, null, /*#__PURE__*/React.createElement(TabsListItem, _extends({}, register('citizen'), {
+    open: Object.keys(opened).length === 0 || opened['citizen']
+  }), "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__PURE__*/React.createElement(TabsListItem, register('cases'), "\u039F\u03B9 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2 \u03C4\u03BF\u03C5\u03C2"), /*#__PURE__*/React.createElement(TabsListItem, register('history'), "\u0399\u03C3\u03C4\u03BF\u03C1\u03B9\u03BA\u03CC")), /*#__PURE__*/React.createElement(TabsPanel, _extends({}, panel('citizen'), {
+    active: Object.keys(opened).length === 0 || opened['citizen']
+  }), _ref2, _ref3), /*#__PURE__*/React.createElement(TabsPanel, panel('cases'), _ref4, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03C9\u03BD"), /*#__PURE__*/React.createElement(TabsPanel, panel('history'), _ref5, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF \u03B9\u03C3\u03C4\u03BF\u03C1\u03B9\u03BA\u03BF\u03CD"));
 }
 export default Default;

package/es/registry.js

@@ -376,6 +376,7 @@ export default {
   '@digigov/ui/utils/VisuallyHidden': lazyImport(_digigov_ui_utils_VisuallyHidden),
   '@digigov/ui/utils/withDeprecation': lazyImport(_digigov_ui_utils_withDeprecation)
 };
+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';
@@ -409,7 +410,7 @@ 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_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';
@@ -433,6 +434,7 @@ import * as _digigov_ui_typography_NormalText_NormalText_stories from '@digigov/
 import * as _digigov_ui_typography_Paragraph_Paragraph_stories from '@digigov/ui/typography/Paragraph/Paragraph.stories';
 import * as _digigov_ui_utils_VisuallyHidden_VisuallyHidden_stories from '@digigov/ui/utils/VisuallyHidden/VisuallyHidden.stories';
 export var 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,
@@ -466,7 +468,7 @@ export var stories = {
   '@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/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,

package/esm/app/BannerContainer/BannerContainer.stories.js

@@ -0,0 +1,10 @@
+/* eslint-disable digigov/no-relative-imports */
+import BannerContainer from '@digigov/ui/app/BannerContainer';
+export default {
+  title: 'Digigov UI/app/BannerContainer',
+  description: 'The BannerContainer provides a container for the banner and the page content.',
+  link: 'https://guide.services.gov.gr/docs/components/cookies-banner',
+  component: BannerContainer,
+  displayName: 'BannerContainer'
+};
+export * from './__stories__/CookiesBanner';

package/esm/app/BannerContainer/__stories__/CookiesBanner.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import BannerContainer from '@digigov/ui/app/BannerContainer';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import Button, { ButtonGroup } from '@digigov/ui/form/Button';
+
+var _ref = /*#__PURE__*/React.createElement(BannerContainer, null, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(Heading, {
+  size: "md"
+}, "Cookies \u03C3\u03C4\u03BF GOV.GR"), /*#__PURE__*/React.createElement(Paragraph, null, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \xAB\u0391\u03C0\u03BF\u03B4\u03BF\u03C7\u03AE\xBB \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C3\u03C5\u03BC\u03C6\u03C9\u03BD\u03AE\u03C3\u03B5\u03C4\u03B5 \u03BC\u03B5 \u03C4\u03B7 \u03C7\u03C1\u03AE\u03C3\u03B7 \u03C4\u03C9\u03BD cookies \u03BA\u03B1\u03B9 \u03C4\u03B7\u03BD \u03B5\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1 \u03C4\u03C9\u03BD \u03C0\u03C1\u03BF\u03C3\u03C9\u03C0\u03B9\u03BA\u03CE\u03BD \u03C3\u03B1\u03C2 \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03C9\u03BD."), /*#__PURE__*/React.createElement(Paragraph, null, /*#__PURE__*/React.createElement(Button, {
+  variant: "link"
+}, "\u038C\u03C1\u03BF\u03B9 \u03BA\u03B1\u03B9 \u03A0\u03C1\u03BF\u03CB\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, null, "\u0391\u03C0\u03BF\u03B4\u03BF\u03C7\u03AE"), /*#__PURE__*/React.createElement(Button, null, "\u0391\u03C0\u03CC\u03C1\u03C1\u03B9\u03C8\u03B7")))));
+
+export var CookiesBanner = function CookiesBanner() {
+  return _ref;
+};
+export default CookiesBanner;

package/esm/app/Footer/__stories__/FooterAllInclusive.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { Footer, FooterContainer, FooterInfo, FooterInfoSection, FooterContent, FooterNavigation, FooterNavigationSection, FooterHeading, FooterList, FooterListItem, FooterLink, FooterContentLogos, FooterImage } from '@digigov/ui/app/Footer';
 import Copyright from '@digigov/ui/govgr/Footer/Copyright';
 import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
-import logo1 from '@digigov/ui/govgr/images/greek-government-base64';
-import logo2 from '@digigov/ui/govgr/images/grnet-logo-base64';
+import govgrBlueLogo from '@digigov/ui/govgr/images/govgr-logo-blue-base64';
+import mineduBlackLogo from '@digigov/ui/govgr/images/minedu-logo-black-base64';
 import SectionBreak from '@digigov/ui/layouts/SectionBreak';
 import Link from '@digigov/ui/navigation/Link';
 import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 
-var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterContainer, null, /*#__PURE__*/React.createElement(FooterNavigation, null, /*#__PURE__*/React.createElement(FooterNavigationSection, {
+var _ref = /*#__PURE__*/React.createElement(FooterNavigation, null, /*#__PURE__*/React.createElement(FooterNavigationSection, {
   "aria-label": "footer navigation section"
 }, /*#__PURE__*/React.createElement(FooterHeading, null, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2"), /*#__PURE__*/React.createElement(FooterList, {
   columns: 2
@@ -24,36 +24,46 @@ var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.cre
   href: "#"
 }, "\u038C\u03C1\u03BF\u03B9 \u03C7\u03C1\u03AE\u03C3\u03B7\u03C2")), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
-}, "\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC \u03B1\u03C0\u03CC\u03C1\u03C1\u03B7\u03C4\u03BF ")))), /*#__PURE__*/React.createElement(FooterNavigationSection, {
+}, "\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC \u03B1\u03C0\u03CC\u03C1\u03C1\u03B7\u03C4\u03BF")))), /*#__PURE__*/React.createElement(FooterNavigationSection, {
   "aria-label": "footer navigation section"
 }, /*#__PURE__*/React.createElement(FooterHeading, null, "\u0395\u03BE\u03C9\u03C4\u03B5\u03C1\u03B9\u03BA\u03AD\u03C2 \u03A5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2"), /*#__PURE__*/React.createElement(FooterList, null, /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
 }, "\u0395\u039C\u0394\u0394 - \u039C\u0399\u03A4\u039F\u03A3")), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
-}, "EUGO"))))), /*#__PURE__*/React.createElement(SectionBreak, {
+}, "EUGO")))));
+
+var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
   visible: false,
   size: "md"
-}), /*#__PURE__*/React.createElement(FooterInfo, null, /*#__PURE__*/React.createElement(FooterInfoSection, {
-  grow: true,
-  "aria-label": "footer info section"
-}, /*#__PURE__*/React.createElement(FooterContent, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2"), /*#__PURE__*/React.createElement(FooterList, {
+});
+
+var _ref3 = /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2");
+
+var _ref4 = /*#__PURE__*/React.createElement(FooterList, {
   layout: "horizontal"
-}, /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, null, "\u038C\u03C1\u03BF\u03B9 \u03BA\u03B1\u03B9 \u03A0\u03C1\u03BF\u03CB\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, null, "\u03A3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C4\u03BF gov.gr"))), /*#__PURE__*/React.createElement(FooterContentLogos, null, /*#__PURE__*/React.createElement(FooterImage, {
-  src: logo1
+}, /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, null, "\u038C\u03C1\u03BF\u03B9 \u03BA\u03B1\u03B9 \u03A0\u03C1\u03BF\u03CB\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, null, "\u03A3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C4\u03BF gov.gr")));
+
+var _ref5 = /*#__PURE__*/React.createElement(FooterContentLogos, null, /*#__PURE__*/React.createElement(FooterImage, {
+  src: govgrBlueLogo
 }), /*#__PURE__*/React.createElement(FooterImage, {
-  src: logo2
-})), /*#__PURE__*/React.createElement(Copyright, null, "\u03A5\u03BB\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {
-  href: "https://grnet.gr/",
-  target: "_blank"
-}, "\u0395\u0394\u03A5\u03A4\u0395", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)")), ' ', "\u03B3\u03B9\u03B1 \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {
-  href: "https://mindigital.gr/",
-  target: "_blank"
-}, ' ', "\u03A5\u03C0\u03BF\u03C5\u03C1\u03B3\u03B5\u03AF\u03BF \u03A8\u03B7\u03C6\u03B9\u03B1\u03BA\u03AE\u03C2 \u0394\u03B9\u03B1\u03BA\u03C5\u03B2\u03AD\u03C1\u03BD\u03B7\u03C3\u03B7\u03C2", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)")), ' ', "\u03BA\u03B1\u03B9 \u03B3\u03B9\u03B1 \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {
-  href: "https://www.minedu.gov.gr/",
-  target: "_blank"
-}, "\u03A5\u03C0\u03BF\u03C5\u03C1\u03B3\u03B5\u03AF\u03BF \u03A0\u03B1\u03B9\u03B4\u03B5\u03AF\u03B1\u03C2 \u03BA\u03B1\u03B9 \u0398\u03C1\u03B7\u03C3\u03BA\u03B5\u03C5\u03BC\u03AC\u03C4\u03C9\u03BD", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)"))))), /*#__PURE__*/React.createElement(FooterInfoSection, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null)))));
+  src: mineduBlackLogo
+}));
+
+var _ref6 = /*#__PURE__*/React.createElement(FooterInfoSection, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null));
 
 export var FooterAllInclusive = function FooterAllInclusive() {
-  return _ref;
+  return /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterContainer, null, _ref, _ref2, /*#__PURE__*/React.createElement(FooterInfo, null, /*#__PURE__*/React.createElement(FooterInfoSection, {
+    grow: true,
+    "aria-label": "footer info section"
+  }, /*#__PURE__*/React.createElement(FooterContent, null, _ref3, _ref4, _ref5, /*#__PURE__*/React.createElement(Copyright, null, "\u03A5\u03BB\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03BF ", /*#__PURE__*/React.createElement(Link, {
+    href: "https://grnet.gr/",
+    target: "_blank"
+  }, "\u0395\u0394\u03A5\u03A4\u0395", /*#__PURE__*/React.createElement(VisuallyHidden, null, " (\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)")), " \u03B3\u03B9\u03B1 \u03C4\u03BF ", /*#__PURE__*/React.createElement(Link, {
+    href: "https://mindigital.gr/",
+    target: "_blank"
+  }, "\u03A5\u03C0\u03BF\u03C5\u03C1\u03B3\u03B5\u03AF\u03BF \u03A8\u03B7\u03C6\u03B9\u03B1\u03BA\u03AE\u03C2 \u0394\u03B9\u03B1\u03BA\u03C5\u03B2\u03AD\u03C1\u03BD\u03B7\u03C3\u03B7\u03C2", /*#__PURE__*/React.createElement(VisuallyHidden, null, " (\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)")), " \u03BA\u03B1\u03B9 \u03B3\u03B9\u03B1 \u03C4\u03BF ", /*#__PURE__*/React.createElement(Link, {
+    href: "https://www.minedu.gov.gr/",
+    target: "_blank"
+  }, "\u03A5\u03C0\u03BF\u03C5\u03C1\u03B3\u03B5\u03AF\u03BF \u03A0\u03B1\u03B9\u03B4\u03B5\u03AF\u03B1\u03C2 \u03BA\u03B1\u03B9 \u0398\u03C1\u03B7\u03C3\u03BA\u03B5\u03C5\u03BC\u03AC\u03C4\u03C9\u03BD", /*#__PURE__*/React.createElement(VisuallyHidden, null, " (\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)"))))), _ref6)));
 };
 export default FooterAllInclusive;

package/esm/app/Footer/__stories__/FooterWithLink.js

@@ -5,24 +5,28 @@ import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo'
 import Link from '@digigov/ui/navigation/Link';
 import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 
-var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterContainer, null, /*#__PURE__*/React.createElement(FooterInfo, null, /*#__PURE__*/React.createElement(FooterInfoSection, {
-  grow: true,
-  "aria-label": "footer info section"
-}, /*#__PURE__*/React.createElement(FooterContent, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2"), /*#__PURE__*/React.createElement(FooterList, {
+var _ref = /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2");
+
+var _ref2 = /*#__PURE__*/React.createElement(FooterList, {
   layout: "horizontal"
 }, /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
 }, "\u038C\u03C1\u03BF\u03B9 \u03BA\u03B1\u03B9 \u03A0\u03C1\u03BF\u03CB\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
-}, "\u03A3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C4\u03BF gov.gr"))), /*#__PURE__*/React.createElement(Copyright, null, "\u03A5\u03BB\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {
-  href: "https://grnet.gr/",
-  target: "_blank"
-}, "\u0395\u0394\u03A5\u03A4\u0395", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)")), ' ', "\u03B3\u03B9\u03B1 \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {
-  href: "https://mindigital.gr/",
-  target: "_blank"
-}, "\u03A5\u03C0\u03BF\u03C5\u03C1\u03B3\u03B5\u03AF\u03BF \u03A8\u03B7\u03C6\u03B9\u03B1\u03BA\u03AE\u03C2 \u0394\u03B9\u03B1\u03BA\u03C5\u03B2\u03AD\u03C1\u03BD\u03B7\u03C3\u03B7\u03C2", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)"))))), /*#__PURE__*/React.createElement(FooterInfoSection, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null)))));
+}, "\u03A3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C4\u03BF gov.gr")));
+
+var _ref3 = /*#__PURE__*/React.createElement(FooterInfoSection, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null));
 
 export var FooterWithLink = function FooterWithLink() {
-  return _ref;
+  return /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterContainer, null, /*#__PURE__*/React.createElement(FooterInfo, null, /*#__PURE__*/React.createElement(FooterInfoSection, {
+    grow: true,
+    "aria-label": "footer info section"
+  }, /*#__PURE__*/React.createElement(FooterContent, null, _ref, _ref2, /*#__PURE__*/React.createElement(Copyright, null, "\u03A5\u03BB\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03BF ", /*#__PURE__*/React.createElement(Link, {
+    href: "https://grnet.gr/",
+    target: "_blank"
+  }, "\u0395\u0394\u03A5\u03A4\u0395", /*#__PURE__*/React.createElement(VisuallyHidden, null, " (\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)")), " \u03B3\u03B9\u03B1 \u03C4\u03BF ", /*#__PURE__*/React.createElement(Link, {
+    href: "https://mindigital.gr/",
+    target: "_blank"
+  }, "\u03A5\u03C0\u03BF\u03C5\u03C1\u03B3\u03B5\u03AF\u03BF \u03A8\u03B7\u03C6\u03B9\u03B1\u03BA\u03AE\u03C2 \u0394\u03B9\u03B1\u03BA\u03C5\u03B2\u03AD\u03C1\u03BD\u03B7\u03C3\u03B7\u03C2", /*#__PURE__*/React.createElement(VisuallyHidden, null, " (\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)"))))), _ref3)));
 };
 export default FooterWithLink;