feat(Table): add Table.SortButton (#1709)

* Update snapshots * feat(Table): add Table.SortButton and align to column edges
dnbexperience · Mar 27, 2023 · 89e88d0 · 89e88d0
1 parent 003c78b
commit 89e88d0
Show file tree

Hide file tree

Showing 13 changed files with 288 additions and 406 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.js
@@ -19,21 +19,15 @@ export const TableVariantBasic = () => (
         Header
       </Th>
       <Th scope="col" sortable reversed>
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Th.SortButton
           text="Sortable"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
       <Th scope="col" align="right" sortable active>
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Th.SortButton
           text="Active"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
     </Tr>
@@ -80,21 +74,15 @@ export const TableClassHelpers = () => (
         .dnb-table__th
       </th>
       <th scope="col" className="dnb-table__th dnb-table--sortable dnb-table--reversed">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Th.SortButton
           text="dnb-table--reversed"
           title="dnb-table__th dnb-table--sortable dnb-table--reversed"
-          wrap="true"
         />
       </th>
       <th scope="col" className="dnb-table__th dnb-table--sortable dnb-table--active">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Th.SortButton
           text="dnb-table--active"
           title="dnb-table__th dnb-table--sortable dnb-table--active"
-          wrap="true"
         />
       </th>
     </tr>
@@ -125,21 +113,15 @@ export const TableLongHeader = () => (
         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"
+        <Th.SortButton
           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"
+        <Th.SortButton
           text="Active and right aligned long header ridiculus laoreet turpis netus at vitae"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
     </Tr>
@@ -185,21 +167,15 @@ export const TableSticky = () => (
         Header
       </Th>
       <Th scope="col" className="dnb-table--sortable dnb-table--reversed">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Th.SortButton
           text="Sortable"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
       <Th scope="col" className="dnb-table--sortable dnb-table--active">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Th.SortButton
           text="Active"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
     </Tr>

diff --git a/packages/dnb-eufemia/src/components/table/TableSortButton.tsx b/packages/dnb-eufemia/src/components/table/TableSortButton.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import classnames from 'classnames'
+import Button from '../button/Button'
+
+export default function TableSortButton({ className = null, ...props }) {
+  return (
+    <Button
+      className={classnames('dnb-table__sort-button', className)}
+      variant="tertiary"
+      icon="arrow-down"
+      wrap
+      {...props}
+    />
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/table/TableTh.tsx b/packages/dnb-eufemia/src/components/table/TableTh.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
+import TableSortButton from './TableSortButton'
 
 export type TableThProps = {
   /**
@@ -32,10 +33,10 @@ export type TableThProps = {
   noWrap?: boolean
 }
 
-const Th = (
+export default function Th(
   componentProps: TableThProps &
     React.ThHTMLAttributes<HTMLTableCellElement>
-) => {
+) {
   const {
     className,
     children,
@@ -64,4 +65,4 @@ const Th = (
   )
 }
 
-export default Th
+Th.SortButton = TableSortButton
diff --git a/packages/dnb-eufemia/src/components/table/__tests__/Table.screenshot.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/Table.screenshot.test.tsx
@@ -31,7 +31,7 @@ describe('Table screenshot', () => {
   it('have to match the default choice of table styles', async () => {
     const screenshot = await testPageScreenshot({
       style: {
-        width: '40rem',
+        width: '50rem',
       },
       selector: '[data-visual-test="table-default"] .dnb-table',
     })

diff --git a/packages/dnb-eufemia/src/components/table/__tests__/TableTh.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/TableTh.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import TableTh from '../TableTh'
+import TableSortButton from '../TableSortButton'
 
 describe('TableTh', () => {
   it('should contain children content', () => {
@@ -131,4 +132,8 @@ describe('TableTh', () => {
       'custom-class',
     ])
   })
+
+  it('should have Th.AccordionContent', () => {
+    expect(TableTh.SortButton).toBe(TableSortButton)
+  })
 })