TabBar updates

src/components/TabBar/TabBar.stories.tsx

@@ -62,7 +62,7 @@ export const PanelTabDisabled: Story = {
   },
 }
 
-export const PanelTabWitIcons: Story = {
+export const PanelTabWithIcons: Story = {
   args: {
     variant: 'panel',
     tabs: [

src/components/TabBar/index.tsx

@@ -1,23 +1,51 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React from 'react'
+import React, { useState } from 'react'
 
 import { Box, Tabs } from '@chakra-ui/react'
-import { TabBarContainer, TabBarItemPanel, TabBarItemView } from './styled'
-import { TabBarProps } from './types'
+import {
+  TabBarContainer,
+  TabBarItemPanel,
+  TabBarItemView,
+  TabBarItemViewDivider,
+} from './styled'
+import { TabBarItemProps, TabBarProps } from './types'
+
+const getTabIndex = (tabs: TabBarItemProps[], selectedTab?: string) =>
+  tabs.findIndex((t) => t.value === selectedTab)
+
+const getBorderSide = (selectedTabIndex: number) => {
+  if (selectedTabIndex === 1) {
+    return 'none'
+  }
+
+  if (selectedTabIndex === 2) {
+    return 'left'
+  }
+
+  return 'right'
+}
 
 const TabBar = ({
   variant = 'panel',
   defaultValue,
   tabs,
   onTabClick,
 }: TabBarProps) => {
+  const [selectedTabIndex, setSelectedTabIndex] = useState(
+    getTabIndex(tabs, defaultValue) || 0,
+  )
+
+  const isView = variant === 'view'
+
   const handleOnTabClick = (tabValue: string) => {
+    setSelectedTabIndex(getTabIndex(tabs, tabValue))
+
     if (onTabClick) {
       onTabClick(tabValue)
     }
   }
 
-  const TabBarItem = variant === 'view' ? TabBarItemView : TabBarItemPanel
+  const TabBarItem = isView ? TabBarItemView : TabBarItemPanel
 
   return (
     <TabBarContainer variant={variant}>
@@ -27,17 +55,29 @@ const TabBar = ({
         onFocusChange={({ focusedValue }) => handleOnTabClick(focusedValue)}
       >
         <Tabs.List alignItems='center' border='none'>
-          {tabs.map((tab) => (
-            <TabBarItem
-              key={tab.label}
-              aria-label={tab['aria-label'] || tab.label}
-              {...tab}
-            >
-              <Box display='flex' alignItems='center' gap='5px'>
-                {tab.icon}
-                {tab.label}
-              </Box>
-            </TabBarItem>
+          {tabs.map((tab, idx) => (
+            <>
+              {isView &&
+              idx === 1 &&
+              getBorderSide(selectedTabIndex) === 'left' ? (
+                <TabBarItemViewDivider />
+              ) : null}
+              <TabBarItem
+                key={tab.label}
+                aria-label={tab['aria-label'] || tab.label}
+                {...tab}
+              >
+                <Box display='flex' alignItems='center' gap='5px'>
+                  {tab.icon}
+                  {tab.label}
+                </Box>
+              </TabBarItem>
+              {isView &&
+              idx === 1 &&
+              getBorderSide(selectedTabIndex) === 'right' ? (
+                <TabBarItemViewDivider />
+              ) : null}
+            </>
           ))}
         </Tabs.List>
       </Tabs.Root>

src/components/TabBar/styled.ts

@@ -15,13 +15,13 @@ export const TabBarContainer = styled.div<{
     `
     border: 1px solid ${getThemedColor('neutral', 400)};
     background-color: ${getThemedColor('neutral', 200)};
-    border-radius: 2px;
+    border-radius: 4px;
     padding: 4px;
   `}
 `
 
 export const DefaultTab = styled(Tabs.Trigger)`
-  width: 100%;
+  width: 99%;
   height: 40px;
   padding: 8px 16px;
   border-radius: 0px;
@@ -91,6 +91,12 @@ export const TabBarItemPanel = styled(DefaultTab)`
   }
 `
 
+export const TabBarItemViewDivider = styled.div`
+  width: 4px;
+  height: 24px;
+  background-color: ${getThemedColor('neutral', 400)};
+`
+
 export const TabBarItemView = styled(DefaultTab)`
   height: 32px;
   border-radius: 2px;