Refactor: Replace Markdown links with the Link component instead of the styles (#650)

Author: ryanoglesby08

src/rsg-components/Link/LinkRenderer.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import Styled from 'rsg-components/Styled';
 
-export const styles = ({ color }) => ({
+const styles = ({ color }) => ({
 	link: {
 		'&, &:link, &:visited': {
 			fontSize: 'inherit',

src/rsg-components/Markdown/Markdown.js

@@ -4,7 +4,7 @@ import { compiler } from 'markdown-to-jsx';
 import mapValues from 'lodash/mapValues';
 // import memoize from 'lodash/memoize';
 import Styled from 'rsg-components/Styled';
-import { styles as linkStyles } from 'rsg-components/Link';
+import Link from 'rsg-components/Link';
 import { styles as paraStyles } from 'rsg-components/Para';
 
 // We’re explicitly specifying Webpack loaders here so we could skip specifying them in Webpack configuration.
@@ -39,6 +39,9 @@ const getBaseOverrides = memoize(classes => {
 
 	return {
 		...styleOverrides,
+		a: {
+			component: Link,
+		},
 		code: {
 			component: Code,
 			props: {
@@ -70,7 +73,6 @@ const styles = ({ space, fontFamily, fontSize, color, borderRadius }) => ({
 		fontSize: 'inherit',
 	},
 	para: paraStyles({ space, color, fontFamily }).para,
-	a: linkStyles({ color }).link,
 	h1: {
 		composes: '$para',
 		fontSize: fontSize.h1,

src/rsg-components/Markdown/Markdown.spec.js

@@ -3,6 +3,14 @@ import { html } from 'cheerio';
 import Markdown from './Markdown';
 
 describe('Markdown', () => {
+	it('should render links', () => {
+		const markdown = 'a [link](http://test.com)';
+
+		const actual = render(<Markdown text={markdown} />);
+
+		expect(html(actual)).toMatchSnapshot();
+	});
+
 	it('should render Markdown with custom CSS classes', () => {
 		const markdown = `
 # Header

src/rsg-components/Markdown/__snapshots__/Markdown.spec.js.snap

@@ -1,19 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Markdown should render Markdown in span in inline mode 1`] = `"<span class=\\"rsg--base-0\\">Hello <em class=\\"rsg--em-16 rsg--base-0\\">world</em>!</span>"`;
+exports[`Markdown should render Markdown in span in inline mode 1`] = `"<span class=\\"rsg--base-0\\">Hello <em class=\\"rsg--em-15 rsg--base-0\\">world</em>!</span>"`;
 
-exports[`Markdown should render Markdown with custom CSS classes 1`] = `"<div><h1 class=\\"rsg--h1-3 rsg--para-1\\">Header</h1><p class=\\"rsg--p-9 rsg--para-1\\">Text with <em class=\\"rsg--em-16 rsg--base-0\\">some</em> <strong class=\\"rsg--strong-17 rsg--base-0\\">formatting</strong> and a <a class=\\"rsg--a-2\\" href=\\"/foo\\">link</a>.</p><p class=\\"rsg--p-9 rsg--para-1\\"><img alt=\\"Image\\" src=\\"/bar.png\\"></p></div>"`;
+exports[`Markdown should render Markdown with custom CSS classes 1`] = `"<div><h1 class=\\"rsg--h1-2 rsg--para-1\\">Header</h1><p class=\\"rsg--p-8 rsg--para-1\\">Text with <em class=\\"rsg--em-15 rsg--base-0\\">some</em> <strong class=\\"rsg--strong-16 rsg--base-0\\">formatting</strong> and a <a href=\\"/foo\\" class=\\"rsg--link-26\\">link</a>.</p><p class=\\"rsg--p-8 rsg--para-1\\"><img alt=\\"Image\\" src=\\"/bar.png\\"></p></div>"`;
 
-exports[`Markdown should render check-lists correctly 1`] = `"<ul class=\\"rsg--ul-10 rsg--para-1\\"><li class=\\"rsg--li-12 rsg--base-0\\"><input type=\\"checkbox\\" class=\\"rsg--input-13\\" readonly>list 1</li><li class=\\"rsg--li-12 rsg--base-0\\"><input type=\\"checkbox\\" class=\\"rsg--input-13\\" readonly>list 2</li><li class=\\"rsg--li-12 rsg--base-0\\"><input type=\\"checkbox\\" class=\\"rsg--input-13\\" checked readonly>list 3</li></ul>"`;
+exports[`Markdown should render check-lists correctly 1`] = `"<ul class=\\"rsg--ul-9 rsg--para-1\\"><li class=\\"rsg--li-11 rsg--base-0\\"><input type=\\"checkbox\\" class=\\"rsg--input-12\\" readonly>list 1</li><li class=\\"rsg--li-11 rsg--base-0\\"><input type=\\"checkbox\\" class=\\"rsg--input-12\\" readonly>list 2</li><li class=\\"rsg--li-11 rsg--base-0\\"><input type=\\"checkbox\\" class=\\"rsg--input-12\\" checked readonly>list 3</li></ul>"`;
 
-exports[`Markdown should render code blocks without escaping 1`] = `"<pre class=\\"rsg--pre-19 rsg--para-1\\"><code class=\\"rsg--code-18 lang-html\\"><foo></foo></code></pre>"`;
+exports[`Markdown should render code blocks without escaping 1`] = `"<pre class=\\"rsg--pre-18 rsg--para-1\\"><code class=\\"rsg--code-17 lang-html\\"><foo></foo></code></pre>"`;
 
-exports[`Markdown should render headings correctly 1`] = `"<div><h1 class=\\"rsg--h1-3 rsg--para-1\\">one</h1><h2 class=\\"rsg--h2-4 rsg--para-1\\">two</h2><h3 class=\\"rsg--h3-5 rsg--para-1\\">three</h3><h4 class=\\"rsg--h4-6 rsg--para-1\\">four</h4><h5 class=\\"rsg--h5-7 rsg--para-1\\">five</h5><h6 class=\\"rsg--h6-8 rsg--para-1\\">six</h6></div>"`;
+exports[`Markdown should render headings correctly 1`] = `"<div><h1 class=\\"rsg--h1-2 rsg--para-1\\">one</h1><h2 class=\\"rsg--h2-3 rsg--para-1\\">two</h2><h3 class=\\"rsg--h3-4 rsg--para-1\\">three</h3><h4 class=\\"rsg--h4-5 rsg--para-1\\">four</h4><h5 class=\\"rsg--h5-6 rsg--para-1\\">five</h5><h6 class=\\"rsg--h6-7 rsg--para-1\\">six</h6></div>"`;
 
-exports[`Markdown should render inline code with escaping 1`] = `"<p class=\\"rsg--p-9 rsg--para-1\\">Foo <code class=\\"rsg--code-18\\">&lt;bar&gt;</code> baz</p>"`;
+exports[`Markdown should render inline code with escaping 1`] = `"<p class=\\"rsg--p-8 rsg--para-1\\">Foo <code class=\\"rsg--code-17\\">&lt;bar&gt;</code> baz</p>"`;
 
-exports[`Markdown should render mixed nested lists correctly 1`] = `"<ul class=\\"rsg--ul-10 rsg--para-1\\"><li class=\\"rsg--li-12 rsg--base-0\\">list 1</li><li class=\\"rsg--li-12 rsg--base-0\\"><p class=\\"rsg--p-9 rsg--para-1\\">list 2</p><ol class=\\"rsg--ol-11 rsg--para-1\\" start=\\"1\\"><li class=\\"rsg--li-12 rsg--base-0\\">Sub-list</li><li class=\\"rsg--li-12 rsg--base-0\\">Sub-list</li><li class=\\"rsg--li-12 rsg--base-0\\">Sub-list</li></ol></li><li class=\\"rsg--li-12 rsg--base-0\\">list 3</li></ul>"`;
+exports[`Markdown should render links 1`] = `"<p class=\\"rsg--p-8 rsg--para-1\\">a <a href=\\"http://test.com\\" class=\\"rsg--link-26\\">link</a></p>"`;
 
-exports[`Markdown should render ordered lists correctly 1`] = `"<ol class=\\"rsg--ol-11 rsg--para-1\\" start=\\"1\\"><li class=\\"rsg--li-12 rsg--base-0\\">list</li><li class=\\"rsg--li-12 rsg--base-0\\">item</li><li class=\\"rsg--li-12 rsg--base-0\\">three</li></ol>"`;
+exports[`Markdown should render mixed nested lists correctly 1`] = `"<ul class=\\"rsg--ul-9 rsg--para-1\\"><li class=\\"rsg--li-11 rsg--base-0\\">list 1</li><li class=\\"rsg--li-11 rsg--base-0\\"><p class=\\"rsg--p-8 rsg--para-1\\">list 2</p><ol class=\\"rsg--ol-10 rsg--para-1\\" start=\\"1\\"><li class=\\"rsg--li-11 rsg--base-0\\">Sub-list</li><li class=\\"rsg--li-11 rsg--base-0\\">Sub-list</li><li class=\\"rsg--li-11 rsg--base-0\\">Sub-list</li></ol></li><li class=\\"rsg--li-11 rsg--base-0\\">list 3</li></ul>"`;
 
-exports[`Markdown should render unordered lists correctly 1`] = `"<ul class=\\"rsg--ul-10 rsg--para-1\\"><li class=\\"rsg--li-12 rsg--base-0\\">list</li><li class=\\"rsg--li-12 rsg--base-0\\">item</li><li class=\\"rsg--li-12 rsg--base-0\\">three</li></ul>"`;
+exports[`Markdown should render ordered lists correctly 1`] = `"<ol class=\\"rsg--ol-10 rsg--para-1\\" start=\\"1\\"><li class=\\"rsg--li-11 rsg--base-0\\">list</li><li class=\\"rsg--li-11 rsg--base-0\\">item</li><li class=\\"rsg--li-11 rsg--base-0\\">three</li></ol>"`;
+
+exports[`Markdown should render unordered lists correctly 1`] = `"<ul class=\\"rsg--ul-9 rsg--para-1\\"><li class=\\"rsg--li-11 rsg--base-0\\">list</li><li class=\\"rsg--li-11 rsg--base-0\\">item</li><li class=\\"rsg--li-11 rsg--base-0\\">three</li></ul>"`;