@digigov/react-core 1.0.0-002c630d → 1.0.0-480e3d97

package/src/SvgIcon/index.tsx

@@ -4,14 +4,29 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface SvgIconProps extends BaseProps<'svg'> {
   /**
+   * size is optional.
    * size prop declares the size of the svg icon.
-   * size is optional. The default value is 'md'.
+   * @value 'xs'
+   * @value 'sm'
+   * @value 'md'
+   * @value 'lg'
+   * @value 'xl'
+   * @default 'sm'
    */
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
   /**
    * variant property styles svg icon with Gov.gr palette's basic colors.
    * variant property is optional.
+   * @value 'dark'
+   * @value 'light'
+   * @value 'gray'
+   * @value 'primary'
+   * @value 'success'
+   * @value 'warning'
+   * @value 'error'
+   * @value 'focus'
+   * @value 'link'
    */
   variant?:
     | 'dark'
@@ -44,11 +59,8 @@ export const SvgIcon = React.forwardRef<SVGSVGElement, SvgIconProps>(
           'govgr-svg-icon--error': variant === 'error',
           'govgr-svg-icon--focus': variant === 'focus',
           'govgr-svg-icon--link': variant === 'link',
-          'govgr-svg-icon--xs': size === 'sm',
-          'govgr-svg-icon--sm': size === 'md',
-          'govgr-svg-icon--md': size === 'lg',
-          'govgr-svg-icon--lg': size === 'xl',
-          'govgr-svg-icon--xl': size === 'xxl',
+          [`govgr-svg-icon--${size}`]: size !== undefined,
+
           'govgr-svg-icon': true,
         })}
         focusable="false"

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the Table with dark variant prop 1`] = `
+exports[`renders the Table with dark headerVariant prop 1`] = `
 <ForwardRef(Table)
-  variant="dark"
+  headerVariant="dark"
 >
   <ForwardRef(Base)
     as="table"
@@ -17,9 +17,9 @@ exports[`renders the Table with dark variant prop 1`] = `
 </ForwardRef(Table)>
 `;
 
-exports[`renders the Table with light variant prop 1`] = `
+exports[`renders the Table with light headerVariant prop 1`] = `
 <ForwardRef(Table)
-  variant="light"
+  headerVariant="light"
 >
   <ForwardRef(Base)
     as="table"
@@ -51,7 +51,7 @@ exports[`renders the Table with no props 1`] = `
 
 exports[`renders the Table with zebra prop 1`] = `
 <ForwardRef(Table)
-  zebra={true}
+  variant="zebra"
 >
   <ForwardRef(Base)
     as="table"
@@ -72,10 +72,10 @@ exports[`renders the Table with zebra prop 2`] = `
 >
   <ForwardRef(Base)
     as="table"
-    className="govgr-table--vertical-header govgr-table--vertical-lines govgr-table"
+    className="govgr-table--vertical-lines govgr-table"
   >
     <table
-      className="govgr-table--vertical-header govgr-table--vertical-lines govgr-table"
+      className="govgr-table--vertical-lines govgr-table"
     >
       hello
     </table>

package/src/Table/index.test.tsx

@@ -7,16 +7,16 @@ it('renders the Table with no props', () => {
   expect(mount(<Table>hello</Table>)).toMatchSnapshot();
 });
 
-it('renders the Table with dark variant prop', () => {
-  expect(mount(<Table variant="dark">hello</Table>)).toMatchSnapshot();
+it('renders the Table with dark headerVariant prop', () => {
+  expect(mount(<Table headerVariant="dark">hello</Table>)).toMatchSnapshot();
 });
 
-it('renders the Table with light variant prop', () => {
-  expect(mount(<Table variant="light">hello</Table>)).toMatchSnapshot();
+it('renders the Table with light headerVariant prop', () => {
+  expect(mount(<Table headerVariant="light">hello</Table>)).toMatchSnapshot();
 });
 
 it('renders the Table with zebra prop', () => {
-  expect(mount(<Table zebra>hello</Table>)).toMatchSnapshot();
+  expect(mount(<Table variant='zebra'>hello</Table>)).toMatchSnapshot();
 });
 
 it('renders the Table with zebra prop', () => {

package/src/Table/index.tsx

@@ -4,36 +4,49 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TableProps extends BaseProps<'table'> {
   /**
-   * variant is optional.
-   * The `variant` prop is used to either give blue background color to th tags
-   * or a light grey background.
-   * Default value is undefined which results to an opaque background color.
-   */
-  variant?: 'dark' | 'light';
+  * headerVariant is optional.
+  * The `headerVariant` prop is used to either give blue background color to th tags
+  * or a light grey background.
+  * Default value is undefined which results to an opaque background color.
+  * @value 'dark'
+  * @value 'light'
+  */
+  headerVariant?: 'dark' | 'light';
   /**
-   * dense is optional.
-   * The dense prop is used to make font size smaller and give
-   * extra padding.
-   */
+  * dense is optional.
+  * The dense prop is used to make font size smaller and give
+  * extra padding.
+  * @value true
+  * @value false
+  * @default false
+  */
   dense?: boolean;
   /**
-   * zebra is optional.
-   * The zebra prop is used to make zebra table lines.
-   * Default value is false.
-   */
-  zebra?: boolean;
-  /**
-   * verticalBorders is optional.
-   * The verticalBorders prop gives extra vertical lines to the table.
-   * Default value is false.
+  * verticalBorders is optional.
+  * The verticalBorders prop gives extra vertical lines to the table.
+  * @value true
+  * @value false
+  * @default false
    */
   verticalBorders?: boolean;
   /**
-   * stacked is optional.
-   * The stacked prop gives responsiveness to the table. If used, make sure to add "data-label" to TableDataCell components.
-   * Default value is never.
-   */
+  * stacked is optional.
+  * The stacked prop gives responsiveness to the table. If used, make sure to add "data-label" to TableDataCell components.
+  * Default value is never.
+  * @value 'always'
+  * @value 'sm'
+  * @value 'md'
+  * @value 'never'
+  * @default 'never'
+  */
   stacked?: 'always' | 'sm' | 'md' | 'never';
+  /**
+   * variant is optional.
+   * @value 'default'
+   * @value 'zebra' is used to make zebra table lines. If you have 'zebra' variant, color prop to TableRow component adds nothing. 
+   * @default 'default'
+   */
+  variant?: 'zebra' | 'default';
 }
 /**
  * Table component is used to wrap the sub components of a table
@@ -41,8 +54,8 @@ export interface TableProps extends BaseProps<'table'> {
 export const Table = React.forwardRef<HTMLTableElement, TableProps>(
   function Table(
     {
+      headerVariant,
       variant,
-      zebra = false,
       dense = false,
       verticalBorders = false,
       stacked = 'never',
@@ -61,10 +74,10 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
           'govgr-table--stacked-always': stacked === 'always',
           'govgr-table--stacked-sm': stacked === 'sm',
           'govgr-table--stacked-md': stacked == 'md',
-          'govgr-table--dark': variant === 'dark',
-          'govgr-table--light': variant === 'light',
-          'govgr-table--zebra': zebra,
+          'govgr-table--dark': headerVariant === 'dark',
+          'govgr-table--light': headerVariant === 'light',
           'govgr-table--dense': dense,
+          'govgr-table--zebra': variant === 'zebra',
           'govgr-table--vertical-lines': verticalBorders,
         })}
         {...props}

package/src/TableBody/index.tsx

@@ -4,9 +4,13 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TableBodyProps extends BaseProps<'tbody'> {
   /**
-   * verticalAlign is optional. Default value is 'middle'.
-   * This prop set the vertical align of the body's content.
-   */
+  * verticalAlign is optional. Default value is 'middle'.
+  * This prop set the vertical align of the body's content.
+  * @value 'middle'
+  * @value 'top'
+  * @value 'bottom'
+  * @default 'middle'
+  */
   verticalAlign?: 'middle' | 'top' | 'bottom';
 }
 /**

package/src/TableCaption/index.tsx

@@ -4,10 +4,15 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TableCaptionProps extends BaseProps<'caption'> {
   /**
-   * size is optional.
-   * The props are 'sm' for small, 'md' for medium, 'lg' for large and 'xl' for extra large .
-   * Default value is 'md'.
-   */
+  * size is optional.
+  * The props are 'sm' for small, 'md' for medium, 'lg' for large and 'xl' for extra large .
+  * Default value is 'md'.
+  * @value 'sm'
+  * @value 'md'
+  * @value 'lg'
+  * @value 'xl'
+  * @default 'md'
+  */
   size?: 'sm' | 'md' | 'lg' | 'xl';
 }
 /**
@@ -21,10 +26,7 @@ export const TableCaption = React.forwardRef<HTMLElement, TableCaptionProps>(
         ref={ref}
         className={clsx(className, {
           'govgr-table__caption': true,
-          'govgr-table__caption--sm': size === 'sm',
-          'govgr-table__caption--md': size === 'md',
-          'govgr-table__caption--lg': size === 'lg',
-          'govgr-table__caption--xl': size === 'xl',
+          [`govgr-table__caption--${size}`]: size !== undefined,
         })}
         {...props}
       >

package/src/TableContainer/index.tsx

@@ -4,8 +4,11 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TableContainerProps extends BaseProps<'div'> {
   /**
-   * border is optional. Set to true if you need a border for the Table.
-   */
+  * border is optional. Set to true if you need a border for the Table.
+  * @value true
+  * @value false
+  * @default false
+  */
   border?: boolean;
 }
 /**

package/src/TableDataCell/index.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+// import PhaseBannerTag from '@digigov/react-core/PhaseBannerTag';
 
 export interface TableDataCellProps extends BaseProps<'td'> {
   /**
-   * dataType is optional.
-   * Use numeric value when comparing columns of numbers, align the numbers to the right in table cells
-   * Default value is text which aligns texts to the center
-   */
+  * dataType is optional.
+  * Use numeric value 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';
 }
 /**

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();
 });