@asd20/ui 3.2.842 → 3.2.844

package/package.json

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

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

@@ -22,16 +22,26 @@
         </component>
       </div>
 
-      <p class="asd20-card__date-time" v-if="date || time">
+      <p class="asd20-card__date" v-if="date && !emphasizedDate">
+        <asd20-icon name="calendar" size="sm" />
+        <span v-if="modifiedDate && showModifiedDate" class="date-meta">
+          <span>Updated: </span>
+          <span
+            v-if="modifiedDate && showModifiedDate"
+            v-html="modifiedDate"
+          ></span>
+        </span>
+        <span v-else class="date-meta">
+          <span>Published: </span>
+          <span v-if="date && !emphasizedDate" v-html="date"></span>
+        </span>
+      </p>
+      <p v-if="time" class="asd20-card__time">
         <asd20-icon name="hours-alt" size="sm" />
-        <span
-          v-if="date && !emphasizedDate"
-          class="asd20-card__date"
-          v-html="date"
-        ></span>
-        <span v-if="time" class="asd20-card__time" v-html="time"></span>
+        <span v-html="time"></span>
       </p>
-      <p class="asd20-card__location" v-if="location">
+
+      <p v-if="location" class="asd20-card__location">
         <asd20-icon name="map" size="sm" />
         <span v-html="location"></span>
       </p>
@@ -113,6 +123,7 @@ export default {
     linkLabel: { type: String, default: '' },
     emphasizedDate: { type: Boolean, default: false },
     date: { type: String, default: '' },
+    modifiedDate: { type: String, default: '' },
     time: { type: String, default: '' },
     weekday: { type: String, default: '' },
     day: { type: String, default: '' },
@@ -164,6 +175,17 @@ export default {
         this.hasFile
       )
     },
+    showModifiedDate() {
+      const publishDateTimeString = new Date(this.date)
+      const modifiedDateTimeString = new Date(this.modifiedDate)
+      // console.log(publishDateTimeString, modifiedDateTimeString)
+
+      let publishDateTimePlusOne = new Date(
+        publishDateTimeString.setDate(publishDateTimeString.getDate() + 1)
+      )
+      // console.log(publishDateTimePlusOne, modifiedDateTimeString)
+      return modifiedDateTimeString > publishDateTimePlusOne ? true : false
+    },
   },
 }
 </script>
@@ -202,7 +224,7 @@ export default {
 
   font-family: var(--website-typography__font-family-body);
   line-height: 1.2;
-  font-size: 14px;
+  font-size: 1rem;
 
   // ::v-deep .asd20-icon g {
   //   --line-color: var(--color__accent);
@@ -301,12 +323,13 @@ export default {
     }
   }
 
-  &__date-time,
+  &__date,
+  &__time,
   &__location {
-    font-size: 1rem !important;
+    font-size: 0.85rem !important;
     font-weight: normal;
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     margin-top: space(0.5);
     margin-bottom: 0;
     .asd20-icon {
@@ -314,13 +337,16 @@ export default {
       margin-left: -0.125em;
       margin-right: space(0.25);
     }
+    .date-meta {
+      font-size: 0.85rem !important;
+    }
   }
-  &__date-time + &__location {
+  &__time + &__location {
     margin-top: space(0);
   }
-  &__date {
-    margin-right: space(0.5);
-  }
+  // &__date {
+  //   margin-right: space(0.5);
+  // }
 
   &--emphasized-date {
     .asd20-card__header {
@@ -489,7 +515,7 @@ export default {
       // right: 0;
       // bottom: 100%;
       // padding: space(1) space(1);
-      // margin-bottom: 0;
+      // margin-bottom: space(0.5);
       color: var(--website-card__foreground-color);
 
       // background: linear-gradient(
@@ -584,7 +610,7 @@ export default {
 
 @media (min-width: 1024px) {
   .asd20-card {
-    font-size: 1.25rem;
+    // font-size: 1.25rem;
     min-height: 15vw;
 
     &__description {

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

@@ -97,7 +97,6 @@ export default {
       return this.announcements.map(a =>
         mapMessageToCard(a, {
           reversed: true,
-          date: '',
           time: '',
           zoom: true,
           noCoverImage: true,
@@ -110,7 +109,6 @@ export default {
       return this.stories.map(s =>
         mapMessageToCard(s, {
           // description: '',
-          date: '',
           time: '',
           zoom: true,
         })

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

@@ -327,7 +327,7 @@ export default {
       return this.stories.map(s =>
         mapMessageToCard(s, {
           // reversed: true,
-          date: '',
+          // date: '',
           time: '',
           // description: '',
           // image: '',

package/src/design/_typography.scss

@@ -423,7 +423,7 @@
 
 
   ::-moz-selection { background: var(--color__accent);}
-  ::selection { background: var(--color__accent-t80); }
+  ::selection { background: var(--color__accent-t60); }
 
   :focus {
     @include asd20-focus

package/src/helpers/mapMessageToCard.js

@@ -29,6 +29,7 @@ export default function mapMessageToCard(message, options = {}) {
       description: message.description || message.summary,
       categories: message.categories,
       date: format(message.publishDateTime, 'MMM. D, YYYY'),
+      modifiedDate: format(message.modifiedDateTime, 'MMM. D, YYYY'),
       time: format(message.publishDateTime, 'h:mm A'),
       pinned: message.isFeatured || message.isDistrictFeatured,
       image: bannerImageOrDefault ? bannerImageOrDefault.url : '',