@digigov/react-core 0.22.1 → 0.23.1

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';

package/src/registry.js

@@ -131,6 +131,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';
@@ -310,6 +312,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),