Reworking Message component
* Supporting URLs for icon * Moving styles into top-level stylesheet for use in the template
This commit is contained in:
parent
b3e4bd2cff
commit
c368e9031f
36
src/components/Message.js
Normal file
36
src/components/Message.js
Normal 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;
|
@ -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(
|
@ -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;
|
@ -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;
|
||||
}
|
@ -2,10 +2,9 @@
|
||||
|
||||
exports[`Message rendering 1`] = `
|
||||
<div
|
||||
className={undefined}
|
||||
className="message"
|
||||
>
|
||||
<h2>
|
||||
|
||||
Testing
|
||||
</h2>
|
||||
<p>
|
||||
@ -16,7 +15,7 @@ exports[`Message rendering 1`] = `
|
||||
|
||||
exports[`Message rendering with icon 1`] = `
|
||||
<div
|
||||
className={undefined}
|
||||
className="message"
|
||||
>
|
||||
<h2>
|
||||
Sample icon SVG
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user