From c2f9b78ef39a8ce39da8de2418328b77dc7c402b Mon Sep 17 00:00:00 2001
From: Daniel Almaguer <daniel.almaguer@bigcommerce.com>
Date: Fri, 3 Jan 2020 09:11:24 -0600
Subject: [PATCH] feat(component): add ellipsis prop to Link (#310)

---
 packages/big-design/src/components/Link/Link.tsx  |  1 +
 packages/big-design/src/components/Link/spec.tsx  | 15 +++++++++++++++
 .../big-design/src/components/Link/styled.tsx     |  2 ++
 packages/docs/PropTables/LinkPropTable.tsx        |  5 +++++
 packages/docs/PropTables/TypographyPropTable.tsx  |  2 +-
 5 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/big-design/src/components/Link/Link.tsx b/packages/big-design/src/components/Link/Link.tsx
index 0d6e801cf..86c4945c3 100644
--- a/packages/big-design/src/components/Link/Link.tsx
+++ b/packages/big-design/src/components/Link/Link.tsx
@@ -6,6 +6,7 @@ import { MarginProps } from '../../mixins';
 import { StyledLink } from './styled';
 
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, MarginProps {
+  ellipsis?: boolean;
   external?: boolean;
 }
 
diff --git a/packages/big-design/src/components/Link/spec.tsx b/packages/big-design/src/components/Link/spec.tsx
index 797c48a11..79a60773d 100644
--- a/packages/big-design/src/components/Link/spec.tsx
+++ b/packages/big-design/src/components/Link/spec.tsx
@@ -30,3 +30,18 @@ test('forwards styles', () => {
   expect(container.firstChild).toHaveClass('test');
   expect(container.firstChild).toHaveStyle('background: red');
 });
+
+test('render Link with ellipsis', () => {
+  const { getByTestId } = render(
+    <Link data-testid="link" ellipsis={true}>
+      Test with ellipsis
+    </Link>,
+  );
+  const link = getByTestId('link');
+
+  expect(link).toHaveStyle(`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `);
+});
diff --git a/packages/big-design/src/components/Link/styled.tsx b/packages/big-design/src/components/Link/styled.tsx
index 1f1c50439..adf119a42 100644
--- a/packages/big-design/src/components/Link/styled.tsx
+++ b/packages/big-design/src/components/Link/styled.tsx
@@ -1,4 +1,5 @@
 import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
+import { ellipsis } from 'polished';
 import styled, { css } from 'styled-components';
 
 import { withMargins } from '../../mixins';
@@ -9,6 +10,7 @@ import { LinkProps } from './Link';
 export const StyledLink = styled.a<LinkProps & { isExternal?: boolean }>`
   ${withMargins()};
   ${withTransition(['color'], '70ms')}
+  ${props => props.ellipsis && ellipsis()};
 
   color: ${({ theme }) => theme.colors.primary};
   cursor: pointer;
diff --git a/packages/docs/PropTables/LinkPropTable.tsx b/packages/docs/PropTables/LinkPropTable.tsx
index 6b3a5efb3..28583e518 100644
--- a/packages/docs/PropTables/LinkPropTable.tsx
+++ b/packages/docs/PropTables/LinkPropTable.tsx
@@ -10,6 +10,11 @@ const linkProps: Prop[] = [
       </>
     ),
   },
+  {
+    name: 'ellipsis',
+    types: 'boolean',
+    description: 'Controls whether the text will concat and display ellipse... on overflow.',
+  },
 ];
 
 export const LinkPropTable: React.FC<PropTableWrapper> = props => (
diff --git a/packages/docs/PropTables/TypographyPropTable.tsx b/packages/docs/PropTables/TypographyPropTable.tsx
index c9fe31950..cb231333b 100644
--- a/packages/docs/PropTables/TypographyPropTable.tsx
+++ b/packages/docs/PropTables/TypographyPropTable.tsx
@@ -22,7 +22,7 @@ const typographyProps: Prop[] = [
     ),
   },
   {
-    name: 'ellipse',
+    name: 'ellipsis',
     types: 'boolean',
     description: 'Controls whether the text will concat and display ellipse... on overflow.',
   },