@digigov/react-core 1.0.0-002c630d → 1.0.0-21c8c3dc

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

package/src/TableHeadCell/index.tsx

@@ -7,20 +7,23 @@ 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?: 'text' | 'numeric';
   /**
-   * cellWidth is optional.
-   * Use cellWidth prop to define a custom width for a specific reference number in your table cell.
-   *
+   * 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';
    */
-  cellWidth?:
-    | 'one-quarter'
-    | 'one-third'
-    | 'one-half'
-    | 'two-thirds'
-    | 'three-quarters'
-    | '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.
@@ -29,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 (
@@ -39,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/TableRow/__snapshots__/index.test.tsx.snap

@@ -1,5 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the Table with color="secondary" prop 1`] = `
+<ForwardRef(TableRow)
+  color="secondary"
+>
+  <ForwardRef(Base)
+    as="tr"
+    className="govgr-table__row--secondary govgr-table__row"
+  >
+    <tr
+      className="govgr-table__row--secondary govgr-table__row"
+    >
+      hello
+    </tr>
+  </ForwardRef(Base)>
+</ForwardRef(TableRow)>
+`;
+
+exports[`renders the Table with highlight prop 1`] = `
+<ForwardRef(TableRow)
+  highlight={true}
+>
+  <ForwardRef(Base)
+    as="tr"
+    className="govgr-table__row--highlight govgr-table__row"
+  >
+    <tr
+      className="govgr-table__row--highlight govgr-table__row"
+    >
+      hello
+    </tr>
+  </ForwardRef(Base)>
+</ForwardRef(TableRow)>
+`;
+
 exports[`renders the Table with no props 1`] = `
 <ForwardRef(TableRow)>
   <ForwardRef(Base)

package/src/TableRow/index.test.tsx

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