Fleshing out messaging
This commit is contained in:
parent
d328727ceb
commit
6cf064eaf0
@ -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>
|
||||
|
@ -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>;
|
||||
|
||||
|
@ -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>
|
||||
`;
|
||||
|
@ -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,
|
||||
|
@ -38,4 +38,10 @@
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
& .header {
|
||||
background: var(--color-orange);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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();
|
||||
});
|
||||
|
@ -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%,
|
||||
|
Loading…
Reference in New Issue
Block a user