feat(notifications): Add static base of UI NotificationsPanel

Author: duranmla

.docz/app/db.json

@@ -77,8 +77,13 @@
         },
         {
           "depth": 2,
-          "slug": "render-notifications-props",
-          "value": "Render notifications props"
+          "slug": "basic-usage",
+          "value": "Basic usage"
+        },
+        {
+          "depth": 2,
+          "slug": "notificationspanel",
+          "value": "NotificationsPanel"
         },
         {
           "depth": 2,

src/notifications/Notifications.mdx

@@ -3,16 +3,16 @@ name: Notifications
 ---
 
 import { Playground, PropsTable } from "docz";
-import Notifications from "./";
-import { notifications } from "./__tests__/__fixtures__/notifications";
+import Notifications, { NotificationsPanel } from "./";
+import { notifications } from "../__fixtures__/notifications";
 
 # Notifications
 
-Use a given user object in order to fetch the user notifications and inject them in a normalised shape to its children
+This scope will expose the `Notifications` component that uses a given user object in order to fetch the user notifications and inject them in a normalised shape to its children. Besides, it also exposes a NotificationPanel in order to be a component to being able to display notifications as expected and perform actions on them
 
 <PropsTable of={Notifications} />
 
-## Render notifications props
+## Basic usage
 
 When a given user has _unread_ notifications, the component will inject notifications data categorised by messages and alerts
 
@@ -32,6 +32,14 @@ When a given user has _unread_ notifications, the component will inject notifica
   </Notifications>
 </Playground>
 
+## NotificationsPanel
+
+<PropsTable of={NotificationsPanel} />
+
+<Playground>
+  <NotificationsPanel notifications={[{}, {}, {}, {}, {}, {}, {}, {}]} />
+</Playground>
+
 ## Types
 
 ```

src/notifications/NotificationsPanel.js

@@ -0,0 +1,34 @@
+// @flow
+
+import { getNotificationIcon } from "./helpers";
+import { NotificationsPanelComponents as NPC } from "./styled";
+import React from "react";
+import { Typography } from "@material-ui/core";
+
+export const NotificationsPanel = ({
+  notifications,
+}: {
+  notifications: Array<Notification>,
+}) => {
+  return (
+    <NPC.Container>
+      <NPC.Header>
+        <Typography variant="caption">Notifications</Typography>
+      </NPC.Header>
+      <NPC.Body>
+        {notifications.map(n => (
+          <NPC.Item key={n.id}>
+            {getNotificationIcon("foo")}
+            <div>
+              <Typography variant="body2">
+                Achievement completed! <strong>Know your stuff I</strong>
+              </Typography>
+              <Typography variant="caption">1 hour ago</Typography>
+            </div>
+          </NPC.Item>
+        ))}
+      </NPC.Body>
+      <NPC.Footer />
+    </NPC.Container>
+  );
+};

src/notifications/helpers.js

@@ -0,0 +1,8 @@
+// @flow
+
+import Group from "@material-ui/icons/Group";
+import React from "react";
+
+export const getNotificationIcon = (notificationType: string) => {
+  return notificationType && <Group />;
+};

src/notifications/index.js

@@ -1 +1,2 @@
 export { Notifications as default } from "./Notifications";
+export { NotificationsPanel } from "./NotificationsPanel";

src/notifications/styled.js

@@ -0,0 +1,59 @@
+// @flow
+
+import { grey } from "@material-ui/core/colors";
+import styled from "styled-components";
+
+const NotificationsPanelBody = styled.div`
+  overflow-y: auto;
+  max-height: 20.625rem;
+`;
+
+const NotificationsPanelContainer = styled.div`
+  border: 1px solid ${grey[400]};
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1),
+    0 2px 2px -2px rgba(0, 0, 0, 0.02), 0 1px 4px 0 rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+  position: relative;
+  width: 25rem;
+`;
+
+const NotificationsPanelFooter = styled.div`
+  border-top: 1px solid ${grey[400]};
+  height: 2.125rem;
+`;
+
+const NotificationsPanelHeader = styled.div`
+  align-items: center;
+  border-bottom: 1px solid ${grey[400]};
+  display: flex;
+  height: 2.125rem;
+  padding: 0 0.625rem;
+`;
+
+const NotificationsPanelItem = styled.div`
+  align-items: center;
+  display: flex;
+  padding: 0.625rem 1.875rem 0.625rem 0.625rem;
+
+  > div:last-child {
+    margin-left: 0.625rem;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  span {
+    display: block;
+    margin: 0;
+  }
+`;
+
+export const NotificationsPanelComponents = {
+  Body: NotificationsPanelBody,
+  Container: NotificationsPanelContainer,
+  Footer: NotificationsPanelFooter,
+  Header: NotificationsPanelHeader,
+  Item: NotificationsPanelItem,
+};