diff --git a/src/components/Message.js b/src/components/Message.js new file mode 100644 index 0000000..1c07576 --- /dev/null +++ b/src/components/Message.js @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +//import style from './style.css'; + +const renderIcon = icon => { + if (!icon) { + return; + } + + if (typeof icon === 'string') { + return ; + } else { + const Icon = icon; + return ; + } +}; + +const Message = ({ icon, heading, children }) => ( +
+

{ renderIcon(icon) }{ heading }

+ { children } +
+); + +Message.propTypes = { + icon: PropTypes.oneOfType([ + PropTypes.element, + PropTypes.func, + PropTypes.string + ]), + heading: PropTypes.string.isRequired, + children: PropTypes.element.isRequired +}; + +export default Message; diff --git a/src/components/Message/test.js b/src/components/Message.test.js similarity index 94% rename from src/components/Message/test.js rename to src/components/Message.test.js index f8f3901..256399d 100644 --- a/src/components/Message/test.js +++ b/src/components/Message.test.js @@ -1,7 +1,7 @@ import React from 'react'; import renderer from 'react-test-renderer'; -import Message from './index'; +import Message from './Message'; test('Message rendering', () => { const component = renderer.create( diff --git a/src/components/Message/index.js b/src/components/Message/index.js deleted file mode 100644 index 6663922..0000000 --- a/src/components/Message/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import style from './style.css'; - -const Message = ({ icon, heading, children }) => { - const IconComponent = icon; - return
-

{ IconComponent ? : '' }{ heading }

- { children } -
; -}; - -Message.propTypes = { - icon: PropTypes.oneOfType([ - PropTypes.element, - PropTypes.func - ]), - heading: PropTypes.string.isRequired, - children: PropTypes.element.isRequired -}; - -export default Message; diff --git a/src/components/Message/style.css b/src/components/Message/style.css deleted file mode 100644 index 00892b2..0000000 --- a/src/components/Message/style.css +++ /dev/null @@ -1,20 +0,0 @@ -.message { - background: var(--color-tan); - padding: var(--spacing-margin); - margin: var(--spacing-margin) 0; -} - -.message h2 { - margin: var(--spacing-margin) 0; -} - -.message h2 svg { - margin-right: 0.5rem; - height: 3rem; - width: 3rem; - vertical-align: bottom; -} - -.message p { - margin: var(--spacing-margin) 0; -} diff --git a/src/components/Message/__snapshots__/test.js.snap b/src/components/__snapshots__/Message.test.js.snap similarity index 84% rename from src/components/Message/__snapshots__/test.js.snap rename to src/components/__snapshots__/Message.test.js.snap index 98ab61e..aeeb785 100644 --- a/src/components/Message/__snapshots__/test.js.snap +++ b/src/components/__snapshots__/Message.test.js.snap @@ -2,10 +2,9 @@ exports[`Message rendering 1`] = `

- Testing

@@ -16,7 +15,7 @@ exports[`Message rendering 1`] = ` exports[`Message rendering with icon 1`] = `

Sample icon SVG diff --git a/src/style.css b/src/style.css index f9ee797..6b536f3 100644 --- a/src/style.css +++ b/src/style.css @@ -109,3 +109,25 @@ li { [icon="github"] { background-image: url('~feather-icons/dist/icons/github.svg'); } + +.message { + background: var(--color-tan); + padding: var(--spacing-margin); + margin: var(--spacing-margin) 0; +} + +.message h2 { + margin: var(--spacing-margin) 0; +} + +.message h2 svg, +.message h2 img { + margin-right: 0.5rem; + height: 3rem; + width: 3rem; + vertical-align: bottom; +} + +.message p { + margin: var(--spacing-margin) 0; +}