@oslokommune/punkt-react 13.6.8 → 13.6.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.6.8",
+  "version": "13.6.9",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -110,5 +110,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "79b8e663e5cd8ebdaa23497da8c37fbabf6a4aea"
+  "gitHead": "19d5e38b0ec004cae790d92c1b1956f06b6dcfc6"
 }

package/src/components/table/Table.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 
 export type TTableSkin = 'basic' | 'zebra-blue'
 
-interface ITableProps {
+interface ITableProps extends React.HTMLAttributes<HTMLTableElement> {
   compact?: boolean
   skin?: 'basic' | 'zebra-blue'
   responsiveView?: boolean
@@ -19,6 +19,7 @@ export const PktTable = ({
   skin = 'basic',
   responsiveView = true,
   children,
+  ...props
 }: ITableProps) => {
   return (
     <table
@@ -30,6 +31,7 @@ export const PktTable = ({
         'pkt-table--zebra-blue': skin === 'zebra-blue',
       })}
       role="table"
+      {...props}
     >
       {children}
     </table>

package/src/components/table/TableBody.tsx

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

package/src/components/table/TableData.tsx

@@ -1,9 +1,15 @@
 'use client'
 
+import classNames from 'classnames'
 import * as React from 'react'
 
-interface TableDataProps {
+interface TableDataProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  className?: string
   children: React.ReactNode | React.ReactNode[]
 }
 
-export const PktTableData = ({ children }: TableDataProps) => <td className="pkt-table__th">{children}</td>
+export const PktTableData = ({ children, className, ...props }: TableDataProps) => (
+  <td className={classNames(className, 'pkt-table__th')} {...props} role="cell">
+    {children}
+  </td>
+)

package/src/components/table/TableDataCell.tsx

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

package/src/components/table/TableHeader.tsx

@@ -3,13 +3,13 @@
 import classNames from 'classnames'
 import * as React from 'react'
 
-interface ITableHeaderProps {
+interface ITableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
   className?: string
   children: React.ReactNode
 }
 
-export const PktTableHeader = ({ className, children }: ITableHeaderProps) => (
-  <thead className={classNames(className, 'pkt-table__header', {})} role="rowgroup">
+export const PktTableHeader = ({ className, children, ...props }: ITableHeaderProps) => (
+  <thead className={classNames(className, 'pkt-table__header', {})} role="rowgroup" {...props}>
     {children}
   </thead>
 )

package/src/components/table/TableHeaderCell.tsx

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

package/src/components/table/TableRow.tsx

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