From 23320f57da8fbe908f577839ef983536eeb2f91c Mon Sep 17 00:00:00 2001
From: Pooja Gadige <poojagadige@gmail.com>
Date: Mon, 2 Apr 2018 13:42:26 +0530
Subject: [PATCH] Add text about making notification bar dismissable

---
 .../static/sass/blocks/_notification-bar.scss | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/warehouse/static/sass/blocks/_notification-bar.scss b/warehouse/static/sass/blocks/_notification-bar.scss
index ee4294efdad0..6d422b5744c8 100644
--- a/warehouse/static/sass/blocks/_notification-bar.scss
+++ b/warehouse/static/sass/blocks/_notification-bar.scss
@@ -33,6 +33,30 @@
     - dismissable: Indicates notification be be dismissed. Defaults to hidden.
     - visible: Indicates a visible, non-dismissed notification
 */
+/*
+  A notification bar can be made dismissable by adding the following to the main
+  notification-bar div:
+    - .notification-bar--dismissable to it's classes
+    - data-controller="notification"
+    - data-target="notification.notification" as attributes
+
+  The data-controller and data-target are used for handling visibility,
+  including, adding .notification-bar--visible to notification-bar div if it has
+  not been dismissed (and persisted) yet.
+
+  <div class="notification-bar notification-bar--dismissable"
+    data-controller="notification" data-target="notification.notification">
+      <span class="notification-bar__icon">
+        // icon here
+      </span>
+      <span class="notification-bar__message">
+        // A one line notification goes here.
+      </span>
+  </div>
+
+  Note that if Javascript is disabled, the notification bar always defaults to
+  be visible.
+*/
 
 .notification-bar {
   border-bottom: 2px solid $white;