Table typescript take two (#682)

* convert to typescript

* Change suffix

* Radius optional

libraries/core-react/src/Table/Body.tsx

@@ -0,0 +1,12 @@
+import React, { HTMLAttributes } from 'react'
+import styled from 'styled-components'
+
+const TableBase = styled.tbody``
+
+type Props = HTMLAttributes<HTMLTableSectionElement>
+
+export const Body = ({ children, ...props }: Props): JSX.Element => {
+  return <TableBase {...props}>{children}</TableBase>
+}
+
+Body.displayName = 'eds-table-body'

libraries/core-react/src/Table/Cell.jsx → libraries/core-react/src/Table/Cell.tsx

@@ -1,17 +1,20 @@
-// @ts-nocheck
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { HTMLAttributes } from 'react'
 import styled, { css } from 'styled-components'
-import { getTokens } from './Table.tokens'
+import type { Border } from '@equinor/eds-tokens'
+import { getTokens, TableCell } from './Table.tokens'
 import { typographyTemplate } from '../_common/templates'
 
-const borderTemplate = (borders) =>
+const borderTemplate = (borders: { bottom: Border }) =>
   Object.keys(borders).reduce((acc, val) => {
-    const { color, width } = borders[val]
+    const { color, width }: Border = borders[val] as Border
     return `${acc} border-${val}: ${width} solid ${color}; \n`
   }, '')
 
-const Base = ({ tokens, as }) => {
+type BaseProps = {
+  tokens: TableCell
+  as: string
+}
+const Base = ({ tokens, as }: BaseProps) => {
   const { background, height, text, spacings, borders } = tokens
   const { typography } = text
   const bordersAndBackground =
@@ -39,8 +42,19 @@ const TableBase = styled.td`
   ${Base}
 `
 
-export const Cell = (props) => {
-  const { children, as, variant } = props
+type Props = {
+  /** Specifies which td or th to use */
+  as: 'td' | 'th'
+  /** Specifies which variant to use */
+  variant: 'text' | 'icon' | 'numeric' | 'input'
+} & HTMLAttributes<HTMLTableCellElement>
+
+export const Cell = ({
+  children,
+  as = 'td',
+  variant = 'text',
+  ...props
+}: Props): JSX.Element => {
   const tokens = getTokens(as, variant)
   return (
     <TableBase as={as} tokens={tokens} {...props}>
@@ -49,24 +63,4 @@ export const Cell = (props) => {
   )
 }
 
-Cell.propTypes = {
-  /** @ignore */
-  className: PropTypes.string,
-  /** @ignore */
-  children: PropTypes.node.isRequired,
-  /** Specifies which td or th to use */
-  as: PropTypes.oneOf(['td', 'th']),
-  /** Specifies the scope of th */
-  // scope: PropTypes.oneOf(['col', 'row']),
-  /** Specifies which variant to use */
-  variant: PropTypes.oneOf(['text', 'icon', 'numeric', 'input']),
-}
-
-Cell.defaultProps = {
-  className: '',
-  // scope: '',
-  as: 'td',
-  variant: 'text',
-}
-
 Cell.displayName = 'eds-table-cell'

libraries/core-react/src/Table/Head.jsx → libraries/core-react/src/Table/Head.tsx

@@ -1,22 +1,25 @@
-// @ts-nocheck
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { FunctionComponent } from 'react'
 import styled, { css } from 'styled-components'
-import { getTokens } from './Table.tokens'
+import { getTokens, TableCell } from './Table.tokens'
+import type { Border } from '@equinor/eds-tokens'
 
-const borderTemplate = (borders) =>
+const borderTemplate = (borders: { bottom: Border }): string =>
   Object.keys(borders).reduce((acc, val) => {
-    const { color, width } = borders[val]
+    const { color, width }: Border = borders[val] as Border
     return `${acc} border-${val}: ${width} solid ${color}; \n`
   }, '')
 
-const StyledTableHead = styled.thead`
+type StyledTableHeadProps = {
+  token: TableCell
+}
+
+const StyledTableHead = styled.thead<StyledTableHeadProps>`
   ${({ token: { borders, background } }) => css`
       ${borderTemplate(borders)}
       background: ${background};`}
 `
 
-export const Head = ({ children, ...props }) => {
+export const Head: FunctionComponent = ({ children, ...props }) => {
   const token = getTokens('th', 'text')
   return (
     <StyledTableHead token={token} {...props}>
@@ -25,15 +28,4 @@ export const Head = ({ children, ...props }) => {
   )
 }
 
-Head.propTypes = {
-  /** @ignore */
-  className: PropTypes.string,
-  /** @ignore */
-  children: PropTypes.node.isRequired,
-}
-
-Head.defaultProps = {
-  className: '',
-}
-
 Head.displayName = 'eds-table-head'

libraries/core-react/src/Table/Row.tsx

@@ -0,0 +1,14 @@
+import React, { FunctionComponent } from 'react'
+import styled from 'styled-components'
+
+const TableBase = styled.tr``
+
+type Props = React.HTMLAttributes<HTMLTableRowElement>
+
+export const Row: FunctionComponent<Props> = (props) => {
+  const { children } = props
+
+  return <TableBase {...props}>{children}</TableBase>
+}
+
+Row.displayName = 'EdsTableRow'

libraries/core-react/src/Table/Table.tokens.ts

@@ -0,0 +1,99 @@
+import tableTokens from '@equinor/eds-tokens/components/table/table.json'
+import type {
+  Border,
+  Clickbound,
+  Spacing,
+  Typography,
+} from '@equinor/eds-tokens'
+
+const { header, cell } = tableTokens
+
+type Field = {
+  height: string
+  background: string
+  borders: {
+    outline: Border
+  }
+  text: {
+    color: string
+    typography: Typography
+    colorPlaceholder: string
+  }
+  spacings: Spacing
+}
+
+export type TableCell = {
+  height: string
+  background: string
+  borders: {
+    bottom: Border
+  }
+  text?: {
+    color: string
+    typography: Typography
+  }
+  spacings: Spacing
+  clickbound: Clickbound
+  field?: Field
+  active: {
+    background: string
+    color?: string
+    typography?: Typography
+    borders: {
+      bottom: Border
+    }
+    field?: Field
+  }
+  disabled: {
+    background: string
+    color?: string
+    typography?: Typography
+    borders: {
+      bottom: Border
+    }
+    field?: Field
+  }
+  focus: {
+    type?: string
+    color?: string
+    width?: string
+    gap?: string
+    field?: Field
+  }
+  hover: {
+    background: string
+    field?: Field
+  }
+}
+
+type Variants = {
+  header: {
+    text: TableCell
+  }
+  cell: {
+    text: TableCell
+    numeric: TableCell
+    icon: TableCell
+    input: TableCell
+  }
+}
+
+const variants: Variants = {
+  header: { text: header.text },
+  cell: {
+    text: cell.text,
+    numeric: cell.monospaced_numeric,
+    icon: cell.icon,
+    input: cell.input,
+  },
+}
+
+export const getTokens = (as: string, variant: string): TableCell => {
+  switch (as) {
+    case 'th':
+      return variants.header[variant] as TableCell
+    case 'td':
+    default:
+      return variants.cell[variant] as TableCell
+  }
+}

libraries/core-react/src/Table/Table.tsx

@@ -0,0 +1,15 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react'
+import styled from 'styled-components'
+
+const TableBase = styled.table`
+  border-spacing: 0;
+  border-collapse: collapse;
+`
+
+type Props = HTMLAttributes<HTMLTableElement>
+
+export const Table: FunctionComponent<Props> = ({ children, ...props }) => {
+  return <TableBase {...props}>{children}</TableBase>
+}
+
+Table.displayName = 'EdsTable'