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.spec.tsx

@@ -1,10 +1,8 @@
-import { shallow } from 'enzyme';
-import * as React from 'react';
+import { render, screen } from '@testing-library/react';
 import { Tab, TabView, TabViewProps } from './TabView';
-import { TabContent, TabTitle } from './TabView.styled';
 
 const makeView = (props: Partial<TabViewProps> = {}) =>
-  shallow(
+  render(
     <TabView {...props}>
       <Tab title="Tab 1">{() => <div>tab 1</div>}</Tab>
       <Tab title="Tab 2">{() => <div>tab 2</div>}</Tab>,
@@ -12,28 +10,7 @@ const makeView = (props: Partial<TabViewProps> = {}) =>
   );
 
 it('renders tab content correctly', () => {
-  const view = makeView();
+  makeView();
 
-  expect(view.find(Tab).renderProp('children')().text()).toBe('tab 1');
-});
-
-it('automatically picks preselected tab content', () => {
-  const view = makeView({ initialTab: 1 });
-
-  expect(view.find(Tab).renderProp('children')().text()).toBe('tab 2');
-});
-
-it('automatically uses the first tab when preselected tab is not present', () => {
-  const view = makeView({ initialTab: -1 });
-
-  view.find(TabContent).find('i').simulate('load');
-  expect(view.find(Tab).renderProp('children')().text()).toBe('tab 1');
-});
-
-it('changes between tabs when tab is clicked', () => {
-  const view = makeView();
-
-  view.find(TabTitle).at(1).simulate('click');
-
-  expect(view.find(Tab).renderProp('children')().text()).toBe('tab 2');
+  expect(screen.getAllByText(/tab [1-2]/)).toHaveLength(2);
 });

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

@@ -1,8 +1,10 @@
 import * as React from 'react';
+import { BreakpointsProvider } from '../breakpoints';
 import { Tab, TabView } from './TabView';
 
 export default {
   title: 'Atoms/Tab View',
+  decorators: [(story) => <BreakpointsProvider>{story()}</BreakpointsProvider>],
   argTypes: {
     tabCount: { control: 'range', min: 1, max: 100 },
   },
@@ -16,7 +18,7 @@ export const ManyTabs = ({ tabCount }) => {
     <Tab title={`tab ${i}`}>
       {() => (
         <>
-          <h1>tab {i}</h1>
+          <p>tab {i}</p>
           <p>hello!!!!!</p>
         </>
       )}

packages/design-system/atoms/tab-view/TabView.styled.ts

@@ -1,42 +1,69 @@
-import { onTablet } from '@roleypoly/design-system/atoms/breakpoints';
-import { palette } from '@roleypoly/design-system/atoms/colors';
-import { transitions } from '@roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
+import { onSmallScreen } from '../breakpoints';
+import { palette } from '../colors';
+import { transitions } from '../timings';
+import { text500 } from '../typography';
 
-export const TabViewStyled = styled.div``;
+export const TabViewStyled = styled.div`
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+
+  ${onSmallScreen(
+    css`
+      flex-direction: column;
+    `
+  )}
+`;
 
 export const TabTitleRow = styled.div`
-  display: flex;
-  border-bottom: 1px solid ${palette.taupe100};
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
+  flex: 1;
+  width: 23vw;
+  position: fixed;
+  ${onSmallScreen(
+    css`
+      position: unset;
+      max-width: 100vw;
+    `
+  )}
 `;
 
 export const TabTitle = styled.div<{ selected: boolean }>`
-  flex: 1;
-  text-align: center;
-  padding: 0.7em 1em;
-  border-bottom: 3px solid transparent;
-  transition: border-color ${transitions.in2out}s ease-in-out,
-    color ${transitions.in2out}s ease-in-out;
+  padding: 7px;
   cursor: pointer;
-  color: ${palette.taupe500};
+  transition: background-color ${transitions.actionable}s ease-in-out;
+  border-radius: 2px;
+  margin-bottom: 5px;
+
+  &:hover {
+    background-color: ${palette.taupe400};
+  }
+
   ${(props) =>
-    props.selected
-      ? css`
-          color: unset;
-          border-bottom-color: ${palette.taupe500};
-        `
-      : css`
-          &:hover {
-            border-bottom-color: ${palette.taupe300};
-            color: unset;
-          }
-        `};
-  ${onTablet(css`
-    padding: 0.45em 1em;
-  `)}
+    props.selected &&
+    css`
+      background-color: ${palette.taupe300};
+    `}
 `;
 
-export const TabContent = styled.div``;
+export const TabContent = styled.div`
+  padding-left: 1em;
+  margin-left: 23vw;
+  flex: 1;
+
+  ${onSmallScreen(
+    css`
+      padding-left: 0;
+      margin-left: 0;
+      position: unset;
+      max-width: 100vw;
+    `
+  )}
+`;
+
+export const TabContentTitle = styled.div`
+  ${text500}
+
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 10px;
+`;

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>
   );