feat(Button): adding prop variant to support different styles (#424)

## Summary by CodeRabbit - **New Features** - Introduced a `variant` property for the Button component, enabling different styles such as "primary," "secondary," and "danger." - Expanded color palette in the UI styles to support danger themes in both dark and light variants. - **Documentation** - Updated Button component documentation to showcase buttons with different `variant` props. - **Tests** - Enhanced Button component tests to cover new variants and styling classes.
versini-org · Mar 17, 2024 · 49eaf4f · 49eaf4f
1 parent 430fed7
commit 49eaf4f
Show file tree

Hide file tree

Showing 6 changed files with 320 additions and 57 deletions.
diff --git a/packages/documentation/src/Components/Button.stories.tsx b/packages/documentation/src/Components/Button.stories.tsx
@@ -10,15 +10,28 @@ export default {
 
 export const Basic: Story<any> = (args) => {
 	return (
-		<div className="flex flex-wrap gap-2">
-			<Button {...args}>Button</Button>
-			<Button {...args}>Button</Button>
-			<Button {...args}>Button</Button>
-			<Button {...args}>Button</Button>
-			<Button {...args}>Button</Button>
-			<Button {...args}>Button</Button>
-			<Button {...args}>Button</Button> <Button {...args}>Button</Button>
-		</div>
+		<>
+			<div className="flex flex-wrap gap-2">
+				<Button {...args}>Button</Button>
+				<Button {...args}>Button</Button>
+				<Button {...args}>Button</Button>
+			</div>
+
+			<p>
+				The following row is having the <code>variant</code> prop hard-coded:
+			</p>
+			<div className="flex flex-wrap gap-2">
+				<Button {...args} variant="primary">
+					Button
+				</Button>
+				<Button {...args} variant="secondary">
+					Button
+				</Button>
+				<Button {...args} variant="danger">
+					Button
+				</Button>
+			</div>
+		</>
 	);
 };
 
@@ -30,6 +43,7 @@ Basic.args = {
 	size: "medium",
 	raw: false,
 	noBorder: false,
+	variant: "primary",
 };
 Basic.argTypes = {
 	mode: {
@@ -44,4 +58,8 @@ Basic.argTypes = {
 		options: ["small", "medium", "large"],
 		control: { type: "radio" },
 	},
+	variant: {
+		options: ["primary", "secondary", "danger"],
+		control: { type: "radio" },
+	},
 };
diff --git a/packages/ui-components/src/components/Button/Button.tsx b/packages/ui-components/src/components/Button/Button.tsx
@@ -19,6 +19,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 			noBorder = false,
 			"aria-label": ariaLabel,
 			spacing,
+			variant = "primary",
 
 			...otherProps
 		},
@@ -35,6 +36,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 			size,
 			noBorder,
 			spacing,
+			variant,
 		});
 
 		return (

diff --git a/packages/ui-components/src/components/Button/ButtonTypes.d.ts b/packages/ui-components/src/components/Button/ButtonTypes.d.ts
@@ -49,6 +49,10 @@ export type ButtonProps = {
 	 * Handler to call when the Button is clicked.
 	 */
 	onClick?: React.MouseEventHandler<HTMLButtonElement>;
+	/**
+	 * The variant style of the Button.
+	 */
+	variant?: "primary" | "secondary" | "danger";
 } & CommonButtonProps &
 	React.ButtonHTMLAttributes<HTMLButtonElement>;
 

diff --git a/packages/ui-components/src/components/Button/__tests__/Button.test.tsx b/packages/ui-components/src/components/Button/__tests__/Button.test.tsx
@@ -174,10 +174,132 @@ describe("Button modifiers", () => {
 		]);
 	});
 
-	it("should render a light button", async () => {
-		render(<Button mode="light">hello</Button>);
+	it("should render a dark button with variant 'secondary'", async () => {
+		render(
+			<Button mode="dark" variant="secondary">
+				hello
+			</Button>,
+		);
 		const button = await screen.findByRole("button");
-		expectToHaveClasses(button, ["bg-action-light", "text-copy-lighter"]);
+		expectToHaveClasses(button, [
+			BUTTON_CLASSNAME,
+			"not-prose",
+			"rounded-full",
+			"bg-action-light",
+			"text-copy-lighter",
+			"px-4",
+			"text-base",
+			"font-medium",
+			"max-h-9",
+			"py-1",
+			"border",
+			"border-border-light",
+			"focus:outline",
+			"focus:outline-2",
+			"focus:outline-offset-2",
+			"focus:outline-focus-dark",
+			"dark:focus:outline-focus-light",
+			"hover:text-copy-light-hover",
+			"hover:bg-action-light-hover",
+			"active:text-copy-light-active",
+			"active:bg-action-light-active",
+		]);
+	});
+
+	it("should render a light button with variant 'secondary'", async () => {
+		render(
+			<Button mode="light" variant="secondary">
+				hello
+			</Button>,
+		);
+		const button = await screen.findByRole("button");
+		expectToHaveClasses(button, [
+			BUTTON_CLASSNAME,
+			"not-prose",
+			"rounded-full",
+			"bg-action-dark",
+			"text-copy-light",
+			"px-4",
+			"text-base",
+			"font-medium",
+			"max-h-9",
+			"py-1",
+			"border",
+			"border-border-dark",
+			"focus:outline",
+			"focus:outline-2",
+			"focus:outline-offset-2",
+			"focus:outline-focus-dark",
+			"dark:focus:outline-focus-light",
+			"hover:text-copy-light-hover",
+			"hover:bg-action-dark-hover",
+			"active:text-copy-light-active",
+			"active:bg-action-dark-active",
+		]);
+	});
+
+	it("should render a dark button with variant 'danger'", async () => {
+		render(
+			<Button mode="dark" variant="danger">
+				hello
+			</Button>,
+		);
+		const button = await screen.findByRole("button");
+		expectToHaveClasses(button, [
+			BUTTON_CLASSNAME,
+			"not-prose",
+			"rounded-full",
+			"bg-action-danger-dark",
+			"text-copy-light",
+			"px-4",
+			"text-base",
+			"font-medium",
+			"max-h-9",
+			"py-1",
+			"border",
+			"border-border-danger-dark",
+			"focus:outline",
+			"focus:outline-2",
+			"focus:outline-offset-2",
+			"focus:outline-focus-dark",
+			"dark:focus:outline-focus-light",
+			"hover:text-copy-light-hover",
+			"hover:bg-action-danger-dark-hover",
+			"active:text-copy-lighter-active",
+			"active:bg-action-danger-dark-active",
+		]);
+	});
+
+	it("should render a light button with variant 'danger'", async () => {
+		render(
+			<Button mode="light" variant="danger">
+				hello
+			</Button>,
+		);
+		const button = await screen.findByRole("button");
+		expectToHaveClasses(button, [
+			BUTTON_CLASSNAME,
+			"not-prose",
+			"rounded-full",
+			"bg-action-danger-light",
+			"text-copy-lighter",
+			"px-4",
+			"text-base",
+			"font-medium",
+			"max-h-9",
+			"py-1",
+			"border",
+			"border-border-danger-medium",
+			"focus:outline",
+			"focus:outline-2",
+			"focus:outline-offset-2",
+			"focus:outline-focus-dark",
+			"dark:focus:outline-focus-light",
+			"hover:text-copy-light-hover",
+			"hover:bg-action-danger-light-hover",
+			"active:text-copy-lighter-active",
+			"active:bg-action-danger-light-active",
+		]);
 	});
 
 	it("should render a disabled dark button", async () => {