[FEQ] Shayan/FEQ-1441/added tab component

lib/components/Button/index.tsx

@@ -1,5 +1,5 @@
 import { ComponentProps, CSSProperties, FC, PropsWithChildren, ReactElement } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { TGenericSizes } from '../../types';
 import { Loader } from '../Loader';
 import { Text } from '../Text';
@@ -42,7 +42,7 @@ export const Button: FC<PropsWithChildren<ButtonProps>> = ({
 }) => {
     const isContained = variant === 'contained';
 
-    const buttonClassNames = classNames(
+    const buttonClassNames = clsx(
         'derivs-button',
         `derivs-button__size--${size}`,
         `derivs-button__variant--${variant}`,

lib/components/Loader/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import './Loader.scss';
 
 type TProps = {
@@ -10,7 +10,7 @@ type TProps = {
 
 export const Loader: React.FC<TProps> = ({ color = '#85ACB0', isFullScreen = true, className }) => (
     <div
-        className={classNames('derivs-loader', { 'derivs-loader--fullscreen': isFullScreen }, className)}
+        className={clsx('derivs-loader', { 'derivs-loader--fullscreen': isFullScreen }, className)}
         data-testid='dt_derivs-loader'
     >
         <span className='derivs-loader__element' role='span' style={{ backgroundColor: color }} />

lib/components/Tabs/Tab.tsx

@@ -0,0 +1,11 @@
+import React, { FC, ReactNode } from 'react';
+
+type TabProps = {
+    children: ReactNode;
+    icon?: ReactNode;
+    title: string;
+};
+
+const Tab: FC<TabProps> = ({ children }) => <>{children}</>;
+
+export default Tab;

lib/components/Tabs/TabTitle.tsx

@@ -0,0 +1,39 @@
+import React, { FC, useCallback } from 'react';
+import clsx from 'clsx';
+import { Text } from '../Text';
+
+export type TabTitleProps = {
+    icon?: React.ReactNode;
+    activeTab: string;
+    isActive?: boolean;
+    setSelectedTab: (label: string) => void;
+    title: string;
+    className?: string;
+    variant: 'primary' | 'secondary';
+};
+
+const TabTitle: FC<TabTitleProps> = ({ icon, activeTab, isActive, setSelectedTab, title,className,variant }) => {
+    const handleOnClick = useCallback((title: string) => {
+        console.log('title',title);
+        setSelectedTab(title);
+    }, [setSelectedTab, activeTab]);
+
+    const classNameVariants = {
+        primary : `derivs-primary-tabs__btn--active`,
+        secondary : `derivs-secondary-tabs__btn--active`,
+    }
+
+    return (
+        <button
+            className={clsx(`derivs-${variant + '-'}tabs__btn`,{
+                [classNameVariants[variant]] : isActive,
+            }, className)}
+            onClick={()=>handleOnClick(title)}
+        >
+            {icon}
+            <Text weight={isActive ? 'bold' : 'normal'}>{title}</Text>
+        </button>
+    );
+};
+
+export default TabTitle;

lib/components/Tabs/Tabs.scss

@@ -0,0 +1,59 @@
+
+.derivs-secondary-tabs {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    &__btn {
+        display: inline-flex;
+        gap: 0.8rem;
+        align-items: center;
+        justify-content: center;
+        width: 50%;
+        border: none;
+        border-bottom: 0.2rem solid var(--light-7-secondary-background, #f2f3f4);
+        background: none;
+        padding: 1rem 0;
+        cursor: pointer;
+        &--active {
+            width: 50%;
+            border: none;
+            border-bottom: 0.2rem solid var(--brand-coral, #ff444f);
+            background: none;
+            padding: 1rem 0;
+        }
+    }
+}
+
+.derivs-primary-tabs {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    background-color: #f2f3f4;
+    padding: 10px;
+    box-sizing: border-box;
+
+    &__btn {
+        display: inline-flex;
+        gap: 0.8rem;
+        align-items: center;
+        justify-content: center;
+        width: 50%;
+        border: none;
+        border-bottom: 0.2rem solid var(--light-7-secondary-background, #f2f3f4);
+        background: none;
+        padding: 0.5rem 0;
+        cursor: pointer;
+        span{
+            color: #999;
+        }
+        &--active {
+            width: 50%;
+            border: none;
+            background: white;
+            border-radius: 10px;
+            span{
+                color: #000;
+            }
+        }
+    }
+}

lib/components/Tabs/Tabs.tsx

@@ -0,0 +1,39 @@
+import React, { FC, ReactElement, useState } from 'react';
+import TabTitle, { TabTitleProps } from './TabTitle';
+import clsx from 'clsx';
+import './Tabs.scss';
+
+type TabsProps = {
+    children: ReactElement<TabTitleProps>[];
+    activeTab: string;
+    wrapperClassName?: string;
+    className?: string;
+    variant?: 'primary' | 'secondary';
+};
+
+const Tabs: FC<TabsProps> = ({ children, activeTab, wrapperClassName, className, variant = 'primary' }): JSX.Element => {
+    const [selectedTab, setSelectedTab] = useState(activeTab);
+
+    return (
+        <div className={wrapperClassName}>
+            <div className={clsx(`derivs-${variant + '-'}tabs`, className)}>
+                {children.map((item) => {
+                    return (
+                        <TabTitle
+                            icon={item.props.icon}
+                            activeTab={selectedTab}
+                            isActive={item.props.title === selectedTab}
+                            key={`derivs-${variant + '-'}tab-${item.props.title}`}
+                            setSelectedTab={setSelectedTab}
+                            title={item.props.title}
+                            variant={variant}
+                        />
+                    )
+                })}
+            </div>
+            {children.find((item) => item.props.title === selectedTab)}
+        </div>
+    );
+};
+
+export default Tabs;

lib/components/Tabs/index.tsx

@@ -0,0 +1,2 @@
+export { default as Tab } from './Tab';
+export { default as Tabs } from './Tabs';

lib/components/Text/index.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, ElementType, ReactNode } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 import './Text.scss';
 
@@ -28,7 +28,7 @@ export const Text: React.FC<TextProps> = ({
     weight = 'normal',
     className
 }) => {
-    const textClassNames = classNames(
+    const textClassNames = clsx(
         'deriv-text',
         `derivs-text__size--${size}`,
         `derivs-text__weight--${weight}`,

lib/main.ts

@@ -1,3 +1,5 @@
 export { Loader } from './components/Loader'
 export { Button } from './components/Button'
-export { Text } from './components/Text'
+export { Text } from './components/Text'
+export { Tab, Tabs } from './components/Tabs'
+