Merge pull request #130 from aversini/feat(ButtonLink)-adding-noTrunc…

…ate-prop-and-auto-truncate-by-default feat(ButtonLink): adding noTruncate prop and auto truncate by default
versini-org · Dec 6, 2023 · 9288178 · 9288178
2 parents bdb28ca + 7c27dcd
commit 9288178
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 1 deletion.
diff --git a/packages/documentation/src/stories/ButtonLink.stories.tsx b/packages/documentation/src/stories/ButtonLink.stories.tsx
@@ -15,6 +15,7 @@ const meta: Meta<typeof ButtonLink> = {
 		noBorder: false,
 		slim: false,
 		size: "small",
+		noTruncate: false,
 	},
 	argTypes: {
 		className: {
@@ -47,6 +48,9 @@ const meta: Meta<typeof ButtonLink> = {
 		maxLabelLength: {
 			control: "number",
 		},
+		noTruncate: {
+			control: "boolean",
+		},
 	},
 };
 

diff --git a/packages/ui-components/src/common/constants.ts b/packages/ui-components/src/common/constants.ts
@@ -17,6 +17,7 @@ export const FLEXGRID_CLASSNAME = "av-flexgrid";
 export const FLEXGRID_ITEM_CLASSNAME = "av-flexgrid-item";
 
 export const VISUALLY_HIDDEN_CLASSNAME = "av-visually-hidden";
+export const TRUNCATE_CLASSNAME = "av-truncate-text";
 
 export const FLEXGRID_MAX_COLUMNS = 12;
 export const FLEXGRID_GAP_RATIO = 0.25;
diff --git a/packages/ui-components/src/components/Button/ButtonLink.tsx b/packages/ui-components/src/components/Button/ButtonLink.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 
+import { TRUNCATE_CLASSNAME } from "../../common/constants";
 import { truncate } from "../../common/utilities";
 import type { ButtonLinkProps } from "./ButtonTypes";
 import { getButtonClasses, TYPE_LINK } from "./utilities";
@@ -20,6 +21,7 @@ export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
 			link,
 			target,
 			maxLabelLength,
+			noTruncate = false,
 
 			...otherProps
 		},
@@ -58,7 +60,9 @@ export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
 					href={link}
 					{...extraProps}
 				>
-					{formattedLabel?.truncatedString || children}
+					<div {...(!noTruncate && { className: TRUNCATE_CLASSNAME })}>
+						{formattedLabel?.truncatedString || children}
+					</div>
 				</a>
 			</>
 		);

diff --git a/packages/ui-components/src/components/Button/ButtonTypes.d.ts b/packages/ui-components/src/components/Button/ButtonTypes.d.ts
@@ -24,6 +24,7 @@ export type ButtonLinkProps = {
 	maxLabelLength?: number;
 	slim?: boolean;
 	size?: "small" | "medium" | "large";
+	noTruncate?: boolean;
 } & ButtonProps &
 	React.AnchorHTMLAttributes<HTMLAnchorElement>;
 

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,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
 
 import { expectToHaveClasses } from "../../../common/__tests__/helpers";
+import { TRUNCATE_CLASSNAME } from "../../../common/constants";
 import { ButtonLink } from "../..";
 
 describe("ButtonLink (exceptions)", () => {
@@ -123,4 +124,26 @@ describe("ButtonLink modifiers", () => {
 		const button = await screen.findByRole("link");
 		expect(button).toHaveAttribute("rel", "noopener noreferrer");
 	});
+
+	it("should render an anchor with full text but with truncated class", async () => {
+		render(<ButtonLink link="toto">hello world</ButtonLink>);
+		const button = await screen.findByRole("link");
+		expect(button.className).toContain("py-0");
+		const label = await screen.findByText("hello world");
+		expect(label).toBeDefined();
+		expect(label.className).toContain(TRUNCATE_CLASSNAME);
+	});
+
+	it("should render an anchor with full text without a truncated class", async () => {
+		render(
+			<ButtonLink link="toto" noTruncate>
+				hello world
+			</ButtonLink>,
+		);
+		const button = await screen.findByRole("link");
+		expect(button.className).toContain("py-0");
+		const label = await screen.findByText("hello world");
+		expect(label).toBeDefined();
+		expect(label.className).not.toContain(TRUNCATE_CLASSNAME);
+	});
 });
diff --git a/packages/ui-components/src/components/index.css b/packages/ui-components/src/components/index.css
@@ -17,6 +17,13 @@
 		white-space: nowrap;
 		width: 0;
 	}
+
+	.av-truncate-text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		word-wrap: normal;
+	}
 }
 
 @layer components {