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