@digigov/react-core 0.22.1 → 0.23.0

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

@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the SingleCharacterInputItem with maxLength prop 1`] = `
+<ForwardRef(SingleCharacterInputItem)
+  maxLength={6}
+>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+    inputMode="numeric"
+    maxLength={6}
+    pattern="[0-9]*"
+    type="text"
+  >
+    <input
+      className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+      inputMode="numeric"
+      maxLength={6}
+      pattern="[0-9]*"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SingleCharacterInputItem)>
+`;
+
+exports[`renders the SingleCharacterInputItem with name and error props 1`] = `
+<ForwardRef(SingleCharacterInputItem)
+  error={true}
+  name="single-character-input"
+>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-error-input govgr-otp-input__item govgr-input govgr-otp-input--width"
+    inputMode="numeric"
+    maxLength={1}
+    name="single-character-input"
+    pattern="[0-9]*"
+    type="text"
+  >
+    <input
+      className="govgr-error-input govgr-otp-input__item govgr-input govgr-otp-input--width"
+      inputMode="numeric"
+      maxLength={1}
+      name="single-character-input"
+      pattern="[0-9]*"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SingleCharacterInputItem)>
+`;
+
+exports[`renders the SingleCharacterInputItem with name and error props 2`] = `
+<ForwardRef(SingleCharacterInputItem)
+  error={true}
+  name="single-character-input"
+>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-error-input govgr-otp-input__item govgr-input govgr-otp-input--width"
+    inputMode="numeric"
+    maxLength={1}
+    name="single-character-input"
+    pattern="[0-9]*"
+    type="text"
+  >
+    <input
+      className="govgr-error-input govgr-otp-input__item govgr-input govgr-otp-input--width"
+      inputMode="numeric"
+      maxLength={1}
+      name="single-character-input"
+      pattern="[0-9]*"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SingleCharacterInputItem)>
+`;
+
+exports[`renders the SingleCharacterInputItem with name prop 1`] = `
+<ForwardRef(SingleCharacterInputItem)
+  name="single-character-input"
+>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+    inputMode="numeric"
+    maxLength={1}
+    name="single-character-input"
+    pattern="[0-9]*"
+    type="text"
+  >
+    <input
+      className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+      inputMode="numeric"
+      maxLength={1}
+      name="single-character-input"
+      pattern="[0-9]*"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SingleCharacterInputItem)>
+`;
+
+exports[`renders the SingleCharacterInputItem with name, pattern, maxLength and error props 1`] = `
+<ForwardRef(SingleCharacterInputItem)
+  error={true}
+  maxLength={6}
+  name="single-character-input"
+  pattern="\\\\d{1}"
+>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-error-input govgr-otp-input__item govgr-input govgr-otp-input--width"
+    inputMode="numeric"
+    maxLength={6}
+    name="single-character-input"
+    pattern="\\\\d{1}"
+    type="text"
+  >
+    <input
+      className="govgr-error-input govgr-otp-input__item govgr-input govgr-otp-input--width"
+      inputMode="numeric"
+      maxLength={6}
+      name="single-character-input"
+      pattern="\\\\d{1}"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SingleCharacterInputItem)>
+`;
+
+exports[`renders the SingleCharacterInputItem with no props 1`] = `
+<ForwardRef(SingleCharacterInputItem)>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+    inputMode="numeric"
+    maxLength={1}
+    pattern="[0-9]*"
+    type="text"
+  >
+    <input
+      className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+      inputMode="numeric"
+      maxLength={1}
+      pattern="[0-9]*"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SingleCharacterInputItem)>
+`;
+
+exports[`renders the SingleCharacterInputItem with pattern prop 1`] = `
+<ForwardRef(SingleCharacterInputItem)
+  pattern="\\\\d{1}"
+>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+    inputMode="numeric"
+    maxLength={1}
+    pattern="\\\\d{1}"
+    type="text"
+  >
+    <input
+      className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+      inputMode="numeric"
+      maxLength={1}
+      pattern="\\\\d{1}"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SingleCharacterInputItem)>
+`;

package/esm/SingleCharacterInputItem/index.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "error", "className", "pattern", "maxLength"];
+import React from 'react';
+import Base from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+/**
+ * Details for the SingleCharacterInputItem.
+ * SingleCharacterInputItem component is used for displaying simple digital character inputs.
+ * SingleCharacterInputItem component must be included inside SingleCharacterInputContainer component as children component
+ */
+export var SingleCharacterInputItem = /*#__PURE__*/React.forwardRef(function SingleCharacterInputItem(_ref, ref) {
+  var name = _ref.name,
+      error = _ref.error,
+      className = _ref.className,
+      _ref$pattern = _ref.pattern,
+      pattern = _ref$pattern === void 0 ? '[0-9]*' : _ref$pattern,
+      _ref$maxLength = _ref.maxLength,
+      maxLength = _ref$maxLength === void 0 ? 1 : _ref$maxLength,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Base, _extends({
+    as: "input",
+    ref: ref,
+    type: "text",
+    pattern: pattern,
+    maxLength: maxLength,
+    inputMode: "numeric",
+    name: name,
+    className: clsx(error === true && 'govgr-error-input', className && className, true && ['govgr-otp-input__item', 'govgr-input', 'govgr-otp-input--width'])
+  }, props)));
+});
+export default SingleCharacterInputItem;

package/esm/SingleCharacterInputItem/index.test.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import SingleCharacterInputItem from '@digigov/react-core/SingleCharacterInputItem';
+
+var _ref = /*#__PURE__*/React.createElement(SingleCharacterInputItem, null);
+
+it('renders the SingleCharacterInputItem with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  maxLength: 6
+});
+
+it('renders the SingleCharacterInputItem with maxLength prop', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
+});
+
+var _ref3 = /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: 'single-character-input'
+});
+
+it('renders the SingleCharacterInputItem with name prop', function () {
+  expect(mount(_ref3)).toMatchSnapshot();
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: 'single-character-input',
+  error: true
+});
+
+it('renders the SingleCharacterInputItem with name and error props', function () {
+  expect(mount(_ref4)).toMatchSnapshot();
+});
+
+var _ref5 = /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  pattern: "\\d{1}"
+});
+
+it('renders the SingleCharacterInputItem with pattern prop', function () {
+  expect(mount(_ref5)).toMatchSnapshot();
+});
+
+var _ref6 = /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: 'single-character-input',
+  error: true
+});
+
+it('renders the SingleCharacterInputItem with name and error props', function () {
+  expect(mount(_ref6)).toMatchSnapshot();
+});
+
+var _ref7 = /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: 'single-character-input',
+  pattern: "\\d{1}",
+  maxLength: 6,
+  error: true
+});
+
+it('renders the SingleCharacterInputItem with name, pattern, maxLength and error props', function () {
+  expect(mount(_ref7)).toMatchSnapshot();
+});

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.22.1
+/** @license Digigov v0.23.0
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.
@@ -126,6 +126,8 @@ export * from '@digigov/react-core/RadioConditional';
 export * from '@digigov/react-core/SectionBreak';
 export * from '@digigov/react-core/SelectContainer';
 export * from '@digigov/react-core/SelectOption';
+export * from '@digigov/react-core/SingleCharacterInputContainer';
+export * from '@digigov/react-core/SingleCharacterInputItem';
 export * from '@digigov/react-core/SkipLink';
 export * from '@digigov/react-core/SummaryList';
 export * from '@digigov/react-core/SummaryListItem';

package/esm/registry.js

@@ -130,6 +130,8 @@ import * as _digigov_react_core_RadioItem from '@digigov/react-core/RadioItem';
 import * as _digigov_react_core_SectionBreak from '@digigov/react-core/SectionBreak';
 import * as _digigov_react_core_SelectContainer from '@digigov/react-core/SelectContainer';
 import * as _digigov_react_core_SelectOption from '@digigov/react-core/SelectOption';
+import * as _digigov_react_core_SingleCharacterInputContainer from '@digigov/react-core/SingleCharacterInputContainer';
+import * as _digigov_react_core_SingleCharacterInputItem from '@digigov/react-core/SingleCharacterInputItem';
 import * as _digigov_react_core_SkipLink from '@digigov/react-core/SkipLink';
 import * as _digigov_react_core_SummaryList from '@digigov/react-core/SummaryList';
 import * as _digigov_react_core_SummaryListItem from '@digigov/react-core/SummaryListItem';
@@ -306,6 +308,8 @@ export default {
   '@digigov/react-core/SectionBreak': lazyImport(_digigov_react_core_SectionBreak),
   '@digigov/react-core/SelectContainer': lazyImport(_digigov_react_core_SelectContainer),
   '@digigov/react-core/SelectOption': lazyImport(_digigov_react_core_SelectOption),
+  '@digigov/react-core/SingleCharacterInputContainer': lazyImport(_digigov_react_core_SingleCharacterInputContainer),
+  '@digigov/react-core/SingleCharacterInputItem': lazyImport(_digigov_react_core_SingleCharacterInputItem),
   '@digigov/react-core/SkipLink': lazyImport(_digigov_react_core_SkipLink),
   '@digigov/react-core/SummaryList': lazyImport(_digigov_react_core_SummaryList),
   '@digigov/react-core/SummaryListItem': lazyImport(_digigov_react_core_SummaryListItem),

package/index.d.ts

@@ -121,6 +121,8 @@ export * from '@digigov/react-core/RadioConditional';
 export * from '@digigov/react-core/SectionBreak';
 export * from '@digigov/react-core/SelectContainer';
 export * from '@digigov/react-core/SelectOption';
+export * from '@digigov/react-core/SingleCharacterInputContainer';
+export * from '@digigov/react-core/SingleCharacterInputItem';
 export * from '@digigov/react-core/SkipLink';
 export * from '@digigov/react-core/SummaryList';
 export * from '@digigov/react-core/SummaryListItem';

package/index.js

@@ -1603,6 +1603,32 @@ Object.keys(_SelectOption).forEach(function (key) {
   });
 });
 
+var _SingleCharacterInputContainer = require("@digigov/react-core/SingleCharacterInputContainer");
+
+Object.keys(_SingleCharacterInputContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SingleCharacterInputContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SingleCharacterInputContainer[key];
+    }
+  });
+});
+
+var _SingleCharacterInputItem = require("@digigov/react-core/SingleCharacterInputItem");
+
+Object.keys(_SingleCharacterInputItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SingleCharacterInputItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SingleCharacterInputItem[key];
+    }
+  });
+});
+
 var _SkipLink = require("@digigov/react-core/SkipLink");
 
 Object.keys(_SkipLink).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/react-core",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -11,7 +11,7 @@
     "directory": "dist"
   },
   "peerDependencies": {
-    "@digigov/css": "0.34.1",
+    "@digigov/css": "0.35.0",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"

package/registry.d.ts

@@ -131,6 +131,8 @@ declare var _default: {
     '@digigov/react-core/SectionBreak': {};
     '@digigov/react-core/SelectContainer': {};
     '@digigov/react-core/SelectOption': {};
+    '@digigov/react-core/SingleCharacterInputContainer': {};
+    '@digigov/react-core/SingleCharacterInputItem': {};
     '@digigov/react-core/SkipLink': {};
     '@digigov/react-core/SummaryList': {};
     '@digigov/react-core/SummaryListItem': {};

package/registry.js

@@ -271,6 +271,10 @@ var _digigov_react_core_SelectContainer = _interopRequireWildcard(require("@digi
 
 var _digigov_react_core_SelectOption = _interopRequireWildcard(require("@digigov/react-core/SelectOption"));
 
+var _digigov_react_core_SingleCharacterInputContainer = _interopRequireWildcard(require("@digigov/react-core/SingleCharacterInputContainer"));
+
+var _digigov_react_core_SingleCharacterInputItem = _interopRequireWildcard(require("@digigov/react-core/SingleCharacterInputItem"));
+
 var _digigov_react_core_SkipLink = _interopRequireWildcard(require("@digigov/react-core/SkipLink"));
 
 var _digigov_react_core_SummaryList = _interopRequireWildcard(require("@digigov/react-core/SummaryList"));
@@ -478,6 +482,8 @@ var _default = {
   '@digigov/react-core/SectionBreak': lazyImport(_digigov_react_core_SectionBreak),
   '@digigov/react-core/SelectContainer': lazyImport(_digigov_react_core_SelectContainer),
   '@digigov/react-core/SelectOption': lazyImport(_digigov_react_core_SelectOption),
+  '@digigov/react-core/SingleCharacterInputContainer': lazyImport(_digigov_react_core_SingleCharacterInputContainer),
+  '@digigov/react-core/SingleCharacterInputItem': lazyImport(_digigov_react_core_SingleCharacterInputItem),
   '@digigov/react-core/SkipLink': lazyImport(_digigov_react_core_SkipLink),
   '@digigov/react-core/SummaryList': lazyImport(_digigov_react_core_SummaryList),
   '@digigov/react-core/SummaryListItem': lazyImport(_digigov_react_core_SummaryListItem),

package/src/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--border govgr-horizontal-nav"
+    className="govgr-nav--horizontal govgr-nav--border govgr-nav--fixed govgr-nav"
   >
     <nav
-      className="govgr-nav-horizontal--border govgr-horizontal-nav"
+      className="govgr-nav--horizontal 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--border govgr-horizontal-nav govgr-horizontal-nav--open"
+    className="govgr-nav--horizontal govgr-nav--border govgr-nav--fixed govgr-nav govgr-nav--open"
   >
     <nav
-      className="govgr-nav-horizontal--border govgr-horizontal-nav govgr-horizontal-nav--open"
+      className="govgr-nav--horizontal govgr-nav--border govgr-nav--fixed govgr-nav govgr-nav--open"
     >
       hello
     </nav>

package/src/Nav/index.tsx

@@ -52,12 +52,13 @@ export const Nav = React.forwardRef<HTMLElement, NavProps>(function Nav(
       as="nav"
       ref={ref}
       className={clsx(className, {
-        'govgr-horizontal-nav': true,
-        'govgr-horizontal-nav--order': layout === 'horizontal',
-        'govgr-nav-horizontal--fixed': fixed,
-        'govgr-nav-horizontal--border': border,
-        'govgr-horizontal-nav--open': open,
-        'govgr-horizontal-nav--hidden': hidden,
+        'govgr-nav': true,
+        'govgr-nav--horizontal': layout === 'horizontal',
+        'govgr-nav--vertical': layout === 'vertical',
+        'govgr-nav--fixed': fixed,
+        'govgr-nav--border': border,
+        'govgr-nav--open': open,
+        'govgr-nav--hidden': hidden,
       })}
       {...props}
     >

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

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

package/src/NavList/index.tsx

@@ -8,30 +8,20 @@ export interface NavListProps extends BaseProps<'ul'> {
    * active is false by default.
    */
   active?: boolean;
-
-  /**
-   * layout prop sets the display layout for the nav list
-   * layout is horizontal by default.
-   */
-  layout?: 'vertical' | 'horizontal';
 }
 /**
  * NavList must be inside the Nav.
  * This component has a list of NavListItem component inside.
  */
 export const NavList = React.forwardRef<HTMLUListElement, NavListProps>(
-  function NavList(
-    { className, active = false, layout = 'horizontal', children, ...props },
-    ref
-  ) {
+  function NavList({ className, active = false, children, ...props }, ref) {
     return (
       <Base
         as="ul"
         ref={ref}
         className={clsx(className, {
-          'govgr-horizontal-nav__list': layout === 'horizontal',
-          'govgr-vertical-nav__list': layout === 'vertical',
-          'govgr-horizontal-nav__list--active': active,
+          'govgr-nav__list': true,
+          'govgr-nav__list--active': active,
         })}
         {...props}
       >

package/src/NavListItem/__snapshots__/index.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the NavListItem with no props 1`] = `
 <ForwardRef(NavHeaderListItem)>
   <ForwardRef(Base)
     as="li"
-    className="govgr-horizontal-nav__list-item"
+    className="govgr-nav__list-item"
   >
     <li
-      className="govgr-horizontal-nav__list-item"
+      className="govgr-nav__list-item"
     >
       hello
     </li>

package/src/NavListItem/index.tsx

@@ -2,29 +2,19 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
-export interface NavListItemProps extends BaseProps<'li'> {
-  /**
-   * layout prop sets the display layout for the nav list
-   * layout is horizontal by default.
-   */
-  layout?: 'horizontal' | 'vertical';
-}
+export interface NavListItemProps extends BaseProps<'li'> {}
 /**
  * NavListItem must be inside the NavList.
  * This component has a items of NavListItemLink component inside.
  */
 export const NavListItem = React.forwardRef<HTMLLIElement, NavListItemProps>(
-  function NavHeaderListItem(
-    { className, layout = 'horizontal', children, ...props },
-    ref
-  ) {
+  function NavHeaderListItem({ className, children, ...props }, ref) {
     return (
       <Base
         as="li"
         ref={ref}
         className={clsx(className, {
-          'govgr-horizontal-nav__list-item': layout === 'horizontal',
-          'govgr-vertical-nav__list-item': layout === 'vertical',
+          'govgr-nav__list-item': true,
         })}
         {...props}
       >

package/src/NavListItemButton/__snapshots__/index.test.tsx.snap

@@ -6,18 +6,18 @@ exports[`renders the NavListItemButton with active=false 1`] = `
 >
   <ForwardRef(Button)
     aria-selected={false}
-    className="govgr-horizontal-nav__list-item-btn"
+    className="govgr-nav__list-item-btn"
     variant="link"
   >
     <ForwardRef(Base)
       aria-selected={false}
       as="button"
-      className="govgr-horizontal-nav__list-item-btn govgr-link"
+      className="govgr-nav__list-item-btn govgr-link"
       printHidden={true}
     >
       <button
         aria-selected={false}
-        className="govgr-horizontal-nav__list-item-btn govgr-link govgr-print-hidden"
+        className="govgr-nav__list-item-btn govgr-link govgr-print-hidden"
       >
         hello
         <ForwardRef(ArrowIcon)
@@ -58,18 +58,18 @@ exports[`renders the NavListItemButton with active=true 1`] = `
 >
   <ForwardRef(Button)
     aria-selected={true}
-    className="govgr-horizontal-nav__list-item-btn--active govgr-horizontal-nav__list-item-btn"
+    className="govgr-nav__list-item-btn--active govgr-nav__list-item-btn"
     variant="link"
   >
     <ForwardRef(Base)
       aria-selected={true}
       as="button"
-      className="govgr-horizontal-nav__list-item-btn--active govgr-horizontal-nav__list-item-btn govgr-link"
+      className="govgr-nav__list-item-btn--active govgr-nav__list-item-btn govgr-link"
       printHidden={true}
     >
       <button
         aria-selected={true}
-        className="govgr-horizontal-nav__list-item-btn--active govgr-horizontal-nav__list-item-btn govgr-link govgr-print-hidden"
+        className="govgr-nav__list-item-btn--active govgr-nav__list-item-btn govgr-link govgr-print-hidden"
       >
         hello
         <ForwardRef(ArrowIcon)
@@ -107,16 +107,16 @@ exports[`renders the NavListItemButton with active=true 1`] = `
 exports[`renders the NavListItemButton with no props 1`] = `
 <ForwardRef(NavListItemButton)>
   <ForwardRef(Button)
-    className="govgr-horizontal-nav__list-item-btn"
+    className="govgr-nav__list-item-btn"
     variant="link"
   >
     <ForwardRef(Base)
       as="button"
-      className="govgr-horizontal-nav__list-item-btn govgr-link"
+      className="govgr-nav__list-item-btn govgr-link"
       printHidden={true}
     >
       <button
-        className="govgr-horizontal-nav__list-item-btn govgr-link govgr-print-hidden"
+        className="govgr-nav__list-item-btn govgr-link govgr-print-hidden"
       >
         hello
         <ForwardRef(ArrowIcon)

package/src/NavListItemButton/index.tsx

@@ -34,8 +34,8 @@ export const NavListItemButton = React.forwardRef<
       ref={ref}
       aria-selected={active}
       className={clsx(className, {
-        'govgr-horizontal-nav__list-item-btn': true,
-        'govgr-horizontal-nav__list-item-btn--active': active === true,
+        'govgr-nav__list-item-btn': true,
+        'govgr-nav__list-item-btn--active': active === true,
       })}
       {...props}
     >