add climate theme color to tabs

CivicDataLab · Sep 25, 2024 · 5d6f20a · 5d6f20a
1 parent dc5ad6f
commit 5d6f20a
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 3 deletions.
diff --git a/packages/opub-ui/package.json b/packages/opub-ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "opub-ui",
   "description": "OPub UI Library",
-  "version": "0.3.41",
+  "version": "0.3.43",
   "private": false,
   "license": "MIT",
   "author": "CivicDataLab <tech@civicdatalab.in>",

diff --git a/packages/opub-ui/src/components/Tabs/Tabs.module.scss b/packages/opub-ui/src/components/Tabs/Tabs.module.scss
@@ -77,6 +77,11 @@ $item-min-width: 50px;
       font-weight: 500;
     }
 
+    .TitleClimateTheme {
+      color: var(--text-subdued, #484b51);
+      font-weight: 500;
+    }
+
     svg {
       color: var(--icon-highlight);
     }
@@ -93,6 +98,19 @@ $item-min-width: 50px;
         background: var(--action-primary-basic-default, #6e56cf);
       }
     }
+
+    &.ActiveBorderClimateTheme {
+      background-color: #e0f8e2;
+      font-weight: 400;
+      color: var(--text-subdued, #484b51);
+      border: 1px solid var(--border-subdued, #d7dbdf);
+      border-bottom: none;
+      box-shadow: var(--shadow-element-popover);
+
+      &::before {
+        background: #71e57d;
+      }
+    }
   }
 }
 

diff --git a/packages/opub-ui/src/components/Tabs/Tabs.stories.tsx b/packages/opub-ui/src/components/Tabs/Tabs.stories.tsx
@@ -41,6 +41,38 @@ export const Default: Story = {
   args: {},
 };
 
+export const GreenTheme: Story = {
+  render: ({ ...args }) => {
+    return (
+      <>
+        <Tabs defaultValue="1" {...args}>
+          <TabList fitted>
+            <Tab theme="climate" value="1">
+              Tab Name 1
+            </Tab>
+            <Tab theme="climate" value="2">
+              Tab Name 2
+            </Tab>
+            <Tab theme="climate" value="3">
+              Tab Name 3
+            </Tab>
+          </TabList>
+          <TabPanel value="1">
+            <div className="p-5">1</div>
+          </TabPanel>
+          <TabPanel value="2">
+            <div className="p-5">2</div>
+          </TabPanel>
+          <TabPanel value="3">
+            <div className="p-5">3</div>
+          </TabPanel>
+        </Tabs>
+      </>
+    );
+  },
+  args: {},
+};
+
 export const Fitted: Story = {
   render: () => {
     return (

diff --git a/packages/opub-ui/src/components/Tabs/Tabs.tsx b/packages/opub-ui/src/components/Tabs/Tabs.tsx
@@ -35,11 +35,12 @@ const TabList = forwardRef((props: ListProps, ref: any) => {
 
 type TabProps = {
   activeBorder?: boolean;
+  theme?: 'climate' | 'default';
 } & TabsRadix.TabsTriggerProps;
 
 const Tab = forwardRef(
   (
-    { children, className, activeBorder = true, ...props }: TabProps,
+    { children, className, activeBorder = true, theme, ...props }: TabProps,
     ref: any
   ) => {
     return (
@@ -48,10 +49,16 @@ const Tab = forwardRef(
           className={cn(
             styles.Tab,
             activeBorder && styles.ActiveBorder,
+            theme === 'climate' && styles.ActiveBorderClimateTheme,
             className
           )}
         >
-          <Text className={styles.Title} variant="bodyMd">
+          <Text
+            className={cn(
+              theme === 'climate' ? styles.TitleClimateTheme : styles.Title
+            )}
+            variant="bodyMd"
+          >
             {children}
           </Text>
         </button>