@digigov/ui 0.30.0-navlist.alpha.3 → 0.30.0

package/core/NotificationBanner/__stories__/Default.js

@@ -16,7 +16,7 @@ var Default = function Default() {
     title: "Warning",
     link: {
       label: 'Προβολή αίτησης',
-      href: '#'
+      href: '#link?name=NotificationBannerDefault'
     }
   }, "\u0388\u03C7\u03B5\u03C4\u03B5 7 \u03B7\u03BC\u03AD\u03C1\u03B5\u03C2 \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C5\u03C0\u03BF\u03B2\u03AC\u03BB\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B1\u03AF\u03C4\u03B7\u03C3\u03B7.");
 };

package/core/NotificationBanner/__stories__/Success.js

@@ -17,7 +17,7 @@ var Success = function Success() {
     variant: "success",
     link: {
       label: 'Προβολή αίτησης',
-      href: '#'
+      href: '#link?name=NotificationBannerSuccess'
     }
   }, "\u0397 \u03B1\u03AF\u03C4\u03B7\u03C3\u03AE \u03C3\u03B1\u03C2 \u03C5\u03C0\u03BF\u03B2\u03BB\u03AE\u03B8\u03B7\u03BA\u03B5");
 };

package/core/SummaryList/__snapshots__/index.spec.tsx.snap

@@ -2,56 +2,96 @@
 
 exports[`renders the SummaryList with sample data 1`] = `
 <ForwardRef(SummaryList)>
-  <dl
+  <ForwardRef(Base)
+    as="dl"
     className="govgr-summary-list"
   >
-    <ForwardRef(SummaryListItem)>
-      <div
-        className="govgr-summary-list__row"
-      >
-        <ForwardRef(SummaryListItemKey)>
-          <dt
-            className="govgr-summary-list__key"
+    <dl
+      className="govgr-summary-list"
+    >
+      <ForwardRef(SummaryListItem)>
+        <ForwardRef(Base)
+          as="div"
+          className="govgr-summary-list__row"
+        >
+          <div
+            className="govgr-summary-list__row"
           >
-            Όνομα
-          </dt>
-        </ForwardRef(SummaryListItemKey)>
-        <ForwardRef(SummaryListItemValue)>
-          <dd
-            className="govgr-summary-list__value"
+            <ForwardRef(SummaryListItemKey)>
+              <ForwardRef(Base)
+                as="dt"
+                className="govgr-summary-list__key"
+              >
+                <dt
+                  className="govgr-summary-list__key"
+                >
+                  Όνομα
+                </dt>
+              </ForwardRef(Base)>
+            </ForwardRef(SummaryListItemKey)>
+            <ForwardRef(SummaryListItemValue)>
+              <ForwardRef(Base)
+                as="dd"
+                className="govgr-summary-list__value"
+              >
+                <dd
+                  className="govgr-summary-list__value"
+                >
+                   Μάριος
+                </dd>
+              </ForwardRef(Base)>
+            </ForwardRef(SummaryListItemValue)>
+            <ForwardRef(SummaryListItemAction)>
+              <ForwardRef(Base)
+                as="dd"
+                className="govgr-summary-list__actions"
+              >
+                <dd
+                  className="govgr-summary-list__actions"
+                >
+                   Αλλαγή
+                </dd>
+              </ForwardRef(Base)>
+            </ForwardRef(SummaryListItemAction)>
+          </div>
+        </ForwardRef(Base)>
+      </ForwardRef(SummaryListItem)>
+      <ForwardRef(SummaryListItem)>
+        <ForwardRef(Base)
+          as="div"
+          className="govgr-summary-list__row"
+        >
+          <div
+            className="govgr-summary-list__row"
           >
-             Μάριος
-          </dd>
-        </ForwardRef(SummaryListItemValue)>
-        <ForwardRef(SummaryListItemAction)>
-          <dd
-            className="govgr-summary-list__actions"
-          >
-             Αλλαγή
-          </dd>
-        </ForwardRef(SummaryListItemAction)>
-      </div>
-    </ForwardRef(SummaryListItem)>
-    <ForwardRef(SummaryListItem)>
-      <div
-        className="govgr-summary-list__row"
-      >
-        <ForwardRef(SummaryListItemKey)>
-          <dt
-            className="govgr-summary-list__key"
-          >
-            Επώνυμο
-          </dt>
-        </ForwardRef(SummaryListItemKey)>
-        <ForwardRef(SummaryListItemValue)>
-          <dd
-            className="govgr-summary-list__value"
-          >
-            Μενεξές
-          </dd>
-        </ForwardRef(SummaryListItemValue)>
-      </div>
-    </ForwardRef(SummaryListItem)>
-  </dl>
+            <ForwardRef(SummaryListItemKey)>
+              <ForwardRef(Base)
+                as="dt"
+                className="govgr-summary-list__key"
+              >
+                <dt
+                  className="govgr-summary-list__key"
+                >
+                  Επώνυμο
+                </dt>
+              </ForwardRef(Base)>
+            </ForwardRef(SummaryListItemKey)>
+            <ForwardRef(SummaryListItemValue)>
+              <ForwardRef(Base)
+                as="dd"
+                className="govgr-summary-list__value"
+              >
+                <dd
+                  className="govgr-summary-list__value"
+                >
+                  Μενεξές
+                </dd>
+              </ForwardRef(Base)>
+            </ForwardRef(SummaryListItemValue)>
+          </div>
+        </ForwardRef(Base)>
+      </ForwardRef(SummaryListItem)>
+    </dl>
+  </ForwardRef(Base)>
 </ForwardRef(SummaryList)>
 `;

package/core/SvgIcon/index.d.ts

@@ -6,5 +6,6 @@ export * from '@digigov/react-core/CheckIcon';
 export * from '@digigov/react-core/CloseIcon';
 export * from '@digigov/react-core/MoreVertIcon';
 export * from '@digigov/react-core/BurgerIcon';
+export * from '@digigov/react-core/GlobeIcon';
 import SvgIcon from '@digigov/react-core/SvgIcon';
 export default SvgIcon;

package/core/SvgIcon/index.js

@@ -120,6 +120,20 @@ Object.keys(_BurgerIcon).forEach(function (key) {
   });
 });
 
+var _GlobeIcon = require("@digigov/react-core/GlobeIcon");
+
+Object.keys(_GlobeIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GlobeIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _GlobeIcon[key];
+    }
+  });
+});
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/core/WarningText/__snapshots__/index.spec.tsx.snap

@@ -1,336 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the WarningText with sample data 1`] = `
-<ThemeProvider
-  theme={
-    Object {
-      "breakpoints": Object {
-        "between": [Function],
-        "down": [Function],
-        "keys": Array [
-          "xs",
-          "sm",
-          "md",
-          "lg",
-          "xl",
-        ],
-        "only": [Function],
-        "up": [Function],
-        "values": Object {
-          "lg": 1280,
-          "md": 960,
-          "sm": 600,
-          "xl": 1920,
-          "xs": 0,
-        },
-        "width": [Function],
-      },
-      "direction": "ltr",
-      "footer": Object {
-        "contrastText": "",
-        "link": "",
-        "main": "",
-      },
-      "header": Object {
-        "border": Object {
-          "background": "",
-          "height": "",
-          "width": "",
-        },
-        "height": "",
-        "logo": Object {
-          "component": "",
-          "height": "",
-        },
-      },
-      "mixins": Object {
-        "gutters": [Function],
-        "toolbar": Object {
-          "@media (min-width:0px) and (orientation: landscape)": Object {
-            "minHeight": 48,
-          },
-          "@media (min-width:600px)": Object {
-            "minHeight": 64,
-          },
-          "minHeight": 56,
-        },
-      },
-      "overrides": Object {},
-      "palette": Object {
-        "action": Object {
-          "activatedOpacity": 0.12,
-          "active": "rgba(0, 0, 0, 0.54)",
-          "disabled": "rgba(0, 0, 0, 0.26)",
-          "disabledBackground": "rgba(0, 0, 0, 0.12)",
-          "disabledOpacity": 0.38,
-          "focus": "rgba(0, 0, 0, 0.12)",
-          "focusOpacity": 0.12,
-          "hover": "rgba(0, 0, 0, 0.04)",
-          "hoverOpacity": 0.04,
-          "selected": "rgba(0, 0, 0, 0.08)",
-          "selectedOpacity": 0.08,
-        },
-        "augmentColor": [Function],
-        "background": Object {
-          "default": "#fafafa",
-          "paper": "#fff",
-        },
-        "common": Object {
-          "black": "#000",
-          "white": "#fff",
-        },
-        "contrastThreshold": 3,
-        "divider": "rgba(0, 0, 0, 0.12)",
-        "error": Object {
-          "contrastText": "#fff",
-          "dark": "#d32f2f",
-          "light": "#e57373",
-          "main": "#f44336",
-        },
-        "getContrastText": [Function],
-        "grey": Object {
-          "100": "#f5f5f5",
-          "200": "#eeeeee",
-          "300": "#e0e0e0",
-          "400": "#bdbdbd",
-          "50": "#fafafa",
-          "500": "#9e9e9e",
-          "600": "#757575",
-          "700": "#616161",
-          "800": "#424242",
-          "900": "#212121",
-          "A100": "#d5d5d5",
-          "A200": "#aaaaaa",
-          "A400": "#303030",
-          "A700": "#616161",
-        },
-        "info": Object {
-          "contrastText": "#fff",
-          "dark": "#1976d2",
-          "light": "#64b5f6",
-          "main": "#2196f3",
-        },
-        "primary": Object {
-          "contrastText": "#fff",
-          "dark": "#303f9f",
-          "light": "#7986cb",
-          "main": "#3f51b5",
-        },
-        "secondary": Object {
-          "contrastText": "#fff",
-          "dark": "#c51162",
-          "light": "#ff4081",
-          "main": "#f50057",
-        },
-        "success": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "#388e3c",
-          "light": "#81c784",
-          "main": "#4caf50",
-        },
-        "text": Object {
-          "disabled": "rgba(0, 0, 0, 0.38)",
-          "hint": "rgba(0, 0, 0, 0.38)",
-          "primary": "rgba(0, 0, 0, 0.87)",
-          "secondary": "rgba(0, 0, 0, 0.54)",
-        },
-        "tonalOffset": 0.2,
-        "type": "light",
-        "warning": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "#f57c00",
-          "light": "#ffb74d",
-          "main": "#ff9800",
-        },
-      },
-      "props": Object {},
-      "shadows": Array [
-        "none",
-        "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-        "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-        "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-        "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-        "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-        "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-        "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-        "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-        "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-        "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-        "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-        "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-        "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-        "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-        "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-        "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-        "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-        "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-      ],
-      "shape": Object {
-        "borderRadius": 4,
-      },
-      "spacing": [Function],
-      "transitions": Object {
-        "create": [Function],
-        "duration": Object {
-          "complex": 375,
-          "enteringScreen": 225,
-          "leavingScreen": 195,
-          "short": 250,
-          "shorter": 200,
-          "shortest": 150,
-          "standard": 300,
-        },
-        "easing": Object {
-          "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-          "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-          "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-          "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-        },
-        "getAutoHeightDuration": [Function],
-      },
-      "typography": Object {
-        "body1": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.00938em",
-          "lineHeight": 1.5,
-        },
-        "body2": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.875rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.01071em",
-          "lineHeight": 1.43,
-        },
-        "button": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.875rem",
-          "fontWeight": 500,
-          "letterSpacing": "0.02857em",
-          "lineHeight": 1.75,
-          "textTransform": "uppercase",
-        },
-        "caption": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.75rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.03333em",
-          "lineHeight": 1.66,
-        },
-        "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-        "fontSize": 14,
-        "fontWeightBold": 700,
-        "fontWeightLight": 300,
-        "fontWeightMedium": 500,
-        "fontWeightRegular": 400,
-        "h1": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "6rem",
-          "fontWeight": 300,
-          "letterSpacing": "-0.01562em",
-          "lineHeight": 1.167,
-        },
-        "h2": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "3.75rem",
-          "fontWeight": 300,
-          "letterSpacing": "-0.00833em",
-          "lineHeight": 1.2,
-        },
-        "h3": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "3rem",
-          "fontWeight": 400,
-          "letterSpacing": "0em",
-          "lineHeight": 1.167,
-        },
-        "h4": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "2.125rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.00735em",
-          "lineHeight": 1.235,
-        },
-        "h5": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1.5rem",
-          "fontWeight": 400,
-          "letterSpacing": "0em",
-          "lineHeight": 1.334,
-        },
-        "h6": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1.25rem",
-          "fontWeight": 500,
-          "letterSpacing": "0.0075em",
-          "lineHeight": 1.6,
-        },
-        "htmlFontSize": 16,
-        "overline": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.75rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.08333em",
-          "lineHeight": 2.66,
-          "textTransform": "uppercase",
-        },
-        "pxToRem": [Function],
-        "round": [Function],
-        "subtitle1": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.00938em",
-          "lineHeight": 1.75,
-        },
-        "subtitle2": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.875rem",
-          "fontWeight": 500,
-          "letterSpacing": "0.00714em",
-          "lineHeight": 1.57,
-        },
-      },
-      "zIndex": Object {
-        "appBar": 1100,
-        "drawer": 1200,
-        "mobileStepper": 1000,
-        "modal": 1300,
-        "snackbar": 1400,
-        "speedDial": 1050,
-        "tooltip": 1500,
-      },
-      Symbol(mui.nested): false,
-    }
-  }
->
-  <ForwardRef(WarningText)>
-    <div
-      className="govgr-warning-text"
-    >
-      <span
-        className="govgr-warning-text__icon"
-      >
-        !
-      </span>
-      <strong
-        className="govgr-warning-text__text"
-      >
-        <span
-          className="govgr-warning-text__assistive"
-        >
-          Προσοχή
-        </span>
-        this is some random warning text
-      </strong>
-    </div>
-  </ForwardRef(WarningText)>
-</ThemeProvider>
+<ForwardRef(WarningText)>
+  this is some random warning text
+</ForwardRef(WarningText)>
 `;

package/es/admin/Drawer/__stories__/Default.js

@@ -1,9 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
 import { Drawer } from '@digigov/ui/admin/Drawer';
-import { NavList, NavListItem } from '@digigov/ui/core/NavList';
+import { isNavListItemLinkInterface, NavListAuto, NavListItem, NavMenu, NavMenuContainer, NavMenuContainerContent, NavMenuContainerContentList, NavMenuContainerContentListItem, NavMenuContainerTitle } from '@digigov/ui/core/NavList';
+import { useNavList } from "@digigov/ui/hooks/useNavList";
 import { Title } from '@digigov/ui/typography/Title';
 import { DrawerHeading } from '@digigov/ui/admin/Drawer';
+import { Link } from '@digigov/ui/core';
 
 function useDrawer() {
   var _useState = useState(true),
@@ -59,6 +62,15 @@ export var Default = function Default() {
       open = _useDrawer2[0],
       toggleDrawer = _useDrawer2[1];
 
+  var _useNavList = useNavList(),
+      container = _useNavList.container,
+      register = _useNavList.register;
+
+  var setRegister = function setRegister(name) {
+    return _extends({}, register(name));
+  };
+
+  var layout = 'vertical';
   return /*#__PURE__*/React.createElement(Drawer, {
     direction: "left",
     open: open
@@ -66,18 +78,37 @@ export var Default = function Default() {
     onClick: function onClick() {
       return toggleDrawer();
     }
-  }, _ref), /*#__PURE__*/React.createElement(NavList, {
+  }, _ref), /*#__PURE__*/React.createElement(NavListAuto, {
+    layout: layout,
     links: links,
     "aria-label": "Nav list",
     role: "menu"
-  }, links.map(function (link, key) {
-    return /*#__PURE__*/React.createElement(NavListItem, {
-      key: key,
-      name: link.name,
-      "aria-label": link.label,
-      role: "menuitem",
-      "aria-haspopup": link.subMenu ? 'true' : 'false'
-    });
+  }, links.map(function (item, key) {
+    var _item$subMenu;
+
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: key
+    }, /*#__PURE__*/React.createElement(NavListItem, {
+      layout: layout,
+      link: item,
+      setRegister: setRegister
+    }), /*#__PURE__*/React.createElement(NavMenu, _extends({
+      layout: layout
+    }, container(item.name)), /*#__PURE__*/React.createElement(NavMenuContainer, {
+      layout: layout,
+      paddingLeft: 5,
+      paddingRight: 5
+    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, {
+      layout: layout
+    }, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
+      layout: layout
+    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+      return isNavListItemLinkInterface(subMenu) && /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
+        key: menuIndex
+      }, /*#__PURE__*/React.createElement(Link, {
+        href: subMenu.href
+      }, subMenu.label));
+    }))))));
   })));
 };
 export default Default;

package/es/app/BottomInfoContainer/index.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import React from 'react';
+import Container from '@digigov/react-core/Container';
+
+/**
+ * Bottom BottomInfoContainer is used inside the Bottom component and it must be the first component in order.
+ */
+export var BottomInfoContainer = /*#__PURE__*/React.forwardRef(function BottomInfoContainer(_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    ref: ref,
+    className: "govgr-bottom-info__container"
+  }, props), children);
+});
+export default BottomInfoContainer;

package/es/app/BottomInfoContent/index.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "xs", "md", "lg", "xl", "children"];
+import React from 'react';
+import Grid from '@digigov/react-core/Grid';
+
+/**
+ * BottomInfoContent is used inside the BottomInfoContainer component.
+ */
+export var BottomInfoContent = /*#__PURE__*/React.forwardRef(function BottomInfoContent(_ref, ref) {
+  var className = _ref.className,
+      _ref$xs = _ref.xs,
+      xs = _ref$xs === void 0 ? 3 : _ref$xs,
+      _ref$md = _ref.md,
+      md = _ref$md === void 0 ? 3 : _ref$md,
+      _ref$lg = _ref.lg,
+      lg = _ref$lg === void 0 ? 3 : _ref$lg,
+      _ref$xl = _ref.xl,
+      xl = _ref$xl === void 0 ? 3 : _ref$xl,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Grid, _extends({
+    item: true,
+    xs: xs,
+    md: md,
+    lg: lg,
+    xl: xl,
+    ref: ref,
+    className: "govgr-bottom-info__content"
+  }, props), children);
+});
+export default BottomInfoContent;