Merge pull request #469 from code0-tech/feat/#466

Tab component

Author: nicosammito

src/components/tab/Tab.stories.tsx

@@ -0,0 +1,60 @@
+import {Meta} from "@storybook/react";
+import {Tab, TabContent, TabList, TabTrigger} from "./Tab";
+import {Button} from "../button/Button";
+import {Text} from "../text/Text";
+import React from "react";
+import {IconHome, IconBuilding} from "@tabler/icons-react";
+
+export default {
+    title: "Tab",
+} as Meta
+
+export const TabExample = () => {
+    return <Tab orientation={"horizontal"} defaultValue={"overview"}>
+        <TabList>
+            <TabTrigger value={"overview"}>
+                <Button variant={"none"}>
+                    <IconHome size={16}/>
+                    Overview
+                </Button>
+            </TabTrigger>
+            <TabTrigger value={"organizations"}>
+                <Button variant={"none"}>
+                    <IconBuilding size={16}/>
+                    Organizations
+                </Button>
+            </TabTrigger>
+        </TabList>
+        <TabContent value={"overview"}>
+            <Text>Overview</Text>
+        </TabContent>
+        <TabContent value={"organizations"}>
+            <Text>Organizations</Text>
+        </TabContent>
+    </Tab>
+}
+
+export const TabExampleVertical = () => {
+    return <Tab orientation={"vertical"} defaultValue={"overview"}>
+        <TabList>
+            <TabTrigger value={"overview"}>
+                <Button variant={"none"}>
+                    <IconHome size={16}/>
+                    Overview
+                </Button>
+            </TabTrigger>
+            <TabTrigger value={"organizations"}>
+                <Button variant={"none"}>
+                    <IconBuilding size={16}/>
+                    Organizations
+                </Button>
+            </TabTrigger>
+        </TabList>
+        <TabContent w={"200px"} value={"overview"}>
+            <Text>Overview</Text>
+        </TabContent>
+        <TabContent w={"200px"} value={"organizations"}>
+            <Text>Organizations</Text>
+        </TabContent>
+    </Tab>
+}

src/components/tab/Tab.style.scss

@@ -0,0 +1,65 @@
+@use "../../styles/variables";
+@use "../../styles/helpers";
+
+.tab {
+
+  &[data-orientation="vertical"] {
+    display: flex;
+  }
+
+  &__list {
+    display: flex;
+
+    &[data-orientation="vertical"] {
+      flex-direction: column;
+    }
+  }
+
+  &__trigger {
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    box-sizing: border-box;
+
+    &:after {
+      content: "";
+      position: absolute;
+      background: transparent;
+      border-radius: 50rem;
+    }
+
+    &[data-orientation="vertical"] {
+      &:after {
+        height: 100%;
+        width: 2px;
+        top: 0;
+        left: 0;
+      }
+    }
+
+    &[data-orientation="horizontal"] {
+      &:after {
+        width: 100%;
+        height: 2px;
+        bottom: 0;
+        left: 0;
+      }
+    }
+
+    &[aria-selected=true] {
+      &[data-orientation="vertical"], &[data-orientation="horizontal"] {
+        &:after {
+          background: variables.$info;
+        }
+      }
+    }
+
+  }
+
+  &__content {
+
+  }
+
+}

src/components/tab/Tab.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import {Code0ComponentProps, mergeCode0Props} from "../../utils";
+import {
+    Content,
+    List,
+    Tabs,
+    TabsContentProps,
+    TabsListProps,
+    TabsProps,
+    TabsTriggerProps,
+    Trigger
+} from "@radix-ui/react-tabs";
+import "./Tab.style.scss"
+
+export type TabProps = Code0ComponentProps & TabsProps
+export type TabListProps = Code0ComponentProps & TabsListProps;
+export type TabTriggerProps = Code0ComponentProps & TabsTriggerProps
+export type TabContentProps = Code0ComponentProps & TabsContentProps
+
+export const Tab: React.FC<TabProps> = (props) => {
+    return <Tabs data-slot="tabs" {...mergeCode0Props("tab", props)}/>
+}
+
+export const TabList: React.FC<TabListProps> = (props) => {
+    return <List data-slot="tabs" {...mergeCode0Props("tab__list", props)}/>
+}
+
+export const TabTrigger: React.FC<TabTriggerProps> = (props) => {
+    return <Trigger data-slot="tabs"
+                    data-value={props.value}
+                    {...mergeCode0Props("tab__trigger", props) as TabTriggerProps}/>
+
+}
+
+export const TabContent: React.FC<TabContentProps> = (props) => {
+    return <Content data-slot="tabs" {...mergeCode0Props("tab__content", props) as TabContentProps}/>
+}