feat(Table): move to components and rewrite to TypeScript

In order to add more features to the Table, we move it over to be a component (with backwards compatibility) and rewrite it: - Rewrite to TypeScript - Rewrite to use React functional component - Rewrite Sticky Header to a independent Hook - Move Table to be a component for future features - Make it backwards compatible with /elements imports - Add integration tests - Keep visual tests as before - Add stories - Move and extend docs
dnbexperience · May 31, 2022 · 562940a · 562940a
1 parent 18b29cd
commit 562940a
Show file tree

Hide file tree

Showing 65 changed files with 2,196 additions and 1,270 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.md b/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.md
@@ -270,7 +270,7 @@ Get more details about the `@dnb/eufemia` [v5 release](/uilib/about-the-lib/rele
 - Read more about the `@dnb/eufemia` [v4.10 release](/uilib/releases/v4.10-info)
 - New component in the `@dnb/eufemia`: [GlobalStatus](/uilib/components/global-status)
 - Updated [FormStatus](/uilib/components/form-status) with new text color and new icon
-- Added link to example usage of a [Table](/uilib/elements/tables#working-demo) styles using `react-table`
+- Added link to example usage of a [Table](/uilib/elements/tables) styles using `react-table`
 - Added info about [Custom project Icons](/uilib/components/icon#custom-project-icons)
 
 ## July, 21. 2019

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases.md b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases.md
@@ -15,6 +15,8 @@ Here you find an overview of all major releases (versions) and changes, includin
 
 You may also have a look at the [<Icon icon={GithubLogo} size="default" /> **GitHub Releases**](https://github.com/dnbexperience/eufemia/releases) for versioning of the [@dnb/eufemia](/uilib/).
 
+<!-- - [**@dnb/eufemia@v10**](/uilib/about-the-lib/releases/eufemia/v10-info) _June, 1. 2022_ -->
+
 - [**@dnb/eufemia@v9**](/uilib/about-the-lib/releases/eufemia/v9-info) _March, 3. 2021_
 - [**dnb-ui-lib@v8**](/uilib/about-the-lib/releases/dnb-ui-lib/v8-info) _December, 15. 2020_
 - [**dnb-ui-lib@v7.2**](/uilib/about-the-lib/releases/dnb-ui-lib/v7.2-info) _November, 8. 2020_

diff --git a/...esign-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v6-info.md b/...esign-system-portal/src/docs/uilib/about-the-lib/releases/dnb-ui-lib/v6-info.md
@@ -129,7 +129,7 @@ With v6 the `dnb-ui-lib` has it's own localization to be used both for component
 - [Blockquote](/uilib/elements/blockquote) is now up to date `dnb-blockquote--no-background` to display a quote without the contrast background, but rather a transparent.
 - New helper class: `dnb-responsive-component` Makes some component form components, like [Input](/uilib/components/input) react to mobile sized screens. But as this can have some negative effects to have this enabled by default, you can enable this optionally by using this helper class.
 - New helper class: `dnb-sr-only--inline` for [using in inline text contexts](/uilib/helpers), to make a better NVDA user experience.
-- New [Table](/uilib/elements/tables#working-demo) style / icons on sorting buttons. Icon change: from `chevron` to `arrow`.
+- New [Table](/uilib/elements/tables) style / icons on sorting buttons. Icon change: from `chevron` to `arrow`.
 - All form components now have a `suffix` property e.g. [Slider](/uilib/components/slider).
 - [GlobalStatus](/uilib/components/global-status) now supports visual type of info: `state="info"`.
 - [FormStatus](/uilib/components/form-status) has now their own icons. You can [import these icons separately](/uilib/components/form-status#use-the-icons-only).

diff --git a/...-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md b/...-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md
@@ -18,6 +18,11 @@ v10 of @dnb/eufemia contains _breaking changes_. As a migration process, you can
 1. Find `use_navigation` and remove it or replace it with `mode="strict"` or `mode="loose"`.
 1. URL support has been removed – so props like `active_url`, `url`, `url_future`, and `url_passed` are not supported anymore. You have to handle it by yourself from inside your application.
 
+### Table
+
+1. Find the `sticky_offset` property and replace it with `stickyOffset`.
+1. Find the `/elements/Table` property and replace it with `/components/Table`.
+
 ## Install
 
 To upgrade to @dnb/eufemia v10 with NPM, use:
@@ -28,4 +33,4 @@ $ npm i @dnb/eufemia@10
 $ yarn add @dnb/eufemia@10
 ```
 
-_September, 1. 2021_
+_June, 1. 2022_
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/Examples.js
@@ -10,7 +10,7 @@ import styled from '@emotion/styled'
 
 import { Button } from '@dnb/eufemia/src/components'
 import { Table, P } from '@dnb/eufemia/src/elements'
-import { StickyHelper } from '@dnb/eufemia/src/elements/Table'
+import { StickyHelper } from '@dnb/eufemia/src/components/Table'
 import { hasSelectedText } from '@dnb/eufemia/src/shared/helpers'
 
 import { createPagination } from '@dnb/eufemia/src/components/Pagination'

diff --git a/...b-design-system-portal/src/docs/uilib/components/pagination/infinity-scroller/Examples.js b/...b-design-system-portal/src/docs/uilib/components/pagination/infinity-scroller/Examples.js
@@ -10,7 +10,7 @@ import styled from '@emotion/styled'
 
 import { Section, Space, Button } from '@dnb/eufemia/src/components'
 import { Table, H1, P, Ul } from '@dnb/eufemia/src/elements'
-import { StickyHelper } from '@dnb/eufemia/src/elements/Table'
+import { StickyHelper } from '@dnb/eufemia/src/components/Table'
 import { hasSelectedText } from '@dnb/eufemia/src/shared/helpers'
 
 import { createPagination } from '@dnb/eufemia/src/components/Pagination'

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table.md b/packages/dnb-design-system-portal/src/docs/uilib/components/table.md
@@ -0,0 +1,14 @@
+---
+title: 'Table'
+description: 'Enhanced HTML Table element'
+status: 'new'
+showTabs: true
+redirect_from:
+  - /uilib/elements/tables
+---
+
+import TableInfo from 'Docs/uilib/components/table/info'
+import TableDemos from 'Docs/uilib/components/table/demos'
+
+<TableInfo />
+<TableDemos />
diff --git a/...-portal/src/docs/uilib/elements/tables.md → ...c/docs/uilib/components/table/Examples.js b/...-portal/src/docs/uilib/elements/tables.md → ...c/docs/uilib/components/table/Examples.js
@@ -1,47 +1,76 @@
----
-title: 'Tables'
----
+/**
+ * UI lib Component Example
+ *
+ */
 
 import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
-import { css, Global } from '@emotion/react'
 
-<Global styles={css`body{ .dnb-app-content { overflow: visible; } }`} />
-
-# Tables
-
-The following table has a default style. But in future, there will be several extensions and styles to choose from.
-
-You may consider using `table-layout: fixed;`. You can use the modifier class in doing so: `.dnb-table--fixed`
-
-## Working Demo
-
-Check out a [working example on CodeSandbox](https://codesandbox.io/embed/eufemia-react-table-x4cwc), using `react-table`.
-
-## Classes
-
-**NB:** Tables get their default table style by only having correct markup and the **`.dnb-table`** class assigned.
-
-To enhance or manipulate the the table style, you can make use of a couple helper classes:
-
-- `.dnb-table--fixed` Table Layout
-- `.dnb-table__th` Table Header
-- `.dnb-table__td` Table Data
-- `.dnb-table__tr` Table Row
-- `.dnb-table__tr--even` Use this on a `tr` - if manual definition is needed
-- `.dnb-table__tr--odd` Use this on a `tr` - if manual definition is needed
-- `.dnb-table--no-wrap` Use this on a `th`
-- `.dnb-table--sortable` Use this on a `th` - sortable column
-- `.dnb-table--active` Use this on a `th` - current column is sorted
-- `.dnb-table--reversed` Use this on a `th` - defines the order
-- `.dnb-table--right` Use this on a `th`, `td` or `tr` - align the content to the right (or use `align="right"`)
-- `.dnb-table--center` Use this on a `th`, `td` or `tr` - align the content to the left (or use `align="center"`)
-
-<!-- - `.dnb-table--small` Use this on a `th`, `td` or `tr` - [font-size](/uilib/typography/font-size) is then `small` (`x-small` is also supported, but should generally be avoided due to bad accessibility) -->
-
-<!-- - `.dnb-table--tabular` Use this on the `table` root -->
-
-<ComponentBox hideCode data-visual-test="table-classes" caption="Example usage of class helpers">
-{`
+export const TableVariantBasic = () => (
+  <ComponentBox hideCode data-visual-test="table-default">
+    {
+      /* jsx */ `
+<Table className="dnb-table">
+  <caption>A Table Caption</caption>
+  <thead>
+    <tr>
+      <th scope="col" colSpan="2" className="dnb-table--no-wrap">
+        Header
+      </th>
+      <th scope="col" className="dnb-table--sortable dnb-table--reversed">
+        <Button
+          variant="tertiary"
+          icon="arrow-down"
+          text="Sortable"
+          title="Sort table column"
+          wrap="true"
+        />
+      </th>
+      <th scope="col" align="right" className="dnb-table--sortable dnb-table--active">
+        <Button
+          variant="tertiary"
+          icon="arrow-down"
+          text="Active"
+          title="Sort table column"
+          wrap="true"
+        />
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <P space={0}>Column 1 <b>width p</b></P>
+      </td>
+      <td>
+        <Code>Column 2 with code</Code>
+      </td>
+      <td>
+        <span>Column 3 with span</span>
+      </td>
+      <td align="right">Column 4</td>
+    </tr>
+    <tr>
+      <td colSpan="2">Column which spans over two columns</td>
+      <td>Column 3</td>
+      <td align="right">Column 4</td>
+    </tr>
+    <tr>
+      <td>Column 1</td>
+      <td>Column 2</td>
+      <td>Column 3</td>
+      <td align="right">Column 4</td>
+    </tr>
+  </tbody>
+</Table>
+`
+    }
+  </ComponentBox>
+)
+
+export const TableClassHelpers = () => (
+  <ComponentBox hideCode data-visual-test="table-classes">
+    {
+      /* jsx */ `
 <Table className="dnb-table">
   <thead>
     <tr className="dnb-table__tr">
@@ -77,25 +106,27 @@ To enhance or manipulate the the table style, you can make use of a couple helpe
     </tr>
   </tbody>
 </Table>
-`}
-</ComponentBox>
-
-## Default Table style
-
-<ComponentBox hideCode data-visual-test="table-default">
-{`
-<Table className="dnb-table">
-  <caption>A Table Caption</caption>
+`
+    }
+  </ComponentBox>
+)
+
+export const TableLongHeader = () => (
+  <ComponentBox hideCode data-visual-test="table-header">
+    {
+      /* jsx */ `
+<Table>
+  <caption className="dnb-sr-only">A Table Caption</caption>
   <thead>
-    <tr>
-      <th scope="col" colSpan="2" className="dnb-table--no-wrap">
-        Header
+    <tr className="dnb-table--small">
+      <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">
         <Button
           variant="tertiary"
           icon="arrow-down"
-          text="Sortable"
+          text="Sortable long header ridiculus laoreet turpis netus at vitae"
           title="Sort table column"
           wrap="true"
         />
@@ -104,7 +135,7 @@ To enhance or manipulate the the table style, you can make use of a couple helpe
         <Button
           variant="tertiary"
           icon="arrow-down"
-          text="Active"
+          text="Active and right aligned long header ridiculus laoreet turpis netus at vitae"
           title="Sort table column"
           wrap="true"
         />
@@ -113,41 +144,21 @@ To enhance or manipulate the the table style, you can make use of a couple helpe
   </thead>
   <tbody>
     <tr>
-      <td>
-        <p className="dnb-p">
-          Column 1 <b>width p</b>
-        </p>
-      </td>
-      <td>
-        <code className="dnb-code">Column 2 with code</code>
-      </td>
-      <td>
-        <span>Column 3 with span</span>
+      <td colSpan="4">
+        <P space={0}>col span of 4</P>
       </td>
-      <td align="right">Column 4</td>
-    </tr>
-    <tr>
-      <td colSpan="2">Column which spans over two columns</td>
-      <td>Column 3</td>
-      <td align="right">Column 4</td>
-    </tr>
-    <tr>
-      <td>Column 1</td>
-      <td>Column 2</td>
-      <td>Column 3</td>
-      <td align="right">Column 4</td>
     </tr>
   </tbody>
 </Table>
-`}
-</ComponentBox>
-
-## 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).
-
-<ComponentBox hideCode data-visual-test="table-sticky">
-{`
+`
+    }
+  </ComponentBox>
+)
+
+export const TableSticky = () => (
+  <ComponentBox hideCode data-visual-test="table-sticky">
+    {
+      /* jsx */ `
 <Table sticky={true} sticky_offset="4rem" className="dnb-table--fixed">
   <caption className="dnb-sr-only">A Table Caption</caption>
   <thead>
@@ -185,12 +196,10 @@ To enhance or manipulate the the table style, you can make use of a couple helpe
     <Table.StickyHelper />
     <tr>
       <td>
-        <p className="dnb-p">
-          Column 1 <b>width p</b>
-        </p>
+        <P space={0}>Column 1 <b>width p</b></P>
       </td>
       <td>
-        <code className="dnb-code">Column 2 with code</code>
+        <Code>Column 2 with code</Code>
       </td>
       <td>
         <span>Column 3 with span</span>
@@ -210,51 +219,7 @@ To enhance or manipulate the the table style, you can make use of a couple helpe
     </tr>
   </tbody>
 </Table>
-`}
-</ComponentBox>
-
-## Table with long header text (wrapping)
-
-Also, the table header is set to **small** font-size.
-
-<ComponentBox hideCode data-visual-test="table-header">
-{`
-<Table>
-  <caption className="dnb-sr-only">A Table Caption</caption>
-  <thead>
-    <tr className="dnb-table--small">
-      <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">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
-          text="Sortable long header ridiculus laoreet turpis netus at vitae"
-          title="Sort table column"
-          wrap="true"
-        />
-      </th>
-      <th scope="col" align="right" className="dnb-table--sortable dnb-table--active">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
-          text="Active and right aligned long header ridiculus laoreet turpis netus at vitae"
-          title="Sort table column"
-          wrap="true"
-        />
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td colSpan="4">
-        <p className="dnb-p">
-          col span of 4
-        </p>
-      </td>
-    </tr>
-  </tbody>
-</Table>
-`}
-</ComponentBox>
+`
+    }
+  </ComponentBox>
+)