feat(Table): add Th.HelpButton to be used in Table Headers (#1711)

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

@@ -17,6 +17,7 @@ export const TableVariantBasic = () => (
     <Tr>
       <Th scope="col" colSpan={2} noWrap>
         Header
+        <Th.HelpButton>Help Content</Th.HelpButton>
       </Th>
       <Th scope="col" sortable reversed>
         <Th.SortButton
@@ -112,13 +113,13 @@ export const TableLongHeader = () => (
       <Th scope="col" colSpan="2">
         Static long header senectus ornare convallis ut at  erat imperdiet commodo
       </Th>
-      <Th scope="col" className="dnb-table--sortable dnb-table--reversed">
+      <Th scope="col" sortable reversed>
         <Th.SortButton
           text="Sortable long header ridiculus laoreet turpis netus at vitae"
           title="Sort table column"
         />
       </Th>
-      <Th scope="col" align="right" className="dnb-table--sortable dnb-table--active">
+      <Th scope="col" align="right" sortable active>
         <Th.SortButton
           text="Active and right aligned long header ridiculus laoreet turpis netus at vitae"
           title="Sort table column"
@@ -166,13 +167,13 @@ export const TableSticky = () => (
       <Th scope="col" colSpan="2">
         Header
       </Th>
-      <Th scope="col" className="dnb-table--sortable dnb-table--reversed">
+      <Th scope="col" sortable reversed>
         <Th.SortButton
           text="Sortable"
           title="Sort table column"
         />
       </Th>
-      <Th scope="col" className="dnb-table--sortable dnb-table--active">
+      <Th scope="col" sortable active>
         <Th.SortButton
           text="Active"
           title="Sort table column"
@@ -200,11 +201,11 @@ export const TableSticky = () => (
       </Td>
       <Td>Column 4</Td>
     </Tr>
-    <tr id="scroll-to-tr-id">
+    <Tr id="scroll-to-tr-id">
       <Td colSpan="2">Column which spans over two columns</Td>
       <Td>Column 3</Td>
       <Td>Column 4</Td>
-    </tr>
+    </Tr>
     <Tr>
       <Td>Column 1</Td>
       <Td>Column 2</Td>

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

@@ -6,16 +6,21 @@ showTabs: true
 
 The following table has a default style. But in future, there will be several extensions and styles to choose from.
 
-## Fixed layout
-
-You may consider using `table-layout: fixed;`. You can use the modifier property `fixed` for doing so.
-
 ## Accessibility
 
 Tables do both serve as a way of navigation for screen readers and other assertive technologies. But they also help to give data an ordered structure.
 
 Use the documentation from [MDN – The Table element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) for more information on making semantic correct tables, including `scope`, `align`, `colSpan` and `rowSpan`.
 
+## Table header components
+
+- `<Th.SortButton />` to be used for additional sorting functionality.
+- `<Th.HelpButton />` to be used for help related content.
+
 ## Alignment
 
 Use e.g. `align="right"` on a `<Th>`, `<Td>` or `<Tr>` to align a table header or a table data element.
+
+## Fixed layout
+
+You may consider using `table-layout: fixed;`. You can use the modifier property `fixed` for doing so and combine it with CSS e.g. `width: 40%` on spesific table headers.

packages/dnb-eufemia/src/components/table/TableHelpButton.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import classnames from 'classnames'
+import HelpButton from '../help-button/HelpButton'
+
+export default function TableHelpButton({ className = null, ...props }) {
+  return (
+    <HelpButton
+      className={classnames('dnb-table__help-button', className)}
+      size="small"
+      {...props}
+    />
+  )
+}

packages/dnb-eufemia/src/components/table/TableTh.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import classnames from 'classnames'
 import TableSortButton from './TableSortButton'
+import TableHelpButton from './TableHelpButton'
 
-export type TableThProps = {
-  /**
-   * The content of the table header given as Tr.
-   */
-  children: React.ReactNode
+export type TableThChildren =
+  | React.ReactNode
+  | ReturnType<typeof TableSortButton>
+  | ReturnType<typeof TableHelpButton>
 
+export type TableThProps = {
   /**
    * Defines the table header as sortable
    * Default: false
@@ -31,6 +32,11 @@ export type TableThProps = {
    * Default: false
    */
   noWrap?: boolean
+
+  /**
+   * The content of the table header given as Tr.
+   */
+  children: TableThChildren | Array<TableThChildren>
 }
 
 export default function Th(
@@ -66,3 +72,4 @@ export default function Th(
 }
 
 Th.SortButton = TableSortButton
+Th.HelpButton = TableHelpButton

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

@@ -2,6 +2,7 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import TableTh from '../TableTh'
 import TableSortButton from '../TableSortButton'
+import TableHelpButton from '../TableHelpButton'
 
 describe('TableTh', () => {
   it('should contain children content', () => {
@@ -133,7 +134,11 @@ describe('TableTh', () => {
     ])
   })
 
-  it('should have Th.AccordionContent', () => {
+  it('should have Th.SortButton', () => {
     expect(TableTh.SortButton).toBe(TableSortButton)
   })
+
+  it('should have Th.HelpButton', () => {
+    expect(TableTh.HelpButton).toBe(TableHelpButton)
+  })
 })

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

@@ -440,6 +440,9 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   .dnb-table > tbody > tr > th.dnb-table--no-wrap,
   .dnb-table .dnb-table__th.dnb-table--no-wrap {
     white-space: nowrap; }
+  .dnb-table .dnb-table__th .dnb-table__help-button,
+  .dnb-table > thead > tr > th .dnb-table__help-button {
+    margin-left: 0.5rem; }
 
 .dnb-spacing .dnb-table p,
 .dnb-spacing .dnb-table ul,

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

@@ -28,7 +28,7 @@ export const StickyBasicTable = () => {
       <thead>
         <Tr>
           <Th scope="col" colSpan={2}>
-            Header
+            Header <Th.HelpButton>Help content</Th.HelpButton>
           </Th>
           <Th scope="col" reversed sortable>
             <Th.SortButton text="Sortable" title="Sort table column" />

packages/dnb-eufemia/src/components/table/style/_table-sort.scss → packages/dnb-eufemia/src/components/table/style/_table-header-buttons.scss

@@ -11,7 +11,7 @@
   }
 }
 
-@mixin sortableTable {
+@mixin buttonsInTable {
   // sortable
   & > thead > tr > th#{&}--sortable,
   & &__th#{&}--sortable {
@@ -176,4 +176,11 @@
   & &__th#{&}--no-wrap {
     white-space: nowrap;
   }
+
+  & &__th,
+  & > thead > tr > th {
+    .dnb-table__help-button {
+      margin-left: 0.5rem;
+    }
+  }
 }

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

@@ -3,7 +3,7 @@
 *
 */
 
-@import './_table-sort.scss';
+@import './_table-header-buttons.scss';
 
 .dnb-table {
   display: table;
@@ -142,7 +142,7 @@
     }
   }
 
-  @include sortableTable();
+  @include buttonsInTable();
 }
 
 // Reset Table spacing