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

package/src/Paragraph/index.test.tsx

@@ -1,325 +1,325 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import Paragraph from '@digigov/react-core/Paragraph';
 
 it('renders the Paragraph with no props', () => {
-  expect(mount(<Paragraph>hello</Paragraph>)).toMatchSnapshot();
+  expect(render(<Paragraph>hello</Paragraph>).baseElement).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=lead', () => {
-  expect(mount(<Paragraph size={'lg'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(render(<Paragraph size={'lg'}>hello</Paragraph>).baseElement).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=normal', () => {
-  expect(mount(<Paragraph size={'md'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(render(<Paragraph size={'md'}>hello</Paragraph>).baseElement).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=small', () => {
-  expect(mount(<Paragraph size={'sm'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(render(<Paragraph size={'sm'}>hello</Paragraph>).baseElement).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=14', () => {
-  expect(mount(<Paragraph fontSize={14}>hello</Paragraph>)).toMatchSnapshot();
+  expect(render(<Paragraph fontSize={14}>hello</Paragraph>).baseElement).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=16', () => {
-  expect(mount(<Paragraph fontSize={16}>hello</Paragraph>)).toMatchSnapshot();
+  expect(render(<Paragraph fontSize={16}>hello</Paragraph>).baseElement).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=19', () => {
-  expect(mount(<Paragraph fontSize={19}>hello</Paragraph>)).toMatchSnapshot();
+  expect(render(<Paragraph fontSize={19}>hello</Paragraph>).baseElement).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=24', () => {
-  expect(mount(<Paragraph fontSize={24}>hello</Paragraph>)).toMatchSnapshot();
+  expect(render(<Paragraph fontSize={24}>hello</Paragraph>).baseElement).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=30', () => {
-  expect(mount(<Paragraph fontSize={30}>hello</Paragraph>)).toMatchSnapshot();
+  expect(render(<Paragraph fontSize={30}>hello</Paragraph>).baseElement).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=36', () => {
-  expect(mount(<Paragraph fontSize={36}>hello</Paragraph>)).toMatchSnapshot();
+  expect(render(<Paragraph fontSize={36}>hello</Paragraph>).baseElement).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=48', () => {
-  expect(mount(<Paragraph fontSize={48}>hello</Paragraph>)).toMatchSnapshot();
+  expect(render(<Paragraph fontSize={48}>hello</Paragraph>).baseElement).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=72', () => {
-  expect(mount(<Paragraph fontSize={72}>hello</Paragraph>)).toMatchSnapshot();
+  expect(render(<Paragraph fontSize={72}>hello</Paragraph>).baseElement).toMatchSnapshot();
 });
 it('renders the Paragraph with fontWeight=regular', () => {
   expect(
-    mount(<Paragraph fontWeight={'regular'}>hello</Paragraph>)
+    render(<Paragraph fontWeight={'regular'}>hello</Paragraph>).baseElement
   ).toMatchSnapshot();
 });
 it('renders the Paragraph with fontWeight=bold', () => {
   expect(
-    mount(<Paragraph fontWeight={'bold'}>hello</Paragraph>)
+    render(<Paragraph fontWeight={'bold'}>hello</Paragraph>).baseElement
   ).toMatchSnapshot();
 });
 it('renders the Paragraph with fontWeight=bold', () => {
   expect(
-    mount(<Paragraph fontWeight={'bold'}>hello</Paragraph>)
+    render(<Paragraph fontWeight={'bold'}>hello</Paragraph>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=lead and fontSize=14', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'lg'} fontSize={14}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=lead and fontSize=16', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'lg'} fontSize={16}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=lead and fontSize=19', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'lg'} fontSize={19}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=lead and fontSize=24', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'lg'} fontSize={14}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=lead and fontSize=30', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'lg'} fontSize={30}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=lead and fontSize=36', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'lg'} fontSize={36}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=lead and fontSize=48', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'lg'} fontSize={48}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=lead and fontSize=72', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'lg'} fontSize={72}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=small and fontSize=14', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'sm'} fontSize={14}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=small and fontSize=16', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'sm'} fontSize={16}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=small and fontSize=19', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'sm'} fontSize={19}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=small and fontSize=24', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'sm'} fontSize={14}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=small and fontSize=30', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'sm'} fontSize={30}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=small and fontSize=36', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'sm'} fontSize={36}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=small and fontSize=48', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'sm'} fontSize={48}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=small and fontSize=72', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'sm'} fontSize={72}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=normal and fontSize=14', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'md'} fontSize={14}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=normal and fontSize=16', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'md'} fontSize={16}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=normal and fontSize=19', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'md'} fontSize={19}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=normal and fontSize=24', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'md'} fontSize={14}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=normal and fontSize=30', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'md'} fontSize={30}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=normal and fontSize=36', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'md'} fontSize={36}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=normal and fontSize=48', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'md'} fontSize={48}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the Paragraph with size=normal and fontSize=72', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'md'} fontSize={72}>
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 it('renders the Paragraph with size=normal, fontSize=72 and fontWeight="regular', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'md'} fontSize={72} fontWeight="regular">
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 it('renders the Paragraph with size=normal, fontSize=72 and fontWeight="bold', () => {
   expect(
-    mount(
+    render(
       <Paragraph size={'md'} fontSize={72} fontWeight="bold">
         hello
       </Paragraph>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });

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

@@ -1,41 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the PhaseBanner with no props 1`] = `
-<ForwardRef(PhaseBanner)>
-  <ForwardRef(Base)
-    as="div"
-    className="ds-phase-banner"
-  >
+<body>
+  <div>
     <div
-      className="ds-phase-banner"
+      class="ds-phase-banner"
     >
       <p
-        className="ds-phase-banner__content"
+        class="ds-phase-banner__content"
       >
         hello
       </p>
     </div>
-  </ForwardRef(Base)>
-</ForwardRef(PhaseBanner)>
+  </div>
+</body>
 `;
 
 exports[`renders the PhaseBanner with underline prop 1`] = `
-<ForwardRef(PhaseBanner)
-  underline={true}
->
-  <ForwardRef(Base)
-    as="div"
-    className="ds-phase-banner--underline ds-phase-banner"
-  >
+<body>
+  <div>
     <div
-      className="ds-phase-banner--underline ds-phase-banner"
+      class="ds-phase-banner--underline ds-phase-banner"
     >
       <p
-        className="ds-phase-banner__content"
+        class="ds-phase-banner__content"
       >
         hello
       </p>
     </div>
-  </ForwardRef(Base)>
-</ForwardRef(PhaseBanner)>
+  </div>
+</body>
 `;

package/src/PhaseBanner/index.test.tsx

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

package/src/PhaseBanner/index.tsx

@@ -31,13 +31,13 @@ export const PhaseBanner = React.forwardRef<HTMLDivElement, PhaseBannerProps>(
         })}
         {...props}
       >
-        <p
+        <Base as="p"
           className={clsx({
             'ds-phase-banner__content': true,
           })}
         >
           {children}
-        </p>
+        </Base>
       </Base>
     );
   }

package/src/PhaseBannerHeaderContainer/__snapshots__/inde.test.tsx.snap

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

package/src/PhaseBannerHeaderContainer/inde.test.tsx

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

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

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

package/src/PhaseBannerTag/index.test.tsx

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

package/src/PhaseBannerTag/index.tsx

@@ -2,17 +2,17 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface PhaseBannerTagProps extends BaseProps<'strong'> { }
+export interface PhaseBannerTagProps extends BaseProps<'span'> { }
 /**
  * PhaseBannerTag is used inside the PhaseBanner component and it requires a text of the phase of the service (ex. Alpha, Beta).
  */
 export const PhaseBannerTag = React.forwardRef<
-  HTMLElement,
+  HTMLSpanElement,
   PhaseBannerTagProps
 >(function PhaseBannerTag({ className, children, ...props }, ref) {
   return (
     <Base
-      as="strong"
+      as="span"
       ref={ref}
       className={clsx(className, {
         'ds-phase-banner__tag': true,

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

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

package/src/PhaseBannerText/index.test.tsx

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

package/src/PhaseBannerText/index.tsx

@@ -17,7 +17,7 @@ export const PhaseBannerText = React.forwardRef<
       as="span"
       ref={ref}
       className={clsx(className, {
-        'ds-phase-banner__text': true,
+        'ds-phase-banner__message': true,
       })}
       {...props}
     >

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

@@ -1,44 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the Blockquote with no props 1`] = `
-<ForwardRef(RadioConditional)>
-  <ForwardRef(Base)
-    as="div"
-    className="ds-radios__conditional"
-  >
+<body>
+  <div>
     <div
-      className="ds-radios__conditional"
+      class="ds-radios__conditional"
     >
-      <ForwardRef(FieldContainer)>
-        <ForwardRef(Grid)
-          className="ds-field"
-          item={true}
-          xs={12}
+      <div
+        class="ds-field xs:ds-grid__col-span-12"
+      >
+        <label
+          class="ds-label"
         >
-          <ForwardRef(Base)
-            as="div"
-            className="ds-field xs:ds-grid__col-span-12"
-          >
-            <div
-              className="ds-field xs:ds-grid__col-span-12"
-            >
-              <ForwardRef(LabelContainer)>
-                <ForwardRef(Base)
-                  as="label"
-                  className="ds-label"
-                >
-                  <label
-                    className="ds-label"
-                  >
-                    hello
-                  </label>
-                </ForwardRef(Base)>
-              </ForwardRef(LabelContainer)>
-            </div>
-          </ForwardRef(Base)>
-        </ForwardRef(Grid)>
-      </ForwardRef(FieldContainer)>
+          hello
+        </label>
+      </div>
     </div>
-  </ForwardRef(Base)>
-</ForwardRef(RadioConditional)>
+  </div>
+</body>
 `;