@asd20/ui 3.2.429 → 3.2.432

package/package.json

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

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

@@ -71,6 +71,12 @@
               v-if="publishDateTime"
               :dateTime="publishDateTime"
             />
+            <br />
+            <span v-if="modifiedDateTime" class="date-prefix">Updated:</span>
+            <asd20-formatted-date
+              v-if="modifiedDateTime"
+              :dateTime="modifiedDateTime"
+            />
             <asd20-tag-group v-if="categories.length" :tags="categories" />
             <slot name="meta" />
           </div>
@@ -392,13 +398,13 @@ export default {
   }
 
   &__call-to-action {
-    margin: space(-1) space(2) space(-1) space(1);
+    margin: space(-1) space(1) space(-1) space(1);
     z-index: 1;
     display: flex;
     .asd20-button {
       box-sizing: border-box;
-      flex-grow: 1;
-      max-width: 40vw;
+      flex-shrink: 1;
+      // max-width: 40vw;
       min-height: space(2);
       font-size: 0.875rem !important;
       background-color: var(
@@ -462,9 +468,9 @@ export default {
         width: 100%;
         height: 100%;
         background: linear-gradient(
-          70deg,
+          30deg,
           rgba(6, 11, 31, 0.7) 10%,
-          rgba(6, 11, 31, 0.5) 40%,
+          rgba(6, 11, 31, 0.5) 50%,
           transparent 70%
         );
       }
@@ -478,7 +484,7 @@ export default {
       left: 0;
     }
     &__title-content {
-      max-width: 50%;
+      max-width: 80%;
     }
 
     &::after {
@@ -511,18 +517,21 @@ export default {
       padding: 0 space(3);
       z-index: 5;
     }
-
-    &__call-to-action {
-      margin: space(-1) 60vw space(-1) space(3);
-      .asd20-button {
-        font-size: 1rem !important;
-      }
-    }
   }
 }
 
 @media (min-width: 1024px) {
   .asd20-image-header {
+    .add-fade {
+      &::before {
+        background: linear-gradient(
+          70deg,
+          rgba(6, 11, 31, 0.7) 10%,
+          rgba(6, 11, 31, 0.5) 40%,
+          transparent 70%
+        );
+      }
+    }
     &::v-deep .asd20-picker {
       display: flex;
       margin: space(1) auto space(1) 0;
@@ -550,6 +559,16 @@ export default {
         order: 2;
       }
     }
+    &__title-content {
+      max-width: 50%;
+    }
+    &__call-to-action {
+      margin: space(-1) 60vw space(-1) space(3);
+      .asd20-button {
+        font-size: 1rem !important;
+        flex-shrink: 0;
+      }
+    }
 
     .back {
       padding: 0;

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

@@ -398,13 +398,13 @@ export default {
   }
 
   &__call-to-action {
-    margin: space(-1) space(2) space(-1) space(1);
+    margin: space(-1) space(1) space(-1) space(1);
     z-index: 1;
     display: flex;
     .asd20-button {
       box-sizing: border-box;
-      flex-grow: 1;
-      max-width: 40vw;
+      flex-shrink: 1;
+      // max-width: 40vw;
       min-height: space(2);
       font-size: 0.875rem !important;
       background-color: var(
@@ -550,6 +550,7 @@ export default {
       margin: space(-1) 60vw space(-1) space(3);
       .asd20-button {
         font-size: 1rem !important;
+        flex-shrink: 0;
       }
     }
   }

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

@@ -88,10 +88,10 @@
       <slot name="page-footer" />
 
       <!-- analytics requested by Kyle Blakely -->
-      <img
+      <!-- <img
         src="https://jelly.mdhv.io/v1/star.gif?pid=ipUavA655F50RvTSoYZIJU2vFFFB&src=mh&evt=hi"
         alt=""
-      />
+      /> -->
     </asd20-page-footer>
   </div>
 </template>

package/src/components/templates/Asd20WayfindingAlternateTemplate/index.stories.js

@@ -0,0 +1,65 @@
+import { storiesOf } from '@storybook/vue'
+import { withKnobs, boolean } from '@storybook/addon-knobs'
+
+import mockPageMixin from '../../../mixins/mockPageMixin'
+
+import Asd20WayfindingAlternateTemplate from '.'
+import pageQueryResult from '../../../data/page-queries/landing-page-query-result.json'
+import notifications from '../../../data/messages/notifications'
+
+const info = {
+  summary: 'Wayfinding Alternate Page Template',
+}
+
+const wrapper = {
+  mixins: [mockPageMixin],
+  components: {
+    Asd20WayfindingAlternateTemplate,
+  },
+  watch: {
+    languageCode(newValue, oldValue) {
+      console.log(newValue, oldValue)
+    },
+  },
+
+  data: () => ({ pageQueryResult, languageCode: 'es' }),
+
+  computed: {
+    activeNotificationsByType() {
+      const empty = {
+        inline: [],
+        banner: [],
+        floating: [],
+        status: [],
+      }
+      return boolean('Show Notifications', true)
+        ? notifications || empty
+        : empty
+    },
+  },
+
+}
+
+const stories = storiesOf('Templates - Asd20WayfindingAlternateTemplate', module)
+stories.addDecorator(withKnobs)
+
+stories.add(
+  'Default',
+  () => ({
+    ...wrapper,
+    template: `
+    <Asd20WayfindingAlternateTemplate
+      v-bind="templateProps"
+      :menu-open.sync="menuOpen"
+      :search-open.sync="searchOpen"
+
+      @announcements-in-view="loadAnnouncements"
+      @stories-in-view="loadStories"
+      @events-in-view="loadEvents"
+      @files-in-view="loadFiles"
+      @people-in-view="loadPeople"
+      :languageCode.sync="languageCode"
+    />`,
+  }),
+  { info }
+)

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

@@ -0,0 +1,253 @@
+<template>
+  <div class="asd20-template-wayfinding-alternate">
+    <!-- Skip Nav -->
+    <asd20-skip-to></asd20-skip-to>
+
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
+    <!-- Banner Notifications -->
+    <client-only>
+      <asd20-notification-group
+        :notifications="activeNotificationsByType.banner"
+        group-type="banner"
+        @dismiss="$emit('dismiss-notification', $event)"
+        @toggle-all="$emit('toggle-all')"
+      ></asd20-notification-group>
+    </client-only>
+
+    <!-- Page Header -->
+    <asd20-page-header
+      id="page-header"
+      v-show="pageHeaderContent"
+      v-bind="pageHeaderContent"
+      :organization="organization"
+      :organization-options="organizationOptions"
+      :languageCode="languageCode"
+      v-on="$listeners"
+      :breadcrumb-links="breadcrumbLinks"
+    >
+      <!-- Floating Notifications -->
+      <template slot="top">
+        <client-only>
+          <asd20-notification-group
+            class="asd20-notification-group--floating"
+            :notifications="activeNotificationsByType.floating"
+            :total-dismissed-notifications="totalDismissedNotifications"
+            group-type="floating"
+            @dismiss="$emit('dismiss-notification', $event)"
+            @toggle-all="$emit('toggle-all')"
+          ></asd20-notification-group>
+        </client-only>
+      </template>
+      <!-- <asd20-breadcrumb slot="top" :links="breadcrumbLinks"></asd20-breadcrumb> -->
+    </asd20-page-header>
+
+    <!-- Page Content -->
+    <asd20-page-content
+      :primary-messages="wayFindingPrimaryMessages"
+      :secondary-messages="secondaryMessages"
+      omit-body-content
+      grid
+    >
+      <!-- Inline-Notifications -->
+      <template slot="before">
+        <client-only>
+          <asd20-notification-group
+            :notifications="activeNotificationsByType.inline"
+            group-type="inline"
+            @dismiss="$emit('dismiss-notification', $event)"
+            @toggle-all="$emit('toggle-all')"
+          ></asd20-notification-group>
+        </client-only>
+      </template>
+      <!-- Feeds -->
+      <template slot="before">
+        <asd20-feeds-section
+          :announcements="announcements"
+          :announcements-feed-props="announcementsFeedProps"
+          @announcements-in-view="$emit('announcements-in-view')"
+          :stories="stories"
+          :stories-feed-props="storiesFeedProps"
+          @stories-in-view="$emit('stories-in-view')"
+          :events="events"
+          :events-feed-props="eventsFeedProps"
+          @events-in-view="$emit('events-in-view')"
+        ></asd20-feeds-section>
+      </template>
+
+      <slot></slot>
+    </asd20-page-content>
+
+    <!-- Bottom Widgets -->
+    <asd20-widgets-section
+      v-if="
+        widgetsSectionProps.footer ||
+          widgetsSectionProps.sidebar ||
+          $slots.widgets
+      "
+      v-bind="{ ...widgetsSectionProps.footer, ...widgetsSectionProps.sidebar }"
+      @events-in-view="$emit('events-in-view')"
+      @files-in-view="$emit('files-in-view')"
+      @people-in-view="$emit('people-in-view')"
+      full
+      ><slot name="widgets"
+    /></asd20-widgets-section>
+
+    <slot name="before-footer" />
+
+    <!-- Quick Links -->
+    <asd20-quicklinks-menu slot="before-footer" :quick-links="quickLinks">
+      <slot name="quicklinks-menu" />
+    </asd20-quicklinks-menu>
+
+    <!-- Footer -->
+    <asd20-page-footer
+      :organization="organization"
+      :socialLinks="socialLinks"
+      :disclosureLinks="disclosureLinks"
+      :websiteLogoProps="websiteLogoProps"
+    >
+      <slot name="page-footer" />
+    </asd20-page-footer>
+  </div>
+</template>
+
+<script>
+// Components
+import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
+import Asd20PageHeader from '../../../components/organisms/Asd20PageHeader'
+
+import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
+import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
+
+import Asd20WidgetsSection from '../../../components/organisms/Asd20WidgetsSection'
+import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
+// import Asd20MediaSection from '../../../components/organisms/Asd20MediaSection'
+
+import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
+import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
+import Asd20NotificationGroup from '@asd20/notifications-ui/src/components/Asd20NotificationGroup'
+
+// import Intersect from 'vue-intersect'
+
+// Mixins
+import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+
+export default {
+  name: 'Asd20WayfindingAlternateTemplate',
+  mixins: [pageTemplateMixin],
+  components: {
+    Asd20PageContent,
+    Asd20SkipTo,
+    Asd20PageHeader,
+    Asd20PageFooter,
+    Asd20SiteNavigation,
+    Asd20WidgetsSection,
+    Asd20FeedsSection,
+    Asd20NotificationGroup,
+    Asd20QuicklinksMenu,
+    // Asd20MediaSection,
+  },
+  computed: {
+    wayFindingPrimaryMessages() {
+      // wayfinding page
+      return (
+        this.messages
+          // Remove the first message, limit
+          .slice(
+            1,
+            Math.min(this.messages.length, this.primaryMessageLimit + 1)
+          )
+      )
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@import '../../../design/_variables.scss';
+@import '../../../design/_mixins.scss';
+@import '../../../design/_typography.scss';
+@import '../../../design/_template.scss';
+@import '../../../design/_print.scss';
+@import '../../../design/tokens.css';
+
+.asd20-template-wayfinding-alternate {
+  @include typography;
+  @include template;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 0;
+  overflow: hidden;
+  margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(2);
+    .bell {
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
+      svg {
+        fill: var(--color__accent) !important;
+      }
+      span {
+        background: var(--color__accent) !important;
+        top: inherit !important;
+        right: inherit !important;
+        width: 1.2rem !important;
+        height: 1.2rem !important;
+        font-size: 0.75rem !important;
+      }
+    }
+  }
+  .asd20-feeds-section {
+    margin-top: space(2);
+    .asd20-swiper-feed:first-child {
+      padding-top: space(2);
+      padding-bottom: space(1);
+      &::after {
+        top: space(1);
+      }
+    }
+    .asd20-swiper-feed:last-child {
+      // margin-top: space(-1);
+      padding-bottom: space(2);
+      &::after {
+        bottom: space(1);
+      }
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  .asd20-template-wayfinding-alternate {
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+      // .bell {
+      //   span {
+      //     background: var(--color__accent);
+      //     top: -0.6em !important;
+      //     right: -0.6em !important;
+      //   }
+      // }
+    }
+    @include template-desktop;
+    margin-left: space(3);
+    margin-top: 0;
+    .asd20-page-content {
+      margin-top: space(0);
+    }
+  }
+}
+</style>

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

@@ -70,23 +70,28 @@
           ></asd20-notification-group>
         </client-only>
       </template>
+      <!-- Announcement Feed -->
       <template slot="before">
         <asd20-feeds-section
           :announcements="announcements"
           :announcements-feed-props="announcementsFeedProps"
           @announcements-in-view="$emit('announcements-in-view')"
-          :stories="stories"
-          :stories-feed-props="storiesFeedProps"
-          @stories-in-view="$emit('stories-in-view')"
-          :events="events"
-          :events-feed-props="eventsFeedProps"
-          @events-in-view="$emit('events-in-view')"
         ></asd20-feeds-section>
       </template>
 
       <slot></slot>
     </asd20-page-content>
 
+    <!-- Feeds -->
+    <asd20-feeds-section
+      :stories="stories"
+      :stories-feed-props="storiesFeedProps"
+      @stories-in-view="$emit('stories-in-view')"
+      :events="events"
+      :events-feed-props="eventsFeedProps"
+      @events-in-view="$emit('events-in-view')"
+    ></asd20-feeds-section>
+
     <!-- Bottom Widgets -->
     <asd20-widgets-section
       v-if="
@@ -213,7 +218,7 @@ export default {
       margin-bottom: space(1);
     }
     .asd20-feeds-section {
-      margin-top: space(1);
+      margin-top: space(2);
       .asd20-swiper-feed:first-child {
         padding-top: space(2);
         padding-bottom: space(1);
@@ -230,6 +235,23 @@ export default {
       }
     }
   }
+  .asd20-feeds-section {
+    margin-top: space(1);
+    .asd20-swiper-feed:first-child {
+      padding-top: space(2);
+      padding-bottom: space(1);
+      &::after {
+        top: space(1);
+      }
+    }
+    .asd20-swiper-feed:last-child {
+      // margin-top: space(-1);
+      padding-bottom: space(2);
+      &::after {
+        bottom: space(1);
+      }
+    }
+  }
 }
 
 @media (min-width: 1024px) {