@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-88820b1e

package/{es/SearchSection → src/SearchContainer}/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the SearchSection with no prop 1`] = `
-<ForwardRef(SearchSection)>
+exports[`renders the SearchContainer with no prop 1`] = `
+<ForwardRef(SearchContainer)>
   <ForwardRef(Base)
     as="div"
     className="govgr-search"
@@ -12,5 +12,5 @@ exports[`renders the SearchSection with no prop 1`] = `
       hello
     </div>
   </ForwardRef(Base)>
-</ForwardRef(SearchSection)>
+</ForwardRef(SearchContainer)>
 `;

package/src/SearchContainer/index.test.tsx

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

package/src/{SearchSection → SearchContainer}/index.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface SearchSectionProps extends BaseProps<'div'> {}
+export interface SearchContainerProps extends BaseProps<'div'> {}
 /**
  * Use this component to wrap SearchButton component.
  */
-export const SearchSection = React.forwardRef<
+export const SearchContainer = React.forwardRef<
   HTMLDivElement,
-  SearchSectionProps
->(function SearchSection({ className, children, ...props }, ref) {
+  SearchContainerProps
+>(function SearchContainer({ className, children, ...props }, ref) {
   return (
     <Base
       as="div"
@@ -24,4 +24,4 @@ export const SearchSection = React.forwardRef<
   );
 });
 
-export default SearchSection;
+export default SearchContainer;

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

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

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

@@ -19,10 +19,10 @@ exports[`renders the SectionBreak with size=l 1`] = `
 >
   <ForwardRef(Base)
     as="hr"
-    className="govgr-section-break--visible govgr-section-break--lg govgr-section-break"
+    className="govgr-section-break--lg govgr-section-break--visible govgr-section-break"
   >
     <hr
-      className="govgr-section-break--visible govgr-section-break--lg govgr-section-break"
+      className="govgr-section-break--lg govgr-section-break--visible govgr-section-break"
     />
   </ForwardRef(Base)>
 </ForwardRef(SectionBreak)>
@@ -34,10 +34,10 @@ exports[`renders the SectionBreak with size=m 1`] = `
 >
   <ForwardRef(Base)
     as="hr"
-    className="govgr-section-break--visible govgr-section-break--md govgr-section-break"
+    className="govgr-section-break--md govgr-section-break--visible govgr-section-break"
   >
     <hr
-      className="govgr-section-break--visible govgr-section-break--md govgr-section-break"
+      className="govgr-section-break--md govgr-section-break--visible govgr-section-break"
     />
   </ForwardRef(Base)>
 </ForwardRef(SectionBreak)>
@@ -49,10 +49,10 @@ exports[`renders the SectionBreak with size=xl 1`] = `
 >
   <ForwardRef(Base)
     as="hr"
-    className="govgr-section-break--visible govgr-section-break--xl govgr-section-break"
+    className="govgr-section-break--xl govgr-section-break--visible govgr-section-break"
   >
     <hr
-      className="govgr-section-break--visible govgr-section-break--xl govgr-section-break"
+      className="govgr-section-break--xl govgr-section-break--visible govgr-section-break"
     />
   </ForwardRef(Base)>
 </ForwardRef(SectionBreak)>

package/src/SelectContainer/index.tsx

@@ -10,11 +10,10 @@ export interface SelectContainerProps extends BaseProps<'select'> {}
 export const SelectContainer = React.forwardRef<
   HTMLSelectElement,
   SelectContainerProps
->(function SelectContainer({ name, className, children, ...props }, ref) {
+>(function SelectContainer({ className, children, ...props }, ref) {
   return (
     <Base
       as="select"
-      name={name}
       ref={ref}
       className={clsx(className, {
         'govgr-select': true,

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

@@ -4,10 +4,10 @@ exports[`renders the SelectOption with no props 1`] = `
 <ForwardRef(SelectOption)>
   <ForwardRef(Base)
     as="option"
-    className=""
+    className="govgr-select__option"
   >
     <option
-      className=""
+      className="govgr-select__option"
     >
       hello
     </option>
@@ -21,11 +21,11 @@ exports[`renders the SelectOption with value props 1`] = `
 >
   <ForwardRef(Base)
     as="option"
-    className=""
+    className="govgr-select__option"
     value="some-value"
   >
     <option
-      className=""
+      className="govgr-select__option"
       value="some-value"
     >
       hello

package/src/SelectOption/index.tsx

@@ -11,16 +11,16 @@ export const SelectOption = React.forwardRef<
   HTMLOptionElement,
   SelectOptionProps
 >(function SelectOption(
-  { value, selected, className, children, ...props },
+  { className, children, ...props },
   ref
 ) {
   return (
     <Base
       as="option"
-      value={value}
       ref={ref}
-      selected={selected}
-      className={clsx(className, {})}
+      className={clsx(className, {
+        'govgr-select__option': true,
+      })}
       {...props}
     >
       {children}

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

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

package/src/SingleCharacterInput/index.test.tsx

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

package/src/SingleCharacterInput/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import clsx from 'clsx';
+import TextInput, { TextInputProps } from '@digigov/react-core/TextInput';
+
+export interface SingleCharacterInputProps extends Omit<TextInputProps, 'maxLength'>  {
+
+  /**
+  * pattern is optional. The default value is [0-9].
+  * Use this prop when you want to give a specific format input.
+
+  * @default '[0-9]*'
+  */
+  pattern?: string;
+}
+/**
+ * Details for the SingleCharacterInput.
+ * SingleCharacterInput component is used for displaying simple digital character inputs.
+ * SingleCharacterInput component must be included inside SingleCharacterInputs component as children component
+ */
+export const SingleCharacterInput = React.forwardRef<
+  HTMLInputElement,
+  SingleCharacterInputProps
+>(function SingleCharacterInput(
+  { className, pattern = '[0-9]*', ...props },
+  ref
+) {
+  return (
+    <TextInput
+      className={clsx({
+        className,
+        'govgr-single-character-input__item': true,
+      })}
+      inputMode="numeric"
+      pattern={pattern}
+      ref={ref}
+      {...props}
+      maxLength={1}
+    />
+  );
+});
+
+export default SingleCharacterInput;

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

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

package/src/SingleCharacterInputs/index.test.tsx

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

package/src/{SingleCharacterInputContainer → SingleCharacterInputs}/index.tsx

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