fix: refactor Button and Anchor (#492)

some breaking changes such as link renamed into href but since Anchor is
in alpha mode, no bump in main version

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Updated anchor components across various files to use `href` attribute
instead of `link`.
- Introduced new properties like `target`, `className`, and `noTruncate`
across different UI components for enhanced customization and
functionality.
- Added new story examples for `Anchor` and `Button` components in the
documentation to showcase the usage of new properties.

- **Bug Fixes**
- Corrected the import paths and properties for `ButtonLink` and
`Anchor` components to ensure proper functionality.

- **Documentation**
- Enhanced component stories in documentation with additional arguments
and updated existing ones for better clarity and control.

- **Refactor**
- Removed unused properties like `onClick` and `type` from `Button`
components to streamline component interfaces.
- Adjusted utility functions to support new `noTruncate` property,
improving button text handling.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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>

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>

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",
 };

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",
 };

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>

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>

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>(