Merge pull request #67 from deriv-com/meenu-tab-component-fix

deriv-com · Apr 16, 2024 · 96d1b10 · 96d1b10
2 parents fa9eeeb + eeb854c
commit 96d1b10
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 22 deletions.
diff --git a/...mponents/Tab/container/container.test.tsx → ...ab/container/__tests__/container.test.tsx b/...mponents/Tab/container/container.test.tsx → ...ab/container/__tests__/container.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import Tab from "..";
+import Tab from "../../index";
 
 describe("<Tab.Container/>", () => {
     it("should render correctly", () => {

diff --git a/lib/components/Tab/content/content.test.tsx → ...ts/Tab/content/__tests__/content.test.tsx b/lib/components/Tab/content/content.test.tsx → ...ts/Tab/content/__tests__/content.test.tsx
@@ -4,8 +4,8 @@ import {
     render as rtlRender,
     screen,
 } from "@testing-library/react";
-import Tab from "..";
-import { TabContextType } from "../container";
+import Tab from "../../index";
+import { TabContextType } from "../../container";
 
 const render = (
     ui: React.ReactElement,

diff --git a/lib/components/Tab/list/list.test.tsx → ...mponents/Tab/list/__tests__/list.test.tsx b/lib/components/Tab/list/list.test.tsx → ...mponents/Tab/list/__tests__/list.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import Tab from "..";
+import Tab from "../../index";
 
 describe("<Tab.List/>", () => {
     it("should render correctly", () => {

diff --git a/lib/components/Tab/panel/panel.test.tsx → ...onents/Tab/panel/__tests__/panel.test.tsx b/lib/components/Tab/panel/panel.test.tsx → ...onents/Tab/panel/__tests__/panel.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import Tab from "..";
+import Tab from "../../index";
 
 describe("<Tab.Panel/>", () => {
     it("should render correctly", () => {

diff --git a/lib/components/Tab/tab.scss b/lib/components/Tab/tab.scss
@@ -1,10 +1,9 @@
 @import '@quill/spacing.scss/';
-@import '@quill/color.semantic.scss';
+@import "@quill-bundle/color.scss";
 @import '@quill/border.scss';
 @import '@quill/spacing.scss';
 @import '@quill/size.scss';
 @import '@quill/opacity.scss';
-@import '@quill/color.opacity.scss';
 
 .tab-menu {
     border-bottom: var(--core-borderRadius-100) solid var(--core-color-opacity-black-200);
@@ -27,17 +26,35 @@
     }
 
     &__variants {
-        &--size {
-            &-sm {
-                font-size: var(--core-font-size-75);
-                padding: var(--core-spacing-400) var(--core-spacing-200);
-                gap: var(--core-spacing-200);
+        &__size {
+            &__fill {
+                &-sm {
+                    padding: var(--core-spacing-200) var(--core-spacing-400);
+                    min-width: 106px;
+                    justify-content: center;
+                    gap: var(--core-spacing-200);
+                }
+
+                &-md {
+                    min-width: 106px;
+                    padding: var(--core-spacing-400) var(--core-spacing-800);
+                    justify-content: center;
+                    gap: var(--core-spacing-400);
+                }
             }
 
-            &-md {
-                font-size: var(--core-font-size-100);
-                padding: var(--core-spacing-800) var(--core-spacing-600);
-                gap: var(--core-spacing-400);
+            &__hug {
+                &-sm {
+                    padding: var(--core-spacing-200) var(--core-spacing-800) var(--core-spacing-200) var(--core-spacing-400);
+                    justify-content: center;
+                    gap: var(--core-spacing-200);
+                }
+
+                &-md {
+                    padding: var(--core-spacing-400) var(--core-spacing-1200) var(--core-spacing-400) var(--core-spacing-800);
+                    justify-content: center;
+                    gap: var(--core-spacing-400);
+                }
             }
 
         }

diff --git a/lib/components/Tab/tab.stories.tsx b/lib/components/Tab/tab.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta } from "@storybook/react";
-import {} from "@deriv/quill-icons/LabelPaired";
 import MockTab from "./mocks/index";
 import { StandalonePlaceholderRegularIcon } from "@deriv/quill-icons";
 import { ComponentProps } from "react";
@@ -30,17 +29,25 @@ const placeholder = {
     sm: <StandalonePlaceholderRegularIcon iconSize="sm" />,
     md: <StandalonePlaceholderRegularIcon iconSize="md" />,
 };
-export const TabWithIconsOnLeft = (args: ComponentProps<typeof MockTab>) => (
+export const TabWithIconsOnLeftFill = (
+    args: ComponentProps<typeof MockTab>,
+) => (
     <MockTab
         {...args}
         iconPosition="left"
         icon={placeholder[args?.size as keyof typeof placeholder]}
     />
 );
-export const TabWithIconsOnTop = (args: ComponentProps<typeof MockTab>) => (
+export const TabWithIconsOnTopFill = (args: ComponentProps<typeof MockTab>) => (
     <MockTab
         {...args}
         iconPosition="top"
         icon={placeholder[args?.size as keyof typeof placeholder]}
     />
 );
+export const TabWithoutIconsFill = (args: ComponentProps<typeof MockTab>) => (
+    <MockTab {...args} />
+);
+export const TabWithIconsOnLeftHug = (args: ComponentProps<typeof MockTab>) => (
+    <MockTab {...args} tabContent="hug" />
+);
diff --git a/lib/components/Tab/trigger/trigger.test.tsx → ...ts/Tab/trigger/__tests__/trigger.test.tsx b/lib/components/Tab/trigger/trigger.test.tsx → ...ts/Tab/trigger/__tests__/trigger.test.tsx
@@ -5,8 +5,8 @@ import {
     screen,
 } from "@testing-library/react";
 import { LabelPairedPlaceholderMdRegularIcon } from "@deriv/quill-icons/LabelPaired";
-import Tab from "..";
-import { TabContextType } from "../container";
+import Tab from "../../index";
+import { TabContextType } from "../../container";
 import userEvent from "@testing-library/user-event";
 
 const render = (

diff --git a/lib/components/Tab/trigger/trigger.scss b/lib/components/Tab/trigger/trigger.scss
@@ -21,4 +21,7 @@
     svg {
         fill: var(--semantic-color-typography-prominent);
     }
-}
+}
+.label-class {
+    text-align: center;
+}
diff --git a/lib/components/Tab/types.ts b/lib/components/Tab/types.ts
@@ -2,11 +2,13 @@ import React, { ComponentProps } from "react";
 
 export type QuillIconComponent = React.ForwardRefExoticComponent<"ref">;
 export type TTabSize = "sm" | "md";
+export type TTabContent = "hug" | "fill";
 
 export interface TabProps extends ComponentProps<"button"> {
     size?: TTabSize;
     icon?: React.ReactNode;
     iconPosition?: "left" | "top";
     className?: string;
     children?: React.ReactNode;
+    tabContent?: TTabContent;
 }