@asd20/ui 3.2.694 → 3.2.695

package/package.json

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

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

@@ -85,10 +85,24 @@
             </a>
           </div>
         </div>
+        <span
+          v-if="imageCredits"
+          class="image-credits-full"
+          aria-label="additional image info"
+        >
+          {{ truncatedDescription(imageCredits) }}
+        </span>
       </div>
 
       <div v-if="imageUrl && !$slots.aside" class="asd20-page-header__image">
         <img :src="imageUrl" :alt="imageCaption" />
+        <span
+          v-if="imageCredits"
+          class="image-credits"
+          aria-label="additional image info"
+        >
+          {{ truncatedDescription(imageCredits) }}
+        </span>
       </div>
     </div>
 
@@ -148,6 +162,8 @@ import Asd20Share from '../../molecules/Asd20Share'
 import Asd20FormattedDate from '../../atoms/Asd20FormattedDate'
 import Asd20TagGroup from '../../organisms/Asd20TagGroup'
 
+import truncate from 'lodash-es/truncate'
+
 export default {
   name: 'Asd20ImageHeader',
   components: {
@@ -168,6 +184,7 @@ export default {
     imageUrl: { type: String, default: '' },
     headerImageUrl: { type: String, default: '' },
     imageCaption: { type: String, default: '' },
+    imageCredits: { type: String, default: '' },
     fullscreen: { type: Boolean, default: false },
     detailLink: { type: String, default: '' },
     detailLinkLabel: { type: String, default: '' },
@@ -223,6 +240,9 @@ export default {
       return document.referrer
       // window.history.back()
     },
+    truncatedDescription(description) {
+      return truncate(description, { length: 60, separator: /,? +/ })
+    },
   },
 }
 </script>
@@ -362,6 +382,9 @@ export default {
   &__title-content {
     // max-width: 100%;
   }
+  .image-credits-full {
+    display: none;
+  }
 
   .add-fade {
     &::before {
@@ -462,11 +485,23 @@ export default {
   }
 
   &__image {
+    position: relative;
     img {
       width: 100%;
       // max-height: 600px;
       border-top: 10px solid var(--color__accent);
     }
+    .image-credits {
+      position: absolute;
+      text-align: right;
+      color: #fff;
+      background: rgba(50, 50, 50, 0.5);
+      top: 0.625rem;
+      bottom: inherit;
+      right: 0;
+      padding: space(0.25);
+      font-size: 0.8rem !important;
+    }
   }
   &--has-cta {
     .asd20-page-header__content {
@@ -481,10 +516,22 @@ export default {
       position: relative;
       min-height: 300px;
     }
+    .image-credits-full {
+      display: block;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      padding: space(0.25);
+      color: white;
+      background: rgba(50, 50, 50, 0.5);
+      font-family: var(--website-typography__font-family-headlines);
+      font-size: 0.8rem !important;
+    }
     .new-header {
       background: var(--website-header__background-color) var(--imageBackground)
         center / cover no-repeat;
     }
+
     &__content {
       position: relative;
       padding: space(1) space(2) space(1) space(2);

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

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

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

@@ -93,6 +93,9 @@
 
       <div v-if="imageUrl && !$slots.aside" class="asd20-page-header__image">
         <img :src="imageUrl" :alt="imageCaption" />
+        <span v-if="imageCredits" class="image-credits">
+          {{ truncatedDescription(imageCredits) }}
+        </span>
       </div>
     </div>
 
@@ -152,6 +155,8 @@ import Asd20Share from '../../molecules/Asd20Share'
 import Asd20FormattedDate from '../../atoms/Asd20FormattedDate'
 import Asd20TagGroup from '../../organisms/Asd20TagGroup'
 
+import truncate from 'lodash-es/truncate'
+
 export default {
   name: 'Asd20PageHeader',
   components: {
@@ -172,6 +177,7 @@ export default {
     imageUrl: { type: String, default: '' },
     headerImageUrl: { type: String, default: '' },
     imageCaption: { type: String, default: '' },
+    imageCredits: { type: String, default: '' },
     fullscreen: { type: Boolean, default: false },
     detailLink: { type: String, default: '' },
     detailLinkLabel: { type: String, default: '' },
@@ -254,6 +260,9 @@ export default {
       // const url = window.location.href
       // return url.slice(0, url.lastIndexOf('/'))
     },
+    truncatedDescription(description) {
+      return truncate(description, { length: 60, separator: /,? +/ })
+    },
   },
 }
 </script>
@@ -511,12 +520,24 @@ export default {
   }
 
   &__image {
+    position: relative;
     img {
       width: 100%;
       // max-width: 100%;
       // max-height: 600px;
       border-top: 10px solid var(--color__accent);
     }
+    .image-credits {
+      position: absolute;
+      text-align: right;
+      color: #fff;
+      background: rgba(50, 50, 50, 0.5);
+      top: 0.625rem;
+      right: 0;
+      padding: space(0.25);
+      font-family: var(--website-typography__font-family-headlines);
+      font-size: 0.8rem !important;
+    }
   }
   &--has-cta {
     .asd20-page-header__content {
@@ -524,6 +545,16 @@ export default {
     }
   }
 }
+@media (min-width: 667px) {
+  .asd20-page-header {
+    &__image {
+      .image-credits {
+        top: inherit;
+        bottom: 0;
+      }
+    }
+  }
+}
 
 @media (min-width: 1024px) {
   .asd20-page-header {

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

@@ -24,6 +24,9 @@
       class="asd20-school-homepage-header__image"
     >
       <img :src="imageUrl" :alt="imageCaption" />
+      <span v-if="imageCredits" class="image-credits">
+        {{ truncatedDescription(imageCredits) }}
+      </span>
     </div>
 
     <aside class="asd20-school-homepage-header__aside" v-if="$slots.aside">
@@ -55,6 +58,8 @@
 import scrollTrack from '../../../directives/scroll-track'
 import Asd20Button from '../../atoms/Asd20Button'
 
+import truncate from 'lodash-es/truncate'
+
 export default {
   name: 'Asd20SchoolHomepageHeader',
   components: { Asd20Button },
@@ -65,6 +70,7 @@ export default {
     callsToAction: { type: Array, default: () => [] },
     imageUrl: { type: String, default: '' },
     imageCaption: { type: String, default: '' },
+    imageCredits: { type: String, default: '' },
     fullscreen: { type: Boolean, default: false },
     detailLink: { type: String, default: '' },
     detailLinkLabel: { type: String, default: '' },
@@ -89,6 +95,11 @@ export default {
       )
     },
   },
+  methods: {
+    truncatedDescription(description) {
+      return truncate(description, { length: 60, separator: /,? +/ })
+    },
+  },
 }
 </script>
 
@@ -241,6 +252,7 @@ export default {
     }
   }
   &__image {
+    position: relative;
     img {
       display: block;
       width: 100%;
@@ -248,6 +260,17 @@ export default {
       // object-fit: cover;
       object-position: center;
     }
+    .image-credits {
+      position: absolute;
+      text-align: right;
+      color: #fff;
+      background: rgba(50, 50, 50, 0.5);
+      bottom: 0;
+      right: 0;
+      padding: space(0.25);
+      font-family: var(--website-typography__font-family-headlines);
+      font-size: 0.8rem !important;
+    }
   }
   // Hide images on mobile
   // &__image {
@@ -274,6 +297,12 @@ $max: 4rem;
       // padding: space(0.25) space(1);
       align-items: center !important;
     }
+    &__image {
+      .image-credits {
+        top: inherit;
+        bottom: 0;
+      }
+    }
   }
 }
 

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

@@ -1,5 +1,5 @@
 <template>
-  <section class="asd20-widgets-section">
+  <section class="asd20-widgets-section" role="complementary">
     <slot name="before" />
 
     <asd20-department-contact-card

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

@@ -112,14 +112,14 @@
             align-top
             icon="committee"
           />
-          <h4>
+          <h3>
             <b>
               {{ organization.administrators[0].firstName }}
               {{ organization.administrators[0].lastName }}
               <br />
               <small>Principal</small>
             </b>
-          </h4>
+          </h3>
 
           <asd20-list>
             <asd20-list-item
@@ -529,6 +529,9 @@ export default {
       color: asd20-swatch('primary');
       font-size: 1.25rem;
     }
+    h3 {
+      font-size: 1.15rem;
+    }
   }
   &__secondary-content {
     padding: space(1);

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

@@ -195,7 +195,12 @@ export default {
         heading: this.firstMessage.heading || '',
         lead: this.firstMessage.shortDescription || '',
         imageUrl: image ? image.url : '',
-        imageCaption: image ? image.alt : '',
+        imageCaption: this.firstMessage.images
+          ? this.firstMessage.images[0].metadata.alt
+          : '',
+        imageCredits: this.firstMessage.images
+          ? this.firstMessage.images[0].metadata.credits
+          : '',
         callsToAction: this.firstMessage.callsToAction
           ? this.firstMessage.callsToAction
           : '',

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

@@ -66,6 +66,14 @@
       </client-only>
     </template>
 
+    <!-- Page Content -->
+    <asd20-page-content
+      class="intro-message"
+      :primary-messages="primaryMessage"
+      omit-detail-links
+      omit-calls-to-action
+    />
+
     <!-- Feed Section -->
     <template>
       <asd20-feeds-section
@@ -82,12 +90,6 @@
     </template>
 
     <!-- Page Content -->
-    <asd20-page-content
-      class="intro-message"
-      :primary-messages="primaryMessage"
-      omit-detail-links
-      omit-calls-to-action
-    />
     <asd20-page-content
       :class="wayFindingPrimaryMessages.length > 3 ? 'limit-message-width' : ''"
       :primary-messages="wayFindingPrimaryMessages"

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

@@ -66,6 +66,14 @@
       </client-only>
     </template>
 
+    <!-- Page Content -->
+    <asd20-page-content
+      class="intro-message"
+      :primary-messages="primaryMessage"
+      omit-detail-links
+      omit-calls-to-action
+    />
+
     <!-- Feeds Section -->
     <template>
       <asd20-feeds-section
@@ -82,12 +90,6 @@
     </template>
 
     <!-- Page Content -->
-    <asd20-page-content
-      class="intro-message"
-      :primary-messages="primaryMessage"
-      omit-detail-links
-      omit-calls-to-action
-    />
     <asd20-page-content
       :primary-messages="wayFindingPrimaryMessages"
       :secondary-messages="secondaryMessages"

package/src/data/page-queries/school-home-page-query-result.json

@@ -114,7 +114,8 @@
             }],
             "isCover": true,
             "metadata": {
-              "alt": ""
+              "alt": "An RHS student cheers at her graduation ceremony.",
+              "credits": "Photo Credit: Allison Cortez"
             }
           }],
           "videos": [{

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

@@ -397,7 +397,8 @@
             }],
             "isCover": true,
             "metadata": {
-              "alt": "The Kadet Coffee space."
+              "alt": "The Kadet Coffee space.",
+              "credits": "Photo Credit: Paul Hollendorfer"
             }
           }, {
             "files": [{

package/src/mixins/pageTemplateMixin.js

@@ -192,6 +192,7 @@ export default {
       let imageUrl = null
       let headerImageUrl = null
       let imageCaption = null
+      let imageCredits = null
       let videoUrl = firstVideo ? firstVideo.watchUrl : null
 
       // if (coverImage) {
@@ -213,6 +214,9 @@ export default {
           imageCaption = coverImage.metadata
             ? coverImage.metadata.alt
             : coverImage.alt || ''
+          imageCredits = coverImage.metadata
+            ? coverImage.metadata.credits
+            : coverImage.credits || ''
         }
       }
       // else if (firstVideo) {
@@ -227,6 +231,7 @@ export default {
         lead: this.firstMessage.shortDescription || '',
         imageUrl,
         imageCaption,
+        imageCredits,
         headerImageUrl,
         videoUrl,
         callsToAction: this.firstMessage.callsToAction,