Merge pull request #81 from aversini/feat!-introducing-Buttons-size-p…

…rop-and-refactor feat!: introducing Buttons size prop and refactor
versini-org · Nov 26, 2023 · 23383fe · 23383fe
2 parents 3ec2ef0 + 27613b2
commit 23383fe
Show file tree

Hide file tree

Showing 11 changed files with 201 additions and 44 deletions.
diff --git a/packages/documentation/src/stories/Button.stories.tsx b/packages/documentation/src/stories/Button.stories.tsx
@@ -12,6 +12,7 @@ const meta: Meta<typeof Button> = {
 		kind: "dark",
 		focus: "light",
 		slim: false,
+		size: "medium",
 		type: "button",
 		raw: false,
 		noBorder: false,
@@ -31,6 +32,10 @@ const meta: Meta<typeof Button> = {
 		noBorder: {
 			control: "boolean",
 		},
+		size: {
+			options: ["small", "medium", "large"],
+			control: { type: "radio" },
+		},
 		slim: {
 			control: "boolean",
 		},
@@ -52,7 +57,7 @@ type Story = StoryObj<typeof Button>;
 
 export const Basic: Story = {
 	render: (args) => (
-		<div className="flex gap-2">
+		<div className="flex flex-wrap gap-2">
 			<Button {...args}>Button</Button>
 			<Button {...args}>Button</Button>
 			<Button {...args}>Button</Button>

diff --git a/packages/documentation/src/stories/ButtonIcon.stories.tsx b/packages/documentation/src/stories/ButtonIcon.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { ButtonIcon, IconSettings } from "@versini/ui-components";
+import { ButtonIcon, IconEdit, IconSettings } from "@versini/ui-components";
 
 const meta: Meta<typeof ButtonIcon> = {
 	component: ButtonIcon,
@@ -14,6 +14,7 @@ const meta: Meta<typeof ButtonIcon> = {
 		type: "button",
 		raw: false,
 		noBorder: false,
+		size: "medium",
 	},
 	argTypes: {
 		className: {
@@ -39,6 +40,10 @@ const meta: Meta<typeof ButtonIcon> = {
 		raw: {
 			control: "boolean",
 		},
+		size: {
+			options: ["small", "medium", "large"],
+			control: { type: "radio" },
+		},
 	},
 };
 
@@ -48,18 +53,18 @@ type Story = StoryObj<typeof ButtonIcon>;
 
 export const Basic: Story = {
 	render: (args) => (
-		<div className="flex gap-2">
+		<div className="flex flex-wrap gap-2">
 			<ButtonIcon {...args}>
 				<IconSettings />
 			</ButtonIcon>
 			<ButtonIcon {...args}>
 				<IconSettings />
 			</ButtonIcon>
 			<ButtonIcon {...args}>
-				<IconSettings />
+				<IconEdit className="h-3 w-3" />
 			</ButtonIcon>
 			<ButtonIcon {...args}>
-				<IconSettings />
+				<IconEdit />
 			</ButtonIcon>
 		</div>
 	),

diff --git a/packages/documentation/src/stories/ButtonLink.stories.tsx b/packages/documentation/src/stories/ButtonLink.stories.tsx
@@ -14,6 +14,7 @@ const meta: Meta<typeof ButtonLink> = {
 		link: "https://www.google.com",
 		noBorder: false,
 		slim: false,
+		size: "small",
 	},
 	argTypes: {
 		className: {
@@ -39,6 +40,13 @@ const meta: Meta<typeof ButtonLink> = {
 		slim: {
 			control: "boolean",
 		},
+		size: {
+			options: ["small", "medium", "large"],
+			control: { type: "radio" },
+		},
+		maxLabelLength: {
+			control: "number",
+		},
 	},
 };
 
@@ -48,11 +56,13 @@ type Story = StoryObj<typeof ButtonLink>;
 
 export const Basic: Story = {
 	render: (args) => (
-		<div className="flex gap-2">
-			<ButtonLink {...args}>Button as a link</ButtonLink>
-			<ButtonLink {...args}>Button as a link</ButtonLink>
-			<ButtonLink {...args}>Button as a link</ButtonLink>
+		<div className="flex flex-wrap gap-2">
 			<ButtonLink {...args}>Button as a link</ButtonLink>
+			<ButtonLink {...args}>Button as a link lorem ipsum</ButtonLink>
+			<ButtonLink {...args}>Button as a link lorem ipsum dolor</ButtonLink>
+			<ButtonLink {...args}>
+				Button as a link lorem ipsum dolor sit amet
+			</ButtonLink>
 		</div>
 	),
 };
diff --git a/packages/ui-components/src/components/Button/Button.tsx b/packages/ui-components/src/components/Button/Button.tsx
@@ -14,6 +14,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 			fullWidth = false,
 			className,
 			slim = false,
+			size = "medium",
 			type = "button",
 			raw = false,
 			noBorder = false,
@@ -30,6 +31,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 			raw,
 			className,
 			slim,
+			size,
 			noBorder,
 		});
 

diff --git a/packages/ui-components/src/components/Button/ButtonIcon.tsx b/packages/ui-components/src/components/Button/ButtonIcon.tsx
@@ -18,6 +18,7 @@ export const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(
 			noBorder = false,
 			"aria-label": ariaLabel,
 			label,
+			size = "medium",
 		},
 		ref,
 	) => {
@@ -30,6 +31,7 @@ export const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(
 			raw,
 			className,
 			noBorder,
+			size,
 		});
 
 		return (

diff --git a/packages/ui-components/src/components/Button/ButtonLink.tsx b/packages/ui-components/src/components/Button/ButtonLink.tsx
@@ -13,6 +13,7 @@ export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
 			fullWidth = false,
 			className,
 			slim = false,
+			size = "small",
 			raw = false,
 			noBorder = false,
 			"aria-label": ariaLabel,
@@ -31,6 +32,7 @@ export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
 			raw,
 			className,
 			slim,
+			size,
 			noBorder,
 		});
 

diff --git a/packages/ui-components/src/components/Button/ButtonTypes.d.ts b/packages/ui-components/src/components/Button/ButtonTypes.d.ts
@@ -3,7 +3,6 @@ export type CommonButtonProps = {
 	focus?: "dark" | "light";
 	fullWidth?: boolean;
 	className?: string;
-	slim?: boolean;
 	raw?: boolean;
 	noBorder?: boolean;
 };
@@ -12,20 +11,25 @@ export type ButtonProps = {
 	onClick?: React.MouseEventHandler<HTMLButtonElement>;
 	disabled?: boolean;
 	type?: "button" | "submit" | "reset";
+	slim?: boolean;
+	size?: "small" | "medium" | "large";
 } & CommonButtonProps & {
 		children?: React.ReactNode;
 	} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-export type ButtonIconProps = {
-	label?: string;
-	children: React.ReactNode;
-} & CommonButtonProps &
-	React.ButtonHTMLAttributes<HTMLButtonElement>;
-
 export type ButtonLinkProps = {
 	children?: React.ReactNode;
 	link?: string;
 	target?: string;
 	maxLabelLength?: number;
+	slim?: boolean;
+	size?: "small" | "medium" | "large";
 } & ButtonProps &
 	React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+export type ButtonIconProps = {
+	label?: string;
+	children: React.ReactNode;
+	size?: "small" | "medium" | "large";
+} & 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
@@ -21,9 +21,8 @@ describe("Button modifiers", () => {
 			"px-4",
 			"py-1",
 			"max-h-9",
-			"text-sm",
+			"text-base",
 			"font-medium",
-			"sm:text-base",
 			"bg-action-dark",
 			"text-copy-light",
 			"hover:bg-action-dark-hover",
@@ -38,10 +37,28 @@ describe("Button modifiers", () => {
 		]);
 	});
 
-	it("should render a slim button", async () => {
+	it("should render a slim (legacy) button", async () => {
 		render(<Button slim>hello</Button>);
 		const button = await screen.findByRole("button");
-		expectToHaveClasses(button, ["px-2", "py-0", "sm:px-4", "max-h-8"]);
+		expectToHaveClasses(button, ["px-4", "py-0", "max-h-8"]);
+	});
+
+	it("should render a size small button", async () => {
+		render(<Button size="small">hello</Button>);
+		const button = await screen.findByRole("button");
+		expectToHaveClasses(button, ["px-4", "py-0", "max-h-8"]);
+	});
+
+	it("should render a size medium button", async () => {
+		render(<Button size="medium">hello</Button>);
+		const button = await screen.findByRole("button");
+		expectToHaveClasses(button, ["px-4", "py-1", "max-h-9"]);
+	});
+
+	it("should render a size large button", async () => {
+		render(<Button size="large">hello</Button>);
+		const button = await screen.findByRole("button");
+		expectToHaveClasses(button, ["px-4", "py-2", "max-h-12"]);
 	});
 
 	it("should render a dark button", async () => {

diff --git a/packages/ui-components/src/components/Button/__tests__/ButtonIcon.test.tsx b/packages/ui-components/src/components/Button/__tests__/ButtonIcon.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
+import { expectToHaveClasses } from "../../../common/__tests__/helpers";
 import { ButtonIcon, IconSettings } from "../..";
 
 describe("ButtonIcon (exceptions)", () => {
@@ -16,7 +17,15 @@ describe("ButtonIcon modifiers", () => {
 			</ButtonIcon>,
 		);
 		const button = await screen.findByRole("button");
-		expect(button.className).toContain("p-2");
+		expect(button.className).toContain("p-1");
+		expectToHaveClasses(button, [
+			"flex",
+			"items-center",
+			"justify-center",
+			"rounded-full",
+			"focus:outline-none",
+			"focus:ring-2",
+		]);
 	});
 
 	it("should render a dark button", async () => {
@@ -76,4 +85,34 @@ describe("ButtonIcon modifiers", () => {
 		const button = await screen.findByRole("button");
 		expect(button.className).toContain("w-full");
 	});
+
+	it("should render a size small button", async () => {
+		render(
+			<ButtonIcon size="small">
+				<IconSettings />
+			</ButtonIcon>,
+		);
+		const button = await screen.findByRole("button");
+		expectToHaveClasses(button, ["w-6", "p-0"]);
+	});
+
+	it("should render a size medium button", async () => {
+		render(
+			<ButtonIcon size="medium">
+				<IconSettings />
+			</ButtonIcon>,
+		);
+		const button = await screen.findByRole("button");
+		expectToHaveClasses(button, ["w-8", "p-1"]);
+	});
+
+	it("should render a size large button", async () => {
+		render(
+			<ButtonIcon size="large">
+				<IconSettings />
+			</ButtonIcon>,
+		);
+		const button = await screen.findByRole("button");
+		expectToHaveClasses(button, ["w-10", "p-2"]);
+	});
 });
diff --git a/packages/ui-components/src/components/Button/__tests__/ButtonLink.test.tsx b/packages/ui-components/src/components/Button/__tests__/ButtonLink.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
+import { expectToHaveClasses } from "../../../common/__tests__/helpers";
 import { ButtonLink } from "../..";
 
 describe("ButtonLink (exceptions)", () => {
@@ -12,10 +13,10 @@ describe("ButtonLink modifiers", () => {
 	it("should render a default anchor", async () => {
 		render(<ButtonLink link="toto">hello</ButtonLink>);
 		const button = await screen.findByRole("link");
-		expect(button.className).toContain("py-1");
+		expect(button.className).toContain("py-0");
 	});
 
-	it("should render a slim anchor", async () => {
+	it("should render a slim (legacy) anchor", async () => {
 		render(
 			<ButtonLink slim link="toto">
 				hello
@@ -25,6 +26,36 @@ describe("ButtonLink modifiers", () => {
 		expect(button.className).toContain("py-0");
 	});
 
+	it("should render a size small anchor", async () => {
+		render(
+			<ButtonLink size="small" link="toto">
+				hello
+			</ButtonLink>,
+		);
+		const button = await screen.findByRole("link");
+		expectToHaveClasses(button, ["px-4", "py-0", "max-h-8"]);
+	});
+
+	it("should render a size medium anchor", async () => {
+		render(
+			<ButtonLink size="medium" link="toto">
+				hello
+			</ButtonLink>,
+		);
+		const button = await screen.findByRole("link");
+		expectToHaveClasses(button, ["px-4", "py-1", "max-h-9"]);
+	});
+
+	it("should render a size large anchor", async () => {
+		render(
+			<ButtonLink size="large" link="toto">
+				hello
+			</ButtonLink>,
+		);
+		const button = await screen.findByRole("link");
+		expectToHaveClasses(button, ["px-4", "py-2", "max-h-12"]);
+	});
+
 	it("should render a dark link", async () => {
 		render(
 			<ButtonLink kind="dark" link="toto">
@@ -66,7 +97,7 @@ describe("ButtonLink modifiers", () => {
 			</ButtonLink>,
 		);
 		const button = await screen.findByRole("link");
-		expect(button.className).toContain("py-1");
+		expect(button.className).toContain("py-0");
 		const label = await screen.findByText("hello...");
 		expect(label).toBeDefined();
 	});
@@ -78,7 +109,7 @@ describe("ButtonLink modifiers", () => {
 			</ButtonLink>,
 		);
 		const button = await screen.findByRole("link");
-		expect(button.className).toContain("py-1");
+		expect(button.className).toContain("py-0");
 		const label = await screen.findByText("hello world");
 		expect(label).toBeDefined();
 	});