@digigov/react-core 2.0.0-834daea4 → 2.0.0-87b6232d

package/src/TableHeadCell/index.test.tsx

@@ -3,87 +3,201 @@ import { render } from '@testing-library/react';
 
 import Table from '@digigov/react-core/Table';
 import TableHead from '@digigov/react-core/TableHead';
-import TableRow from '@digigov/react-core/TableRow';
 import TableHeadCell from '@digigov/react-core/TableHeadCell';
+import TableRow from '@digigov/react-core/TableRow';
 
 it('renders the Table with no props', () => {
-  expect(render(<Table><TableHead><TableRow><TableHeadCell>hello</TableHeadCell></TableRow></TableHead></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell>hello</TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the Table with dataType="numeric" prop', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell dataType="numeric">hello</TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell dataType="numeric">hello</TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with width=one-quarter', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell width={'25%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell width={'25%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with width=one-third', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell width={'33.3%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell width={'33.3%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with width=one-half', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell width={'50%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell width={'50%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with width=two-thirds', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell width={'66.6%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell width={'66.6%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with width=three-quarters', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell width={'75%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell width={'75%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with width=full', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell width={'full'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell width={'full'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with dataType="numeric" width=one-quarter', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell dataType="numeric" width={'25%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell dataType="numeric" width={'25%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with dataType="numeric" and width=one-third', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell dataType="numeric" width={'33.3%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell dataType="numeric" width={'33.3%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with dataType="numeric" and dataType="numeric" and   width=one-half', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell dataType="numeric" width={'50%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell dataType="numeric" width={'50%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with dataType="numeric" and width=two-thirds', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell dataType="numeric" width={'66.6%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell dataType="numeric" width={'66.6%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell with dataType="numeric" and width=three-quarters', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell dataType="numeric" width={'75%'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell dataType="numeric" width={'75%'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableHeadCell dataType="numeric" and with width=full', () => {
   expect(
-    render(<Table><TableHead><TableRow><TableHeadCell dataType="numeric" width={'full'}></TableHeadCell></TableRow></TableHead></Table>).baseElement
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell dataType="numeric" width={'full'}></TableHeadCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });

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

@@ -4,7 +4,7 @@ exports[`renders the TableLoaderBackground with no props 1`] = `
 <body>
   <div>
     <div
-      class=" ds-table__loading"
+      class="ds-table__loading"
     >
       hello
     </div>

package/src/TableLoaderBackground/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface TableLoaderBackgroundProps extends BaseProps<'div'> { }
+export interface TableLoaderBackgroundProps extends BaseProps<'div'> {}
 /**
  * Use TableLoaderBackground component in tables in order to add blur and opacity background when data are loading.
  * TableLoaderBackground is the parent component and takes as children the LoaderContainer component.

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

@@ -4,16 +4,16 @@ exports[`renders the Table with no props 1`] = `
 <body>
   <div>
     <table
-      class=" ds-table"
+      class="ds-table"
     >
       <tbody
-        class=" ds-table__body"
+        class="ds-table__body"
       >
         <tr
           class="ds-table__row"
         >
           <td
-            class=" ds-table__cell ds-table__cell--no-data"
+            class="ds-table__cell ds-table__cell--no-data"
             colspan="100"
           />
         </tr>

package/src/TableNoDataRow/index.test.tsx

@@ -6,5 +6,13 @@ import TableBody from '@digigov/react-core/TableBody';
 import TableNoDataRow from '@digigov/react-core/TableNoDataRow';
 
 it('renders the Table with no props', () => {
-  expect(render(<Table><TableBody><TableNoDataRow></TableNoDataRow></TableBody></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table>
+        <TableBody>
+          <TableNoDataRow></TableNoDataRow>
+        </TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });

package/src/TableNoDataRow/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface TableNoDataRowProps extends BaseProps<'td'> { }
+export interface TableNoDataRowProps extends BaseProps<'td'> {}
 /**
  * Use TableNoDataRow inside the Table component when there is no data to show.
  * you can use colSpan prop attribute to expand the td width

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

@@ -4,13 +4,13 @@ exports[`renders the Table with color="secondary" prop 1`] = `
 <body>
   <div>
     <table
-      class=" ds-table"
+      class="ds-table"
     >
       <tbody
-        class=" ds-table__body"
+        class="ds-table__body"
       >
         <tr
-          class=" ds-table__row ds-table__row--secondary"
+          class="ds-table__row ds-table__row--secondary"
         />
       </tbody>
     </table>
@@ -22,13 +22,13 @@ exports[`renders the Table with highlight prop 1`] = `
 <body>
   <div>
     <table
-      class=" ds-table"
+      class="ds-table"
     >
       <tbody
-        class=" ds-table__body"
+        class="ds-table__body"
       >
         <tr
-          class=" ds-table__row ds-table__row--highlight"
+          class="ds-table__row ds-table__row--highlight"
         />
       </tbody>
     </table>
@@ -40,13 +40,13 @@ exports[`renders the Table with no props 1`] = `
 <body>
   <div>
     <table
-      class=" ds-table"
+      class="ds-table"
     >
       <tbody
-        class=" ds-table__body"
+        class="ds-table__body"
       >
         <tr
-          class=" ds-table__row"
+          class="ds-table__row"
         />
       </tbody>
     </table>

package/src/TableRow/index.test.tsx

@@ -6,12 +6,36 @@ import TableBody from '@digigov/react-core/TableBody';
 import TableRow from '@digigov/react-core/TableRow';
 
 it('renders the Table with no props', () => {
-  expect(render(<Table><TableBody><TableRow></TableRow></TableBody></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table>
+        <TableBody>
+          <TableRow></TableRow>
+        </TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the Table with highlight prop', () => {
-  expect(render(<Table><TableBody><TableRow highlight></TableRow></TableBody></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table>
+        <TableBody>
+          <TableRow highlight></TableRow>
+        </TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Table with color="secondary" prop', () => {
-  expect(render(<Table><TableBody><TableRow color="secondary"></TableRow></TableBody></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table>
+        <TableBody>
+          <TableRow color="secondary"></TableRow>
+        </TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });

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

@@ -4,7 +4,7 @@ exports[`renders the TableSortIconContainer with no props 1`] = `
 <body>
   <div>
     <div
-      class=" ds-table-sort__icons-container"
+      class="ds-table-sort__icons-container"
     >
       hello
     </div>

package/src/TableSortIconContainer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface TableSortIconContainerProps extends BaseProps<'div'> { }
+export interface TableSortIconContainerProps extends BaseProps<'div'> {}
 /**
  *
  * Use TableSortIconContainer to wrap CaretIcon like ascending descending style.

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

@@ -4,7 +4,7 @@ exports[`renders the Tabs with dense=true 1`] = `
 <body>
   <div>
     <div
-      class=" ds-tabs ds-tabs--dense"
+      class="ds-tabs ds-tabs--dense"
     >
       hello
     </div>
@@ -16,7 +16,7 @@ exports[`renders the Tabs with no props 1`] = `
 <body>
   <div>
     <div
-      class=" ds-tabs"
+      class="ds-tabs"
     >
       hello
     </div>

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

@@ -4,10 +4,10 @@ exports[`renders the TabsHeading with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-hidden-md-up undefined"
+      class="ds-hidden-md-up"
     >
       <h4
-        class=" ds-heading-sm"
+        class="ds-heading-sm"
       >
         hello
       </h4>
@@ -20,10 +20,10 @@ exports[`renders the TabsHeading with size=m 1`] = `
 <body>
   <div>
     <div
-      class="ds-hidden-md-up undefined"
+      class="ds-hidden-md-up"
     >
       <h3
-        class=" ds-heading-md"
+        class="ds-heading-md"
       >
         hello
       </h3>
@@ -36,10 +36,10 @@ exports[`renders the TabsHeading with size=s 1`] = `
 <body>
   <div>
     <div
-      class="ds-hidden-md-up undefined"
+      class="ds-hidden-md-up"
     >
       <h4
-        class=" ds-heading-sm"
+        class="ds-heading-sm"
       >
         hello
       </h4>

package/src/TabsHeading/index.test.tsx

@@ -4,13 +4,19 @@ import { render } from '@testing-library/react';
 import TabsHeading from '@digigov/react-core/TabsHeading';
 
 it('renders the TabsHeading with no props', () => {
-  expect(render(<TabsHeading>hello</TabsHeading>).baseElement).toMatchSnapshot();
+  expect(
+    render(<TabsHeading>hello</TabsHeading>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TabsHeading with size=m', () => {
-  expect(render(<TabsHeading size={'md'}>hello</TabsHeading>).baseElement).toMatchSnapshot();
+  expect(
+    render(<TabsHeading size={'md'}>hello</TabsHeading>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TabsHeading with size=s', () => {
-  expect(render(<TabsHeading size={'sm'}>hello</TabsHeading>).baseElement).toMatchSnapshot();
+  expect(
+    render(<TabsHeading size={'sm'}>hello</TabsHeading>).baseElement
+  ).toMatchSnapshot();
 });

package/src/TabsHeading/index.tsx

@@ -19,7 +19,7 @@ export interface TabsHeadingProps extends HiddenProps {
 export const TabsHeading = React.forwardRef<
   HTMLHeadingElement,
   TabsHeadingProps
->(function TabsHeading({ size = 'sm', className, children, ...props }, ref) {
+>(function TabsHeading({ size = 'sm', children, ...props }, ref) {
   return (
     <Hidden ref={ref} {...props} mdUp>
       <Heading size={size}>{children}</Heading>

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

@@ -4,7 +4,7 @@ exports[`renders the TabsList with no props 1`] = `
 <body>
   <div>
     <ul
-      class=" ds-tabs__list"
+      class="ds-tabs__list"
       role="tablist"
     >
       hello

package/src/TabsList/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface TabsListProps extends BaseProps<'ul'> { }
+export interface TabsListProps extends BaseProps<'ul'> {}
 /**
  * TabsList should be inside the Tabs component.
  * Inside the TabsList should be a list of TabsListItem components.

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

@@ -9,7 +9,7 @@ exports[`renders the TabsListItemBase with href and open=false 1`] = `
     >
       <a
         aria-selected="false"
-        class=" ds-tabs__tab"
+        class="ds-tabs__tab"
         href="/"
         role="tab"
       >
@@ -20,15 +20,17 @@ exports[`renders the TabsListItemBase with href and open=false 1`] = `
 </body>
 `;
 
-exports[`renders the TabsListItemBase with no props 1`] = `
+exports[`renders the TabsListItemBase with href and open=true 1`] = `
 <body>
   <div>
     <li
-      class="ds-tabs__list-item"
+      class="ds-tabs__list-item ds-tabs__list-item-selected"
       role="presentation"
     >
       <a
-        class=" ds-tabs__tab"
+        aria-selected="true"
+        class="ds-tabs__tab"
+        href="/"
         role="tab"
       >
         hello
@@ -38,7 +40,7 @@ exports[`renders the TabsListItemBase with no props 1`] = `
 </body>
 `;
 
-exports[`renders the TabsListItemBase with open=false 1`] = `
+exports[`renders the TabsListItemBase with no props 1`] = `
 <body>
   <div>
     <li
@@ -46,8 +48,7 @@ exports[`renders the TabsListItemBase with open=false 1`] = `
       role="presentation"
     >
       <a
-        aria-selected="false"
-        class=" ds-tabs__tab"
+        class="ds-tabs__tab"
         role="tab"
       >
         hello
@@ -57,16 +58,16 @@ exports[`renders the TabsListItemBase with open=false 1`] = `
 </body>
 `;
 
-exports[`renders the TabsListItemBase with open=true 1`] = `
+exports[`renders the TabsListItemBase with open=false 1`] = `
 <body>
   <div>
     <li
-      class="ds-tabs__list-item ds-tabs__list-item-selected"
+      class="ds-tabs__list-item"
       role="presentation"
     >
       <a
-        aria-selected="true"
-        class=" ds-tabs__tab"
+        aria-selected="false"
+        class="ds-tabs__tab"
         role="tab"
       >
         hello
@@ -76,7 +77,7 @@ exports[`renders the TabsListItemBase with open=true 1`] = `
 </body>
 `;
 
-exports[`renders the TabsListItemBase with open=true 2`] = `
+exports[`renders the TabsListItemBase with open=true 1`] = `
 <body>
   <div>
     <li
@@ -85,8 +86,7 @@ exports[`renders the TabsListItemBase with open=true 2`] = `
     >
       <a
         aria-selected="true"
-        class=" ds-tabs__tab"
-        href="/"
+        class="ds-tabs__tab"
         role="tab"
       >
         hello

package/src/TabsListItemBase/index.test.tsx

@@ -4,7 +4,9 @@ import { render } from '@testing-library/react';
 import TabsListItemBase from '@digigov/react-core/TabsListItemBase';
 
 it('renders the TabsListItemBase with no props', () => {
-  expect(render(<TabsListItemBase>hello</TabsListItemBase>).baseElement).toMatchSnapshot();
+  expect(
+    render(<TabsListItemBase>hello</TabsListItemBase>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TabsListItemBase with open=true', () => {
@@ -27,7 +29,7 @@ it('renders the TabsListItemBase with href and open=false', () => {
     ).baseElement
   ).toMatchSnapshot();
 });
-it('renders the TabsListItemBase with open=true', () => {
+it('renders the TabsListItemBase with href and open=true', () => {
   expect(
     render(
       <TabsListItemBase href="/" open={true}>

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

@@ -5,7 +5,7 @@ exports[`renders the TabsPanelBase with active 1`] = `
   <div>
     <div
       aria-hidden="false"
-      class=" ds-tabs__panel ds-tabs__panel--visible"
+      class="ds-tabs__panel ds-tabs__panel--visible"
       role="tabpanel"
     >
       hello
@@ -19,7 +19,7 @@ exports[`renders the TabsPanelBase with active=false 1`] = `
   <div>
     <div
       aria-hidden="true"
-      class=" ds-tabs__panel"
+      class="ds-tabs__panel"
       role="tabpanel"
     >
       hello
@@ -33,7 +33,7 @@ exports[`renders the TabsPanelBase with active=true 1`] = `
   <div>
     <div
       aria-hidden="false"
-      class=" ds-tabs__panel ds-tabs__panel--visible"
+      class="ds-tabs__panel ds-tabs__panel--visible"
       role="tabpanel"
     >
       hello
@@ -47,7 +47,7 @@ exports[`renders the TabsPanelBase with no props 1`] = `
   <div>
     <div
       aria-hidden="true"
-      class=" ds-tabs__panel"
+      class="ds-tabs__panel"
       role="tabpanel"
     >
       hello

package/src/TabsPanelBase/index.test.tsx

@@ -4,7 +4,9 @@ import { render } from '@testing-library/react';
 import TabsPanelBase from '@digigov/react-core/TabsPanelBase';
 
 it('renders the TabsPanelBase with no props', () => {
-  expect(render(<TabsPanelBase>hello</TabsPanelBase>).baseElement).toMatchSnapshot();
+  expect(
+    render(<TabsPanelBase>hello</TabsPanelBase>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TabsPanelBase with active=true', () => {
@@ -14,7 +16,9 @@ it('renders the TabsPanelBase with active=true', () => {
 });
 
 it('renders the TabsPanelBase with active', () => {
-  expect(render(<TabsPanelBase active>hello</TabsPanelBase>).baseElement).toMatchSnapshot();
+  expect(
+    render(<TabsPanelBase active>hello</TabsPanelBase>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TabsPanelBase with active=false', () => {