From 1e5a39250f7db25aee35f8c2675d4d118e1b7323 Mon Sep 17 00:00:00 2001
From: winkerVSbecks <varunvachhar@gmail.com>
Date: Thu, 19 Nov 2020 16:36:50 -0500
Subject: [PATCH 1/2] Convert TableOfContents and related components to TS

---
 ...Link.stories.js => BulletLink.stories.tsx} |   5 +-
 .../{BulletLink.js => BulletLink.tsx}         |  37 +--
 src/components/table-of-contents/ItemLink.js  |  38 ---
 ...emLink.stories.js => ItemLink.stories.tsx} |   3 +-
 src/components/table-of-contents/ItemLink.tsx |  37 +++
 ...nuLink.stories.js => MenuLink.stories.tsx} |   3 +-
 .../{MenuLink.js => MenuLink.tsx}             |   8 +-
 ...stories.js => TableOfContents.stories.tsx} | 105 ++++++---
 ...TableOfContents.js => TableOfContents.tsx} |  83 ++++---
 .../table-of-contents/TableOfContentsItems.js | 185 ---------------
 .../TableOfContentsItems.tsx                  | 222 ++++++++++++++++++
 11 files changed, 420 insertions(+), 306 deletions(-)
 rename src/components/table-of-contents/{BulletLink.stories.js => BulletLink.stories.tsx} (79%)
 rename src/components/table-of-contents/{BulletLink.js => BulletLink.tsx} (75%)
 delete mode 100644 src/components/table-of-contents/ItemLink.js
 rename src/components/table-of-contents/{ItemLink.stories.js => ItemLink.stories.tsx} (83%)
 create mode 100644 src/components/table-of-contents/ItemLink.tsx
 rename src/components/table-of-contents/{MenuLink.stories.js => MenuLink.stories.tsx} (73%)
 rename src/components/table-of-contents/{MenuLink.js => MenuLink.tsx} (75%)
 rename src/components/table-of-contents/{TableOfContents.stories.js => TableOfContents.stories.tsx} (57%)
 rename src/components/table-of-contents/{TableOfContents.js => TableOfContents.tsx} (68%)
 delete mode 100644 src/components/table-of-contents/TableOfContentsItems.js
 create mode 100644 src/components/table-of-contents/TableOfContentsItems.tsx

diff --git a/src/components/table-of-contents/BulletLink.stories.js b/src/components/table-of-contents/BulletLink.stories.tsx
similarity index 79%
rename from src/components/table-of-contents/BulletLink.stories.js
rename to src/components/table-of-contents/BulletLink.stories.tsx
index f7708f4a..6db6e002 100644
--- a/src/components/table-of-contents/BulletLink.stories.js
+++ b/src/components/table-of-contents/BulletLink.stories.tsx
@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
+import React from 'react';
 import { BulletLink } from './BulletLink';
 
 export default {
@@ -10,7 +9,7 @@ export default {
 
 const currentPath = '/path-1';
 // Bullet links should always be used in a series
-export const Series = (args) => (
+export const Series = () => (
   <ul>
     <BulletLink currentPath={currentPath} item={{ path: '/path-1', title: 'Link 1' }} />
     <BulletLink currentPath={currentPath} item={{ path: '/path-2', title: 'Link 2' }} />
diff --git a/src/components/table-of-contents/BulletLink.js b/src/components/table-of-contents/BulletLink.tsx
similarity index 75%
rename from src/components/table-of-contents/BulletLink.js
rename to src/components/table-of-contents/BulletLink.tsx
index f2378bd3..30ec60f8 100644
--- a/src/components/table-of-contents/BulletLink.js
+++ b/src/components/table-of-contents/BulletLink.tsx
@@ -1,10 +1,15 @@
-import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import styled from 'styled-components';
 import { color, typography } from '../shared/styles';
-import { Link } from '../Link';
+import { Link, LinkProps } from '../Link';
 
-const StyledBulletLink = styled(({ isActive, ...rest }) => <Link {...rest} />)`
+type StyledBulletLinkProps = React.ComponentProps<typeof Link> & {
+  isActive?: boolean;
+};
+
+const StyledBulletLink = styled(({ isActive, ...rest }) => <Link {...rest} />)<
+  StyledBulletLinkProps
+>`
   outline: none;
   display: inline-block;
   padding: 6px 0;
@@ -53,7 +58,7 @@ const BulletLinkWrapper = styled.li`
   }
 `;
 
-const Bullet = styled.span`
+const Bullet = styled.span<{ isActive?: boolean }>`
   display: inline-block;
   margin-bottom: 1px;
   margin-right: 16px;
@@ -67,7 +72,17 @@ const Bullet = styled.span`
   ${(props) => props.isActive && `background: ${color.secondary};`}
 `;
 
-export function BulletLink({ currentPath, item, ...rest }) {
+export interface BulletLinkItem extends Pick<LinkProps, 'LinkWrapper'> {
+  path: string;
+  title: string;
+}
+
+interface BulletLinkProps {
+  currentPath: string;
+  item: BulletLinkItem;
+}
+
+export function BulletLink({ currentPath, item, ...rest }: BulletLinkProps) {
   const isActive = currentPath === item.path;
 
   return (
@@ -77,6 +92,7 @@ export function BulletLink({ currentPath, item, ...rest }) {
         href={item.path}
         LinkWrapper={item.LinkWrapper}
         tertiary={!isActive}
+        {...rest}
       >
         <Bullet isActive={isActive} />
         {item.title}
@@ -84,12 +100,3 @@ export function BulletLink({ currentPath, item, ...rest }) {
     </BulletLinkWrapper>
   );
 }
-
-BulletLink.propTypes = {
-  currentPath: PropTypes.string.isRequired,
-  item: PropTypes.shape({
-    LinkWrapper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    path: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-  }).isRequired,
-};
diff --git a/src/components/table-of-contents/ItemLink.js b/src/components/table-of-contents/ItemLink.js
deleted file mode 100644
index 96326619..00000000
--- a/src/components/table-of-contents/ItemLink.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { color, typography } from '../shared/styles';
-import { Link } from '../Link';
-import { MenuLink } from './MenuLink';
-
-const ItemLinkWrapper = styled.li`
-  list-style-type: none;
-
-  &:last-of-type ${MenuLink} {
-    margin-bottom: 0;
-  }
-`;
-
-export function ItemLink({ currentPath, item }) {
-  return (
-    <ItemLinkWrapper>
-      <MenuLink
-        isActive={currentPath === item.path}
-        href={item.path}
-        LinkWrapper={item.LinkWrapper}
-        tertiary
-      >
-        {item.title}
-      </MenuLink>
-    </ItemLinkWrapper>
-  );
-}
-
-ItemLink.propTypes = {
-  currentPath: PropTypes.string.isRequired,
-  item: PropTypes.shape({
-    path: PropTypes.string.isRequired,
-    LinkWrapper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    title: PropTypes.string.isRequired,
-  }).isRequired,
-};
diff --git a/src/components/table-of-contents/ItemLink.stories.js b/src/components/table-of-contents/ItemLink.stories.tsx
similarity index 83%
rename from src/components/table-of-contents/ItemLink.stories.js
rename to src/components/table-of-contents/ItemLink.stories.tsx
index aa685929..f3d28828 100644
--- a/src/components/table-of-contents/ItemLink.stories.js
+++ b/src/components/table-of-contents/ItemLink.stories.tsx
@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
+import React from 'react';
 import { ItemLink } from './ItemLink';
 
 export default {
diff --git a/src/components/table-of-contents/ItemLink.tsx b/src/components/table-of-contents/ItemLink.tsx
new file mode 100644
index 00000000..e321db37
--- /dev/null
+++ b/src/components/table-of-contents/ItemLink.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+import { MenuLink } from './MenuLink';
+import { LinkProps } from '../Link';
+
+const ItemLinkWrapper = styled.li`
+  list-style-type: none;
+
+  &:last-of-type ${MenuLink} {
+    margin-bottom: 0;
+  }
+`;
+
+export interface LinkItem extends Pick<LinkProps, 'LinkWrapper'> {
+  path: string;
+  title: string;
+}
+
+interface ItemLinkProps {
+  currentPath: string;
+  item: LinkItem;
+}
+
+export function ItemLink({ currentPath, item }: ItemLinkProps) {
+  return (
+    <ItemLinkWrapper>
+      <MenuLink
+        isActive={currentPath === item.path}
+        href={item.path}
+        LinkWrapper={item.LinkWrapper}
+        tertiary
+      >
+        {item.title}
+      </MenuLink>
+    </ItemLinkWrapper>
+  );
+}
diff --git a/src/components/table-of-contents/MenuLink.stories.js b/src/components/table-of-contents/MenuLink.stories.tsx
similarity index 73%
rename from src/components/table-of-contents/MenuLink.stories.js
rename to src/components/table-of-contents/MenuLink.stories.tsx
index bd41e287..e3dfe0ff 100644
--- a/src/components/table-of-contents/MenuLink.stories.js
+++ b/src/components/table-of-contents/MenuLink.stories.tsx
@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
+import React from 'react';
 import { MenuLink } from './MenuLink';
 
 export default {
diff --git a/src/components/table-of-contents/MenuLink.js b/src/components/table-of-contents/MenuLink.tsx
similarity index 75%
rename from src/components/table-of-contents/MenuLink.js
rename to src/components/table-of-contents/MenuLink.tsx
index c6a33d59..bf9ecf1e 100644
--- a/src/components/table-of-contents/MenuLink.js
+++ b/src/components/table-of-contents/MenuLink.tsx
@@ -1,9 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 import { color, typography } from '../shared/styles';
-import { Link } from '../Link';
+import { Link, LinkProps } from '../Link';
 
-export const MenuLink = styled(({ isActive, ...rest }) => <Link {...rest} />)`
+type MenuLinkProps = LinkProps & {
+  isActive?: boolean;
+};
+
+export const MenuLink = styled(({ isActive, ...rest }) => <Link {...rest} />)<MenuLinkProps>`
   outline: none;
   color: ${(props) => (props.isActive ? color.secondary : color.darker)};
   font-weight: ${(props) => (props.isActive ? typography.weight.bold : typography.weight.regular)};
diff --git a/src/components/table-of-contents/TableOfContents.stories.js b/src/components/table-of-contents/TableOfContents.stories.tsx
similarity index 57%
rename from src/components/table-of-contents/TableOfContents.stories.js
rename to src/components/table-of-contents/TableOfContents.stories.tsx
index a275c7a3..b8d5c643 100644
--- a/src/components/table-of-contents/TableOfContents.stories.js
+++ b/src/components/table-of-contents/TableOfContents.stories.tsx
@@ -1,121 +1,172 @@
 import React, { useState } from 'react';
-import { TableOfContents } from './TableOfContents';
+import { TableOfContents, TableOfContentsProps } from './TableOfContents';
+import { Item, ItemType } from './TableOfContentsItems';
+// @ts-ignore
 import { StoryLinkWrapper } from '../StoryLinkWrapper';
 
 export default {
   title: 'TableOfContents',
   component: TableOfContents,
   decorators: [
-    (storyFn) => <div style={{ width: 240, outline: '1px dotted grey' }}>{storyFn()}</div>,
+    (storyFn: any) => <div style={{ width: 240, outline: '1px dotted grey' }}>{storyFn()}</div>,
   ],
 };
 
-const items = [
+const items: Item[] = [
   {
     title: 'Get Started',
-    type: 'menu',
+    type: ItemType.MENU,
     children: [
       {
         path: '/introduction',
         title: 'Introduction',
-        type: 'bullet-link',
+        type: ItemType.BULLET_LINK,
       },
       {
         path: '/setup',
         title: 'Setup',
-        type: 'bullet-link',
+        type: ItemType.BULLET_LINK,
       },
       {
         path: '/write-a-story',
         title: 'Write a story',
-        type: 'bullet-link',
+        type: ItemType.BULLET_LINK,
       },
     ],
   },
   {
     title: '😀 Customize',
-    type: 'menu',
+    type: ItemType.MENU,
     children: [
       {
         title: 'User interface',
-        type: 'menu',
+        type: ItemType.MENU,
         children: [
           {
             path: '/features-and-behavior',
             title: 'features and behavior dolor sit amet consectatur',
-            type: 'link',
+            type: ItemType.LINK,
           },
           {
             path: '/theming',
             title: 'Theming',
-            type: 'link',
+            type: ItemType.LINK,
           },
         ],
       },
       {
         title: 'Head tags',
-        type: 'link',
+        type: ItemType.LINK,
         path: '/head-tags',
       },
       {
         title: 'Body tags',
-        type: 'link',
+        type: ItemType.LINK,
         path: '/body-tags',
       },
     ],
   },
   {
     title: '⚙️ Super long root heading that is very long',
-    type: 'menu',
+    type: ItemType.MENU,
     children: [
       {
         title: 'Verbose menu link that is extremely lengthy',
-        type: 'menu',
+        type: ItemType.MENU,
         children: [
           {
             path: '/lorem-ipsum',
             title: 'Lorem ipsum dolor sit amet consectatur',
-            type: 'link',
+            type: ItemType.LINK,
           },
           {
             path: '/theming',
             title: 'Theming',
-            type: 'link',
+            type: ItemType.LINK,
           },
         ],
       },
       {
         title: 'Head tags',
-        type: 'link',
+        type: ItemType.LINK,
         path: '/head-tags',
       },
       {
         title: 'Body tags',
-        type: 'link',
+        type: ItemType.LINK,
         path: '/body-tags',
       },
     ],
   },
 ];
 
-const findPaths = (pathItems) => pathItems.flatMap((item) => item.path || findPaths(item.children));
+const findPaths = (pathItems: Item[]) =>
+  // @ts-ignore
+  pathItems.flatMap((item: Item) => item.path || findPaths(item.children));
 const paths = findPaths(items);
 
-export const Basic = (args) => <TableOfContents {...args} />;
-Basic.args = { currentPath: paths[0], items };
+export const BasicFlat = (args: TableOfContentsProps) => <TableOfContents {...args} />;
+BasicFlat.args = {
+  currentPath: '/essentials',
+  items: [
+    {
+      title: '⭐️  Popular',
+      path: '/popular',
+      type: ItemType.LINK,
+    },
+    {
+      title: '🧩  Essentials',
+      path: '/essentials',
+      type: ItemType.LINK,
+    },
+    {
+      title: '🛠  Code',
+      path: '/code',
+      type: ItemType.LINK,
+    },
+    {
+      title: '⚡️  Data & state',
+      path: '/Data & state',
+      type: ItemType.LINK,
+    },
+    {
+      title: '💅  Style',
+      path: '/style',
+      type: ItemType.LINK,
+    },
+    {
+      title: '🎨  Design',
+      path: '/design',
+      type: ItemType.LINK,
+    },
+    {
+      title: '⚙️  Appearance',
+      path: '/appearance',
+      type: ItemType.LINK,
+    },
+    {
+      title: '🗄  Organize',
+      path: '/organize',
+      type: ItemType.LINK,
+    },
+  ],
+};
+
+export const BasicNested = (args: TableOfContentsProps) => <TableOfContents {...args} />;
+BasicNested.args = { currentPath: paths[0], items };
 
-export const NestedActivePath = Basic.bind();
+export const NestedActivePath = BasicNested.bind({});
 NestedActivePath.args = { currentPath: '/features-and-behavior', items };
 
-const addLinkWrappers = (itemsToCompose) =>
-  itemsToCompose.map((item) => {
-    if (item.type === 'link' || item.type === 'bullet-link')
+const addLinkWrappers = (itemsToCompose: Item[]): Item[] =>
+  itemsToCompose.map((item: Item) => {
+    if (item.type === ItemType.LINK || item.type === ItemType.BULLET_LINK)
       return { ...item, LinkWrapper: StoryLinkWrapper };
     if (item.children) return { ...item, children: addLinkWrappers(item.children) };
     return item;
   });
 const itemsWithLinkWrappers = addLinkWrappers(items);
-export const LinkWrappers = Basic.bind();
+export const LinkWrappers = BasicNested.bind({});
 LinkWrappers.args = { currentPath: paths[0], items: itemsWithLinkWrappers };
 
 export const WithOpenControls = () => (
diff --git a/src/components/table-of-contents/TableOfContents.js b/src/components/table-of-contents/TableOfContents.tsx
similarity index 68%
rename from src/components/table-of-contents/TableOfContents.js
rename to src/components/table-of-contents/TableOfContents.tsx
index 45c395f9..2645b8e2 100644
--- a/src/components/table-of-contents/TableOfContents.js
+++ b/src/components/table-of-contents/TableOfContents.tsx
@@ -1,13 +1,18 @@
 import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { TableOfContentsItems, ITEM_TYPES } from './TableOfContentsItems';
-import { breakpoint, color, typography } from '../shared/styles';
-import { Icon } from '../Icon';
-import { Link } from '../Link';
+import {
+  TableOfContentsItems,
+  Item,
+  ItemWithId,
+  ItemWithStateAndId,
+  ItemType,
+} from './TableOfContentsItems';
 
-const toKebabcase = (string) => string.toLowerCase().split(' ').join('-');
+type GlobalItemUpdate = { isOpen?: boolean };
+type SingleItemUpdate = { isOpen?: boolean; id?: string };
 
-const hasActiveChildren = (args) => {
+const toKebabCase = (string: string) => string.toLowerCase().split(' ').join('-');
+
+const hasActiveChildren = (args: { children: Item[]; currentPath: string }): boolean => {
   const { children, currentPath } = args;
 
   return !!children.find(
@@ -17,18 +22,24 @@ const hasActiveChildren = (args) => {
   );
 };
 
+interface GetOpenStateArgs {
+  item: ItemWithStateAndId;
+  globalItemUpdate?: GlobalItemUpdate;
+  singleItemUpdate?: SingleItemUpdate;
+  currentPath: string;
+  didChangeCurrentPath: boolean;
+}
+
 const getOpenState = ({
   item,
   globalItemUpdate = {},
   singleItemUpdate = {},
-  lastFocusedId,
   currentPath,
   didChangeCurrentPath,
-}) => {
+}: GetOpenStateArgs) => {
   const withActiveChildren = hasActiveChildren({
     children: item.children,
     currentPath,
-    lastFocusedId,
   });
 
   // If there is no 'isOpen' field yet, set a default based on whether or not
@@ -45,17 +56,26 @@ const getOpenState = ({
   return item.isOpen;
 };
 
-const mapItemIds = (items, depth = 0) =>
+const mapItemIds = (items: Item[], depth = 0): ItemWithId[] =>
   items.map((item) => ({
     ...item,
-    id: `${toKebabcase(item.title)}-${depth}`,
+    id: `${toKebabCase(item.title)}-${depth}`,
     ...(item.children && {
       children: mapItemIds(item.children, depth + 1),
     }),
   }));
 
+interface MapItemUIStateArgs {
+  items: ItemWithStateAndId[];
+  currentPath: string;
+  depth?: number;
+  didChangeCurrentPath?: boolean;
+  globalItemUpdate?: GlobalItemUpdate;
+  singleItemUpdate?: SingleItemUpdate;
+}
+
 // Add UI state to the 'items' that are passed in as props
-const mapItemUIState = (args) => {
+const mapItemUIState = (args: MapItemUIStateArgs): ItemWithStateAndId[] => {
   const {
     items,
     currentPath,
@@ -63,11 +83,10 @@ const mapItemUIState = (args) => {
     depth = 0,
     globalItemUpdate,
     singleItemUpdate,
-    lastFocusedId,
   } = args;
 
   return items.map((item) => {
-    const isMenuWithChildren = item.type === ITEM_TYPES.MENU && !!item.children;
+    const isMenuWithChildren = item.type === ItemType.MENU && !!item.children;
 
     return {
       ...item,
@@ -77,7 +96,6 @@ const mapItemUIState = (args) => {
           item,
           globalItemUpdate,
           singleItemUpdate,
-          lastFocusedId,
           currentPath,
           didChangeCurrentPath,
         }),
@@ -93,18 +111,29 @@ const mapItemUIState = (args) => {
   });
 };
 
+export interface TableOfContentsProps {
+  children?: (args: {
+    menu: React.ReactNode;
+    allTopLevelMenusAreOpen: boolean;
+    toggleAllOpen: () => void;
+    toggleAllClosed: () => void;
+  }) => JSX.Element;
+  currentPath: string;
+  items: Item[];
+}
+
 // State management and event handlers for the TableOfContentsItems
-export function TableOfContents({ children, currentPath, items, ...rest }) {
-  const [itemsWithIds] = useState(mapItemIds(items));
+export function TableOfContents({ children, currentPath, items, ...rest }: TableOfContentsProps) {
+  const [itemsWithIds] = useState<ItemWithId[]>(mapItemIds(items));
   const [itemsWithUIState, setItemsWithUIState] = useState(
-    mapItemUIState({ currentPath, items: itemsWithIds })
+    mapItemUIState({ currentPath, items: itemsWithIds as ItemWithStateAndId[] })
   );
   const uiStateCommonArgs = { currentPath, items: itemsWithUIState };
-  const toggleAllOpenStates = (isOpen) =>
+  const toggleAllOpenStates = (isOpen: boolean) =>
     setItemsWithUIState(mapItemUIState({ ...uiStateCommonArgs, globalItemUpdate: { isOpen } }));
   const toggleAllOpen = () => toggleAllOpenStates(true);
   const toggleAllClosed = () => toggleAllOpenStates(false);
-  const setMenuOpenStateById = (args) => {
+  const setMenuOpenStateById = (args: SingleItemUpdate) => {
     setItemsWithUIState(mapItemUIState({ ...uiStateCommonArgs, singleItemUpdate: args }));
   };
 
@@ -129,7 +158,7 @@ export function TableOfContents({ children, currentPath, items, ...rest }) {
 
   // Top level menu state is used to control expand/collapse buttons in consumers
   const allTopLevelMenusAreOpen = itemsWithUIState.every(
-    (item) => item.type === ITEM_TYPES.MENU && item.isOpen
+    (item) => item.type === ItemType.MENU && item.isOpen
   );
 
   return typeof children === 'function'
@@ -142,16 +171,6 @@ export function TableOfContents({ children, currentPath, items, ...rest }) {
     : tableOfContentsMenu;
 }
 
-TableOfContents.propTypes = {
-  children: PropTypes.func,
-  currentPath: PropTypes.string.isRequired,
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      type: PropTypes.oneOf(Object.values(ITEM_TYPES)).isRequired,
-    }).isRequired
-  ).isRequired,
-};
-
 TableOfContents.defaultProps = {
   children: undefined,
 };
diff --git a/src/components/table-of-contents/TableOfContentsItems.js b/src/components/table-of-contents/TableOfContentsItems.js
deleted file mode 100644
index 21a727df..00000000
--- a/src/components/table-of-contents/TableOfContentsItems.js
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { BulletLink } from './BulletLink';
-import { ItemLink } from './ItemLink';
-import { MenuLink } from './MenuLink';
-import { color, typography } from '../shared/styles';
-import { Icon } from '../Icon';
-import { Link } from '../Link';
-
-const MENU = 'menu';
-const LINK = 'link';
-const BULLET_LINK = 'bullet-link';
-export const ITEM_TYPES = Object.freeze({
-  MENU,
-  LINK,
-  BULLET_LINK,
-});
-
-const getItemComponent = (itemType) => {
-  switch (itemType) {
-    case ITEM_TYPES.MENU:
-      return Menu;
-    case ITEM_TYPES.LINK:
-      return ItemLink;
-    case ITEM_TYPES.BULLET_LINK:
-      return BulletLink;
-    default:
-      return null;
-  }
-};
-
-const TopLevelMenuToggle = styled(Link).attrs({ isButton: true, tertiary: true })`
-  font-weight: ${typography.weight.bold};
-  line-height: 24px;
-  word-break: break-word;
-  text-align: left;
-
-  > span {
-    display: flex;
-
-    svg {
-      flex: none;
-    }
-
-    span {
-      flex: 1;
-    }
-  }
-`;
-
-const ArrowIcon = styled(Icon).attrs({ icon: 'arrowright' })`
-  && {
-    width: 12px;
-    height: 12px;
-    color: ${color.mediumdark};
-    transform: translateY(1px) ${(props) => props.isOpen && `rotate(90deg)`};
-    ${(props) => (props.isTopLevel ? `margin-right: 8px;` : `margin-left: 8px;`)}
-    bottom: -0.25em;
-  }
-`;
-
-function Menu({ isTopLevel, item, setMenuOpenStateById, ...rest }) {
-  if (!item.children) return null;
-  const arrow = <ArrowIcon isOpen={item.isOpen} isTopLevel={isTopLevel} aria-hidden />;
-  const MenuToggle = isTopLevel ? TopLevelMenuToggle : MenuLink;
-  const toggleOpenState = () => setMenuOpenStateById({ id: item.id, isOpen: !item.isOpen });
-
-  return (
-    <li>
-      {isTopLevel ? (
-        <TopLevelMenuToggle onClick={toggleOpenState}>
-          {arrow}
-          <span>{item.title}</span>
-        </TopLevelMenuToggle>
-      ) : (
-        <MenuLink isButton onClick={toggleOpenState}>
-          {item.title}
-          {arrow}
-        </MenuLink>
-      )}
-      {item.isOpen && (
-        <TableOfContentsItems
-          items={item.children}
-          isTopLevel={false}
-          setMenuOpenStateById={setMenuOpenStateById}
-          {...rest}
-        />
-      )}
-    </li>
-  );
-}
-
-Menu.propTypes = {
-  isTopLevel: PropTypes.bool,
-  item: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    isOpen: PropTypes.bool.isRequired,
-    title: PropTypes.string.isRequired,
-    children: PropTypes.arrayOf(PropTypes.shape({})),
-  }).isRequired,
-  setMenuOpenStateById: PropTypes.func.isRequired,
-};
-
-Menu.defaultProps = {
-  isTopLevel: false,
-};
-
-const List = styled.ul`
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-
-  li {
-    padding-top: 12px;
-
-    &:first-child {
-      padding-top: 0;
-    }
-  }
-
-  ${(props) =>
-    props.isTopLevel &&
-    `  
-    > li {
-      padding-top: 24px;
-
-      ul, ol {
-        padding-top: 12px;
-        display: flex;
-        flex-direction: column;
-      }
-      
-      > ul { 
-        padding-left: 35px;
-
-        > li ul {
-          padding-left: 15px;
-        }
-      }
-
-      > ol {
-        padding-left: 20px;
-    
-      }
-    }
-  `}
-`;
-
-export function TableOfContentsItems({ className, currentPath, isTopLevel, items, ...rest }) {
-  const isOrderedList = items.every((item) => item.type === ITEM_TYPES.BULLET_LINK);
-
-  return (
-    <List className={className} isTopLevel={isTopLevel} as={isOrderedList ? 'ol' : 'ul'}>
-      {items.map((item) => {
-        const ItemComponent = getItemComponent(item.type);
-        return (
-          <ItemComponent
-            key={item.title}
-            currentPath={currentPath}
-            item={item}
-            isTopLevel={isTopLevel}
-            {...rest}
-          />
-        );
-      })}
-    </List>
-  );
-}
-
-TableOfContentsItems.propTypes = {
-  className: PropTypes.string,
-  currentPath: PropTypes.string.isRequired,
-  isTopLevel: PropTypes.bool.isRequired,
-
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      type: PropTypes.oneOf(Object.values(ITEM_TYPES)).isRequired,
-    }).isRequired
-  ).isRequired,
-};
-
-TableOfContentsItems.defaultProps = {
-  className: '',
-};
diff --git a/src/components/table-of-contents/TableOfContentsItems.tsx b/src/components/table-of-contents/TableOfContentsItems.tsx
new file mode 100644
index 00000000..04c86d34
--- /dev/null
+++ b/src/components/table-of-contents/TableOfContentsItems.tsx
@@ -0,0 +1,222 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+// @ts-ignore
+import { BulletLink, BulletLinkItem } from './BulletLink';
+// @ts-ignore
+import { ItemLink, LinkItem } from './ItemLink';
+// @ts-ignore
+import { MenuLink } from './MenuLink';
+import { color, typography } from '../shared/styles';
+import { Icon } from '../Icon';
+import { Link } from '../Link';
+
+type SetMenuOpenStateById = (args: { id: string; isOpen: boolean }) => void;
+
+// export type ItemType = 'menu' | 'link' | 'bullet-link';
+
+export enum ItemType {
+  MENU,
+  LINK,
+  BULLET_LINK,
+}
+
+export interface Item {
+  title: string;
+  type: ItemType;
+  path?: string;
+  children?: Item[];
+}
+
+export interface ItemWithId extends Item {
+  id: string;
+}
+
+export interface ItemWithStateAndId extends ItemWithId {
+  isOpen?: boolean;
+  children: ItemWithStateAndId[];
+}
+
+interface ItemComponent {
+  currentPath: string;
+  item: ItemWithStateAndId;
+  isTopLevel: boolean;
+  setMenuOpenStateById?: SetMenuOpenStateById;
+}
+
+const ItemComponent = ({ currentPath, item, isTopLevel, setMenuOpenStateById }: ItemComponent) => {
+  if (item.type === ItemType.MENU) {
+    return (
+      <Menu
+        currentPath={currentPath}
+        item={item}
+        isTopLevel={isTopLevel}
+        setMenuOpenStateById={setMenuOpenStateById}
+      />
+    );
+  }
+  if (item.type === ItemType.LINK && item.path !== undefined) {
+    return <ItemLink currentPath={currentPath} item={item as LinkItem} />;
+  }
+  if (item.type === ItemType.BULLET_LINK && item.path !== undefined) {
+    return <BulletLink currentPath={currentPath} item={item as BulletLinkItem} />;
+  }
+  return null;
+};
+
+const TopLevelMenuToggle = styled(Link).attrs({ isButton: true, tertiary: true })`
+  font-weight: ${typography.weight.bold};
+  line-height: 24px;
+  word-break: break-word;
+  text-align: left;
+
+  > span {
+    display: flex;
+
+    svg {
+      flex: none;
+    }
+
+    span {
+      flex: 1;
+    }
+  }
+`;
+
+interface ArrowIconProps {
+  isOpen?: boolean;
+  isTopLevel?: boolean;
+}
+
+const ArrowIcon = styled(Icon).attrs({ icon: 'arrowright' })<ArrowIconProps>`
+  && {
+    width: 12px;
+    height: 12px;
+    color: ${color.mediumdark};
+    transform: translateY(1px) ${(props) => props.isOpen && `rotate(90deg)`};
+    ${(props) => (props.isTopLevel ? `margin-right: 8px;` : `margin-left: 8px;`)}
+    bottom: -0.25em;
+  }
+`;
+
+interface MenuProps {
+  isTopLevel?: boolean;
+  item: ItemWithStateAndId;
+  setMenuOpenStateById: SetMenuOpenStateById;
+  currentPath: string;
+}
+
+function Menu({ isTopLevel, item, setMenuOpenStateById, currentPath, ...rest }: MenuProps) {
+  if (!item.children) return null;
+  const arrow = <ArrowIcon isOpen={item.isOpen} isTopLevel={isTopLevel} aria-hidden />;
+  const toggleOpenState = () => setMenuOpenStateById({ id: item.id, isOpen: !item.isOpen });
+
+  return (
+    <li>
+      {isTopLevel ? (
+        <TopLevelMenuToggle onClick={toggleOpenState}>
+          {arrow}
+          <span>{item.title}</span>
+        </TopLevelMenuToggle>
+      ) : (
+        <MenuLink isButton onClick={toggleOpenState}>
+          {item.title}
+          {arrow}
+        </MenuLink>
+      )}
+      {item.isOpen && (
+        <TableOfContentsItems
+          items={item.children}
+          isTopLevel={false}
+          setMenuOpenStateById={setMenuOpenStateById}
+          currentPath={currentPath}
+          {...rest}
+        />
+      )}
+    </li>
+  );
+}
+
+Menu.defaultProps = {
+  isTopLevel: false,
+};
+
+const List = styled.ul<{ isTopLevel?: boolean }>`
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    padding-top: 12px;
+
+    &:first-child {
+      padding-top: 0;
+    }
+  }
+
+  ${(props) =>
+    props.isTopLevel &&
+    css`
+      > li {
+        padding-top: 24px;
+
+        ul,
+        ol {
+          padding-top: 12px;
+          display: flex;
+          flex-direction: column;
+        }
+
+        > ul {
+          padding-left: 35px;
+
+          > li ul {
+            padding-left: 15px;
+          }
+        }
+
+        > ol {
+          padding-left: 20px;
+        }
+      }
+    `}
+`;
+
+export interface TableOfContentsItemsProps {
+  className?: string;
+  currentPath: string;
+  isTopLevel: boolean;
+  items: ItemWithStateAndId[];
+  setMenuOpenStateById?: SetMenuOpenStateById;
+}
+
+export function TableOfContentsItems({
+  className,
+  currentPath,
+  isTopLevel = false,
+  items,
+  setMenuOpenStateById,
+  ...rest
+}: TableOfContentsItemsProps) {
+  const isOrderedList = items.every((item) => item.type === ItemType.BULLET_LINK);
+
+  return (
+    <List className={className} isTopLevel={isTopLevel} as={isOrderedList ? 'ol' : 'ul'}>
+      {items.map((item) => {
+        return (
+          <ItemComponent
+            key={item.title}
+            currentPath={currentPath}
+            item={item}
+            isTopLevel={isTopLevel}
+            setMenuOpenStateById={setMenuOpenStateById}
+            {...rest}
+          />
+        );
+      })}
+    </List>
+  );
+}
+
+TableOfContentsItems.defaultProps = {
+  className: '',
+};

From b9c627a5969d4b2c17395a967c2a5d1df19857c0 Mon Sep 17 00:00:00 2001
From: winkerVSbecks <varunvachhar@gmail.com>
Date: Mon, 23 Nov 2020 12:02:44 -0500
Subject: [PATCH 2/2] update hover state for active link and hover & focus
 states for non-link items

---
 src/components/table-of-contents/BulletLink.tsx |  5 +++--
 src/components/table-of-contents/MenuLink.tsx   | 11 ++++++-----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/table-of-contents/BulletLink.tsx b/src/components/table-of-contents/BulletLink.tsx
index 30ec60f8..6f249ebd 100644
--- a/src/components/table-of-contents/BulletLink.tsx
+++ b/src/components/table-of-contents/BulletLink.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { color, typography } from '../shared/styles';
-import { Link, LinkProps } from '../Link';
+import { Link } from '../Link';
 
 type StyledBulletLinkProps = React.ComponentProps<typeof Link> & {
   isActive?: boolean;
@@ -72,9 +72,10 @@ const Bullet = styled.span<{ isActive?: boolean }>`
   ${(props) => props.isActive && `background: ${color.secondary};`}
 `;
 
-export interface BulletLinkItem extends Pick<LinkProps, 'LinkWrapper'> {
+export interface BulletLinkItem {
   path: string;
   title: string;
+  LinkWrapper?: Pick<React.ComponentProps<typeof Link>, 'LinkWrapper'>;
 }
 
 interface BulletLinkProps {
diff --git a/src/components/table-of-contents/MenuLink.tsx b/src/components/table-of-contents/MenuLink.tsx
index bf9ecf1e..6e3885cf 100644
--- a/src/components/table-of-contents/MenuLink.tsx
+++ b/src/components/table-of-contents/MenuLink.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import styled from 'styled-components';
-import { color, typography } from '../shared/styles';
-import { Link, LinkProps } from '../Link';
+import { typography } from '../shared/styles';
+import { Link } from '../Link';
 
-type MenuLinkProps = LinkProps & {
+type MenuLinkProps = React.ComponentProps<typeof Link> & {
   isActive?: boolean;
 };
 
-export const MenuLink = styled(({ isActive, ...rest }) => <Link {...rest} />)<MenuLinkProps>`
+export const MenuLink = styled(({ isActive, ...rest }) => <Link {...rest} tertiary={!isActive} />)<
+  MenuLinkProps
+>`
   outline: none;
-  color: ${(props) => (props.isActive ? color.secondary : color.darker)};
   font-weight: ${(props) => (props.isActive ? typography.weight.bold : typography.weight.regular)};
   line-height: 24px;
   text-align: left;