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 <Message
heading="React App" heading="Sample Error"
type="error"
> >
<p> <p>
Placeholder app content Sample error message
</p>
</Message>
<Message
heading="Sample Warning"
type="warning"
>
<p>
Sample warning message
</p> </p>
</Message> </Message>
</React.Fragment> </React.Fragment>

View File

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

View File

@ -41,3 +41,25 @@ exports[`Message rendering with icon 1`] = `
</div> </div>
</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 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 = { const iconTypes = {
error: AlertIcon error: ErrorIcon,
warning: WarningIcon
}; };
const renderIcon = (type, icon) => { const renderIcon = (type, icon) => {
@ -33,7 +35,8 @@ const Message = ({ type, icon, heading, children }) => (
Message.propTypes = { Message.propTypes = {
type: PropTypes.oneOf([ type: PropTypes.oneOf([
'error' 'error',
'warning'
]), ]),
icon: PropTypes.oneOfType([ icon: PropTypes.oneOfType([
PropTypes.element, PropTypes.element,

View File

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

View File

@ -21,3 +21,12 @@ test('Message rendering with icon', () => {
); );
expect(component).toMatchSnapshot(); 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-black: #000;
--color-white: #fff; --color-white: #fff;
--color-red: #b3151a; --color-red: #b3151a;
--color-orange: #fa0;
--gradient-green: linear-gradient(to bottom, --gradient-green: linear-gradient(to bottom,
var(--color-green) 0%, var(--color-green) 0%,