@asd20/ui 3.2.416 → 3.2.419

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

@@ -0,0 +1,559 @@
+<template>
+  <header
+    v-scroll-track.window
+    class="asd20-image-header"
+    :class="classes"
+    role="banner"
+  >
+    <div class="asd20-image-header__top" v-if="organizationOptions.length > 0">
+      <asd20-district-logo
+        v-show="
+          organization.title === 'Academy District 20' &&
+            mq !== 'sm' &&
+            mq !== 'md'
+        "
+      ></asd20-district-logo>
+      <client-only>
+        <asd20-organization-picker
+          v-show="organization.title !== 'Academy District 20'"
+          :organization-options="organizationOptions"
+          :organization="organization"
+        ></asd20-organization-picker>
+      </client-only>
+      <slot name="top" />
+    </div>
+    <div :class="imageUrl ? 'add-fade' : ''" class="asd20-image-header__main">
+      <div class="asd20-image-header__content">
+        <div class="asd20-image-header__tools">
+          <asd20-breadcrumb
+            v-if="breadcrumbLinks.length"
+            :links="breadcrumbLinks"
+          ></asd20-breadcrumb>
+          <asd20-button
+            class="back"
+            v-if="!breadcrumbLinks.length"
+            @click.native="goBack()"
+            label="Back"
+            icon="chevron"
+            :iconAngle="-90"
+            size="md"
+            horizontal
+            transparent
+            centered
+            reversed
+          />
+          <div class="right">
+            <Asd20LanguageTranslation
+              v-if="languageCode"
+              reversed
+              :languageCode="languageCode"
+              v-on="$listeners"
+            />
+            <Asd20Share></Asd20Share>
+            <asd20-button
+              class="print-button"
+              icon="printer"
+              size="sm"
+              hide-label
+              label="Print this page"
+              onclick="window.print()"
+            ></asd20-button>
+          </div>
+        </div>
+        <div id="main" class="asd20-image-header__title-content">
+          <h1 v-if="heading" v-html="heading" />
+          <div
+            v-if="publishDateTime || categories.length || $slots.meta"
+            class="asd20-image-header__meta"
+          >
+            <span class="date-prefix">Published:</span>
+            <asd20-formatted-date
+              v-if="publishDateTime"
+              :dateTime="publishDateTime"
+            />
+            <asd20-tag-group v-if="categories.length" :tags="categories" />
+            <slot name="meta" />
+          </div>
+          <div v-if="lead" class="asd20-image-header__lead">
+            <span v-html="lead"></span>
+            <a v-show="detailLink && !isDetailPage" :href="detailLink">
+              {{ detailLinkLabel }}
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="imageUrl && !$slots.aside" class="asd20-image-header__image">
+        <img :src="imageUrl" :alt="imageCaption" />
+      </div>
+    </div>
+
+    <aside class="asd20-image-header__aside" v-if="$slots.aside">
+      <slot name="aside" />
+    </aside>
+
+    <div
+      v-if="callsToAction.length > 0"
+      class="asd20-image-header__call-to-action"
+    >
+      <!-- <asd20-button
+        v-for="(cta, index) in callsToAction"
+        :key="index"
+        :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
+        :label="cta.label"
+        :icon="cta.icon"
+        :link="cta.url"
+        reversed
+        horizontal
+        centered
+      /> -->
+      <asd20-button
+        v-if="callsToAction.length >= 1"
+        :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
+        :label="callsToAction[0].label"
+        :icon="callsToAction[0].icon"
+        :link="callsToAction[0].url"
+        reversed
+        horizontal
+        centered
+      />
+      <asd20-button
+        v-if="callsToAction.length >= 2"
+        :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
+        :label="callsToAction[1].label"
+        :icon="callsToAction[1].icon"
+        :link="callsToAction[1].url"
+        reversed
+        horizontal
+        centered
+      />
+    </div>
+    <div v-if="fullscreen" class="scroll-down-indicator"></div>
+    <slot />
+  </header>
+</template>
+
+<script>
+import scrollTrack from '../../../directives/scroll-track'
+import Asd20Button from '../../atoms/Asd20Button'
+import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
+import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
+import Asd20Breadcrumb from '../../../components/atoms/Asd20Breadcrumb'
+import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
+import Asd20Share from '../../molecules/Asd20Share'
+import Asd20FormattedDate from '../../atoms/Asd20FormattedDate'
+import Asd20TagGroup from '../../organisms/Asd20TagGroup'
+
+export default {
+  name: 'Asd20ImageHeader',
+  components: {
+    Asd20Button,
+    Asd20DistrictLogo,
+    Asd20OrganizationPicker,
+    Asd20Breadcrumb,
+    Asd20TagGroup,
+    Asd20LanguageTranslation,
+    Asd20Share,
+    Asd20FormattedDate,
+  },
+  directives: { scrollTrack },
+  props: {
+    heading: { type: String, default: '' },
+    lead: { type: String, default: '' },
+    callsToAction: { type: Array, default: () => [] },
+    imageUrl: { type: String, default: '' },
+    imageCaption: { type: String, default: '' },
+    fullscreen: { type: Boolean, default: false },
+    detailLink: { type: String, default: '' },
+    detailLinkLabel: { type: String, default: '' },
+    organization: { type: Object, default: null },
+    organizationOptions: { type: Array, default: () => [] },
+    omitDetailLink: { type: Boolean, default: false },
+    breadcrumbLinks: { type: Array, default: () => [] },
+    publishDateTime: { type: String, default: '' },
+    categories: { type: Array, default: () => [] },
+    languageCode: { type: String, default: '' },
+  },
+  computed: {
+    mq() {
+      return this.$mq || 'sm'
+    },
+    classes() {
+      return {
+        'asd20-image-header--fullscreen': this.fullscreen,
+        'asd20-image-header--has-cta': this.callsToAction
+          ? this.callsToAction.length > 0
+          : false,
+      }
+    },
+    isDetailPage() {
+      if (typeof window === 'undefined') return false
+      return (
+        window.location.pathname
+          .replace(/\/$/, '')
+          .split('/')
+          .pop() ===
+        this.detailLink
+          .replace(/\/$/, '')
+          .split('/')
+          .pop()
+      )
+    },
+  },
+  methods: {
+    goBack() {
+      if (typeof window === 'undefined') return
+      window.history.back()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../design/_variables.scss';
+@import '../../../design/_mixins.scss';
+
+.asd20-image-header {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  box-sizing: border-box;
+  margin-bottom: space(1.5);
+  .back {
+    padding: space(0.5) 0;
+    font-family: var(--website-typography__font-family-body);
+    line-height: 1.2;
+    font-size: 14px !important;
+    font-weight: normal;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: space(2);
+    bottom: space(-1.5);
+    right: space(0);
+    left: space(2);
+    background-color: var(--website-page__alternate-background-color);
+    z-index: -2;
+    border-radius: var(--website-shape__radius-l);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  &__main {
+    background: var(--website-header__background-color)
+      var(--website-header__background-style);
+  }
+
+  &__tools {
+    display: flex;
+    justify-content: space-between;
+    align-self: center;
+    flex-direction: column;
+    .asd20-breadcrumb,
+    .back {
+      color: currentColor !important;
+      order: 2;
+    }
+    .right {
+      display: flex;
+      align-items: center;
+      & > *:not(:first-child) {
+        margin-left: space(0.25);
+      }
+    }
+    .print-button {
+      padding: 0.25rem 0.25rem;
+      border-radius: 5rem;
+      background: rgba(255, 255, 255, 0.9);
+      .asd20-button__label {
+        font-size: 0.875em !important;
+        padding-right: 0.5rem;
+      }
+      &:hover,
+      &:focus {
+        color: var(--website-button__foreground-color);
+      }
+    }
+    .asd20-language-translation {
+      flex-grow: 0;
+      width: max-content;
+      background: rgba(255, 255, 255, 0.9);
+      border-radius: 3rem;
+      padding: 0 0 0 0.5em;
+      &::v-deep .asd20-select-input {
+        color: var(--website-page__foreground-color) !important;
+      }
+    }
+    .asd20-language-loader {
+      order: 1;
+    }
+    &::v-deep .asd20-icon {
+      width: 24px !important;
+      height: 24px !important;
+      --line-color: currentColor !important;
+      --fill-color: var(--color__accent) !important;
+      g {
+        // --website-icon__line-color: var(--website-icon__line-color) !important;
+        --line-color: currentColor !important;
+      }
+    }
+    &::v-deep .asd20-select-input {
+      margin-bottom: 0;
+    }
+  }
+
+  &__top {
+    --fill-one: rgba(255, 255, 255, 1);
+    --fill-two: rgba(255, 255, 255, 0.625);
+    position: relative;
+    z-index: 101;
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: row;
+    align-items: center;
+    padding: space(0.5) space(1);
+
+    &::v-deep .asd20-picker {
+      display: none;
+    }
+
+    &::v-deep .asd20-district-logo {
+      display: none;
+    }
+
+    &::v-deep .notification-group--status {
+      margin-top: space(0.5);
+      margin-bottom: space(0.5);
+      .notifications {
+        background: transparent;
+      }
+      .asd20-notification__content {
+        padding-right: 0;
+      }
+    }
+
+    &::v-deep .asd20-notification-group--floating {
+      margin-left: space(1);
+    }
+  }
+
+  &__content {
+    position: relative;
+    color: var(--website-header__foreground-color);
+    padding: space(1) space(1) space(1) space(1);
+    &::v-deep .asd20-breadcrumb {
+      margin: space(1) 0 0 0;
+    }
+    &__title-content {
+      max-width: 100%;
+    }
+  }
+
+  h1 {
+    position: relative;
+    color: var(--website-header__title-color);
+    @include asd20-font(
+      1.5,
+      var(--website-typography__font-family-headlines),
+      1.2,
+      700
+    );
+    margin: space(1) 0 space(0.5) 0;
+  }
+
+  &__meta {
+    margin-bottom: space(0.5);
+    .asd20-tag-group {
+      margin-left: -0.5em;
+    }
+    .date-prefix {
+      @include asd20-font(
+        0.75,
+        var(--website-typography__font-family-headlines)
+      );
+    }
+    .asd20-formatted-date {
+      @include asd20-font(
+        0.75,
+        var(--website-typography__font-family-headlines)
+      );
+      text-transform: uppercase;
+    }
+  }
+
+  &__lead {
+    @include asd20-font(1, var(--website-typography__font-family-body));
+    &::v-deep a {
+      color: var(--website-header__foreground-color);
+    }
+  }
+
+  &__call-to-action {
+    margin: space(-1) space(2) space(-1) space(1);
+    z-index: 1;
+    display: flex;
+    .asd20-button {
+      box-sizing: border-box;
+      flex-grow: 1;
+      max-width: 40vw;
+      min-height: space(2);
+      font-size: 0.875rem !important;
+      background-color: var(
+        --website-header__button-background-color,
+        var(--color__accent)
+      );
+      color: var(
+        --website-header__button-foreground-color,
+        var(--color__accent-t100)
+      );
+
+      box-shadow: 2px 2px 2px rgb(50, 50, 50);
+      &:hover,
+      &:focus {
+        background-color: var(
+          --website-header__button-hover-background-color,
+          var(--color__accent-s10)
+        );
+        color: var(
+          --website-header__button-hover-foreground-color,
+          var(--color__accent-t100)
+        );
+      }
+
+      &:not(:last-child) {
+        margin-right: space(0.5);
+      }
+    }
+  }
+
+  &__image {
+    img {
+      width: 100%;
+      max-height: 600px;
+      border-top: 10px solid var(--color__accent);
+    }
+  }
+  &--has-cta {
+    .asd20-image-header__content {
+      //   padding-bottom: space(2);
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .asd20-image-header {
+    &__main {
+      position: relative;
+      min-height: 500px;
+    }
+    .add-fade {
+      &::before {
+        content: '';
+        height: auto;
+        display: block;
+        position: absolute;
+        z-index: 0;
+        top: 0;
+        bottom: auto;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+          70deg,
+          rgba(6, 11, 31, 0.7) 10%,
+          rgba(6, 11, 31, 0.5) 40%,
+          transparent 70%
+        );
+      }
+    }
+    &__content {
+      position: absolute;
+      padding: space(1) space(3) space(1) space(3);
+      min-height: 300px;
+      top: 0;
+      right: 0;
+      left: 0;
+    }
+    &__title-content {
+      max-width: 50%;
+    }
+
+    &::after {
+      top: space(5);
+      bottom: space(-2);
+      right: space(0);
+      left: space(4);
+    }
+
+    &__image {
+      img {
+        width: 100%;
+        height: 100%;
+        max-height: inherit;
+        object-fit: cover;
+        border-top: none;
+        min-height: 500px;
+      }
+    }
+    h1 {
+      @include asd20-font(
+        2.5,
+        var(--website-typography__font-family-headlines),
+        1.2,
+        700
+      );
+    }
+
+    &__top {
+      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 {
+    &::v-deep .asd20-picker {
+      display: flex;
+      margin: space(1) auto space(1) 0;
+    }
+
+    &::v-deep .asd20-district-logo {
+      height: space(1.5);
+      margin: space(1) auto space(1) 0;
+      display: block;
+      --fill-one: var(--color__primary);
+      --fill-two: var(--color__secondary-t30);
+    }
+    &__image {
+      max-height: 60vh;
+    }
+    &__tools {
+      flex-direction: row-reverse;
+      margin-top: space(1.5);
+      .asd20-breadcrumb,
+      .back {
+        margin: 0 !important;
+        // order: 1;
+      }
+      .asd20-language-loader {
+        order: 2;
+      }
+    }
+
+    .back {
+      padding: 0;
+    }
+  }
+}
+</style>

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

@@ -6,7 +6,8 @@
       (formattedPrimaryMessages.length > 0 &&
         primaryMessages[0].bodyContent &&
         primaryMessages[0].bodyContent !== '<p></p>') ||
-        formattedPrimaryMessages.length > 1 || forceDisplay
+        formattedPrimaryMessages.length > 1 ||
+        forceDisplay
     "
   >
     <slot name="before"></slot>
@@ -23,6 +24,7 @@
         v-for="(messaging, index) in formattedPrimaryMessages"
         :key="index"
         v-bind="messaging"
+        :fullscreen="fullscreen"
       ></asd20-messaging>
     </section>
 
@@ -34,6 +36,7 @@
         v-for="(messaging, index) in formattedSecondaryMessages"
         :key="index"
         v-bind="messaging"
+        :fullscreen="fullscreen"
       ></asd20-messaging>
     </section>
     <slot name="default"></slot>
@@ -71,6 +74,7 @@ export default {
     grid: { type: Boolean, default: false },
     tag: { type: String, default: 'main' },
     forceDisplay: { type: Boolean, default: false },
+    fullscreen: { type: Boolean, default: false },
   },
 
   computed: {
@@ -78,6 +82,7 @@ export default {
       return {
         'asd20-page-content': true,
         'asd20-page-content--grid': this.grid,
+        'asd20-page-content--fullscreen': this.fullscreen,
       }
     },
     formattedPrimaryMessages() {
@@ -110,7 +115,7 @@ export default {
 
 .asd20-page-content {
   .notification-group--inline {
-    margin: space(2) space(1) space(0) space(1);
+    margin: space(2) space(1) space(2) space(1);
   }
 
   .primary-messaging-section,
@@ -122,9 +127,9 @@ export default {
     background: var(--color__tertiary);
   }
 
-  .asd20-messaging:not(:last-child) {
-    margin-bottom: space(2);
-  }
+  // .asd20-messaging:not(:last-child) {
+  //   margin-bottom: space(2);
+  // }
 
   &--grid {
     .primary-messaging-section,
@@ -145,16 +150,34 @@ export default {
   &::v-deep .omitMessageTitle .lead {
     display: none;
   }
+  &--fullscreen {
+    .primary-messaging-section,
+    .secondary-messaging-section {
+      // --minimum-column-width: 320px;
+      --gutter: #{space(1)};
+      display: block;
+      margin: calc(var(--gutter) * -1);
+
+      &::v-deep > * {
+        // flex: 1 1 var(--minimum-column-width);
+        // margin: var(--gutter) !important;
+      }
+    }
+  }
 }
 
 @media (min-width: 1024px) {
   .asd20-page-content {
     .notification-group--inline {
-      margin: space(2) space(3) space(-2) space(3);
+      margin: space(2) space(3) space(0) space(3);
     }
     .primary-messaging-section,
     .secondary-messaging-section {
       padding: space(2) space(3);
+      &::v-deep > * {
+        // flex: 1 1 var(--minimum-column-width);
+        margin: space(1) !important;
+      }
     }
   }
 }

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

@@ -86,6 +86,7 @@ export default {
     width: 50vw;
     color: var(--website-homepage-header__button-foreground-color);
     background: var(--website-homepage-header__button-background-color);
+    border: none;
     &:hover {
       color: var(--website-homepage-header__button-hover-foreground-color);
       background: var(--website-homepage-header__button-hover-background-color);
@@ -174,7 +175,6 @@ export default {
       );
       flex-direction: row;
       width: inherit;
-      border: none;
     }
   }
 }

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

@@ -23,7 +23,8 @@ const wrapper = {
     pageQueryResult,
     keywords: '',
     selectedCategories: [],
-    categoryOptions: []
+    categoryOptions: [],
+    languageCode: 'en',
   }),
 
   computed: {
@@ -67,6 +68,8 @@ stories.add(
       :search-open.sync="searchOpen"
       :keywords.sync="keywords"
       :selected-categories.sync="selectedCategories"
+      :languageCode.sync="languageCode"
+
       @announcements-in-view="loadAnnouncements"
       @stories-in-view="loadStories"
       @events-in-view="loadEvents"

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

@@ -17,7 +17,12 @@ const wrapper = {
     Asd20ArticleListTemplate,
   },
 
-  data: () => ({ pageQueryResult, keywords: '', selectedCategories: [] }),
+  data: () => ({
+    pageQueryResult,
+    keywords: '',
+    selectedCategories: [],
+    languageCode: 'en',
+  }),
 
   computed: {
     activeNotificationsByType() {
@@ -66,6 +71,7 @@ stories.add(
       :search-open.sync="searchOpen"
       :keywords.sync="keywords"
       :selected-categories.sync="selectedCategories"
+      :languageCode.sync="languageCode"
 
       @announcements-in-view="loadAnnouncements"
       @stories-in-view="loadStories"