@asd20/ui 3.2.593 → 3.2.595

package/package.json

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

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

@@ -110,7 +110,7 @@ $factoid-fg: var(--website-card__reverse-background-color);
   &__label {
     font-size: 0.875rem;
     font-weight: 300;
-    text-transform: uppercase;
+    // text-transform: uppercase;
     color: $factoid-fg;
     // white-space: nowrap;
     opacity: 0.75;

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

@@ -30,7 +30,7 @@ $factoids-header-fg: var(--color__primary);
 
 .asd20-factoids-section {
   position: relative;
-  margin-bottom: space(1);
+  margin-bottom: space(3);
   padding: space(2) 0 0 0;
 
   h2 {

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

@@ -125,7 +125,7 @@ export default {
   },
   methods: {
     onSelectEventCard(card) {
-      console.log(card.event)
+      // console.log(card.event)
       this.selectedEvent = card.event
     },
   },

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

@@ -87,13 +87,13 @@
             @input="$emit('update:keywords', $event)"
             medium
           />
-          <!-- <asd20-multiselect-input
+          <asd20-multiselect-input
             label="Categories"
             :taggable="false"
             :value="selectedCategories"
             :items="categoryOptions"
             @input="$emit('update:selected-categories', $event)"
-          /> -->
+          />
         </div>
 
         <div v-if="cards.length < 1">
@@ -101,7 +101,11 @@
           <p>There are currently no featues to view.</p>
         </div>
         <div class="feed" v-if="cards.length > 0">
-          <div id="list-start" class="article-pagination">
+          <div
+            v-if="cards.length > numberToShow"
+            id="list-start"
+            class="article-pagination"
+          >
             <p class="result-count">
               Viewing article {{ counter }}
               {{ counter === cards.length ? '' : '-' }}
@@ -154,7 +158,7 @@
               zoom
             ></asd20-card>
           </div>
-          <div class="article-pagination">
+          <div v-if="cards.length > numberToShow" class="article-pagination">
             <p class="result-count">
               Viewing article {{ counter }}
               {{ counter === cards.length ? '' : '-' }}
@@ -266,7 +270,7 @@ import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMe
 import Asd20NotificationGroup from '@asd20/notifications-ui/src/components/Asd20NotificationGroup'
 
 import Asd20SearchField from '../../../components/molecules/Asd20SearchField'
-// import Asd20MultiselectInput from '../../../components/atoms/Asd20MultiselectInput'
+import Asd20MultiselectInput from '../../../components/atoms/Asd20MultiselectInput'
 import Asd20Card from '../../../components/molecules/Asd20Card'
 import Asd20Button from '../../../components/atoms/Asd20Button'
 
@@ -292,7 +296,7 @@ export default {
     Asd20NotificationGroup,
     Asd20QuicklinksMenu,
     Asd20SearchField,
-    // Asd20MultiselectInput,
+    Asd20MultiselectInput,
     Asd20Card,
     Asd20Button,
     Intersect,
@@ -317,11 +321,16 @@ export default {
       return this.stories.map(s =>
         mapMessageToCard(s, {
           // reversed: true,
-          // time: '',
+          date: '',
+          time: '',
+          description: '',
           // image: '',
           pinned: false,
         })
       )
+
+      // .sort((a, b) => (a.title > b.title ? 1 : b.title > a.title ? -1 : 0))
+
       // .map(c => ({
       //   ...c,
       //   link: c.link.replace('/stories', '/announcements'),
@@ -421,6 +430,12 @@ export default {
   }
   .asd20-card {
     margin-bottom: space(0.5);
+    // &__date-time {
+    //   display: none;
+    // }
+    // &__description {
+    //   display: none;
+    // }
   }
   .article-pagination {
     display: flex;

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

@@ -98,6 +98,13 @@
               @input="$emit('update:keywords', $event)"
               medium
             />
+            <asd20-multiselect-input
+              label="Categories"
+              :taggable="false"
+              :value="selectedCategories"
+              :items="categoryOptions"
+              @input="$emit('update:selected-categories', $event)"
+            />
             <!-- <asd20-multiselect-input
               role="listbox"
               aria-label="Choose a Category to Sort By"
@@ -131,7 +138,11 @@
             <p>There are currently no announcements to view.</p>
           </div>
           <div class="feed" v-if="cards.length > 0">
-            <div id="list-start" class="article-pagination">
+            <div
+              v-if="cards.length > numberToShow"
+              id="list-start"
+              class="article-pagination"
+            >
               <p class="result-count">
                 Viewing article {{ counter }}
                 {{ counter === cards.length ? '' : '-' }}
@@ -185,7 +196,7 @@
                 expanded-description
               ></asd20-card>
             </div>
-            <div class="article-pagination">
+            <div v-if="cards.length > numberToShow" class="article-pagination">
               <p class="result-count">
                 Viewing article {{ counter }}
                 {{ counter === cards.length ? '' : '-' }}
@@ -304,7 +315,7 @@ import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMe
 import Asd20NotificationGroup from '@asd20/notifications-ui/src/components/Asd20NotificationGroup'
 
 import Asd20SearchField from '../../../components/molecules/Asd20SearchField'
-// import Asd20MultiselectInput from '../../../components/atoms/Asd20MultiselectInput'
+import Asd20MultiselectInput from '../../../components/atoms/Asd20MultiselectInput'
 import Asd20Card from '../../../components/molecules/Asd20Card'
 import Asd20Button from '../../../components/atoms/Asd20Button'
 
@@ -330,7 +341,7 @@ export default {
     Asd20NotificationGroup,
     Asd20QuicklinksMenu,
     Asd20SearchField,
-    // Asd20MultiselectInput,
+    Asd20MultiselectInput,
     Asd20Card,
     Asd20Button,
     Intersect,

package/src/components/templates/Asd20ClubsTemplate/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 Asd20ClubsTemplate 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: 'Clubs Template',
+}
+
+const wrapper = {
+  mixins: [mockPageMixin],
+  components: {
+    Asd20ClubsTemplate,
+  },
+
+  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 - Asd20ClubsTemplate', module)
+stories.addDecorator(withKnobs)
+
+stories.add(
+  'Default',
+  () => ({
+    ...wrapper,
+    template: `
+     <Asd20ClubsTemplate
+      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 }
+)