Reworking Message component

* Supporting URLs for icon
* Moving styles into top-level stylesheet for use in the template
This commit is contained in:
Jeff Avallone 2018-02-11 06:41:15 -05:00
parent b3e4bd2cff
commit c368e9031f
6 changed files with 61 additions and 47 deletions

36
src/components/Message.js Normal file
View File

@ -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 <img src={ icon }/>;
} else {
const Icon = icon;
return <Icon/>;
}
};
const Message = ({ icon, heading, children }) => (
<div className="message">
<h2>{ renderIcon(icon) }{ heading }</h2>
{ children }
</div>
);
Message.propTypes = {
icon: PropTypes.oneOfType([
PropTypes.element,
PropTypes.func,
PropTypes.string
]),
heading: PropTypes.string.isRequired,
children: PropTypes.element.isRequired
};
export default Message;

View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
import Message from './index'; import Message from './Message';
test('Message rendering', () => { test('Message rendering', () => {
const component = renderer.create( const component = renderer.create(

View File

@ -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 <div className={ style.message }>
<h2>{ IconComponent ? <IconComponent/> : '' }{ heading }</h2>
{ children }
</div>;
};
Message.propTypes = {
icon: PropTypes.oneOfType([
PropTypes.element,
PropTypes.func
]),
heading: PropTypes.string.isRequired,
children: PropTypes.element.isRequired
};
export default Message;

View File

@ -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;
}

View File

@ -2,10 +2,9 @@
exports[`Message rendering 1`] = ` exports[`Message rendering 1`] = `
<div <div
className={undefined} className="message"
> >
<h2> <h2>
Testing Testing
</h2> </h2>
<p> <p>
@ -16,7 +15,7 @@ exports[`Message rendering 1`] = `
exports[`Message rendering with icon 1`] = ` exports[`Message rendering with icon 1`] = `
<div <div
className={undefined} className="message"
> >
<h2> <h2>
Sample icon SVG Sample icon SVG

View File

@ -109,3 +109,25 @@ li {
[icon="github"] { [icon="github"] {
background-image: url('~feather-icons/dist/icons/github.svg'); 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;
}