@asd20/ui 3.2.415 → 3.2.418

package/package.json

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

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

@@ -1,8 +1,11 @@
 <template>
   <div :class="classes">
-    <figure v-if=" images && images.length > 0 && fullscreen">
-      <img :src="images[0].url" alt />
-    </figure>
+    <div
+      class="message-image"
+      v-if="images && images.length > 0 && messageImage && fullscreen"
+    >
+      <img :src="messageImage" alt />
+    </div>
     <div class="asd20-messaging__content">
       <component
         class="asd20-messaging__heading"
@@ -10,23 +13,34 @@
         :is="headingTagName"
         :id="hash"
       >
-        <!-- <a :href="`#${hash}`">#</a> -->
-        <span v-html="heading"></span>
+        <!-- <span v-html="heading"></span> -->
+        <span>{{ heading }}</span>
       </component>
-      <div v-if="shortDescription" class="lead short-description">
-        <span v-html="shortDescription"></span>
+      <!-- <div class="asd20-messaging__heading" v-if="heading">
+          <span v-html="heading"></span>
+          <span>{{ heading }}</span>
+        </div> -->
+      <div v-if="shortDescription" class="lead">
+        <!-- <span v-text="shortDescription"></span> -->
+        <span>{{ shortDescription }}</span>
         <a v-if="detailLink" :href="detailLink">{{ detailLinkLabel }}</a>
       </div>
-      <p
+      <!-- <p
         v-if="longDescription"
         class="long-description"
         v-html="longDescription"
-      />
+      /> -->
+      <p v-if="longDescription" class="long-description">
+        >{{ longDescription }}
+      </p>
       <div v-if="bodyContent" class="asd20-messaging__body-content">
         <component :is="dynamicComponent"></component>
       </div>
 
-      <p v-if=" callsToAction && callsToAction.length > 0" class="asd20-messaging__button-group">
+      <p
+        v-if="callsToAction && callsToAction.length > 0"
+        class="asd20-messaging__button-group"
+      >
         <asd20-button
           v-for="cta in callsToAction"
           :key="cta.label"
@@ -70,7 +84,7 @@ export default {
       return {
         'asd20-messaging': true,
         'asd20-messaging--fullscreen': this.fullscreen,
-        'asd20-messaging--padded': this.fullscreen,
+        'asd20-messaging--padded': this.padded,
       }
     },
     dynamicComponent() {
@@ -78,6 +92,22 @@ export default {
         template: `<div>${this.bodyContent}</div>`,
       }
     },
+    messageImage() {
+      // Get full image
+      const messageImages = Array.isArray(this.images) ? this.images : []
+
+      const coverImage = messageImages.find(i => i.isCover)
+      let messageImageUrl = null
+
+      if (coverImage) {
+        const coverImageFiles = coverImage.files || []
+        const coverImageFull = coverImageFiles.find(f => f.name === 'full')
+        messageImageUrl = coverImageFull
+          ? coverImageFull.url
+          : coverImage.url || ''
+      }
+      return messageImageUrl
+    },
   },
 }
 </script>
@@ -140,13 +170,15 @@ export default {
     padding: space(1);
   }
   &--fullscreen {
-    & + .asd20-messaging--fullscreen {
-      margin-top: space(-1);
-    }
-    & > figure {
+    // & + .asd20-messaging--fullscreen {
+    //   margin-top: space(-1);
+    // }
+    padding: space(1);
+
+    & > .message-image {
       padding: 0;
       margin: 0;
-      overflow: hidden;
+      // overflow: hidden;
       margin: 0 space(-1) space(1) space(-1);
       & > img {
         display: block;
@@ -163,83 +195,88 @@ export default {
     &--fullscreen {
       // position: relative;
       padding: 0;
+      display: flex;
+      align-items: center;
       // min-height: 100vh;
-      display: grid;
-      grid-template-columns: $grid-three-up-columns;
-      grid-template-rows: $grid-base-rows;
-      grid-template-areas: $grid-aside-right-areas;
+      // display: grid;
+      // grid-template-columns: $grid-three-up-columns;
+      // grid-template-rows: $grid-base-rows;
+      // grid-template-areas: $grid-aside-right-areas;
       & + .asd20-messaging--fullscreen {
-        margin-top: space(-3);
+        // margin-top: space(-3);
         z-index: -1;
       }
 
-      &::before {
-        content: '';
-        display: block;
-        position: relative;
-        z-index: 2;
-        grid-column: -1 / -2;
-        grid-row: 1 / -1;
-        height: 70%;
-        align-self: center;
-        background: var(--color__primary);
-        transform: translate3d(0, calc(20% * var(--scroll-progress)), 0);
-      }
+      // &::before {
+      //   content: '';
+      //   display: block;
+      //   position: relative;
+      //   z-index: 2;
+      //   grid-column: -1 / -2;
+      //   grid-row: 1 / -1;
+      //   height: 70%;
+      //   align-self: center;
+      //   background: var(--color__primary);
+      //   transform: translate3d(0, calc(20% * var(--scroll-progress)), 0);
+      // }
 
       .asd20-messaging__content {
         position: relative;
         z-index: 1;
-        grid-row: 1 / -1;
-        grid-column: 1 / 4;
-        background: var(--website-page__background-color);
-        padding: space(3);
+        // grid-row: 1 / -1;
+        // grid-column: 1 / 4;
+        // background: var(--website-page__background-color);
+        // padding: 0 0 0 space(2);
         height: min-content;
         align-self: center;
         transform: translate3d(0, calc(10% * var(--scroll-progress)), 0);
       }
 
-      &::v-deep figure {
+      .message-image {
         position: relative;
-        overflow: hidden;
-        grid-column: 3 / -2;
-        grid-row: 2 / -2;
-        padding: 0;
+        // overflow: hidden;
+        // grid-column: 3 / -2;
+        // grid-row: 2 / -2;
+        padding-right: space(2);
         margin: 0;
-        height: 100%;
-        background: var(--website-card__reverse-background-color)
-          var(--website-card__reverse-background-style);
-        &::before {
-          content: '';
-          display: block;
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          // background: var(--color__accent-t70);
-          // background: hsla(40, 60%, 50%, 1);
-          // mix-blend-mode: multiply;
-          z-index: 1;
-        }
+        // height: 100%;
+        // width: 20vw;
+        // background: var(--website-card__reverse-background-color)
+        //   var(--website-card__reverse-background-style);
+        // &::before {
+        //   content: '';
+        //   display: block;
+        //   position: absolute;
+        //   top: 0;
+        //   left: 0;
+        //   right: 0;
+        //   bottom: 0;
+        //   background: var(--color__accent-t70);
+        //   background: hsla(40, 60%, 50%, 1);
+        //   mix-blend-mode: multiply;
+        //   z-index: 1;
+        // }
         img {
+          width: 20vw;
+          height: 20vw;
           // filter: grayscale(100%);
           // mix-blend-mode: lighten;
           // opacity: 0.7;
         }
       }
 
-      &:nth-child(even) {
-        grid-template-areas: $grid-aside-left-areas;
-        &::before {
-          grid-column: 1 / 2;
-        }
-        figure {
-          grid-column: 2 / 6;
-        }
-        .asd20-messaging__content {
-          grid-column: 5 / -1;
-        }
-      }
+      // &:nth-child(even) {
+      //   grid-template-areas: $grid-aside-left-areas;
+      //   &::before {
+      //     grid-column: 1 / 2;
+      //   }
+      //   figure {
+      //     grid-column: 2 / 6;
+      //   }
+      //   .asd20-messaging__content {
+      //     grid-column: 5 / -1;
+      //   }
+      // }
     }
   }
 }

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

@@ -10,7 +10,6 @@
     class="asd20-event-modal"
     @dismiss="$emit('dismiss')"
     :style="{ '--accent-color': event.calendarColor }"
-    v-scroll-lock="open"
   >
     <Asd20Viewport tabindex="0" class="asd20-event-modal__details" scrollable>
       <header class="asd20-event-modal__header">
@@ -57,7 +56,7 @@
 
 <script>
 // import parse from 'date-fns/parse'
-import Vue from 'vue'
+// import Vue from 'vue'
 
 import { truncate } from 'lodash-es'
 import { format, parse } from 'date-fns'
@@ -66,8 +65,8 @@ import Asd20Tag from '../../atoms/Asd20Tag'
 import Asd20List from '../../organisms/Asd20List'
 import Asd20ListItem from '../../molecules/Asd20ListItem'
 import Asd20Viewport from '../../atoms/Asd20Viewport'
-import VScrollLock from 'v-scroll-lock'
-Vue.use(VScrollLock)
+// import VScrollLock from 'v-scroll-lock'
+// Vue.use(VScrollLock)
 
 export default {
   name: 'Asd20EventModal',
@@ -98,12 +97,9 @@ export default {
 
       let time = `${format(parse(this.event.start), '<b>h:mm aa</b>')}`
       if (this.event.endTimeUndetermined) {
-        time += `${format(parse(this.event.end), ', dddd, MMMM DD, YYYY')}`
+        time += `${format(parse(this.event.end))}`
       } else {
-        time += ` - ${format(
-          parse(this.event.end),
-          '<b>h:mm aa</b>, dddd, MMMM DD, YYYY'
-        )}`
+        time += ` - ${format(parse(this.event.end), '<b>h:mm aa</b>')}`
       }
       return time
     },

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

@@ -217,7 +217,7 @@ export default {
   .asd20-image-gallery {
     .image-grid {
       .grid-overlay {
-        font-size: 1rem !important;
+        // font-size: 1rem !important;
       }
     }
   }

package/src/components/organisms/Asd20ImageHeader/index.stories.js

@@ -0,0 +1,38 @@
+import { storiesOf } from '@storybook/vue'
+import Asd20ImageHeader from '.'
+
+const info = {
+  summary: 'Asd20ImageHeader',
+}
+
+const wrapper = {
+  components: { Asd20ImageHeader },
+  data: () => ({
+    pageHeaderContent: {
+      heading: 'Cultivating the next generation of leaders.',
+      lead:
+        'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
+      imageUrl: '/statics/images/home-images/best-brass-section.jpg',
+      imageCaption: '',
+      callsToAction: [
+        { label: 'Enroll Your Child', url: '/enroll' },
+        { label: 'Browse Our Schools', url: '/schools' },
+      ],
+      detailLink: '',
+      detailLinkLabel: '',
+      organization: {
+        title: 'Organization Title',
+      },
+      organizationOptions: [],
+    },
+  }),
+}
+
+storiesOf('Organisms - Asd20ImageHeader', module).add(
+  'Default',
+  () => ({
+    ...wrapper,
+    template: `<Asd20ImageHeader v-bind="pageHeaderContent"></Asd20ImageHeader>`,
+  }),
+  { info }
+)