diff --git a/src/components/AppLayout/AccountSwitcher/AccountsItem/__test__/AccountsItem.spec.tsx b/src/components/AppLayout/AccountSwitcher/AccountsItem/__test__/AccountsItem.spec.tsx index 044104d7..17f5d538 100644 --- a/src/components/AppLayout/AccountSwitcher/AccountsItem/__test__/AccountsItem.spec.tsx +++ b/src/components/AppLayout/AccountSwitcher/AccountsItem/__test__/AccountsItem.spec.tsx @@ -90,4 +90,46 @@ describe("AccountsItem Component", () => { await userEvent.click(accountElement!); expect(onSelectAccount).toHaveBeenCalledTimes(1); }); + + it("displays Reset balance button when onResetBalance prop is provided", () => { + const onResetBalance = jest.fn(); + render( + , + ); + + const resetButton = screen.getByText("Reset balance"); + expect(resetButton).toBeInTheDocument(); + expect(screen.queryByText("1000 USD")).not.toBeInTheDocument(); + }); + + it("calls onResetBalance when Reset balance button is clicked", async () => { + const onResetBalance = jest.fn(); + render( + , + ); + + const resetButton = screen.getByText("Reset balance"); + await userEvent.click(resetButton); + expect(onResetBalance).toHaveBeenCalledTimes(1); + }); + + it("displays balance when onResetBalance is not provided", () => { + render( + , + ); + + expect(screen.getByText("1000 USD")).toBeInTheDocument(); + expect(screen.queryByText("Reset balance")).not.toBeInTheDocument(); + }); }); diff --git a/src/components/AppLayout/AccountSwitcher/AccountsItem/index.tsx b/src/components/AppLayout/AccountSwitcher/AccountsItem/index.tsx index 3a56dc09..67aac4b6 100644 --- a/src/components/AppLayout/AccountSwitcher/AccountsItem/index.tsx +++ b/src/components/AppLayout/AccountSwitcher/AccountsItem/index.tsx @@ -2,13 +2,19 @@ import clsx from "clsx"; import { TAccount } from "../types"; import "./AccountsItem.scss"; +import { Button } from "../../../Button"; type AccountSwitcherProps = { account: TAccount; onSelectAccount: () => void; + onResetBalance?: () => void; }; -export const AccountsItem = ({ account, onSelectAccount }: AccountSwitcherProps) => { +export const AccountsItem = ({ + account, + onSelectAccount, + onResetBalance, +}: AccountSwitcherProps) => { return (
- {`${account.balance} ${account.currency}`} + {onResetBalance ? ( + + ) : ( + `${account.balance} ${account.currency}` + )}
); diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 81728c84..a5bcde50 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -33,6 +33,11 @@ $black-outline-hover: rgba(0, 0, 0, 0.08); } &__size { + &--xs { + height: 1.6rem; + border-width: 1px; + padding: 0rem 1.1rem; + } &--sm { height: 2.4rem; border-width: 1px; @@ -227,5 +232,4 @@ $black-outline-hover: rgba(0, 0, 0, 0.08); border-width: 3px; } } - } diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 5b9754d4..d419a78a 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -16,8 +16,8 @@ interface ButtonProps extends ComponentProps<"button"> { isFullWidth?: boolean; isLoading?: boolean; rounded?: Extract; - size?: Extract; - hideHoverStyles?:boolean; + size?: Extract; + hideHoverStyles?: boolean; textSize?: ComponentProps["size"]; variant?: TVariant; } @@ -40,6 +40,7 @@ const ButtonSize = { lg: "deriv-button__size--lg", md: "deriv-button__size--md", sm: "deriv-button__size--sm", + xs: "deriv-button__size--xs", } as const; const ButtonRounded = { @@ -52,6 +53,7 @@ const FontSize = { lg: "lg", md: "sm", sm: "xs", + xs: "xs", } as const; const LoaderColor = { @@ -78,7 +80,7 @@ export const Button = ({ isLoading = false, rounded = "sm", size = "md", - hideHoverStyles=false, + hideHoverStyles = false, textSize, variant = "contained", ...rest @@ -115,7 +117,7 @@ export const Button = ({ {rest.children && !isLoading && ( diff --git a/stories/Button.stories.ts b/stories/Button.stories.ts index b198d9f3..e675680d 100644 --- a/stories/Button.stories.ts +++ b/stories/Button.stories.ts @@ -16,7 +16,7 @@ const meta = { isLoading: false, disabled: false, size: "md", - hideHoverStyles:false, + hideHoverStyles: false, isFullWidth: false, rounded: "sm", type: "button", @@ -45,6 +45,10 @@ const meta = { options: ["true", "false"], control: { type: "boolean" }, }, + size: { + options: ["xs", "sm", "md", "lg"], + control: { type: "radio" }, + }, rounded: { options: ["sm", "md", "lg"], control: { type: "radio" }, @@ -99,8 +103,8 @@ export const ContainedPrimaryWithNoHover: Story = { name: "Contained (Primary No Hover Style)", args: { ...meta.args, - hideHoverStyles:true, - }, + hideHoverStyles: true, + }, }; export const ContainedPrimaryLight: Story = {