From 4aa79fb934e20bd5f7a5d0a6d12642fdebfcdeed Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Tue, 17 Dec 2024 18:24:45 -0500
Subject: [PATCH] docs: adding ButtonLink to API docs (#760)

---
 packages/api/src/stories/ButtonLink.mdx       |  7 ++
 .../api/src/stories/ButtonLink.stories.tsx    | 69 +++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 packages/api/src/stories/ButtonLink.mdx
 create mode 100644 packages/api/src/stories/ButtonLink.stories.tsx

diff --git a/packages/api/src/stories/ButtonLink.mdx b/packages/api/src/stories/ButtonLink.mdx
new file mode 100644
index 00000000..a0bcae7b
--- /dev/null
+++ b/packages/api/src/stories/ButtonLink.mdx
@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/blocks";
+
+import AutoDoc from "../helpers/AutoDoc";
+import * as Stories from "./ButtonLink.stories";
+
+<Meta title="Components/ButtonLink" of={Stories} />
+<AutoDoc importName="ButtonLink" importPackage="ui-button" stage="stable" />
diff --git a/packages/api/src/stories/ButtonLink.stories.tsx b/packages/api/src/stories/ButtonLink.stories.tsx
new file mode 100644
index 00000000..6df2d799
--- /dev/null
+++ b/packages/api/src/stories/ButtonLink.stories.tsx
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import { ButtonLink } from "@versini/ui-button/src/components";
+
+type Story = StoryObj<typeof ButtonLink>;
+
+const meta: Meta<typeof ButtonLink> = {
+	parameters: {
+		layout: "centered",
+		docs: {
+			controls: { exclude: ["spacing"] },
+		},
+	},
+	title: "Components/ButtonLink",
+
+	component: ButtonLink,
+	args: { onClick: fn() },
+};
+
+export default meta;
+
+export const Basic: Story = {
+	render: (args) => (
+		<div className="flex flex-wrap gap-2">
+			<ButtonLink {...args}>Anchor as a button</ButtonLink>
+			<ButtonLink {...args}>Anchor as a button lorem ipsum</ButtonLink>
+			<ButtonLink {...args}>Anchor as a button lorem ipsum dolor</ButtonLink>
+			<ButtonLink {...args}>
+				Anchor as a button lorem ipsum dolor sit amet
+			</ButtonLink>
+		</div>
+	),
+};
+
+export const NewWindow: Story = {
+	args: { target: "_blank" },
+	render: (args) => (
+		<div className="flex flex-wrap gap-2">
+			<ButtonLink {...args}>Anchor as a button</ButtonLink>
+			<ButtonLink {...args}>Anchor as a button lorem ipsum</ButtonLink>
+			<ButtonLink {...args}>Anchor as a button lorem ipsum dolor</ButtonLink>
+			<ButtonLink {...args}>
+				Anchor as a button lorem ipsum dolor sit amet
+			</ButtonLink>
+		</div>
+	),
+};
+
+export const Truncate: Story = {
+	args: { className: "w-44 sm:w-52" },
+	render: (args) => (
+		<>
+			<div className="flex flex-wrap gap-2">
+				<ButtonLink {...args}>Anchor as a button</ButtonLink>
+				<ButtonLink {...args}>Anchor as a button lorem ipsum</ButtonLink>
+				<ButtonLink {...args}>Anchor as a button lorem ipsum dolor</ButtonLink>
+				<ButtonLink {...args}>
+					Anchor as a button lorem ipsum dolor sit amet
+				</ButtonLink>
+			</div>
+			<div className="pt-4">
+				<p>For text to truncate, you need to limit the width of the buttons.</p>
+				<p>This can be done by using Tailwind width classes, for example</p>
+				<code>className={args.className}</code>
+			</div>
+		</>
+	),
+};