@asd20/ui 3.2.802 → 3.2.804

package/package.json

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

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

@@ -86,13 +86,15 @@
             @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)"
-          /> -->
+            :hideLabel="true"
+            placeholder="Filter by Category"
+          />
         </div>
 
         <div v-if="cards.length < 1">
@@ -270,7 +272,7 @@ import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMe
 import Asd20NotificationGroup from '../../../components/organisms/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'
 
@@ -296,7 +298,7 @@ export default {
     Asd20NotificationGroup,
     Asd20QuicklinksMenu,
     Asd20SearchField,
-    // Asd20MultiselectInput,
+    Asd20MultiselectInput,
     Asd20Card,
     Asd20Button,
     Intersect,
@@ -336,33 +338,33 @@ export default {
       //   link: c.link.replace('/stories', '/announcements'),
       // }))
     },
-    // 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
-    // },
+    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()
+      }
+    },
   },
-  // watch: {
-  //   selectedCategories: function(newVal, oldVal) {
-  //     if (newVal !== oldVal) {
-  //       this.reset()
-  //     }
-  //   },
-  // },
   methods: {
     nextSet() {
       if (
@@ -476,8 +478,15 @@ export default {
     margin: space(0) space(1) space(1) space(1);
   }
 
-  .asd20-search-field .asd20-icon {
-    margin-left: 0;
+  .asd20-search-field {
+    border: 2px solid var(--color__accent);
+    margin: space(0.5) 0;
+    .asd20-icon {
+      margin-left: space(0.5);
+    }
+  }
+  .asd20-multiselect-input span {
+    padding-left: 1rem;
   }
 }
 
@@ -542,6 +551,12 @@ export default {
     .article-digest {
       // flex-basis: 100%;
       margin: space(1) space(3) space(1) space(3);
+      .asd20-search-field {
+        border: none;
+        .asd20-icon {
+          margin-left: 0;
+        }
+      }
     }
   }
 }

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

@@ -97,13 +97,15 @@
               @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)"
-            /> -->
+              :hideLabel="true"
+              placeholder="Filter by Category"
+            />
             <!-- <asd20-multiselect-input
               role="listbox"
               aria-label="Choose a Category to Sort By"
@@ -314,7 +316,7 @@ import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMe
 import Asd20NotificationGroup from '../../../components/organisms/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'
 
@@ -340,7 +342,7 @@ export default {
     Asd20NotificationGroup,
     Asd20QuicklinksMenu,
     Asd20SearchField,
-    // Asd20MultiselectInput,
+    Asd20MultiselectInput,
     Asd20Card,
     Asd20Button,
     Intersect,
@@ -373,22 +375,22 @@ export default {
       //   link: c.link.replace('/stories', '/announcements'),
       // }))
     },
-    // categoryOptions() {
-    //   // get a unique array of categories with duplicates removed
-    //   return [
-    //     ...new Set(
-    //       this.cards.reduce((a, c) => a.concat(c.categories || []), []).sort()
-    //     ),
-    //   ]
-    // },
+    categoryOptions() {
+      // get a unique array of categories with duplicates removed
+      return [
+        ...new Set(
+          this.cards.reduce((a, c) => a.concat(c.categories || []), []).sort()
+        ),
+      ]
+    },
+  },
+  watch: {
+    selectedCategories: function(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.reset()
+      }
+    },
   },
-  // watch: {
-  //   selectedCategories: function(newVal, oldVal) {
-  //     if (newVal !== oldVal) {
-  //       this.reset()
-  //     }
-  //   },
-  // },
   methods: {
     nextSet() {
       if (
@@ -494,7 +496,7 @@ export default {
           text-decoration: none !important;
         }
         .asd20-button {
-          padding: 0;
+          padding: space(0.25);
           > .asd20-button__label {
             margin: 0;
           }
@@ -519,8 +521,15 @@ export default {
         background: rgba(200, 200, 200, 0.2);
       }
     }
-    .asd20-search-field .asd20-icon {
-      margin-left: 0;
+    .asd20-search-field {
+      border: 2px solid var(--color__accent);
+      margin: space(0.5) 0;
+      .asd20-icon {
+        margin-left: space(0.5);
+      }
+    }
+    .asd20-multiselect-input span {
+      padding-left: 1rem;
     }
     .asd20-card__content {
       padding: space(1) space(1);
@@ -577,6 +586,9 @@ export default {
       display: flex;
       flex-basis: 100%;
       justify-content: space-between;
+      .asd20-multiselect-input {
+        margin-bottom: 0;
+      }
     }
     .article-pagination {
       flex-direction: row;
@@ -584,6 +596,12 @@ export default {
     .article-list {
       flex-basis: 50%;
       margin: space(0) space(0) space(1) space(3);
+      .asd20-search-field {
+        border: none;
+        .asd20-icon {
+          margin-left: 0;
+        }
+      }
     }
     .asd20-card {
       margin-bottom: space(1);