@asd20/ui-next 2.34.2 → 2.34.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.34.4](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.34.3...ui-next-v2.34.4) (2026-11-02)
+
+
+### Bug Fixes
+
+* edits to related page links in search results ([01e82a9](https://github.com/academydistrict20/asd20-ui-next/commit/01e82a98caef6c5ca809714a67c59e944682fd16))
+
+## [2.34.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.34.2...ui-next-v2.34.3) (2026-11-02)
+
+
+### Bug Fixes
+
+* add relevant related links to page search results using keyword searches ([c1f9025](https://github.com/academydistrict20/asd20-ui-next/commit/c1f9025943fb45f35948c19259a3fa0642532d2d))
+
 ## [2.34.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.34.1...ui-next-v2.34.2) (2026-11-02)
 
 ## [2.34.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.34.0...ui-next-v2.34.1) (2026-10-28)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.34.2",
+  "version": "2.34.4",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

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

@@ -0,0 +1,166 @@
+<template>
+  <section
+    v-if="links.length"
+    class="asd20-matching-search-links"
+    aria-label="Matching links on this page"
+    @click.stop
+  >
+    <ul>
+      <li
+        v-for="link in visibleLinks"
+        :key="link.url"
+      >
+        <a
+          :href="link.url"
+          :target="link.newWindow ? '_blank' : undefined"
+          :rel="link.newWindow ? 'noopener noreferrer' : undefined"
+          @click="$emit('navigate', $event)"
+        >
+          {{ link.title }}
+          <span
+            v-if="link.external"
+            class="asd20-matching-search-links__external"
+            aria-label="External link"
+          >↗</span>
+        </a>
+        <p
+          v-if="link.description"
+          class="asd20-matching-search-links__description"
+        >
+          {{ link.description }}
+        </p>
+      </li>
+    </ul>
+    <button
+      v-if="links.length > 2"
+      type="button"
+      :aria-expanded="expanded"
+      @click="expanded = !expanded"
+    >
+      {{
+        expanded
+          ? 'Show fewer matching links'
+          : `Show ${links.length - 2} more matching links`
+      }}
+    </button>
+  </section>
+</template>
+
+<script>
+import {
+  shouldOpenInNewWindow,
+  shouldShowExternalIcon,
+} from '../../../helpers/linkPolicy'
+
+export default {
+  name: 'Asd20MatchingSearchLinks',
+  props: {
+    matchingLinks: { type: Array, default: () => [] },
+    keywords: { type: String, default: '' },
+    pageUrl: { type: String, default: '' },
+  },
+  emits: ['navigate'],
+  data: () => ({ expanded: false }),
+  computed: {
+    links() {
+      const seen = new Set()
+      return this.matchingLinks
+        .flatMap(link => {
+          if (
+            !link ||
+            typeof link.title !== 'string' ||
+            !link.title.trim() ||
+            typeof link.url !== 'string' ||
+            !/^https?:\/\//i.test(link.url)
+          )
+            return []
+          try {
+            const url = new URL(link.url)
+            if (url.username || url.password || seen.has(url.href)) return []
+            seen.add(url.href)
+            const pageHost = this.pageUrl
+              ? new URL(this.pageUrl, 'https://www.asd20.org').hostname
+              : ''
+            return [
+              {
+                title: link.title.trim(),
+                url: url.href,
+                description:
+                  typeof link.description === 'string' ? link.description : '',
+                external: shouldShowExternalIcon(url.href, pageHost),
+                newWindow: shouldOpenInNewWindow(url.href),
+              },
+            ]
+          } catch (_error) {
+            return []
+          }
+        })
+        .slice(0, 8)
+    },
+    visibleLinks() {
+      return this.expanded ? this.links : this.links.slice(0, 2)
+    },
+  },
+  watch: {
+    keywords() {
+      this.expanded = false
+    },
+    matchingLinks() {
+      this.expanded = false
+    },
+  },
+}
+</script>
+
+<style scoped>
+.asd20-matching-search-links {
+  padding: 0 1rem 1rem 3.25rem;
+  font-family: var(--website-typography__font-family-body);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+li {
+  border-inline-start: 2px solid var(--color__tertiary);
+  padding-inline-start: 0.75rem;
+}
+li + li {
+  margin-top: 0.75rem;
+}
+a {
+  color: var(--color__primary);
+  font-weight: 600;
+  text-decoration: none;
+}
+a:focus-visible,
+button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 3px;
+}
+.asd20-matching-search-links__description {
+  margin: 0.25rem 0;
+  font-size: 0.9375rem;
+}
+.asd20-matching-search-links__external {
+  margin-inline-start: 0.25rem;
+}
+button {
+  margin-top: 0.75rem;
+  padding: 0.25rem 0;
+  border: 0;
+  background: transparent;
+  color: var(--color__primary);
+  font: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+@media (max-width: 600px) {
+  .asd20-matching-search-links {
+    padding-inline: 1rem;
+  }
+}
+</style>

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

@@ -285,11 +285,28 @@
           />
 
           <asd20-list @click="dismiss">
-            <asd20-list-item
+            <div
               v-for="item in pageListItems"
-              v-bind="item"
               :key="item.page.id"
-            />
+              class="asd20-site-search__page-result"
+              :class="{
+                'asd20-site-search__page-result--matching':
+                  item.page.matchingLinks && item.page.matchingLinks.length,
+              }"
+            >
+              <asd20-list-item
+                v-bind="item"
+                :bordered="
+                  !(item.page.matchingLinks && item.page.matchingLinks.length)
+                "
+              />
+              <asd20-matching-search-links
+                :matching-links="item.page.matchingLinks || []"
+                :keywords="keywords"
+                :page-url="item.page.url"
+                @navigate="dismiss"
+              />
+            </div>
           </asd20-list>
 
           <asd20-loader
@@ -555,6 +572,7 @@ import Asd20Spinner from '../../atoms/Asd20Spinner'
 
 import debounce from 'lodash/debounce'
 import mapPagesToListItems from '../../../helpers/mapPagesToListItems'
+import Asd20MatchingSearchLinks from '../../molecules/Asd20MatchingSearchLinks'
 import mapFilesToListItems from '../../../helpers/mapFilesToListItems'
 import mapPeopleToListItems from '../../../helpers/mapPeopleToListItems'
 import logSearchAnalytics from '../../../helpers/logSearchAnalytics'
@@ -610,6 +628,7 @@ export default {
   name: 'Asd20SiteSearch',
 
   components: {
+    Asd20MatchingSearchLinks,
     Asd20SearchField,
     Asd20List,
     Asd20ListItem,
@@ -3622,6 +3641,14 @@ export default {
 <style lang="scss" scoped>
 @use '../../../design/component-stack' as *;
 
+.asd20-site-search__page-result {
+  min-width: 0;
+  width: 100%;
+}
+.asd20-site-search__page-result--matching {
+  border-bottom: 1px solid var(--color__tertiary);
+}
+
 .asd20-site-search {
   position: fixed;
   z-index: 311;