@asd20/ui 3.2.705 → 3.2.707

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.705",
+  "version": "3.2.707",
   "private": false,
   "license": "MIT",
   "repository": {

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

@@ -1,5 +1,5 @@
 <template>
-  <footer id="page-footer" role="complementary">
+  <footer id="page-footer">
     <div class="logoContainer">
       <asd20-logo
         v-if="organization.title !== 'Academy District 20'"

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

@@ -14,6 +14,7 @@
       class="asd20-school-homepage-video-header__image"
     >
       <video
+        v-if="videoUrl"
         class="background-video"
         aria-hidden="true"
         autoplay
@@ -25,7 +26,11 @@
       >
         <source :src="videoUrl" type="video/mp4" />
       </video>
-      <img class="background-image" :src="imageUrl" :alt="imageCaption" />
+      <img
+        :class="videoUrl ? 'hide-background-image' : 'background-image'"
+        :src="imageUrl"
+        :alt="imageCaption"
+      />
       <div id="main" class="asd20-school-homepage-video-header__content">
         <h1 v-if="heading" v-html="heading" />
         <div v-if="lead" class="asd20-school-homepage-video-header__lead">
@@ -371,6 +376,9 @@ $max: 4rem;
       display: block;
     }
     .background-image {
+      display: block;
+    }
+    .hide-background-image {
       display: none;
     }
 
@@ -518,7 +526,7 @@ $max: 4rem;
     .background-video {
       display: block;
     }
-    .background-image {
+    .hide-background-image {
       display: none;
     }
 

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

@@ -147,9 +147,9 @@ export default {
     //   width: 80%;
     // }
     &::v-deep .message-image {
-      display: none !important;
-      // margin-top: 0;
-      // padding: 0 0 0 space(1);
+      // display: none !important;
+      margin-top: 0;
+      padding: 0 0 0 space(1);
     }
     &::v-deep .asd20-messaging__content {
       order: 1;

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

@@ -10,6 +10,7 @@
     </div>
 
     <video
+      v-if="videoUrl"
       class="background-video"
       aria-hidden="true"
       autoplay
@@ -22,7 +23,11 @@
       <source :src="videoUrl" type="video/mp4" />
     </video>
 
-    <img class="background-image" :src="imageUrl" :alt="imageCaption" />
+    <img
+      :class="videoUrl ? 'hide-background-image' : 'background-image'"
+      :src="imageUrl"
+      :alt="imageCaption"
+    />
     <!-- <div class="scroll-down-indicator"></div> -->
     <slot />
   </header>
@@ -193,10 +198,10 @@ export default {
 
 @media (min-width: 768px) {
   .asd20-video-header {
-    .background-image {
-      height: 80vh;
-      max-height: 400px;
-    }
+    // .background-image {
+    //   height: 80vh;
+    //   max-height: 400px;
+    // }
     &__top {
       position: absolute;
       padding: space(0.5) space(0);
@@ -229,6 +234,13 @@ export default {
       display: block;
     }
     .background-image {
+      display: block;
+      z-index: -1;
+      width: 100%;
+      height: 100vh;
+      object-fit: cover;
+    }
+    .hide-background-image {
       display: none;
     }
 

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

@@ -153,6 +153,7 @@ export default {
         margin-left: space(2);
         .asd20-messaging__content {
           margin: 0;
+          animation: slide_left 2s ease-in-out 0.5s both;
         }
         .asd20-messaging__heading {
           @include fluid-type($base-font-size * 1.5, $base-font-size * 2);
@@ -165,9 +166,10 @@ export default {
         display: block;
         position: absolute;
         width: 75%;
+        top: 0;
         bottom: space(-0.74);
-        left: space(1.25);
-        height: 60%;
+        left: 1.5rem;
+        height: 100%;
         right: 0;
         z-index: -1;
         // background: var(--color__accent);
@@ -185,9 +187,9 @@ export default {
         //   rgba(255, 255, 255, 0) 90%,
         //   rgba(0, 0, 0, 0) 100%
         // );
-        border-left: 20px solid var(--website-homepage-header__accent);
-        border-bottom: 20px solid var(--website-homepage-header__accent);
-        animation: slide_down 1s ease-in-out 0.5s both;
+        border-left: 30px solid var(--website-homepage-header__accent);
+        // border-bottom: 20px solid var(--website-homepage-header__accent);
+        animation: slide_left 2.5s ease-in-out 0.5s both;
       }
     }
     &::v-deep .asd20-messaging__button-group {

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

@@ -1,5 +1,5 @@
 <template>
-  <section class="asd20-widgets-section" role="complementary">
+  <section class="asd20-widgets-section">
     <slot name="before" />
     <asd20-link-list
       v-if="relatedLinks.length > 5"

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

@@ -307,7 +307,7 @@ export default {
 @keyframes slide_left {
   from {
     opacity: 0;
-    margin-left: 100px;
+    margin-left: 150px;
   }
   to {
     opacity: 1;

package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.stories.js

@@ -27,7 +27,7 @@ const wrapper = {
         floating: [],
         status: [],
       }
-      return boolean('Show Notifications', false)
+      return boolean('Show Notifications', true)
         ? notifications || empty
         : empty
     },

package/src/data/page-queries/video-page-query-result.json

@@ -156,7 +156,8 @@
                         ],
                         "isCover": true,
                         "metadata": {
-                            "alt": ""
+                            "alt": "",
+                            "credits": "Photo Credit: Krystal Story"
                         }
                     }],
                     "videos": [{