handle regional 1 and 2 alerts

uvalib · Mar 16, 2021 · 3d91df4 · 3d91df4
1 parent 806fc5a
commit 3d91df4
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 81 deletions.
diff --git a/packages/uvalib-alerts/demo/regional.html b/packages/uvalib-alerts/demo/regional.html
@@ -15,6 +15,6 @@
     <script type="module" src="./uvalib-alerts-regional.js"></script>
   </head>
   <body>
-    <uvalib-alerts-regional url="https://libraetd.lib.virginia.edu/" id="regional"></uvalib-alerts-regional>
+    <uvalib-alerts-regional url="https://library.virginia.edu/services" id="regional"></uvalib-alerts-regional>
   </body>
 </html>
diff --git a/packages/uvalib-alerts/demo/uvalib-alerts-regional.js b/packages/uvalib-alerts/demo/uvalib-alerts-regional.js
diff --git a/packages/uvalib-alerts/dist/uvalib-alerts-regional.js b/packages/uvalib-alerts/dist/uvalib-alerts-regional.js
diff --git a/packages/uvalib-alerts/package-lock.json b/packages/uvalib-alerts/package-lock.json
diff --git a/packages/uvalib-alerts/package.json b/packages/uvalib-alerts/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@uvalib/uvalib-alerts",
   "main": "uvalib-alerts.js",
-  "version": "0.3.26",
+  "version": "0.3.27",
   "dependencies": {
     "@uvalib/uvalib-models": "^0.3.34",
     "@uvalib/web-styles": "^0.2.4",

diff --git a/packages/uvalib-alerts/rollup.config.js b/packages/uvalib-alerts/rollup.config.js
@@ -12,7 +12,7 @@ export default {
     format: 'esm'
   },
   plugins: [
-    multiInput(),
+    multiInput({relative:"./"}),
     postcss({
       extract: false,
       inject: false,

diff --git a/packages/uvalib-alerts/uvalib-alerts-legacy.js b/packages/uvalib-alerts/uvalib-alerts-legacy.js
diff --git a/packages/uvalib-alerts/uvalib-alerts-regional.js b/packages/uvalib-alerts/uvalib-alerts-regional.js
@@ -83,7 +83,11 @@ export class UvalibAlertsRegional extends HTMLElement {
         this._alertsContainer.innerHTML = "";
         alerts.forEach(a=>{
           this._alertsContainer.innerHTML += `
-            <div class="alertbox alertbox-primary">${a.body}</div>
+            <div class="uva-alert uva-alert--${(a.severity=="regional1")?"r1":"r2"}">
+              <div class="uva-alert__body">
+                <div class="uva-alert__text">${a.body}</div> 
+              </div>
+            </div>
           `;
         });
         this._setupStyle();

diff --git a/packages/uvalib-alerts/uvalib-alerts-regional.scss b/packages/uvalib-alerts/uvalib-alerts-regional.scss
@@ -3,54 +3,46 @@
 @import "~@uvalib/web-styles/scss/_icons.scss";
 @import "~@uvalib/web-styles/scss/_variables.scss";
 
-$uvalib-alert-a1-bg: $uvalib-red-lightest;
-$uvalib-alert-a1-border: $uvalib-red-dark;
-$uvalib-alert-a2-bg: $uvalib-yellow-lightest;
-$uvalib-alert-a2-border: $uvalib-yellow;
-$uvalib-alert-a3-bg: $uvalib-blue-alt-lightest;
-$uvalib-alert-a3-border: $uvalib-blue-alt;
-$uvalib-alert-a4-bg: $uvalib-teal;
 $uvalib-alert-r1-bg: $uvalib-yellow-lightest;
 $uvalib-alert-r1-border: $uvalib-yellow;
 $uvalib-alert-r2-bg: $uvalib-teal-lightest;
 $uvalib-alert-r2-border: $uvalib-teal;
 
-$uvalib-alert-error-inline: $uvalib-red-darker;
-$uvalib-alert-confirmation-inline: $uvalib-green-dark;
-
-$uvalib-alert-info-bg: $uvalib-blue-alt-lightest;
-$uvalib-alert-info-border: $uvalib-blue-alt;
-$uvalib-alert-confirmation-bg: $uvalib-green-lightest;
-$uvalib-alert-confirmation-border: $uvalib-green-dark;
-
-$uvalib-status-available: $uvalib-blue-alt;
-$uvalib-status-modified: $uvalib-yellow;
-$uvalib-status-notavailable: $uvalib-red-darker;
-
-$accessibility-outline-color--bgislight: $uvalib-blue-alt-dark;
-$accessibility-outline-color--bgisdark: $uvalib-blue-alt-lightest;
-
 :host {
   display: none;
   @include font-body1;
 }
 [hidden] {
   display: none;
 }
-/*END*/
-/* Custom Backgrounds */
-.alertbox {
+
+.uva-alert {
+  font-size: 1.06rem;
+  line-height: 1.5;
   position: relative;
-  padding: .75rem 1.25rem;
+  color: $uvalib-text-dark;
+}
+
+.uva-alert--r1, .uva-alert--r2 {
+  border: 0.2em solid var(--alert-border-color);
+  border-radius: 0.5em;
+  padding: 0.75rem 1rem;
   margin-bottom: 1rem;
-  border: 1px solid transparent;
-  border-radius: .25rem;
 }
-.alertbox h2:first-of-type {
-  margin-top: .5rem;
+.uva-alert--r1 {
+  background-color: $uvalib-alert-r1-bg;
+  --alert-border-color: $uvalib-alert-r1-border;
 }
-.alertbox-primary {
-  background-color: $uvalib-teal-lightest;
-  border-color: $uvalib-teal-light;
-  color: $uvalib-text-dark;
+.uva-alert--r2 {
+  background-color: $uvalib-alert-r2-bg;
+  --alert-border-color: $uvalib-alert-r2-border;
+}
+.uva-alert__body {
+  padding-left: 1.25rem;
+  display: table-cell;
+  vertical-align: top;
 }
+.uva-alert__text, .uva-alert__text p {
+  margin-bottom: 0;
+  margin-top: 0;
+}