@asd20/ui 3.2.910 → 3.2.912

package/package.json

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

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

@@ -173,11 +173,11 @@ export default {
   }
 
   &--emergency {
-    .asd20-notification__title,
-    .asd20-notification__cta {
-      color: #da2e0b;
-      border-color: #da2e0b;
-    }
+    // .asd20-notification__title,
+    // .asd20-notification__cta {
+    //   color: #da2e0b;
+    //   border-color: #da2e0b;
+    // }
     .asd20-icon {
       --line-color: #da2e0b;
       --fill-color: white;
@@ -196,11 +196,11 @@ export default {
   }
 
   &--alert {
-    .asd20-notification__title,
-    .asd20-notification__cta {
-      color: #dabf50;
-      border-color: #dabf50;
-    }
+    // .asd20-notification__title,
+    // .asd20-notification__cta {
+    //   color: #dabf50;
+    //   border-color: #dabf50;
+    // }
     .asd20-icon {
       --line-color: black;
       --fill-color: #dabf50;
@@ -355,7 +355,7 @@ export default {
   &--emergency.asd20-notification--inline {
     box-shadow: 0 0 0 5px #da2e0b;
     .asd20-icon {
-      --line-color: #white;
+      --line-color: #0e2c6c;
       --fill-color: #da2e0b;
     }
   }
@@ -378,6 +378,13 @@ export default {
       --fill-color: #dabf50;
     }
   }
+  &--alert.asd20-notification--inline {
+    box-shadow: 0 0 0 5px #dabf50;
+    .asd20-icon {
+      --line-color: #0e2c6c;
+      --fill-color: #dabf50;
+    }
+  }
 }
 @media (min-width: 768px) {
   .asd20-notification {

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

@@ -24,7 +24,7 @@
         :links="relatedLinks"
         v-bind="relatedLinksProps"
         :multi-column="full"
-        max-height="400px"
+        :max-height="relatedLinks.length > 20 ? '800px' : '400px'"
       />
 
       <asd20-people-list

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

@@ -0,0 +1,82 @@
+import { storiesOf } from '@storybook/vue'
+import { withKnobs, boolean } from '@storybook/addon-knobs'
+
+import mockPageMixin from '../../../mixins/mockPageMixin'
+
+import Asd20ArticleDigestCompactTemplate from '.'
+import pageQueryResult from '../../../data/page-queries/digest-page-query-result.json'
+import notifications from '../../../data/messages/notifications'
+import debounce from 'lodash-es/debounce'
+
+
+const info = {
+  summary: 'Article Digest Compact Template',
+}
+
+const wrapper = {
+  mixins: [mockPageMixin],
+  components: {
+    Asd20ArticleDigestCompactTemplate,
+  },
+
+  data: () => ({ 
+    pageQueryResult,
+    keywords: '',
+    selectedCategories: [],
+    categoryOptions: [],
+    languageCode: 'en',
+  }),
+
+  computed: {
+    activeNotificationsByType() {
+      const empty = {
+        inline: [],
+        banner: [],
+        floating: [],
+        status: [],
+      }
+      return boolean('Show Notifications', true)
+        ? notifications || empty
+        : empty
+    },
+  },
+  watch: {
+    keywords: debounce(function(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.loadAnnouncements(this.keywords, this.selectedCategories)
+      }
+    }, 500),
+    selectedCategories: debounce(function(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.loadAnnouncements(this.keywords, this.selectedCategories)
+      }
+    }, 500),
+  },
+}
+
+const stories = storiesOf('Templates - Asd20ArticleDigestCompactTemplate', module)
+stories.addDecorator(withKnobs)
+
+stories.add(
+  'Default',
+  () => ({
+    ...wrapper,
+    template: `
+     <Asd20ArticleDigestCompactTemplate
+      v-bind="templateProps"
+      :menu-open.sync="menuOpen"
+      :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"
+      @files-in-view="loadFiles"
+  
+      :categoryOptions="categoryOptions"
+    />`,
+  }),
+  { info }
+)

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

@@ -0,0 +1,566 @@
+<template>
+  <div class="asd20-template-article-digest-compact">
+    <!-- Skip Nav -->
+    <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')"
+      />
+    </client-only>
+
+    <!-- Page Header -->
+    <asd20-page-header
+      id="page-header"
+      v-if="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>
+
+    <!-- Inline-Notifications -->
+    <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>
+
+    <!-- Page Content -->
+    <asd20-page-content
+      :primary-messages="primaryMessages"
+      :secondary-messages="secondaryMessages"
+      omit-detail-links
+      omit-calls-to-action
+    ></asd20-page-content>
+
+    <intersect @enter="$emit('stories-in-view')">
+      <section aria-label="Feed Section" class="article-digest">
+        <h2 class="feed-title">
+          {{
+            storiesFeedProps && storiesFeedProps.title
+              ? storiesFeedProps.title
+              : 'Stories & Features'
+          }}
+        </h2>
+        <!-- <div class="search-header">
+          <asd20-search-field
+            :value="keywords"
+            @input="$emit('update:keywords', $event)"
+            medium
+          />
+          <asd20-multiselect-input
+            label="Categories"
+            :taggable="false"
+            :value="selectedCategories"
+            :items="categoryOptions"
+            @input="$emit('update:selected-categories', $event)"
+            :hideLabel="true"
+            placeholder="Filter by Category"
+          />
+        </div> -->
+
+        <div v-if="cards.length < 1">
+          <br />
+          <p>There are currently no features to view.</p>
+        </div>
+        <div class="feed" v-if="cards.length > 0">
+          <div
+            v-if="cards.length > numberToShow"
+            id="list-start"
+            class="article-pagination"
+          >
+            <p class="result-count">
+              Viewing article {{ counter }}
+              {{ counter === cards.length ? '' : '-' }}
+              {{
+                counter === cards.length
+                  ? ''
+                  : counter2 <= cards.length
+                  ? counter2
+                  : cards.length
+              }}
+              of {{ cards.length }}.
+            </p>
+            <div class="page-selector">
+              <div class="prev-next">
+                <asd20-button
+                  @click.native="prevSet()"
+                  class="load-more"
+                  icon="chevron"
+                  label="Prev"
+                  :iconAngle="-90"
+                  size="md"
+                  horizontal
+                  transparent
+                  centered
+                  opposite
+                  :disabled="counter === 1"
+                />
+                <p>
+                  Page {{ Math.ceil(counter2 / numberToShow) }} of
+                  {{ Math.ceil(cards.length / numberToShow) }}
+                </p>
+                <asd20-button
+                  @click.native="nextSet()"
+                  class="load-more"
+                  icon="chevron"
+                  label="Next"
+                  :iconAngle="90"
+                  size="md"
+                  horizontal
+                  transparent
+                  centered
+                  :disabled="cards.length < counter2"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="feed-items">
+            <asd20-card
+              v-for="(card, index) in cards.slice(counter - 1, counter2)"
+              :key="index"
+              v-bind="card"
+              zoom
+            ></asd20-card>
+          </div>
+          <div v-if="cards.length > numberToShow" class="article-pagination">
+            <p class="result-count">
+              Viewing article {{ counter }}
+              {{ counter === cards.length ? '' : '-' }}
+              {{
+                counter === cards.length
+                  ? ''
+                  : counter2 <= cards.length
+                  ? counter2
+                  : cards.length
+              }}
+              of {{ cards.length }}.
+            </p>
+            <div class="page-selector">
+              <div class="prev-next">
+                <a href="#list-start">
+                  <asd20-button
+                    @click.native="prevSet()"
+                    class="load-more"
+                    icon="chevron"
+                    label="Prev"
+                    :iconAngle="-90"
+                    size="md"
+                    horizontal
+                    transparent
+                    centered
+                    opposite
+                    :disabled="counter === 1"
+                  />
+                </a>
+                <p>
+                  Page {{ Math.ceil(counter2 / numberToShow) }} of
+                  {{ Math.ceil(cards.length / numberToShow) }}
+                </p>
+                <a href="#list-start">
+                  <asd20-button
+                    @click.native="nextSet()"
+                    class="load-more"
+                    icon="chevron"
+                    label="Next"
+                    :iconAngle="90"
+                    size="md"
+                    horizontal
+                    transparent
+                    centered
+                    :disabled="cards.length < counter2"
+                  />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </intersect>
+
+    <asd20-media-section
+      v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :images="this.combinedMessageImages || []"
+      :videos="this.combinedMessageVideos || []"
+    >
+    </asd20-media-section>
+
+    <!-- Bottom Widgets -->
+    <asd20-widgets-section
+      v-if="widgetsSectionProps.footer || $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>
+
+    <!-- Feeds -->
+    <!-- <asd20-feeds-section
+      :announcements="announcements"
+      :announcements-feed-props="announcementsFeedProps"
+      @announcements-in-view="$emit('announcements-in-view')"
+    ></asd20-feeds-section> -->
+
+    <!-- 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 '../../../components/organisms/Asd20NotificationGroup'
+
+import Asd20SearchField from '../../../components/molecules/Asd20SearchField'
+import Asd20MultiselectInput from '../../../components/atoms/Asd20MultiselectInput'
+import Asd20Card from '../../../components/molecules/Asd20Card'
+import Asd20Button from '../../../components/atoms/Asd20Button'
+
+import Intersect from 'vue-intersect'
+
+// Mixins
+import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+
+// Helpers
+import mapMessageToCard from '../../../helpers/mapMessageToCard'
+
+export default {
+  name: 'ArticleDigestConpactTemplate',
+  mixins: [pageTemplateMixin],
+  components: {
+    Asd20PageContent,
+    Asd20SkipTo,
+    Asd20PageHeader,
+    Asd20PageFooter,
+    Asd20SiteNavigation,
+    Asd20WidgetsSection,
+    Asd20FeedsSection,
+    Asd20NotificationGroup,
+    Asd20QuicklinksMenu,
+    Asd20SearchField,
+    Asd20MultiselectInput,
+    Asd20Card,
+    Asd20Button,
+    Intersect,
+    Asd20MediaSection,
+  },
+
+  props: {
+    keywords: { type: String, default: '' },
+    selectedCategories: { type: Array, default: () => [] },
+    // categoryOptions: { type: Array, default: () => [] },
+  },
+  data: function() {
+    return {
+      numberToShow: 25,
+      counter: 1,
+      counter2: 25,
+    }
+  },
+  computed: {
+    cards() {
+      if (!Array.isArray(this.stories)) return []
+      return this.stories.map(s =>
+        mapMessageToCard(s, {
+          // reversed: true,
+          date: '',
+          time: '',
+          description: '',
+          // image: '',
+          // pinned: false,
+        })
+      )
+    },
+    categoryOptions() {
+      // get a unique array of categories with duplicates removed
+      return [
+        ...new Set(
+          this.cards.reduce((a, c) => a.concat(c.categories || []), []).sort()
+        ),
+      ]
+    },
+    computedCategoryOptions() {
+      // get a unique array of categories with duplicates removed
+      if (this.categoryOptions.length === 0) {
+        return [
+          ...new Set(
+            this.cards.reduce((a, c) => a.concat(c.categories || []), []).sort()
+          ),
+        ]
+      }
+      return this.categoryOptions
+    },
+  },
+  watch: {
+    selectedCategories: function(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.reset()
+      }
+    },
+  },
+  methods: {
+    nextSet() {
+      if (
+        Math.ceil(this.counter2 / this.numberToShow) <
+        Math.ceil(this.cards.length / this.numberToShow)
+      ) {
+        this.counter = this.counter + this.numberToShow
+        this.counter2 = this.counter2 + this.numberToShow
+        this.$emit('stories-in-view')
+      }
+    },
+    prevSet() {
+      if (Math.ceil(this.counter2 / this.numberToShow) > 1) {
+        this.counter = this.counter - this.numberToShow
+        this.counter2 = this.counter2 - this.numberToShow
+        this.$emit('stories-in-view')
+      }
+    },
+    reset() {
+      this.counter = 1
+      this.counter2 = 25
+      this.$emit('stories-in-view')
+    },
+  },
+}
+</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-article-digest-compact {
+  @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.0375);
+  }
+  .notification-group--inline {
+    margin: space(2) space(1) space(1) space(1);
+  }
+  .asd20-page-content .primary-messaging-section {
+    padding: space(1) space(1);
+  }
+  .article-digest {
+    .feed-title {
+      margin: space(1) 0 space(1) space(1);
+    }
+    .asd20-card {
+      margin: space(1) space(1) space(2) space(1);
+    }
+
+    .article-pagination {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: space(1) space(0.25) space(0) space(0.25);
+      flex-direction: column;
+      p {
+        margin: 0;
+      }
+      .page-selector {
+        display: flex;
+        align-items: center;
+        .prev-next {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          a {
+            text-decoration: none !important;
+          }
+          .asd20-button {
+            padding: 0;
+            > .asd20-button__label {
+              margin: 0;
+              padding: 0.5rem;
+            }
+          }
+          p {
+            margin: 0 space(0.25);
+          }
+        }
+      }
+    }
+    .search-header,
+    .result-count {
+      margin: space(0) space(1) space(1) space(1);
+    }
+
+    .asd20-search-field {
+      margin: space(0.5) 0;
+      .asd20-icon {
+        margin-left: space(0.5);
+      }
+      input {
+        border: 2px solid var(--color__accent);
+        font-family: var(--website-typography__font-family-headlines);
+        font-size: 1rem;
+      }
+    }
+    .asd20-multiselect-input {
+      line-height: 1;
+      .multiselect__placeholder {
+        padding-left: space(0.5);
+        font-size: 1rem;
+      }
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .asd20-template-article-digest-compact {
+    .asd20-page-content .primary-messaging-section {
+      padding: space(1);
+    }
+    .article-digest {
+      .asd20-card {
+        margin: space(1) space(1) space(2) space(1);
+      }
+    }
+  }
+}
+@media (min-width: 1024px) {
+  .asd20-template-article-digest-compact {
+    @include template-desktop;
+    margin-left: space(3);
+    margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+    }
+    .notification-group--inline {
+      margin: space(2) space(3) space(1) space(3);
+      flex-basis: 100%;
+    }
+    .asd20-page-content {
+      margin: 0 space(1);
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      .primary-messaging-section {
+        padding: space(1) space(2);
+      }
+    }
+
+    .article-digest {
+      // flex-basis: 100%;
+      margin: space(1) space(3) space(1) space(3);
+      .feed-title {
+        margin-left: 0;
+      }
+      .prev-next {
+        margin: space(1) 0;
+      }
+      .primary-messaging-section {
+        max-width: 100vw;
+      }
+      .feed-items {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-gap: space(1);
+        margin-bottom: space(1);
+        .asd20-card {
+          margin: 0;
+        }
+      }
+      .search-header,
+      .result-count {
+        margin: space(0) space(0) space(1) space(0);
+      }
+      .search-header {
+        display: flex;
+        flex-basis: 100%;
+        justify-content: space-between;
+        .asd20-search-field {
+          margin: space(0.5) space(0.5);
+          flex-basis: 50%;
+          .asd20-icon {
+            margin-left: 0;
+          }
+        }
+        .asd20-multiselect-input {
+          margin-bottom: 0;
+          flex-basis: 50%;
+        }
+      }
+      .article-pagination {
+        flex-direction: row;
+      }
+    }
+  }
+}
+</style>

package/src/data/messages/notifications.json

@@ -75,7 +75,7 @@
         {
             "id": "77321f38-db7d-e103-97fb-6ee49723685x",
             "title": "Academy District 20 Schools are closed today.",
-            "icon": "weather-snow",
+            "icon": "alert",
             "description": "All schools are closed today due to inclement weather.",
             "callToActionUrl": "https://www.asd20.org",
             "callToActionLabel": "Learn about our closure policy.",