Merge pull request #31 from deriv-com/meenu-button-component

deriv-com · Apr 2, 2024 · 4e21020 · 4e21020
2 parents bc92acd + 198cfb6
commit 4e21020
Show file tree

Hide file tree

Showing 23 changed files with 1,831 additions and 4 deletions.
diff --git a/lib/components/Button/base/__tests__/__snapshots__/base-button.test.tsx.snap b/lib/components/Button/base/__tests__/__snapshots__/base-button.test.tsx.snap
@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button component Should render BasicButton with Icon 1`] = `
+<div>
+  <button
+    class="quill-button quill-button__size--md quill__color--primary-coral"
+    data-state=""
+  >
+    <div>
+      Label
+    </div>
+  </button>
+</div>
+`;
+
+exports[`Button component Should render BasicButton with Icon and IconPosition end 1`] = `
+<div>
+  <button
+    class="quill-button quill-button__size--md quill__color--primary-coral"
+    data-state=""
+  >
+    <div>
+      Label
+    </div>
+    <svg
+      height="24"
+      iconSize="md"
+      role="img"
+      viewBox="0 0 14 24"
+      width="14"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g>
+        <path
+          d="M2.75 5h.75c.25 0 .5.25.5.5 0 .281-.25.5-.5.5h-.75C1.781 6 1 6.813 1 7.75v.75c0 .281-.25.5-.5.5a.494.494 0 0 1-.5-.5v-.75C0 6.25 1.219 5 2.75 5M.5 10c.25 0 .5.25.5.5v3c0 .281-.25.5-.5.5a.494.494 0 0 1-.5-.5v-3c0-.25.219-.5.5-.5m13 0c.25 0 .5.25.5.5v3c0 .281-.25.5-.5.5a.494.494 0 0 1-.5-.5v-3c0-.25.219-.5.5-.5m0-1a.494.494 0 0 1-.5-.5v-.75C13 6.813 12.188 6 11.25 6h-.75a.494.494 0 0 1-.5-.5c0-.25.219-.5.5-.5h.75C12.75 5 14 6.25 14 7.75v.75c0 .281-.25.5-.5.5m.5 6.5v.75c0 1.531-1.25 2.75-2.75 2.75h-.75a.494.494 0 0 1-.5-.5c0-.25.219-.5.5-.5h.75c.938 0 1.75-.781 1.75-1.75v-.75c0-.25.219-.5.5-.5.25 0 .5.25.5.5m-13 0v.75c0 .969.781 1.75 1.75 1.75h.75c.25 0 .5.25.5.5 0 .281-.25.5-.5.5h-.75A2.734 2.734 0 0 1 0 16.25v-.75c0-.25.219-.5.5-.5.25 0 .5.25.5.5M5.5 19a.494.494 0 0 1-.5-.5c0-.25.219-.5.5-.5h3c.25 0 .5.25.5.5 0 .281-.25.5-.5.5zM5 5.5c0-.25.219-.5.5-.5h3c.25 0 .5.25.5.5 0 .281-.25.5-.5.5h-3a.494.494 0 0 1-.5-.5"
+        />
+      </g>
+      <defs>
+        <clippath
+          id="e82947afc6cdacd898bbbb51ef1f15cc__a"
+        >
+          <path
+            d="M0 0h14v24H0z"
+          />
+        </clippath>
+      </defs>
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Button component Should render BasicButton with Icon and IconPosition start 1`] = `
+<div>
+  <button
+    class="quill-button quill-button__size--md quill__color--primary-coral"
+    data-state=""
+  >
+    <svg
+      height="24"
+      iconSize="md"
+      role="img"
+      viewBox="0 0 14 24"
+      width="14"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g>
+        <path
+          d="M2.75 5h.75c.25 0 .5.25.5.5 0 .281-.25.5-.5.5h-.75C1.781 6 1 6.813 1 7.75v.75c0 .281-.25.5-.5.5a.494.494 0 0 1-.5-.5v-.75C0 6.25 1.219 5 2.75 5M.5 10c.25 0 .5.25.5.5v3c0 .281-.25.5-.5.5a.494.494 0 0 1-.5-.5v-3c0-.25.219-.5.5-.5m13 0c.25 0 .5.25.5.5v3c0 .281-.25.5-.5.5a.494.494 0 0 1-.5-.5v-3c0-.25.219-.5.5-.5m0-1a.494.494 0 0 1-.5-.5v-.75C13 6.813 12.188 6 11.25 6h-.75a.494.494 0 0 1-.5-.5c0-.25.219-.5.5-.5h.75C12.75 5 14 6.25 14 7.75v.75c0 .281-.25.5-.5.5m.5 6.5v.75c0 1.531-1.25 2.75-2.75 2.75h-.75a.494.494 0 0 1-.5-.5c0-.25.219-.5.5-.5h.75c.938 0 1.75-.781 1.75-1.75v-.75c0-.25.219-.5.5-.5.25 0 .5.25.5.5m-13 0v.75c0 .969.781 1.75 1.75 1.75h.75c.25 0 .5.25.5.5 0 .281-.25.5-.5.5h-.75A2.734 2.734 0 0 1 0 16.25v-.75c0-.25.219-.5.5-.5.25 0 .5.25.5.5M5.5 19a.494.494 0 0 1-.5-.5c0-.25.219-.5.5-.5h3c.25 0 .5.25.5.5 0 .281-.25.5-.5.5zM5 5.5c0-.25.219-.5.5-.5h3c.25 0 .5.25.5.5 0 .281-.25.5-.5.5h-3a.494.494 0 0 1-.5-.5"
+        />
+      </g>
+      <defs>
+        <clippath
+          id="e82947afc6cdacd898bbbb51ef1f15cc__a"
+        >
+          <path
+            d="M0 0h14v24H0z"
+          />
+        </clippath>
+      </defs>
+    </svg>
+    <div>
+      Label
+    </div>
+  </button>
+</div>
+`;
+
+exports[`Button component Should render BasicButton with Icon and iconPosition end 1`] = `
+<div>
+  <button
+    class="quill-button quill-button__size--md quill__color--primary-coral"
+    data-state=""
+  >
+    <div>
+      Label
+    </div>
+    <svg
+      height="24"
+      iconSize="md"
+      role="img"
+      viewBox="0 0 14 24"
+      width="14"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g>
+        <path
+          d="M2.75 5h.75c.25 0 .5.25.5.5 0 .281-.25.5-.5.5h-.75C1.781 6 1 6.813 1 7.75v.75c0 .281-.25.5-.5.5a.494.494 0 0 1-.5-.5v-.75C0 6.25 1.219 5 2.75 5M.5 10c.25 0 .5.25.5.5v3c0 .281-.25.5-.5.5a.494.494 0 0 1-.5-.5v-3c0-.25.219-.5.5-.5m13 0c.25 0 .5.25.5.5v3c0 .281-.25.5-.5.5a.494.494 0 0 1-.5-.5v-3c0-.25.219-.5.5-.5m0-1a.494.494 0 0 1-.5-.5v-.75C13 6.813 12.188 6 11.25 6h-.75a.494.494 0 0 1-.5-.5c0-.25.219-.5.5-.5h.75C12.75 5 14 6.25 14 7.75v.75c0 .281-.25.5-.5.5m.5 6.5v.75c0 1.531-1.25 2.75-2.75 2.75h-.75a.494.494 0 0 1-.5-.5c0-.25.219-.5.5-.5h.75c.938 0 1.75-.781 1.75-1.75v-.75c0-.25.219-.5.5-.5.25 0 .5.25.5.5m-13 0v.75c0 .969.781 1.75 1.75 1.75h.75c.25 0 .5.25.5.5 0 .281-.25.5-.5.5h-.75A2.734 2.734 0 0 1 0 16.25v-.75c0-.25.219-.5.5-.5.25 0 .5.25.5.5M5.5 19a.494.494 0 0 1-.5-.5c0-.25.219-.5.5-.5h3c.25 0 .5.25.5.5 0 .281-.25.5-.5.5zM5 5.5c0-.25.219-.5.5-.5h3c.25 0 .5.25.5.5 0 .281-.25.5-.5.5h-3a.494.494 0 0 1-.5-.5"
+        />
+      </g>
+      <defs>
+        <clippath
+          id="e82947afc6cdacd898bbbb51ef1f15cc__a"
+        >
+          <path
+            d="M0 0h14v24H0z"
+          />
+        </clippath>
+      </defs>
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Button component Should render BasicButton with variant=primary 1`] = `
+<div>
+  <button
+    class="quill-button quill-button__size--md quill__color--primary-coral"
+    data-state=""
+  >
+    <div>
+      Label
+    </div>
+  </button>
+</div>
+`;
+
+exports[`Button component Should render BasicButton with variant=secondary 1`] = `
+<div>
+  <button
+    class="quill-button quill-button__size--md quill__color--secondary-coral"
+    data-state=""
+  >
+    <div>
+      Label
+    </div>
+  </button>
+</div>
+`;
+
+exports[`Button component Should render BasicButton with variant=tertiary 1`] = `
+<div>
+  <button
+    class="quill-button quill-button__size--md quill__color--tertiary-coral"
+    data-state=""
+  >
+    <div>
+      Label
+    </div>
+  </button>
+</div>
+`;
diff --git a/lib/components/Button/base/__tests__/base-button.test.tsx b/lib/components/Button/base/__tests__/base-button.test.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { LabelPairedPlaceholderMdRegularIcon } from "@deriv/quill-icons/LabelPaired";
+import { Button } from "../../index";
+import { ButtonProps } from "../../index";
+
+const BasicButtonVariants: ButtonProps["variant"][] = [
+    "primary",
+    "secondary",
+    "tertiary",
+];
+describe("Button component", () => {
+    it("renders button text correctly", () => {
+        render(<Button>Label</Button>);
+        const buttonText = screen.getByText("Label");
+        expect(buttonText).toBeInTheDocument();
+    });
+
+    it("Should handle onClick", async () => {
+        const mockOnClick = jest.fn();
+        const { getByRole } = render(
+            <Button onClick={mockOnClick}>Label</Button>,
+        );
+        const button = getByRole("button");
+        await userEvent.click(button);
+        expect(mockOnClick).toHaveBeenCalled();
+    });
+
+    it("Should render BasicButton with Icon", () => {
+        const { container } = render(
+            <Button icon={<LabelPairedPlaceholderMdRegularIcon />}>
+                Label
+            </Button>,
+        );
+        expect(container).toMatchSnapshot();
+    });
+
+    BasicButtonVariants.forEach((variant) => {
+        it(`Should render BasicButton with variant=${variant}`, () => {
+            const { container } = render(
+                <Button variant={variant}>Label</Button>,
+            );
+            expect(container).toMatchSnapshot();
+        });
+    });
+});
diff --git a/lib/components/Button/base/button.stories.tsx b/lib/components/Button/base/button.stories.tsx
@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./index";
+
+import {
+    LabelPairedPlaceholderSmRegularIcon,
+    LabelPairedPlaceholderMdRegularIcon,
+    LabelPairedPlaceholderLgRegularIcon,
+    LabelPairedPlaceholderXlRegularIcon,
+} from "@deriv/quill-icons/LabelPaired";
+import { ComponentProps } from "react";
+
+const meta = {
+    title: "Components/Button/Basic",
+    component: Button,
+    parameters: {
+        layout: "centered",
+        docs: {
+            story: {
+                height: "350px",
+                width: "350px",
+            },
+        },
+    },
+    tags: ["autodocs"],
+    args: {
+        variant: "primary",
+        label: "Label",
+        color: "coral",
+        isLoading: false,
+        disabled: false,
+        fullWidth: false,
+        type: "button",
+        size: "md",
+    },
+
+    argTypes: {
+        variant: {
+            options: ["primary", "secondary", "tertiary"],
+            control: { type: "radio" },
+        },
+        "aria-label": {
+            table: {
+                disabled: true,
+            },
+        },
+        isLoading: {
+            options: ["true", "false"],
+            control: { type: "boolean" },
+        },
+
+        size: {
+            options: ["sm", "md", "lg", "xl"],
+            control: { type: "radio" },
+        },
+
+        color: {
+            options: ["coral", "black", "white", "purchase", "sell"],
+            control: { type: "radio" },
+        },
+        onClick: {
+            table: {
+                disable: true,
+            },
+        },
+        className: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const BasicPrimaryButton: Story = {
+    args: {
+        size: "xl",
+        label: "Basic Primary Button",
+    },
+};
+export const BasicSecondaryButton: Story = {
+    args: {
+        variant: "secondary",
+        size: "xl",
+        label: "Basic Secondary Button",
+    },
+};
+export const BasicTertiaryButton: Story = {
+    args: {
+        variant: "tertiary",
+        size: "xl",
+        label: "Basic Teritary Button",
+    },
+};
+const placeholder = {
+    sm: <LabelPairedPlaceholderSmRegularIcon />,
+    md: <LabelPairedPlaceholderMdRegularIcon />,
+    lg: <LabelPairedPlaceholderLgRegularIcon />,
+    xl: <LabelPairedPlaceholderXlRegularIcon />,
+};
+
+export const ButtonWithLabelIconAtStart = (
+    args: ComponentProps<typeof Button>,
+) => (
+    <Button
+        {...args}
+        size="lg"
+        iconPosition="start"
+        icon={placeholder[args?.size as keyof typeof placeholder]}
+    />
+);
+export const ButtonWithLabelIconAtEnd = (
+    args: ComponentProps<typeof Button>,
+) => (
+    <Button
+        {...args}
+        size="lg"
+        iconPosition="end"
+        icon={placeholder[args?.size as keyof typeof placeholder]}
+    />
+);