@digigov/react-core 0.18.1 → 0.19.0

package/NavMenuContainerTitle/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/NavMenuContainerTitle/index.test.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _NavMenuContainerTitle = _interopRequireDefault(require("@digigov/react-core/NavMenuContainerTitle"));
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_NavMenuContainerTitle["default"], null, "hello");
+
+it('renders the NavMenuContainerTitle with no props', function () {
+  expect((0, _enzyme.mount)(_ref)).toMatchSnapshot();
+});

package/README.md

@@ -1,10 +0,0 @@
-
-Test lalalal
-lal
-lel
-
-# Markdown 
-
-- list
-- listes
-- kallistes

package/es/Base/index.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["as", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "printHidden", "children", "className"];
+var _excluded = ["as", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "printHidden", "printVisible", "children", "className"];
 import React from 'react';
 import clsx from 'clsx';
 
-function calculateClasses(margin, marginTop, marginBottom, marginRight, marginLeft, padding, paddingTop, paddingBottom, paddingRight, paddingLeft, printHidden) {
+function calculateClasses(margin, marginTop, marginBottom, marginRight, marginLeft, padding, paddingTop, paddingBottom, paddingRight, paddingLeft, printHidden, printVisible) {
   var classList = {};
 
-  for (var i = 0; i < 9; i++) {
+  for (var i = 0; i <= 12; i++) {
     classList["govgr-m-".concat(i)] = margin === i;
     classList["govgr-mt-".concat(i)] = marginTop === i;
     classList["govgr-mb-".concat(i)] = marginBottom === i;
@@ -21,6 +21,8 @@ function calculateClasses(margin, marginTop, marginBottom, marginRight, marginLe
   }
 
   classList['govgr-print-hidden'] = !!printHidden;
+  classList['govgr-print-visible-block'] = printVisible === "block";
+  classList['govgr-print-visible-inline'] = printVisible === "inline";
   return classList;
 }
 
@@ -37,6 +39,7 @@ export var Base = /*#__PURE__*/React.forwardRef(function Base(_ref, ref) {
       paddingLeft = _ref.paddingLeft,
       paddingRight = _ref.paddingRight,
       printHidden = _ref.printHidden,
+      printVisible = _ref.printVisible,
       children = _ref.children,
       className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -44,7 +47,7 @@ export var Base = /*#__PURE__*/React.forwardRef(function Base(_ref, ref) {
   var Component = as || 'span';
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
-    className: clsx(className, calculateClasses(margin, marginTop, marginBottom, marginRight, marginLeft, padding, paddingTop, paddingBottom, paddingRight, paddingLeft, printHidden))
+    className: clsx(className, calculateClasses(margin, marginTop, marginBottom, marginRight, marginLeft, padding, paddingTop, paddingBottom, paddingRight, paddingLeft, printHidden, printVisible))
   }, props), children);
 });
 export default Base;

package/es/Container/index.js

@@ -21,9 +21,9 @@ export var Container = /*#__PURE__*/React.forwardRef(function Container(_ref, re
     as: "div",
     ref: ref,
     className: clsx(className, !fullWidth && 'govgr-width-container', fullWidth && 'govgr-full-width-container')
-  }, props), /*#__PURE__*/React.createElement(Base, _extends({
+  }, props), /*#__PURE__*/React.createElement(Base, {
     as: "div",
     className: clsx(cols && 'govgr-main-wrapper')
-  }, props), children));
+  }, children));
 });
 export default Container;

package/es/Header/__snapshots__/index.test.tsx.snap

@@ -5,12 +5,10 @@ exports[`renders the Header with no props 1`] = `
   <ForwardRef(Base)
     as="header"
     className="govgr-header"
-    data-module="govgr-header"
     role="banner"
   >
     <header
       className="govgr-header"
-      data-module="govgr-header"
       role="banner"
     >
       hello

package/es/Header/index.js

@@ -17,7 +17,6 @@ export var Header = /*#__PURE__*/React.forwardRef(function Header(_ref, ref) {
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "header",
     role: "banner",
-    "data-module": "govgr-header",
     ref: ref,
     className: clsx(className, true && 'govgr-header')
   }, props), children);

package/es/HeaderNavMenuContent/__snapshots__/index.test.tsx.snap

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

package/es/HeaderNavMenuContent/index.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import React from 'react';
+import Base from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+/**
+ *  Use HeaderMenuContent inside HeaderSection as a wrapper for the header items(eg HeaderTitle, HeaderLog,
+ *  NavHorizontaList, SVG-icons  etc).
+ *  HeaderMenuContent must only used when we use NavHorizontaList menu.
+ */
+export var HeaderNavMenuContent = /*#__PURE__*/React.forwardRef(function HeaderNavMenuContent(_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Base, _extends({
+    as: "div",
+    ref: ref,
+    className: clsx(className, true && 'govgr-header-nav-menu__content')
+  }, props), children);
+});
+export default HeaderNavMenuContent;

package/es/HeaderNavMenuContent/index.test.js

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

package/es/NavHorizontal/__snapshots__/index.test.tsx.snap

@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the NavHorizontal with active=false 1`] = `
-<ForwardRef(NavHorizontal)
-  active={false}
->
+exports[`renders the NavHorizontal with no props 1`] = `
+<ForwardRef(NavHorizontal)>
   <ForwardRef(Base)
     as="nav"
     className="govgr-horizontal-nav"
@@ -17,31 +15,16 @@ exports[`renders the NavHorizontal with active=false 1`] = `
 </ForwardRef(NavHorizontal)>
 `;
 
-exports[`renders the NavHorizontal with active=true 1`] = `
+exports[`renders the NavHorizontal with open prop 1`] = `
 <ForwardRef(NavHorizontal)
-  active={true}
+  open={true}
 >
   <ForwardRef(Base)
     as="nav"
-    className="govgr-horizontal-nav--active govgr-horizontal-nav"
+    className="govgr-horizontal-nav govgr-horizontal-nav--open"
   >
     <nav
-      className="govgr-horizontal-nav--active govgr-horizontal-nav"
-    >
-      hello
-    </nav>
-  </ForwardRef(Base)>
-</ForwardRef(NavHorizontal)>
-`;
-
-exports[`renders the NavHorizontal with no props 1`] = `
-<ForwardRef(NavHorizontal)>
-  <ForwardRef(Base)
-    as="nav"
-    className="govgr-horizontal-nav"
-  >
-    <nav
-      className="govgr-horizontal-nav"
+      className="govgr-horizontal-nav govgr-horizontal-nav--open"
     >
       hello
     </nav>

package/es/NavHorizontal/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["active", "className", "children"];
+var _excluded = ["className", "open", "children"];
 import React from 'react';
 import Base from '@digigov/react-core/Base';
 import clsx from 'clsx';
@@ -10,15 +10,16 @@ import clsx from 'clsx';
  * This is a wrapper for the NavHorizontalList component.
  */
 export var NavHorizontal = /*#__PURE__*/React.forwardRef(function NavHorizontal(_ref, ref) {
-  var active = _ref.active,
-      className = _ref.className,
+  var className = _ref.className,
+      _ref$open = _ref.open,
+      open = _ref$open === void 0 ? false : _ref$open,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "nav",
     ref: ref,
-    className: clsx(className, active === true && 'govgr-horizontal-nav--active', true && 'govgr-horizontal-nav')
+    className: clsx(className, true && 'govgr-horizontal-nav', open && 'govgr-horizontal-nav--open')
   }, props), children);
 });
 export default NavHorizontal;

package/es/NavHorizontal/index.test.js

@@ -9,17 +9,9 @@ it('renders the NavHorizontal with no props', function () {
 });
 
 var _ref2 = /*#__PURE__*/React.createElement(NavHorizontal, {
-  active: true
+  open: true
 }, "hello");
 
-it('renders the NavHorizontal with active=true', function () {
+it('renders the NavHorizontal with open prop', function () {
   expect(mount(_ref2)).toMatchSnapshot();
-});
-
-var _ref3 = /*#__PURE__*/React.createElement(NavHorizontal, {
-  active: false
-}, "hello");
-
-it('renders the NavHorizontal with active=false', function () {
-  expect(mount(_ref3)).toMatchSnapshot();
 });

package/es/NavHorizontalList/__snapshots__/index.test.tsx.snap

@@ -1,16 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the NavHorizontalList with active prop 1`] = `
+<ForwardRef(NavHorizontalList)
+  active={true}
+>
+  <ForwardRef(Base)
+    as="ul"
+    className="govgr-horizontal-nav__list--active govgr-horizontal-nav__list"
+  >
+    <ul
+      className="govgr-horizontal-nav__list--active govgr-horizontal-nav__list"
+    >
+      hello
+    </ul>
+  </ForwardRef(Base)>
+</ForwardRef(NavHorizontalList)>
+`;
+
 exports[`renders the NavHorizontalList with no props 1`] = `
 <ForwardRef(NavHorizontalList)>
   <ForwardRef(Base)
-    as="div"
-    className="govgr-horizontal-nav__container"
+    as="ul"
+    className="govgr-horizontal-nav__list"
   >
-    <div
-      className="govgr-horizontal-nav__container"
+    <ul
+      className="govgr-horizontal-nav__list"
     >
       hello
-    </div>
+    </ul>
   </ForwardRef(Base)>
 </ForwardRef(NavHorizontalList)>
 `;

package/es/NavHorizontalList/index.js

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

package/es/NavHorizontalList/index.test.js

@@ -6,4 +6,12 @@ var _ref = /*#__PURE__*/React.createElement(NavHorizontalList, null, "hello");
 
 it('renders the NavHorizontalList with no props', function () {
   expect(mount(_ref)).toMatchSnapshot();
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(NavHorizontalList, {
+  active: true
+}, "hello");
+
+it('renders the NavHorizontalList with active prop', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
 });

package/es/NavHorizontalListItem/__snapshots__/index.test.tsx.snap

@@ -1,96 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the NavHorizontalListItem with active=false 1`] = `
-<ForwardRef(NavHorizontalListItem)
-  active={false}
->
-  <ForwardRef(Base)
-    as="a"
-    className="govgr-horizontal-nav__item"
-    href="/"
-  >
-    <a
-      className="govgr-horizontal-nav__item"
-      href="/"
-    >
-      hello
-    </a>
-  </ForwardRef(Base)>
-</ForwardRef(NavHorizontalListItem)>
-`;
-
-exports[`renders the NavHorizontalListItem with active=true 1`] = `
-<ForwardRef(NavHorizontalListItem)
-  active={true}
->
-  <ForwardRef(Base)
-    as="a"
-    className="govgr-horizontal-nav__item-active govgr-horizontal-nav__item"
-    href="/"
-  >
-    <a
-      className="govgr-horizontal-nav__item-active govgr-horizontal-nav__item"
-      href="/"
-    >
-      hello
-    </a>
-  </ForwardRef(Base)>
-</ForwardRef(NavHorizontalListItem)>
-`;
-
-exports[`renders the NavHorizontalListItem with href and active=false 1`] = `
-<ForwardRef(NavHorizontalListItem)
-  active={false}
-  href="/"
->
-  <ForwardRef(Base)
-    as="a"
-    className="govgr-horizontal-nav__item"
-    href="/"
-  >
-    <a
-      className="govgr-horizontal-nav__item"
-      href="/"
-    >
-      hello
-    </a>
-  </ForwardRef(Base)>
-</ForwardRef(NavHorizontalListItem)>
-`;
-
-exports[`renders the NavHorizontalListItem with href and active=true 1`] = `
-<ForwardRef(NavHorizontalListItem)
-  active={false}
-  href="/"
->
-  <ForwardRef(Base)
-    as="a"
-    className="govgr-horizontal-nav__item"
-    href="/"
-  >
-    <a
-      className="govgr-horizontal-nav__item"
-      href="/"
-    >
-      hello
-    </a>
-  </ForwardRef(Base)>
-</ForwardRef(NavHorizontalListItem)>
-`;
-
 exports[`renders the NavHorizontalListItem with no props 1`] = `
-<ForwardRef(NavHorizontalListItem)>
+<ForwardRef(NavHeaderListItem)>
   <ForwardRef(Base)
-    as="a"
-    className="govgr-horizontal-nav__item"
-    href="/"
+    as="li"
+    className="govgr-horizontal-nav__list-item"
   >
-    <a
-      className="govgr-horizontal-nav__item"
-      href="/"
+    <li
+      className="govgr-horizontal-nav__list-item"
     >
       hello
-    </a>
+    </li>
   </ForwardRef(Base)>
-</ForwardRef(NavHorizontalListItem)>
+</ForwardRef(NavHeaderListItem)>
 `;

package/es/NavHorizontalListItem/index.js

@@ -1,26 +1,23 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["active", "href", "className", "children"];
+var _excluded = ["className", "children"];
 import React from 'react';
 import Base from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
 /**
- * NavHorizontalListItem is an <a> element. It should be inside the NavHorizontalList component.
+ * NavHorizontalListItem must be inside the NavHorizontalList.
+ * This component has a items of NavHorizontalListItemLink component inside.
  */
-export var NavHorizontalListItem = /*#__PURE__*/React.forwardRef(function NavHorizontalListItem(_ref, ref) {
-  var active = _ref.active,
-      _ref$href = _ref.href,
-      href = _ref$href === void 0 ? '/' : _ref$href,
-      className = _ref.className,
+export var NavHorizontalListItem = /*#__PURE__*/React.forwardRef(function NavHeaderListItem(_ref, ref) {
+  var className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "a",
-    href: href,
+    as: "li",
     ref: ref,
-    className: clsx(className, active === true && 'govgr-horizontal-nav__item-active', true && 'govgr-horizontal-nav__item')
+    className: clsx(className, true && 'govgr-horizontal-nav__list-item')
   }, props), children);
 });
 export default NavHorizontalListItem;

package/es/NavHorizontalListItem/index.test.js

@@ -6,38 +6,4 @@ var _ref = /*#__PURE__*/React.createElement(NavHorizontalListItem, null, "hello"
 
 it('renders the NavHorizontalListItem with no props', function () {
   expect(mount(_ref)).toMatchSnapshot();
-});
-
-var _ref2 = /*#__PURE__*/React.createElement(NavHorizontalListItem, {
-  active: true
-}, "hello");
-
-it('renders the NavHorizontalListItem with active=true', function () {
-  expect(mount(_ref2)).toMatchSnapshot();
-});
-
-var _ref3 = /*#__PURE__*/React.createElement(NavHorizontalListItem, {
-  active: false
-}, "hello");
-
-it('renders the NavHorizontalListItem with active=false', function () {
-  expect(mount(_ref3)).toMatchSnapshot();
-});
-
-var _ref4 = /*#__PURE__*/React.createElement(NavHorizontalListItem, {
-  href: "/",
-  active: false
-}, "hello");
-
-it('renders the NavHorizontalListItem with href and active=false', function () {
-  expect(mount(_ref4)).toMatchSnapshot();
-});
-
-var _ref5 = /*#__PURE__*/React.createElement(NavHorizontalListItem, {
-  href: "/",
-  active: false
-}, "hello");
-
-it('renders the NavHorizontalListItem with href and active=true', function () {
-  expect(mount(_ref5)).toMatchSnapshot();
 });

package/es/NavHorizontalListItemButton/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the NavHorizontalListItemButton with active=true 1`] = `
+<ForwardRef(NavHorizontalListItemButton)
+  active={true}
+>
+  <ForwardRef(Button)
+    className="govgr-horizontal-nav__list-item-btn--active govgr-horizontal-nav__list-item-btn"
+    variant="link"
+  >
+    <ForwardRef(Base)
+      as="button"
+      className="govgr-horizontal-nav__list-item-btn--active govgr-horizontal-nav__list-item-btn govgr-link"
+      printHidden={true}
+    >
+      <button
+        className="govgr-horizontal-nav__list-item-btn--active govgr-horizontal-nav__list-item-btn govgr-link govgr-print-hidden"
+      >
+        hello
+        <ForwardRef(ArrowIcon)
+          direction="up"
+        >
+          <ForwardRef(SvgIcon)
+            className="govgr-arrow--up"
+          >
+            <ForwardRef(Base)
+              aria-hidden="true"
+              as="svg"
+              className="govgr-arrow--up govgr-svg-icon"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <svg
+                aria-hidden="true"
+                className="govgr-arrow--up govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M2,15.8l2.3,2.4l7.7-7.6l7.6,7.6l2.4-2.4l-10-10L2,15.8z"
+                />
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(ArrowIcon)>
+      </button>
+    </ForwardRef(Base)>
+  </ForwardRef(Button)>
+</ForwardRef(NavHorizontalListItemButton)>
+`;
+
+exports[`renders the NavHorizontalListItemButton with no props 1`] = `
+<ForwardRef(NavHorizontalListItemButton)>
+  <ForwardRef(Button)
+    className="govgr-horizontal-nav__list-item-btn"
+    variant="link"
+  >
+    <ForwardRef(Base)
+      as="button"
+      className="govgr-horizontal-nav__list-item-btn govgr-link"
+      printHidden={true}
+    >
+      <button
+        className="govgr-horizontal-nav__list-item-btn govgr-link govgr-print-hidden"
+      >
+        hello
+        <ForwardRef(ArrowIcon)
+          direction="down"
+        >
+          <ForwardRef(SvgIcon)
+            className="govgr-arrow--down"
+          >
+            <ForwardRef(Base)
+              aria-hidden="true"
+              as="svg"
+              className="govgr-arrow--down govgr-svg-icon"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <svg
+                aria-hidden="true"
+                className="govgr-arrow--down govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+                />
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(ArrowIcon)>
+      </button>
+    </ForwardRef(Base)>
+  </ForwardRef(Button)>
+</ForwardRef(NavHorizontalListItemButton)>
+`;
+
+exports[`renders the NavHorizontalListItemLink with active=false 1`] = `
+<ForwardRef(NavHorizontalListItemButton)
+  active={false}
+>
+  <ForwardRef(Button)
+    className="govgr-horizontal-nav__list-item-btn"
+    variant="link"
+  >
+    <ForwardRef(Base)
+      as="button"
+      className="govgr-horizontal-nav__list-item-btn govgr-link"
+      printHidden={true}
+    >
+      <button
+        className="govgr-horizontal-nav__list-item-btn govgr-link govgr-print-hidden"
+      >
+        hello
+        <ForwardRef(ArrowIcon)
+          direction="down"
+        >
+          <ForwardRef(SvgIcon)
+            className="govgr-arrow--down"
+          >
+            <ForwardRef(Base)
+              aria-hidden="true"
+              as="svg"
+              className="govgr-arrow--down govgr-svg-icon"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <svg
+                aria-hidden="true"
+                className="govgr-arrow--down govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+                />
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(ArrowIcon)>
+      </button>
+    </ForwardRef(Base)>
+  </ForwardRef(Button)>
+</ForwardRef(NavHorizontalListItemButton)>
+`;