@digigov/react-core 0.18.1 → 0.19.0

package/src/TextInput/index.test.tsx

@@ -0,0 +1,256 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import TextInput from '@digigov/react-core/TextInput';
+
+it('renders the TextInput with no props', () => {
+  expect(mount(<TextInput></TextInput>)).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=2', () => {
+  expect(mount(<TextInput characterWidth={2}></TextInput>)).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=3', () => {
+  expect(mount(<TextInput characterWidth={3}></TextInput>)).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=4', () => {
+  expect(mount(<TextInput characterWidth={4}></TextInput>)).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=5', () => {
+  expect(mount(<TextInput characterWidth={5}></TextInput>)).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=10', () => {
+  expect(mount(<TextInput characterWidth={10}></TextInput>)).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=20', () => {
+  expect(mount(<TextInput characterWidth={20}></TextInput>)).toMatchSnapshot();
+});
+
+it('renders the TextInput with cellWidth=one-quarter', () => {
+  expect(
+    mount(<TextInput cellWidth={'one-quarter'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with cellWidth=one-third', () => {
+  expect(
+    mount(<TextInput cellWidth={'one-third'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with cellWidth=one-half', () => {
+  expect(
+    mount(<TextInput cellWidth={'one-half'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with cellWidth=two-thirds', () => {
+  expect(
+    mount(<TextInput cellWidth={'two-thirds'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with cellWidth=three-quarters', () => {
+  expect(
+    mount(<TextInput cellWidth={'three-quarters'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with cellWidth=full', () => {
+  expect(mount(<TextInput cellWidth={'full'}></TextInput>)).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=2 and with cellWidth=one-quarter', () => {
+  expect(
+    mount(<TextInput characterWidth={2} cellWidth={'one-quarter'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=3 and with cellWidth=one-quarter', () => {
+  expect(
+    mount(<TextInput characterWidth={3} cellWidth={'one-quarter'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=4 and with cellWidth=one-quarter', () => {
+  expect(
+    mount(<TextInput characterWidth={4} cellWidth={'one-quarter'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput  with with characterWidth=5 with cellWidth=one-quarter', () => {
+  expect(
+    mount(<TextInput characterWidth={5} cellWidth={'one-quarter'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=20 and with cellWidth=one-quarter', () => {
+  expect(
+    mount(<TextInput characterWidth={20} cellWidth={'one-quarter'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=2 and with cellWidth=one-third', () => {
+  expect(
+    mount(<TextInput characterWidth={2} cellWidth={'one-third'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=3 and with cellWidth=one-third', () => {
+  expect(
+    mount(<TextInput characterWidth={3} cellWidth={'one-third'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=4 and with cellWidth=one-third', () => {
+  expect(
+    mount(<TextInput characterWidth={4} cellWidth={'one-third'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput  with with characterWidth=5 with cellWidth=one-third', () => {
+  expect(
+    mount(<TextInput characterWidth={5} cellWidth={'one-third'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=20 and with cellWidth=one-third', () => {
+  expect(
+    mount(<TextInput characterWidth={20} cellWidth={'one-third'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=2 and with cellWidth=one-half', () => {
+  expect(
+    mount(<TextInput characterWidth={2} cellWidth={'one-half'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=3 and with cellWidth=one-half', () => {
+  expect(
+    mount(<TextInput characterWidth={3} cellWidth={'one-half'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=4 and with cellWidth=one-half', () => {
+  expect(
+    mount(<TextInput characterWidth={4} cellWidth={'one-half'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput  with with characterWidth=5 with cellWidth=one-half', () => {
+  expect(
+    mount(<TextInput characterWidth={5} cellWidth={'one-half'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=20 and with cellWidth=one-half', () => {
+  expect(
+    mount(<TextInput characterWidth={20} cellWidth={'one-half'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=2 and with cellWidth=two-thirds', () => {
+  expect(
+    mount(<TextInput characterWidth={2} cellWidth={'two-thirds'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=3 and with cellWidth=two-thirds', () => {
+  expect(
+    mount(<TextInput characterWidth={3} cellWidth={'two-thirds'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=4 and with cellWidth=two-thirds', () => {
+  expect(
+    mount(<TextInput characterWidth={4} cellWidth={'two-thirds'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput  with with characterWidth=5 with cellWidth=two-thirds', () => {
+  expect(
+    mount(<TextInput characterWidth={5} cellWidth={'two-thirds'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=20 and with cellWidth=two-thirds', () => {
+  expect(
+    mount(<TextInput characterWidth={20} cellWidth={'two-thirds'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=2 and with cellWidth=three-quarters', () => {
+  expect(
+    mount(
+      <TextInput characterWidth={2} cellWidth={'three-quarters'}></TextInput>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=3 and with cellWidth=three-quarters', () => {
+  expect(
+    mount(
+      <TextInput characterWidth={3} cellWidth={'three-quarters'}></TextInput>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=4 and with cellWidth=three-quarters', () => {
+  expect(
+    mount(
+      <TextInput characterWidth={4} cellWidth={'three-quarters'}></TextInput>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput  with with characterWidth=5 with cellWidth=three-quarters', () => {
+  expect(
+    mount(
+      <TextInput characterWidth={5} cellWidth={'three-quarters'}></TextInput>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=20 and with cellWidth=three-quarters', () => {
+  expect(
+    mount(
+      <TextInput characterWidth={20} cellWidth={'three-quarters'}></TextInput>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=2 and with cellWidth=full', () => {
+  expect(
+    mount(<TextInput characterWidth={2} cellWidth={'full'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=3 and with cellWidth=full', () => {
+  expect(
+    mount(<TextInput characterWidth={3} cellWidth={'full'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=4 and with cellWidth=full', () => {
+  expect(
+    mount(<TextInput characterWidth={4} cellWidth={'full'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput  with with characterWidth=5 with cellWidth=full', () => {
+  expect(
+    mount(<TextInput characterWidth={5} cellWidth={'full'}></TextInput>)
+  ).toMatchSnapshot();
+});
+
+it('renders the TextInput with characterWidth=20 and with cellWidth=full', () => {
+  expect(
+    mount(<TextInput characterWidth={20} cellWidth={'full'}></TextInput>)
+  ).toMatchSnapshot();
+});

package/src/TextInput/index.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface TextInputProps extends BaseProps<'input'> {
+  /**
+   * name is optional but strongly recommended.
+   */
+  name?: string;
+
+  /**
+   * characterWidth is optional.
+   */
+  characterWidth?: 2 | 3 | 4 | 5 | 10 | 20;
+
+  /**
+   * cellWidth is optional.
+   * Use cellWidth prop to define a custom width for a specific reference number in your components.
+   */
+  cellWidth?:
+    | 'one-quarter'
+    | 'one-third'
+    | 'one-half'
+    | 'two-thirds'
+    | 'three-quarters'
+    | 'full';
+
+  /**
+   * error is optional. The default value is false.
+   * Use this prop when there is an error at the input.
+   */
+  error?: boolean;
+}
+/**
+ * TextInput component when you need to let users enter text that’s no
+ * longer than a single line, such as their name or phone number.
+ */
+export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
+  function TextInput(
+    {
+      type = 'text',
+      name,
+      characterWidth,
+      cellWidth,
+      error,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <Base
+        as="input"
+        type={type}
+        name={name}
+        ref={ref}
+        className={clsx(className, {
+          'govgr-input': true,
+          'govgr-input--width-2': characterWidth === 2,
+          'govgr-input--width-3': characterWidth === 3,
+          'govgr-input--width-4': characterWidth === 4,
+          'govgr-input--width-5': characterWidth === 5,
+          'govgr-input--width-10': characterWidth === 10,
+          'govgr-input--width-20': characterWidth === 20,
+          'govgr-!-width-one-quarter': cellWidth === 'one-quarter',
+          'govgr-!-width-one-third': cellWidth === 'one-third',
+          'govgr-!-width-one-half': cellWidth === 'one-half',
+          'govgr-!-width-two-thirds': cellWidth === 'two-thirds',
+          'govgr-!-width-three-quarters': cellWidth === 'three-quarters',
+          'govgr-!-width-full': cellWidth === 'full',
+          'govgr-error-input': error === true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default TextInput;

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

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

package/src/Top/index.test.tsx

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

package/src/Top/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface TopProps extends BaseProps<'div'> {}
+/**
+ * Top is used inside the Layout component and it must be the first component in order.
+ */
+export const Top = React.forwardRef<HTMLDivElement, TopProps>(function Top(
+  { className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-top': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default Top;