feat(notifications): display notifications

README.md

@@ -133,6 +133,9 @@ npm install -g yalc
 
 2. Work on the component updates inside this library.
 
+**Important**: you have to change the version inside the `package.json` every time you compile to avoid issues with the `node_modules` aggresively caching the library, preventing from seeing your latest changes.
+Once your changes are good and tested, be careful not to commit the changes in `package.json`.
+
 3. compile locally
 ```bash
 yarn compile
@@ -154,14 +157,6 @@ yarn install # or just yarn
 
 6. now you can run your app using the local component.
 
-7. you can keep updating the component's code and just use:
-```bash
-yarn compile
-yalc push
-```
-
-and only re run your app to see the updates in the component.
-
 ## Deployment
 
 To deploy a new version of the library follow these steps:

src/components/header/components/nav-alt/index.js

@@ -17,10 +17,12 @@ import SearchGreenIcon from 'assets/icons/search-green-icon.svg';
 import UserIcon from 'assets/icons/mygfw-green-icon.svg';
 // eslint-disable-next-line no-unused-vars
 import NotificationGreenIcon from 'assets/icons/notification-green-icon.svg';
+import NotificationGreenRedDotIcon from 'assets/icons/notification-green-icon-dot.svg';
 
 import { NavAltWrapper } from './styles';
 
 import AuthenticationInfo from '../authentication-info';
+import { notificationsExists } from '../../../../utils/storage';
 
 class NavAlt extends PureComponent {
   static propTypes = {
@@ -33,10 +35,12 @@ class NavAlt extends PureComponent {
     appUrl: PropTypes.string,
     showSubmenu: PropTypes.bool,
     handleShowSubmenu: PropTypes.func,
+    handleShowNotificationsPanel: PropTypes.func,
     handleLangSelect: PropTypes.func,
     proAuthenticated: PropTypes.bool,
     onProLogout: PropTypes.func,
     NavLinkComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    notifications: PropTypes.array,
   };
 
   render() {
@@ -48,13 +52,20 @@ class NavAlt extends PureComponent {
       pathname,
       appUrl,
       handleShowSubmenu,
+      handleShowNotificationsPanel,
       onProLogout,
       showSubmenu,
       handleLangSelect,
       languages,
       activeLang,
       proAuthenticated,
+      notifications,
     } = this.props;
+
+    const ids = notifications?.map((item) => item.id) || [];
+    const hasNotifications =
+      (notifications?.length || 0) !== 0 && !notificationsExists(ids);
+
     return (
       <NavAltWrapper theme={theme}>
         <div className="nav-item lang-selector">
@@ -86,23 +97,19 @@ class NavAlt extends PureComponent {
             </Tooltip>
           </NavLink>
         </div>
-        {/* // TODO: display this link when the new page is ready
         <div className="nav-item">
-          <NavLink
-            href="/notifications/"
-            className="nav-link"
-            pathname={pathname}
-            appUrl={appUrl}
-            NavLinkComponent={NavLinkComponent}
+          <button
+            data-component-type="button-toggle-notifications-header"
+            onClick={handleShowNotificationsPanel}
           >
             <Tooltip content="Notifications">
               <div>
-                <NotificationGreenIcon />
+                {!hasNotifications && <NotificationGreenIcon />}
+                {hasNotifications && <NotificationGreenRedDotIcon />}
               </div>
             </Tooltip>
-          </NavLink>
+          </button>
         </div>
-        */}
         <div className="nav-item">
           <NavLink
             href="/my-gfw/"

src/components/header/components/notifications-panel/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import OutsideClickHandler from 'react-outside-click-handler';
+
+import NotificationItem from 'components/notifications/notification-item';
+
+import CloseIcon from 'assets/icons/close.svg';
+import { NotificationsPanelWrapper } from './styles';
+
+const NotificationsPanel = ({
+  notifications = [],
+  handleClose,
+  slim = false,
+}) => {
+  const renderNotifications = () => {
+    if (notifications.length === 0) {
+      return (
+        <div className="empty-list">Check back here soon for more updates!</div>
+      );
+    }
+
+    return notifications.map(({ id, title, content, icon, date }) => (
+      <NotificationItem
+        key={id}
+        title={title}
+        description={content}
+        date={date}
+        icon={icon}
+      />
+    ));
+  };
+
+  return (
+    <NotificationsPanelWrapper
+      data-component-type="notification-list"
+      slim={slim}
+    >
+      <OutsideClickHandler onOutsideClick={handleClose}>
+        <div className="top">
+          <span className="title">NOTIFICATIONS</span>
+          <CloseIcon className="close-icon" onClick={handleClose} />
+        </div>
+        {renderNotifications()}
+      </OutsideClickHandler>
+    </NotificationsPanelWrapper>
+  );
+};
+
+NotificationsPanel.propTypes = {
+  notifications: PropTypes.array,
+  handleClose: PropTypes.func,
+  slim: PropTypes.bool,
+};
+
+export default NotificationsPanel;

src/components/header/components/notifications-panel/styles.js

@@ -0,0 +1,51 @@
+import styled from '@emotion/styled';
+import theme from 'styles/theme';
+
+export const NotificationsPanelWrapper = styled.div`
+  border: solid 1px ${theme.colors.lightGrey};
+  background-color: #ffffff;
+  left: 30%;
+  position: relative;
+  max-width: 438px;
+  max-height: 400px;
+  margin: 0 auto;
+  overflow-y: scroll;
+  z-index: 1;
+
+  ${({ slim }) =>
+    slim &&
+    `
+    left: 38%;
+    `}
+
+  .empty-list {
+    font-size: 14px;
+    padding: 20px;
+    text-align: center;
+  }
+
+  .top {
+    border-bottom: solid 1px ${theme.colors.lightGrey};
+    color: #333333;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-bottom: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 10px;
+    width: 100%;
+
+    .title {
+      font-weight: 700;
+      font-size: 16px;
+    }
+
+    .close-icon {
+      cursor: pointer;
+      height: 16px;
+      margin-top: 4px;
+      width: 16px;
+    }
+  }
+`;