{"id":759,"date":"2018-05-15T16:41:34","date_gmt":"2018-05-15T16:41:34","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=759"},"modified":"2018-06-26T22:28:40","modified_gmt":"2018-06-26T22:28:40","slug":"usage","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/notifications\/usage\/","title":{"rendered":"Notifications usage"},"content":{"rendered":"<p>Components<\/p>\n<h1>\n\t\tNotifications<br \/>\n\t<\/h1>\n<h2>\n\t\tFormat<br \/>\n\t<\/h2>\n<h4>\n\t\t<a href=\"#\" title=\"Title\" target=\"_self\"><br \/>\n\t\tTitle<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>All notifications have subject titles, which should be short and descriptive. Example:\u00a0<strong>\u201cExecutive Report 7 is ready to view.\u201d<\/strong><\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Message\" target=\"_self\"><br \/>\n\t\tMessage<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>We recommend the body of the Notification be contained within two lines. Be descriptive and include any troubleshooting actions or next steps. When possible, communicate the main message using just the title. You can include links within the Notification body that redirect the user to next steps.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Dismissal\" target=\"_self\"><br \/>\n\t\tDismissal<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>We recommend that Toast Notifications automatically disappear after five seconds. Inline Notifications are persistent until the user dismisses them. All notifications have at least one method of dismissal (typically, it is a small \u201cx\u201d in the upper right hand corner).<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Icons\" target=\"_self\"><br \/>\n\t\tIcons<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Icons may provide additional clarity. Icons should be placed to the left of a title. These glyphs (16&#215;16) can be found in the\u00a0<a href=\"https:\/\/sites.neoninspire.com\/style-guide\/icons\">iconography<\/a>\u00a0library.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Color\" target=\"_self\"><br \/>\n\t\tColor<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Users should be able to select the checkbox by clicking on the box directly or by clicking on its label.<\/p>\n<h2>\n\t\tPlacement<br \/>\n\t<\/h2>\n<h4>\n\t\t<a href=\"#\" title=\"Notification center\" target=\"_self\"><br \/>\n\t\tNotification center<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>All notifications have subject titles, which should be short and descriptive. Example:\u00a0<strong>\u201cExecutive Report 7 is ready to view.\u201d<\/strong><\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Inline notifications\" target=\"_self\"><br \/>\n\t\tInline notifications<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>We recommend the body of the Notification be contained within two lines. Be descriptive and include any troubleshooting actions or next steps. When possible, communicate the main message using just the title. You can include links within the Notification body that redirect the user to next steps.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Toolbar notifications\" target=\"_self\"><br \/>\n\t\tToolbar notifications<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>We recommend that Toast Notifications automatically disappear after five seconds. Inline Notifications are persistent until the user dismisses them. All notifications have at least one method of dismissal (typically, it is a small \u201cx\u201d in the upper right hand corner).<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Toast notifications\" target=\"_self\"><br \/>\n\t\tToast notifications<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Icons may provide additional clarity. Icons should be placed to the left of a title. These glyphs (16&#215;16) can be found in the\u00a0<a href=\"https:\/\/sites.neoninspire.com\/style-guide\/icons\">iconography<\/a>\u00a0library.<\/p>\n<h2>\n\t\tNotification Panel<br \/>\n\t<\/h2>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/06\/Screen-Shot-2018-06-26-at-5.17.12-PM.png\" alt=\"Screen Shot 2018-06-26 at 5.17.12 PM\" itemprop=\"image\" height=\"1215\" width=\"429\" title=\"Screen Shot 2018-06-26 at 5.17.12 PM\"  \/><\/p>\n<h4>Important actions<\/h4>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>1. Header<\/strong> &#8211; includes the count of how many notifications there are. Notifications are only shown from the last 30 days.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>2. Neon Updates<\/strong> &#8211; This is where we will house the link to the splash message with Neon&#8217;s newest features.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>3. Unread Count and Dismissal<\/strong> &#8211; This let&#8217;s the user know how many unread messages they have AND allows them to bulk mark them all as read.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>4. Filter<\/strong> &#8211; This let&#8217;s us filter by type of notification ( Activity, Executive Report, and Duplicate Scan *so far*)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>5. Indication icon<\/strong> &#8211; This icon indicates what type of notification it is (see &#8220;code&#8221;) AND if the notification is read (gray) or unread (green).\u00a0 The background of the notification cell will also be slightly gray when unread.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>6. Expansion panels &#8211;\u00a0<\/strong>When a notification is clicked it will expand to show the entirety of the message. See below for variations on notification panel expansions.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Expansions\" target=\"_self\"><br \/>\n\t\tExpansions<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>When the user click a notification cell, the cell will expand to reveal the entirety of the message. There are *currently* three types of notifications in the notification panel:<\/p>\n<ul>\n<li>Activity<\/li>\n<li>Duplicate Scan<\/li>\n<li>Executive Report<\/li>\n<\/ul>\n<h5><strong>Duplicate Scan<\/strong><\/h5>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/06\/Group-1.png\" alt=\"Group\" itemprop=\"image\" height=\"116\" width=\"408\" title=\"Group\"  \/><\/p>\n<p>Clicking the title will take the user to the duplicate scan page.<\/p>\n<p><strong>Components<\/strong><\/p>\n<ul>\n<li><strong>Icon<\/strong> &#8211; &#8220;fa-copy&#8221;<\/li>\n<li><strong>Type<\/strong> &#8211; &#8220;Duplicate Scan&#8221;<\/li>\n<li><strong>Button<\/strong> &#8211; &#8220;Mark as Unread&#8221;<\/li>\n<li><strong>Title<\/strong> (Large blue text) &#8211; &#8220;Your &lt;&lt;name of scan&gt;&gt; is Complete&#8221;<\/li>\n<li><strong>Amount of duplicates found<\/strong><\/li>\n<li><strong>Time of completion<\/strong> (relative time)<\/li>\n<\/ul>\n<h5><strong>Executive Report<\/strong><\/h5>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/06\/Group-5-Copy-2.png\" alt=\"Group 5 Copy 2\" itemprop=\"image\" height=\"96\" width=\"408\" title=\"Group 5 Copy 2\"  \/><\/p>\n<p>Clicking the title will take the user to the Executive Report page.<\/p>\n<p><strong>Components<\/strong><\/p>\n<ul>\n<li><strong>Icon<\/strong> &#8211; &#8220;fa-trophy&#8221;<\/li>\n<li><strong>Type<\/strong> &#8211; &#8220;Executive Report&#8221;<\/li>\n<li><strong>Button<\/strong> &#8211; &#8220;Mark as Unread&#8221;<\/li>\n<li><strong>Title<\/strong> (Large blue text) &#8211;\u00a0 &#8220;Your &lt;&lt;name of report&gt;&gt; Executive Report is Ready&#8221;<\/li>\n<li><strong>Time of completion<\/strong> (relative time)<\/li>\n<\/ul>\n<h5><strong>Activity<\/strong><\/h5>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/06\/Group-5.png\" alt=\"Group 5\" itemprop=\"image\" height=\"186\" width=\"408\" title=\"Group 5\"  \/><\/p>\n<p>Clicking the title will take the user to the Activity page&#8230;maybe?<\/p>\n<p><strong>Components<\/strong><\/p>\n<ul>\n<li><strong>Icon<\/strong> &#8211; &#8220;fa-calendar-alt&#8221;<\/li>\n<li><strong>Type<\/strong> &#8211; &#8220;Activity Reminder&#8221;<\/li>\n<li><strong>Button<\/strong> &#8211; &#8220;Mark as Unread&#8221;<\/li>\n<li><strong>Title<\/strong> (Large blue text)<\/li>\n<li><strong>Date and Time stamp for when activity starts<\/strong><\/li>\n<li><strong>When reminder went out<\/strong>(relative time)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Components Notifications Format Title All notifications have subject titles, which should be short and descriptive. Example:\u00a0\u201cExecutive Report 7 is ready to view.\u201d Message We recommend the body of the Notification be contained within two lines. Be descriptive and include any troubleshooting actions or next steps. When possible, communicate the main message using just the title.&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":47,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-759","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=759"}],"version-history":[{"count":7,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/759\/revisions"}],"predecessor-version":[{"id":1227,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/759\/revisions\/1227"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/47"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}