Skip to content

Commit

Permalink
Update Notifications strategy (#283)
Browse files Browse the repository at this point in the history
  • Loading branch information
fernandofleury committed Aug 23, 2018
1 parent 6ec856d commit 805e8cf
Show file tree
Hide file tree
Showing 12 changed files with 189 additions and 46 deletions.
5 changes: 3 additions & 2 deletions src/components/Message/Message.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import styled, { css } from 'react-emotion';

import { childrenPropType } from '../../util/shared-prop-types';

const baseStyles = () => css`
label: message;
display: flex;
Expand All @@ -21,7 +22,7 @@ Message.propTypes = {
* Content to be rendered inside the Message.
* Supports a special MessageIcon and MessageButton.
*/
children: PropTypes.element.isRequired
children: childrenPropType
};

/**
Expand Down
18 changes: 10 additions & 8 deletions src/components/Message/Message.story.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,28 @@ import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { action } from '@storybook/addon-actions';
import { GROUPS } from '../../../.storybook/hierarchySeparators';
import { select } from '@storybook/addon-knobs/react';

import { GROUPS } from '../../../.storybook/hierarchySeparators';
import withTests from '../../util/withTests';
import Message, { MessageIcon, MessageButton } from '.';
import Heading from '../Heading';
import Text from '../Text';
import Button from '../Button';
import ThumbsUpIcon from './thumbs-up.svg';

storiesOf(`${GROUPS.COMPONENTS}|Message`, module)
.addDecorator(withTests('Message'))
.add(
'Default Message',
withInfo()(() => (
<Message>
<MessageIcon>
<ThumbsUpIcon />
</MessageIcon>
<MessageIcon
type={select(
'Message type',
[MessageIcon.SUCCESS, MessageIcon.ERROR, MessageIcon.WARNING],
MessageIcon.SUCCESS
)}
/>
<Heading size={Heading.KILO} element="h4" margin={false}>
Transaction successfully refunded
</Heading>
Expand All @@ -30,9 +34,7 @@ storiesOf(`${GROUPS.COMPONENTS}|Message`, module)
'Message with button',
withInfo()(() => (
<Message>
<MessageIcon>
<ThumbsUpIcon />
</MessageIcon>
<MessageIcon type={MessageIcon.SUCCESS} />
<div>
<Heading element="h4" size={Heading.KILO} margin={false}>
New Feature — Intelligent Reporting
Expand Down
42 changes: 38 additions & 4 deletions src/components/Message/components/Icon/Icon.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,22 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'react-emotion';

import MessageSuccess from '../../message-success.svg';
import MessageError from '../../message-error.svg';
import MessageWarning from '../MessageWarning';

const ICON_TYPES = {
SUCCESS: 'success',
ERROR: 'error',
WARNING: 'warning'
};

const ICON_MAP = {
[ICON_TYPES.SUCCESS]: MessageSuccess,
[ICON_TYPES.ERROR]: MessageError,
[ICON_TYPES.WARNING]: MessageWarning
};

const baseStyles = ({ theme }) => css`
label: message__icon;
display: block;
Expand All @@ -17,15 +33,33 @@ const baseStyles = ({ theme }) => css`
*/
const MessageIconContainer = styled('div')(baseStyles);

const MessageIcon = ({ children }) => (
<MessageIconContainer>{children}</MessageIconContainer>
);
const MessageIcon = ({ type, children }) => {
const Icon = ICON_MAP[type];

return (
<MessageIconContainer>{Icon ? <Icon /> : children}</MessageIconContainer>
);
};

MessageIcon.SUCCESS = ICON_TYPES.SUCCESS;
MessageIcon.ERROR = ICON_TYPES.ERROR;
MessageIcon.WARNING = ICON_TYPES.WARNING;

MessageIcon.propTypes = {
/**
* Icon
*/
children: PropTypes.element.isRequired
children: PropTypes.element,
type: PropTypes.oneOf([
ICON_TYPES.SUCCESS,
ICON_TYPES.ERROR,
ICON_TYPES.WARNING
])
};

MessageIcon.defaultProps = {
type: null,
children: null
};

/**
Expand Down
19 changes: 19 additions & 0 deletions src/components/Message/components/Icon/Icon.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,25 @@ describe('MessageIcon', () => {
expect(actual).toMatchSnapshot();
});

it('should render with error icon', () => {
const actual = create(<MessageIcon type={MessageIcon.ERROR} />);
expect(actual).toMatchSnapshot();
});

it('should render with warning icon', () => {
const actual = create(<MessageIcon type={MessageIcon.WARNING} />);
expect(actual).toMatchSnapshot();
});

it('should render with custom icon content', () => {
const actual = create(
<MessageIcon>
<div>Custom content</div>
</MessageIcon>
);
expect(actual).toMatchSnapshot();
});

/**
* Accessibility tests.
*/
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`MessageIcon should render with custom icon content 1`] = `
.circuit-0 {
display: block;
margin-right: 16px;
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
line-height: 0;
}
<div
className="circuit-0 circuit-1"
>
<div>
Custom content
</div>
</div>
`;

exports[`MessageIcon should render with default styles 1`] = `
.circuit-0 {
display: block;
Expand All @@ -18,3 +41,49 @@ exports[`MessageIcon should render with default styles 1`] = `
className="circuit-0 circuit-1"
/>
`;

exports[`MessageIcon should render with error icon 1`] = `
.circuit-0 {
display: block;
margin-right: 16px;
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
line-height: 0;
}
<div
className="circuit-0 circuit-1"
>
<div>
message-error.svg
</div>
</div>
`;

exports[`MessageIcon should render with warning icon 1`] = `
.circuit-0 {
display: block;
margin-right: 16px;
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
line-height: 0;
}
<div
className="circuit-0 circuit-1"
>
<div>
message-success.svg
</div>
</div>
`;
13 changes: 13 additions & 0 deletions src/components/Message/components/MessageWarning.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import styled from 'react-emotion';

import MessageSuccess from '../message-success.svg';

const MessageWarning = styled(MessageSuccess)`
${({ theme }) => `
rect {
fill: ${theme.colors.y500};
}
`};
`;

export default MessageWarning;
3 changes: 2 additions & 1 deletion src/components/Message/components/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Button from './Button/Button';
import Icon from './Icon/Icon';
import MessageWarning from './MessageWarning';

export { Button, Icon };
export { Button, Icon, MessageWarning };
7 changes: 7 additions & 0 deletions src/components/Message/message-error.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
9 changes: 3 additions & 6 deletions src/components/NotificationBanner/NotificationBanner.story.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { GROUPS } from '../../../.storybook/hierarchySeparators';
import withTests from '../../util/withTests';
import NotificationBanner from './NotificationBanner';
import Message, { MessageButton, MessageIcon } from '../Message';
import ThumbsUpIcon from '../Message/thumbs-up.svg';
import Markdown from '../Markdown';
import Heading from '../Heading';
import Text from '../Text';
Expand All @@ -21,23 +20,21 @@ storiesOf(`${GROUPS.COMPONENTS}|NotificationBanner`, module)
<div style={{ position: 'fixed', bottom: 0, left: 0, right: 0 }}>
<NotificationBanner>
<Message>
<MessageIcon>
<ThumbsUpIcon />
</MessageIcon>
<MessageIcon type={MessageIcon.SUCCESS} />
<Markdown
overrides={{
h1: {
component: Heading,
props: {
element: 'h4',
size: Heading.KILO,
margin: false
noMargin: true
}
},
p: {
component: Text,
props: {
margin: false
noMargin: true
}
}
}}
Expand Down
35 changes: 20 additions & 15 deletions src/components/NotificationList/NotificationList.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,26 @@ import { multiplyUnit } from '../../styles/style-helpers';
import Card from '../Card';

const baseStyles = ({ theme }) => css`
label: notification-list;
display: flex;
flex-direction: column;
width: 400px;
max-width: 90vw; ${'' /* FALLBACK: Old Androids don't support calc() */}
max-width: calc(100vw - ${multiplyUnit(theme.spacings.giga, 2)});
> * {
margin-top: ${theme.spacings.mega};
}
> *:first-child {
margin-top: 0;
}
`;
label: notification-list;
display: flex;
flex-direction: column;
width: 400px;
max-width: 90vw; ${'' /* FALLBACK: Old Androids don't support calc() */}
max-width: calc(100vw - ${multiplyUnit(theme.spacings.giga, 2)});
> * {
margin-top: ${theme.spacings.mega};
}
> *:first-child {
margin-top: 0;
}
${theme.mq.untilMega`
max-width: none;
width: 100%;
`};
`;

const NotificationListWrapper = styled('ul')`
${baseStyles};
Expand Down
15 changes: 5 additions & 10 deletions src/components/NotificationList/NotificationList.story.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { GROUPS } from '../../../.storybook/hierarchySeparators';
import withTests from '../../util/withTests';
import NotificationList from './NotificationList';
import Message, { MessageButton, MessageIcon } from '../Message';
import ThumbsUpIcon from '../Message/thumbs-up.svg';
import Markdown from '../Markdown';
import Heading from '../Heading';
import Text from '../Text';
Expand All @@ -20,31 +19,27 @@ storiesOf(`${GROUPS.COMPONENTS}|NotificationList`, module)
withInfo()(() => (
<NotificationList>
<Message>
<MessageIcon>
<ThumbsUpIcon />
</MessageIcon>
<Heading size={Heading.KILO} element="h4" margin={false}>
<MessageIcon type={MessageIcon.SUCCESS} />
<Heading size={Heading.KILO} element="h4" noMargin>
Transaction successfully refunded
</Heading>
</Message>
<Message>
<MessageIcon>
<ThumbsUpIcon />
</MessageIcon>
<MessageIcon type={MessageIcon.SUCCESS} />
<Markdown
overrides={{
h1: {
component: Heading,
props: {
element: 'h4',
size: Heading.KILO,
margin: false
noMargin: true
}
},
p: {
component: Text,
props: {
margin: false
noMargin: true
}
}
}}
Expand Down

0 comments on commit 805e8cf

Please sign in to comment.