@oslokommune/punkt-react 11.12.4 → 11.13.0

package/src/components/table/Table.test.tsx

@@ -1,105 +1,64 @@
-import { render } from '@testing-library/react'
 import * as React from 'react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
 
 import { PktTable } from './Table'
 import { PktTableHeader } from './TableHeader'
+import { PktTableRow } from './TableRow'
+import { PktTableBody } from './TableBody'
+import { PktTableHeaderCell } from './TableHeaderCell'
+import { PktTableDataCell } from './TableDataCell'
 
-describe('<Table />', () => {
-  it('renders correctly without modifiers', () => {
-    const { asFragment } = render(
-      <PktTable>
-        <thead>
-          <tr>
-            <PktTableHeader>Header 1</PktTableHeader>
-            <PktTableHeader>Header 2</PktTableHeader>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Table data</td>
-            <td>Table data</td>
-          </tr>
-        </tbody>
-      </PktTable>,
-    )
+expect.extend(toHaveNoViolations)
 
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  it('renders correctly with modifier values true', () => {
-    const { asFragment } = render(
-      <PktTable
-        modifiers={{
-          info: true,
-          success: true,
-          strong: true,
-          shadow: true,
-        }}
-      >
-        <thead>
-          <tr>
-            <PktTableHeader>Header 1</PktTableHeader>
-            <PktTableHeader>Header 2</PktTableHeader>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Table data</td>
-            <td>Table data</td>
-          </tr>
-        </tbody>
-      </PktTable>,
-    )
-
-    expect(asFragment()).toMatchSnapshot()
-  })
-
-  it('renders correctly with modifier values false', () => {
-    const { asFragment } = render(
-      <PktTable
-        modifiers={{
-          info: false,
-          success: false,
-          strong: false,
-          shadow: false,
-        }}
-      >
-        <thead>
-          <tr>
-            <PktTableHeader>Header 1</PktTableHeader>
-            <PktTableHeader>Header 2</PktTableHeader>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Table data</td>
-            <td>Table data</td>
-          </tr>
-        </tbody>
+describe('<PktTable />', () => {
+  test('renders correctly with defaultprops', () => {
+    render(
+      <PktTable>
+        <PktTableHeader>
+          <PktTableRow>
+            <PktTableHeaderCell>Header 1</PktTableHeaderCell>
+            <PktTableHeaderCell>Header 2</PktTableHeaderCell>
+          </PktTableRow>
+        </PktTableHeader>
+        <PktTableBody>
+          <PktTableRow>
+            <PktTableDataCell>Table data 1</PktTableDataCell>
+            <PktTableDataCell>Table data 2</PktTableDataCell>
+          </PktTableRow>
+        </PktTableBody>
       </PktTable>,
     )
 
-    expect(asFragment()).toMatchSnapshot()
+    // Assert that the component renders its children correctly
+    expect(screen.getByTestId('pkt-table')).toHaveClass('pkt-table--basic')
+    expect(screen.getByText('Header 1')).toBeInTheDocument()
+    expect(screen.getByText('Header 2')).toBeInTheDocument()
+    expect(screen.getByText('Table data 1')).toBeInTheDocument()
+    expect(screen.getByText('Table data 2')).toBeInTheDocument()
   })
 
-  it('renders with responsive container', () => {
-    const { asFragment } = render(
-      <PktTable isResponsive={true}>
-        <thead>
-          <tr>
-            <PktTableHeader>Header 1</PktTableHeader>
-            <PktTableHeader>Header 2</PktTableHeader>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Table data</td>
-            <td>Table data</td>
-          </tr>
-        </tbody>
+  test('renders correctly with skin "zebra-blue" and compact set to true', () => {
+    render(
+      <PktTable skin="zebra-blue" compact>
+        <PktTableHeader>
+          <PktTableRow>
+            <PktTableHeaderCell>Header 1</PktTableHeaderCell>
+            <PktTableHeaderCell>Header 2</PktTableHeaderCell>
+          </PktTableRow>
+        </PktTableHeader>
+        <PktTableBody>
+          <PktTableRow>
+            <PktTableDataCell dataLabel="Header 1">Table data</PktTableDataCell>
+            <PktTableDataCell dataLabel="Header 2">Table data</PktTableDataCell>
+          </PktTableRow>
+        </PktTableBody>
       </PktTable>,
     )
 
-    expect(asFragment()).toMatchSnapshot()
+    // Assert that the component applies the props correctly
+    expect(screen.getByTestId('pkt-table')).toHaveClass('pkt-table--compact')
+    expect(screen.getByTestId('pkt-table')).toHaveClass('pkt-table--zebra-blue')
   })
 })

package/src/components/table/Table.tsx

@@ -1,35 +1,35 @@
 import classNames from 'classnames'
 import * as React from 'react'
 
-export type ModifierName = 'info' | 'success' | 'strong' | 'shadow'
+export type TTableSkin = 'basic' | 'zebra-blue'
 
-interface TableProps {
-  isResponsive?: boolean
-  modifiers?: { [key in ModifierName]?: boolean }
-  children: React.ReactNode | React.ReactNode[]
-}
-
-const ResponsiveWrapper = ({ isResponsive, children }: TableProps) => {
-  return isResponsive ? <div className="pkt-table-container">{children}</div> : <>{children}</>
+interface ITableProps {
+  compact?: boolean
+  skin?: 'basic' | 'zebra-blue'
+  responsiveView?: boolean
+  className?: string
+  children: React.ReactNode
 }
 
 export const PktTable = ({
-  isResponsive,
-  modifiers: { info = false, success = false, strong = false, shadow = false } = {},
+  className,
+  compact = false,
+  skin = 'basic',
+  responsiveView = true,
   children,
-}: TableProps) => {
+}: ITableProps) => {
   return (
-    <ResponsiveWrapper isResponsive={isResponsive}>
-      <table
-        className={classNames('pkt-table', {
-          'pkt-table--info': info,
-          'pkt-table--success': success,
-          'pkt-table--strong': strong,
-          'pkt-table--shadow': shadow,
-        })}
-      >
-        {children}
-      </table>
-    </ResponsiveWrapper>
+    <table
+      data-testid="pkt-table"
+      className={classNames(className, 'pkt-table', {
+        'pkt-table--responsive': responsiveView,
+        'pkt-table--compact': compact,
+        'pkt-table--basic': skin === 'basic',
+        'pkt-table--zebra-blue': skin === 'zebra-blue',
+      })}
+      role="table"
+    >
+      {children}
+    </table>
   )
 }

package/src/components/table/TableBody.tsx

@@ -0,0 +1,13 @@
+import classNames from 'classnames'
+import * as React from 'react'
+
+interface ITableBodyProps {
+  className?: string
+  children: React.ReactNode
+}
+
+export const PktTableBody = ({ children, className }: ITableBodyProps) => (
+  <tbody className={classNames(className, 'pkt-table__body', {})} role="rowgroup">
+    {children}
+  </tbody>
+)

package/src/components/table/TableDataCell.tsx

@@ -0,0 +1,19 @@
+import classNames from 'classnames'
+import * as React from 'react'
+
+interface ITableDataCellProps {
+  className?: string
+  children: React.ReactNode
+  dataLabel?: string
+}
+
+export const PktTableDataCell = ({ children, className, dataLabel }: ITableDataCellProps) => (
+  <td
+    className={classNames(className, 'pkt-table__data-cell', {})}
+    data-label={dataLabel}
+    role="cell"
+    data-testid="pkt-table__data-cell"
+  >
+    {children}
+  </td>
+)

package/src/components/table/TableHeader.tsx

@@ -1,7 +1,13 @@
+import classNames from 'classnames'
 import * as React from 'react'
 
-interface TableHeaderProps {
-  children: React.ReactNode | React.ReactNode[]
+interface ITableHeaderProps {
+  className?: string
+  children: React.ReactNode
 }
 
-export const PktTableHeader = ({ children }: TableHeaderProps) => <th className="pkt-table__th">{children}</th>
+export const PktTableHeader = ({ className, children }: ITableHeaderProps) => (
+  <thead className={classNames(className, 'pkt-table__header', {})} role="rowgroup">
+    {children}
+  </thead>
+)

package/src/components/table/TableHeaderCell.tsx

@@ -0,0 +1,13 @@
+import classNames from 'classnames'
+import * as React from 'react'
+
+interface ITableHeaderCellProps {
+  className?: string
+  children: React.ReactNode
+}
+
+export const PktTableHeaderCell = ({ className, children }: ITableHeaderCellProps) => (
+  <th className={classNames(className, 'pkt-table__header-cell', {})} role="columnheader">
+    {children}
+  </th>
+)

package/src/components/table/TableRow.tsx

@@ -0,0 +1,13 @@
+import classNames from 'classnames'
+import * as React from 'react'
+
+interface ITableRowProps {
+  className?: string
+  children: React.ReactNode
+}
+
+export const PktTableRow = ({ className, children }: ITableRowProps) => (
+  <tr className={classNames(className, 'pkt-table__row', {})} role="row">
+    {children}
+  </tr>
+)

package/src/components/table/__snapshots__/Table.test.tsx.snap

@@ -1,137 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Table /> renders correctly with modifier values false 1`] = `
-<DocumentFragment>
-  <table
-    class="pkt-table"
-  >
-    <thead>
-      <tr>
-        <th
-          class="pkt-table__th"
-        >
-          Header 1
-        </th>
-        <th
-          class="pkt-table__th"
-        >
-          Header 2
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-          Table data
-        </td>
-        <td>
-          Table data
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</DocumentFragment>
-`;
-
-exports[`<Table /> renders correctly with modifier values true 1`] = `
-<DocumentFragment>
-  <table
-    class="pkt-table pkt-table--info pkt-table--success pkt-table--strong pkt-table--shadow"
-  >
-    <thead>
-      <tr>
-        <th
-          class="pkt-table__th"
-        >
-          Header 1
-        </th>
-        <th
-          class="pkt-table__th"
-        >
-          Header 2
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-          Table data
-        </td>
-        <td>
-          Table data
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</DocumentFragment>
-`;
-
-exports[`<Table /> renders correctly without modifiers 1`] = `
-<DocumentFragment>
-  <table
-    class="pkt-table"
-  >
-    <thead>
-      <tr>
-        <th
-          class="pkt-table__th"
-        >
-          Header 1
-        </th>
-        <th
-          class="pkt-table__th"
-        >
-          Header 2
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-          Table data
-        </td>
-        <td>
-          Table data
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</DocumentFragment>
-`;
-
-exports[`<Table /> renders with responsive container 1`] = `
-<DocumentFragment>
-  <div
-    class="pkt-table-container"
-  >
-    <table
-      class="pkt-table"
-    >
-      <thead>
-        <tr>
-          <th
-            class="pkt-table__th"
-          >
-            Header 1
-          </th>
-          <th
-            class="pkt-table__th"
-          >
-            Header 2
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            Table data
-          </td>
-          <td>
-            Table data
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</DocumentFragment>
-`;