fix: refactor Button and Anchor

some breaking changes such as link renamed into href but since Anchor is in alpha mode, no bump in main version
versini-org · Apr 14, 2024 · 6dea367 · 6dea367
1 parent a79b9d6
commit 6dea367
Show file tree

Hide file tree

Showing 16 changed files with 205 additions and 199 deletions.
diff --git a/examples/with-vite/src/main.tsx b/examples/with-vite/src/main.tsx
@@ -92,14 +92,14 @@ module.exports = {
 				<Button>Button</Button>
 			</div>
 			<div className="mb-2 flex flex-wrap gap-2">
-				<Anchor link="https://www.google.com">Anchor as a button</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">Anchor as a button</Anchor>
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor sit amet
 				</Anchor>
 			</div>

diff --git a/examples/with-webpack/src/main.tsx b/examples/with-webpack/src/main.tsx
@@ -92,14 +92,14 @@ module.exports = {
 				<Button>Button</Button>
 			</div>
 			<div className="mb-2 flex flex-wrap gap-2">
-				<Anchor link="https://www.google.com">Anchor as a button</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">Anchor as a button</Anchor>
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor sit amet
 				</Anchor>
 			</div>

diff --git a/packages/documentation/src/Components/Anchor.stories.tsx b/packages/documentation/src/Components/Anchor.stories.tsx
@@ -6,40 +6,63 @@ export default {
 	meta: {
 		importName: "Anchor",
 	},
+	args: {
+		fullWidth: false,
+		mode: "system",
+		focusMode: "system",
+		raw: false,
+		href: "https://example.com",
+		noBorder: false,
+		size: "small",
+		noTruncate: false,
+		noNewWindowIcon: false,
+	},
+	argTypes: {
+		mode: {
+			options: ["dark", "light", "system", "alt-system"],
+			control: { type: "radio" },
+		},
+		focusMode: {
+			options: ["dark", "light", "system", "alt-system"],
+			control: { type: "radio" },
+		},
+		size: {
+			options: ["small", "medium", "large"],
+			control: { type: "radio" },
+		},
+	},
 };
 
 export const Basic: Story<any> = (args) => (
-	<div className="flex flex-wrap">
+	<div className="flex flex-wrap gap-2">
 		<Anchor {...args}>Anchor as a button</Anchor>
 		<Anchor {...args}>Anchor as a button lorem ipsum</Anchor>
 		<Anchor {...args}>Anchor as a button lorem ipsum dolor</Anchor>
 		<Anchor {...args}>Anchor as a button lorem ipsum dolor sit amet</Anchor>
 	</div>
 );
 
-Basic.args = {
-	fullWidth: false,
-	mode: "system",
-	focusMode: "system",
-	raw: false,
-	link: "https://www.google.com",
-	noBorder: false,
-	size: "small",
-	noTruncate: false,
-	spacing: { r: 2, b: 2 },
+export const NewWindow: Story<any> = (args) => (
+	<div className="flex flex-wrap gap-2">
+		<Anchor {...args}>Anchor as a button</Anchor>
+		<Anchor {...args}>Anchor as a button lorem ipsum</Anchor>
+		<Anchor {...args}>Anchor as a button lorem ipsum dolor</Anchor>
+		<Anchor {...args}>Anchor as a button lorem ipsum dolor sit amet</Anchor>
+	</div>
+);
+NewWindow.args = {
+	target: "_blank",
 };
 
-Basic.argTypes = {
-	mode: {
-		options: ["dark", "light", "system", "alt-system"],
-		control: { type: "radio" },
-	},
-	focusMode: {
-		options: ["dark", "light", "system", "alt-system"],
-		control: { type: "radio" },
-	},
-	size: {
-		options: ["small", "medium", "large"],
-		control: { type: "radio" },
-	},
+export const Truncate: Story<any> = (args) => (
+	<div className="flex flex-wrap gap-2">
+		<Anchor {...args}>Anchor as a button</Anchor>
+		<Anchor {...args}>Anchor as a button lorem ipsum</Anchor>
+		<Anchor {...args}>Anchor as a button lorem ipsum dolor</Anchor>
+		<Anchor {...args}>Anchor as a button lorem ipsum dolor sit amet</Anchor>
+	</div>
+);
+
+Truncate.args = {
+	className: "w-44 sm:w-52",
 };
diff --git a/packages/documentation/src/Components/Button.stories.tsx b/packages/documentation/src/Components/Button.stories.tsx
@@ -6,15 +6,44 @@ export default {
 	meta: {
 		importName: "Button",
 	},
+	args: {
+		disabled: false,
+		fullWidth: false,
+		mode: "system",
+		focusMode: "system",
+		size: "medium",
+		raw: false,
+		noBorder: false,
+		variant: "primary",
+		noTruncate: false,
+	},
+	argTypes: {
+		mode: {
+			options: ["dark", "light", "system", "alt-system"],
+			control: { type: "radio" },
+		},
+		focusMode: {
+			options: ["dark", "light", "system", "alt-system"],
+			control: { type: "radio" },
+		},
+		size: {
+			options: ["small", "medium", "large"],
+			control: { type: "radio" },
+		},
+		variant: {
+			options: ["primary", "secondary", "danger"],
+			control: { type: "radio" },
+		},
+	},
 };
 
 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 lorem ipsum</Button>
+				<Button {...args}>Button lorem ipsum dolor</Button>
+				<Button {...args}>Button lorem ipsum dolor sit amet</Button>
 			</div>
 
 			<p>
@@ -35,31 +64,33 @@ export const Basic: Story<any> = (args) => {
 	);
 };
 
-Basic.args = {
-	disabled: false,
-	fullWidth: false,
-	mode: "system",
-	focusMode: "system",
-	size: "medium",
-	raw: false,
-	noBorder: false,
-	variant: "primary",
+export const Truncate: Story<any> = (args) => {
+	return (
+		<>
+			<div className="flex flex-wrap gap-2">
+				<Button {...args}>Button lorem ipsum</Button>
+				<Button {...args}>Button lorem ipsum dolor</Button>
+				<Button {...args}>Button lorem ipsum dolor sit amet</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 lorem ipsum
+				</Button>
+				<Button {...args} variant="secondary">
+					Button lorem ipsum dolor
+				</Button>
+				<Button {...args} variant="danger">
+					Button lorem ipsum dolor sit amet
+				</Button>
+			</div>
+		</>
+	);
 };
-Basic.argTypes = {
-	mode: {
-		options: ["dark", "light", "system", "alt-system"],
-		control: { type: "radio" },
-	},
-	focusMode: {
-		options: ["dark", "light", "system", "alt-system"],
-		control: { type: "radio" },
-	},
-	size: {
-		options: ["small", "medium", "large"],
-		control: { type: "radio" },
-	},
-	variant: {
-		options: ["primary", "secondary", "danger"],
-		control: { type: "radio" },
-	},
+
+Truncate.args = {
+	className: "w-44 sm:w-52",
 };
diff --git a/packages/documentation/src/Components/Header.stories.tsx b/packages/documentation/src/Components/Header.stories.tsx
@@ -131,14 +131,14 @@ const CommonTemplate = () => {
 				<Button>Button</Button>
 			</div>
 			<div className="mb-2 flex flex-wrap gap-2">
-				<Anchor link="https://www.google.com">Anchor as a button</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">Anchor as a button</Anchor>
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor sit amet
 				</Anchor>
 			</div>

diff --git a/packages/documentation/src/Styles/DarkMode.stories.tsx b/packages/documentation/src/Styles/DarkMode.stories.tsx
@@ -113,14 +113,14 @@ const CommonTemplate = () => {
 				<Button>Button</Button>
 			</div>
 			<div className="mb-2 flex flex-wrap gap-2">
-				<Anchor link="https://www.google.com">Anchor as a button</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">Anchor as a button</Anchor>
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor
 				</Anchor>
-				<Anchor link="https://www.google.com">
+				<Anchor href="https://www.google.com">
 					Anchor as a button lorem ipsum dolor sit amet
 				</Anchor>
 			</div>

diff --git a/packages/ui-components/src/common/__tests__/utilities.test.tsx b/packages/ui-components/src/common/__tests__/utilities.test.tsx
diff --git a/packages/ui-components/src/common/utilities.ts b/packages/ui-components/src/common/utilities.ts
diff --git a/packages/ui-components/src/components/Anchor/Anchor.tsx b/packages/ui-components/src/components/Anchor/Anchor.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ButtonLink } from "..";
+import { ButtonLink } from "../Button/ButtonLink";
 import type { AnchorProps } from "./AnchorTypes";
 
 export const Anchor = React.forwardRef<HTMLAnchorElement, AnchorProps>(