♻️ Write table stories in typescript and fix props table (#747)

* 🚚 Rename table story * ♻️ Update story and component * ♻️ Rewrite story and component * 🎨 Change type of children * 🎨 Fix table cell types * 🔥 Remove ThHTMLAttributes TdHTMLAttributes seem to have the same properties as ThHTMLAttributes, so removing the latter.
equinor · Nov 13, 2020 · d65f72d · d65f72d
1 parent 24a71e8
commit d65f72d
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 51 deletions.
diff --git a/...storybook-react/stories/Table.stories.jsx → ...storybook-react/stories/Table.stories.tsx b/...storybook-react/stories/Table.stories.jsx → ...storybook-react/stories/Table.stories.tsx
@@ -1,56 +1,55 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Table, Typography } from '@equinor/eds-core-react'
+import { Story, Meta } from '@storybook/react/types-6-0'
+import { Table, TableProps } from '@equinor/eds-core-react'
 import './../style.css'
 
 const { Caption, Body, Row, Cell, Head } = Table
 
 export default {
   title: 'Components/Table',
   component: Table,
-}
+  subcomponents: { Body, Row, Cell, Head },
+  parameters: {
+    docs: {
+      description: {
+        component: `A basic table component`,
+      },
+    },
+  },
+} as Meta
 
-export const simpleTable = () => (
-  <div className="container">
-    <Typography variant="h1" bold>
-      Table
-    </Typography>
-    <div className="">
-      <div className="group">
-        <Table>
-          <Caption>Star Wars Kill Count</Caption>
-          <Head>
-            <Row>
-              <Cell as="th" scope="col">
-                Name
-              </Cell>
-              <Cell as="th" scope="col">
-                Allegiance
-              </Cell>
-              <Cell as="th" scope="col">
-                Kill count
-              </Cell>
-            </Row>
-          </Head>
-          <Body>
-            <Row>
-              <Cell>Luke Skywalker</Cell>
-              <Cell>Republic</Cell>
-              <Cell variant="numeric">369470</Cell>
-            </Row>
-            <Row>
-              <Cell>Darth Vader</Cell>
-              <Cell>Sith</Cell>
-              <Cell variant="numeric">59</Cell>
-            </Row>
-          </Body>
-        </Table>
-      </div>
-    </div>
-  </div>
+export const simpleTable: Story<TableProps> = () => (
+  <Table>
+    <Head>
+      <Row>
+        <Cell as="th" scope="col">
+          Name
+        </Cell>
+        <Cell as="th" scope="col">
+          Allegiance
+        </Cell>
+        <Cell as="th" scope="col">
+          Kill count
+        </Cell>
+      </Row>
+    </Head>
+    <Body>
+      <Row>
+        <Cell>Luke Skywalker</Cell>
+        <Cell>Republic</Cell>
+        <Cell variant="numeric">369470</Cell>
+      </Row>
+      <Row>
+        <Cell>Darth Vader</Cell>
+        <Cell>Sith</Cell>
+        <Cell variant="numeric">59</Cell>
+      </Row>
+    </Body>
+  </Table>
 )
 
-export const FixedTableHeader = () => {
+export const FixedTableHeader: Story<TableProps> = () => {
   const FixedContainer = styled.div`
     width: 200px;
     height: 200px;

diff --git a/libraries/core-react/src/Table/Cell.tsx b/libraries/core-react/src/Table/Cell.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { TdHTMLAttributes, ThHTMLAttributes } from 'react'
 import styled, { css } from 'styled-components'
 import type { Border } from '@equinor/eds-tokens'
 import { getTokens, TableCell } from './Table.tokens'
@@ -42,19 +42,19 @@ const TableBase = styled.td`
   ${Base}
 `
 
-type Props = {
+type CellProps = {
   /** Specifies which td or th to use */
-  as: 'td' | 'th'
+  as?: 'td' | 'th'
   /** Specifies which variant to use */
-  variant: 'text' | 'icon' | 'numeric' | 'input'
-} & HTMLAttributes<HTMLTableCellElement>
+  variant?: 'text' | 'icon' | 'numeric' | 'input'
+} & TdHTMLAttributes<HTMLTableDataCellElement>
 
 export const Cell = ({
   children,
   as = 'td',
   variant = 'text',
   ...props
-}: Props): JSX.Element => {
+}: CellProps): JSX.Element => {
   const tokens = getTokens(as, variant)
   return (
     <TableBase as={as} tokens={tokens} {...props}>

diff --git a/libraries/core-react/src/Table/index.ts b/libraries/core-react/src/Table/index.ts
@@ -4,18 +4,18 @@ import { Cell } from './Cell'
 import { Head } from './Head'
 import { Row } from './Row'
 
-type TableTypes = typeof BaseComponent & {
+type TableProps = typeof BaseComponent & {
   Body: typeof Body
   Cell: typeof Cell
   Head: typeof Head
   Row: typeof Row
 }
 
-const Table = BaseComponent as TableTypes
+const Table = BaseComponent as TableProps
 
 Table.Body = Body
 Table.Cell = Cell
 Table.Head = Head
 Table.Row = Row
 
-export { Table }
+export { Table, TableProps }
diff --git a/libraries/core-react/src/index.ts b/libraries/core-react/src/index.ts
@@ -2,7 +2,7 @@ import 'focus-visible'
 /* eslint-disable import/prefer-default-export */
 export * from './Button'
 export * from './Typography'
-export { Table } from './Table'
+export * from './Table'
 export * from './Divider'
 export * from './TextField'
 export { Icon } from './Icon'