feat(tabs): add position option to tabs

Add a position variant to tabs. Uses grid to move positions about so the order tabs lins and content
appears is not important.

fix #205

Author: stuarthendren

package.json

@@ -126,7 +126,6 @@
     "*.{ts,tsx,md,json,mdx}": "prettier --write",
     "*.{ts,tsx}": [
       "eslint --cache --fix",
-      "git add",
       "jest --bail --findRelatedTests"
     ]
   },

src/components/Tabs/Tabs.stories.tsx

@@ -84,3 +84,28 @@ Large.args = {
   defaultValue: 'tab3',
   size: 'large',
 }
+
+export const Left = Template.bind({})
+Left.args = {
+  defaultValue: 'tab1',
+  variant: 'primary',
+  position: 'left',
+}
+export const Right = Template.bind({})
+Right.args = {
+  defaultValue: 'tab1',
+  variant: 'secondary',
+  position: 'right',
+}
+export const Top = Template.bind({})
+Top.args = {
+  defaultValue: 'tab1',
+  variant: 'tertiary',
+  position: 'top',
+}
+export const Bottom = Template.bind({})
+Bottom.args = {
+  defaultValue: 'tab1',
+  variant: 'brand',
+  position: 'bottom',
+}

src/components/Tabs/Tabs.tsx

@@ -23,8 +23,18 @@ export const Tab = forwardRef((props, forwardedRef) => (
 )) as TabComponent
 Tab.toString = () => `.${StyledTab.className}`
 
+export const TabsList = styled(List, {
+  display: 'flex',
+  gridArea: 'tabs',
+  borderBottom: '1px solid $grey4',
+})
+
 export const TabsRoot = styled(Root, {
   $$indicatorSize: '2px',
+
+  display: 'grid',
+  gap: '0px 0px',
+
   [`& ${Tab}`]: {
     ...buttonBaseStyle,
     cursor: 'pointer',
@@ -33,23 +43,96 @@ export const TabsRoot = styled(Root, {
     border: 'none',
 
     '&[data-state="active"]': {
-      boxShadow: 'inset 0 -$$indicatorSize 0 0 currentColor',
       cursor: 'auto',
     },
   },
   variants: {
+    size: {
+      small: {
+        $$indicatorSize: '1px',
+        [`& ${Tab}`]: sizeVariants.small,
+      },
+      default: {
+        $$indicatorSize: '2px',
+        [`& ${Tab}`]: sizeVariants.default,
+      },
+      large: {
+        $$indicatorSize: '4px',
+        [`& ${Tab}`]: sizeVariants.large,
+      },
+    },
+    position: {
+      top: {
+        gridTemplateColumns: '1fr',
+        gridTemplateRows: 'auto 1fr',
+        gridTemplateAreas: `"tabs" "content"`,
+        [`& ${Tab}`]: {
+          '&[data-state="active"]': {
+            boxShadow: 'inset 0 -$$indicatorSize 0 0 currentColor',
+          },
+        },
+        [`& ${TabsList}`]: {
+          flexDirection: 'row',
+        },
+      },
+      bottom: {
+        gridTemplateColumns: '1fr',
+        gridTemplateRows: '1fr auto',
+        gridTemplateAreas: `"content" "tabs"`,
+        [`& ${Tab}`]: {
+          '&[data-state="active"]': {
+            boxShadow: 'inset 0 $$indicatorSize 0 0 currentColor',
+          },
+        },
+        [`& ${TabsList}`]: {
+          flexDirection: 'row',
+        },
+      },
+      left: {
+        gridTemplateColumns: 'auto 1fr',
+        gridTemplateRows: '1fr',
+        gridTemplateAreas: `"tabs content"`,
+        [`& ${Tab}`]: {
+          '&[data-state="active"]': {
+            boxShadow: 'inset -$$indicatorSize 0 0 0 currentColor',
+          },
+        },
+        [`& ${TabsList}`]: {
+          flexDirection: 'column',
+        },
+      },
+      right: {
+        gridTemplateColumns: '1fr auto',
+        gridTemplateRows: '1fr',
+        gridTemplateAreas: `"content tabs"`,
+        [`& ${Tab}`]: {
+          '&[data-state="active"]': {
+            boxShadow: 'inset $$indicatorSize 0 0 0 currentColor',
+          },
+        },
+        [`& ${TabsList}`]: {
+          flexDirection: 'column',
+        },
+      },
+    },
     variant: {
       brand: {
         [`& ${Tab}`]: buttonVariants.brand,
+        [`& ${TabsList}`]: {
+          backgroundColor: '$brand',
+        },
       },
       primary: {
         [`& ${Tab}`]: buttonVariants.primary,
+        [`& ${TabsList}`]: {
+          backgroundColor: '$primary',
+        },
       },
       secondary: {
         [`& ${Tab}`]: {
           ...buttonVariants.secondary,
           '&[data-state="active"]': {
-            boxShadow: 'none',
+            boxShadow: 'none !important',
             backgroundColor: '$$active',
             textDecoration: 'underline',
           },
@@ -59,33 +142,15 @@ export const TabsRoot = styled(Root, {
         [`& ${Tab}`]: buttonVariants.tertiary,
       },
     },
-    size: {
-      small: {
-        $$indicatorSize: '1px',
-        [`& ${Tab}`]: sizeVariants.small,
-      },
-      default: {
-        $$indicatorSize: '2px',
-        [`& ${Tab}`]: sizeVariants.default,
-      },
-      large: {
-        $$indicatorSize: '4px',
-        [`& ${Tab}`]: sizeVariants.large,
-      },
-    },
   },
   defaultVariants: {
     variant: 'tertiary',
     size: 'default',
+    position: 'top',
   },
 })
 
-export const TabsList = styled(List, {
-  display: 'flex',
-  borderBottom: '1px solid $grey4',
-  '& *:not(:first-child)': {
-    borderLeft: 'none!important',
-  },
+export const TabContent = styled(Content, {
+  padding: '$3',
+  gridArea: 'content',
 })
-
-export const TabContent = styled(Content, { padding: '$3' })