@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-871b6be5

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

@@ -32,187 +32,187 @@ exports[`renders the Table with no props 1`] = `
 </ForwardRef(TableHeadCell)>
 `;
 
-exports[`renders the TableHeadCell dataType="numeric" and with cellWidth=full 1`] = `
+exports[`renders the TableHeadCell dataType="numeric" and with width=full 1`] = `
 <ForwardRef(TableHeadCell)
-  cellWidth="full"
   dataType="numeric"
+  width="full"
 >
   <ForwardRef(Base)
     as="th"
-    className="govgr-table__header--numeric govgr-!-width-full govgr-table__header"
+    className="govgr-!-width-full govgr-table__header--numeric govgr-table__header"
   >
     <th
-      className="govgr-table__header--numeric govgr-!-width-full govgr-table__header"
+      className="govgr-!-width-full govgr-table__header--numeric govgr-table__header"
     />
   </ForwardRef(Base)>
 </ForwardRef(TableHeadCell)>
 `;
 
-exports[`renders the TableHeadCell with cellWidth=full 1`] = `
+exports[`renders the TableHeadCell with dataType="numeric" and dataType="numeric" and   width=one-half 1`] = `
 <ForwardRef(TableHeadCell)
-  cellWidth="full"
+  dataType="numeric"
+  width="50%"
 >
   <ForwardRef(Base)
     as="th"
-    className="govgr-!-width-full govgr-table__header"
+    className="govgr-table__header--numeric govgr-!-width-one-half govgr-table__header"
   >
     <th
-      className="govgr-!-width-full govgr-table__header"
+      className="govgr-table__header--numeric govgr-!-width-one-half govgr-table__header"
     />
   </ForwardRef(Base)>
 </ForwardRef(TableHeadCell)>
 `;
 
-exports[`renders the TableHeadCell with cellWidth=one-half 1`] = `
+exports[`renders the TableHeadCell with dataType="numeric" and width=one-third 1`] = `
 <ForwardRef(TableHeadCell)
-  cellWidth="one-half"
+  dataType="numeric"
+  width="33.3%"
 >
   <ForwardRef(Base)
     as="th"
-    className="govgr-!-width-one-half govgr-table__header"
+    className="govgr-table__header--numeric govgr-!-width-one-third govgr-table__header"
   >
     <th
-      className="govgr-!-width-one-half govgr-table__header"
+      className="govgr-table__header--numeric govgr-!-width-one-third govgr-table__header"
     />
   </ForwardRef(Base)>
 </ForwardRef(TableHeadCell)>
 `;
 
-exports[`renders the TableHeadCell with cellWidth=one-quarter 1`] = `
+exports[`renders the TableHeadCell with dataType="numeric" and width=three-quarters 1`] = `
 <ForwardRef(TableHeadCell)
-  cellWidth="one-quarter"
+  dataType="numeric"
+  width="75%"
 >
   <ForwardRef(Base)
     as="th"
-    className="govgr-!-width-one-quarter govgr-table__header"
+    className="govgr-table__header--numeric govgr-!-width-three-quarters govgr-table__header"
   >
     <th
-      className="govgr-!-width-one-quarter govgr-table__header"
+      className="govgr-table__header--numeric govgr-!-width-three-quarters govgr-table__header"
     />
   </ForwardRef(Base)>
 </ForwardRef(TableHeadCell)>
 `;
 
-exports[`renders the TableHeadCell with cellWidth=one-third 1`] = `
+exports[`renders the TableHeadCell with dataType="numeric" and width=two-thirds 1`] = `
 <ForwardRef(TableHeadCell)
-  cellWidth="one-third"
+  dataType="numeric"
+  width="66.6%"
 >
   <ForwardRef(Base)
     as="th"
-    className="govgr-!-width-one-third govgr-table__header"
+    className="govgr-table__header--numeric govgr-!-width-two-thirds govgr-table__header"
   >
     <th
-      className="govgr-!-width-one-third govgr-table__header"
+      className="govgr-table__header--numeric govgr-!-width-two-thirds govgr-table__header"
     />
   </ForwardRef(Base)>
 </ForwardRef(TableHeadCell)>
 `;
 
-exports[`renders the TableHeadCell with cellWidth=three-quarters 1`] = `
+exports[`renders the TableHeadCell with dataType="numeric" width=one-quarter 1`] = `
 <ForwardRef(TableHeadCell)
-  cellWidth="three-quarters"
+  dataType="numeric"
+  width="25%"
 >
   <ForwardRef(Base)
     as="th"
-    className="govgr-!-width-three-quarters govgr-table__header"
+    className="govgr-table__header--numeric govgr-!-width-one-quarter govgr-table__header"
   >
     <th
-      className="govgr-!-width-three-quarters govgr-table__header"
+      className="govgr-table__header--numeric govgr-!-width-one-quarter govgr-table__header"
     />
   </ForwardRef(Base)>
 </ForwardRef(TableHeadCell)>
 `;
 
-exports[`renders the TableHeadCell with cellWidth=two-thirds 1`] = `
+exports[`renders the TableHeadCell with width=full 1`] = `
 <ForwardRef(TableHeadCell)
-  cellWidth="two-thirds"
+  width="full"
 >
   <ForwardRef(Base)
     as="th"
-    className="govgr-!-width-two-thirds govgr-table__header"
+    className="govgr-!-width-full govgr-table__header"
   >
     <th
-      className="govgr-!-width-two-thirds govgr-table__header"
+      className="govgr-!-width-full govgr-table__header"
     />
   </ForwardRef(Base)>
 </ForwardRef(TableHeadCell)>
 `;
 
-exports[`renders the TableHeadCell with dataType="numeric" and cellWidth=one-third 1`] = `
+exports[`renders the TableHeadCell with width=one-half 1`] = `
 <ForwardRef(TableHeadCell)
-  cellWidth="one-third"
-  dataType="numeric"
+  width="50%"
 >
   <ForwardRef(Base)
     as="th"
-    className="govgr-!-width-one-third govgr-table__header--numeric govgr-table__header"
+    className="govgr-!-width-one-half govgr-table__header"
   >
     <th
-      className="govgr-!-width-one-third govgr-table__header--numeric govgr-table__header"
+      className="govgr-!-width-one-half govgr-table__header"
     />
   </ForwardRef(Base)>
 </ForwardRef(TableHeadCell)>
 `;
 
-exports[`renders the TableHeadCell with dataType="numeric" and cellWidth=three-quarters 1`] = `
+exports[`renders the TableHeadCell with width=one-quarter 1`] = `
 <ForwardRef(TableHeadCell)
-  cellWidth="three-quarters"
-  dataType="numeric"
+  width="25%"
 >
   <ForwardRef(Base)
     as="th"
-    className="govgr-!-width-three-quarters govgr-table__header--numeric govgr-table__header"
+    className="govgr-!-width-one-quarter govgr-table__header"
   >
     <th
-      className="govgr-!-width-three-quarters govgr-table__header--numeric govgr-table__header"
+      className="govgr-!-width-one-quarter govgr-table__header"
     />
   </ForwardRef(Base)>
 </ForwardRef(TableHeadCell)>
 `;
 
-exports[`renders the TableHeadCell with dataType="numeric" and cellWidth=two-thirds 1`] = `
+exports[`renders the TableHeadCell with width=one-third 1`] = `
 <ForwardRef(TableHeadCell)
-  cellWidth="two-thirds"
-  dataType="numeric"
+  width="33.3%"
 >
   <ForwardRef(Base)
     as="th"
-    className="govgr-!-width-two-thirds govgr-table__header--numeric govgr-table__header"
+    className="govgr-!-width-one-third govgr-table__header"
   >
     <th
-      className="govgr-!-width-two-thirds govgr-table__header--numeric govgr-table__header"
+      className="govgr-!-width-one-third govgr-table__header"
     />
   </ForwardRef(Base)>
 </ForwardRef(TableHeadCell)>
 `;
 
-exports[`renders the TableHeadCell with dataType="numeric" and dataType="numeric" and   cellWidth=one-half 1`] = `
+exports[`renders the TableHeadCell with width=three-quarters 1`] = `
 <ForwardRef(TableHeadCell)
-  cellWidth="one-half"
-  dataType="numeric"
+  width="75%"
 >
   <ForwardRef(Base)
     as="th"
-    className="govgr-!-width-one-half govgr-table__header--numeric govgr-table__header"
+    className="govgr-!-width-three-quarters govgr-table__header"
   >
     <th
-      className="govgr-!-width-one-half govgr-table__header--numeric govgr-table__header"
+      className="govgr-!-width-three-quarters govgr-table__header"
     />
   </ForwardRef(Base)>
 </ForwardRef(TableHeadCell)>
 `;
 
-exports[`renders the TableHeadCell with dataType="numeric" cellWidth=one-quarter 1`] = `
+exports[`renders the TableHeadCell with width=two-thirds 1`] = `
 <ForwardRef(TableHeadCell)
-  cellWidth="one-quarter"
-  dataType="numeric"
+  width="66.6%"
 >
   <ForwardRef(Base)
     as="th"
-    className="govgr-!-width-one-quarter govgr-table__header--numeric govgr-table__header"
+    className="govgr-!-width-two-thirds govgr-table__header"
   >
     <th
-      className="govgr-!-width-one-quarter govgr-table__header--numeric govgr-table__header"
+      className="govgr-!-width-two-thirds govgr-table__header"
     />
   </ForwardRef(Base)>
 </ForwardRef(TableHeadCell)>

package/src/TableHeadCell/index.test.tsx

@@ -13,93 +13,93 @@ it('renders the Table with dataType="numeric" prop', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the TableHeadCell with cellWidth=one-quarter', () => {
+it('renders the TableHeadCell with width=one-quarter', () => {
   expect(
-    mount(<TableHeadCell cellWidth={'one-quarter'}></TableHeadCell>)
+    mount(<TableHeadCell width={'25%'}></TableHeadCell>)
   ).toMatchSnapshot();
 });
 
-it('renders the TableHeadCell with cellWidth=one-third', () => {
+it('renders the TableHeadCell with width=one-third', () => {
   expect(
-    mount(<TableHeadCell cellWidth={'one-third'}></TableHeadCell>)
+    mount(<TableHeadCell width={'33.3%'}></TableHeadCell>)
   ).toMatchSnapshot();
 });
 
-it('renders the TableHeadCell with cellWidth=one-half', () => {
+it('renders the TableHeadCell with width=one-half', () => {
   expect(
-    mount(<TableHeadCell cellWidth={'one-half'}></TableHeadCell>)
+    mount(<TableHeadCell width={'50%'}></TableHeadCell>)
   ).toMatchSnapshot();
 });
 
-it('renders the TableHeadCell with cellWidth=two-thirds', () => {
+it('renders the TableHeadCell with width=two-thirds', () => {
   expect(
-    mount(<TableHeadCell cellWidth={'two-thirds'}></TableHeadCell>)
+    mount(<TableHeadCell width={'66.6%'}></TableHeadCell>)
   ).toMatchSnapshot();
 });
 
-it('renders the TableHeadCell with cellWidth=three-quarters', () => {
+it('renders the TableHeadCell with width=three-quarters', () => {
   expect(
-    mount(<TableHeadCell cellWidth={'three-quarters'}></TableHeadCell>)
+    mount(<TableHeadCell width={'75%'}></TableHeadCell>)
   ).toMatchSnapshot();
 });
 
-it('renders the TableHeadCell with cellWidth=full', () => {
+it('renders the TableHeadCell with width=full', () => {
   expect(
-    mount(<TableHeadCell cellWidth={'full'}></TableHeadCell>)
+    mount(<TableHeadCell width={'full'}></TableHeadCell>)
   ).toMatchSnapshot();
 });
 
-it('renders the TableHeadCell with dataType="numeric" cellWidth=one-quarter', () => {
+it('renders the TableHeadCell with dataType="numeric" width=one-quarter', () => {
   expect(
     mount(
       <TableHeadCell
         dataType="numeric"
-        cellWidth={'one-quarter'}
+        width={'25%'}
       ></TableHeadCell>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the TableHeadCell with dataType="numeric" and cellWidth=one-third', () => {
+it('renders the TableHeadCell with dataType="numeric" and width=one-third', () => {
   expect(
     mount(
-      <TableHeadCell dataType="numeric" cellWidth={'one-third'}></TableHeadCell>
+      <TableHeadCell dataType="numeric" width={'33.3%'}></TableHeadCell>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the TableHeadCell with dataType="numeric" and dataType="numeric" and   cellWidth=one-half', () => {
+it('renders the TableHeadCell with dataType="numeric" and dataType="numeric" and   width=one-half', () => {
   expect(
     mount(
-      <TableHeadCell dataType="numeric" cellWidth={'one-half'}></TableHeadCell>
+      <TableHeadCell dataType="numeric" width={'50%'}></TableHeadCell>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the TableHeadCell with dataType="numeric" and cellWidth=two-thirds', () => {
+it('renders the TableHeadCell with dataType="numeric" and width=two-thirds', () => {
   expect(
     mount(
       <TableHeadCell
         dataType="numeric"
-        cellWidth={'two-thirds'}
+        width={'66.6%'}
       ></TableHeadCell>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the TableHeadCell with dataType="numeric" and cellWidth=three-quarters', () => {
+it('renders the TableHeadCell with dataType="numeric" and width=three-quarters', () => {
   expect(
     mount(
       <TableHeadCell
         dataType="numeric"
-        cellWidth={'three-quarters'}
+        width={'75%'}
       ></TableHeadCell>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the TableHeadCell dataType="numeric" and with cellWidth=full', () => {
+it('renders the TableHeadCell dataType="numeric" and with width=full', () => {
   expect(
-    mount(<TableHeadCell dataType="numeric" cellWidth={'full'}></TableHeadCell>)
+    mount(<TableHeadCell dataType="numeric" width={'full'}></TableHeadCell>)
   ).toMatchSnapshot();
 });

package/src/TableHeadCell/index.tsx

@@ -4,32 +4,26 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TableHeadCellProps extends BaseProps<'th'> {
   /**
-  * dataType is optional.
-  * Use numeric value prop when comparing columns of numbers, align the numbers to the right in table cells.
-  * Default value is text which aligns texts to the center
-  * @value 'text'
-  * @value 'numeric'
-  * @default 'text'
-  */
+   * dataType is optional.
+   * Use numeric value prop when comparing columns of numbers, align the numbers to the right in table cells.
+   * Default value is text which aligns texts to the center
+   * @value 'text'
+   * @value 'numeric'
+   * @default 'text'
+   */
   dataType?: 'text' | 'numeric';
   /**
-  * cellWidth is optional.
-  * Use cellWidth prop to define a custom width for a specific reference number in your table cell.
-  *
-  * @value 'one-quarter'
-  * @value 'one-third'
-  * @value 'one-half'
-  * @value 'two-thirds'
-  * @value 'three-quarters'
-  * @value 'full'
-  */
-  cellWidth?:
-    | 'one-quarter'
-    | 'one-third'
-    | 'one-half'
-    | 'two-thirds'
-    | 'three-quarters'
-    | 'full';
+   * 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';
 }
 /**
  * Use TableHeadCell inside the Table component to provide the header row and/or column of the table.
@@ -38,7 +32,7 @@ export const TableHeadCell = React.forwardRef<
   HTMLTableCellElement,
   TableHeadCellProps
 >(function TableHeadCell(
-  { dataType = 'text', cellWidth, className, children, ...props },
+  { dataType = 'text', width, className, children, ...props },
   ref
 ) {
   return (
@@ -48,12 +42,12 @@ export const TableHeadCell = React.forwardRef<
       className={clsx(className, {
         'govgr-table__header': true,
         'govgr-table__header--numeric': dataType === 'numeric',
-        '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-!-width-one-quarter': width === '25%',
+        'govgr-!-width-one-third': width === '33.3%',
+        'govgr-!-width-one-half': width === '50%',
+        'govgr-!-width-two-thirds': width === '66.6%',
+        'govgr-!-width-three-quarters': width === '75%',
+        'govgr-!-width-full': width === 'full' || width === '100%',
       })}
       {...props}
     >

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

@@ -2,16 +2,33 @@
 
 exports[`renders the TabsHeading with no props 1`] = `
 <ForwardRef(TabsHeading)>
-  <ForwardRef(Base)
-    as="h6"
-    className="govgr-heading-sm govgr-tabs__title"
+  <ForwardRef(Hidden)
+    mdUp={true}
   >
-    <h6
-      className="govgr-heading-sm govgr-tabs__title"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-hidden-md--up"
     >
-      hello
-    </h6>
-  </ForwardRef(Base)>
+      <div
+        className="govgr-hidden-md--up"
+      >
+        <ForwardRef(Heading)
+          size="sm"
+        >
+          <ForwardRef(Base)
+            as="h4"
+            className="govgr-heading-sm"
+          >
+            <h4
+              className="govgr-heading-sm"
+            >
+              hello
+            </h4>
+          </ForwardRef(Base)>
+        </ForwardRef(Heading)>
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Hidden)>
 </ForwardRef(TabsHeading)>
 `;
 
@@ -19,16 +36,33 @@ exports[`renders the TabsHeading with size=m 1`] = `
 <ForwardRef(TabsHeading)
   size="md"
 >
-  <ForwardRef(Base)
-    as="h6"
-    className="govgr-heading-md govgr-tabs__title"
+  <ForwardRef(Hidden)
+    mdUp={true}
   >
-    <h6
-      className="govgr-heading-md govgr-tabs__title"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-hidden-md--up"
     >
-      hello
-    </h6>
-  </ForwardRef(Base)>
+      <div
+        className="govgr-hidden-md--up"
+      >
+        <ForwardRef(Heading)
+          size="md"
+        >
+          <ForwardRef(Base)
+            as="h3"
+            className="govgr-heading-md"
+          >
+            <h3
+              className="govgr-heading-md"
+            >
+              hello
+            </h3>
+          </ForwardRef(Base)>
+        </ForwardRef(Heading)>
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Hidden)>
 </ForwardRef(TabsHeading)>
 `;
 
@@ -36,15 +70,32 @@ exports[`renders the TabsHeading with size=s 1`] = `
 <ForwardRef(TabsHeading)
   size="sm"
 >
-  <ForwardRef(Base)
-    as="h6"
-    className="govgr-heading-sm govgr-tabs__title"
+  <ForwardRef(Hidden)
+    mdUp={true}
   >
-    <h6
-      className="govgr-heading-sm govgr-tabs__title"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-hidden-md--up"
     >
-      hello
-    </h6>
-  </ForwardRef(Base)>
+      <div
+        className="govgr-hidden-md--up"
+      >
+        <ForwardRef(Heading)
+          size="sm"
+        >
+          <ForwardRef(Base)
+            as="h4"
+            className="govgr-heading-sm"
+          >
+            <h4
+              className="govgr-heading-sm"
+            >
+              hello
+            </h4>
+          </ForwardRef(Base)>
+        </ForwardRef(Heading)>
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Hidden)>
 </ForwardRef(TabsHeading)>
 `;

package/src/TabsHeading/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import Hidden, { HiddenProps } from '@digigov/react-core/Hidden';
+import Heading from '@digigov/react-core/Heading';
 
-export interface TabsHeadingProps extends BaseProps<'h6'> {
+export interface TabsHeadingProps extends HiddenProps {
   /**
   * size is optional.
   * The values are 'md' for medium and 'sm' for small.
@@ -14,25 +14,16 @@ export interface TabsHeadingProps extends BaseProps<'h6'> {
   size?: 'md' | 'sm';
 }
 /**
- * TabsHeading should be inside the Tabs component. This heading is hidden on desktop screens, but it is always usefull for accessibility.
+ * TabsHeading should be inside the Tabs component. This heading is hidden on desktop screens, but it is always useful for accessibility.
  */
 export const TabsHeading = React.forwardRef<
   HTMLHeadingElement,
   TabsHeadingProps
 >(function TabsHeading({ size = 'sm', className, children, ...props }, ref) {
   return (
-    <Base
-      as="h6"
-      ref={ref}
-      className={clsx(className, {
-        'govgr-tabs__title': true,
-        'govgr-heading-md': size === 'md',
-        'govgr-heading-sm': size === 'sm',
-      })}
-      {...props}
-    >
-      {children}
-    </Base>
+    <Hidden ref={ref} {...props} mdUp>
+      <Heading size={size}>{children}</Heading>
+    </Hidden>
   );
 });
 

package/src/TabsListItem/index.test.tsx

@@ -7,30 +7,30 @@ it('renders the TabsListItem with no props', () => {
   expect(mount(<TabsListItem>hello</TabsListItem>)).toMatchSnapshot();
 });
 
-it('renders the TabsListItem with selected=true', () => {
+it('renders the TabsListItem with open=true', () => {
   expect(
-    mount(<TabsListItem selected={true}>hello</TabsListItem>)
+    mount(<TabsListItem open={true}>hello</TabsListItem>)
   ).toMatchSnapshot();
 });
 
-it('renders the TabsListItem with selected=false', () => {
+it('renders the TabsListItem with open=false', () => {
   expect(
-    mount(<TabsListItem selected={false}>hello</TabsListItem>)
+    mount(<TabsListItem open={false}>hello</TabsListItem>)
   ).toMatchSnapshot();
 });
-it('renders the TabsListItem with href and selected=false', () => {
+it('renders the TabsListItem with href and open=false', () => {
   expect(
     mount(
-      <TabsListItem href="/" selected={false}>
+      <TabsListItem href="/" open={false}>
         hello
       </TabsListItem>
     )
   ).toMatchSnapshot();
 });
-it('renders the TabsListItem with selected=true', () => {
+it('renders the TabsListItem with open=true', () => {
   expect(
     mount(
-      <TabsListItem href="/" selected={true}>
+      <TabsListItem href="/" open={true}>
         hello
       </TabsListItem>
     )