Skip to content

Commit

Permalink
Fix: Use Text component for rendering text blocks, em and strong in M…
Browse files Browse the repository at this point in the history 
…arkdown (#731)
  • Loading branch information
@ryanoglesby08 @sapegin
ryanoglesby08 authored and sapegin committed Dec 10, 2017
1 parent 55ce2d5 commit 3df38d4
Show file tree
Hide file tree
Showing 10 changed files with 269 additions and 114 deletions.
37 changes: 21 additions & 16 deletions src/rsg-components/Markdown/Markdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import mapValues from 'lodash/mapValues';
// import memoize from 'lodash/memoize';
import Styled from 'rsg-components/Styled';
import Link from 'rsg-components/Link';
import { styles as paraStyles } from 'rsg-components/Para';
import Text from 'rsg-components/Text';
import Para, { styles as paraStyles } from 'rsg-components/Para';
import MarkdownHeading from 'rsg-components/Markdown/MarkdownHeading';

// We’re explicitly specifying Webpack loaders here so we could skip specifying them in Webpack configuration.
Expand Down Expand Up @@ -79,6 +80,24 @@ const getBaseOverrides = memoize(classes => {
level: 6,
},
},
p: {
component: Para,
props: {
semantic: 'p',
},
},
em: {
component: Text,
props: {
semantic: 'em',
},
},
strong: {
component: Text,
props: {
semantic: 'strong',
},
},
code: {
component: Code,
props: {
Expand All @@ -95,10 +114,7 @@ const getInlineOverrides = memoize(classes => {
return {
...overrides,
p: {
component: 'span',
props: {
className: classes.base,
},
component: Text,
},
};
}, () => 'getInlineOverrides');
Expand All @@ -110,9 +126,6 @@ const styles = ({ space, fontFamily, fontSize, color, borderRadius }) => ({
fontSize: 'inherit',
},
para: paraStyles({ space, color, fontFamily }).para,
p: {
composes: '$para',
},
ul: {
composes: '$para',
paddingLeft: space[3],
Expand Down Expand Up @@ -144,14 +157,6 @@ const styles = ({ space, fontFamily, fontSize, color, borderRadius }) => ({
borderColor: color.border,
borderStyle: 'solid',
},
em: {
composes: '$base',
fontStyle: 'italic',
},
strong: {
composes: '$base',
fontWeight: 'bold',
},
code: {
fontFamily: fontFamily.monospace,
fontSize: 'inherit',
Expand Down
100 changes: 50 additions & 50 deletions src/rsg-components/Markdown/__snapshots__/Markdown.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

exports[`Markdown should render Markdown in span in inline mode 1`] = `
<span class="rsg--base-0">
<span class="rsg--text-27 rsg--inheritSize-28 rsg--baseColor-32">
Hello
<em class="rsg--em-9 rsg--base-0">
<em class="rsg--text-27 rsg--inheritSize-28 rsg--baseColor-32 rsg--em-34">
world
</em>
!
Expand All @@ -15,28 +15,28 @@ exports[`Markdown should render Markdown in span in inline mode 1`] = `
exports[`Markdown should render Markdown with custom CSS classes 1`] = `
<div>
<div class="rsg--spacing-21">
<h1 class="rsg--heading-22 rsg--heading1-23">
<div class="rsg--spacing-19">
<h1 class="rsg--heading-20 rsg--heading1-21">
Header
</h1>
</div>
<p class="rsg--p-2 rsg--para-1">
<p class="rsg--para-17">
Text with
<em class="rsg--em-9 rsg--base-0">
<em class="rsg--text-27 rsg--inheritSize-28 rsg--baseColor-32 rsg--em-34">
some
</em>
<strong class="rsg--strong-10 rsg--base-0">
<strong class="rsg--text-27 rsg--inheritSize-28 rsg--baseColor-32 rsg--strong-35">
formatting
</strong>
and a
<a href="/foo"
class="rsg--link-20"
class="rsg--link-18"
>
link
</a>
.
</p>
<p class="rsg--p-2 rsg--para-1">
<p class="rsg--para-17">
<img alt="Image"
src="/bar.png"
>
Expand All @@ -47,24 +47,24 @@ exports[`Markdown should render Markdown with custom CSS classes 1`] = `
exports[`Markdown should render check-lists correctly 1`] = `
<ul class="rsg--ul-3 rsg--para-1">
<li class="rsg--li-5 rsg--base-0">
<ul class="rsg--ul-2 rsg--para-1">
<li class="rsg--li-4 rsg--base-0">
<input type="checkbox"
class="rsg--input-6"
class="rsg--input-5"
readonly
>
list 1
</li>
<li class="rsg--li-5 rsg--base-0">
<li class="rsg--li-4 rsg--base-0">
<input type="checkbox"
class="rsg--input-6"
class="rsg--input-5"
readonly
>
list 2
</li>
<li class="rsg--li-5 rsg--base-0">
<li class="rsg--li-4 rsg--base-0">
<input type="checkbox"
class="rsg--input-6"
class="rsg--input-5"
checked
readonly
>
Expand All @@ -76,8 +76,8 @@ exports[`Markdown should render check-lists correctly 1`] = `
exports[`Markdown should render code blocks without escaping 1`] = `
<pre class="rsg--pre-12 rsg--para-1">
<code class="lang-html rsg--code-11">
<pre class="rsg--pre-9 rsg--para-1">
<code class="lang-html rsg--code-8">
<foo>
</foo>
</code>
Expand All @@ -88,33 +88,33 @@ exports[`Markdown should render code blocks without escaping 1`] = `
exports[`Markdown should render headings correctly 1`] = `
<div>
<div class="rsg--spacing-21">
<h1 class="rsg--heading-22 rsg--heading1-23">
<div class="rsg--spacing-19">
<h1 class="rsg--heading-20 rsg--heading1-21">
one
</h1>
</div>
<div class="rsg--spacing-21">
<h2 class="rsg--heading-22 rsg--heading2-24">
<div class="rsg--spacing-19">
<h2 class="rsg--heading-20 rsg--heading2-22">
two
</h2>
</div>
<div class="rsg--spacing-21">
<h3 class="rsg--heading-22 rsg--heading3-25">
<div class="rsg--spacing-19">
<h3 class="rsg--heading-20 rsg--heading3-23">
three
</h3>
</div>
<div class="rsg--spacing-21">
<h4 class="rsg--heading-22 rsg--heading4-26">
<div class="rsg--spacing-19">
<h4 class="rsg--heading-20 rsg--heading4-24">
four
</h4>
</div>
<div class="rsg--spacing-21">
<h5 class="rsg--heading-22 rsg--heading5-27">
<div class="rsg--spacing-19">
<h5 class="rsg--heading-20 rsg--heading5-25">
five
</h5>
</div>
<div class="rsg--spacing-21">
<h6 class="rsg--heading-22 rsg--heading6-28">
<div class="rsg--spacing-19">
<h6 class="rsg--heading-20 rsg--heading6-26">
six
</h6>
</div>
Expand All @@ -124,9 +124,9 @@ exports[`Markdown should render headings correctly 1`] = `
exports[`Markdown should render inline code with escaping 1`] = `
<p class="rsg--p-2 rsg--para-1">
<p class="rsg--para-17">
Foo
<code class="rsg--code-11">
<code class="rsg--code-8">
&lt;bar&gt;
</code>
baz
Expand All @@ -136,10 +136,10 @@ exports[`Markdown should render inline code with escaping 1`] = `
exports[`Markdown should render links 1`] = `
<p class="rsg--p-2 rsg--para-1">
<p class="rsg--para-17">
a
<a href="http://test.com"
class="rsg--link-20"
class="rsg--link-18"
>
link
</a>
Expand All @@ -149,27 +149,27 @@ exports[`Markdown should render links 1`] = `
exports[`Markdown should render mixed nested lists correctly 1`] = `
<ul class="rsg--ul-3 rsg--para-1">
<li class="rsg--li-5 rsg--base-0">
<ul class="rsg--ul-2 rsg--para-1">
<li class="rsg--li-4 rsg--base-0">
list 1
</li>
<li class="rsg--li-5 rsg--base-0">
<li class="rsg--li-4 rsg--base-0">
list 2
<ol class="rsg--ol-4 rsg--para-1"
<ol class="rsg--ol-3 rsg--para-1"
start="1"
>
<li class="rsg--li-5 rsg--base-0">
<li class="rsg--li-4 rsg--base-0">
Sub-list
</li>
<li class="rsg--li-5 rsg--base-0">
<li class="rsg--li-4 rsg--base-0">
Sub-list
</li>
<li class="rsg--li-5 rsg--base-0">
<li class="rsg--li-4 rsg--base-0">
Sub-list
</li>
</ol>
</li>
<li class="rsg--li-5 rsg--base-0">
<li class="rsg--li-4 rsg--base-0">
list 3
</li>
</ul>
Expand All @@ -178,16 +178,16 @@ exports[`Markdown should render mixed nested lists correctly 1`] = `
exports[`Markdown should render ordered lists correctly 1`] = `
<ol class="rsg--ol-4 rsg--para-1"
<ol class="rsg--ol-3 rsg--para-1"
start="1"
>
<li class="rsg--li-5 rsg--base-0">
<li class="rsg--li-4 rsg--base-0">
list
</li>
<li class="rsg--li-5 rsg--base-0">
<li class="rsg--li-4 rsg--base-0">
item
</li>
<li class="rsg--li-5 rsg--base-0">
<li class="rsg--li-4 rsg--base-0">
three
</li>
</ol>
Expand All @@ -196,14 +196,14 @@ exports[`Markdown should render ordered lists correctly 1`] = `
exports[`Markdown should render unordered lists correctly 1`] = `
<ul class="rsg--ul-3 rsg--para-1">
<li class="rsg--li-5 rsg--base-0">
<ul class="rsg--ul-2 rsg--para-1">
<li class="rsg--li-4 rsg--base-0">
list
</li>
<li class="rsg--li-5 rsg--base-0">
<li class="rsg--li-4 rsg--base-0">
item
</li>
<li class="rsg--li-5 rsg--base-0">
<li class="rsg--li-4 rsg--base-0">
three
</li>
</ul>
Expand Down
20 changes: 17 additions & 3 deletions src/rsg-components/Para/Para.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,22 @@
import React from 'react';
import { ParaRenderer } from './ParaRenderer';
import { ParaRenderer, styles } from './ParaRenderer';

it('should render paragraph', () => {
const actual = shallow(<ParaRenderer classes={{}}>Pizza</ParaRenderer>);
const props = {
classes: classes(styles),
};

it('should render paragraph as a <div>', () => {
const actual = shallow(<ParaRenderer {...props}>Pizza</ParaRenderer>);

expect(actual).toMatchSnapshot();
});

it('should render paragraph as a <p>', () => {
const actual = shallow(
<ParaRenderer {...props} semantic="p">
Pizza
</ParaRenderer>
);

expect(actual).toMatchSnapshot();
});
9 changes: 6 additions & 3 deletions src/rsg-components/Para/ParaRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import Styled from 'rsg-components/Styled';

export const styles = ({ space, fontFamily, color }) => ({
export const styles = ({ space, color, fontFamily }) => ({
para: {
marginTop: 0,
marginBottom: space[2],
Expand All @@ -13,12 +13,15 @@ export const styles = ({ space, fontFamily, color }) => ({
},
});

export function ParaRenderer({ classes, children }) {
return <div className={classes.para}>{children}</div>;
export function ParaRenderer({ classes, semantic, children }) {
const Tag = semantic || 'div';

return <Tag className={classes.para}>{children}</Tag>;
}

ParaRenderer.propTypes = {
classes: PropTypes.object.isRequired,
semantic: PropTypes.oneOf(['p']),
children: PropTypes.node.isRequired,
};

Expand Down
14 changes: 12 additions & 2 deletions src/rsg-components/Para/__snapshots__/Para.spec.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`should render paragraph 1`] = `
<div>
exports[`should render paragraph as a <div> 1`] = `
<div
className="para"
>
Pizza
</div>
`;
exports[`should render paragraph as a <p> 1`] = `
<p
className="para"
>
Pizza
</p>
`;
Loading

0 comments on commit 3df38d4

Please sign in to comment.