@asd20/ui 3.2.720 → 3.2.722

package/package-lock.json

@@ -1,21 +1,9 @@
 {
   "name": "@asd20/ui",
-  "version": "3.2.717",
+  "version": "3.2.720",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@asd20/notifications-ui": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@asd20/notifications-ui/-/notifications-ui-0.11.3.tgz",
-      "integrity": "sha512-9QuoJbn/xAiEaOCDa3U7c8WVBSrAJohA01MbdhmgjEfqGehezfPaY2ARBwCCfID2WGvqorAXCIcYcI3kDn3x+w==",
-      "requires": {
-        "@babel/runtime": "^7.10.2",
-        "@vue/web-component-wrapper": "^1.2.0",
-        "lodash-es": "^4.17.15",
-        "vue": "^2.6.11",
-        "vue-hot-reload-api": "^2.3.4"
-      }
-    },
     "@babel/code-frame": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
@@ -1168,6 +1156,7 @@
       "version": "7.11.2",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
       "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
+      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -4682,7 +4671,8 @@
     "@vue/web-component-wrapper": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.2.0.tgz",
-      "integrity": "sha512-Xn/+vdm9CjuC9p3Ae+lTClNutrVhsXpzxvoTXXtoys6kVRX9FkueSUAqSWAyZntmVLlR4DosBV4pH8y5Z/HbUw=="
+      "integrity": "sha512-Xn/+vdm9CjuC9p3Ae+lTClNutrVhsXpzxvoTXXtoys6kVRX9FkueSUAqSWAyZntmVLlR4DosBV4pH8y5Z/HbUw==",
+      "dev": true
     },
     "@webassemblyjs/ast": {
       "version": "1.9.0",
@@ -24561,7 +24551,8 @@
     "regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
+      "dev": true
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -29656,7 +29647,8 @@
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
-      "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
+      "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
+      "dev": true
     },
     "vue-intersect": {
       "version": "1.1.6",

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.720",
+  "version": "3.2.722",
   "private": false,
   "license": "MIT",
   "repository": {
@@ -24,11 +24,9 @@
     "release": "release-it"
   },
   "peerDependencies": {
-    "vue": "^2.6.11",
-    "@asd20/notifications-ui": "^0.8.20"
+    "vue": "^2.6.11"
   },
   "dependencies": {
-    "@asd20/notifications-ui": "^0.11.3",
     "axios": "^0.19.2",
     "basicscroll": "^3.0.2",
     "countup.js": "^2.0.0",

package/src/components/molecules/Asd20Notification/index.vue

@@ -15,10 +15,10 @@
         <span v-if="description" v-html="description"> </span>
         <a
           v-if="detailLinkUrl"
-          :tabindex="focusDisabled ? '-1' : undefined" 
+          :tabindex="focusDisabled ? '-1' : undefined"
           :href="detailLinkUrl"
         >
-        {{ detailLinkLabel || detailLinkUrl }}
+          {{ detailLinkLabel || detailLinkUrl }}
         </a>
       </div>
 
@@ -78,10 +78,14 @@ export default {
     classes() {
       let classes = {
         'asd20-notification': true,
-        'asd20-notification--banner': this.notificationStyle.toLowerCase() === 'banner',
-        'asd20-notification--floating': this.notificationStyle.toLowerCase() === 'floating',
-        'asd20-notification--inline': this.notificationStyle.toLowerCase() === 'inline',
-        'asd20-notification--status': this.notificationStyle.toLowerCase() === 'status',
+        'asd20-notification--banner':
+          this.notificationStyle.toLowerCase() === 'banner',
+        'asd20-notification--floating':
+          this.notificationStyle.toLowerCase() === 'floating',
+        'asd20-notification--inline':
+          this.notificationStyle.toLowerCase() === 'inline',
+        'asd20-notification--status':
+          this.notificationStyle.toLowerCase() === 'status',
         'asd20-notification--dismissible': this.dismissible,
       }
 
@@ -115,13 +119,8 @@ export default {
 </script>
 
 <style lang="scss">
-// @import '../../../design/_variables.scss';
-// @import '../../../design/_mixins.scss';
-// @import '../../../design/_typography.scss';
-// @import '../../../design/_template.scss';
-// @import '../../../design/_print.scss';
-// @import '../../../design/tokens.css';
-
+@import '../../../design/_variables.scss';
+@import '../../../design/_mixins.scss';
 
 .asd20-notification {
   position: relative;
@@ -178,7 +177,6 @@ export default {
     .asd20-notification__cta {
       color: #da2e0b;
       border-color: #da2e0b;
-
     }
     .asd20-icon {
       --line-color: #da2e0b;
@@ -215,9 +213,11 @@ export default {
   &--status {
     .asd20-notification__title,
     .asd20-notification__cta {
-      color: white;
+      color: black;
     }
     .asd20-icon {
+      height: 24px;
+      width: 24px;
       --line-color: black;
       --fill-color: white;
     }
@@ -225,6 +225,10 @@ export default {
 
   &.asd20-notification--floating {
     box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.125);
+    .asd20-icon {
+      --line-color: #23464e;
+      --fill-color: #70b4c2;
+    }
     .asd20-notification__content {
       padding: 0;
     }
@@ -254,12 +258,17 @@ export default {
       flex-wrap: nowrap;
       align-items: center;
       justify-content: center;
+      border-left: none;
+      border-top: none;
+      margin: 0;
+      padding-top: 0;
     }
     .asd20-icon {
-      --line-color: white;
-      --fill-color: white;
-      .fill {
-        opacity: 0.25;
+      height: 24px;
+      width: 24px;
+      .asd20-icon {
+        --line-color: #23464e;
+        --fill-color: #70b4c2;
       }
     }
     .asd20-notification__title {
@@ -271,7 +280,7 @@ export default {
     }
     .asd20-notification__description {
       font-size: 0.875rem;
-      color: white;
+      color: black;
       margin: 0 0 0 0.25rem;
       white-space: nowrap;
     }
@@ -288,6 +297,10 @@ export default {
 
   &.asd20-notification--inline {
     box-shadow: 0 0 0 5px #70b4c2;
+    .asd20-icon {
+      --line-color: #23464e;
+      --fill-color: #70b4c2;
+    }
   }
 
   &.asd20-notification--banner {
@@ -403,7 +416,6 @@ export default {
   }
 }
 
-
 @media (min-width: 1024px) {
   .asd20-notification {
     &__title {

package/src/components/organisms/Asd20NotificationGroup/index.vue

@@ -259,12 +259,8 @@ export default {
 </script>
 
 <style lang="scss">
-// @import '../../../design/_variables.scss';
-// @import '../../../design/_mixins.scss';
-// @import '../../../design/_typography.scss';
-// @import '../../../design/_template.scss';
-// @import '../../../design/_print.scss';
-// @import '../../../design/tokens.css';
+@import '../../../design/_variables.scss';
+@import '../../../design/_mixins.scss';
 
 .notification-group {
   position: relative;

package/src/components/organisms/Asd20VideoHeader/index.vue

@@ -99,7 +99,7 @@ export default {
     object-fit: cover;
   }
   & ::v-deep .notification-group--status .notifications {
-    padding: 0.375em;
+    padding: 0.1875em;
     border-radius: 3rem;
     background: rgba(255, 255, 255, 0.95);
   }
@@ -119,6 +119,8 @@ export default {
       .asd20-notification {
         margin: 0;
         padding: 0 !important;
+        align-items: center;
+        flex-direction: row;
       }
     }
 

package/src/components/templates/Asd20DistrictVideoTemplate/index.vue

@@ -98,7 +98,7 @@
         <slot />
       </asd20-video-header-content>
     </asd20-video-header>
-    <asd20-secondary-header v-if="messages.length > 1" :messages="messages"/>
+    <asd20-secondary-header v-if="messages.length > 1" :messages="messages" />
 
     <asd20-feeds-section
       :announcements="announcements"
@@ -253,8 +253,7 @@ export default {
     }
     .weather-status-and-translation-container {
       display: flex;
-      flex-direction: row;
-      align-items: center;
+      flex-direction: column;
       margin: space(0.25) 0;
       justify-content: flex-end;
     }
@@ -287,6 +286,7 @@ export default {
     .weather-link {
       text-decoration: none;
       border-radius: 3rem;
+      margin-bottom: 0.5rem;
     }
     .asd20-organization-picker {
       display: none;
@@ -318,6 +318,16 @@ export default {
 @media (min-width: 768px) {
   .asd20-district-video-template {
     .asd20-video-header {
+      .weather-status-and-translation-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin: space(0.25) 0;
+        justify-content: flex-end;
+      }
+      .weather-link {
+        margin-bottom: 0;
+      }
       .asd20-language-translation {
         position: relative;
         top: 0;