feat(component): add ellipsis prop to Link (#310)

bigcommerce · Jan 3, 2020 · c2f9b78 · c2f9b78
1 parent 3aa4c00
commit c2f9b78
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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.',
   },