Skip to content

Commit 95f48d4

Browse files
author
Dave Ferris
authored
Merge pull request #43 from user-interviews/feature/RS-42-alert-message
RS-42 refactor flash message component to exportable alert message component
2 parents b74a515 + 2730cb4 commit 95f48d4

File tree

13 files changed

+178
-65
lines changed

13 files changed

+178
-65
lines changed

‎scss/colors.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
@import './colors/flash';
12
@import './colors/inputs';
23
@import './colors/palette';

‎scss/colors/flash.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import './palette';
2+
3+
$ux-flash-error: $ux-red-100;
4+
$ux-flash-error-border: $ux-red-200;

‎spec/Flash/__snapshots__/withFlash.test.jsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`test withFlash it can create a new flash message 1`] = `
44
Array [
55
<div
6-
className="alert alert-success"
6+
className="alert alert-success AlertMessage AlertMessage-success"
77
>
88
<button
99
className="close"

‎spec/__snapshots__/Storyshots.test.js.snap‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,54 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Storyshots Design System/Alert With Dismiss 1`] = `
4+
<div
5+
style={
6+
Object {
7+
"padding": "1rem",
8+
}
9+
}
10+
>
11+
<div
12+
className="alert alert-success AlertMessage AlertMessage-success"
13+
>
14+
<button
15+
className="close"
16+
onClick={[Function]}
17+
type="button"
18+
>
19+
×
20+
</button>
21+
<p
22+
className="AlertMessage__title"
23+
>
24+
Default title
25+
</p>
26+
Default message
27+
</div>
28+
</div>
29+
`;
30+
31+
exports[`Storyshots Design System/Alert Without Dismiss 1`] = `
32+
<div
33+
style={
34+
Object {
35+
"padding": "1rem",
36+
}
37+
}
38+
>
39+
<div
40+
className="alert alert-success AlertMessage AlertMessage-success"
41+
>
42+
<p
43+
className="AlertMessage__title"
44+
>
45+
Default title
46+
</p>
47+
Default message
48+
</div>
49+
</div>
50+
`;
51+
352
exports[`Storyshots Design System/Card all cards 1`] = `
453
<div
554
style={

‎src/Flash/AlertMessage.jsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import './AlertMessage.scss';
5+
6+
export const MessageTypes = {
7+
SUCCESS: 'success',
8+
INFO: 'info',
9+
WARNING: 'warning',
10+
ERROR: 'error',
11+
};
12+
13+
const alertMessageClassName = (type) => {
14+
if (!Object.values(MessageTypes).includes(type)) {
15+
throw new TypeError(`Unexpected type ${type} used for a alert message.`);
16+
}
17+
18+
return `alert alert-${type} AlertMessage AlertMessage-${type}`;
19+
};
20+
21+
export default function AlertMessage(props) {
22+
return (
23+
<div className={alertMessageClassName(props.type)}>
24+
{
25+
props.onDismiss && (
26+
<button
27+
className="close"
28+
type="button"
29+
onClick={() => props.onDismiss(props.id)}
30+
>
31+
&times;
32+
</button>
33+
)
34+
}
35+
{
36+
props.title && (
37+
<p className="AlertMessage__title">{props.title}</p>
38+
)
39+
}
40+
{props.message}
41+
</div>
42+
);
43+
}
44+
45+
AlertMessage.propTypes = {
46+
id: PropTypes.string.isRequired,
47+
message: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
48+
title: PropTypes.string,
49+
type: PropTypes.string.isRequired,
50+
onDismiss: PropTypes.func,
51+
};
52+
53+
AlertMessage.defaultProps = {
54+
title: undefined,
55+
onDismiss: undefined,
56+
};

‎src/Flash/AlertMessage.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@import '~bootstrap/scss/functions';
2+
@import '~bootstrap/scss/variables';
3+
@import '~bootstrap/scss/mixins';
4+
@import '~bootstrap/scss/alert';
5+
6+
@import '../../scss/theme';
7+
8+
.AlertMessage {
9+
font-weight: 500;
10+
11+
&__title {
12+
font-size: .875rem;
13+
font-weight: bold;
14+
margin-bottom: 0;
15+
}
16+
}
17+
18+
.AlertMessage-error {
19+
@extend .alert-danger;
20+
21+
background-color: $ux-flash-error;
22+
border-color: $ux-flash-error-border;
23+
}

‎src/Flash/Flash.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { TransitionGroup } from 'react-transition-group';
44
import classNames from 'classnames';
55

66
import FadeTransition from 'src/FadeTransition';
7-
import FlashMessage from './FlashMessage';
7+
import AlertMessage from './AlertMessage';
88

99
import './Flash.scss';
1010

@@ -20,7 +20,7 @@ export default function Flash(props) {
2020
{
2121
props.messages.map((message) => (
2222
<FadeTransition key={message.id}>
23-
<FlashMessage
23+
<AlertMessage
2424
id={message.id}
2525
message={message.message}
2626
type={message.type}

‎src/Flash/Flash.scss‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
@import '~bootstrap/scss/functions';
22
@import '~bootstrap/scss/variables';
33
@import '~bootstrap/scss/mixins';
4-
@import '~bootstrap/scss/alert';
54

65
@import '../../scss/theme';
76

87
$top-padding: 1.25rem;
9-
// Flash colors
10-
$ux-flash-error: $ux-red-100;
11-
$ux-flash-error-border: $ux-red-200;
128

139
.Flash {
1410
position: fixed;
@@ -26,18 +22,3 @@ $ux-flash-error-border: $ux-red-200;
2622
top: $top-padding;
2723
}
2824
}
29-
30-
.alert {
31-
font-weight: 500;
32-
}
33-
34-
.alert-info {
35-
@extend .alert-warning;
36-
}
37-
38-
.alert-error {
39-
@extend .alert-danger;
40-
41-
background-color: $ux-flash-error;
42-
border-color: $ux-flash-error-border;
43-
}

‎src/Flash/FlashMessage.jsx‎

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎src/Flash/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import Flash from './Flash';
2-
import { MessageTypes } from './FlashMessage';
2+
import AlertMessage, { MessageTypes } from './AlertMessage';
33
import useFlash from './useFlash';
44
import withFlash, { withFlashPropTypes } from './withFlash';
55

66
export {
7+
AlertMessage,
78
Flash,
89
MessageTypes,
910
useFlash,

0 commit comments

Comments
 (0)