@asd20/ui 3.7.0 → 3.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "private": false,
   "license": "MIT",
   "sideEffects": [

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

@@ -9,7 +9,9 @@
     <div class="asd20-site-search__viewport">
       <div class="asd20-site-search__options">
         <!-- Ask a Question -->
-        <div class="asd20-site-search__field asd20-site-search__field--question">
+        <div
+          class="asd20-site-search__field asd20-site-search__field--question"
+        >
           <!-- <label class="asd20-site-search__label">Ask a question</label> -->
           <div class="asd20-site-search__question-row">
             <asd20-search-field
@@ -17,7 +19,7 @@
               ref="question"
               v-model="questionText"
               @keyup.enter.stop.prevent="onAskQuestion"
-              placeholder="Ask a question"
+              placeholder="Ask a question (preview)"
             />
             <asd20-button
               class="asd20-site-search__ask-button"
@@ -34,7 +36,7 @@
             />
           </div>
         </div>
-        <hr/>
+        <hr />
 
         <!-- Search by Keyword -->
         <div class="asd20-site-search__field asd20-site-search__field--keyword">
@@ -71,6 +73,13 @@
           title="Ask a Question, or Search by Keyword"
           description="Use the top input for plain-language questions, then press 'Ask'; or search by keyword in the lower input box."
         />
+        <div class="disclaimer">
+          <p>
+            AI generated answers can have errors. Please contact our
+            <a href="www.asd20.org/help-desk">Help Desk</a> if you need
+            additional information.
+          </p>
+        </div>
 
         <!-- Answers tab -->
         <div v-show="currentTab === 'Answers'" scrollable>
@@ -78,11 +87,15 @@
             <h3>Answer</h3>
             <div class="asd20-site-search__ai-answer" v-html="aiAnswer" />
 
-            <div v-if="aiUiSources.length" class="asd20-site-search__ai-sources">
+            <div
+              v-if="aiUiSources.length"
+              class="asd20-site-search__ai-sources"
+            >
               <h4>Sources</h4>
               <ul>
                 <li v-for="src in aiUiSources" :key="src.url || src.id">
-                  <strong>Content from: {{ src.hostLabel }}</strong><br />
+                  <strong>Content from: {{ src.hostLabel }}</strong
+                  ><br />
                   <a :href="src.url" target="_blank" rel="noreferrer">
                     {{ src.title }}
                   </a>
@@ -97,7 +110,6 @@
 
         <!-- Pages tab -->
         <div v-show="currentTab === 'Pages'" scrollable>
-
           <!-- No results -->
           <asd20-notification
             v-if="keywords && _pages.length === 0 && !searchingPages"
@@ -134,7 +146,9 @@
 
       <div class="asd20-site-search__suggested" v-if="_groups.length > 0">
         <h3>
-          {{ _groups.length > 1 ? 'Suggested Contacts:' : 'Suggested Contact:' }}
+          {{
+            _groups.length > 1 ? 'Suggested Contacts:' : 'Suggested Contact:'
+          }}
         </h3>
         <asd20-list-item
           v-for="g in _groups"
@@ -242,7 +256,10 @@ 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: () => [] },
   },
 
@@ -496,15 +513,7 @@ export default {
       // If no DOM (e.g., SSR), return raw; client will re-run and sanitize.
       if (typeof window === 'undefined' || !window.document) return rawHtml
 
-      const allowedTags = new Set([
-        'P',
-        'UL',
-        'OL',
-        'LI',
-        'STRONG',
-        'EM',
-        'A',
-      ])
+      const allowedTags = new Set(['P', 'UL', 'OL', 'LI', 'STRONG', 'EM', 'A'])
       const allowedAttrs = {
         A: ['href'],
       }
@@ -512,9 +521,9 @@ export default {
       const container = window.document.createElement('div')
       container.innerHTML = rawHtml
 
-      const cleanNode = (node) => {
+      const cleanNode = node => {
         const children = Array.from(node.childNodes)
-        children.forEach((child) => {
+        children.forEach(child => {
           if (child.nodeType === 1) {
             const tag = child.tagName.toUpperCase()
             if (!allowedTags.has(tag)) {
@@ -526,7 +535,7 @@ export default {
             }
 
             const allowed = allowedAttrs[tag] || []
-            Array.from(child.attributes).forEach((attr) => {
+            Array.from(child.attributes).forEach(attr => {
               const name = attr.name.toLowerCase()
               if (!allowed.includes(attr.name)) {
                 child.removeAttribute(attr.name)
@@ -628,6 +637,17 @@ export default {
 
   &__results {
     flex-grow: 1;
+    .disclaimer {
+      padding: space(0.5);
+      font-size: 0.85rem;
+      background: var(--website-page__alternate-background-t25);
+      border-bottom: 1px solid var(--color__tertiary);
+
+      a {
+        color: var(--color__primary);
+        text-decoration: underline;
+      }
+    }
   }
 
   &__ai-result {

package/src/design/_typography.scss

@@ -94,7 +94,7 @@
   ul,
   ol {
     padding: 0;
-    list-style-position: outside;
+    list-style-position: inside;
     margin: space(0.25) 0 space(1) 0;
     display: flex;
     flex-wrap: wrap;