@asd20/ui 3.2.378 → 3.2.381

package/package.json

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

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

@@ -19,6 +19,9 @@
         target="_blank"
       >
         <img :src="image.thumbnailUrl" :alt="image.alt" />
+        <p v-if="image.credits" class="grid-overlay">
+          {{ truncatedDescription(image.credits) }}
+        </p>
       </a>
     </asd20-grid>
 
@@ -38,6 +41,7 @@
           :key="index"
         >
           <img :src="image.url" :alt="image.alt" />
+          <p v-if="image.credits" class="text-overlay">{{ image.credits }}</p>
         </asd20-swipe-item>
       </asd20-swipe>
     </transition>
@@ -50,6 +54,8 @@ import Asd20Swipe from '../../../components/molecules/Asd20Swipe'
 import Asd20SwipeItem from '../../../components/atoms/Asd20SwipeItem'
 import Asd20Icon from '../../../components/atoms/Asd20Icon'
 
+import truncate from 'lodash-es/truncate'
+
 export default {
   name: 'Asd20ImageGallery',
 
@@ -82,6 +88,7 @@ export default {
             ).url,
             url: (i.files.find(f => f.name === 'full') || i.files[0]).url,
             alt: i.metadata.alt,
+            credits: i.metadata.credits,
             // isCover: i.isCover,
           }))
       )
@@ -93,6 +100,9 @@ export default {
       this.selectedIndex = index + 1
       this.showSlideshow = true
     },
+    truncatedDescription(description) {
+      return truncate(description, { length: 50, separator: /,? +/ })
+    },
   },
 }
 </script>
@@ -156,6 +166,15 @@ export default {
     object-fit: cover;
     object-position: center;
   }
+  .grid-overlay {
+    position: absolute;
+    color: #fff;
+    background: rgba(50, 50, 50, 0.5);
+    bottom: 0;
+    padding: space(0.25);
+    font-size: 12px !important;
+    width: 100%;
+  }
 }
 .image-slideshow {
   position: fixed;
@@ -181,10 +200,26 @@ export default {
   opacity: 0;
   transform: scale(0);
 }
+.asd20-swipe-item {
+  .text-overlay {
+    position: absolute;
+    display: block;
+    bottom: space(2);
+    color: #fff;
+    background: rgba(50, 50, 50, 0.7);
+    padding: space(0.5);
+    max-width: 80vw;
+    text-align: center;
+  }
+}
 
 @media (min-width: 1024px) {
   .asd20-image-gallery {
-    // padding: space(0) space(3) space(1) space(3);
+    .image-grid {
+      .grid-overlay {
+        font-size: 14px !important;
+      }
+    }
   }
 }
 </style>

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

@@ -172,12 +172,16 @@
         <asd20-list
           v-if="organization.awardsHonors.length > 0"
           :items="
-            organization.awardsHonors.map(a => ({
-              label: a,
-              alignTop: true,
-              checked: true,
-              condensed: true,
-            }))
+            organization.awardsHonors
+              .map(a => ({
+                label: a,
+                alignTop: true,
+                checked: true,
+                condensed: true,
+              }))
+              .sort((a, b) =>
+                a.label > b.label ? 1 : b.label > a.label ? -1 : 0
+              )
           "
           class="asd20-school-details__awards-honors"
           icon="award"
@@ -187,12 +191,16 @@
         <asd20-list
           v-if="organization.uniqueOfferings.length > 0"
           :items="
-            organization.uniqueOfferings.map(u => ({
-              label: u,
-              alignTop: true,
-              checked: true,
-              condensed: true,
-            }))
+            organization.uniqueOfferings
+              .map(u => ({
+                label: u,
+                alignTop: true,
+                checked: true,
+                condensed: true,
+              }))
+              .sort((a, b) =>
+                a.label > b.label ? 1 : b.label > a.label ? -1 : 0
+              )
           "
           class="asd20-school-details__unique-offerings"
           headline="Unique Offerings"
@@ -374,7 +382,6 @@ export default {
             .map(oc => oc.category.title)
             .includes('Academics')
         )
-
         .map(a => ({
           label: a.offering.title,
           description: a.offering.description,
@@ -383,13 +390,13 @@ export default {
           condensed: true,
           checked: true,
         }))
+        .sort((a, b) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0))
     },
     artsListItems() {
       return this.organization.offerings
         .filter(o =>
           o.offering.categories.map(oc => oc.category.title).includes('Arts')
         )
-
         .map(a => ({
           label: a.offering.title,
           alignTop: true,
@@ -397,6 +404,7 @@ export default {
           condensed: true,
           checked: true,
         }))
+        .sort((a, b) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0))
     },
     athleticsListItems() {
       return this.organization.offerings
@@ -412,6 +420,7 @@ export default {
           condensed: true,
           checked: true,
         }))
+        .sort((a, b) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0))
     },
   },
 }

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

@@ -58,7 +58,8 @@
                     }
                   ],
                   "metadata": {
-                    "alt": "This is ALT text."
+                    "alt": "This is ALT text.",
+                    "credits": "John Smith competes in the 100m backstroke. He's really a great swimmer. No, really. And this picture demonstrates just what a great swimmer he is."
                   }
                 },
                 {
@@ -74,7 +75,8 @@
                     }
                   ],
                   "metadata": {
-                    "alt": "This is ALT text."
+                    "alt": "This is ALT text.",
+                    "credits": "Jane Doe competes in the 100m freestyle."
                   }
                 },
                 {