feat(Notification): Added "warning" intent to Notifications system

contentful · Feb 27, 2019 · 5c9b355 · 5c9b355
1 parent 46c4730
commit 5c9b355
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 4 deletions.
diff --git a/packages/forma-36-react-components/src/components/Notification/Notification.md b/packages/forma-36-react-components/src/components/Notification/Notification.md
@@ -7,6 +7,7 @@ When you want to give feedback to your users about a action they take.
 ```js
 Notification.success('text of notification');
 Notification.error('text of notification');
+Notification.warning('text of notification');
 
 // closing one notification
 const notification = await Notification.success('hello');

diff --git a/packages/forma-36-react-components/src/components/Notification/Notification.stories.tsx b/packages/forma-36-react-components/src/components/Notification/Notification.stories.tsx
@@ -57,6 +57,17 @@ storiesOf('Components|Notification', module)
           >
             show error
           </Button>
+          <Button
+            style={{ marginLeft: 20 }}
+            buttonType="muted"
+            onClick={() =>
+              Notification.warning(
+                `${text('text', 'Hello world')} ${getUniqueNumber()}`,
+              )
+            }
+          >
+            show warning
+          </Button>
         </div>
       );
     }),
@@ -65,7 +76,7 @@ storiesOf('Components|Notification', module)
     <div>
       <NotificationItem
         hasCloseButton={boolean('hasCloseButton', true)}
-        intent={select('intent', ['success', 'error'], 'success')}
+        intent={select('intent', ['success', 'error', 'warning'], 'success')}
       >
         {text('text', 'Text for the notification')}
       </NotificationItem>

diff --git a/packages/forma-36-react-components/src/components/Notification/NotificationItem.css b/packages/forma-36-react-components/src/components/Notification/NotificationItem.css
@@ -27,6 +27,10 @@
   background: var(--color-red-dark);
 }
 
+.NotificationItem--warning {
+  background: var(--color-orange-dark);
+}
+
 .NotificationItem__intent {
   composes: sr-only from './../../styles/settings/helpers.css';
 }

diff --git a/packages/forma-36-react-components/src/components/Notification/NotificationItem.css.d.ts b/packages/forma-36-react-components/src/components/Notification/NotificationItem.css.d.ts
@@ -4,6 +4,7 @@ export interface INotificationItemCss {
   'NotificationItem': string;
   'NotificationItem--success': string;
   'NotificationItem--error': string;
+  'NotificationItem--warning': string;
   'NotificationItem__intent': string;
   'NotificationItem__icon': string;
   'NotificationItem__text': string;

diff --git a/packages/forma-36-react-components/src/components/Notification/NotificationItem.test.tsx b/packages/forma-36-react-components/src/components/Notification/NotificationItem.test.tsx
@@ -13,6 +13,27 @@ it('renders the component', () => {
   expect(output).toMatchSnapshot();
 });
 
+it('renders the component with "error" intent', () => {
+  const output = shallow(
+    <NotificationItem onClose={() => {}} intent="error">
+      Notification text
+    </NotificationItem>,
+  );
+
+  expect(output).toMatchSnapshot();
+})
+
+it('renders the component with "warning" intent', () => {
+  const output = shallow(
+    <NotificationItem onClose={() => {}} intent="warning">
+      Notification text
+    </NotificationItem>,
+  );
+
+  expect(output).toMatchSnapshot();
+})
+
+
 it(`has no a11y issues`, async () => {
   const output = mount(
     <NotificationItem onClose={() => {}} intent="success">

diff --git a/packages/forma-36-react-components/src/components/Notification/NotificationItem.tsx b/packages/forma-36-react-components/src/components/Notification/NotificationItem.tsx
@@ -6,7 +6,7 @@ import Icon from '../Icon';
 const styles = require('./NotificationItem.css');
 
 export interface NotificationItemProps {
-  intent: 'success' | 'error';
+  intent: 'success' | 'error' | 'warning';
   hasCloseButton?: boolean;
   onClose?: Function;
   testId?: string;
@@ -22,7 +22,7 @@ export class NotificationItem extends Component<NotificationItemProps> {
 
   render() {
     const { children, testId, intent, onClose, hasCloseButton } = this.props;
-
+    
     const classes = classNames(styles.NotificationItem, {
       [styles[`NotificationItem--${intent}`]]: true,
     });

diff --git a/packages/forma-36-react-components/src/components/Notification/NotificationsManager.tsx b/packages/forma-36-react-components/src/components/Notification/NotificationsManager.tsx
@@ -12,7 +12,7 @@ const getUniqueId = () => {
   return uniqueId;
 };
 
-export type Intent = 'success' | 'error';
+export type Intent = 'success' | 'error' | 'warning';
 export type Position = 'top' | 'bottom';
 
 export interface Notification {

diff --git a/...react-components/src/components/Notification/__snapshots__/NotificationItem.test.tsx.snap b/...react-components/src/components/Notification/__snapshots__/NotificationItem.test.tsx.snap
@@ -45,3 +45,95 @@ exports[`renders the component 1`] = `
   />
 </div>
 `;
+
+exports[`renders the component with "error" intent 1`] = `
+<div
+  aria-live="assertive"
+  className="NotificationItem NotificationItem--error"
+  data-intent="error"
+  data-test-id="cf-ui-notification"
+  role="alert"
+>
+  <div
+    className="NotificationItem__intent"
+  >
+    error
+  </div>
+  <div
+    aria-hidden="true"
+    className="NotificationItem__icon"
+  >
+    <Icon
+      color="white"
+      icon="Warning"
+      size="small"
+      testId="cf-ui-icon"
+    />
+  </div>
+  <div
+    className="NotificationItem__text"
+  >
+    Notification text
+  </div>
+  <IconButton
+    buttonType="white"
+    disabled={false}
+    extraClassNames="NotificationItem__dismiss"
+    iconProps={
+      Object {
+        "icon": "Close",
+      }
+    }
+    label="Dismiss"
+    onClick={[Function]}
+    testId="cf-ui-notification-close"
+    withDropdown={false}
+  />
+</div>
+`;
+
+exports[`renders the component with "warning" intent 1`] = `
+<div
+  aria-live="assertive"
+  className="NotificationItem NotificationItem--warning"
+  data-intent="warning"
+  data-test-id="cf-ui-notification"
+  role="alert"
+>
+  <div
+    className="NotificationItem__intent"
+  >
+    warning
+  </div>
+  <div
+    aria-hidden="true"
+    className="NotificationItem__icon"
+  >
+    <Icon
+      color="white"
+      icon="Warning"
+      size="small"
+      testId="cf-ui-icon"
+    />
+  </div>
+  <div
+    className="NotificationItem__text"
+  >
+    Notification text
+  </div>
+  <IconButton
+    buttonType="white"
+    disabled={false}
+    extraClassNames="NotificationItem__dismiss"
+    iconProps={
+      Object {
+        "icon": "Close",
+      }
+    }
+    label="Dismiss"
+    onClick={[Function]}
+    testId="cf-ui-notification-close"
+    withDropdown={false}
+  />
+</div>
+`;
diff --git a/packages/forma-36-react-components/src/components/Notification/index.tsx b/packages/forma-36-react-components/src/components/Notification/index.tsx
@@ -64,13 +64,15 @@ const show = (intent: Intent) => (
 const API: {
   success: ShowAction<Promise<Notification>>;
   error: ShowAction<Promise<Notification>>;
+  warning: ShowAction<Promise<Notification>>;
   close: CloseAction<Promise<void>>;
   closeAll: CloseAllAction<Promise<void>>;
   setPosition: SetPositionAction<Promise<void>>;
   setDuration: SetDurationAction<Promise<void>>;
 } = {
   success: afterInit(show('success')),
   error: afterInit(show('error')),
+  warning: afterInit(show('warning')),
   close: afterInit(id => internalAPI.close(id)),
   closeAll: afterInit(() => internalAPI.closeAll()),
   setPosition: afterInit((position, params) =>