From d75b5ae200564860f78fefbe8a7eaa24c7fed6d9 Mon Sep 17 00:00:00 2001 From: Wagner Moschini Date: Mon, 30 Jan 2017 23:57:34 -0200 Subject: [PATCH 1/4] add row and col components --- .gitignore | 3 ++- src/components/Col.js | 35 +++++++++++++++++++++++++++++++++++ src/components/Row.js | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 src/components/Col.js create mode 100644 src/components/Row.js diff --git a/.gitignore b/.gitignore index 9b26ed0..8c71477 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules -lib \ No newline at end of file +lib +.idea \ No newline at end of file diff --git a/src/components/Col.js b/src/components/Col.js new file mode 100644 index 0000000..a77315f --- /dev/null +++ b/src/components/Col.js @@ -0,0 +1,35 @@ +import React, { PropTypes } from 'react' +import EmailPropTypes from '../PropTypes' +import includeDataProps from '../includeDataProps' + +export default function Col(props) { + return ( + + {props.children} + + ) +} + +Col.propTypes = { + className: PropTypes.string, + bgcolor: PropTypes.string, + colSpan: PropTypes.number, + align: PropTypes.oneOf(['left', 'center', 'right']), + valign: PropTypes.oneOf(['top', 'middle', 'bottom']), + style: EmailPropTypes.style, + children: PropTypes.node +}; + +Col.defaultProps = { + className: null, + bgcolor: null, + align: 'center', + valign: 'top', + style: null +}; \ No newline at end of file diff --git a/src/components/Row.js b/src/components/Row.js new file mode 100644 index 0000000..b3031db --- /dev/null +++ b/src/components/Row.js @@ -0,0 +1,33 @@ +import React, { PropTypes } from 'react' +import EmailPropTypes from '../PropTypes' +import includeDataProps from '../includeDataProps' + +export default function Row(props) { + return ( + + {props.children} + + ) +} + +Row.propTypes = { + className: PropTypes.string, + bgcolor: PropTypes.string, + align: PropTypes.oneOf(['left', 'center', 'right']), + valign: PropTypes.oneOf(['top', 'middle', 'bottom']), + style: EmailPropTypes.style, + children: PropTypes.node, +} + +Row.defaultProps = { + className: null, + bgcolor: null, + align: 'center', + valign: 'top', + style: null +}; \ No newline at end of file From aa6c9c693dea51d9b591433cb7751f2b122a18c0 Mon Sep 17 00:00:00 2001 From: Wagner Moschini Date: Tue, 31 Jan 2017 00:05:18 -0200 Subject: [PATCH 2/4] fix lint --- src/components/Col.js | 50 +++++++++++++++++++++---------------------- src/components/Row.js | 44 ++++++++++++++++++------------------- 2 files changed, 47 insertions(+), 47 deletions(-) diff --git a/src/components/Col.js b/src/components/Col.js index a77315f..804f1bc 100644 --- a/src/components/Col.js +++ b/src/components/Col.js @@ -3,33 +3,33 @@ import EmailPropTypes from '../PropTypes' import includeDataProps from '../includeDataProps' export default function Col(props) { - return ( - - {props.children} - - ) + return ( + + {props.children} + + ) } Col.propTypes = { - className: PropTypes.string, - bgcolor: PropTypes.string, - colSpan: PropTypes.number, - align: PropTypes.oneOf(['left', 'center', 'right']), - valign: PropTypes.oneOf(['top', 'middle', 'bottom']), - style: EmailPropTypes.style, - children: PropTypes.node -}; + className: PropTypes.string, + bgcolor: PropTypes.string, + colSpan: PropTypes.number, + align: PropTypes.oneOf(['left', 'center', 'right']), + valign: PropTypes.oneOf(['top', 'middle', 'bottom']), + style: EmailPropTypes.style, + children: PropTypes.node, +} Col.defaultProps = { - className: null, - bgcolor: null, - align: 'center', - valign: 'top', - style: null -}; \ No newline at end of file + className: null, + bgcolor: null, + align: 'center', + valign: 'top', + style: null, +} diff --git a/src/components/Row.js b/src/components/Row.js index b3031db..379c034 100644 --- a/src/components/Row.js +++ b/src/components/Row.js @@ -3,31 +3,31 @@ import EmailPropTypes from '../PropTypes' import includeDataProps from '../includeDataProps' export default function Row(props) { - return ( - - {props.children} - - ) + return ( + + {props.children} + + ) } Row.propTypes = { - className: PropTypes.string, - bgcolor: PropTypes.string, - align: PropTypes.oneOf(['left', 'center', 'right']), - valign: PropTypes.oneOf(['top', 'middle', 'bottom']), - style: EmailPropTypes.style, - children: PropTypes.node, + className: PropTypes.string, + bgcolor: PropTypes.string, + align: PropTypes.oneOf(['left', 'center', 'right']), + valign: PropTypes.oneOf(['top', 'middle', 'bottom']), + style: EmailPropTypes.style, + children: PropTypes.node, } Row.defaultProps = { - className: null, - bgcolor: null, - align: 'center', - valign: 'top', - style: null -}; \ No newline at end of file + className: null, + bgcolor: null, + align: 'center', + valign: 'top', + style: null, +} From 2cc06db4af63882cc58d25b0907a9c781b996067 Mon Sep 17 00:00:00 2001 From: Wagner Moschini Date: Tue, 31 Jan 2017 00:47:46 -0200 Subject: [PATCH 3/4] add row and col imports --- src/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/index.js b/src/index.js index df7e766..148683a 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,8 @@ import Box from './components/Box' import Email from './components/Email' import Image from './components/Image' import Item from './components/Item' +import Row from './components/Row' +import Col from './components/Col' import Span from './components/Span' import A from './components/A' import injectReactEmailAttributes from './injectReactEmailAttributes' @@ -20,6 +22,8 @@ export { Email, Image, Item, + Row, + Col, Span, A, injectReactEmailAttributes, From 3f1311c3b4ea50e73f0a8c6633d2eabedd67e720 Mon Sep 17 00:00:00 2001 From: Bartosz Hernas Date: Fri, 3 Aug 2018 11:29:31 +0200 Subject: [PATCH 4/4] Fixed tests --- .gitignore | 3 ++- __tests__/renderEmail.test.js | 4 ++-- examples/kitchenSink.jsx | 8 +++++++- src/components/A.jsx | 1 + src/components/{Col.js => Col.jsx} | 11 ++++++++--- src/components/{Row.js => Row.jsx} | 10 +++++++--- 6 files changed, 27 insertions(+), 10 deletions(-) rename src/components/{Col.js => Col.jsx} (80%) rename src/components/{Row.js => Row.jsx} (81%) diff --git a/.gitignore b/.gitignore index 8c71477..af63895 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules lib -.idea \ No newline at end of file +.idea +coverage diff --git a/__tests__/renderEmail.test.js b/__tests__/renderEmail.test.js index c2c4626..7760642 100644 --- a/__tests__/renderEmail.test.js +++ b/__tests__/renderEmail.test.js @@ -13,14 +13,14 @@ describe('renderEmail', () => { it('produces expected output from a kitchen sink example', () => { const actualOutput = renderEmail(kitchenSink) - const expectedOutput = 'Test Email
Hello, world!
Generated by react-html-emailreactSource code
' + const expectedOutput = 'Test Email
Hello, world!
Generated by react-html-emailreactSource code
Column1Column2
' expect(actualOutput).toBe(expectedOutput) }) it('warns on usage of an unsupported property', () => { const spy = jest.spyOn(console, 'error').mockImplementation() const actualOutput = renderEmail() - const expectedOutput = '' + const expectedOutput = '' expect(actualOutput).toBe(expectedOutput) expect(spy).toHaveBeenCalled() expect(spy).toHaveBeenCalledWith('Warning: Failed prop type: Style property `list-style-position` supplied to `A` unsupported in: outlook, outlook-web.\n in A') diff --git a/examples/kitchenSink.jsx b/examples/kitchenSink.jsx index c74c183..10ef1ab 100644 --- a/examples/kitchenSink.jsx +++ b/examples/kitchenSink.jsx @@ -1,5 +1,5 @@ import React from 'react' -import { Box, Email, Image, Item, Span, A } from '../src/index' +import { Box, Email, Image, Item, Span, A, Row, Col } from '../src/index' const css = ` @media only screen and (max-device-width: 480px) { @@ -22,6 +22,12 @@ const email = ( + + + Column1 + Column2 + + ) diff --git a/src/components/A.jsx b/src/components/A.jsx index ef601b1..4446610 100644 --- a/src/components/A.jsx +++ b/src/components/A.jsx @@ -10,6 +10,7 @@ export default function A(props) { download={props.download} href={props.href} target="_blank" + rel="noopener noreferrer" style={{ color: props.color, textDecoration: props.textDecoration, diff --git a/src/components/Col.js b/src/components/Col.jsx similarity index 80% rename from src/components/Col.js rename to src/components/Col.jsx index 804f1bc..05b3f4f 100644 --- a/src/components/Col.js +++ b/src/components/Col.jsx @@ -1,16 +1,19 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import EmailPropTypes from '../PropTypes' import includeDataProps from '../includeDataProps' export default function Col(props) { return ( - + style={props.style} + > {props.children} ) @@ -27,6 +30,8 @@ Col.propTypes = { } Col.defaultProps = { + colSpan: null, + children: null, className: null, bgcolor: null, align: 'center', diff --git a/src/components/Row.js b/src/components/Row.jsx similarity index 81% rename from src/components/Row.js rename to src/components/Row.jsx index 379c034..0ce71d1 100644 --- a/src/components/Row.js +++ b/src/components/Row.jsx @@ -1,15 +1,18 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import EmailPropTypes from '../PropTypes' import includeDataProps from '../includeDataProps' export default function Row(props) { return ( - + style={props.style} + > {props.children} ) @@ -25,6 +28,7 @@ Row.propTypes = { } Row.defaultProps = { + children: null, className: null, bgcolor: null, align: 'center',