feat: create BlockCollection/GridCollections

.github/workflows/percy.yml

@@ -122,17 +122,27 @@ jobs:
         env:
           CYPRESS_CACHE_FOLDER: $HOME/.cache/Cypress
 
+      - name: Cache Storybook Build
+        id: cache-storybook
+        uses: actions/cache@v3
+        with:
+          path: storybook-static
+          key: storybook-${{ github.sha }}
+
+      - name: Build Storybook
+        if: steps.cache-storybook.outputs.cache-hit != 'true'
+        run: pnpm --filter @ucla-library-monorepo/ucla-library-website-components run build-storybook
+
       - name: Percy via Cypress (internal, Netlify preview)
         uses: cypress-io/github-action@v5
         with:
           working-directory: packages/vue-component-library
           install: false
-          start: "" # using remote Netlify URL
-          wait-on: ${{ github.event.inputs.preview_url }}
-          wait-on-timeout: 180
+          start: pnpm --filter @ucla-library-monorepo/ucla-library-website-components exec http-server ./storybook-static -p 6006
+          wait-on: http://localhost:6006
+          wait-on-timeout: 600
           command-prefix: "percy exec -- pnpx"
         env:
-          CYPRESS_baseUrl: ${{ github.event.inputs.preview_url }}
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_STORYBOOK_VUE3X }}
           PERCY_TARGET_BRANCH: main
 
@@ -165,18 +175,27 @@ jobs:
         env:
           CYPRESS_CACHE_FOLDER: $HOME/.cache/Cypress
 
+      - name: Cache Storybook Build
+        id: cache-storybook
+        uses: actions/cache@v3
+        with:
+          path: storybook-static
+          key: storybook-${{ github.sha }}
+
+      - name: Build Storybook
+        if: steps.cache-storybook.outputs.cache-hit != 'true'
+        run: pnpm --filter @ucla-library-monorepo/ucla-library-website-components run build-storybook
+
       - name: Percy via Cypress (fork, Netlify preview)
         uses: cypress-io/github-action@v5
         with:
           working-directory: packages/vue-component-library
           install: false
-          start: "" # using remote Netlify URL
-          wait-on: ${{ github.event.inputs.preview_url }}
-          wait-on-timeout: 180
+          start: pnpm --filter @ucla-library-monorepo/ucla-library-website-components exec http-server ./storybook-static -p 6006
+          wait-on: http://localhost:6006
+          wait-on-timeout: 600
           command-prefix: "percy exec -- pnpx"
         env:
-          CYPRESS_baseUrl: ${{ github.event.inputs.preview_url }}
-          # NOTE: uses your fork secret name from your earlier snippet
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_STORYBOOK }}
           PERCY_TARGET_BRANCH: main
           PERCY_BRANCH: pr-${{ github.event.inputs.pr_number }}-${{ needs.get-pr-info.outputs.head_ref_sanitized }}

package.json

@@ -33,6 +33,5 @@
   },
   "engines": {
     "pnpm": "^9.12.1"
-  },
-  "packageManager": "[email protected]"
+  }
 }

packages/component-library-nuxt-module/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [@ucla-library/component-library-nuxt-module-v1.2.85](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.84...@ucla-library/component-library-nuxt-module-v1.2.85) (2025-10-20)
+
+# [@ucla-library/component-library-nuxt-module-v1.2.84](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.83...@ucla-library/component-library-nuxt-module-v1.2.84) (2025-10-20)
+
+# [@ucla-library/component-library-nuxt-module-v1.2.83](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.82...@ucla-library/component-library-nuxt-module-v1.2.83) (2025-10-17)
+
+# [@ucla-library/component-library-nuxt-module-v1.2.82](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.81...@ucla-library/component-library-nuxt-module-v1.2.82) (2025-10-17)
+
+# [@ucla-library/component-library-nuxt-module-v1.2.81](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.80...@ucla-library/component-library-nuxt-module-v1.2.81) (2025-10-17)
+
+# [@ucla-library/component-library-nuxt-module-v1.2.80](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.79...@ucla-library/component-library-nuxt-module-v1.2.80) (2025-10-17)
+
 # [@ucla-library/component-library-nuxt-module-v1.2.79](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.78...@ucla-library/component-library-nuxt-module-v1.2.79) (2025-10-15)
 
 # [@ucla-library/component-library-nuxt-module-v1.2.78](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.77...@ucla-library/component-library-nuxt-module-v1.2.78) (2025-10-10)

packages/component-library-nuxt-module/FORCE_RELEASE.txt

@@ -1 +1 @@
-Triggered release at Wed Oct 15 14:38:07 UTC 2025
+Triggered release at Mon Oct 20 23:38:43 UTC 2025

packages/component-library-nuxt-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucla-library/component-library-nuxt-module",
-  "version": "1.2.79",
+  "version": "1.2.85",
   "publishConfig": {
     "access": "public"
   },

packages/vue-component-library/CHANGELOG.md

@@ -1,3 +1,45 @@
+# [@ucla-library-monorepo/ucla-library-website-components-v1.38.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library-monorepo/ucla-library-website-components-v1.37.1...@ucla-library-monorepo/ucla-library-website-components-v1.38.0) (2025-10-20)
+
+
+### Features
+
+* creates ButtonIiif component ([#806](https://github.com/UCLALibrary/ucla-library-website-components/issues/806)) ([957c9be](https://github.com/UCLALibrary/ucla-library-website-components/commit/957c9be9064dd755eb37e8d86371f63fc14ea01d))
+
+# [@ucla-library-monorepo/ucla-library-website-components-v1.37.1](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library-monorepo/ucla-library-website-components-v1.37.0...@ucla-library-monorepo/ucla-library-website-components-v1.37.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* only add primary-with-page-anchor when pageanchor present ([#842](https://github.com/UCLALibrary/ucla-library-website-components/issues/842)) ([04eaa4c](https://github.com/UCLALibrary/ucla-library-website-components/commit/04eaa4cc02e81e53daf0a40838da67113f52feb1))
+
+# [@ucla-library-monorepo/ucla-library-website-components-v1.37.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library-monorepo/ucla-library-website-components-v1.36.4...@ucla-library-monorepo/ucla-library-website-components-v1.37.0) (2025-10-17)
+
+
+### Features
+
+* add slot to card meta ([#841](https://github.com/UCLALibrary/ucla-library-website-components/issues/841)) ([79eeea8](https://github.com/UCLALibrary/ucla-library-website-components/commit/79eeea85b3e84f7e28054fc5f1d9717e17f624c2))
+
+# [@ucla-library-monorepo/ucla-library-website-components-v1.36.4](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library-monorepo/ucla-library-website-components-v1.36.3...@ucla-library-monorepo/ucla-library-website-components-v1.36.4) (2025-10-17)
+
+
+### Bug Fixes
+
+* APPS-3471 Truncate long breadcrumb titles ([#837](https://github.com/UCLALibrary/ucla-library-website-components/issues/837)) ([b367f9f](https://github.com/UCLALibrary/ucla-library-website-components/commit/b367f9fdf07486183f83b028dbed88a25e5f019c))
+
+# [@ucla-library-monorepo/ucla-library-website-components-v1.36.3](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library-monorepo/ucla-library-website-components-v1.36.2...@ucla-library-monorepo/ucla-library-website-components-v1.36.3) (2025-10-17)
+
+
+### Bug Fixes
+
+* APPS-3517 update font color on caption on ImageSlider ([#838](https://github.com/UCLALibrary/ucla-library-website-components/issues/838)) ([6ee2317](https://github.com/UCLALibrary/ucla-library-website-components/commit/6ee23175efcf178718405aba717a220c6ac35a8e))
+
+# [@ucla-library-monorepo/ucla-library-website-components-v1.36.2](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library-monorepo/ucla-library-website-components-v1.36.1...@ucla-library-monorepo/ucla-library-website-components-v1.36.2) (2025-10-17)
+
+
+### Bug Fixes
+
+* percy and eslint issues ([#839](https://github.com/UCLALibrary/ucla-library-website-components/issues/839)) ([430626f](https://github.com/UCLALibrary/ucla-library-website-components/commit/430626f6acdd67fc550240680e0e812a5f9e12e2))
+
 # [@ucla-library-monorepo/ucla-library-website-components-v1.36.1](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library-monorepo/ucla-library-website-components-v1.36.0...@ucla-library-monorepo/ucla-library-website-components-v1.36.1) (2025-10-15)
 
 

packages/vue-component-library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ucla-library-monorepo/ucla-library-website-components",
   "type": "module",
-  "version": "1.36.1",
+  "version": "1.38.0",
   "homepage": "https://ucla-library-storybook.netlify.app/?path=/docs/configure-your-project--docs",
   "repository": {
     "type": "git",

packages/vue-component-library/src/lib-components/ButtonIiif.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+// Imports
+import { computed } from 'vue'
+import IconIiif from 'ucla-library-design-tokens/assets/svgs/icon-iiif.svg'
+import SmartLink from '@/lib-components/SmartLink.vue'
+import { useTheme } from '@/composables/useTheme'
+
+defineProps<ButtonIiifProps>()
+
+// Theme
+const theme = useTheme()
+
+// Props
+interface ButtonIiifProps {
+  to: string
+}
+// Computed
+const classes = computed(() => (['button-iiif', theme?.value || '']))
+</script>
+
+<template>
+  <SmartLink
+    :to="to"
+    :class="classes"
+  >
+    <IconIiif class="icon-iiif" />
+  </SmartLink>
+</template>
+
+<style lang="scss" scoped>
+@import "@/styles/dlc/_button-iiif.scss";
+</style>

packages/vue-component-library/src/lib-components/CardMeta.vue

@@ -177,7 +177,9 @@ const classes = computed(() => {
       v-html="category"
     />
 
-    <!-- Named slot for custom title -->
+    <!-- Slot for injecting a title with any tags / styles (useful to substitute h1 tags for accessibility) -->
+    <slot name="anyTitle" />
+    <!-- Named slots for custom title with H3 tags -->
     <h3
       v-if="$slots.customTitle && !to && !title"
       class="custom-title"
@@ -296,13 +298,19 @@ const classes = computed(() => {
     />
 
     <!-- SHARE BUTTON -->
-    <div class="sharebutton-slot">
+    <div
+      v-if="$slots.sharebutton"
+      class="sharebutton-slot"
+    >
       <slot name="sharebutton" />
     </div>
 
     <!-- USED FOR BLOCKTAG SLOT -->
     <!-- MOVES BASED ON DESKTOP OR MOBILE -->
-    <div class="floating-slot">
+    <div
+      v-if="$slots.floatingslot"
+      class="floating-slot"
+    >
       <slot name="floatingslot" />
     </div>
 

packages/vue-component-library/src/lib-components/DateFilter.vue

@@ -286,7 +286,7 @@ onMounted(() => {
             class="event-dots"
           >
             <template
-              v-for=" index in dateFrequency[date.toLocaleDateString()]"
+              v-for="index in dateFrequency[date.toLocaleDateString()]"
               :key="index"
             >
               <!-- limit display to 3 events dots -->
@@ -403,7 +403,7 @@ onMounted(() => {
                 class="event-dots"
               >
                 <template
-                  v-for=" index in dateFrequency[date.toLocaleDateString()]"
+                  v-for="index in dateFrequency[date.toLocaleDateString()]"
                   :key="index"
                 >
                   <!-- limit display to 3 events dots -->
@@ -482,9 +482,12 @@ onMounted(() => {
       font-size: 18px;
       color: $medium-grey;
       border-radius: 8px;
-      &:hover, &:focus {
+
+      &:hover,
+      &:focus {
         border-color: #ddd;
       }
+
       &:hover {
         background-color: #f1f1f1;
       }

packages/vue-component-library/src/lib-components/FiltersDropdown.vue

@@ -89,18 +89,33 @@ onMounted(() => {
       </template>
       <template #dropdownItems="{ removeOverlay }">
         <div class="dropdown-filter">
-          <div v-for="group in filterGroups" :key="group.name" class="filter-group">
+          <div
+            v-for="group in filterGroups"
+            :key="group.name"
+            class="filter-group"
+          >
             <h3>{{ group.name }}</h3>
             <div class="pills">
               <!-- <label> must wrap <input> for accessbility fuctionality -->
-              <label v-for="option in group.options" :key="option" class="pill-label">
+              <label
+                v-for="option in group.options"
+                :key="option"
+                class="pill-label"
+              >
                 <!-- Hidden checkbox for managing selection & screen-reader user interaction -->
                 <input
-                  :id="option" v-model="selectedFilters[group.searchField]" type="checkbox" class="pill-checkbox"
-                  :name="option" :value="option"
+                  :id="option"
+                  v-model="selectedFilters[group.searchField]"
+                  type="checkbox"
+                  class="pill-checkbox"
+                  :name="option"
+                  :value="option"
                 >
                 <!-- BlockTag component for display -->
-                <BlockTag :label="option" :is-secondary="true">
+                <BlockTag
+                  :label="option"
+                  :is-secondary="true"
+                >
                   <!-- 'x' SVG only shows when selected -->
                   <template v-if="isSelected(group.searchField, option)">
                     <SvgGlyphX class="close-icon" />
@@ -111,11 +126,15 @@ onMounted(() => {
           </div>
           <div class="action-row">
             <ButtonLink
-              class="action-row-button select-button" label="Done" icon-name="none"
+              class="action-row-button select-button"
+              label="Done"
+              icon-name="none"
               @click="onDoneClick(); removeOverlay();"
             />
             <ButtonLink
-              class="action-row-button clear-button" label="Clear" icon-name="icon-close"
+              class="action-row-button clear-button"
+              label="Clear"
+              icon-name="icon-close"
               @click="clearFilters"
             />
           </div>

packages/vue-component-library/src/lib-components/ImageSlider.vue

@@ -139,7 +139,7 @@ function handleSliderInput(event: Event) {
   padding-top: 15px;
   width: 100%;
   text-align: center;
-  color: #737373;
+  color: $medium-grey;
 }
 
 .slider {

packages/vue-component-library/src/lib-components/NavBreadcrumb.vue

@@ -143,9 +143,10 @@ function createBreadcrumbLinks(arr: string[]) {
       const linkIndex = route.path.indexOf(item)
       const linkTo = route.path.substring(0, linkLength + linkIndex)
 
-      // Replace hyphens
+      // Replace hyphens and truncate long text if necessary
       const regex = /-/gi
       let linkTitle = item.replace(regex, ' ')
+      linkTitle = truncateTitle(linkTitle)
 
       // Determine if breadcrumb title should be overridden by data in `overrideTitleGroup` prop
       if (overrideTitleGroup.length > 0) {
@@ -201,6 +202,17 @@ function createBreadcrumbLinks(arr: string[]) {
   }
 }
 
+// Handle title truncation over 40 (mobile), 60 (desktop) characters
+function truncateTitle(str: string): string {
+  const strCount = str.length
+  if (strCount > 40 && isMobile.value)
+    return str.substring(0, 30).padEnd(33, '.')
+  else if (strCount > 60)
+    return str.substring(0, 47).padEnd(50, '.')
+  else
+    return str
+}
+
 // Event handler for parent breadcrumbs; if title prop is passed at page level as the final breadcrumb title, prevent it from from overriding a preceding parent title.
 function handleSetRouteTitle() {
   setRouteTitle.value = true

packages/vue-component-library/src/lib-components/NavPrimary.vue

@@ -314,7 +314,10 @@ onMounted(() => {
         class="slot-container"
         :class="[{ 'is-opened': slotIsOpened, 'is-opened-mobile': mobileMenuIsOpened }]"
       >
-        <slot name="additional-menu" :close-slot="closeSlot" />
+        <slot
+          name="additional-menu"
+          :close-slot="closeSlot"
+        />
       </div>
     </div>
 

packages/vue-component-library/src/lib-components/PageAnchor.vue

@@ -30,9 +30,11 @@ const classes = computed(() => {
   return ['page-anchor', theme?.value || '']
 })
 
-const isDropdownOpen = ref(theme?.value === 'ftva')
-
 const windowWidth = ref(window.innerWidth)
+
+// If the screen is Desktop and FTVA have pageAnchor default to open
+const isDropdownOpen = ref(theme?.value === 'ftva' && windowWidth.value > 1024)
+
 // Computed
 const sectionName = computed(() => {
   return color || getSectionName(route?.path)