Fleshing out messaging

This commit is contained in:
Jeff Avallone 2018-02-13 21:36:10 -05:00
parent d328727ceb
commit 6cf064eaf0
7 changed files with 60 additions and 7 deletions

View File

@ -29,10 +29,19 @@ exports[`Message rendering 1`] = `
}
/>
<Message
heading="React App"
heading="Sample Error"
type="error"
>
<p>
Placeholder app content
Sample error message
</p>
</Message>
<Message
heading="Sample Warning"
type="warning"
>
<p>
Sample warning message
</p>
</Message>
</React.Fragment>

View File

@ -21,8 +21,11 @@ const App = () => <React.Fragment>
downloadUrls={ downloadUrls }
permalinkUrl="#permalink"
onSubmit={ handleSubmit }/>
<Message heading="React App">
<p>Placeholder app content</p>
<Message type="error" heading="Sample Error">
<p>Sample error message</p>
</Message>
<Message type="warning" heading="Sample Warning">
<p>Sample warning message</p>
</Message>
</React.Fragment>;

View File

@ -41,3 +41,25 @@ exports[`Message rendering with icon 1`] = `
</div>
</div>
`;
exports[`Message rendering with type 1`] = `
<div
class="message error"
>
<div
class="header"
>
<h2>
<svg />
Testing
</h2>
</div>
<div
class="content"
>
<p>
Message content
</p>
</div>
</div>
`;

View File

@ -3,10 +3,12 @@ import PropTypes from 'prop-types';
import style from './style.css';
import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg';
import WarningIcon from 'feather-icons/dist/icons/alert-triangle.svg';
const iconTypes = {
error: AlertIcon
error: ErrorIcon,
warning: WarningIcon
};
const renderIcon = (type, icon) => {
@ -33,7 +35,8 @@ const Message = ({ type, icon, heading, children }) => (
Message.propTypes = {
type: PropTypes.oneOf([
'error'
'error',
'warning'
]),
icon: PropTypes.oneOfType([
PropTypes.element,

View File

@ -38,4 +38,10 @@
color: var(--color-white);
}
}
&.warning {
& .header {
background: var(--color-orange);
}
}
}

View File

@ -21,3 +21,12 @@ test('Message rendering with icon', () => {
);
expect(component).toMatchSnapshot();
});
test('Message rendering with type', () => {
const component = render(
<Message heading="Testing" type="error">
<p>Message content</p>
</Message>
);
expect(component).toMatchSnapshot();
});

View File

@ -5,6 +5,7 @@
--color-black: #000;
--color-white: #fff;
--color-red: #b3151a;
--color-orange: #fa0;
--gradient-green: linear-gradient(to bottom,
var(--color-green) 0%,