@digigov/react-core 0.22.1 → 0.23.0

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

@@ -5,17 +5,14 @@ exports[`renders the NavListItemLink with active=false 1`] = `
   active={false}
 >
   <ForwardRef(LinkBase)
-    className="govgr-horizontal-nav__list-item-link"
-    href="#"
+    className="govgr-nav__list-item-link"
   >
     <ForwardRef(Base)
       as="a"
-      className="govgr-horizontal-nav__list-item-link govgr-link"
-      href="#"
+      className="govgr-nav__list-item-link govgr-link"
     >
       <a
-        className="govgr-horizontal-nav__list-item-link govgr-link"
-        href="#"
+        className="govgr-nav__list-item-link govgr-link"
       >
         hello
       </a>
@@ -29,17 +26,14 @@ exports[`renders the NavListItemLink with active=true 1`] = `
   active={true}
 >
   <ForwardRef(LinkBase)
-    className="govgr-horizontal-nav__list-item-link--active govgr-horizontal-nav__list-item-link"
-    href="#"
+    className="govgr-nav__list-item-link--active govgr-nav__list-item-link"
   >
     <ForwardRef(Base)
       as="a"
-      className="govgr-horizontal-nav__list-item-link--active govgr-horizontal-nav__list-item-link govgr-link"
-      href="#"
+      className="govgr-nav__list-item-link--active govgr-nav__list-item-link govgr-link"
     >
       <a
-        className="govgr-horizontal-nav__list-item-link--active govgr-horizontal-nav__list-item-link govgr-link"
-        href="#"
+        className="govgr-nav__list-item-link--active govgr-nav__list-item-link govgr-link"
       >
         hello
       </a>
@@ -54,16 +48,16 @@ exports[`renders the NavListItemLink with href and active=false 1`] = `
   href="/"
 >
   <ForwardRef(LinkBase)
-    className="govgr-horizontal-nav__list-item-link"
+    className="govgr-nav__list-item-link"
     href="/"
   >
     <ForwardRef(Base)
       as="a"
-      className="govgr-horizontal-nav__list-item-link govgr-link"
+      className="govgr-nav__list-item-link govgr-link"
       href="/"
     >
       <a
-        className="govgr-horizontal-nav__list-item-link govgr-link"
+        className="govgr-nav__list-item-link govgr-link"
         href="/"
       >
         hello
@@ -79,16 +73,16 @@ exports[`renders the NavListItemLink with href and active=true 1`] = `
   href="/"
 >
   <ForwardRef(LinkBase)
-    className="govgr-horizontal-nav__list-item-link"
+    className="govgr-nav__list-item-link"
     href="/"
   >
     <ForwardRef(Base)
       as="a"
-      className="govgr-horizontal-nav__list-item-link govgr-link"
+      className="govgr-nav__list-item-link govgr-link"
       href="/"
     >
       <a
-        className="govgr-horizontal-nav__list-item-link govgr-link"
+        className="govgr-nav__list-item-link govgr-link"
         href="/"
       >
         hello
@@ -101,17 +95,14 @@ exports[`renders the NavListItemLink with href and active=true 1`] = `
 exports[`renders the NavListItemLink with no props 1`] = `
 <ForwardRef(NavListItemLink)>
   <ForwardRef(LinkBase)
-    className="govgr-horizontal-nav__list-item-link"
-    href="#"
+    className="govgr-nav__list-item-link"
   >
     <ForwardRef(Base)
       as="a"
-      className="govgr-horizontal-nav__list-item-link govgr-link"
-      href="#"
+      className="govgr-nav__list-item-link govgr-link"
     >
       <a
-        className="govgr-horizontal-nav__list-item-link govgr-link"
-        href="#"
+        className="govgr-nav__list-item-link govgr-link"
       >
         hello
       </a>

package/src/NavListItemLink/index.tsx

@@ -23,7 +23,7 @@ export const NavListItemLink = React.forwardRef<
   HTMLAnchorElement,
   NavListItemLinkProps
 >(function NavListItemLink(
-  { active, href = '#', className, children, ...props },
+  { active, href, className, children, ...props },
   ref
 ) {
   return (
@@ -31,8 +31,8 @@ export const NavListItemLink = React.forwardRef<
       href={href}
       ref={ref}
       className={clsx(className, {
-        'govgr-horizontal-nav__list-item-link': true,
-        'govgr-horizontal-nav__list-item-link--active': active === true,
+        'govgr-nav__list-item-link': true,
+        'govgr-nav__list-item-link--active': active === true,
       })}
       {...props}
     >

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

@@ -5,11 +5,11 @@ exports[`renders the NavMenu with no props 1`] = `
   <ForwardRef(Base)
     aria-hidden={true}
     as="div"
-    className="govgr-nav-list__menu govgr-nav-list__menu-hidden"
+    className="govgr-nav-menu--horizontal govgr-nav-menu--hidden govgr-nav-menu"
   >
     <div
       aria-hidden={true}
-      className="govgr-nav-list__menu govgr-nav-list__menu-hidden"
+      className="govgr-nav-menu--horizontal govgr-nav-menu--hidden govgr-nav-menu"
     >
       hello
     </div>

package/src/NavMenu/index.tsx

@@ -30,9 +30,10 @@ export const NavMenu = React.forwardRef<HTMLDivElement, NavMenuProps>(
         ref={ref}
         aria-hidden={!active}
         className={clsx(className, {
-          'govgr-nav-list__menu': layout === 'horizontal',
-          'govgr-vertical-nav-list__menu': layout === 'vertical',
-          'govgr-nav-list__menu-hidden': !active,
+          'govgr-nav-menu': true,
+          'govgr-nav-menu--horizontal': layout === 'horizontal',
+          'govgr-nav-menu--vertical': layout === 'vertical',
+          'govgr-nav-menu--hidden': !active,
         })}
         {...props}
       >

package/src/NavMenuContainer/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { BaseProps } from '@digigov/react-core/Base';
-import clsx from 'clsx';
 import Container from '@digigov/react-core/Container';
 
 export interface NavMenuContainerProps extends BaseProps<'div'> {
@@ -25,7 +24,7 @@ export const NavMenuContainer = React.forwardRef<
     <Container
       cols={layout === 'horizontal'}
       ref={ref}
-      className={clsx(className, {})}
+      className={className}
       {...props}
     >
       {children}

package/src/NavMenuContainerContent/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { BaseProps } from '@digigov/react-core/Base';
-import clsx from 'clsx';
 import Grid from '@digigov/react-core/Grid';
 
 export interface NavMenuContainerContentProps extends BaseProps<'div'> {}
@@ -14,7 +13,7 @@ export const NavMenuContainerContent = React.forwardRef<
   NavMenuContainerContentProps
 >(function NavMenuContainerContent({ className, children, ...props }, ref) {
   return (
-    <Grid item md={2} ref={ref} className={clsx(className, {})} {...props}>
+    <Grid item md={2} ref={ref} className={className} {...props}>
       {children}
     </Grid>
   );

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

@@ -4,10 +4,10 @@ exports[`renders the NavMenuContainerContentList with no props 1`] = `
 <ForwardRef(NavMenuContainerContentList)>
   <ForwardRef(Base)
     as="ul"
-    className="govgr-nav-list__content-list"
+    className="govgr-nav-menu__content-list"
   >
     <ul
-      className="govgr-nav-list__content-list"
+      className="govgr-nav-menu__content-list"
     >
       hello
     </ul>

package/src/NavMenuContainerContentList/index.tsx

@@ -2,13 +2,7 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
-export interface NavMenuContainerContentListProps extends BaseProps<'ul'> {
-  /**
-   * layout prop sets the display layout for the nav list
-   * layout is horizontal by default.
-   */
-  layout?: 'vertical' | 'horizontal';
-}
+export interface NavMenuContainerContentListProps extends BaseProps<'ul'> {}
 /**
  * NavMenuContainerContentList contains the ul list nav menu.
  * Inside this component must be NavMenuContainerContentListItem component.
@@ -16,17 +10,13 @@ export interface NavMenuContainerContentListProps extends BaseProps<'ul'> {
 export const NavMenuContainerContentList = React.forwardRef<
   HTMLUListElement,
   NavMenuContainerContentListProps
->(function NavMenuContainerContentList(
-  { className, layout = 'horizontal', children, ...props },
-  ref
-) {
+>(function NavMenuContainerContentList({ className, children, ...props }, ref) {
   return (
     <Base
       as="ul"
       ref={ref}
       className={clsx(className, {
-        'govgr-nav-list__content-list': layout === 'horizontal',
-        'govgr-vertical-nav-list__content-list': layout === 'vertical',
+        'govgr-nav-menu__content-list': true,
       })}
       {...props}
     >

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

@@ -4,10 +4,10 @@ exports[`renders the NavMenuContainerContentListItem with no props 1`] = `
 <ForwardRef(NavMenuContainerContentListItem)>
   <ForwardRef(Base)
     as="li"
-    className="govgr-nav-list__content-list-item"
+    className="govgr-nav-menu__content-list-item"
   >
     <li
-      className="govgr-nav-list__content-list-item"
+      className="govgr-nav-menu__content-list-item"
     >
       hello
     </li>

package/src/NavMenuContainerContentListItem/index.tsx

@@ -19,7 +19,7 @@ export const NavMenuContainerContentListItem = React.forwardRef<
       as="li"
       ref={ref}
       className={clsx(className, {
-        'govgr-nav-list__content-list-item': true,
+        'govgr-nav-menu__content-list-item': true,
       })}
       {...props}
     >

package/src/NavMenuContainerTitle/index.tsx

@@ -4,13 +4,7 @@ import clsx from 'clsx';
 import Grid from '@digigov/react-core/Grid';
 import Heading from '@digigov/react-core/Heading';
 
-export interface NavMenuContainerTitleProps extends BaseProps<'div'> {
-  /**
-   * layout prop sets the display layout for the nav list
-   * layout is horizontal by default.
-   */
-  layout?: 'horizontal' | 'vertical';
-}
+export interface NavMenuContainerTitleProps extends BaseProps<'div'> {}
 /**
  *
  * NavMenuContainerTitle is the main Title for the nav list items.
@@ -19,17 +13,14 @@ export interface NavMenuContainerTitleProps extends BaseProps<'div'> {
 export const NavMenuContainerTitle = React.forwardRef<
   HTMLDivElement,
   NavMenuContainerTitleProps
->(function NavMenuContainerTitle(
-  { className, layout = 'horizontal', children, ...props },
-  ref
-) {
+>(function NavMenuContainerTitle({ className, children, ...props }, ref) {
   return (
     <Grid
       item
       md={1}
       ref={ref}
       className={clsx(className, {
-        'govgr-vertical-nav-list__container-title': layout === 'vertical',
+        'govgr-nav-menu__container-title': true,
       })}
       {...props}
     >
@@ -37,8 +28,7 @@ export const NavMenuContainerTitle = React.forwardRef<
         element="h3"
         size="m"
         className={clsx({
-          'govgr-vertical-nav-list__container-title-heading':
-            layout === 'vertical',
+          'govgr-nav-menu__container-title-heading': true,
         })}
       >
         {children}

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

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

package/src/SingleCharacterInputContainer/index.test.tsx

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

package/src/SingleCharacterInputContainer/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface SingleCharacterInputContainerProps extends BaseProps<'div'> {}
+/**
+ * Details for the SingleCharacterInputContainer.
+ * It is used as a parent component to wrap SingleCharacterInput component.
+ *
+ */
+export const SingleCharacterInputContainer = React.forwardRef<
+  HTMLDivElement,
+  SingleCharacterInputContainerProps
+>(function SingleCharacterInputContainer(
+  { className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-single-character-input--container': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default SingleCharacterInputContainer;

package/src/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/src/SingleCharacterInputItem/index.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import SingleCharacterInputItem from '@digigov/react-core/SingleCharacterInputItem';
+
+it('renders the SingleCharacterInputItem with no props', () => {
+  expect(mount(<SingleCharacterInputItem />)).toMatchSnapshot();
+});
+it('renders the SingleCharacterInputItem with maxLength prop', () => {
+  expect(mount(<SingleCharacterInputItem maxLength={6} />)).toMatchSnapshot();
+});
+
+it('renders the SingleCharacterInputItem with name prop', () => {
+  expect(
+    mount(<SingleCharacterInputItem name={'single-character-input'} />)
+  ).toMatchSnapshot();
+});
+
+it('renders the SingleCharacterInputItem with name and error props', () => {
+  expect(
+    mount(<SingleCharacterInputItem name={'single-character-input'} error />)
+  ).toMatchSnapshot();
+});
+it('renders the SingleCharacterInputItem with pattern prop', () => {
+  expect(mount(<SingleCharacterInputItem pattern="\d{1}" />)).toMatchSnapshot();
+});
+
+it('renders the SingleCharacterInputItem with name and error props', () => {
+  expect(
+    mount(<SingleCharacterInputItem name={'single-character-input'} error />)
+  ).toMatchSnapshot();
+});
+
+it('renders the SingleCharacterInputItem with name, pattern, maxLength and error props', () => {
+  expect(
+    mount(
+      <SingleCharacterInputItem
+        name={'single-character-input'}
+        pattern="\d{1}"
+        maxLength={6}
+        error
+      />
+    )
+  ).toMatchSnapshot();
+});

package/src/SingleCharacterInputItem/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface SingleCharacterInputItemProps extends BaseProps<'input'> {
+  /**
+   * Name property is optional
+   * Name prop contains a single value which describes the name of the <input> element.
+   */
+  name?: string;
+  /**
+   * error is optional. The default value is false.
+   * Use this prop when there is an error at the input.
+   */
+  error?: boolean;
+  /**
+   * pattern is optional. The default value is [0-9].
+   * Use this prop when you want to give a specific format input.
+   */
+  pattern?: string;
+  /**
+   * maxLength property is optional
+   * maxLength prop specifies the max length of the input field.
+   * maxLength default value is 1.
+   */
+  maxLength?: number;
+}
+/**
+ * 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 const SingleCharacterInputItem = React.forwardRef<
+  HTMLInputElement,
+  SingleCharacterInputItemProps
+>(function SingleCharacterInputItem(
+  { name, error, className, pattern = '[0-9]*', maxLength = 1, ...props },
+  ref
+) {
+  return (
+    <>
+      <Base
+        as="input"
+        ref={ref}
+        type="text"
+        pattern={pattern}
+        maxLength={maxLength}
+        inputMode="numeric"
+        name={name}
+        className={clsx({
+          className,
+          'govgr-otp-input__item': true,
+          'govgr-input': true,
+          'govgr-otp-input--width': true,
+          'govgr-error-input': error === true,
+        })}
+        {...props}
+      />
+    </>
+  );
+});
+
+export default SingleCharacterInputItem;

package/src/index.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';