@digigov/react-core 2.0.0-rc.24 → 2.0.0-rc.25

package/src/Table/index.test.tsx

@@ -5,21 +5,51 @@ import Table from '@digigov/react-core/Table';
 import TableBody from '@digigov/react-core/TableBody';
 
 it('renders the Table with no props', () => {
-  expect(render(<Table><TableBody></TableBody></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table>
+        <TableBody></TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the Table with dark headerVariant prop', () => {
-  expect(render(<Table headerVariant="dark"><TableBody></TableBody></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table headerVariant="dark">
+        <TableBody></TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the Table with light headerVariant prop', () => {
-  expect(render(<Table headerVariant="light"><TableBody></TableBody></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table headerVariant="light">
+        <TableBody></TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the Table with zebra prop', () => {
-  expect(render(<Table variant="zebra"><TableBody></TableBody></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table variant="zebra">
+        <TableBody></TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });
 
-it('renders the Table with zebra prop', () => {
-  expect(render(<Table verticalBorders><TableBody></TableBody></Table>).baseElement).toMatchSnapshot();
+it('renders the Table with verticalBorders prop', () => {
+  expect(
+    render(
+      <Table verticalBorders>
+        <TableBody></TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });

package/src/TableBody/index.test.tsx

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

package/src/TableCaption/index.test.tsx

@@ -5,29 +5,51 @@ import Table from '@digigov/react-core/Table';
 import TableCaption from '@digigov/react-core/TableCaption';
 
 it('renders the TableCaption with no props', () => {
-  expect(render(<Table><TableCaption>hello</TableCaption></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table>
+        <TableCaption>hello</TableCaption>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the TableCaption with size s prop', () => {
   expect(
-    render(<Table><TableCaption size={'sm'}>hello</TableCaption></Table>).baseElement
+    render(
+      <Table>
+        <TableCaption size={'sm'}>hello</TableCaption>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableCaption with size m prop', () => {
   expect(
-    render(<Table><TableCaption size={'md'}>hello</TableCaption></Table>).baseElement
+    render(
+      <Table>
+        <TableCaption size={'md'}>hello</TableCaption>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableCaption with size x prop', () => {
   expect(
-    render(<Table><TableCaption size={'lg'}>hello</TableCaption></Table>).baseElement
+    render(
+      <Table>
+        <TableCaption size={'lg'}>hello</TableCaption>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the TableCaption with size xl prop', () => {
   expect(
-    render(<Table><TableCaption size={'xl'}>hello</TableCaption></Table>).baseElement
+    render(
+      <Table>
+        <TableCaption size={'xl'}>hello</TableCaption>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });

package/src/TableContainer/index.test.tsx

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

package/src/TableDataCell/index.test.tsx

@@ -3,15 +3,33 @@ import { render } from '@testing-library/react';
 
 import Table from '@digigov/react-core/Table';
 import TableBody from '@digigov/react-core/TableBody';
-import TableRow from '@digigov/react-core/TableRow';
 import TableDataCell from '@digigov/react-core/TableDataCell';
+import TableRow from '@digigov/react-core/TableRow';
 
 it('renders the Table with no props', () => {
-  expect(render(<Table><TableBody><TableRow><TableDataCell>hello</TableDataCell></TableRow></TableBody></Table>).baseElement).toMatchSnapshot();
+  expect(
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableDataCell>hello</TableDataCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the Table with dataType numeric prop', () => {
   expect(
-    render(<Table><TableBody><TableRow><TableDataCell dataType="numeric">hello</TableDataCell></TableRow></TableBody></Table>).baseElement
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableDataCell dataType="numeric">hello</TableDataCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    ).baseElement
   ).toMatchSnapshot();
 });

package/src/TableHead/index.test.tsx

@@ -3,9 +3,19 @@ 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();
 });

package/src/TableHead/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface TableHeadProps extends BaseProps<'thead'> { }
+export interface TableHeadProps extends BaseProps<'thead'> {}
 /**
  * Use TableHead inside the Table component to provide the header row and/or column of the table.
  */

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/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/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/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/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/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/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

@@ -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
+        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,7 +48,6 @@ exports[`renders the TabsListItemBase with open=false 1`] = `
       role="presentation"
     >
       <a
-        aria-selected="false"
         class="ds-tabs__tab"
         role="tab"
       >
@@ -57,15 +58,15 @@ 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"
+        aria-selected="false"
         class="ds-tabs__tab"
         role="tab"
       >
@@ -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
@@ -86,7 +87,6 @@ exports[`renders the TabsListItemBase with open=true 2`] = `
       <a
         aria-selected="true"
         class="ds-tabs__tab"
-        href="/"
         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}>