feat(design-system): redesign tab-view around quick nav (#194)

* feat(design-system): redesign tab-view around quick nav

* fix tests

packages/design-system/atoms/tab-view/TabView.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { TabContent, TabTitle, TabTitleRow, TabViewStyled } from './TabView.styled';
+import { QuickNav } from '../quick-nav';
+import {
+  TabContent,
+  TabContentTitle,
+  TabTitleRow,
+  TabViewStyled,
+} from './TabView.styled';
 
 export type TabViewProps = {
   children: React.ReactNode[];
@@ -25,26 +31,40 @@ export const TabView = (props: TabViewProps) => {
   }
 
   const [currentTab, setCurrentTab] = React.useState<number>(props.initialTab ?? 0);
+  const tabRefs = tabNames.reduce<{ [name: string]: React.RefObject<HTMLDivElement> }>(
+    (acc, name) => ({ ...acc, [name]: React.createRef() }),
+    {}
+  );
 
   return (
     <TabViewStyled>
       <TabTitleRow>
-        {tabNames.map((tabName, idx) => (
-          <TabTitle
-            selected={currentTab === idx}
-            onClick={() => setCurrentTab(idx)}
-            key={`tab${tabName}${idx}`}
-          >
-            {tabName}
-          </TabTitle>
-        ))}
+        <QuickNav
+          currentNavItem={tabNames[currentTab]}
+          navItems={tabNames}
+          onNavChange={(newTabName) => {
+            setCurrentTab(tabNames.findIndex((name) => newTabName === name));
+            tabRefs[newTabName].current?.scrollIntoView({
+              behavior: 'smooth',
+            });
+          }}
+        />
       </TabTitleRow>
       <TabContent>
-        {props.children[currentTab] || (
-          <i onLoad={() => setCurrentTab(0)}>
-            Tabs were misconfigured, resetting to zero.
-          </i>
-        )}
+        {React.Children.map(props.children, (child) => {
+          if (!React.isValidElement(child)) {
+            return null;
+          }
+
+          return (
+            <div key={child.props.title}>
+              <TabContentTitle ref={tabRefs[child.props.title]}>
+                {child.props.title}
+              </TabContentTitle>
+              {child}
+            </div>
+          );
+        })}
       </TabContent>
     </TabViewStyled>
   );