Adding the Notification Drawer documentation

web-console/4-patterns/masthead.md

@@ -45,11 +45,15 @@ On the landing page, the only navigation available is the Primary Masthead.
 
 ![Full Masthead](img/OpenShift-Regions.png)
 
-### System Alerts
-- If system alerts exist, a warning icon will appear in the masthead as the left-most icon in the group (OpenShift Online ONLY)
-- Note the notification drawer has not yet been implemented.
+### Notification Drawer
 
-![Full Masthead](img/OpenShift-Navbar-1.png)
+- The [Notification Drawer](http://openshift.github.io/openshift-origin-design/web-console/4-patterns/notifications) can be accessed through the bell icon in the masthead, which is directly to the left of the Launcher.
 
+#### System Alerts
+- If system alerts exist, a warning icon will appear in the masthead as the left-most icon in the group (OpenShift Online ONLY) to the left of the bell.
 - System alerts pertain to the infrastructure on which OpenShift is running. They are used to communicate system status to online users. (https://status.openshift.com/)
 - System alerts are implemented via a javascript config extension point, so users are able to customize their OpenShift instance to override the warning icon and use the space as desired.
+
+## Responsive Designs
+- Masthead actions will drop into the hamburger menu with the exception of the system alerts and notification drawer.
+- The notification drawer will remain in the top right corner of the UI, with the system alert warning icon to the left of the bell when needed for Online.

web-console/4-patterns/navigation.md

@@ -28,9 +28,10 @@ Once a user navigates to a specific project inside the console, a second horizon
 ## Responsive States
 
 ### Landing Page
-- On smaller viewports, the icons shown from left to right in the masthead should be placed in the hamburger menu from top to bottom.
+- On smaller viewports, the icons shown from left to right in the masthead should be placed in the hamburger menu from top to bottom with the exception of the notification drawer.
+- The bell icon will remain in the top right corner of the masthead for easy access to the notification drawer.
+- The drawer should follow PatternFly standards for the responsive behavior as detailed in the [Notification Drawer](http://www.patternfly.org/pattern-library/communication/notification-drawer/#/design) pattern.
 - The labels are as follows: (with icons to the left of the labels)
-	- Notification Drawer
 	- Launcher
 	- Help
 	- [username]
@@ -60,12 +61,12 @@ Once a user navigates to a specific project inside the console, a second horizon
 - Inside the console, the primary navigation options display in a vertical nav so the order of items inside the hamburger menu will change here.
 - The hamburger menu will scroll if needed.
 - On smaller viewports, the masthead icons shown from left to right should still be placed in the hamburger menu from top to bottom, but they will be placed after all primary navigation items.
+- The notification drawer will remain in the top right corner of the masthead.
 - Because there is also a secondary "masthead" or horizontal bar, those options will be considered part of the primary nav and should be displayed first in the hamburger menu.
 - The labels are as follows from top to bottom: (with icons to the left of the labels)
 	- [Project Name] (ability to change projects
 	- Add to Project
 	- **All Primary Navigation Items**
-	- Notification Drawer
 	- Launcher
 	- Help
 	- [username]

web-console/4-patterns/notifications.md

@@ -0,0 +1,62 @@
+# Notification Drawer
+
+## Open Questions
+- What items will be in the notification drawer?
+  - Events and toast notification items
+  - For phase 1, will all events be in the drawer or just a subset of reason codes?
+
+
+## Design
+
+### Homepage
+![Notifications](img/Phase1-01.png)
+
+- The notification drawer will not be accessible from the homepage so the bell will be hidden from this view.
+
+### Inside the Console
+
+![Notifications 2](img/Phase1-03.png)
+- Once in the context of a specific project inside the console, the notification drawer will be accessible via the bell icon, in the  [Masthead](http://openshift.github.io/openshift-origin-design/web-console/4-patterns/masthead).
+- The [PatternFly Notification Drawer](http://www.patternfly.org/pattern-library/communication/notification-drawer/) pattern should be applied to this design.
+- At the top of the drawer the project name will appear with the number of unread notifications below.
+- To the right of the project name will be a link to view all Events which will take the user directly to the 'Monitoring >> Events' full page view. Below this link is the rollup info currently inside the events area.
+  - **Note:** A section header with project name and summary information should always be displayed at the top of the drawer and this section will always remain open. The accordion arrow shown in PatternFly should be hidden because there will never be more than one project section displayed at one time.
+- The blue badge appears when "unread" notifications exist for the current project.
+- Unread notifications are displayed with bold text until they are marked as read
+- A notification will be marked as read when a user clicks anywhere on that row in the drawer, clicks on the corresponding toast notification action, or clicks the "Mark All Read" link.
+
+![Notifications 3](img/Phase1-06.png)
+
+- The notification drawer will be in the empty state when there are no notifications to display for the current project.
+
+#### Events
+
+![Notifications 4](img/Phase1-05.png)
+
+- Events and toast notifications will show up in the drawer as they occur
+- Events can be of two types, either Warnings or Informational.
+- Each event will show up as a new row in the drawer with the icon and reason code presented first, followed by the instance kind and name.  
+- Below the error/type/name information should be the timestamp info, first showing "x times in x hours" if the event has occurred more than once, followed by the actual time and date information.
+
+![Notifications 5](img/Phase1-07.png)
+
+- When a user interacts with the actions inside of a toast notification, the message should automatically be marked as read inside the drawer.
+- When events expire from the events page, they should also expire from the notification drawer. ("time to live" information should be used here)
+- Users can clear notifications individually or by clicking the clear all button to remove all notifications from the drawer of the current project.
+- When notifications are cleared from the drawer they should also be cleared from the events page.
+
+#### Switching Projects
+
+![Notifications6](img/Phase1-10.png)
+
+- When a user switches to a different project, the drawer should automatically be in the closed state until reopened by the user.
+- When opened, the project name and summary at the top of the drawer will reflect the new selected project.
+- Notifications will only be shown and tracked for the currently selected project inside the console and switching projects is the only way to receive notifications regarding another project.
+
+
+#### Expand Functionality  
+
+![Notifications6](img/Phase1-11.png)
+
+- The user can choose to expand/ collapse the drawer to see more details as needed.
+- When in the expanded state, the full message should be displayed as is the case in the expanded state of the event details page.