@digigov/react-core 2.0.0-rc.17 → 2.0.0-rc.18

package/src/TextInput/index.native.tsx

@@ -0,0 +1,15 @@
+import extend from '@digigov/react-core/utils/extend.native';
+import CoreTextInput from '@digigov/react-core/TextInput/index.web';
+import clsx from 'clsx';
+export const TextInput = extend(CoreTextInput, ({ className, ...props }) => {
+  return {
+    ...props,
+    className: clsx(className, {
+      'ds-input__wrapper': props.maxWidth === undefined,
+      'ds-input--disabled': props.disabled,
+      [`ds-input--width-${props.maxWidth}__wrapper`]:
+        props.maxWidth !== undefined,
+    }),
+  };
+});
+export default TextInput;

package/src/TextInput/index.test.tsx

@@ -1,239 +1,239 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import TextInput from '@digigov/react-core/TextInput';
 
 it('renders the TextInput with no props', () => {
-  expect(mount(<TextInput></TextInput>)).toMatchSnapshot();
+  expect(render(<TextInput></TextInput>).baseElement).toMatchSnapshot();
 });
 it('renders the TextInput with dense prop', () => {
-  expect(mount(<TextInput dense></TextInput>)).toMatchSnapshot();
+  expect(render(<TextInput dense></TextInput>).baseElement).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="2-char"', () => {
-  expect(mount(<TextInput maxWidth="2-char"></TextInput>)).toMatchSnapshot();
+  expect(render(<TextInput maxWidth="2-char"></TextInput>).baseElement).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="3-char"', () => {
-  expect(mount(<TextInput maxWidth="3-char"></TextInput>)).toMatchSnapshot();
+  expect(render(<TextInput maxWidth="3-char"></TextInput>).baseElement).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="4-char"', () => {
-  expect(mount(<TextInput maxWidth="4-char"></TextInput>)).toMatchSnapshot();
+  expect(render(<TextInput maxWidth="4-char"></TextInput>).baseElement).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="5-char"', () => {
-  expect(mount(<TextInput maxWidth="5-char"></TextInput>)).toMatchSnapshot();
+  expect(render(<TextInput maxWidth="5-char"></TextInput>).baseElement).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="10-char"', () => {
-  expect(mount(<TextInput maxWidth="10-char"></TextInput>)).toMatchSnapshot();
+  expect(render(<TextInput maxWidth="10-char"></TextInput>).baseElement).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="20-char"', () => {
-  expect(mount(<TextInput maxWidth="20-char"></TextInput>)).toMatchSnapshot();
+  expect(render(<TextInput maxWidth="20-char"></TextInput>).baseElement).toMatchSnapshot();
 });
 
 it('renders the TextInput with width=one-quarter', () => {
-  expect(mount(<TextInput width={'25%'}></TextInput>)).toMatchSnapshot();
+  expect(render(<TextInput width={'25%'}></TextInput>).baseElement).toMatchSnapshot();
 });
 
 it('renders the TextInput with width=one-third', () => {
-  expect(mount(<TextInput width={'33.3%'}></TextInput>)).toMatchSnapshot();
+  expect(render(<TextInput width={'33.3%'}></TextInput>).baseElement).toMatchSnapshot();
 });
 
 it('renders the TextInput with width=one-half', () => {
-  expect(mount(<TextInput width={'50%'}></TextInput>)).toMatchSnapshot();
+  expect(render(<TextInput width={'50%'}></TextInput>).baseElement).toMatchSnapshot();
 });
 
 it('renders the TextInput with width=two-thirds', () => {
-  expect(mount(<TextInput width={'66.6%'}></TextInput>)).toMatchSnapshot();
+  expect(render(<TextInput width={'66.6%'}></TextInput>).baseElement).toMatchSnapshot();
 });
 
 it('renders the TextInput with width=three-quarters', () => {
-  expect(mount(<TextInput width={'75%'}></TextInput>)).toMatchSnapshot();
+  expect(render(<TextInput width={'75%'}></TextInput>).baseElement).toMatchSnapshot();
 });
 
 it('renders the TextInput with width=full', () => {
-  expect(mount(<TextInput width={'full'}></TextInput>)).toMatchSnapshot();
+  expect(render(<TextInput width={'full'}></TextInput>).baseElement).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="2-char" and with width=one-quarter', () => {
   expect(
-    mount(<TextInput maxWidth="2-char" width={'25%'}></TextInput>)
+    render(<TextInput maxWidth="2-char" width={'25%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="3-char" and with width=one-quarter', () => {
   expect(
-    mount(<TextInput maxWidth="3-char" width={'25%'}></TextInput>)
+    render(<TextInput maxWidth="3-char" width={'25%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="4-char" and with width=one-quarter', () => {
   expect(
-    mount(<TextInput maxWidth="4-char" width={'25%'}></TextInput>)
+    render(<TextInput maxWidth="4-char" width={'25%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput  with with maxWidth="5-char" with width=one-quarter', () => {
   expect(
-    mount(<TextInput maxWidth="5-char" width={'25%'}></TextInput>)
+    render(<TextInput maxWidth="5-char" width={'25%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="20-char" and with width=one-quarter', () => {
   expect(
-    mount(<TextInput maxWidth="20-char" width={'25%'}></TextInput>)
+    render(<TextInput maxWidth="20-char" width={'25%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="2-char" and with width=one-third', () => {
   expect(
-    mount(<TextInput maxWidth="2-char" width={'33.3%'}></TextInput>)
+    render(<TextInput maxWidth="2-char" width={'33.3%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="3-char" and with width=one-third', () => {
   expect(
-    mount(<TextInput maxWidth="3-char" width={'33.3%'}></TextInput>)
+    render(<TextInput maxWidth="3-char" width={'33.3%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="4-char" and with width=one-third', () => {
   expect(
-    mount(<TextInput maxWidth="4-char" width={'33.3%'}></TextInput>)
+    render(<TextInput maxWidth="4-char" width={'33.3%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput  with with maxWidth="5-char" with width=one-third', () => {
   expect(
-    mount(<TextInput maxWidth="5-char" width={'33.3%'}></TextInput>)
+    render(<TextInput maxWidth="5-char" width={'33.3%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="20-char" and with width=one-third', () => {
   expect(
-    mount(<TextInput maxWidth="20-char" width={'33.3%'}></TextInput>)
+    render(<TextInput maxWidth="20-char" width={'33.3%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="2-char" and with width=one-half', () => {
   expect(
-    mount(<TextInput maxWidth="2-char" width={'50%'}></TextInput>)
+    render(<TextInput maxWidth="2-char" width={'50%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="3-char" and with width=one-half', () => {
   expect(
-    mount(<TextInput maxWidth="3-char" width={'50%'}></TextInput>)
+    render(<TextInput maxWidth="3-char" width={'50%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="4-char" and with width=one-half', () => {
   expect(
-    mount(<TextInput maxWidth="4-char" width={'50%'}></TextInput>)
+    render(<TextInput maxWidth="4-char" width={'50%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput  with with maxWidth="5-char" with width=one-half', () => {
   expect(
-    mount(<TextInput maxWidth="5-char" width={'50%'}></TextInput>)
+    render(<TextInput maxWidth="5-char" width={'50%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="20-char" and with width=one-half', () => {
   expect(
-    mount(<TextInput maxWidth="20-char" width={'50%'}></TextInput>)
+    render(<TextInput maxWidth="20-char" width={'50%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="2-char" and with width=two-thirds', () => {
   expect(
-    mount(<TextInput maxWidth="2-char" width={'66.6%'}></TextInput>)
+    render(<TextInput maxWidth="2-char" width={'66.6%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="3-char" and with width=two-thirds', () => {
   expect(
-    mount(<TextInput maxWidth="3-char" width={'66.6%'}></TextInput>)
+    render(<TextInput maxWidth="3-char" width={'66.6%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="4-char" and with width=two-thirds', () => {
   expect(
-    mount(<TextInput maxWidth="4-char" width={'66.6%'}></TextInput>)
+    render(<TextInput maxWidth="4-char" width={'66.6%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput  with with maxWidth="5-char" with width=two-thirds', () => {
   expect(
-    mount(<TextInput maxWidth="5-char" width={'66.6%'}></TextInput>)
+    render(<TextInput maxWidth="5-char" width={'66.6%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="20-char" and with width=two-thirds', () => {
   expect(
-    mount(<TextInput maxWidth="20-char" width={'66.6%'}></TextInput>)
+    render(<TextInput maxWidth="20-char" width={'66.6%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="2-char" and with width=three-quarters', () => {
   expect(
-    mount(<TextInput maxWidth="2-char" width={'75%'}></TextInput>)
+    render(<TextInput maxWidth="2-char" width={'75%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="3-char" and with width=three-quarters', () => {
   expect(
-    mount(<TextInput maxWidth="3-char" width={'75%'}></TextInput>)
+    render(<TextInput maxWidth="3-char" width={'75%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="4-char" and with width=three-quarters', () => {
   expect(
-    mount(<TextInput maxWidth="4-char" width={'75%'}></TextInput>)
+    render(<TextInput maxWidth="4-char" width={'75%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput  with with maxWidth="5-char" with width=three-quarters', () => {
   expect(
-    mount(<TextInput maxWidth="5-char" width={'75%'}></TextInput>)
+    render(<TextInput maxWidth="5-char" width={'75%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="20-char" and with width=three-quarters', () => {
   expect(
-    mount(<TextInput maxWidth="20-char" width={'75%'}></TextInput>)
+    render(<TextInput maxWidth="20-char" width={'75%'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="2-char" and with width=full', () => {
   expect(
-    mount(<TextInput maxWidth="2-char" width={'full'}></TextInput>)
+    render(<TextInput maxWidth="2-char" width={'full'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="3-char" and with width=full', () => {
   expect(
-    mount(<TextInput maxWidth="3-char" width={'full'}></TextInput>)
+    render(<TextInput maxWidth="3-char" width={'full'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="4-char" and with width=full', () => {
   expect(
-    mount(<TextInput maxWidth="4-char" width={'full'}></TextInput>)
+    render(<TextInput maxWidth="4-char" width={'full'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput  with with maxWidth="5-char" with width=full', () => {
   expect(
-    mount(<TextInput maxWidth="5-char" width={'full'}></TextInput>)
+    render(<TextInput maxWidth="5-char" width={'full'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TextInput with maxWidth="20-char" and with width=full', () => {
   expect(
-    mount(<TextInput maxWidth="20-char" width={'full'}></TextInput>)
+    render(<TextInput maxWidth="20-char" width={'full'}></TextInput>).baseElement
   ).toMatchSnapshot();
 });

package/src/TextInput/index.tsx

@@ -1,87 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-
-export interface TextInputProps extends BaseProps<'input'> {
-  /**
-   * maxWidth is optional.
-   * @value '2-char';
-   * @value '3-char';
-   * @value '4-char';
-   * @value '5-char';
-   * @value '10-char';
-   * @value '20-char';
-   */
-  maxWidth?: '2-char' | '3-char' | '4-char' | '5-char' | '10-char' | '20-char';
-
-  /**
-   * width is optional.
-   * Use width prop to define a custom width in your component.
-   * @value '25%';
-   * @value '33.3%';
-   * @value '50%';
-   * @value '66.6%';
-   * @value '75%';
-   * @value '100%';
-   * @value 'full';
-   */
-  width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
-
-  /**
-   * error is optional. The default value is false.
-   * Use this prop when there is an error at the input.
-   * @value true
-   * @value false
-   */
-  error?: boolean;
-  /**
-   * dense is optional.
-   * @value true TextInput will be dense.
-   * @value false
-   * @default false
-   */
-  dense?: 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',
-      maxWidth,
-      width,
-      error,
-      dense,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) {
-    return (
-      <Base
-        as="input"
-        type={type}
-        ref={ref}
-        className={clsx(className, {
-          'ds-input': true,
-          'ds-input--error': error,
-          'ds-input--dense': dense,
-          [`ds-input--width-${maxWidth}`]: maxWidth !== undefined,
-          'ds-!-width-one-quarter': width === '25%',
-          'ds-!-width-one-third': width === '33.3%',
-          'ds-!-width-one-half': width === '50%',
-          'ds-!-width-two-thirds': width === '66.6%',
-          'ds-!-width-three-quarters': width === '75%',
-        })}
-        {...props}
-      >
-        {children}
-      </Base>
-    );
-  }
-);
-
-export default TextInput;
+export * from '@digigov/react-core/TextInput/index.web';
+export { default as default } from '@digigov/react-core/TextInput/index.web';

package/src/TextInput/index.web.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface TextInputProps extends BaseProps<'input'> {
+  /**
+   * maxWidth is optional.
+   * @value '2-char';
+   * @value '3-char';
+   * @value '4-char';
+   * @value '5-char';
+   * @value '10-char';
+   * @value '20-char';
+   */
+  maxWidth?: '2-char' | '3-char' | '4-char' | '5-char' | '10-char' | '20-char';
+
+  /**
+   * width is optional.
+   * Use width prop to define a custom width in your component.
+   * @value '25%';
+   * @value '33.3%';
+   * @value '50%';
+   * @value '66.6%';
+   * @value '75%';
+   * @value '100%';
+   * @value 'full';
+   */
+  width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
+
+  /**
+   * error is optional. The default value is false.
+   * Use this prop when there is an error at the input.
+   * @value true
+   * @value false
+   */
+  error?: boolean;
+  /**
+   * dense is optional.
+   * @value true TextInput will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: 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',
+      maxWidth,
+      width,
+      error,
+      dense,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <Base
+        as="input"
+        type={type}
+        ref={ref}
+        className={clsx(className, {
+          'ds-input': true,
+          'ds-input--error': error,
+          'ds-input--dense': dense,
+          [`ds-input--width-${maxWidth}`]: maxWidth !== undefined,
+          'ds-!-width-one-quarter': width === '25%',
+          'ds-!-width-one-third': width === '33.3%',
+          'ds-!-width-one-half': width === '50%',
+          'ds-!-width-two-thirds': width === '66.6%',
+          'ds-!-width-three-quarters': width === '75%',
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default TextInput;

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

@@ -1,33 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the Timeline with dense prop 1`] = `
-<ForwardRef(Timeline)
-  dense={true}
->
-  <ForwardRef(Base)
-    as="ol"
-    className="ds-timeline--dense ds-timeline"
-  >
+<body>
+  <div>
     <ol
-      className="ds-timeline--dense ds-timeline"
+      class="ds-timeline--dense ds-timeline"
     >
       hello
     </ol>
-  </ForwardRef(Base)>
-</ForwardRef(Timeline)>
+  </div>
+</body>
 `;
 
 exports[`renders the Timeline with no prop 1`] = `
-<ForwardRef(Timeline)>
-  <ForwardRef(Base)
-    as="ol"
-    className="ds-timeline"
-  >
+<body>
+  <div>
     <ol
-      className="ds-timeline"
+      class="ds-timeline"
     >
       hello
     </ol>
-  </ForwardRef(Base)>
-</ForwardRef(Timeline)>
+  </div>
+</body>
 `;

package/src/Timeline/index.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import Timeline from '@digigov/react-core/Timeline';
 
 it('renders the Timeline with no prop', () => {
-  expect(mount(<Timeline>hello</Timeline>)).toMatchSnapshot();
+  expect(render(<Timeline>hello</Timeline>).baseElement).toMatchSnapshot();
 });
 
 it('renders the Timeline with dense prop', () => {
-  expect(mount(<Timeline dense>hello</Timeline>)).toMatchSnapshot();
+  expect(render(<Timeline dense>hello</Timeline>).baseElement).toMatchSnapshot();
 });

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

@@ -1,16 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the TimelineActions with no prop 1`] = `
-<ForwardRef(CardContent)>
-  <ForwardRef(Base)
-    as="div"
-    className="ds-timeline__actions"
-  >
+<body>
+  <div>
     <div
-      className="ds-timeline__actions"
+      class="ds-timeline__actions"
     >
       hello
     </div>
-  </ForwardRef(Base)>
-</ForwardRef(CardContent)>
+  </div>
+</body>
 `;

package/src/TimelineActions/index.test.tsx

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

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

@@ -1,16 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the TimelineContent with no prop 1`] = `
-<ForwardRef(TimelineContent)>
-  <ForwardRef(Base)
-    as="div"
-    className="ds-timeline__content"
-  >
+<body>
+  <div>
     <div
-      className="ds-timeline__content"
+      class="ds-timeline__content"
     >
       hello
     </div>
-  </ForwardRef(Base)>
-</ForwardRef(TimelineContent)>
+  </div>
+</body>
 `;

package/src/TimelineContent/index.test.tsx

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