Example of using truncated text in Anchor along with ToolTip

packages/styleguide/src/lib/Typography/Anchor/Anchor.mdx

@@ -27,6 +27,9 @@ export const parameters = {
 
 <ComponentHeader {...parameters} />
 
+<Canvas of={AnchorStories.TruncateWithToolTipExample} />
+<Canvas of={AnchorStories.TruncateWithNoToolTipExample} />
+
 ## Usage
 
 Use an anchor to navigate to another page, resource, or location on the same page.

packages/styleguide/src/lib/Typography/Anchor/Anchor.stories.tsx

@@ -1,9 +1,10 @@
-import { Anchor, GridBox, Text } from '@codecademy/gamut';
+import { Anchor, Box, GridBox, Text, ToolTip } from '@codecademy/gamut';
 import {
   MiniArrowRightIcon,
   MiniInfoOutlineIcon,
 } from '@codecademy/gamut-icons';
 import type { Meta, StoryObj } from '@storybook/react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { PolymorphicAnchors, VariantsExample } from './Anchor.examples';
 
@@ -85,3 +86,79 @@ export const IconModes: Story = {
 export const PolymorphicAnchor: Story = {
   render: () => <PolymorphicAnchors />,
 };
+
+export const TruncateWithTooltip: React.FC<{
+  text: string;
+  toolTipString: string;
+}> = ({ text, toolTipString }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [adjustedText, setAdjustedText] = useState(text);
+
+  const calculateMaxText = (containerWidth: number) => {
+    // Assuming an average character width of 8px, adjust as necessary
+    const averageCharWidth = 8;
+    const maxChars = Math.floor(containerWidth / averageCharWidth);
+    return maxChars;
+  };
+
+  const [shouldTruncate, setShouldTruncate] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (containerRef.current) {
+        const { width } = containerRef.current.getBoundingClientRect();
+        const maxTextLength = calculateMaxText(width);
+        const isTruncated = maxTextLength < text.length;
+        if (isTruncated) {
+          // Adjust the text to fit within the max length
+          const truncatedText = text.slice(0, maxTextLength) + '...';
+          setAdjustedText(truncatedText);
+        } else {
+          setAdjustedText(text);
+        }
+        setShouldTruncate(isTruncated);
+      }
+    };
+    handleResize(); // Initial check
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  });
+
+  const anchor = (
+    <Anchor href="/" variant="inline">
+      {adjustedText}
+    </Anchor>
+  );
+
+  return (
+    <Box ref={containerRef} width={{ _: 300, xs: 450, sm: 600, md: 800 }}>
+      {shouldTruncate ? (
+        <ToolTip info={toolTipString} placement="floating">
+          {anchor}
+        </ToolTip>
+      ) : (
+        anchor
+      )}
+    </Box>
+  );
+};
+
+export const TruncateWithToolTipExample: Story = {
+  render: () => (
+    <TruncateWithTooltip
+      text="This is a looooooong text that will be truncated after one line. Hover to see the tooltip. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+      toolTipString="Example tooltip"
+    />
+  ),
+};
+
+export const TruncateWithNoToolTipExample: Story = {
+  render: () => (
+    <TruncateWithTooltip
+      text="Maybe a toolTip depending on the screen size. Just a chance? maybe?"
+      toolTipString="In case this truncates"
+    />
+  ),
+};