Skip to content
Permalink
Browse files

feat(Link): Added underline style for links within Blocks of text

  • Loading branch information...
HHogg committed Feb 17, 2019
1 parent ab4627f commit 973657de656e6ef2e6723ba3e554ec9164a87a9e
Showing with 11 additions and 17 deletions.
  1. +6 −14 src/Link/Link.css
  2. +4 −2 src/Link/Link.js
  3. +1 −1 src/Markdown/Markdown.js
@@ -2,23 +2,15 @@
color: inherit;
text-decoration: none;
cursor: pointer;
transition-property: color;
transition-property: color, border-width;
transition-duration: var(--transition-time--fast);
transition-timing-function: var(--transition-function);

&:hover {
color: var(--color-accent--shade-1);
}

&.Link--active {
color: var(--color-accent--shade-2);
}

&:active {
color: var(--color-accent--shade-3);
}
&:hover { color: var(--color-accent--shade-1); }
&.Link--active { color: var(--color-accent--shade-2); }
&:active { color: var(--color-accent--shade-3); }
}

.Link--inline-block {
display: inline-block;
.Link--underline {
border-bottom: 0.0625rem dashed var(--color-accent--shade-1);
}
@@ -15,19 +15,21 @@ export default class Link extends Component {
* anchor tag is used.
*/
to: PropTypes.string,
/** Applies and underlines style, perfect for within a block of text */
underline: PropTypes.bool,
};

render() {
const { active, to, ...rest } = this.props;
const { active, to, underline, ...rest } = this.props;
const classes = classnames('Link', {
'Link--active': active,
'Link--underline': underline,
});

return (
<Text color target={ to ? undefined : '_blank' } { ...rest }
Component={ to ? RouterLink : 'a' }
className={ classes }
strong
to={ to } />
);
}
@@ -17,7 +17,7 @@ import Text from '../Text/Text';
const remarkable = new Remarkable();
const renderer = new RemarkableReactRenderer({
components: {
a: ({ children, href }) => <Link href={ href }>{ children }</Link>,
a: ({ children, href }) => <Link href={ href } underline>{ children }</Link>,
blockquote: ({ children }) => <BlockQuote margin="x3">{ children }</BlockQuote>,
h1: ({ children }) => <Text margin="x3" size="x5">{ children }</Text>,
h2: ({ children }) => <Text margin="x3" size="x4">{ children }</Text>,

0 comments on commit 973657d

Please sign in to comment.
You can’t perform that action at this time.