feat(Table): add table "border" and "outline" property (#1739)

dnbexperience · Mar 27, 2023 · c86a1ee · c86a1ee
1 parent 6bfd1b6
commit c86a1ee
Show file tree

Hide file tree

Showing 17 changed files with 348 additions and 41 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.tsx
@@ -98,7 +98,7 @@ export const TableVariantComplex = () => (
     scope={{ MaxWidth }}
   >
     <MaxWidth>
-      <Table>
+      <Table border outline>
         <caption>A Table Caption</caption>
         <thead>
           <Tr noWrap>
@@ -130,23 +130,19 @@ export const TableVariantComplex = () => (
               newline
             </Td>
             <Td>Row 3</Td>
-            <Td noSpacing>
+            <Td spacing="horizontal">
               <Button variant="secondary">Button</Button>
             </Td>
-            <Td>Row 3</Td>
+            <Td noSpacing align="right">
+              <Code>Row 3</Code>
+            </Td>
           </Tr>
           <Tr>
             <Td>Row 4</Td>
             <Td>Row 4</Td>
-            <Td>Row 4</Td>
-            <Td>Row 4</Td>
+            <Td colSpan={2}>Row 4</Td>
           </Tr>
         </tbody>
-        <tfoot>
-          <Tr variant="odd">
-            <Td colSpan={4}>Footer</Td>
-          </Tr>
-        </tfoot>
       </Table>
     </MaxWidth>
   </ComponentBox>

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/table/demos.md
@@ -35,7 +35,7 @@ You can force a row to overwrite the automated odd/even counting by providing e.
 
 ```jsx
 <tbody>
-  <!-- place it at the beginning of your table body -->
+  {/* place it at the beginning of your table body */}
   <Table.StickyHelper />
 
   <tr>...</tr>
@@ -46,8 +46,6 @@ You can force a row to overwrite the automated odd/even counting by providing e.
 
 ### Table with long header text (wrapping)
 
-Also, the table header is set to **small** font-size.
-
 <TableLongHeader />
 
 ### Example usage of class helpers

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/table/properties.md
@@ -8,6 +8,8 @@ showTabs: true
 
 | Properties                                  | Description                                                                                                                                                                                          |
 | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `border`                                    | _(optional)_ use `true` to show borders between table data cells. Defaults to `false`.                                                                                                               |
+| `outline`                                   | _(optional)_ use `true` to show a outline border around the table. Defaults to `false`.                                                                                                              |
 | `sticky`                                    | _(optional)_ use `true` to enable a sticky Table header. Defaults to `false`.                                                                                                                        |
 | `stickyOffset`                              | _(optional)_ defines the offset (top) in `rem` from where the header should start to stick. You may define your app header height here, if you have a sticky header on your page. Defaults to `0`.   |
 | ~~`variant`~~ (not implemented yet)         | _(coming)_ defines the style variant of the table. Options: `basis` . Defaults to `generic`.                                                                                                         |
@@ -34,6 +36,7 @@ showTabs: true
 
 ### Table Data `<Td>`
 
-| Properties  | Description                                                                   |
-| ----------- | ----------------------------------------------------------------------------- |
-| `noSpacing` | _(optional)_ if set to `true`, no padding will be added. Defaults to `false`. |
+| Properties  | Description                                                                               |
+| ----------- | ----------------------------------------------------------------------------------------- |
+| `noSpacing` | _(optional)_ if set to `true`, no padding will be added. Defaults to `false`.             |
+| `spacing`   | _(optional)_ set to `horizontal` for padding on left and right side. Defaults to `false`. |
diff --git a/packages/dnb-eufemia/src/components/table/Table.tsx b/packages/dnb-eufemia/src/components/table/Table.tsx
@@ -50,6 +50,18 @@ export type TableProps = {
    */
   variant?: TableVariants
 
+  /**
+   * Use `true` to show borders between table data cell
+   * Default: false
+   */
+  border?: boolean
+
+  /**
+   * Use `true` to show a outline border around the table
+   * Default: false
+   */
+  outline?: boolean
+
   /**
    * Defines if the table should behave with a fixed table layout, using: "table-layout: fixed;"
    * Default: null.
@@ -87,6 +99,8 @@ const Table = (componentProps: TableAllProps) => {
     sticky,
     stickyOffset, // eslint-disable-line
     fixed,
+    border,
+    outline,
     ...props
   } = allProps
 
@@ -124,6 +138,8 @@ const Table = (componentProps: TableAllProps) => {
             size && `dnb-table__size--${size}`,
             sticky && `dnb-table--sticky`,
             fixed && `dnb-table--fixed`,
+            border && `dnb-table--border`,
+            outline && `dnb-table--outline`,
             spacingClasses,
             skeletonClasses,
             className

diff --git a/packages/dnb-eufemia/src/components/table/TableTd.tsx b/packages/dnb-eufemia/src/components/table/TableTd.tsx
@@ -8,6 +8,12 @@ export type TableTdProps = {
    */
   noSpacing?: boolean
 
+  /**
+   * Set to `horizontal` for padding on left and right side
+   * Default: false
+   */
+  spacing?: 'horizontal'
+
   /**
    * The content of the component.
    * Default: null
@@ -19,14 +25,16 @@ export default function Td(
   componentProps: TableTdProps &
     React.TdHTMLAttributes<HTMLTableCellElement>
 ) {
-  const { className, children, noSpacing, ...props } = componentProps
+  const { className, children, noSpacing, spacing, ...props } =
+    componentProps
 
   return (
     <td
       role="cell"
       className={classnames(
         'dnb-table__td',
         noSpacing && 'dnb-table__td--no-spacing',
+        spacing && `dnb-table__td--spacing-${spacing}`,
         className
       )}
       {...props}

diff --git a/packages/dnb-eufemia/src/components/table/__tests__/Table.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/Table.test.tsx
@@ -118,6 +118,30 @@ describe('Table', () => {
     )
   })
 
+  it('should set the border class', () => {
+    render(
+      <Table border>
+        <BasicTable />
+      </Table>
+    )
+
+    expect(Array.from(screen.queryByRole('table').classList)).toContain(
+      'dnb-table--border'
+    )
+  })
+
+  it('should set the outline class', () => {
+    render(
+      <Table outline>
+        <BasicTable />
+      </Table>
+    )
+
+    expect(Array.from(screen.queryByRole('table').classList)).toContain(
+      'dnb-table--outline'
+    )
+  })
+
   it('should support spacing props', () => {
     render(
       <Table top="2rem">

diff --git a/packages/dnb-eufemia/src/components/table/__tests__/TableTd.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/TableTd.test.tsx
@@ -71,4 +71,38 @@ describe('TableTd', () => {
       'custom-class',
     ])
   })
+
+  it('should set noSpacing class', () => {
+    render(
+      <table>
+        <tbody>
+          <tr>
+            <TableTd noSpacing>td content</TableTd>
+          </tr>
+        </tbody>
+      </table>
+    )
+
+    const element = document.querySelector('td')
+    expect(Array.from(element.classList)).toContain(
+      'dnb-table__td--no-spacing'
+    )
+  })
+
+  it('should set spacing="horizontal" class', () => {
+    render(
+      <table>
+        <tbody>
+          <tr>
+            <TableTd spacing="horizontal">td content</TableTd>
+          </tr>
+        </tbody>
+      </table>
+    )
+
+    const element = document.querySelector('td')
+    expect(Array.from(element.classList)).toContain(
+      'dnb-table__td--spacing-horizontal'
+    )
+  })
 })
diff --git a/packages/dnb-eufemia/src/components/table/__tests__/TableTh.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/TableTh.test.tsx
@@ -40,6 +40,22 @@ describe('TableTh', () => {
     expect(attributes).toEqual(['role', 'class', 'scope'])
   })
 
+  it('should set the noWrap class', () => {
+    render(
+      <table>
+        <tbody>
+          <tr>
+            <TableTh noWrap>th content</TableTh>
+          </tr>
+        </tbody>
+      </table>
+    )
+
+    const element = document.querySelector('th')
+
+    expect(Array.from(element.classList)).toContain('dnb-table--no-wrap')
+  })
+
   it('should have role with columnheader as value', () => {
     render(
       <table>

diff --git a/packages/dnb-eufemia/src/components/table/__tests__/TableTr.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/TableTr.test.tsx
@@ -36,6 +36,22 @@ describe('TableTr', () => {
     expect(element.textContent).toBe('content')
   })
 
+  it('should set the noWrap class', () => {
+    render(
+      <table>
+        <tbody>
+          <TableTr noWrap>
+            <td>content</td>
+          </TableTr>
+        </tbody>
+      </table>
+    )
+
+    const element = document.querySelector('tr')
+
+    expect(Array.from(element.classList)).toContain('dnb-table--no-wrap')
+  })
+
   it('should include custom attributes', () => {
     render(
       <Table>