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/quick-nav/QuickNav.stories.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { BreakpointsProvider } from '../breakpoints/BreakpointProvider';
+import { QuickNav, QuickNavCollapsed, QuickNavExpanded, QuickNavProps } from './QuickNav';
+
+export default {
+  title: 'Atoms/Quick Nav',
+  component: QuickNav,
+  decorators: [(story) => <BreakpointsProvider>{story()}</BreakpointsProvider>],
+  args: {
+    navItems: ['AAAA', 'BBBB', 'CCCC'],
+    currentNavItem: 'AAAA',
+  },
+};
+
+const stateWrapper = (args: QuickNavProps, Component: typeof QuickNav) => {
+  const [currentNavItem, setCurrentNavItem] = useState(args.currentNavItem);
+  return (
+    <Component
+      {...args}
+      currentNavItem={currentNavItem}
+      onNavChange={(newNavItem) => {
+        setCurrentNavItem(newNavItem);
+        args.onNavChange(newNavItem);
+      }}
+    ></Component>
+  );
+};
+
+export const quickNav = (args) => stateWrapper(args, QuickNav);
+export const expanded = (args) => stateWrapper(args, QuickNavExpanded);
+export const collapsed = (args) => stateWrapper(args, QuickNavCollapsed);

packages/design-system/atoms/quick-nav/QuickNav.styled.ts

@@ -0,0 +1,45 @@
+import styled, { css } from 'styled-components';
+import { palette } from '../colors';
+import { transitions } from '../timings';
+
+export const NavItem = styled.div<{ selected: boolean }>`
+  padding: 7px;
+  border-radius: 2px;
+  margin-bottom: 2px;
+  transition: background-color ${transitions.actionable}s ease-in-out;
+
+  &:hover {
+    background-color: ${palette.taupe400};
+  }
+
+  ${(props) =>
+    props.selected &&
+    css`
+      background-color: ${palette.taupe300};
+    `}
+`;
+
+export const DropdownNavIcon = styled.div`
+  padding: 5px;
+  transition: transform ${transitions.actionable}s ease-in-out;
+  transform: translateY(2px);
+`;
+
+export const DropdownNavCurrent = styled.div`
+  padding: 5px;
+`;
+
+export const DropdownNavOpener = styled.div`
+  padding: 5px;
+  display: flex;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: background-color ${transitions.actionable}s ease-in-out;
+
+  &:hover {
+    background-color: ${palette.taupe300};
+    ${DropdownNavIcon} {
+      transform: translateY(3px);
+    }
+  }
+`;

packages/design-system/atoms/quick-nav/QuickNav.tsx

@@ -0,0 +1,85 @@
+// thing should be everything visible on desktop/tablet and a popover when small
+
+import { useBreakpointContext } from '@roleypoly/design-system/atoms/breakpoints';
+import { Popover } from '@roleypoly/design-system/atoms/popover';
+import { useState } from 'react';
+import { GoChevronDown } from 'react-icons/go';
+import {
+  DropdownNavCurrent,
+  DropdownNavIcon,
+  DropdownNavOpener,
+  NavItem,
+} from './QuickNav.styled';
+
+export type QuickNavProps = {
+  navItems: string[];
+  onNavChange?: (newNavItem: string) => void;
+  currentNavItem?: string;
+};
+
+export const QuickNav = (props: QuickNavProps) => {
+  const breakpoints = useBreakpointContext();
+
+  if (breakpoints.screenSize.onSmallScreen) {
+    return <QuickNavCollapsed {...props} />;
+  }
+
+  return <QuickNavExpanded {...props} />;
+};
+
+export const QuickNavExpanded = (props: QuickNavProps) => {
+  return (
+    <div>
+      {props.navItems.map((navItem) => (
+        <NavItem
+          onClick={() => props.onNavChange?.(navItem)}
+          selected={props.currentNavItem === navItem}
+          key={navItem}
+        >
+          {navItem}
+        </NavItem>
+      ))}
+    </div>
+  );
+};
+
+export const QuickNavCollapsed = (props: QuickNavProps) => {
+  const [popoverState, setPopoverState] = useState(false);
+
+  return (
+    <div>
+      {popoverState ? (
+        <Popover
+          headContent={<>Server Editor</>}
+          position={'top left'}
+          active={popoverState}
+          onExit={() => setPopoverState(false)}
+        >
+          {() => (
+            <>
+              {props.navItems.map((navItem) => (
+                <NavItem
+                  onClick={() => {
+                    setPopoverState(false);
+                    props.onNavChange?.(navItem);
+                  }}
+                  selected={props.currentNavItem === navItem}
+                  key={navItem}
+                >
+                  {navItem}
+                </NavItem>
+              ))}
+            </>
+          )}
+        </Popover>
+      ) : (
+        <DropdownNavOpener onClick={() => setPopoverState(true)}>
+          <DropdownNavIcon>
+            <GoChevronDown />
+          </DropdownNavIcon>
+          <DropdownNavCurrent>{props.currentNavItem}</DropdownNavCurrent>
+        </DropdownNavOpener>
+      )}
+    </div>
+  );
+};

packages/design-system/atoms/quick-nav/index.ts

@@ -0,0 +1 @@
+export * from './QuickNav';