@digigov/react-core 2.0.0-298cfc51 → 2.0.0-30d44ed9

package/src/SkipLink/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface LinkProps extends BaseProps<'a'> { }
+export interface LinkProps extends BaseProps<'a'> {}
 /**
  * Use the skip link component to help keyboard-only users skip to the main content on a page.
  */

package/src/Stack/index.test.tsx

@@ -8,37 +8,59 @@ it('renders the Stack with no props', () => {
 });
 
 it('renders the Stack with direction="column"', () => {
-  expect(render(<Stack direction="column">hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack direction="column">hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with direction="row"', () => {
-  expect(render(<Stack direction="row">hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack direction="row">hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with flexWrap="wrap"', () => {
-  expect(render(<Stack flexWrap="wrap">hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack flexWrap="wrap">hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with flexWrap="nowrap"', () => {
-  expect(render(<Stack flexWrap="nowrap">hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack flexWrap="nowrap">hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with spacing={2}', () => {
-  expect(render(<Stack spacing={2}>hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack spacing={2}>hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with spacing={4}', () => {
-  expect(render(<Stack spacing={4}>hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack spacing={4}>hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with spacing={6}', () => {
-  expect(render(<Stack spacing={6}>hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack spacing={6}>hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with spacing={8}', () => {
-  expect(render(<Stack spacing={8}>hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack spacing={8}>hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with spacing={10}', () => {
-  expect(render(<Stack spacing={10}>hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack spacing={10}>hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with spacing={12}', () => {
-  expect(render(<Stack spacing={12}>hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack spacing={12}>hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with justifyContent="center"', () => {
-  expect(render(<Stack justifyContent="center">hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack justifyContent="center">hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with justifyContent="flex-start"', () => {
   expect(
@@ -66,22 +88,34 @@ it('renders the Stack with justifyContent="space-evenly"', () => {
   ).toMatchSnapshot();
 });
 it('renders the Stack with alignItems="flex-start"', () => {
-  expect(render(<Stack alignItems="flex-start">hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack alignItems="flex-start">hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with alignItems="flex-end"', () => {
-  expect(render(<Stack alignItems="flex-end">hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack alignItems="flex-end">hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with alignItems="center"', () => {
-  expect(render(<Stack alignItems="center">hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack alignItems="center">hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with alignItems="baseline"', () => {
-  expect(render(<Stack alignItems="baseline">hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack alignItems="baseline">hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with alignItems="stretch"', () => {
-  expect(render(<Stack alignItems="stretch">hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack alignItems="stretch">hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with alignContent="center"', () => {
-  expect(render(<Stack alignContent="center">hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack alignContent="center">hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with alignContent="flex-start"', () => {
   expect(
@@ -89,7 +123,9 @@ it('renders the Stack with alignContent="flex-start"', () => {
   ).toMatchSnapshot();
 });
 it('renders the Stack with alignContent="flex-end"', () => {
-  expect(render(<Stack alignContent="flex-end">hello</Stack>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Stack alignContent="flex-end">hello</Stack>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Stack with alignContent="space-around"', () => {
   expect(

package/src/Stack/index.tsx

@@ -42,13 +42,13 @@ export interface StackProps extends BaseProps<'div'> {
 }
 
 type SpacingValues = 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 11 | 12;
-type SpacingMediaValues = {
+interface SpacingMediaValues {
   xs?: SpacingValues;
   sm?: SpacingValues;
   md?: SpacingValues;
   lg?: SpacingValues;
   xl?: SpacingValues;
-};
+}
 /**
  * ...
  */

package/src/StepNavAccordion/index.test.tsx

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

package/src/StepNavAccordion/index.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface StepNavAccordionProps extends BaseProps<'details'> { }
+export interface StepNavAccordionProps extends BaseProps<'details'> {}
 /**
  * StepNavAccordion the main wrapper component.
  *
  *
  */
-// eslint-disable-next-line react/display-name
+
 export const StepNavAccordion = React.forwardRef<
   HTMLDetailsElement,
   StepNavAccordionProps

package/src/StepNavAccordionContent/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface StepNavAccordionContentProps extends BaseProps<'div'> { }
+export interface StepNavAccordionContentProps extends BaseProps<'div'> {}
 /**
  * StepNavAccordionContent should be inside the Accordion and it is the content of the section.
  * The content is only visible when the Accordion is 'open'.

package/src/StepNavAccordionHeadingText/index.test.tsx

@@ -5,7 +5,8 @@ import StepNavAccordionHeadingText from '@digigov/react-core/StepNavAccordionHea
 
 it('renders the StepNavAccordionHeadingText with no props', () => {
   expect(
-    render(<StepNavAccordionHeadingText>hello</StepNavAccordionHeadingText>).baseElement
+    render(<StepNavAccordionHeadingText>hello</StepNavAccordionHeadingText>)
+      .baseElement
   ).toMatchSnapshot();
 });
 

package/src/StepNavAccordionHeadingTitle/index.test.tsx

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

package/src/StepNavAccordionHeadingTitle/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface StepNavAccordionHeadingTitleProps extends BaseProps<'div'> { }
+export interface StepNavAccordionHeadingTitleProps extends BaseProps<'div'> {}
 /**
  * Use StepNavAccordionHeadingTitle as content title for StepNav component.
  * StepNavAccordionHeadingTitle must include StepNavAccordionHeadingText,

package/src/StepNavAccordionSummary/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface StepNavAccordionSummaryProps extends BaseProps<'summary'> { }
+export interface StepNavAccordionSummaryProps extends BaseProps<'summary'> {}
 /**
  * StepNavAccordionSummary is used as a wrapper component for StepNavAccordionSummaryHeading.
  */

package/src/StepNavCircleNumber/index.test.tsx

@@ -11,6 +11,7 @@ it('renders the StepNavCircleNumber with no props', () => {
 
 it('renders the StepNavCircleNumber with border false props', () => {
   expect(
-    render(<StepNavCircleNumber border={false}>hello</StepNavCircleNumber>).baseElement
+    render(<StepNavCircleNumber border={false}>hello</StepNavCircleNumber>)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/StepNavControls/index.test.tsx

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

package/src/StepNavControls/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface StepNavControlsProps extends BaseProps<'div'> { }
+export interface StepNavControlsProps extends BaseProps<'div'> {}
 /**
  * StepNavControls contains the StepByStepButton.
  * Use StepNavControls to the top of the step-by-step implementation .

package/src/StepNavList/index.test.tsx

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

package/src/StepNavList/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface StepNavListProps extends BaseProps<'ol'> { }
+export interface StepNavListProps extends BaseProps<'ol'> {}
 /**
  * List component is used for listing step buy step items.
  * This component must contain StepNavListItem component.

package/src/StepNavListItem/index.test.tsx

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

package/src/StepNavListItem/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface StepNavListItemProps extends BaseProps<'li'> { }
+export interface StepNavListItemProps extends BaseProps<'li'> {}
 /**
  * StepNavListItem must be inside StepByStepList compoenent.
  */

package/src/SummaryList/index.test.tsx

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

package/src/SummaryListItem/index.test.tsx

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

package/src/SummaryListItemAction/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface SummaryListItemActionProps extends BaseProps<'dd'> { }
+export interface SummaryListItemActionProps extends BaseProps<'dd'> {}
 /**
  * SummaryListItemAction is used within the SummaryListItem component.
  * In this column we place the action that the user can do, based on the information on the rest of the row.

package/src/SummaryListItemValue/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface SummaryListItemValueProps extends BaseProps<'dd'> { }
+export interface SummaryListItemValueProps extends BaseProps<'dd'> {}
 /**
  * Details for the SummaryListItemValue.
  */

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

@@ -42,11 +42,11 @@ exports[`renders the Table with no props 1`] = `
 </body>
 `;
 
-exports[`renders the Table with zebra prop 1`] = `
+exports[`renders the Table with verticalBorders prop 1`] = `
 <body>
   <div>
     <table
-      class="ds-table ds-table--zebra"
+      class="ds-table ds-table--vertical-lines"
     >
       <tbody
         class="ds-table__body"
@@ -56,11 +56,11 @@ exports[`renders the Table with zebra prop 1`] = `
 </body>
 `;
 
-exports[`renders the Table with zebra prop 2`] = `
+exports[`renders the Table with zebra prop 1`] = `
 <body>
   <div>
     <table
-      class="ds-table ds-table--vertical-lines"
+      class="ds-table ds-table--zebra"
     >
       <tbody
         class="ds-table__body"

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/Table/index.tsx

@@ -47,6 +47,15 @@ export interface TableProps extends BaseProps<'table'> {
    * @default 'default'
    */
   variant?: 'zebra' | 'default';
+  /**
+   * verticalAlign is optional.
+   * The verticalAlign property sets vertical alignment of the table-cells.
+   * @value 'top'
+   * @value 'middle'
+   * @value 'bottom'
+   * @default 'middle'
+   */
+  verticalAlign?: 'top' | 'middle' | 'bottom';
 }
 /**
  * Table component is used to wrap the sub components of a table
@@ -59,6 +68,7 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
       dense = false,
       verticalBorders = false,
       stacked = 'never',
+      verticalAlign = 'middle',
       className,
       children,
       ...props
@@ -79,6 +89,8 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
           'ds-table--dense': dense,
           'ds-table--zebra': variant === 'zebra',
           'ds-table--vertical-lines': verticalBorders,
+          'ds-table--align-top': verticalAlign === 'top',
+          'ds-table--align-bottom': verticalAlign === 'bottom',
         })}
         {...props}
       >

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/__snapshots__/index.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`renders the Table with dataType numeric prop 1`] = `
           class="ds-table__row"
         >
           <td
-            class="ds-table__cell ds-table__cell--numeric"
+            class="ds-table__cell ds-table__cell--border ds-table__cell--numeric"
           >
             hello
           </td>
@@ -37,7 +37,7 @@ exports[`renders the Table with no props 1`] = `
           class="ds-table__row"
         >
           <td
-            class="ds-table__cell"
+            class="ds-table__cell ds-table__cell--border"
           >
             hello
           </td>

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/TableDataCell/index.tsx

@@ -13,6 +13,19 @@ export interface TableDataCellProps extends BaseProps<'td'> {
    * @default 'text'
    */
   dataType?: 'text' | 'numeric';
+  /**
+   * variant is optional.
+   * Use this prop to control the bottom border of the table-cell.
+   * @value 'border'
+   * @value 'none'
+   * @default 'border'
+   */
+  variant?: 'border' | 'none';
+  /**
+   * wordBreak is optional.
+   * Use this prop to control the word break of the table-cell contents.
+   */
+  wordBreak?: 'break-all' | 'none';
 }
 /**
  * Use TableDataCell inside the Table component to fill the data of a cell in a table.
@@ -21,7 +34,14 @@ export const TableDataCell = React.forwardRef<
   HTMLTableCellElement,
   TableDataCellProps
 >(function TableDataCell(
-  { dataType = 'text', className, children, ...props },
+  {
+    dataType = 'text',
+    variant = 'border',
+    wordBreak = 'none',
+    className,
+    children,
+    ...props
+  },
   ref
 ) {
   return (
@@ -30,6 +50,8 @@ export const TableDataCell = React.forwardRef<
       ref={ref}
       className={clsx(className, {
         'ds-table__cell': true,
+        'ds-table__cell--border': variant === 'border',
+        'ds-table__cell--break-all': wordBreak === 'break-all',
         'ds-table__cell--numeric': dataType === 'numeric',
       })}
       {...props}