Table of contents typescript story (#807)

* ♻️ Renamed story * Fixed & simplified story
equinor · Nov 13, 2020 · 24a71e8 · 24a71e8
1 parent c2b3b1e
commit 24a71e8
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 67 deletions.
diff --git a/...react/stories/TableOfContents.stories.jsx → ...react/stories/TableOfContents.stories.tsx b/...react/stories/TableOfContents.stories.jsx → ...react/stories/TableOfContents.stories.tsx
@@ -1,11 +1,12 @@
-import React, { useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import {
   Icon,
   TableOfContents,
   Typography,
-  Button,
+  TableOfContentsProps,
 } from '@equinor/eds-core-react'
+import { Story, Meta } from '@storybook/react'
 
 import { subdirectory_arrow_right } from '@equinor/eds-icons'
 
@@ -20,7 +21,7 @@ const { LinkItem } = TableOfContents
 export default {
   title: 'Components/TableOfContents',
   component: TableOfContents,
-}
+} as Meta
 
 const Wrapper = styled.div`
   margin: 32px;
@@ -29,17 +30,7 @@ const Wrapper = styled.div`
   grid-template-columns: auto 14rem;
 `
 
-const TempButtonWrapper = styled.div`
-  display: grid;
-  margin: 16px 0;
-  grid-gap: 32px;
-  grid-template-columns: repeat(2, fit-content(100%));
-  justify-content: start;
-`
-
-export const Example = () => {
-  const [stickyState, setStickyState] = useState(false)
-
+export const Example: Story<TableOfContentsProps> = (args) => {
   return (
     <Wrapper>
       <main>
@@ -48,124 +39,119 @@ export const Example = () => {
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
-          <TempButtonWrapper>
-            <Button onClick={() => setStickyState(!stickyState)}>
-              {stickyState ? 'Unstick ToC' : 'Make ToC sticky'}
-            </Button>
-          </TempButtonWrapper>
           <Typography variant="h2" id="sub-section-one">
             Topic 1
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="h3">Heading 3</Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="h2" id="sub-section-two">
             A very long topic to test implementation details
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="h3">Heading 3</Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="h2" id="sub-section-three">
             Topic 3
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
           <Typography variant="h3">Heading 3</Typography>
           <Typography variant="body_long">
             Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit
             amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit
-            lot.{' '}
+            lot.
           </Typography>
         </article>
       </main>
       <aside>
-        <TableOfContents sticky={stickyState} label="Important topics">
+        <TableOfContents {...args}>
           <LinkItem>
             <Typography variant="body_short" link href="#sub-section-one">
               <Icon name="subdirectory_arrow_right" size={16} />

diff --git a/libraries/core-react/src/TableOfContents/LinkItem.tsx b/libraries/core-react/src/TableOfContents/LinkItem.tsx
@@ -58,7 +58,7 @@ const StyledLinkItem = styled.li`
 `
 type Props = HTMLAttributes<HTMLLIElement>
 
-const LinkItem = forwardRef<HTMLLIElement, Props>(function EdsLinkItem(
+const LinkItem = forwardRef<HTMLLIElement, Props>(function LinkItem(
   { children, ...props },
   ref,
 ) {

diff --git a/libraries/core-react/src/TableOfContents/TableOfContents.tsx b/libraries/core-react/src/TableOfContents/TableOfContents.tsx
@@ -7,14 +7,14 @@ import { tableOfContents as tokens } from './TableOfContents.tokens'
 
 const { labelText } = tokens
 
-type Props = {
+export type TableOfContentsProps = {
   /** Sticky functionality */
   sticky?: boolean
   /** Label or title for the ToC */
   label?: string
 } & HTMLAttributes<HTMLElement>
 
-const StyledTableOfContents = styled.nav<Props>`
+const StyledTableOfContents = styled.nav<TableOfContentsProps>`
   margin: 48px 0 32px 0;
 
   ${({ sticky }) =>
@@ -35,23 +35,25 @@ const TocLabel = styled(Typography)`
   color: ${labelText.color};
 `
 
-const TableOfContents = forwardRef<HTMLElement, Props>(function TableOfContents(
-  { children, sticky = false, label = '', className, ...rest },
-  ref,
-) {
-  return (
-    <StyledTableOfContents
-      className={className}
-      ref={ref}
-      label={label}
-      sticky={sticky}
-      {...rest}
-    >
-      <TocLabel variant="overline">{label}</TocLabel>
-      <TocList>{children}</TocList>
-    </StyledTableOfContents>
-  )
-})
+const TableOfContents = forwardRef<HTMLElement, TableOfContentsProps>(
+  function TableOfContents(
+    { children, sticky = false, label = '', className, ...rest },
+    ref,
+  ) {
+    return (
+      <StyledTableOfContents
+        className={className}
+        ref={ref}
+        label={label}
+        sticky={sticky}
+        {...rest}
+      >
+        <TocLabel variant="overline">{label}</TocLabel>
+        <TocList>{children}</TocList>
+      </StyledTableOfContents>
+    )
+  },
+)
 
 // TableOfContents.displayName = 'eds-toc'
 

diff --git a/libraries/core-react/src/TableOfContents/index.ts b/libraries/core-react/src/TableOfContents/index.ts
@@ -1,12 +1,12 @@
 import { TableOfContents as BaseComponent } from './TableOfContents'
 import { LinkItem } from './LinkItem'
 
-type TableOfContentsTypes = typeof BaseComponent & {
+type TableOfContentsProps = typeof BaseComponent & {
   LinkItem: typeof LinkItem
 }
 
-const TableOfContents = BaseComponent as TableOfContentsTypes
+const TableOfContents = BaseComponent as TableOfContentsProps
 
 TableOfContents.LinkItem = LinkItem
 
-export { TableOfContents }
+export { TableOfContents, TableOfContentsProps }
diff --git a/libraries/core-react/src/Typography/Typography.tsx b/libraries/core-react/src/Typography/Typography.tsx
@@ -1,4 +1,9 @@
-import React, { forwardRef, ElementType, HTMLAttributes } from 'react'
+import React, {
+  forwardRef,
+  ElementType,
+  HTMLAttributes,
+  AnchorHTMLAttributes,
+} from 'react'
 import styled, { css } from 'styled-components'
 import { typographyTemplate } from '../_common/templates'
 import {
@@ -94,7 +99,7 @@ export type TypographyProps = {
   token?: Partial<TypographyType>
   lines?: number
   as?: ElementType
-} & HTMLAttributes<HTMLElement>
+} & (HTMLAttributes<HTMLElement> | AnchorHTMLAttributes<HTMLAnchorElement>)
 
 export const Typography = forwardRef<HTMLElement, TypographyProps>(
   function Typography(

diff --git a/libraries/core-react/src/index.ts b/libraries/core-react/src/index.ts
@@ -13,9 +13,9 @@ export * from './Card'
 export * from './TopBar'
 export { Dialog } from './Dialog'
 export * from './Scrim'
-export { TableOfContents } from './TableOfContents'
+export * from './TableOfContents'
 export * from './SideSheet'
-export { Chip } from './Chip'
+export * from './Chip'
 export * from './Avatar'
 export * from './Search'
 export { Slider } from './Slider'