@asd20/ui 3.2.973 → 3.2.975

package/package.json

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

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

@@ -1,9 +1,17 @@
 <template>
-  <div :class="{ 'asd20-checkbox__no-icon': !icon }" class="asd20-checkbox">
+  <div
+    :class="[
+      'asd20-checkbox',
+      { 'asd20-checkbox__no-icon': !icon && !checkbox },
+      { 'asd20-checkbox__checkbox': !icon && checkbox }
+    ]"
+  >
     <input
       ref="checkbox"
       :id="id"
       :checked="value"
+      :role="!checkbox ? 'switch' : null"
+      :aria-checked="value.toString()"
       v-bind="$attrs"
       type="checkbox"
       @change="toggle"
@@ -29,6 +37,7 @@ export default {
     description: { type: String, default: '' },
     count: { type: Number, default: 0 },
     icon: { type: String, default: '' },
+    checkbox: { type: Boolean, default: false }
   },
   data() {
     return {
@@ -37,10 +46,10 @@ export default {
   },
   computed: {
     id() {
-      return (
-        `asd20-checkbox-${this.label.replace(/ /gi, '-').toLowerCase()}` ||
-        `asd20-checkbox-${this._uid}`
-      )
+      const base = this.label?.replace(/ /gi, '-').toLowerCase()
+      return base && base.length
+        ? `asd20-checkbox-${base}`
+        : `asd20-checkbox-${this._uid}`
     },
   },
   methods: {
@@ -142,6 +151,15 @@ export default {
       transform: translate3d(0, 0, 0);
     }
   }
+  &.asd20-checkbox__checkbox {
+    input {
+      position: absolute;
+      left: 1rem;
+      right: unset;
+      opacity: 1;
+    }
+
+  }
 
   input:focus + label:after {
     @include asd20-focus;

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

@@ -27,7 +27,17 @@
     <div class="asd20-list-item__content">
       <div v-if="label" class="asd20-list-item__label">
         <span v-html="label"></span>
+        <div class="asd20-list-item__icon" v-if="logoUrl && attribution">
+          <img
+            v-if="logoUrl"
+            :src="logoUrl"
+            alt="Organization Logo"
+            style="width: 28px; height: 28px; object-fit: contain"
+          />
+          <asd20-icon v-else :name="icon" :size="iconSize" />
+        </div>
         <asd20-icon
+          v-if="!logoUrl && !attribution"
           v-show="targetValue === '_blank'"
           name="external"
           size="sm"
@@ -39,6 +49,9 @@
         v-html="description"
       ></div>
       <asd20-tag-group v-if="tags && tags.length > 0" :tags="tags" />
+      <div v-if="sourceTitle && attribution" class="asd20-list-item__source">
+        Source: {{ sourceTitle }}
+      </div>
       <slot name="content" />
       <slot />
     </div>
@@ -88,6 +101,9 @@ export default {
     alignTop: { type: Boolean, default: false },
     to: { default: '' },
     link: { type: String, default: '' },
+    sourceTitle: { type: String, default: '' },
+    logoUrl: { type: String, default: '' },
+    attribution: { type: Boolean, default: false },
   },
 
   computed: {
@@ -231,6 +247,13 @@ export default {
     flex-shrink: 0;
     flex-grow: 0;
   }
+  &__source {
+    font-size: 0.75rem;
+    color: var(--color__primary);
+    // font-style: italic;
+    // color: var(--color__neutral-d40);
+    margin-top: space(0.25);
+  }
 
   &::v-deep .asd20-tag-group {
     margin-top: space(0.25);

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

@@ -80,6 +80,8 @@
       <asd20-site-search
         v-show="searchOpen"
         :active="searchOpen"
+        :organization="organization"
+        :organization-options="organizationOptions"
         @update:active="$emit('update:searchOpen', $event)"
       >
       </asd20-site-search>

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

@@ -1,4 +1,4 @@
-<template>
+\<template>
   <div
     ref="container"
     class="asd20-site-search"
@@ -11,16 +11,10 @@
         <asd20-search-field idTag="-sitewide" ref="search" v-model="keywords" />
         <asd20-checkbox
           v-show="hasParentOrg"
-          v-model="_includeDistrictSearchResults"
+          v-model="excludeDistrictResults"
           id="checkbox-id-search"
-          :label="
-            `Include ${
-              this._organization &&
-              this._organization.parentOrganization !== null
-                ? this._organization.parentOrganization.title
-                : ''
-            } Results?`
-          "
+          checkbox
+          label="Only show school results"
         />
       </div>
       <asd20-tab-bar :tabs="tabs" @tabClick="onTabClick" />
@@ -39,7 +33,8 @@
           <asd20-list @click.native="dismiss">
             <asd20-list-item
               v-for="item in pageListItems"
-              :key="item.label"
+              :key="item.page.id"
+              :attribution="!excludeDistrictResults"
               v-bind="item"
             />
           </asd20-list>
@@ -56,12 +51,14 @@
         </div>
       </asd20-viewport>
       <div class="asd20-site-search__suggested" v-if="_groups.length > 0">
-        <h3>Suggested Contact:</h3>
+        <h3>{{ _groups.length > 1 ? 'Suggested Contacts:' : 'Suggested Contact:' }}</h3>
         <asd20-list-item
           v-for="g in _groups"
           :text-avatar="
             g.abbreviation ||
-              (g.shortName || g.title).match(/\b([A-Z])/g).join('')
+            ((g.shortName || g.title || '')
+              .match(/\b([A-Z])/g) || [])
+              .join('')
           "
           :key="g.id"
           :label="`${g.title}`"
@@ -137,7 +134,7 @@ export default {
       'includeDistrictSearchResults',
       {
         type: Boolean,
-        default: false,
+        default: true,
       },
       'search'
     ),
@@ -159,7 +156,8 @@ export default {
 
   props: {
     active: { type: Boolean, default: false },
-    // organization: {type: Object, default: {title: "Academy District 20"} }
+    organization: {type: Object, default: {title: "Academy District 20"} },
+    organizationOptions: { type: Array, default: () => [] },
   },
 
   data: () => ({
@@ -176,10 +174,34 @@ export default {
 
   computed: {
     pageListItems() {
-      return mapPagesToListItems(this._pages)
+      return Array.isArray(this._pages)
+        ? mapPagesToListItems(this._pages).map(item => {
+            const org = this.organizationOptions.find(
+              o => o.id === item.page.ownerOrganizationId
+            )
+
+            let sourceTitle = 'Academy District 20'
+            let logoUrl = ''
+
+            if (org) {
+              if (org.title) {
+                sourceTitle = org.title
+              }
+              if (org.logoImageUrl) {
+                logoUrl = org.logoImageUrl
+              }
+            }
+
+            return {
+              ...item,
+              sourceTitle,
+              logoUrl
+            }
+          })
+        : []
     },
     fileListItems() {
-      return mapFilesToListItems(this._files)
+      return Array.isArray(this._files) ? mapFilesToListItems(this._files) : []
     },
     tabs() {
       return [
@@ -202,6 +224,14 @@ export default {
       return false
       // return true
     },
+    excludeDistrictResults: {
+      get() {
+        return !this._includeDistrictSearchResults
+      },
+      set(val) {
+        this._includeDistrictSearchResults = !val
+      }
+    },
   },
 
   watch: {
@@ -307,19 +337,19 @@ export default {
     flex-grow: 1;
   }
   &__suggested {
-    border-top: 1px solid var(--color__tertiary);
+    border-top: 2px solid var(--color__tertiary);
     background: var(--website-page__alternate-background-t50);
-    &::v-deep h3 {
-      font-size: 0.75rem;
-      font-weight: normal;
+    h3 {
+      font-size: 1rem;
+      font-weight: bold;
       color: var(--website-card__reverse-background-color);
       margin: space(0.25) 0 0 space(0.5);
     }
   }
   ::v-deep .asd20-checkbox {
-    justify-content: flex-end;
+    justify-content: flex-start;
     label {
-      padding: space(0.5) space(1);
+      padding: space(0.5) space(0.5) space(0.5) space(1.5);
       flex-grow: 0;
     }
   }

package/src/helpers/mapPagesToListItems.js

@@ -32,6 +32,9 @@ export default function mapPagesToListItems(pages) {
       // icon = 'external'
     }
 
+    tags = Array.from(new Set(tags))
+
+
     return {
       page: p,
       label: p.title,