feat(Table): support rowSpan (#1733)

* feat(Table): support rowSpan

* Update snapshots

packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.tsx

@@ -5,65 +5,132 @@
 
 import React from 'react'
 import { css, Global } from '@emotion/react'
+import styled from '@emotion/styled'
 import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
 import { P, Code } from '@dnb/eufemia/src/elements'
+import { ScrollView } from '@dnb/eufemia/src/fragments'
 import Table from '@dnb/eufemia/src/components/table/Table'
 import Th from '@dnb/eufemia/src/components/table/TableTh'
 import Td from '@dnb/eufemia/src/components/table/TableTd'
 import Tr from '@dnb/eufemia/src/components/table/TableTr'
 
 export const TableVariantBasic = () => (
   <ComponentBox hideCode data-visual-test="table-default">
-    <Table className="dnb-table">
+    <Table>
       <caption>A Table Caption</caption>
       <thead>
         <Tr>
-          <Th scope="col" colSpan={2} noWrap>
-            Header
-            <Th.HelpButton>Help Content</Th.HelpButton>
+          <Th scope="col">Column</Th>
+          <Th scope="col" noWrap>
+            Help Button<Th.HelpButton>Help Content</Th.HelpButton>
           </Th>
-          <Th scope="col" sortable reversed>
-            <Th.SortButton text="Sortable" title="Sort table column" />
+          <Th scope="col" noWrap sortable active>
+            <Th.SortButton
+              text="Sortable Active"
+              title="Sort table column"
+            />
           </Th>
-          <Th scope="col" align="right" sortable active>
-            <Th.SortButton text="Active" title="Sort table column" />
+          <Th scope="col" sortable reversed align="right">
+            <Th.SortButton text="Sortable" title="Sort table column" />
           </Th>
         </Tr>
       </thead>
       <tbody>
+        <Tr>
+          <Td>Row 1</Td>
+          <Td>Row 1</Td>
+          <Td>Row 1</Td>
+          <Td align="right">Row 1</Td>
+        </Tr>
+        <Tr>
+          <Td>Row 2</Td>
+          <Td>Row 2</Td>
+          <Td>Row 2</Td>
+          <Td align="right">Row 2</Td>
+        </Tr>
         <Tr>
           <Td>
-            <P space={0}>
-              Column 1 <b>width p</b>
-            </P>
+            <P>Row 3 with paragraph</P>
           </Td>
           <Td>
-            <Code>Column 2 with code</Code>
+            Row 3 with <Code>code</Code>
           </Td>
           <Td>
-            <span>Column 3 with span</span>
+            <P>
+              Row 3 with <b>medium paragraph</b>
+            </P>
           </Td>
-          <Td align="right">Column 4</Td>
+          <Td align="right">
+            Row 3 with <b>medium text</b>
+          </Td>
+        </Tr>
+      </tbody>
+    </Table>
+  </ComponentBox>
+)
+
+export const TableVariantComplex = () => (
+  <ComponentBox hideCode data-visual-test="table-complex">
+    <Table>
+      <caption>A Table Caption</caption>
+      <thead>
+        <Tr>
+          <Th scope="col" noWrap>
+            Column 1
+          </Th>
+          <Th scope="col" noWrap>
+            Column 2
+          </Th>
+          <Th scope="col" colSpan={2} noWrap>
+            Column 3 that spans
+          </Th>
+        </Tr>
+      </thead>
+      <tbody>
+        <Tr variant="even">
+          <th className="dnb-table__td" scope="row">
+            Row 1 header
+          </th>
+          <Td rowSpan={2}>Row 1 that spans</Td>
+          <Td>Row 1</Td>
+          <Td>Row 1</Td>
+        </Tr>
+        <Tr variant="even">
+          <th className="dnb-table__td" scope="row">
+            Row 2 header
+          </th>
+          <Td>Row 2</Td>
+          <Td>Row 2</Td>
         </Tr>
         <Tr>
-          <Td colSpan={2}>Column which spans over two columns</Td>
-          <Td>Column 3</Td>
-          <Td align="right">Column 4</Td>
+          <th className="dnb-table__td" scope="row">
+            Row 3 header
+          </th>
+          <Td>Row 3</Td>
+          <Td>Row 3</Td>
+          <Td>Row 3</Td>
         </Tr>
         <Tr>
-          <Td>Column 1</Td>
-          <Td>Column 2</Td>
-          <Td>Column 3</Td>
-          <Td align="right">Column 4</Td>
+          <th className="dnb-table__td" scope="row">
+            Row 4 header
+          </th>
+          <Td>Row 4</Td>
+          <Td>Row 4</Td>
+          <Td>Row 4</Td>
         </Tr>
       </tbody>
+      <tfoot>
+        <Tr variant="odd">
+          <Td colSpan={4}>Footer</Td>
+        </Tr>
+      </tfoot>
     </Table>
   </ComponentBox>
 )
 
 export const TableClassHelpers = () => (
   <ComponentBox hideCode data-visual-test="table-classes">
-    <Table className="dnb-table">
+    <table className="dnb-table">
       <thead>
         <tr className="dnb-table__tr">
           <th className="dnb-table__th">.dnb-table__th</th>
@@ -99,7 +166,7 @@ export const TableClassHelpers = () => (
           </td>
         </tr>
       </tbody>
-    </Table>
+    </table>
   </ComponentBox>
 )
 
@@ -130,7 +197,7 @@ export const TableLongHeader = () => (
       <tbody>
         <Tr>
           <Td colSpan={4}>
-            <P space={0}>col span of 4</P>
+            <P>col span of 4</P>
           </Td>
         </Tr>
       </tbody>
@@ -156,7 +223,7 @@ export const TableSticky = () => (
       `}
     />
     <ComponentBox hideCode data-visual-test="table-sticky">
-      <Table sticky={true} stickyOffset="4rem" fixed>
+      <Table sticky={true} stickyOffset="4rem">
         <caption className="dnb-sr-only">A Table Caption</caption>
         <thead>
           <Tr>
@@ -175,8 +242,8 @@ export const TableSticky = () => (
           <Table.StickyHelper />
           <Tr>
             <Td>
-              <P space={0}>
-                Column 1 <b>width p</b>
+              <P>
+                Column 1 <b>with p</b>
               </P>
             </Td>
             <Td>
@@ -185,18 +252,18 @@ export const TableSticky = () => (
             <Td>
               <span>Column 3 with span</span>
             </Td>
-            <Td>Column 4</Td>
+            <Td>Row 4</Td>
           </Tr>
           <Tr id="scroll-to-tr-id">
             <Td colSpan={2}>Column which spans over two columns</Td>
-            <Td>Column 3</Td>
-            <Td>Column 4</Td>
+            <Td>Row 3</Td>
+            <Td>Row 4</Td>
           </Tr>
           <Tr>
-            <Td>Column 1</Td>
-            <Td>Column 2</Td>
-            <Td>Column 3</Td>
-            <Td>Column 4</Td>
+            <Td>Row 1</Td>
+            <Td>Row 2</Td>
+            <Td>Row 3</Td>
+            <Td>Row 4</Td>
           </Tr>
         </tbody>
         <tfoot>

packages/dnb-design-system-portal/src/docs/uilib/components/table/demos.md

@@ -4,6 +4,7 @@ showTabs: true
 
 import {
 TableVariantBasic,
+TableVariantComplex,
 TableClassHelpers,
 TableLongHeader,
 TableSticky,
@@ -15,6 +16,12 @@ TableSticky,
 
 <TableVariantBasic />
 
+### Complex table
+
+You can force a row to overwrite the automated odd/even counting by providing e.g. `variant="even"` to a `<Tr />`. You can use this in combination with `rowSpan`.
+
+<TableVariantComplex />
+
 ### Table with sticky header
 
 **NB:** Keep in mind, you have to avoid using `overflow: hidden;` on any child elements to get `position: sticky;` to work. This is a know issue happening on every modern browser. There are various tricks, including [this deallocation / sync solution](https://uxdesign.cc/position-stuck-96c9f55d9526).

packages/dnb-eufemia/src/components/table/__tests__/Table.screenshot.test.tsx

@@ -38,6 +38,16 @@ describe('Table screenshot', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
+  it('have to match a complex table layout', async () => {
+    const screenshot = await testPageScreenshot({
+      style: {
+        width: '50rem',
+      },
+      selector: '[data-visual-test="table-complex"] .dnb-table',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
   it('have to match a sortable table header on focus', async () => {
     const selector =
       '[data-visual-test="table-classes"] th.dnb-table--sortable.dnb-table--reversed'

packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap

@@ -47,6 +47,10 @@ exports[`Table scss have to match default theme snapshot 1`] = `
     padding-bottom: calc(var(--spacing-small) * 1.188);
     /* 19/16 */
     color: var(--theme-color-black-80, currentColor); }
+    .dnb-table > tr > td[rowspan],
+    .dnb-table > tbody > tr > td[rowspan], .dnb-table__td[rowspan],
+    .dnb-table > tr > th[scope='row'][rowspan] {
+      vertical-align: baseline; }
   .dnb-table > tbody > tr,
   .dnb-table .dnb-table__tr,
   .dnb-table .dnb-table__tr--even {
@@ -221,6 +225,9 @@ exports[`Table scss have to match snapshot 1`] = `
   .dnb-table > thead > tr > th.dnb-table--x-small,
   .dnb-table > tbody > tr > td.dnb-table--x-small, .dnb-table__th.dnb-table--x-small, .dnb-table__td.dnb-table--x-small {
     font-size: var(--font-size-x-small); }
+  .dnb-table b,
+  .dnb-table strong {
+    font-weight: var(--font-weight-medium); }
   .dnb-table.dnb-skeleton > * {
     -webkit-text-fill-color: var(--skeleton-color); }
   .dnb-table > thead > tr > th.dnb-table--sortable,

packages/dnb-eufemia/src/components/table/stories/Table.stories.tsx

@@ -125,7 +125,7 @@ export const BasicTable = () => {
           </Tr>
           <Tr>
             <Td colSpan={2}>Column which spans over two columns</Td>
-            <Td>Column 3</Td>
+            <Td rowSpan={2}>Column 3</Td>
             <Td align="right">Column 4</Td>
           </Tr>
           <Tr>

packages/dnb-eufemia/src/components/table/style/_table.scss

@@ -136,6 +136,11 @@
 
   /* stylelint-enable */
 
+  b,
+  strong {
+    font-weight: var(--font-weight-medium);
+  }
+
   &.dnb-skeleton {
     > * {
       -webkit-text-fill-color: var(--skeleton-color);

packages/dnb-eufemia/src/components/table/style/themes/dnb-table-theme-ui.scss

@@ -56,6 +56,10 @@
     padding-bottom: calc(var(--spacing-small) * 1.188); /* 19/16 */
 
     color: var(--theme-color-black-80, currentColor);
+
+    &[rowspan] {
+      vertical-align: baseline;
+    }
   }
 
   // Needs a double & & for specificity