Typescript for Table of Contents (#714)

* Convert to typescript

* Change suffix

libraries/core-react/src/TableOfContents/LinkItem.jsx → libraries/core-react/src/TableOfContents/LinkItem.tsx

@@ -1,5 +1,4 @@
-// @ts-nocheck
-import React, { forwardRef } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { tableOfContents as tokens } from './TableOfContents.tokens'
@@ -14,9 +13,9 @@ const StyledLinkItem = styled.li`
   a {
     text-decoration: none;
     font-size: ${links.fontSize};
-    line-height: ${links.lineHeight};
+    line-height: ${links.fontLineHeight};
     padding: 10px 18px;
-    height: ${links.lineHeight};
+    height: ${links.fontLineHeight};
     width: calc(189px - 36px);
     display: block;
     position: relative;
@@ -57,7 +56,12 @@ const StyledLinkItem = styled.li`
     }
   }
 `
-const LinkItem = forwardRef(function EdsLinkItem({ children, ...props }, ref) {
+type Props = HTMLAttributes<HTMLLIElement>
+
+const LinkItem = forwardRef<HTMLLIElement, Props>(function EdsLinkItem(
+  { children, ...props },
+  ref,
+) {
   return (
     <StyledLinkItem {...props} ref={ref}>
       {children}

libraries/core-react/src/TableOfContents/TableOfContents.tokens.js → libraries/core-react/src/TableOfContents/TableOfContents.tokens.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
 
 const {

libraries/core-react/src/TableOfContents/TableOfContents.jsx → libraries/core-react/src/TableOfContents/TableOfContents.tsx

@@ -1,13 +1,20 @@
-// @ts-nocheck
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import styled, { css } from 'styled-components'
-import { List, Typography } from '..'
+import { List } from '../List'
+import { Typography } from '../Typography'
+
 import { tableOfContents as tokens } from './TableOfContents.tokens'
 
 const { labelText } = tokens
 
-const StyledTableOfContents = styled.nav`
+type Props = {
+  /** Sticky functionality */
+  sticky?: boolean
+  /** Label or title for the ToC */
+  label?: string
+} & HTMLAttributes<HTMLElement>
+
+const StyledTableOfContents = styled.nav<Props>`
   margin: 48px 0 32px 0;
 
   ${({ sticky }) =>
@@ -19,17 +26,17 @@ const StyledTableOfContents = styled.nav`
     `}
 `
 
-const TocList = styled((props) => <List {...props} />)`
+const TocList = styled(List)`
   margin: 0;
   padding: 0;
 `
 
-const TocLabel = styled((props) => <Typography {...props} />)`
+const TocLabel = styled(Typography)`
   color: ${labelText.color};
 `
 
-const TableOfContents = forwardRef(function TableOfContents(
-  { children, sticky, label, className, ...rest },
+const TableOfContents = forwardRef<HTMLElement, Props>(function TableOfContents(
+  { children, sticky = false, label = '', className, ...rest },
   ref,
 ) {
   return (
@@ -48,21 +55,4 @@ const TableOfContents = forwardRef(function TableOfContents(
 
 TableOfContents.displayName = 'eds-toc'
 
-TableOfContents.propTypes = {
-  /** @ignore */
-  children: PropTypes.node.isRequired,
-  /** @ignore */
-  className: PropTypes.string,
-  /** Sticky function */
-  sticky: PropTypes.bool,
-  /** Label or title for the ToC */
-  label: PropTypes.string,
-}
-
-TableOfContents.defaultProps = {
-  className: '',
-  sticky: false,
-  label: '',
-}
-
 export { TableOfContents }

libraries/core-react/src/TableOfContents/index.ts

@@ -0,0 +1,12 @@
+import { TableOfContents as BaseComponent } from './TableOfContents'
+import { LinkItem } from './LinkItem'
+
+type TableOfContentsTypes = typeof BaseComponent & {
+  LinkItem: typeof LinkItem
+}
+
+const TableOfContents = BaseComponent as TableOfContentsTypes
+
+TableOfContents.LinkItem = LinkItem
+
+export { TableOfContents }