Nuzhy/_/stepper css build issue

lib/components/Stepper/base.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import clsx from "clsx";
+import "./stepper.scss";
+import {
+    LabelPairedCheckLgFillIcon,
+    LabelPairedCheckMdFillIcon,
+    LabelPairedCheckSmFillIcon,
+} from "@deriv/quill-icons";
+import { Text } from "@components/Typography";
+import { TBasicStepperProps, TTypographySizes } from "./types";
+
+const fillColor = "var(--semantic-color-slate-solid-surface-frame-low)";
+
+const icon = {
+    sm: <LabelPairedCheckSmFillIcon fill={fillColor} />,
+    md: <LabelPairedCheckMdFillIcon fill={fillColor} />,
+    lg: <LabelPairedCheckLgFillIcon fill={fillColor} />,
+};
+
+const IconOk = ({ size }: { size: TTypographySizes }) => <>{icon[size]}</>;
+
+export const BasicStepper = ({
+    currentStep,
+    Icon = IconOk,
+    size = "md",
+    labels = [],
+    lineSize = "md",
+}: TBasicStepperProps) => (
+    <div className="quill-steps-container">
+        {typeof currentStep === "number" &&
+            labels.map((step, index) => {
+                const isActive = index <= currentStep;
+                const isPreviousInactive = index > currentStep + 1;
+
+                return (
+                    index !== 0 && (
+                        <React.Fragment key={step}>
+                            <div className="step">
+                                <div className="step-circle__pointer">
+                                    <div
+                                        className={clsx(
+                                            "step-circle",
+                                            `step-circle__size-${size}`,
+                                            {
+                                                "step-circle--active": isActive,
+                                                "step-circle--inactive":
+                                                    !isActive,
+                                                "step-circle--disabled":
+                                                    isPreviousInactive,
+                                            },
+                                        )}
+                                        data-testid="dt-step-circle"
+                                    >
+                                        {isActive && <Icon size={size} />}
+                                    </div>
+                                    {index < labels.length - 1 && (
+                                        <div
+                                            className={clsx(
+                                                "step-line",
+                                                `step-line--size-${lineSize}`,
+                                                {
+                                                    "step-line--disabled":
+                                                        index > currentStep,
+                                                },
+                                            )}
+                                            data-testid="dt-step-line"
+                                        />
+                                    )}
+                                </div>
+                                <Text
+                                    as="span"
+                                    bold
+                                    size={size}
+                                    className={clsx(
+                                        `step-circle__label-${size}`,
+                                        {
+                                            "step-circle__label--disabled":
+                                                isPreviousInactive,
+                                        },
+                                    )}
+                                >
+                                    {labels[index]}
+                                </Text>
+                            </div>
+                        </React.Fragment>
+                    )
+                );
+            })}
+    </div>
+);
+
+export default BasicStepper;

lib/components/Stepper/horizontal-stepper/index.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
-import { BasicStepper } from '../../index';
-import { TBasicStepperProps } from '../types';
+import React from "react";
+import { BasicStepper } from "../base";
+import { TBasicStepperProps } from "../types";
 
 export const HorizontalStepper = (props: TBasicStepperProps) => {
     return <BasicStepper {...props} orientation="vertical" />;
-};
+};
+
+export default HorizontalStepper;

lib/components/Stepper/index.ts

@@ -0,0 +1,2 @@
+export * from "./horizontal-stepper";
+export * from "./vertical-stepper";

lib/components/Stepper/vertical-stepper/__tests__/vertical-stepper.test.tsx

@@ -1,11 +1,10 @@
 import { render, screen } from "@testing-library/react";
-import { BasicStepper } from "../../index";
+import { BasicStepper } from "../../base";
 
 describe("BasicStepper component", () => {
-
     const props = {
         currentStep: 1,
-        labels: ['Default', 'Step 1', 'Step 2'],
+        labels: ["Default", "Step 1", "Step 2"],
     };
 
     it("renders steps correctly", () => {
@@ -36,5 +35,4 @@ describe("BasicStepper component", () => {
         const { container } = render(<BasicStepper {...props} size="sm" />);
         expect(container).toMatchSnapshot();
     });
-
 });

lib/components/Stepper/vertical-stepper/index.tsx

@@ -1,7 +1,9 @@
-import { BasicStepper } from '../index';
-import { TBasicStepperProps } from '../types';
+import { BasicStepper } from "../base";
+import { TBasicStepperProps } from "../types";
 import "../stepper.scss";
 
 export const VerticalStepper = (props: TBasicStepperProps) => {
     return <BasicStepper {...props} orientation="vertical" />;
-};
+};
+
+export default VerticalStepper;

lib/components/Stepper/vertical-stepper/stepper-vertical.stories.tsx

@@ -1,17 +1,17 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import "@deriv-com/quill-tokens/dist/quill.css";
-import Stepper from "../index";
+import VerticalStepper from "./index";
 import { LabelPairedCheckMdFillIcon } from "@deriv/quill-icons";
 
 const icons: Record<string, object | null> = {
     with_icon: <LabelPairedCheckMdFillIcon />,
     none: null,
 };
 
-const meta: Meta<typeof Stepper.Vertical> = {
+const meta: Meta<typeof VerticalStepper> = {
     title: "Components/Stepper/VerticalStepper",
-    component: Stepper.Vertical,
+    component: VerticalStepper,
     argTypes: {
         size: {
             options: ["sm", "md", "lg"],
@@ -41,7 +41,7 @@ const meta: Meta<typeof Stepper.Vertical> = {
             options: ["sm", "md"],
             control: "radio",
             description: "To select the line size of the stepper",
-        }
+        },
     },
     tags: ["autodocs"],
     parameters: {
@@ -55,7 +55,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     args: {
         currentStep: 0,
-        labels: ['Default', 'Step 1', 'Step 2'],
+        labels: ["Default", "Step 1", "Step 2"],
         size: "md",
         lineSize: "md",
     },
@@ -64,7 +64,7 @@ export const Default: Story = {
 export const OneStepCompleted: Story = {
     args: {
         currentStep: 1,
-        labels: ['Default', 'Step 1', 'Step 2'],
+        labels: ["Default", "Step 1", "Step 2"],
         size: "md",
         lineSize: "md",
     },
@@ -73,26 +73,25 @@ export const OneStepCompleted: Story = {
 export const AllStepsCompleted: Story = {
     args: {
         currentStep: 2,
-        labels: ['Default', 'Step 1', 'Step 2'],
+        labels: ["Default", "Step 1", "Step 2"],
         size: "md",
         lineSize: "md",
     },
 };
 
 const commonProps = {
     currentStep: 1,
-    labels: ['Default', 'Step 1', 'Step 2'],
+    labels: ["Default", "Step 1", "Step 2"],
 };
 
 export const SmallSize: Story = {
-    render: () => (<Stepper.Vertical {...commonProps} size="sm" lineSize="sm" />),
+    render: () => <VerticalStepper {...commonProps} size="sm" lineSize="sm" />,
 };
 
 export const MiddleSize: Story = {
-    render: () => (<Stepper.Vertical {...commonProps} />),
+    render: () => <VerticalStepper {...commonProps} />,
 };
 
 export const LargeSize: Story = {
-    render: () => (<Stepper.Vertical {...commonProps} size="lg" />),
+    render: () => <VerticalStepper {...commonProps} size="lg" />,
 };
-