@asd20/ui 3.4.5 → 3.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui",
-  "version": "3.4.5",
+  "version": "3.5.1",
   "private": false,
   "license": "MIT",
   "sideEffects": [

package/src/components/atoms/Asd20DistrictLogo/index.vue

@@ -21,7 +21,7 @@
     </svg>
     <div v-if="tagline" class="asd20-district-logo__tagline">
       <hr />
-      <p><i>We educate and inspire students to thrive.</i></p>
+      <p><i>Educate. Inspire. Thrive.</i></p>
     </div>
   </a>
 </template>
@@ -46,10 +46,10 @@ export default {
   // align-items: center;
   justify-content: center;
   min-width: 10rem;
+  max-width: 100%;
   svg {
-    max-width: space(10);
-    height: 100%;
-    width: auto;
+    height: auto;
+    width: 100%;
     fill: var(--fill-one, #0f2c6c);
     .district {
       fill: var(--fill-two, rgb(136, 137, 138));
@@ -57,7 +57,7 @@ export default {
   }
   &__tagline {
     color: #fff;
-    text-align: left;
+    text-align: center;
     p {
       font-family: var(--website-typography__font-family-headlines);
     }
@@ -69,8 +69,8 @@ export default {
   }
 }
 @media screen and (min-width: 768px) {
-  .asd20-district-logo svg {
-    max-width: space(12);
+  .asd20-district-logo {
+    max-width: 20rem;
   }
   .asd20-district-logo__tagline {
     text-align: center;
@@ -78,8 +78,8 @@ export default {
 }
 
 @media screen and (min-width: 1024px) {
-  .asd20-district-logo svg {
-    max-width: space(20);
+  .asd20-district-logo {
+    max-width: 25rem;
   }
 }
 </style>

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

@@ -5,101 +5,162 @@
       class="asd20-card__content"
       :class="emphasizedDate ? 'asd20-card__event-content' : ''"
     >
-      <div class="asd20-card__header">
-        <div class="asd20-card__emphasized-date" v-if="emphasizedDate">
-          <div class="top">{{ weekday }}</div>
-          <div class="middle">{{ day }}</div>
-          <div class="bottom">{{ month }}</div>
-          <small>{{ year }}</small>
-        </div>
-        <component :is="headerTag" v-if="title" class="asd20-card__title">
-          <span v-html="title"></span>
-          <div
-            class="asd20-card__subtitle"
-            v-if="subtitle"
-            v-html="subtitle"
-          ></div>
-        </component>
-      </div>
-
-      <div
-        class="asd20-card__date"
-        v-if="!emphasizedDate && (date || (modifiedDate && showModifiedDate))"
-      >
-        <asd20-icon name="calendar" size="sm" />
-
-        <div class="asd20-card__date-lines">
-          <div class="asd20-card__date-line" v-if="date">
-            <span class="label">Published:&nbsp;</span>
-            <time>{{ date }}</time>
-          </div>
-
-          <div
-            class="asd20-card__date-line"
-            v-if="modifiedDate && showModifiedDate"
+      <!-- compact date-left layout -->
+      <template v-if="dateLeft">
+        <div class="asd20-card__date-left">
+          <time
+            class="asd20-card__date-badge"
+            :aria-label="fullDateLabel"
+            :datetime="year && month && day ? `${year}-${month}-${day}` : null"
           >
-            <span class="label">Updated:&nbsp;</span>
-            <time>{{ modifiedDate }}</time>
+            <span class="day">{{ day }}</span>
+            <span class="mon">{{ monthAbbr }}</span>
+          </time>
+
+          <div class="asd20-card__main">
+            <component :is="headerTag" v-if="title" class="asd20-card__title">
+              <span v-text="dateLeftTitle"></span>
+            </component>
+
+            <p v-if="time" class="asd20-card__time asd20-card__time--compact">
+              <asd20-icon name="hours-alt" size="sm" />
+              <span v-html="time"></span>
+            </p>
           </div>
+
+          <!-- invisible overlay link so the whole card is clickable -->
+          <a
+            class="asd20-card__link"
+            v-if="link"
+            :href="link"
+            :title="title"
+            :tabindex="disableFocus ? -1 : 0"
+          ></a>
         </div>
-      </div>
-      <p v-if="time" class="asd20-card__time">
-        <asd20-icon name="hours-alt" size="sm" />
-        <span v-html="time"></span>
-      </p>
-
-      <p v-if="location" class="asd20-card__location">
-        <asd20-icon name="map" size="sm" />
-        <span v-html="location"></span>
-      </p>
-
-      <p class="asd20-card__description">
-        <span
-          v-if="!expandedDescription && truncatedDescription"
-          v-html="truncatedDescription"
-        ></span>
-        <span
-          v-if="expandedDescription && description"
-          v-html="description"
-        ></span>
-        <a
-          class="asd20-card__link"
-          v-if="link"
-          :href="link ? link : ''"
-          :title="title"
-          v-html="linkLabel"
-          :tabindex="disableFocus ? -1 : 0"
-        ></a>
-      </p>
-      <div v-if="showMeta" class="asd20-card__meta">
         <div v-if="categories" class="asd20-card__categories">
           <asd20-tag
             v-for="category in categories"
             :key="category"
             :label="category"
             transparent
-          ></asd20-tag>
+          />
         </div>
         <div
-          class="asd20-card__indicators"
-          v-if="hasFile || hasGallery || hasVideo || sourceOrg"
+          v-if="websiteLogo"
+          class="asd20-card__date-left-logo"
+          aria-hidden="true"
         >
-          <asd20-icon v-if="hasVideo" name="video" size="sm" />
-          <asd20-icon v-if="hasGallery" name="gallery" size="sm" />
-          <asd20-icon v-if="hasFile" name="file" size="sm" />
-          <img
-            v-if="sourceOrg"
-            width="24px"
-            :src="websiteLogo"
-            :alt="`${sourceOrg} logo`"
-          />
+          <img :src="websiteLogo" alt="" />
+        </div>
+      </template>
+
+      <!-- existing layout -->
+      <template v-else>
+        <div class="asd20-card__header">
+          <div class="asd20-card__emphasized-date" v-if="emphasizedDate">
+            <div class="top">{{ weekday }}</div>
+            <div class="middle">{{ day }}</div>
+            <div class="bottom">{{ month }}</div>
+            <small>{{ year }}</small>
+          </div>
+          <component :is="headerTag" v-if="title" class="asd20-card__title">
+            <span v-html="title"></span>
+            <div
+              class="asd20-card__subtitle"
+              v-if="subtitle"
+              v-html="subtitle"
+            ></div>
+          </component>
+        </div>
+
+        <div
+          class="asd20-card__date"
+          v-if="
+            !emphasizedDate &&
+            (date || (modifiedDate && showModifiedDate)) &&
+            cardType !== 'Feature'
+          "
+        >
+          <asd20-icon name="calendar" size="sm" />
+          <div class="asd20-card__date-lines">
+            <div class="asd20-card__date-line" v-if="date && !showModifiedDate">
+              <span class="label">Published:&nbsp;</span>
+              <time>{{ date }}</time>
+            </div>
+            <div
+              class="asd20-card__date-line"
+              v-if="modifiedDate && showModifiedDate"
+            >
+              <span class="label">Updated:&nbsp;</span>
+              <time>{{ modifiedDate }}</time>
+            </div>
+          </div>
+        </div>
+
+        <p v-if="time" class="asd20-card__time">
+          <asd20-icon name="hours-alt" size="sm" />
+          <span v-html="time"></span>
+        </p>
+
+        <p v-if="location" class="asd20-card__location">
+          <asd20-icon name="map" size="sm" />
+          <span v-html="location"></span>
+        </p>
+
+        <p class="asd20-card__description">
+          <span
+            v-if="!expandedDescription && truncatedDescription"
+            v-html="truncatedDescription"
+          ></span>
+          <span
+            v-if="expandedDescription && description"
+            v-html="description"
+          ></span>
+          <a
+            class="asd20-card__link"
+            v-if="link"
+            :href="link ? link : ''"
+            :title="title"
+            v-html="linkLabel"
+            :tabindex="disableFocus ? -1 : 0"
+          ></a>
+        </p>
+
+        <div v-if="showMeta" class="asd20-card__meta">
+          <div v-if="categories" class="asd20-card__categories">
+            <asd20-tag
+              v-for="category in categories"
+              :key="category"
+              :label="category"
+              transparent
+            />
+          </div>
+          <div
+            class="asd20-card__indicators"
+            v-if="hasFile || hasGallery || hasVideo || sourceOrg"
+          >
+            <asd20-icon v-if="hasVideo" name="video" size="sm" />
+            <asd20-icon v-if="hasGallery" name="gallery" size="sm" />
+            <asd20-icon v-if="hasFile" name="file" size="sm" />
+            <img
+              v-if="sourceOrg"
+              class="source-org"
+              width="24px"
+              :src="websiteLogo"
+              :alt="`${sourceOrg} logo`"
+            />
+          </div>
         </div>
-      </div>
-      <slot />
+
+        <slot />
+      </template>
     </component>
+
+    <!-- If you want the compact card to never show a cover image, CSS below will handle it -->
     <figure class="asd20-card__image" v-if="image && !noCoverImage">
       <img v-lazy="image" :key="image" :alt="alt || ''" />
     </figure>
+
     <asd20-icon
       v-if="pinned"
       class="asd20-card__pinned"
@@ -157,6 +218,8 @@ export default {
     noCoverImage: { type: Boolean, default: false },
     sourceOrg: { type: String, default: '' },
     websiteLogo: { type: String, default: '' },
+    dateLeft: { type: Boolean, default: false },
+    cardType: { type: String, default: '' },
   },
   computed: {
     truncatedDescription() {
@@ -180,6 +243,7 @@ export default {
         'asd20-card--emphasized-date': this.emphasizedDate,
         'asd20-card--expanded-header': this.expandedHeader,
         'asd20-card--expanded-description': this.expandedDescription,
+        'asd20-card--date-left': this.dateLeft,
       }
     },
     showMeta() {
@@ -201,6 +265,26 @@ export default {
       // console.log(publishDateTimePlusOne, modifiedDateTimeString)
       return modifiedDateTimeString > publishDateTimePlusOne ? true : false
     },
+    monthAbbr() {
+      return (this.month || '').slice(0, 3).toUpperCase()
+    },
+    fullDateLabel() {
+      // e.g., "Friday, Nov 8, 2025"
+      const parts = [this.weekday, this.monthAbbr, this.day, this.year].filter(
+        Boolean
+      )
+      return parts.join(' ')
+    },
+    dateLeftTitle() {
+      if (!this.title) return ''
+
+      // strip any HTML tags from the title
+      const plain = this.title.replace(/<[^>]*>/g, '').trim()
+
+      // limit to 50 characters, then add "..." if longer
+      if (plain.length <= 65) return plain
+      return plain.slice(0, 65) + '...'
+    },
   },
 }
 </script>
@@ -423,6 +507,115 @@ export default {
     }
   }
 
+  &--date-left {
+    min-height: 0 !important; // compact
+    position: relative; // allow absolute positioning inside
+    background: var(--website-card__background-color);
+
+    .asd20-card__content {
+      padding: space(0.75);
+      position: relative;
+      z-index: 2; // keep content above the logo
+    }
+
+    // hide large-only sections
+    .asd20-card__description,
+    .asd20-card__meta,
+    .asd20-card__subtitle,
+    .asd20-card__image {
+      display: none !important;
+    }
+
+    .asd20-card__date-left {
+      display: flex;
+      align-items: flex-start;
+      gap: space(0.75);
+      position: relative; // for overlay link
+    }
+
+    .asd20-card__date-badge {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      width: 4rem;
+      height: 4rem;
+      min-width: 4rem;
+      border-radius: 999px;
+      background: var(--website-card__reverse-background-color)
+        var(--website-card__reverse-background-style);
+      color: var(--website-card__reverse-foreground-color);
+      text-transform: uppercase;
+      font-family: var(--website-typography__font-family-headlines);
+      line-height: 1;
+
+      .day {
+        font-weight: 700;
+        font-size: 1.2rem;
+      }
+      .mon {
+        font-weight: 700;
+        font-size: 0.75rem;
+        letter-spacing: 0.04em;
+      }
+    }
+
+    .asd20-card__main {
+      display: flex;
+      flex-direction: column;
+      min-width: 0; // allow text truncation
+    }
+
+    .asd20-card__title {
+      margin: 0;
+      font-size: 1rem;
+      line-height: 1.2;
+      color: var(--website-page__title-color);
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .asd20-card__time--compact {
+      margin: space(0.25) 0 0 0;
+      font-size: 0.85rem;
+      font-weight: 600;
+      display: inline-flex;
+      align-items: center;
+      .asd20-icon {
+        margin-right: space(0.25);
+      }
+    }
+
+    // Logo in lower-right
+    .asd20-card__date-left-logo {
+      position: absolute;
+      right: -1.5rem;
+      bottom: -1rem;
+      opacity: 0.1;
+      pointer-events: none;
+      z-index: 1; // under text, above background
+
+      img {
+        display: block;
+        max-width: 128px;
+        max-height: 128px;
+        width: auto;
+        height: auto;
+      }
+    }
+    .asd20-card__categories {
+      position: absolute;
+      right: space(0.25);
+      bottom: space(0.25);
+    }
+
+    // keep the entire card clickable via existing overlay link style
+    .asd20-card__link::after {
+      border-radius: var(--website-shape__radius-m);
+    }
+  }
+
   &__categories {
     display: flex;
     flex-wrap: wrap;
@@ -433,11 +626,16 @@ export default {
   }
 
   &__indicators {
+    display: flex;
     margin-left: auto;
     align-self: flex-end;
     ::v-deep .asd20-icon g {
       --line-color: var(--website-card__reverse-foreground-color);
     }
+    .source-org {
+      border-radius: 24px;
+      background: #fff;
+    }
   }
 
   &__image {

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

@@ -146,7 +146,7 @@ export default {
       background-color: var(--color__secondary-t30);
       background-image: var(--website-texture__reverse);
       background-position-y: top;
-      background-size: 640px auto;
+      background-size: 1040px auto;
     }
     .name {
       font-size: 1.25rem;

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

@@ -2,12 +2,26 @@
   <section class="asd20-feeds-section" aria-label="Feeds section">
     <slot name="before" />
 
+    <intersect @enter="$emit('events-in-view')">
+      <Asd20SwiperFeed
+        v-if="eventsFeedProps && (!Array.isArray(events) || events.length > 0)"
+        class="eventsFeed"
+        v-bind="eventsFeedProps"
+        :loading="!Array.isArray(events)"
+        :cards="eventCards"
+        :slidesPerView="4"
+        @select="onSelectEventCard"
+        cardType="Event"
+      ></Asd20SwiperFeed>
+    </intersect>
+
     <intersect @enter="$emit('announcements-in-view')">
       <Asd20SwiperFeed
         v-if="
           announcementsFeedProps &&
-            (!Array.isArray(announcements) || announcements.length > 0)
+          (!Array.isArray(announcements) || announcements.length > 0)
         "
+        class="announcementsFeed"
         v-bind="announcementsFeedProps"
         :loading="!Array.isArray(announcements)"
         :cards="announcementCards"
@@ -17,23 +31,12 @@
       ></Asd20SwiperFeed>
     </intersect>
 
-    <intersect @enter="$emit('events-in-view')">
-      <Asd20SwiperFeed
-        v-if="eventsFeedProps && (!Array.isArray(events) || events.length > 0)"
-        v-bind="eventsFeedProps"
-        :loading="!Array.isArray(events)"
-        :cards="eventCards"
-        :slidesPerView="4"
-        @select="onSelectEventCard"
-        cardType="Event"
-      ></Asd20SwiperFeed>
-    </intersect>
-
     <intersect @enter="$emit('stories-in-view')">
       <Asd20SwiperFeed
         v-if="
           storiesFeedProps && (!Array.isArray(stories) || stories.length > 0)
         "
+        class="storiesFeed"
         v-bind="storiesFeedProps"
         :loading="!Array.isArray(stories)"
         :cards="storyCards"
@@ -156,7 +159,7 @@ export default {
     eventCards() {
       if (!Array.isArray(this.events)) return []
       return expandEvents(this.events)
-        .map(e => ({ ...mapEventToCard(e), event: e, zoom: true }))
+        .map(e => ({ ...mapEventToCard(e), event: e, zoom: true, websiteLogo: this.organization.logoImageUrl }))
         .slice(0, 9)
     },
   },
@@ -174,5 +177,40 @@ export default {
 @import '../../../design/_mixins.scss';
 
 .asd20-feeds-section {
+  .announcementsFeed,
+  .storiesFeed {
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 30%;
+      bottom: 30%;
+      background: var(--website-page__alternate-background-color);
+      border-radius: 0;
+      // border-radius: var(--website-shape__radius-m);
+      // border-top-left-radius: 0;
+      // border-bottom-left-radius: 0;
+      z-index: 0;
+    }
+  }
+  .eventsFeed {
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 40%;
+      bottom: 41%;
+      background: var(--website-page__alternate-background-color);
+      border-radius: 0;
+      // border-radius: var(--website-shape__radius-m);
+      // border-top-left-radius: 0;
+      // border-bottom-left-radius: 0;
+      z-index: 0;
+    }
+  }
 }
 </style>

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

@@ -10,6 +10,7 @@
         <div class="swiper-slide" v-for="(card, index) in cards" :key="index">
           <asd20-card
             v-bind="card"
+            :cardType="cardType"
             @click.native="$emit('select', card)"
             @keydown.tab.exact.native="nextCard"
             @keydown.tab.shift.native="prevCard"
@@ -152,21 +153,6 @@ export default {
     z-index: 1;
   }
 
-  &:after {
-    content: '';
-    display: block;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 30%;
-    bottom: 30%;
-    background: var(--website-page__alternate-background-color);
-    border-radius: 0;
-    // border-radius: var(--website-shape__radius-m);
-    // border-top-left-radius: 0;
-    // border-bottom-left-radius: 0;
-    z-index: 0;
-  }
 
   .swiper-title {
     display: flex;

package/src/data/asd20-organization.json

@@ -37,7 +37,7 @@
   "instagram": "",
   "instructionTypes": [],
   "location": {},
-  "logoImageUrl": "",
+  "logoImageUrl": "https://asd20websitestorage.blob.core.windows.net/asd20-images/school-logos/ASD20.png",
   "mascotImageUrl": "https://asd20websitestorage.blob.core.windows.net/asd20-images/school-logos/aees_logo.png",
   "mission": null,
   "modifiedByDisplayName": "",

package/src/data/events/district-events.json

@@ -80,7 +80,7 @@
       "id": null,
       "uid": "MDQwMDAwMDA4MjAwRTAwMDc0QzVCNzEwMUE4MkUwMDgwMDAwMDAwMERFRTE5NzcxNThBQ0RBMDEwMDAwMDAwMDAwMDAwMDAwMTAwMDAwMDBFOEVBMjc5NkM0MDJ3RjRGODFFNzY1QzQ0M0VGMDA0Mx==",
       "type": "event",
-      "summary": "Register for Summer School",
+      "summary": "Parent Academy: Financial Literacy 101 - Empowering Teens for Real World Money Smarts",
       "description": "Ok. We're actually registeriing for Summer School really, really, really early.",
       "location": "EAC",
       "start": "2025-12-24T16:01:00Z",

package/src/data/messages/announcements.json

@@ -55,7 +55,7 @@
       "links": "[]",
       "channels": ["Announcements"],
       "audiences": [],
-      "ownerOrganizationId": "f4656914-9ec6-1811-aa5d-31f532f483d5",
+      "ownerOrganizationId": "26eaf390-d8ab-11e9-a3a8-5de5bba4f125",
       "images": [{"files":[{"url":"https://asd20websitestorage.blob.core.windows.net/website-files/message-images/dollar5000-donated-to-high-plains-elementary-school/thumbnail-md/Unknown_250x250.jpg","name":"thumbnail-md","width":250,"height":250,"filename":"Unknown_250x250.jpg","filepath":"message-images/dollar5000-donated-to-high-plains-elementary-school/thumbnail-md/Unknown_250x250.jpg","filesize":26512},{"url":"https://asd20websitestorage.blob.core.windows.net/website-files/message-images/dollar5000-donated-to-high-plains-elementary-school/thumbnail-sm/Unknown_100x100.jpg","name":"thumbnail-sm","width":100,"height":100,"filename":"Unknown_100x100.jpg","filepath":"message-images/dollar5000-donated-to-high-plains-elementary-school/thumbnail-sm/Unknown_100x100.jpg","filesize":6411},{"url":"https://asd20websitestorage.blob.core.windows.net/website-files/message-images/dollar5000-donated-to-high-plains-elementary-school/thumbnail-xs/Unknown_50x50.jpg","name":"thumbnail-xs","width":50,"height":50,"filename":"Unknown_50x50.jpg","filepath":"message-images/dollar5000-donated-to-high-plains-elementary-school/thumbnail-xs/Unknown_50x50.jpg","filesize":2367},{"url":"https://asd20websitestorage.blob.core.windows.net/website-files/message-images/dollar5000-donated-to-high-plains-elementary-school/banner/Unknown_800x300.jpg","name":"banner","width":800,"height":300,"filename":"Unknown_800x300.jpg","filepath":"message-images/dollar5000-donated-to-high-plains-elementary-school/banner/Unknown_800x300.jpg","filesize":72551},{"url":"https://asd20websitestorage.blob.core.windows.net/website-files/message-images/dollar5000-donated-to-high-plains-elementary-school/full/Unknown_1200x800.jpg","name":"full","width":1200,"height":800,"filename":"Unknown_1200x800.jpg","filepath":"message-images/dollar5000-donated-to-high-plains-elementary-school/full/Unknown_1200x800.jpg","filesize":245500}],"isCover":true,"metadata":{"alt":""}}],
       "videos": "[]",
       "translations": "null",

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

@@ -392,7 +392,7 @@
             "hours": "7:30 a.m. - 4:30 p.m.",
             "instagram": "",
             "location": {},
-            "logoImageUrl": "/",
+            "logoImageUrl": "https://asd20websitestorage.blob.core.windows.net/asd20-images/school-logos/ASD20.png",
             "mascotImageUrl": "",
             "phone": "(719) 234 - 1200",
             "primaryColor": "",

package/src/helpers/mapEventToCard.js

@@ -64,7 +64,7 @@ export default function mapEventToCard(event) {
     day: event.day,
     month: event.month,
     year: event.year,
-    emphasizedDate: true,
+    dateLeft: true,
     location: event.location || event.calendarLocation,
     isFeatured: event.isFeatured || event.isDistrictFeatured,
   }

package/src/helpers/mapMessageToCard.js

@@ -46,9 +46,7 @@ export default function mapMessageToCard(
   let websiteLogo = null
 
   if (
-    message.ownerOrganizationId !== organization.id &&
-    message.destinations &&
-    message.destinations.length === 0
+    message.ownerOrganizationId !== organization.id 
   ) {
     const matchedOrg = organizationOptions.find(
       org => org.id === message.ownerOrganizationId
@@ -58,6 +56,8 @@ export default function mapMessageToCard(
       websiteLogo = matchedOrg.logoImageUrl
       sourceOrg = matchedOrg.title
     }
+  } else {
+    websiteLogo = organization.logoImageUrl
   }
 
   // Safely format dates (handle missing/null)