Merge pull request #52 from deriv-com/shayan/add-title-font-size-prop…

…-to-tabs chore: added TitleFontSize to Tabs component
deriv-com · Feb 1, 2024 · d587cd1 · d587cd1
2 parents 4585d43 + 27ecfbb
commit d587cd1
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/lib/components/Tabs/TabTitle.tsx b/lib/components/Tabs/TabTitle.tsx
@@ -11,9 +11,10 @@ export type TabTitleProps = {
     className?: string;
     variant: 'primary' | 'secondary';
     onChange?: () => void;
+    TitleFontSize?: React.ComponentProps<typeof Text>['size'];
 };
 
-const TabTitle = ({ icon, activeTab, isActive, setSelectedTab, title,className,variant, onChange }: TabTitleProps) => {
+const TabTitle = ({ icon, activeTab, isActive, setSelectedTab, title,className,variant, onChange, TitleFontSize }: TabTitleProps) => {
     const handleOnClick = useCallback((title: string) => {
         setSelectedTab(title);
         onChange?.();
@@ -32,7 +33,7 @@ const TabTitle = ({ icon, activeTab, isActive, setSelectedTab, title,className,v
             onClick={()=>handleOnClick(title)}
         >
             {icon}
-            <Text weight={isActive ? 'bold' : 'normal'}>{title}</Text>
+            <Text weight={isActive ? 'bold' : 'normal'} size={TitleFontSize}>{title}</Text>
         </button>
     );
 };

diff --git a/lib/components/Tabs/Tabs.tsx b/lib/components/Tabs/Tabs.tsx
@@ -1,5 +1,6 @@
 import React, { ReactElement, useEffect, useState } from 'react';
 import TabTitle, { TabTitleProps } from './TabTitle';
+import { Text } from '../Text';
 import clsx from 'clsx';
 import './Tabs.scss';
 
@@ -10,9 +11,10 @@ type TabsProps = {
     className?: string;
     variant?: 'primary' | 'secondary';
     onChange?: (index: number) => void;
+    TitleFontSize?: React.ComponentProps<typeof Text>['size'];
 };
 
-const Tabs = ({ children, activeTab, wrapperClassName, className, variant = 'primary', onChange }: TabsProps): JSX.Element => {
+const Tabs = ({ children, activeTab, wrapperClassName, className, variant = 'primary', onChange, TitleFontSize }: TabsProps): JSX.Element => {
     const [selectedTab, setSelectedTab] = useState(activeTab || children[0].props.title);
 
     useEffect(() => {
@@ -36,7 +38,7 @@ const Tabs = ({ children, activeTab, wrapperClassName, className, variant = 'pri
                             variant={variant}
                             onChange={()=>onChange?.(index)}
                             className={item.props.className}
-
+                            TitleFontSize={TitleFontSize}
                         />
                     )
                 })}