Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update(Link): Add truncated prop #397

Merged
merged 2 commits into from
Jul 31, 2020
Merged

update(Link): Add truncated prop #397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e7f71c
Truncate link
Jul 30, 2020
9a829b2
Add story
Jul 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/core/src/components/Link/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand All @@ -42,6 +44,7 @@ function Link({
micro,
muted,
small,
truncated,
bold,
styleSheet,
textProps = {},
Expand All @@ -61,6 +64,7 @@ function Link({
disabled && styles.link_disabled,
block && styles.link_block,
baseline && styles.link_baseline,
truncated && styles.link_truncated,
)}
>
{children}
Expand Down
15 changes: 15 additions & 0 deletions packages/core/src/components/Link/story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
};
6 changes: 6 additions & 0 deletions packages/core/src/components/Link/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,4 +65,10 @@ export const linkStyleSheet: StyleSheet = ({ color, pattern, transition }) => ({
textDecoration: 'none',
},
},

link_truncated: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
});
10 changes: 10 additions & 0 deletions packages/core/test/components/Link.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down