chore: convert type from cva, upgrade storybook and update test file

lib/components/action-sheet/close/close.test.tsx

@@ -1,18 +1,18 @@
-import { screen, render } from 'test-utils'
-import userEvent from '@testing-library/user-event'
-import Close from '.'
+import { screen, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Close from ".";
 
-describe('<ActionSheet.Close/>', () => {
-  it('should render correctly with children', () => {
-    render(<Close>close</Close>)
-    const close = screen.getByText('close')
-    expect(close).toBeInTheDocument()
-  })
-  it('should call `handleToggle` method on click', async () => {
-    const handleClickMock = jest.fn()
-    render(<Close onClick={handleClickMock}>close</Close>)
-    const close = screen.getByText('close')
-    await userEvent.click(close)
-    expect(handleClickMock).toHaveBeenCalled()
-  })
-})
+describe("<ActionSheet.Close/>", () => {
+    it("should render correctly with children", () => {
+        render(<Close>close</Close>);
+        const close = screen.getByText("close");
+        expect(close).toBeInTheDocument();
+    });
+    it("should call `handleToggle` method on click", async () => {
+        const handleClickMock = jest.fn();
+        render(<Close onClick={handleClickMock}>close</Close>);
+        const close = screen.getByText("close");
+        await userEvent.click(close);
+        expect(handleClickMock).toHaveBeenCalled();
+    });
+});

lib/components/action-sheet/content/content.test.tsx

@@ -1,11 +1,15 @@
-import { screen, render } from 'test-utils'
-import ActionSheet from '..'
+import { screen, render } from "@testing-library/react";
+import ActionSheet from "..";
 
-describe('<ActionSheet.Content/>', () => {
-  it('should render correctly with className and children', () => {
-    render(<ActionSheet.Content className="px-50">Content</ActionSheet.Content>)
-    const contentEl = screen.getByText('Content')
-    expect(contentEl).toBeInTheDocument()
-    expect(contentEl).toHaveClass('px-50')
-  })
-})
+describe("<ActionSheet.Content/>", () => {
+    it("should render correctly with className and children", () => {
+        render(
+            <ActionSheet.Content className="px-50">
+                Content
+            </ActionSheet.Content>,
+        );
+        const contentEl = screen.getByText("Content");
+        expect(contentEl).toBeInTheDocument();
+        expect(contentEl).toHaveClass("px-50");
+    });
+});

lib/components/action-sheet/controlled.stories.tsx

@@ -11,7 +11,6 @@ const meta: Meta = {
     },
     argTypes: {
         show: { table: { disable: true } },
-        defaultVariants: { table: { disable: true } },
         handleOpen: { table: { disable: true } },
         handleClose: { table: { disable: true } },
         isOpen: {

lib/components/action-sheet/footer/__snapshots__/footer.test.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ActionSheet.Footer/> should render correctly with horizontal 1`] = `
+<div
+  aria-label="horizontal footer"
+  class="quill-action-sheet--footer quill-action-sheet--footer__variant--horizontal"
+>
+  <button>
+    action
+  </button>
+</div>
+`;
+
+exports[`<ActionSheet.Footer/> should render correctly with vertical 1`] = `
+<div
+  aria-label="vertical footer"
+  class="quill-action-sheet--footer quill-action-sheet--footer__variant--vertical"
+>
+  <button>
+    action
+  </button>
+</div>
+`;

lib/components/action-sheet/footer/footer.test.tsx

@@ -1,68 +1,76 @@
-import { screen, render } from 'test-utils'
-import ActionSheet from '..'
-import userEvent from '@testing-library/user-event'
-import { FooterAlignment } from '../types'
+import { screen, render } from "@testing-library/react";
+import ActionSheet from "..";
+import userEvent from "@testing-library/user-event";
+import { FooterAlignment } from "../types";
 
-describe('<ActionSheet.Footer/>', () => {
-  it('should not render footer if no action passed', () => {
-    render(<ActionSheet.Footer aria-label="Footer" />)
-    const footerEl = screen.queryByLabelText('Footer')
-    expect(footerEl).not.toBeInTheDocument()
-  })
-  it('should render correctly with className', () => {
-    const onActionButton = jest.fn()
-    render(
-      <ActionSheet.Footer
-        className="px-50"
-        aria-label="Footer"
-        primaryAction={{ content: 'Primary action', onAction: onActionButton }}
-      />,
-    )
-    const footerEl = screen.getByLabelText('Footer')
-    expect(footerEl).toHaveClass('px-50')
-  })
-  it('should render with primaryAction correctly', async () => {
-    const onActionButton = jest.fn()
-    render(
-      <ActionSheet.Footer
-        primaryAction={{ content: 'Primary action', onAction: onActionButton }}
-      />,
-    )
-    const primaryBtn = screen.getByRole('button', { name: 'Primary action' })
-    expect(primaryBtn).toBeInTheDocument()
-    await userEvent.click(primaryBtn)
-    expect(onActionButton).toHaveBeenCalled()
-  })
-  it('should render secondaryAction correctly', async () => {
-    const onSecondaryAction = jest.fn()
-    render(
-      <ActionSheet.Footer
-        secondaryAction={{
-          content: 'Secondary action',
-          onAction: onSecondaryAction,
-        }}
-      />,
-    )
-    const secondaryBtn = screen.getByRole('button', {
-      name: 'Secondary action',
-    })
-    expect(secondaryBtn).toBeInTheDocument()
-    await userEvent.click(secondaryBtn)
-    expect(onSecondaryAction).toHaveBeenCalled()
-  })
-  const alignments: FooterAlignment[] = ['vertical', 'horizontal']
+describe("<ActionSheet.Footer/>", () => {
+    it("should not render footer if no action passed", () => {
+        render(<ActionSheet.Footer aria-label="Footer" />);
+        const footerEl = screen.queryByLabelText("Footer");
+        expect(footerEl).not.toBeInTheDocument();
+    });
+    it("should render correctly with className", () => {
+        const onActionButton = jest.fn();
+        render(
+            <ActionSheet.Footer
+                className="px-50"
+                aria-label="Footer"
+                primaryAction={{
+                    content: "Primary action",
+                    onAction: onActionButton,
+                }}
+            />,
+        );
+        const footerEl = screen.getByLabelText("Footer");
+        expect(footerEl).toHaveClass("px-50");
+    });
+    it("should render with primaryAction correctly", async () => {
+        const onActionButton = jest.fn();
+        render(
+            <ActionSheet.Footer
+                primaryAction={{
+                    content: "Primary action",
+                    onAction: onActionButton,
+                }}
+            />,
+        );
+        const primaryBtn = screen.getByRole("button", {
+            name: "Primary action",
+        });
+        expect(primaryBtn).toBeInTheDocument();
+        await userEvent.click(primaryBtn);
+        expect(onActionButton).toHaveBeenCalled();
+    });
+    it("should render secondaryAction correctly", async () => {
+        const onSecondaryAction = jest.fn();
+        render(
+            <ActionSheet.Footer
+                secondaryAction={{
+                    content: "Secondary action",
+                    onAction: onSecondaryAction,
+                }}
+            />,
+        );
+        const secondaryBtn = screen.getByRole("button", {
+            name: "Secondary action",
+        });
+        expect(secondaryBtn).toBeInTheDocument();
+        await userEvent.click(secondaryBtn);
+        expect(onSecondaryAction).toHaveBeenCalled();
+    });
+    const alignments: FooterAlignment[] = ["vertical", "horizontal"];
 
-  alignments.forEach((alignment) => {
-    it(`should render correctly with ${alignment}`, () => {
-      render(
-        <ActionSheet.Footer
-          alignment={alignment}
-          aria-label={`${alignment} footer`}
-          primaryAction={{ content: 'action', onAction: () => null }}
-        />,
-      )
-      const footer = screen.getByLabelText(`${alignment} footer`)
-      expect(footer).toMatchSnapshot()
-    })
-  })
-})
+    alignments.forEach((alignment) => {
+        it(`should render correctly with ${alignment}`, () => {
+            render(
+                <ActionSheet.Footer
+                    alignment={alignment}
+                    aria-label={`${alignment} footer`}
+                    primaryAction={{ content: "action", onAction: () => null }}
+                />,
+            );
+            const footer = screen.getByLabelText(`${alignment} footer`);
+            expect(footer).toMatchSnapshot();
+        });
+    });
+});

lib/components/action-sheet/handle-bar/handle-bar.test.tsx

@@ -1,10 +1,10 @@
-import { screen, render } from 'test-utils'
-import ActionSheet from '..'
+import { screen, render } from "@testing-library/react";
+import ActionSheet from "..";
 
-describe('<ActionSheet.HandleBar/>', () => {
-  it('should render correctly with props', () => {
-    render(<ActionSheet.HandleBar aria-label="Handle Bar" />)
-    const handleBarEl = screen.getByLabelText('Handle Bar')
-    expect(handleBarEl).toBeInTheDocument()
-  })
-})
+describe("<ActionSheet.HandleBar/>", () => {
+    it("should render correctly with props", () => {
+        render(<ActionSheet.HandleBar aria-label="Handle Bar" />);
+        const handleBarEl = screen.getByLabelText("Handle Bar");
+        expect(handleBarEl).toBeInTheDocument();
+    });
+});

lib/components/action-sheet/header/header.test.tsx

@@ -1,11 +1,13 @@
-import { render, screen } from 'test-utils'
-import ActionSheet from '..'
+import { render, screen } from "@testing-library/react";
+import ActionSheet from "..";
 
-describe('<ActionSheet.Header/>', () => {
-  it('should render correctly with className and children', () => {
-    render(<ActionSheet.Header className="px-50">Header</ActionSheet.Header>)
-    const headerEl = screen.getByText('Header')
-    expect(headerEl).toBeInTheDocument()
-    expect(headerEl).toHaveClass('px-50')
-  })
-})
+describe("<ActionSheet.Header/>", () => {
+    it("should render correctly with className and children", () => {
+        render(
+            <ActionSheet.Header className="px-50">Header</ActionSheet.Header>,
+        );
+        const headerEl = screen.getByText("Header");
+        expect(headerEl).toBeInTheDocument();
+        expect(headerEl).toHaveClass("px-50");
+    });
+});

lib/components/action-sheet/icon-trigger.stories.tsx

@@ -16,7 +16,6 @@ const meta: Meta = {
     argTypes: {
         isOpen: { table: { disable: true } },
         show: { table: { disable: true } },
-        defaultVariants: { table: { disable: true } },
         handleOpen: { table: { disable: true } },
         handleClose: { table: { disable: true } },
         onOpen: {

lib/components/action-sheet/portal/index.tsx

@@ -44,7 +44,7 @@ const Portal = ({ children, ...restProps }: PortalProps) => {
                                 data-testid="dt-actionsheet-overlay"
                                 onClick={handleClose}
                                 className="quill-action-sheet--portal quill-action-sheet--portal__variant--modal"
-                            ></div>
+                            />
                         )}
                         <div
                             className={clsx(