update(Link): Add truncated prop (#397)

* Truncate link * Add story Co-authored-by: Elizabeth Moore <elizabeth.amoore@airbnb.com>
airbnb · Jul 31, 2020 · 29abe18 · 29abe18
1 parent 1e65b10
commit 29abe18
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 1 deletion.
diff --git a/packages/core/src/components/Link/index.tsx b/packages/core/src/components/Link/index.tsx
@@ -23,12 +23,14 @@ export type LinkProps = ButtonOrLinkProps & {
   muted?: boolean;
   /** Decrease font size to small. */
   small?: boolean;
+  /** Truncate the link text with an ellipsis. */
+  truncated?: boolean;
   /** Bold font. */
   bold?: boolean;
   /** Custom style sheet. */
   styleSheet?: StyleSheet;
   /** Pass text props to the underlying text. */
-  textProps?: Omit<TextProps, 'children' | 'styleSheet'>;
+  textProps?: Omit<TextProps, 'children' | 'styleSheet' | 'truncated'>;
 };
 
 /** A standard link for... linking to things. */
@@ -42,6 +44,7 @@ function Link({
   micro,
   muted,
   small,
+  truncated,
   bold,
   styleSheet,
   textProps = {},
@@ -61,6 +64,7 @@ function Link({
           disabled && styles.link_disabled,
           block && styles.link_block,
           baseline && styles.link_baseline,
+          truncated && styles.link_truncated,
         )}
       >
         {children}

diff --git a/packages/core/src/components/Link/story.tsx b/packages/core/src/components/Link/story.tsx
@@ -115,3 +115,18 @@ export function boldText() {
 boldText.story = {
   name: 'Bold text.',
 };
+
+export function truncatedText() {
+  return (
+    <Link block truncated>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam leo erat, lacinia nec porttitor
+      sed, mollis sed nibh. Nam porta sit amet risus quis interdum. Sed feugiat lorem vitae augue
+      blandit, sed mollis mi laoreet. Donec auctor, enim eget tempus auctor, est lorem laoreet nisi,
+      a rutrum dolor quam eget mi.
+    </Link>
+  );
+}
+
+truncatedText.story = {
+  name: 'Truncated text.',
+};
diff --git a/packages/core/src/components/Link/styles.ts b/packages/core/src/components/Link/styles.ts
@@ -65,4 +65,10 @@ export const linkStyleSheet: StyleSheet = ({ color, pattern, transition }) => ({
       textDecoration: 'none',
     },
   },
+
+  link_truncated: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
 });
diff --git a/packages/core/test/components/Link.test.tsx b/packages/core/test/components/Link.test.tsx
@@ -85,6 +85,16 @@ describe('<Link />', () => {
     expect(wrapper.find(ButtonOrLink).prop('className')).toMatch('link_muted');
   });
 
+  it('renders truncated', () => {
+    const wrapper = mountUseStyles(
+      <Link truncated href="/">
+        Truncated
+      </Link>,
+    );
+
+    expect(wrapper.find(ButtonOrLink).prop('className')).toMatch('link_truncated');
+  });
+
   it('renders the child component with an inline=false prop when block prop is passed', () => {
     const wrapper = mountUseStyles(
       <Link block href="/foo">