From 6c1aa574c54b4ffff0c3047fff68ef5a34fd2249 Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@switchingprotocols.com>
Date: Fri, 9 Dec 2016 16:57:12 -0500
Subject: [PATCH 1/2] add app-level notification banner pattern

---
 sass/elements/_modules.scss | 26 ++++++++++++++++++++++++++
 sass/global/_layouts.scss   |  1 +
 templates/working.html      |  7 +++++++
 3 files changed, 34 insertions(+)

diff --git a/sass/elements/_modules.scss b/sass/elements/_modules.scss
index e63046a..132fc32 100644
--- a/sass/elements/_modules.scss
+++ b/sass/elements/_modules.scss
@@ -21,6 +21,10 @@
     margin-bottom: .2rem;
   }
 
+  &.info {
+    color: $black;
+  }
+
   &.success {
     color: $success;
   }
@@ -32,8 +36,30 @@
   &.error {
     color: $error;
   }
+}
+
+/* global app style alerts and notices */
+
+.wrap-notices {
+  background-color: $white;
+  color: $black;
+  font-size: $fs-xsmall;
+
+  &.info {
+    border-top: 2px solid $gray-l2;
+  }
 
+  &.success {
+    border-top: 2px solid $success;
+  }
 
+  &.warning {
+    border-top: 2px solid $warning;
+  }
+
+  &.error {
+    border-top: 2px solid $error;
+  }
 }
 
 .alert-banner {
diff --git a/sass/global/_layouts.scss b/sass/global/_layouts.scss
index ca6b208..7063e98 100644
--- a/sass/global/_layouts.scss
+++ b/sass/global/_layouts.scss
@@ -6,6 +6,7 @@
 }
 
 .wrap-gridband, 
+.wrap-notice, 
 .wrap-header, 
 .wrap-header-local,
 .wrap-breadcrumb, 
diff --git a/templates/working.html b/templates/working.html
index 9e318b5..443d4a3 100644
--- a/templates/working.html
+++ b/templates/working.html
@@ -20,6 +20,13 @@
 <a id="skip" class="skip sr sr-focusable" href="#content-main">Skip to main content</a>
 
 <div class="wrap-page">
+	<div class="wrap-notices info layout-band">
+	  <div class="wrap-notice">
+	    <div class="alert alert-global" role="alert">
+	      <p>This is a beta service. Try it out or <a href="http://libraries.mit.edu">return to our main site</a>.</p>
+	    </div>
+	  </div>
+	</div>
 	<div class="wrap-outer-header layout-band">
 		<div class="wrap-header">
 			<header class="header-site header-slim" role="banner">

From c0b36f6a9c6367b2fa83ae9963fe2ffc9b768b0b Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@switchingprotocols.com>
Date: Fri, 16 Dec 2016 14:06:30 -0500
Subject: [PATCH 2/2] add inline actions and adjust list extends to classes

---
 sass/elements/_controls.scss |  2 ++
 sass/elements/_footer.scss   |  6 ++---
 sass/elements/_modules.scss  | 22 +++++++++++++++-
 sass/global/_helpers.scss    | 29 ++++++++++++---------
 templates/working.html       | 49 ++++++++++++++++++++++++++++++++++++
 5 files changed, 92 insertions(+), 16 deletions(-)

diff --git a/sass/elements/_controls.scss b/sass/elements/_controls.scss
index ac4c58d..dd79b8d 100644
--- a/sass/elements/_controls.scss
+++ b/sass/elements/_controls.scss
@@ -1,6 +1,7 @@
 
 .button-primary {
   transition: background-color .25s, border .25s;
+  display: inline-block;
   border: 1px solid $brand-primary;
   border-radius: 3px;
   padding: 5px 10px;
@@ -19,6 +20,7 @@
 
 .button-secondary {
   transition: background-color .25s, border .25s;
+  display: inline-block;
   border: 1px solid $gray-l2;
   border: 1px solid $smoke;
   border-radius: 3px;
diff --git a/sass/elements/_footer.scss b/sass/elements/_footer.scss
index 9bd0e90..9eba39a 100644
--- a/sass/elements/_footer.scss
+++ b/sass/elements/_footer.scss
@@ -36,7 +36,7 @@
   }
 
   .wrap-usergroups {
-    @extend %list-inline-pipe;
+    @extend .list-inline-pipe;
     font-size: $fs-small;
   }
 
@@ -69,7 +69,7 @@
 .wrap-footer.footer-slim {
 
   .sitemap-libraries-abbrev a {
-    @extend %list-inline-pipe;
+    @extend .list-inline-pipe;
     font-size: $fs-small;
   }
 
@@ -99,7 +99,7 @@
   }
 
   .about-mit {
-    @extend %list-inline-pipe;
+    @extend .list-inline-pipe;
     color: $gray-l2;
     text-transform: uppercase;
   }
diff --git a/sass/elements/_modules.scss b/sass/elements/_modules.scss
index 132fc32..d07a77d 100644
--- a/sass/elements/_modules.scss
+++ b/sass/elements/_modules.scss
@@ -11,7 +11,7 @@
   }
 
   ul {
-    @extend %list-unbulleted;
+    @extend .list-unbulleted;
   }
 }
 
@@ -89,3 +89,23 @@
     color: darken($error, 20%);
   }
 }
+
+
+.inline-action {
+
+  @media (min-width: $bp-screen-md) {
+
+    .message {
+      display: inline-block;
+      vertical-align: middle;
+      width: 65%
+    }
+
+    .actions {
+      display: inline-block;
+      vertical-align: middle;
+      width: 34%;
+      text-align: right;
+    }
+  }
+}
diff --git a/sass/global/_helpers.scss b/sass/global/_helpers.scss
index 89f0ddd..3677163 100644
--- a/sass/global/_helpers.scss
+++ b/sass/global/_helpers.scss
@@ -74,13 +74,13 @@
   }
 }
 
-%list-unbulleted {
+.list-unbulleted {
   list-style: none;
   padding-left: 0;
   text-indent: 0;
 }
 
-%list-inline {
+.list-inline {
   @extend %reset-list;
 
   li,
@@ -90,17 +90,22 @@
   }
 }
 
-%list-inline-pipe {
-  display: inline-block;
-  padding-right: 1rem;
+.list-inline-pipe {
+  padding-left: 0;
 
-  .item:after {
-    content: ' | ';
-    margin-left: 1rem;
-  }
-  
-  .item:last-child:after {
-    content: '';
+  li, 
+  .item {
+    display: inline-block;
+    padding-right: 1rem;
+
+    &:after {
+      content: ' | ';
+      margin-left: 1rem;
+    }
+    
+    &:last-child:after {
+      content: '';
+    }
   }
 }
 
diff --git a/templates/working.html b/templates/working.html
index 443d4a3..33ebf48 100644
--- a/templates/working.html
+++ b/templates/working.html
@@ -227,14 +227,63 @@ <h5>Heading 5</h5>
 					<h6>Heading 6</h6>
 					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque odio soluta fuga esse accusantium, voluptate, eos quod impedit! Quas cum saepe eaque quisquam culpa libero ipsum fuga necessitatibus tempore? Sequi! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
 					<ul>
+						<li>Regular unordered list</li>
+						<li>Aliquam tincidunt mauris eu risus.</li>
+						<li>Vestibulum auctor dapibus neque.</li>
+						<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+						<li>Aliquam tincidunt mauris eu risus.</li>
+						<li>Vestibulum auctor dapibus neque.</li>
+					</ul>
+
+					<ol>
+						<li>Regular ordered list</li>
+						<li>Aliquam tincidunt mauris eu risus.</li>
+						<li>Vestibulum auctor dapibus neque.</li>
+						<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+						<li>Aliquam tincidunt mauris eu risus.</li>
+						<li>Vestibulum auctor dapibus neque.</li>
+					</ol>
+
+					<ul class="list-unbulleted">
+						<li>Unbulleted list</li>
+						<li>Aliquam tincidunt mauris eu risus.</li>
+						<li>Vestibulum auctor dapibus neque.</li>
 						<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
 						<li>Aliquam tincidunt mauris eu risus.</li>
 						<li>Vestibulum auctor dapibus neque.</li>
+					</ul>
+
+					<ul class="list-inline">
+						<li>Inline list</li>
+						<li>Aliquam tincidunt mauris eu risus.</li>
+						<li>Vestibulum auctor dapibus neque.</li>
+						<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+						<li>Aliquam tincidunt mauris eu risus.</li>
+						<li>Vestibulum auctor dapibus neque.</li>
+					</ul>
+
+					<ul class="list-inline-pipe">
+						<li>Inline pipe list</li>
+						<li>Aliquam tincidunt mauris eu risus.</li>
+						<li>Vestibulum auctor dapibus neque.</li>
 						<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
 						<li>Aliquam tincidunt mauris eu risus.</li>
 						<li>Vestibulum auctor dapibus neque.</li>
 					</ul>
 				</div>
+
+				<div class="gridband">
+				  <div class="wrap-notices inline-action">
+				    <div class="message">
+				      <h3 class="title">Get help from a research professional</h3>
+				      <p>Our librarians are trained to find what you need.</p>
+				    </div>
+				    <div class="actions">
+				      <a class="button button-secondary" href="https://libraries.mit.edu/ask/">AskUs: Chat with a Librarian</a>
+				    </div>
+				  </div>
+				</div>
+
 				
 				<hr />