@digigov/react-core 0.18.1 → 0.19.0

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

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

package/src/NavHorizontal/index.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import NavHorizontal from '@digigov/react-core/NavHorizontal';
+
+it('renders the NavHorizontal with no props', () => {
+  expect(mount(<NavHorizontal>hello</NavHorizontal>)).toMatchSnapshot();
+});
+
+it('renders the NavHorizontal with open prop', () => {
+  expect(mount(<NavHorizontal open>hello</NavHorizontal>)).toMatchSnapshot();
+});

package/src/NavHorizontal/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface NavHorizontalProps extends BaseProps<'nav'> {
+  /**
+   * active is optional.
+   * active prop add background color to navigation link.
+   * use this prop only for header navigation;
+   */
+  open?: boolean;
+}
+/**
+ * NavHorizontal is mainly used under the Header.
+ * This is a wrapper for the NavHorizontalList component.
+ */
+export const NavHorizontal = React.forwardRef<HTMLElement, NavHorizontalProps>(
+  function NavHorizontal({ className, open = false, children, ...props }, ref) {
+    return (
+      <Base
+        as="nav"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-horizontal-nav': true,
+          'govgr-horizontal-nav--open': open,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default NavHorizontal;

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

@@ -0,0 +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="ul"
+    className="govgr-horizontal-nav__list"
+  >
+    <ul
+      className="govgr-horizontal-nav__list"
+    >
+      hello
+    </ul>
+  </ForwardRef(Base)>
+</ForwardRef(NavHorizontalList)>
+`;

package/src/NavHorizontalList/index.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import NavHorizontalList from '@digigov/react-core/NavHorizontalList';
+
+it('renders the NavHorizontalList with no props', () => {
+  expect(mount(<NavHorizontalList>hello</NavHorizontalList>)).toMatchSnapshot();
+});
+it('renders the NavHorizontalList with active prop', () => {
+  expect(
+    mount(<NavHorizontalList active>hello</NavHorizontalList>)
+  ).toMatchSnapshot();
+});

package/src/NavHorizontalList/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface NavHorizontalListProps extends BaseProps<'ul'> {
+  /**
+   * active prop sets active background color to the nav horizontal list.
+   * active is false by default.
+   */
+
+  active?: boolean;
+}
+/**
+ * NavHorizontalList must be inside the NavHorizontal.
+ * This component has a list of NavHorizontalListItem component inside.
+ */
+export const NavHorizontalList = React.forwardRef<
+  HTMLUListElement,
+  NavHorizontalListProps
+>(function NavHorizontalList(
+  { className, active = false, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="ul"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-horizontal-nav__list': true,
+        'govgr-horizontal-nav__list--active': active,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default NavHorizontalList;

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

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

package/src/NavHorizontalListItem/index.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import NavHorizontalListItem from '@digigov/react-core/NavHorizontalListItem';
+
+it('renders the NavHorizontalListItem with no props', () => {
+  expect(
+    mount(<NavHorizontalListItem>hello</NavHorizontalListItem>)
+  ).toMatchSnapshot();
+});

package/src/NavHorizontalListItem/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface NavHorizontalListItemProps extends BaseProps<'li'> {}
+/**
+ * NavHorizontalListItem must be inside the NavHorizontalList.
+ * This component has a items of NavHorizontalListItemLink component inside.
+ */
+export const NavHorizontalListItem = React.forwardRef<
+  HTMLLIElement,
+  NavHorizontalListItemProps
+>(function NavHeaderListItem({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="li"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-horizontal-nav__list-item': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default NavHorizontalListItem;

package/src/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)>
+`;

package/src/NavHorizontalListItemButton/index.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import NavHorizontalListItemButton from '@digigov/react-core/NavHorizontalListItemButton';
+
+it('renders the NavHorizontalListItemButton with no props', () => {
+  expect(
+    mount(<NavHorizontalListItemButton>hello</NavHorizontalListItemButton>)
+  ).toMatchSnapshot();
+});
+
+it('renders the NavHorizontalListItemButton with active=true', () => {
+  expect(
+    mount(
+      <NavHorizontalListItemButton active={true}>
+        hello
+      </NavHorizontalListItemButton>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the NavHorizontalListItemLink with active=false', () => {
+  expect(
+    mount(
+      <NavHorizontalListItemButton active={false}>
+        hello
+      </NavHorizontalListItemButton>
+    )
+  ).toMatchSnapshot();
+});

package/src/NavHorizontalListItemButton/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import clsx from 'clsx';
+import Button, { ButtonProps } from '@digigov/react-core/Button';
+import ArrowIcon from '@digigov/react-core/ArrowIcon';
+
+export interface NavHorizontalListItemButtonProps extends ButtonProps {
+  /**
+   * When the NavHorizontalListItemButton is active, that means that we are in this option / page of the NavHorizontal.
+   * NavHorizontalListItemButton for nav menu.
+   * active is optional.
+   *
+   */
+  active?: boolean;
+  /**
+   * use arrow prop if you want to have arrows in navigation buttons.
+   * arrow is optional.
+   *
+   */
+  arrow?: boolean;
+}
+/**
+ * NavHorizontalListItemButton is an <button> element. It should be inside the NavHorizontalListItem component.
+ */
+export const NavHorizontalListItemButton = React.forwardRef<
+  HTMLButtonElement,
+  NavHorizontalListItemButtonProps
+>(function NavHorizontalListItemButton(
+  { active, className, arrow = true, children, ...props },
+  ref
+) {
+  return (
+    <Button
+      variant="link"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-horizontal-nav__list-item-btn': true,
+        'govgr-horizontal-nav__list-item-btn--active': active === true,
+      })}
+      {...props}
+    >
+      {children}
+      {arrow && <ArrowIcon direction={active ? 'up' : 'down'} />}
+    </Button>
+  );
+});
+
+export default NavHorizontalListItemButton;

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

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

package/src/NavHorizontalListItemLink/index.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import NavHorizontalListItemLink from '@digigov/react-core/NavHorizontalListItemLink';
+
+it('renders the NavHorizontalListItemLink with no props', () => {
+  expect(
+    mount(<NavHorizontalListItemLink>hello</NavHorizontalListItemLink>)
+  ).toMatchSnapshot();
+});
+
+it('renders the NavHorizontalListItemLink with active=true', () => {
+  expect(
+    mount(
+      <NavHorizontalListItemLink active={true}>hello</NavHorizontalListItemLink>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the NavHorizontalListItemLink with active=false', () => {
+  expect(
+    mount(
+      <NavHorizontalListItemLink active={false}>
+        hello
+      </NavHorizontalListItemLink>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the NavHorizontalListItemLink with href and active=false', () => {
+  expect(
+    mount(
+      <NavHorizontalListItemLink href="/" active={false}>
+        hello
+      </NavHorizontalListItemLink>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the NavHorizontalListItemLink with href and active=true', () => {
+  expect(
+    mount(
+      <NavHorizontalListItemLink href="/" active={false}>
+        hello
+      </NavHorizontalListItemLink>
+    )
+  ).toMatchSnapshot();
+});

package/src/NavHorizontalListItemLink/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+import Link from '@digigov/react-core/LinkBase';
+
+export interface NavHorizontalListItemLinkProps extends BaseProps<'a'> {
+  /**
+   * When the NavHorizontalListItemLink is active, that means that we are in this option / page of the NavHorizontal.
+   * active is optional.
+   *
+   */
+  active?: boolean;
+  /**
+   * href prop is used to navigate to current url page.
+   * href is optional.
+   */
+  href?: string;
+}
+/**
+ * NavHorizontalListItemLink is an <a> element. It should be inside the NavHorizontalListItem component.
+ */
+export const NavHorizontalListItemLink = React.forwardRef<
+  HTMLAnchorElement,
+  NavHorizontalListItemLinkProps
+>(function NavHorizontalListItemLink(
+  { active, href = '#', className, children, ...props },
+  ref
+) {
+  return (
+    <Link
+      href={href}
+      ref={ref}
+      className={clsx(className, {
+        'govgr-horizontal-nav__list-item-link': true,
+        'govgr-horizontal-nav__list-item-link--active': active === true,
+      })}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+});
+
+export default NavHorizontalListItemLink;

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

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

package/src/NavMenu/index.test.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import NavMenu from '@digigov/react-core/NavMenu';
+it('renders the NavMenu with no props', () => {
+  expect(mount(<NavMenu>hello</NavMenu>)).toMatchSnapshot();
+});