-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: add quill button into action sheet
- Loading branch information
Showing
28 changed files
with
1,840 additions
and
21 deletions.
There are no files selected for viewing
161 changes: 161 additions & 0 deletions
161
lib/components/Button/base/__tests__/__snapshots__/base-button.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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]} | ||
/> | ||
); |
Oops, something went wrong.