@digigov/react-core 1.0.0-480e3d97 → 1.0.0-60addd4a

package/esm/Main/__snapshots__/index.test.tsx.snap

@@ -2,17 +2,26 @@
 
 exports[`renders the Main with no props 1`] = `
 <ForwardRef(Main)>
-  <ForwardRef(Base)
+  <ForwardRef(Grid)
     as="main"
-    className="govgr-grid-column-two-thirds"
+    className="govgr-main"
     id="main-content"
+    item={true}
+    md={8}
+    xs={12}
   >
-    <main
-      className="govgr-grid-column-two-thirds"
+    <ForwardRef(Base)
+      as="main"
+      className="govgr-main xs:govgr-grid__col-span-12 md:govgr-grid__col-span-8"
       id="main-content"
     >
-      hello
-    </main>
-  </ForwardRef(Base)>
+      <main
+        className="govgr-main xs:govgr-grid__col-span-12 md:govgr-grid__col-span-8"
+        id="main-content"
+      >
+        hello
+      </main>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Main)>
 `;

package/esm/Main/index.js

@@ -3,10 +3,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["className", "children", "id"];
 import React from 'react';
 import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import Grid from '@digigov/react-core/Grid';
 
 /**
- * Use this inside Content component for placing the main content of the page
+ * Use this inside Container component for placing the main content of the page.
  */
 export var Main = /*#__PURE__*/React.forwardRef(function Main(_ref, ref) {
   var className = _ref.className,
@@ -15,11 +15,14 @@ export var Main = /*#__PURE__*/React.forwardRef(function Main(_ref, ref) {
       id = _ref$id === void 0 ? 'main-content' : _ref$id,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Base, _extends({
+  return /*#__PURE__*/React.createElement(Grid, _extends({
+    item: true,
+    xs: 12,
+    md: 8,
     as: "main",
     id: id,
     ref: ref,
-    className: clsx(className, true && 'govgr-grid-column-two-thirds')
+    className: clsx(className, true && 'govgr-main')
   }, props), children);
 });
 export default Main;

package/esm/ModalHeading/__snapshots__/index.test.tsx.snap

@@ -7,17 +7,23 @@ exports[`renders the ModalHeading with no props 1`] = `
     marginBottom={0}
     size="md"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h2"
       className="govgr-heading-md"
       marginBottom={0}
     >
-      <h2
-        className="govgr-heading-md govgr-mb-0"
+      <ForwardRef(Base)
+        as="h2"
+        className="govgr-heading-md"
+        marginBottom={0}
       >
-        hello
-      </h2>
-    </ForwardRef(Base)>
+        <h2
+          className="govgr-heading-md govgr-mb-0"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(ModalHeading)>
 `;

package/esm/Nav/__snapshots__/index.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the Nav with no props 1`] = `
 <ForwardRef(Nav)>
   <ForwardRef(Base)
     as="nav"
-    className="govgr-nav--horizontal govgr-nav--border govgr-nav--fixed govgr-nav"
+    className="govgr-nav--border govgr-nav--fixed govgr-nav"
   >
     <nav
-      className="govgr-nav--horizontal govgr-nav--border govgr-nav--fixed govgr-nav"
+      className="govgr-nav--border govgr-nav--fixed govgr-nav"
     >
       hello
     </nav>
@@ -21,10 +21,10 @@ exports[`renders the Nav with open prop 1`] = `
 >
   <ForwardRef(Base)
     as="nav"
-    className="govgr-nav--horizontal govgr-nav--border govgr-nav--fixed govgr-nav govgr-nav--open"
+    className="govgr-nav--border govgr-nav--fixed govgr-nav govgr-nav--open"
   >
     <nav
-      className="govgr-nav--horizontal govgr-nav--border govgr-nav--fixed govgr-nav govgr-nav--open"
+      className="govgr-nav--border govgr-nav--fixed govgr-nav govgr-nav--open"
     >
       hello
     </nav>

package/esm/Nav/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "open", "layout", "hidden", "fixed", "border", "children"];
+var _excluded = ["className", "open", "hidden", "fixed", "border", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -13,8 +13,6 @@ export var Nav = /*#__PURE__*/React.forwardRef(function Nav(_ref, ref) {
   var className = _ref.className,
       _ref$open = _ref.open,
       open = _ref$open === void 0 ? false : _ref$open,
-      _ref$layout = _ref.layout,
-      layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
       _ref$hidden = _ref.hidden,
       hidden = _ref$hidden === void 0 ? false : _ref$hidden,
       _ref$fixed = _ref.fixed,
@@ -27,7 +25,7 @@ export var Nav = /*#__PURE__*/React.forwardRef(function Nav(_ref, ref) {
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "nav",
     ref: ref,
-    className: clsx(className, layout === 'horizontal' && 'govgr-nav--horizontal', layout === 'vertical' && 'govgr-nav--vertical', border && 'govgr-nav--border', hidden && 'govgr-nav--hidden', fixed && 'govgr-nav--fixed', true && 'govgr-nav', open && 'govgr-nav--open')
+    className: clsx(className, border && 'govgr-nav--border', hidden && 'govgr-nav--hidden', fixed && 'govgr-nav--fixed', true && 'govgr-nav', open && 'govgr-nav--open')
   }, props), children);
 });
 export default Nav;

package/esm/NavList/__snapshots__/index.test.tsx.snap

@@ -6,10 +6,10 @@ exports[`renders the NavList with active prop 1`] = `
 >
   <ForwardRef(Base)
     as="ul"
-    className="govgr-nav__list--active govgr-nav__list"
+    className="govgr-nav__list--horizontal govgr-nav__list--active govgr-nav__list"
   >
     <ul
-      className="govgr-nav__list--active govgr-nav__list"
+      className="govgr-nav__list--horizontal govgr-nav__list--active govgr-nav__list"
     >
       hello
     </ul>
@@ -21,10 +21,10 @@ exports[`renders the NavList with no props 1`] = `
 <ForwardRef(NavList)>
   <ForwardRef(Base)
     as="ul"
-    className="govgr-nav__list"
+    className="govgr-nav__list--horizontal govgr-nav__list"
   >
     <ul
-      className="govgr-nav__list"
+      className="govgr-nav__list--horizontal govgr-nav__list"
     >
       hello
     </ul>

package/esm/NavList/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "active", "children"];
+var _excluded = ["className", "active", "layout", "fullWidth", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -13,13 +13,16 @@ export var NavList = /*#__PURE__*/React.forwardRef(function NavList(_ref, ref) {
   var className = _ref.className,
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
+      _ref$layout = _ref.layout,
+      layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
+      fullWidth = _ref.fullWidth,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "ul",
     ref: ref,
-    className: clsx(className, active && 'govgr-nav__list--active', true && 'govgr-nav__list')
+    className: clsx(className, layout === 'horizontal' && 'govgr-nav__list--horizontal', layout === 'vertical' && 'govgr-nav__list--vertical', fullWidth && 'govgr-nav__list--full-width', active && 'govgr-nav__list--active', true && 'govgr-nav__list')
   }, props), children);
 });
 export default NavList;

package/esm/NavListItemAction/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the NavListItemActionContainer with no props 1`] = `
+<ForwardRef(NavListItemActionContainer)>
+  <ForwardRef(Base)
+    as="li"
+    className="govgr-nav__list-item"
+  >
+    <li
+      className="govgr-nav__list-item"
+    >
+      hello
+    </li>
+  </ForwardRef(Base)>
+</ForwardRef(NavListItemActionContainer)>
+`;

package/esm/NavListItemAction/index.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import React from 'react';
+import NavListItemLink from '@digigov/react-core/NavListItemLink';
+import NavListItemButton from '@digigov/react-core/NavListItemButton';
+import NavListItemActionContainer from '@digigov/react-core/NavListItemActionContainer';
+;
+/**
+ * NavListItemAction must be inside the NavList.
+ * This component has a items of NavListItemLink component inside.
+ */
+
+export var NavListItemAction = /*#__PURE__*/React.forwardRef(function NavListItemAction(_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(NavListItemActionContainer, null, props.href ? /*#__PURE__*/React.createElement(NavListItemLink, _extends({}, props, {
+    className: className,
+    ref: ref
+  }), children || props.label) : /*#__PURE__*/React.createElement(NavListItemButton, _extends({}, props, {
+    className: className,
+    ref: ref
+  }), children || props.label));
+});
+export default NavListItemAction;

package/esm/NavListItemAction/index.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import NavListItemActionContainer from '@digigov/react-core/NavListItemActionContainer';
+
+var _ref = /*#__PURE__*/React.createElement(NavListItemActionContainer, null, "hello");
+
+it('renders the NavListItemActionContainer with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});

package/esm/NavListItemActionContainer/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the NavListItemActionContainer with no props 1`] = `
+<ForwardRef(NavListItemActionContainer)>
+  <ForwardRef(Base)
+    as="li"
+    className="govgr-nav__list-item"
+  >
+    <li
+      className="govgr-nav__list-item"
+    >
+      hello
+    </li>
+  </ForwardRef(Base)>
+</ForwardRef(NavListItemActionContainer)>
+`;

package/esm/{NavListItem → NavListItemActionContainer}/index.js

@@ -6,10 +6,10 @@ import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
 
 /**
- * NavListItem must be inside the NavList.
+ * NavListItemActionContainer must be inside the NavList.
  * This component has a items of NavListItemLink component inside.
  */
-export var NavListItem = /*#__PURE__*/React.forwardRef(function NavHeaderListItem(_ref, ref) {
+export var NavListItemActionContainer = /*#__PURE__*/React.forwardRef(function NavListItemActionContainer(_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -20,4 +20,4 @@ export var NavListItem = /*#__PURE__*/React.forwardRef(function NavHeaderListIte
     className: clsx(className, true && 'govgr-nav__list-item')
   }, props), children);
 });
-export default NavListItem;
+export default NavListItemActionContainer;

package/esm/NavListItemActionContainer/index.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import NavListItemActionContainer from '@digigov/react-core/NavListItemActionContainer';
+
+var _ref = /*#__PURE__*/React.createElement(NavListItemActionContainer, null, "hello");
+
+it('renders the NavListItemActionContainer with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});

package/esm/NavMenuContainer/__snapshots__/index.test.tsx.snap

@@ -2,28 +2,37 @@
 
 exports[`renders the NavMenuContainer with no props 1`] = `
 <ForwardRef(NavMenuContainer)>
-  <ForwardRef(Container)
-    grid={true}
+  <ForwardRef(Base)
+    aria-hidden={true}
+    as="div"
+    className="govgr-nav-menu--horizontal govgr-nav-menu--hidden govgr-nav-menu"
   >
-    <ForwardRef(Base)
-      as="div"
-      className="govgr-container"
+    <div
+      aria-hidden={true}
+      className="govgr-nav-menu--horizontal govgr-nav-menu--hidden govgr-nav-menu"
     >
-      <div
-        className="govgr-container"
+      <ForwardRef(Container)
+        grid={true}
+        spacing={4}
       >
-        <ForwardRef(Base)
-          as="div"
-          className="govgr-main-wrapper"
+        <ForwardRef(Grid)
+          className="govgr-container"
+          container={true}
+          spacing={4}
         >
-          <div
-            className="govgr-main-wrapper"
+          <ForwardRef(Base)
+            as="div"
+            className="govgr-container govgr-gap-4 govgr-grid"
           >
-            hello
-          </div>
-        </ForwardRef(Base)>
-      </div>
-    </ForwardRef(Base)>
-  </ForwardRef(Container)>
+            <div
+              className="govgr-container govgr-gap-4 govgr-grid"
+            >
+              hello
+            </div>
+          </ForwardRef(Base)>
+        </ForwardRef(Grid)>
+      </ForwardRef(Container)>
+    </div>
+  </ForwardRef(Base)>
 </ForwardRef(NavMenuContainer)>
 `;

package/esm/NavMenuContainer/index.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "layout", "children"];
+var _excluded = ["className", "active", "layout", "children"];
 import React from 'react';
+import Base from '@digigov/react-core/Base';
 import Container from '@digigov/react-core/Container';
+import clsx from 'clsx';
 
 /**
  * NavMenuContainer is the container menu component.
@@ -10,15 +12,22 @@ import Container from '@digigov/react-core/Container';
  */
 export var NavMenuContainer = /*#__PURE__*/React.forwardRef(function NavMenuContainer(_ref, ref) {
   var className = _ref.className,
+      active = _ref.active,
       _ref$layout = _ref.layout,
       layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Container, _extends({
+  return /*#__PURE__*/React.createElement(Base, {
+    as: "div",
+    ref: ref,
+    "aria-hidden": !active,
+    className: clsx(className, layout === 'horizontal' && 'govgr-nav-menu--horizontal', layout === 'vertical' && 'govgr-nav-menu--vertical', !active && 'govgr-nav-menu--hidden', true && 'govgr-nav-menu')
+  }, /*#__PURE__*/React.createElement(Container, _extends({
     grid: layout === 'horizontal',
+    spacing: 4,
     ref: ref,
     className: className
-  }, props), children);
+  }, props), children));
 });
 export default NavMenuContainer;

package/esm/NavMenuContent/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the NavMenuContainerContent with no props 1`] = `
+<ForwardRef(NavMenuContent)>
+  <ForwardRef(Grid)
+    className="govgr-nav-menu__content"
+    item={true}
+    sm={8}
+    spacing={2}
+    xs={12}
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-nav-menu__content xs:govgr-grid__col-span-12 sm:govgr-grid__col-span-8"
+    >
+      <div
+        className="govgr-nav-menu__content xs:govgr-grid__col-span-12 sm:govgr-grid__col-span-8"
+      >
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
+</ForwardRef(NavMenuContent)>
+`;

package/esm/{NavMenuContainerContent → NavMenuContent}/index.js

@@ -3,22 +3,25 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["className", "children"];
 import React from 'react';
 import Grid from '@digigov/react-core/Grid';
+import clsx from 'clsx';
 
 /**
  *
- * NavMenuContainerContent is the content menu component.
- * Inside this component must be NavMenuContainerContentList and NavMenuContainerContentListLink components.
+ * NavMenuContent is the content menu component.
+ * Inside this component must be NavMenuContentList and NavMenuContentListLink components.
  */
-export var NavMenuContainerContent = /*#__PURE__*/React.forwardRef(function NavMenuContainerContent(_ref, ref) {
+export var NavMenuContent = /*#__PURE__*/React.forwardRef(function NavMenuContent(_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Grid, _extends({
     item: true,
-    md: 2,
+    xs: 12,
+    sm: 8,
+    spacing: 2,
     ref: ref,
-    className: className
+    className: clsx(className, true && 'govgr-nav-menu__content')
   }, props), children);
 });
-export default NavMenuContainerContent;
+export default NavMenuContent;

package/{es/NavMenuContainerContent → esm/NavMenuContent}/index.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import NavMenuContainerContent from '@digigov/react-core/NavMenuContainerContent';
+import NavMenuContainerContent from '@digigov/react-core/NavMenuContent';
 
 var _ref = /*#__PURE__*/React.createElement(NavMenuContainerContent, null, "hello");
 

package/{src/NavMenuContainerContentList → esm/NavMenuContentListBase}/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the NavMenuContainerContentList with no props 1`] = `
-<ForwardRef(NavMenuContainerContentList)>
+exports[`renders the NavMenuContentListBase with no props 1`] = `
+<ForwardRef(NavMenuContentListBase)>
   <ForwardRef(Base)
     as="ul"
     className="govgr-nav-menu__content-list"
@@ -12,5 +12,5 @@ exports[`renders the NavMenuContainerContentList with no props 1`] = `
       hello
     </ul>
   </ForwardRef(Base)>
-</ForwardRef(NavMenuContainerContentList)>
+</ForwardRef(NavMenuContentListBase)>
 `;

package/{es/NavMenuContainerContentList → esm/NavMenuContentListBase}/index.js

@@ -6,10 +6,10 @@ import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
 
 /**
- * NavMenuContainerContentList contains the ul list nav menu.
- * Inside this component must be NavMenuContainerContentListItem component.
+ * NavMenuContentListBase contains the ul list nav menu.
+ * Inside this component must be NavMenuContentListItem component.
  */
-export var NavMenuContainerContentList = /*#__PURE__*/React.forwardRef(function NavMenuContainerContentList(_ref, ref) {
+export var NavMenuContentListBase = /*#__PURE__*/React.forwardRef(function NavMenuContentListBase(_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -20,4 +20,4 @@ export var NavMenuContainerContentList = /*#__PURE__*/React.forwardRef(function
     className: clsx(className, true && 'govgr-nav-menu__content-list')
   }, props), children);
 });
-export default NavMenuContainerContentList;
+export default NavMenuContentListBase;

package/esm/NavMenuContentListBase/index.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import NavMenuContentListBase from '@digigov/react-core/NavMenuContentListBase';
+
+var _ref = /*#__PURE__*/React.createElement(NavMenuContentListBase, null, "hello");
+
+it('renders the NavMenuContentListBase with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});

package/{es/NavMenuContainerContentListItem → esm/NavMenuContentListItem}/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the NavMenuContainerContentListItem with no props 1`] = `
-<ForwardRef(NavMenuContainerContentListItem)>
+exports[`renders the NavMenuContentListItem with no props 1`] = `
+<ForwardRef(NavMenuContentListItem)>
   <ForwardRef(Base)
     as="li"
     className="govgr-nav-menu__content-list-item"
@@ -12,5 +12,5 @@ exports[`renders the NavMenuContainerContentListItem with no props 1`] = `
       hello
     </li>
   </ForwardRef(Base)>
-</ForwardRef(NavMenuContainerContentListItem)>
+</ForwardRef(NavMenuContentListItem)>
 `;

package/esm/{NavMenuContainerContentListItem → NavMenuContentListItem}/index.js

@@ -6,10 +6,10 @@ import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
 
 /**
- * NavMenuContainerContentListItem contains all li items nav menu.
+ * NavMenuContentListItem contains all li items nav menu.
  *
  */
-export var NavMenuContainerContentListItem = /*#__PURE__*/React.forwardRef(function NavMenuContainerContentListItem(_ref, ref) {
+export var NavMenuContentListItem = /*#__PURE__*/React.forwardRef(function NavMenuContentListItem(_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -20,4 +20,4 @@ export var NavMenuContainerContentListItem = /*#__PURE__*/React.forwardRef(funct
     className: clsx(className, true && 'govgr-nav-menu__content-list-item')
   }, props), children);
 });
-export default NavMenuContainerContentListItem;
+export default NavMenuContentListItem;

package/esm/NavMenuContentListItem/index.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import NavMenuContentListItem from '@digigov/react-core/NavMenuContentListItem';
+
+var _ref = /*#__PURE__*/React.createElement(NavMenuContentListItem, null, "hello");
+
+it('renders the NavMenuContentListItem with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});

package/esm/NavMenuTitle/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the NavMenuTitle with no props 1`] = `
+<ForwardRef(NavMenuTitle)>
+  <ForwardRef(Grid)
+    className="govgr-nav-menu__title"
+    item={true}
+    sm={4}
+    xs={12}
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-nav-menu__title xs:govgr-grid__col-span-12 sm:govgr-grid__col-span-4"
+    >
+      <div
+        className="govgr-nav-menu__title xs:govgr-grid__col-span-12 sm:govgr-grid__col-span-4"
+      >
+        <ForwardRef(Heading)
+          className="govgr-nav-menu__title-heading"
+          element="h3"
+          size="md"
+        >
+          <ForwardRef(Typography)
+            as="h3"
+            className="govgr-nav-menu__title-heading govgr-heading-md"
+          >
+            <ForwardRef(Base)
+              as="h3"
+              className="govgr-nav-menu__title-heading govgr-heading-md"
+            >
+              <h3
+                className="govgr-nav-menu__title-heading govgr-heading-md"
+              >
+                hello
+              </h3>
+            </ForwardRef(Base)>
+          </ForwardRef(Typography)>
+        </ForwardRef(Heading)>
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
+</ForwardRef(NavMenuTitle)>
+`;

package/esm/{NavMenuContainerTitle → NavMenuTitle}/index.js

@@ -8,23 +8,24 @@ import Heading from '@digigov/react-core/Heading';
 
 /**
  *
- * NavMenuContainerTitle is the main Title for the nav list items.
- * NavMenuContainerTitle  must be inside NavMenuContainer component.
+ * NavMenuTitle is the main Title for the nav list items.
+ * NavMenuTitle  must be inside NavMenuContainer component.
  */
-export var NavMenuContainerTitle = /*#__PURE__*/React.forwardRef(function NavMenuContainerTitle(_ref, ref) {
+export var NavMenuTitle = /*#__PURE__*/React.forwardRef(function NavMenuTitle(_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Grid, _extends({
     item: true,
-    md: 1,
+    xs: 12,
+    sm: 4,
     ref: ref,
-    className: clsx(className, true && 'govgr-nav-menu__container-title')
+    className: clsx(className, true && 'govgr-nav-menu__title')
   }, props), /*#__PURE__*/React.createElement(Heading, {
     element: "h3",
     size: "md",
-    className: clsx(true && 'govgr-nav-menu__container-title-heading')
+    className: clsx(true && 'govgr-nav-menu__title-heading')
   }, children));
 });
-export default NavMenuContainerTitle;
+export default NavMenuTitle;

package/esm/NavMenuTitle/index.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import NavMenuTitle from '@digigov/react-core/NavMenuTitle';
+
+var _ref = /*#__PURE__*/React.createElement(NavMenuTitle, null, "hello");
+
+it('renders the NavMenuTitle with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});