henry-search 1.0.13 → 1.0.15

package/src/components/SearchDetail.vue

@@ -50,7 +50,7 @@ onMounted(() => {
     })
 
     document.addEventListener("click", function(){
-      document.querySelectorAll(".audioLinkBox").forEach((el) => {
+      document.querySelectorAll(".audioLinks__box").forEach((el) => {
         el.classList.remove("-open")
       })
     })
@@ -95,13 +95,15 @@ const formatLocation = (venue, location) => {
 const formatWorkAttribute = (works, attributeName) => {
     let returnString = ""
     const attributeArray = []
-    works.forEach((w) => {
-        w[attributeName].forEach((attr) => {
-            if (!attributeArray.includes(attr)) {
-                attributeArray.push(attr)
-            }
+    if (works) {
+        works.forEach((w) => {
+            w[attributeName].forEach((attr) => {
+                if (!attributeArray.includes(attr)) {
+                    attributeArray.push(attr)
+                }
+            })
         })
-    })
+    }
     attributeArray.forEach((attr, index) => {
         returnString += `<a href="${ createURL(`works.${ attributeName }`, attr) }">${ attr }${ index < attributeArray.length - 1 ? ";&nbsp;" : ""}</a>`
     })
@@ -118,13 +120,13 @@ const createURL = (facet, value) => {
 
 <template>
     <template v-if="performance">
-        <div class="performance__breadCrumb"><a :href="searchHistory[searchHistory.length - 1].link">Back to Search Results</a></div>
+        <div class="breadCrumb"><a :href="searchHistory && searchHistory.length ? searchHistory[searchHistory.length - 1].link : '/'">Back to Search Results</a></div>
         <div class="performance__details">
             <div class="performance__header">
                 <h1>{{ formatDate(performance.performance_date) }} Performance Detail</h1>
                 <h2>{{ formatTime(performance.performance_date) }} | {{ formatLocation(performance.venue, performance.location) }}</h2>
             </div>
-            <div class="performance__headerLinks">
+            <div class="headerLinks">
                 <event-links :detail="true" :item="performance" />
             </div>
             <div class="performance__headerData">
@@ -153,59 +155,59 @@ const createURL = (facet, value) => {
                 <div><span class="performance__dataTitle">Notes:</span><br/>{{ performance.notes ?? '---' }}</div>
             </div>
             <h4>Program</h4>
-            <div class="performance__grid">
+            <div class="performanceGrid">
                 <template v-for="work, index in performance.works">
                     <template v-if="index == 0">
-                        <div class="performance__cell -header -first">Composer</div>
-                        <div class="performance__cell -header">Works</div>
-                        <div class="performance__cell -header">Additional Creator</div>
-                        <div class="performance__cell -header">Artist</div>
-                        <div class="performance__cell -header">Role</div>
+                        <div class="performanceGrid__cell -header -first">Composer</div>
+                        <div class="performanceGrid__cell -header">Works</div>
+                        <div class="performanceGrid__cell -header">Additional Creator</div>
+                        <div class="performanceGrid__cell -header">Artist</div>
+                        <div class="performanceGrid__cell -header">Role</div>
                     </template>
 
-                <div :class="`performance__cell -first -composers 
+                <div :class="`performanceGrid__cell -first -composers 
                     ${ index == 0 ? '-top' : ''}
                     ${ index % 2 == 0 ? '-even' : '-odd' } 
                     ${ index + 1 == performance.works.length ? '-last' : ''}`">
-                        <span class="mobileHeader">Composer</span>
+                        <span class="performanceGrid__mobileHeader">Composer</span>
                         <span v-for="composer, index in work.composers">
                             <a :href="createURL('works.composers', composer)">{{ composer + (index < work.composers.length - 1 ? ",&nbsp;" : "") }}</a>
                         </span>
                     </div>
-                <div :class="`performance__cell ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.works.length ? '-last' : ''}`">
-                        <span class="mobileHeader">Work</span>
-                        <div class="workItem">
-                            <span class="infoItem">
+                <div :class="`performanceGrid__cell ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.works.length ? '-last' : ''}`">
+                        <span class="performanceGrid__mobileHeader">Work</span>
+                        <div class="performanceGrid__workItem">
+                            <span class="performanceGrid__infoItem">
                                 <a :href="createURL('works.title', work.title)">{{ work.title }}</a>
                                 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="work.has_recording">
                                     <path d="M9.81086 5L6.92983 7.30483H4.625V10.7621H6.92983L9.81086 13.0669V5Z" stroke="#01ABE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                     <path d="M12.4268 6.99365C12.9669 7.53393 13.2703 8.2666 13.2703 9.03054C13.2703 9.79449 12.9669 10.5272 12.4268 11.0674" stroke="#01ABE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                 </svg>    
                             </span>
-                            <span v-if="work.premiere" class="infoItem -small">Work Premiere:<br/>
+                            <span v-if="work.premiere" class="performanceGrid__infoItem -small">Work Premiere:<br/>
                                 <a :href="createURL('works.premiere', work.premier)">{{ work.premiere }}</a>
                             </span>
-                            <span v-if="work.commission" class="infoItem -small">Commission:<br/>
+                            <span v-if="work.commission" class="performanceGrid__infoItem -small">Commission:<br/>
                                 <a :href="createURL('works.commission', work.commission)">
                                     {{ work.commission }}
                                 </a>
                             </span>
-                            <span v-if="work.encore" class="infoItem -small"><a :href="createURL('works.encore', work.encore)">Encore</a></span>
+                            <span v-if="work.encore" class="performanceGrid__infoItem -small"><a :href="createURL('works.encore', work.encore)">Encore</a></span>
                             </div>
                     </div>
-                    <div :class="`performance__cell ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.works.length ? '-last' : ''}`">
-                        <span class="mobileHeader">Additional Creator</span>
-                        <span v-for="c in work.additional_creators" class="infoItem">
+                    <div :class="`performanceGrid__cell ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.works.length ? '-last' : ''}`">
+                        <span class="performanceGrid__mobileHeader">Additional Creator</span>
+                        <span v-for="c in work.additional_creators" class="performanceGrid__infoItem">
                             <a :href="createURL('works.additional_creators.name', c.name)">{{ c.name }}, {{ c.role }}</a>
                         </span>
                     </div>
-                    <div :class="`performance__cell -artist ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.works.length ? '-last' : ''}`">
-                        <span class="mobileHeader">Artist</span>
-                        <span v-for="a in work.artists" class="infoItem"><a :href="createURL('works.artists.name', a.name)">{{ a.name }}</a></span>
+                    <div :class="`performanceGrid__cell -artist ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.works.length ? '-last' : ''}`">
+                        <span class="performanceGrid__mobileHeader">Artist</span>
+                        <span v-for="a in work.artists" class="performanceGrid__infoItem"><a :href="createURL('works.artists.name', a.name)">{{ a.name }}</a></span>
                     </div>
-                <div :class="`performance__cell -role ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.works.length ? '-last' : ''}`">
-                        <span class="mobileHeader">Role</span>
-                        <span v-for="a in work.artists" class="infoItem"><a :href="createURL('works.artists.role', a.role)">{{ a.role }}</a></span>
+                <div :class="`performanceGrid__cell -role ${index % 2 == 0 ? '-even' : '-odd'} ${ index + 1 == performance.works.length ? '-last' : ''}`">
+                        <span class="performanceGrid__mobileHeader">Role</span>
+                        <span v-for="a in work.artists" class="performanceGrid__infoItem"><a :href="createURL('works.artists.role', a.role)">{{ a.role }}</a></span>
                     </div>
                 </template>
             </div> 

package/src/components/SearchTab.vue

@@ -73,6 +73,7 @@
     const showByWorks = ref(false)
     const workFilters = ref(null)
     const currentQuery = ref(null)
+    const filtersClosed = ref(false)
     
     const updateNow = ref(0)
 
@@ -117,18 +118,9 @@
     const searchClient = adapter.searchClient
 
     const toggleFilters = () => {
+        filtersClosed.value = !filtersClosed.value
         const wrapper = document.getElementById(`${props.indexName}_filterRail`)
-        const tabContent = document.getElementById(`${props.indexName}_tabs__content`)
-        const leftPane = document.getElementById(`${props.indexName}_eventsSearch__results`)
-        const toggleOnButton = document.getElementById(`${props.indexName}_filterToggleOn`)
-        if (toggleOnButton) {
-            toggleOnButton.classList.toggle('closed')
-        }
-        wrapper.classList.toggle('closed')
-        leftPane.classList.toggle('closed')
-        console.log("wrapper.classList.contains('closed')", wrapper.classList.contains('closed'), wrapper.classList)
         const allNestedElements = wrapper.querySelectorAll("*")
-        console.log('allNestedElements', allNestedElements)
         if (wrapper && wrapper.classList.contains('closed')) {
             allNestedElements.forEach((el) => {
                 el.setAttribute("tabindex", -1)
@@ -139,8 +131,6 @@
             })
         }
         
-        tabContent.classList.toggle('open')
-        tabContent.classList.toggle('closed')
     }
 
     const toggleFiltersMobile = () => {
@@ -165,9 +155,9 @@
             el.style.setProperty('--accordion-height-closed', `${summaryHeight}px`)
 
             setTimeout(() => {
-            el.open = false
-            el.classList.remove('-closing')
-            el.style.setProperty('--accordion-height-closed', 'auto')
+                el.open = false
+                el.classList.remove('-closing')
+                el.style.setProperty('--accordion-height-closed', 'auto')
             }, 0)
         })
     }
@@ -368,7 +358,7 @@
             let itemIndex = 0
             returnItems.forEach((item) => {
                 let shownWorks = []
-                item?.works.forEach((work) => {
+                item?.works?.forEach((work) => {
                     let workAdded = false
                     if (intersect(workFilters.value, work)?.length) {
                         shownWorks.push(work)
@@ -415,40 +405,38 @@
         :on-state-change="onStateChange"
         
     >
-        <div class="tabs__content open" :id="`${props.indexName}_tabs__content`">
+        <div :class="`tabs__content ${ filtersClosed ? 'closed' : 'open'}`" :id="`${props.indexName}_tabs__content`">
             <!-- Header and Search Section -->
             <div class="eventsSearch__topSection">
                 <!-- Search Filters Section -->
-                <section class="eventsSearch__filters">
-                    <div class="eventsSearch__filtersRow">
+                <section class="filters">
+                    <div class="filters__row">
                         <!-- Search Box -->
-                        <div class="eventsSearch__filterGroup eventsSearch__filterGroup--search">
+                        <div class="filters__filterGroup filters__search">
                             <ais-search-box
                                 
-                                class="eventsSearch__searchBox"
+                                class="searchBox"
                             >
                                 <template v-slot="{ currentRefinement, isSearchStalled, refine }">
-                                    <form class="ais-SearchBox-form" novalidate>
-                                        <label for="searchbox" class="hiddenLabel">{{ props.searchPlaceholder }}</label>
-                                        <input
-                                            class="ais-SearchBox-input"
-                                            id="searchbox"
-                                            type="search"
-                                            :value="currentRefinement"
-                                            @input="refine($event.currentTarget.value)"
-                                            :placeholder="props.searchPlaceholder"
-                                            >
-                                        <button type="submit" title="Submit the search query" class="ais-SearchBox-submit"><svg aria-hidden="true" width="10" height="10" viewBox="0 0 40 40" class="ais-SearchBox-submitIcon"><path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"></path></svg>
-                                        </button>
-                                    </form>
+                                    <label for="searchbox" class="label__hidden">{{ props.searchPlaceholder }}</label>
+                                    <input
+                                        class="ais-SearchBox-input"
+                                        id="searchbox"
+                                        type="search"
+                                        :value="currentRefinement"
+                                        @input="refine($event.currentTarget.value)"
+                                        :placeholder="props.searchPlaceholder"
+                                        >
+                                    <button type="submit" title="Submit the search query" class="ais-SearchBox-submit"><svg aria-hidden="true" width="10" height="10" viewBox="0 0 40 40" class="ais-SearchBox-submitIcon"><path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"></path></svg>
+                                    </button>
                                     <span :hidden="!isSearchStalled">Loading...</span>
                                 </template>
                             </ais-search-box>
                         </div>
-                        <div class="eventsSearch__filterGroup eventsSearch__filterGroup--date">
+                        <div class="filters__filterGroup dateRange">
                             <ais-range-input :attribute="props.sortField">
                                 <template v-slot="{ currentRefinement, range, refine }" >
-                                    <label for="start" class="hiddenLabel">Start Date</label>
+                                    <label for="start" class="label__hidden">Start Date</label>
                                     <vue-date-picker
                                         :aria-labels="{ input: 'Start Date'}"
                                         :model-value="toMinValue(currentRefinement, range)"
@@ -467,10 +455,9 @@
                                         :tab-submit="true"
                                         :text-input="true"
                                         placeholder="Start"
-                                        class="eventsSearch__datePicker"
                                         id="start"
                                     />
-                                    <label for="end" class="hiddenLabel">End Date</label>
+                                    <label for="end" class="label__hidden">End Date</label>
                                     <vue-date-picker
                                         :aria-labels="{ input: 'End Date'}"
                                         :model-value="toMaxValue(currentRefinement, range)"
@@ -485,19 +472,18 @@
                                         :multi-calendars="false"
                                         :enable-time-picker="false"
                                         placeholder="End"
-                                        class="eventsSearch__datePicker"
                                         id="end"
                                     />
                                 </template>
                             </ais-range-input>
                         </div>
-                        <div class="eventsSearch__filterGroup--button">
+                        <div class="filters__button">
                             <button class="button info">
                                 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="mobileSearch">
                                     <path d="M6.00037 11.2504C8.90007 11.2504 11.2507 8.89978 11.2507 6.00018C11.2507 3.10059 8.90007 0.75 6.00037 0.75C3.10067 0.75 0.75 3.10059 0.75 6.00018C0.75 8.89978 3.10067 11.2504 6.00037 11.2504Z" stroke="#14284E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                     <path d="M9.7124 9.71265L12.7502 12.7503" stroke="#14284E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                 </svg>
-                                <span class="searchButton">Search</span>
+                                <span class="filters__searchButton">Search</span>
                             </button>
                         </div>
                     </div>
@@ -505,12 +491,12 @@
             </div>
 
                 <!-- View Toggle and Active Filters -->
-            <section class="eventsSearch__filterRail" :id="`${props.indexName}_filterRail`">
+            <section :class="`filters__filterRail ${filtersClosed ? 'closed' : ''}`" :id="`${props.indexName}_filterRail`">
                 
-                <div class="eventsSearch__filterWrapper">
-                    <div class="eventsSearch__filterHeader">
-                        <div class="eventsSearch__filterToggle">
-                            <svg width="24" height="24" viewBox="0 0 24 24" class="filterIcon">
+                <div class="filters__wrapper">
+                    <div class="filters__header">
+                        <div class="filters__toggle">
+                            <svg width="24" height="24" viewBox="0 0 24 24" class="filters__icon">
                                 <rect width="24" height="24" rx="4" fill="#01ABE6"/>
                                 <path d="M6 7.25H18.8864" stroke="white" stroke-linecap="round"/>
                                 <path d="M6 12.5681H18.8864" stroke="white" stroke-linecap="round"/>
@@ -543,12 +529,12 @@
                                     </div>
                                 </summary>
                                 <div class="accordion__content" v-if="items.length || isFromSearch">
-                                    <div class="ais-SearchBox eventsSearch__searchBox -filter">
-                                        <label class="hiddenLabel" :for="refinement.attribute">{{ refinement.placeholder }}</label>
+                                    <div class="ais-SearchBox searchBox -filter">
+                                        <label class="label__hidden" :for="refinement.attribute">{{ refinement.placeholder }}</label>
                                         <input :id="refinement.attribute" @input="searchForItems($event.currentTarget.value)" :placeholder="refinement.placeholder" class="ais-SearchBox-input -filter"  v-if="!refinement.hideSearch">
                                     </div>
-                                    <div class="eventsSearch__checkBoxes">
-                                        <label v-for="item in items" class="eventsSearch__boxLabel" :for="slugify(refinement.title + ' ' + item.value)">
+                                    <div class="checkBoxes">
+                                        <label v-for="item in items" class="checkBoxes__boxLabel" :for="slugify(refinement.title + ' ' + item.value)">
                                             <div class="eventSearch__checkBox">
                                                 <input :class="`checkbox ${item.isRefined ? '-boxChecked' : ''}`" type="checkbox" :id="slugify(refinement.title + ' ' + item.value)"  :value="item.value" :checked="item.isRefined" @click="refine(item.value)">
                                             </div>
@@ -578,12 +564,12 @@
                                                 </div>
                                             </summary>
                                             <div class="accordion__content" v-if="items.length || isFromSearch">
-                                                <div class="ais-SearchBox eventsSearch__searchBox -filter" v-if="!refinement.hideSearch">
-                                                    <label class="hiddenLabel" :for="refinement.attribute">{{ refinement.placeholder }}</label>
+                                                <div class="ais-SearchBox searchBox -filter" v-if="!refinement.hideSearch">
+                                                    <label class="label__hidden" :for="refinement.attribute">{{ refinement.placeholder }}</label>
                                                     <input :id="refinement.attribute" @input="searchForItems($event.currentTarget.value)" :placeholder="refinement.placeholder" class="ais-SearchBox-input -filter">
                                                 </div>
-                                                <div class="eventsSearch__checkBoxes">
-                                                    <label v-for="item in items" class="eventsSearch__boxLabel" :for="slugify(refinement.title + ' ' + item.value)">
+                                                <div class="checkBoxes">
+                                                    <label v-for="item in items" class="checkBoxes__boxLabel" :for="slugify(refinement.title + ' ' + item.value)">
                                                         <div class="eventSearch__checkBox">
                                                             <input :class="`checkbox ${item.isRefined ? '-boxChecked' : ''}`" type="checkbox" :id="slugify(refinement.title + ' ' + item.value)"  :value="item.value" :checked="item.isRefined" @click="refine(item.value)">
                                                         </div>
@@ -632,16 +618,16 @@
                         </div>
                     </p-accordion>
                 </div>
-                <div class="actionBar">
+                <div class="clearRefinements">
                     <ais-clear-refinements :excluded-attributes="[]">
                         <template v-slot="{ refine, createURL }">
-                        <a
-                            :href="createURL()"
-                            @click.prevent="refine"
-                        >
-                            <button>Clear</button>
-                            <button @click="toggleFiltersMobile()" class="filterApply">Apply</button>
-                        </a>
+                            <a
+                                :href="createURL()"
+                                @click.prevent="refine"
+                            >
+                                <button>Clear</button>
+                                <button @click="toggleFiltersMobile()" class="filterApply">Apply</button>
+                            </a>
                         </template>
                     </ais-clear-refinements>
                     
@@ -649,12 +635,12 @@
             </section>
 
             <!-- Search Results Section -->
-            <section class="eventsSearch__results" :id="`${props.indexName}_eventsSearch__results`">
+            <section :class="`eventsSearch__results ${ filtersClosed ? 'closed' : ''}`" :id="`${props.indexName}_eventsSearch__results`">
                 
                 <ais-hits :key="updateNow" class="eventsSearch__hits" :transform-items="filterItems">
                     <template v-slot="{ items }">
                         <div class="eventsSearch__resultsHeader -mobile">
-                            <div class="eventsSearch__filterToggle">
+                            <div class="filters__toggle">
                                 <button class="filterButton" @click="toggleFiltersMobile()">
                                     <svg width="24" height="24" viewBox="0 0 24 24" >
                                         <rect width="24" height="24" rx="4" fill="#01ABE6"/>
@@ -668,7 +654,7 @@
                                     Filters
                                 </button>
                                 <div class="eventsSearch__resultsSort">Sort by: 
-                                    <select v-model="sortView" @change="setView">
+                                    <select name="Sort Order" v-model="sortView" @change="setView">
                                     <option value="Most Recent">Most Recent</option>
                                     <option value="Most Relevant">Most Relevant</option>
                                     <option value="Oldest First">Oldest First</option>
@@ -678,7 +664,7 @@
                         </div>
                         <div class="eventsSearch__resultsHeader">
                             <div class="eventsSearch__resultsTitle">
-                                <svg width="24" height="24" viewBox="0 0 24 24" :id="`${props.indexName}_filterToggleOn`" class="eventsSearch__filterToggleOn" @click="toggleFilters()">
+                                <svg width="24" height="24" viewBox="0 0 24 24" :id="`${props.indexName}_filterToggleOn`" :class="`filters__toggleOn ${filtersClosed ? 'closed' : ''}`" @click="toggleFilters()">
                                     <rect width="24" height="24" rx="4" fill="#01ABE6"/>
                                     <path d="M6 7.25H18.8864" stroke="white" stroke-linecap="round"/>
                                     <path d="M6 12.5681H18.8864" stroke="white" stroke-linecap="round"/>
@@ -697,22 +683,23 @@
                                 <h2 v-else>{{ props.resultsTitle }}</h2>
 
                             </div>
-                            <div class="eventsSearch__actions">
-                                <div class="eventsSearch__resultsSort">Sort by: 
-                                    <select v-model="sortView" @change="setView">
+                            <div class="resultActions">
+                                <div class="resultActions__sort">
+                                    <label class="resultActions__sortText">Sort by: </label>
+                                    <select name="sort_order" v-model="sortView" @change="setView">
                                     <option value="Most Recent">Most Recent</option>
                                     <option value="Most Relevant">Most Relevant</option>
                                     <option value="Oldest First">Oldest First</option>
                                     </select>
                                 </div>
-                                <div v-if="showNumHits" class="eventsSearch__actionButtons">
-                                    <a onclick="navigator.clipboard.writeText(window.location.href);" class="eventsSearch__actionIcon">
+                                <div v-if="showNumHits" class="resultActions__buttons">
+                                    <a onclick="navigator.clipboard.writeText(window.location.href);" class="resultActions__icon">
                                         <svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                             <path d="M3.8335 5.00683C4.00129 5.24348 4.21538 5.4393 4.46122 5.581C4.70706 5.72269 4.97891 5.80696 5.25834 5.82807C5.53776 5.84918 5.81823 5.80665 6.0807 5.70336C6.34317 5.60006 6.58152 5.43843 6.77957 5.22941L7.95175 3.99281C8.30762 3.6041 8.50454 3.08349 8.50009 2.5431C8.49564 2.00271 8.29018 1.48578 7.92796 1.10365C7.56574 0.721528 7.07574 0.504774 6.5635 0.500078C6.05127 0.495382 5.55778 0.70312 5.18932 1.07855L4.51727 1.78341" stroke="#01ABE6" stroke-linecap="round" stroke-linejoin="round"/>
                                             <path d="M5.83333 3.99326C5.64156 3.7566 5.3969 3.56078 5.11594 3.41908C4.83497 3.27739 4.52428 3.19313 4.20494 3.17201C3.8856 3.1509 3.56507 3.19343 3.2651 3.29673C2.96513 3.40002 2.69273 3.56165 2.46639 3.77067L1.12675 5.00727C0.720043 5.39598 0.494997 5.9166 0.500084 6.45698C0.505171 6.99737 0.739985 7.5143 1.15395 7.89643C1.56791 8.27855 2.12791 8.49531 2.71332 8.5C3.29874 8.5047 3.86273 8.29696 4.28382 7.92153L5.04741 7.21667" stroke="#01ABE6" stroke-linecap="round" stroke-linejoin="round"/>
                                         </svg>
                                     </a>
-                                    <a :href="`/actions/csvexport/csv-export${ routing.router.getLocation().search }`"  class="eventsSearch__actionIcon">
+                                    <a :href="`/actions/csvexport/csv-export${ routing.router.getLocation().search }`"  class="resultActions__icon">
                                         <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                             <path d="M7.47805 10.9099L0.5 10.9099" stroke="#01ABE6" stroke-linecap="round" stroke-linejoin="round"/>
                                             <path d="M0.75293 4.94067L3.92477 8.11252L7.09662 4.94067" stroke="#01ABE6" stroke-linecap="round" stroke-linejoin="round"/>
@@ -724,24 +711,24 @@
                         </div>
                         <ais-current-refinements :excluded-attributes="[]">
                             <template v-slot="{ items, createURL }">
-                                <div class="eventsSearch__activeFilters">
-                                    <div class="eventsSearch__activeTitle" v-if="items.length">Applied Filters</div>
+                                <div class="activeFilters">
+                                    <div class="activeFilters__title" v-if="items.length">Applied Filters</div>
                                     <ais-clear-refinements v-if="items.length" :excluded-attributes="[]">
                                         <template v-slot="{ canRefine, refine, createURL }">
                                         <a
                                             :href="createURL()"
                                             @click.prevent="refine"
                                             v-if="canRefine"
-                                            class="eventsSearch__clearFilters"
+                                            class="activeFilters__clearFilters"
                                         >
                                             Clear
                                         </a>
                                         <span v-else></span>
                                         </template>
                                     </ais-clear-refinements>
-                                    <ul class="eventsSearch__activeFiltersList">
-                                        <li v-for="item in items" :key="item.attribute" class="eventsSearch__activeFiltersGroup">
-                                        <ul class="eventsSearch__activeFiltersItems">
+                                    <ul class="activeFilters__filtersList">
+                                        <li v-for="item in items" :key="item.attribute">
+                                        <ul class="activeFilters__items">
                                             <li
                                             v-for="refinement in item.refinements"
                                             :key="[
@@ -750,13 +737,13 @@
                                                 refinement.value,
                                                 refinement.operator
                                             ].join(':')"
-                                            class="eventsSearch__activeFilterItem"
+                                            class="activeFilters__item"
                                             >
                                             <a
                                                 :href="createURL(refinement)"
                                                 @click.prevent="item.refine(refinement)"
                                                 v-html="formatRefinement(refinement)"
-                                                class="eventsSearch__activeFilterRemove"
+                                                class="activeFilters__remove"
                                             ></a>
                                             </li>
                                         </ul>
@@ -776,7 +763,7 @@
 
 
                 <!-- Pagination -->
-                <nav class="eventsSearch__pagination">
+                <nav class="resultsPagination">
                     <ais-stats>
                         <template v-slot="{ hitsPerPage, nbHits, page }">
                             {{ nbHits == 0 ? nbHits : page * hitsPerPage + 1 }} - {{ (((page + 1) * hitsPerPage)) < nbHits ? (((page + 1) * hitsPerPage)) : nbHits }} of {{ nbHits }} Results
@@ -794,13 +781,13 @@
                             createURL
                             }"
                         >
-                            <ul class="eventsSearch__paginationComponent" v-if="pages.length > 1">
-                                <li v-if="!isFirstPage && nbPages > 4" class="arrow">
+                            <ul class="resultsPagination__paginationComponent" v-if="pages.length > 1">
+                                <li v-if="!isFirstPage && nbPages > 5" class="arrow">
                                     <a :href="createURL(0)" @click.prevent="refine(0)">
                                     ‹‹
                                     </a>
                                 </li>
-                                <li v-if="!isFirstPage && nbPages > 4" class="arrow">
+                                <li v-if="!isFirstPage && nbPages > 5" class="arrow">
                                     <a
                                     :href="createURL(currentRefinement - 1)"
                                     @click.prevent="refine(currentRefinement - 1)"
@@ -837,8 +824,13 @@
                                             {{ nbPages - (5 - page) }}
                                         </a>
                                     </li>
+                                    <li v-for="page in nbPages - 1" v-if="nbPages <= 5">
+                                        <a :href="createURL(page)" :style="{ fontWeight: page === currentRefinement ? 'bold' : '' }">
+                                            {{ page + 1 }}
+                                        </a>
+                                    </li>
                                 </template>
-                                <li v-if="!isLastPage && nbPages > 4" class="arrow">
+                                <li v-if="!isLastPage && nbPages > 5" class="arrow">
                                     <a
                                     :href="createURL(currentRefinement + 1)"
                                     @click.prevent="refine(currentRefinement + 1)"
@@ -846,7 +838,7 @@
                                     ›
                                     </a>
                                 </li>
-                                <li v-if="!isLastPage && nbPages > 4" class="arrow">
+                                <li v-if="!isLastPage && nbPages > 5" class="arrow">
                                     <a :href="createURL(nbPages)" @click.prevent="refine(nbPages)">
                                     ››
                                     </a>

package/src/main.js

@@ -7,6 +7,7 @@ import { createApp } from 'vue'
 import Search from './components/Search.vue'
 import SearchDetail from './components/SearchDetail.vue'
 import SearchHistory from './components/SearchHistory.vue'
+import './styles/index.scss'
 
 export default {
 

package/src/styles/atoms/audioLinks/index.scss

@@ -0,0 +1,46 @@
+.audioLinks {
+
+    &__box {
+        display:none;
+        &.-open {
+            position:absolute;
+            right: 5rem;
+            margin-top: 2rem;
+            z-index: 100;
+            display:block;
+        }
+    }
+
+    &__label {
+        white-space:nowrap;
+        font-weight: 100;
+        font-size: 1rem;
+        padding: .75rem;
+        &.-first {
+            border-bottom: thin solid var(--color-gray-100);
+        }
+    }
+
+    &__link {
+        justify-content: end;
+        white-space:nowrap;
+        width: 100%;
+        font-size: 1rem;
+        padding: .75rem;
+        color: var(--color-turquoise);
+
+        &.-first {
+            border-bottom: thin solid var(--color-gray-100);
+        }
+    }
+
+    &__links {
+        background-color: white;
+        display: grid;
+        grid-template-columns: auto auto;
+        border: 1px solid var(--color-gray-100);
+        border-radius: 5px;
+        box-shadow: 0 0 10px var(--color-gray-100);         
+    }
+    
+}

package/src/styles/atoms/breadCrumb/index.scss

@@ -0,0 +1,12 @@
+@use "@imarc/pronto/resources/styles/imported" as *;
+
+.breadCrumb {
+    background-color: var(--color-light-gold);
+    padding: 0.5rem 1.5rem;
+    @include at(md) {
+        padding: 0.5rem 2rem 0.5rem 4rem;
+    }
+    @include at(lg) {
+        padding: 0.5rem 4rem 0.5rem 8rem;
+    }
+}