Merge pull request #57 from oasisprotocol/mz/tabs-2

Add new variant to tabs

Author: buberdds

src/components/tabs/index.tsx

@@ -5,8 +5,21 @@ import {
   TabsTrigger as BaseTabsTrigger,
   TabsContent as BaseTabsContent,
 } from '../ui/tabs'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/utils'
 
+const tabsListVariants = cva('p-1 radius-md', {
+  variants: {
+    variant: {
+      default: 'h-10 bg-muted',
+      layout: 'w-full h-12 rounded-b-none bg-border',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
 type TabsProps = React.ComponentProps<typeof BaseTabs>
 
 export const Tabs = ({ className, children, ...props }: TabsProps) => (
@@ -15,10 +28,10 @@ export const Tabs = ({ className, children, ...props }: TabsProps) => (
   </BaseTabs>
 )
 
-type TabsListProps = React.ComponentProps<typeof BaseTabsList>
+type TabsListProps = React.ComponentProps<typeof BaseTabsList> & VariantProps<typeof tabsListVariants>
 
-export const TabsList = ({ className, children, ...props }: TabsListProps) => (
-  <BaseTabsList className={cn('p-1 h-10 bg-muted radius-lg', className)} {...props}>
+export const TabsList = ({ className, children, variant, ...props }: TabsListProps) => (
+  <BaseTabsList className={cn(tabsListVariants({ variant }), className)} {...props}>
     {children}
   </BaseTabsList>
 )

src/stories/Tabs/Tabs.stories.tsx

@@ -41,21 +41,18 @@ export const Default: Story = {
           <TabsTrigger value="transactions">Transactions</TabsTrigger>
           <TabsTrigger value="events">Events</TabsTrigger>
           <TabsTrigger value="transfers">Transfers</TabsTrigger>
+          <TabsTrigger value="disabled" disabled>
+            Disabled
+          </TabsTrigger>
         </TabsList>
         <TabsContent value="transactions">
-          <div className="p-4 border rounded-lg">
-            <p className="text-sm text-muted-foreground mt-2">TabsContent 1</p>
-          </div>
+          <p className="p-4 text-sm text-muted-foreground mt-2">TabsContent 1</p>
         </TabsContent>
         <TabsContent value="events">
-          <div className="p-4 border rounded-lg">
-            <p className="text-sm text-muted-foreground mt-2">TabsContent 2</p>
-          </div>
+          <p className="p-4 text-sm text-muted-foreground mt-2">TabsContent 2</p>
         </TabsContent>
         <TabsContent value="transfers">
-          <div className="p-4 border rounded-lg">
-            <p className="text-sm text-muted-foreground mt-2">TabsContent 3</p>
-          </div>
+          <p className="p-4 text-sm text-muted-foreground mt-2">TabsContent 3</p>
         </TabsContent>
       </>
     ),
@@ -67,28 +64,25 @@ export const Default: Story = {
   },
 }
 
-export const Disabled: Story = {
-  args: {
-    defaultValue: 'account',
-    children: (
-      <>
-        <TabsList>
+export const LayoutVariant: Story = {
+  render: () => (
+    <div className="space-y-8 w-[600px]">
+      <Tabs defaultValue="transactions">
+        <TabsList variant="layout">
           <TabsTrigger value="transactions">Transactions</TabsTrigger>
-          <TabsTrigger value="events" disabled>
-            Events
-          </TabsTrigger>
+          <TabsTrigger value="events">Events</TabsTrigger>
         </TabsList>
         <TabsContent value="transactions">
-          <div className="p-4 border rounded-lg">
+          <div className="p-4 border rounded-b-md">
             <p className="text-sm text-muted-foreground mt-2">TabsContent 1</p>
           </div>
         </TabsContent>
         <TabsContent value="events">
-          <div className="p-4 border rounded-lg">
+          <div className="p-4 border rounded-b-md">
             <p className="text-sm text-muted-foreground mt-2">TabsContent 2</p>
           </div>
         </TabsContent>
-      </>
-    ),
-  },
+      </Tabs>
+    </div>
+  ),
 }