fix: search component v-bindings (#466)

* converting SearchInput to composition api and using defineModel()

* fixes to search filter group

* cleanup needed for listing pages and search

* fixing stray text-theme-red usage

* removing commented out code

* lint

apps/vue-storybook/.storybook/preview.ts

@@ -142,6 +142,7 @@ const preview: Preview = {
             'Blocks',
             ['Overview', 'Heroes', ['Overview', 'Small', 'Medium', 'Large']],
             'Heroes',
+            ['*', 'HeroMedia', 'HeroListingIndex'],
             'Forms',
             ['Overview', 'TextInput', 'TextArea'],
             'Search',

apps/vue-storybook/components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     BackToTop: typeof import('./node_modules/@explorer-1/vue/src/components/BackToTop/BackToTop.vue')['default']
     BaseAudio: typeof import('./node_modules/@explorer-1/vue/src/components/BaseAudio/BaseAudio.vue')['default']
     BaseButton: typeof import('./node_modules/@explorer-1/vue/src/components/BaseButton/BaseButton.vue')['default']
+    BaseCheckbox: typeof import('./node_modules/@explorer-1/vue/src/components/BaseCheckbox/BaseCheckbox.vue')['default']
     BaseCheckboxGroup: typeof import('./node_modules/@explorer-1/vue/src/components/BaseCheckboxGroup/BaseCheckboxGroup.vue')['default']
     BaseHeading: typeof import('./node_modules/@explorer-1/vue/src/components/BaseHeading/BaseHeading.vue')['default']
     BaseImage: typeof import('./node_modules/@explorer-1/vue/src/components/BaseImage/BaseImage.vue')['default']
@@ -68,6 +69,7 @@ declare module 'vue' {
     FormContact: typeof import('./node_modules/@explorer-1/vue/src/components/FormContact/FormContact.vue')['default']
     FormNewsletterSignup: typeof import('./node_modules/@explorer-1/vue/src/components/FormNewsletterSignup/FormNewsletterSignup.vue')['default']
     HeroLarge: typeof import('./node_modules/@explorer-1/vue/src/components/HeroLarge/HeroLarge.vue')['default']
+    HeroListingIndex: typeof import('./node_modules/@explorer-1/vue/src/components/HeroListingIndex/HeroListingIndex.vue')['default']
     HeroMedia: typeof import('./node_modules/@explorer-1/vue/src/components/HeroMedia/HeroMedia.vue')['default']
     HeroMedium: typeof import('./node_modules/@explorer-1/vue/src/components/HeroMedium/HeroMedium.vue')['default']
     HomePage: typeof import('./node_modules/@explorer-1/vue/src/templates/www/HomePage.vue')['default']

apps/vue-storybook/stories/components/BaseLink.stories.ts

@@ -22,7 +22,7 @@ export const BaseLinkData = {
   to: '/',
   href: '/',
   caret: false,
-  caretColor: 'text-theme-red',
+  caretColor: 'text-primary',
   default: 'Link Text'
 }
 

apps/vue-storybook/stories/templates/PageListingIndex.stories.js → apps/vue-storybook/stories/components/HeroListingIndex.stories.js

@@ -1,26 +1,18 @@
 import videoMp4 from '@explorer-1/common-storybook/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4'
 import videoWebm from '@explorer-1/common-storybook/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm'
-import PageListingIndex from '@explorer-1/vue/src/templates/PageListingIndex.vue'
+import HeroListingIndex from '@explorer-1/vue/src/components/HeroListingIndex/HeroListingIndex.vue'
 
 export default {
-  title: 'Templates/PageListingIndex',
-  component: PageListingIndex,
-  decorators: [
-    () => ({
-      template: `<div id="storyDecorator" class="absolute inset-0 disable-nav-offset"><story/><div class="container mx-auto">The rest of the page goes here (searchHelpers mixin)</div></div>`
-    })
-  ],
+  title: 'Components/Heroes/HeroListingIndex',
+  component: HeroListingIndex,
   parameters: {
-    html: {
-      root: '#storyDecorator'
-    },
     viewMode: 'canvas'
   },
   excludeStories: /.*Data$/
 }
 
 // data
-export const PageListingIndexData = {
+export const HeroListingIndexData = {
   listingPage: {
     featured: {
       url: '/news/new-maps-open-roads-to-research/',
@@ -49,14 +41,14 @@ export const PageListingIndexData = {
 export const Default = {
   args: {
     customLabel: 'Featured',
-    pageData: PageListingIndexData.listingPage
+    data: HeroListingIndexData.listingPage
   }
 }
 
 export const NewsImageHero = {
   args: {
     customLabel: 'Featured',
-    pageData: {
+    data: {
       featured: {
         url: '/news/new-maps-open-roads-to-research/',
         title: 'Creating Robots to go Where Humans Can’t',
@@ -88,7 +80,7 @@ export const NewsImageHero = {
 export const NewsVideoHero = {
   args: {
     customLabel: 'Featured',
-    pageData: {
+    data: {
       featured: {
         url: '/news/new-maps-open-roads-to-research/',
         title: 'Creating Robots to go Where Humans Can’t',
@@ -109,7 +101,7 @@ export const NewsVideoHero = {
 export const NewsCarouselHero = {
   args: {
     customLabel: 'Featured',
-    pageData: {
+    data: {
       featured: {
         url: '/news/new-maps-open-roads-to-research/',
         title: 'Creating Robots to go Where Humans Can’t',

packages/vue/components.d.ts

@@ -66,6 +66,7 @@ declare module 'vue' {
     FormContact: typeof import('./src/components/FormContact/FormContact.vue')['default']
     FormNewsletterSignup: typeof import('./src/components/FormNewsletterSignup/FormNewsletterSignup.vue')['default']
     HeroLarge: typeof import('./src/components/HeroLarge/HeroLarge.vue')['default']
+    HeroListingIndex: typeof import('./src/components/HeroListingIndex/HeroListingIndex.vue')['default']
     HeroMedia: typeof import('./src/components/HeroMedia/HeroMedia.vue')['default']
     HeroMedium: typeof import('./src/components/HeroMedium/HeroMedium.vue')['default']
     HomePage: typeof import('./src/templates/www/HomePage.vue')['default']
@@ -170,7 +171,6 @@ declare module 'vue' {
     NewsDetailMediaContact: typeof import('./src/components/NewsDetailMediaContact/NewsDetailMediaContact.vue')['default']
     PageContent: typeof import('./src/templates/PageContent.vue')['default']
     PageEventDetail: typeof import('./src/templates/PageEventDetail.vue')['default']
-    PageListingIndex: typeof import('./src/templates/PageListingIndex.vue')['default']
     ParallaxContainer: typeof import('./src/components/ParallaxContainer/ParallaxContainer.vue')['default']
     ParallaxElement: typeof import('./src/components/ParallaxElement/ParallaxElement.vue')['default']
     PastEventsCarousel: typeof import('./src/components/PastEventsCarousel/PastEventsCarousel.vue')['default']

packages/vue/dist/explorer-1-vue.js

@@ -906,7 +906,7 @@ const Te = /* @__PURE__ */ C(zt, [["render", Ft]]), Vt = k({
     color: {
       type: String,
       required: !1,
-      default: "text-theme-red"
+      default: "text-primary"
     },
     // default margin left class
     marginLeft: {
@@ -1550,7 +1550,7 @@ const Je = /* @__PURE__ */ C(da, [["render", ha]]), X = {
         return a.type === "image" && (t = `<div class="mx-auto container">
               ${a.title ? `<h6 class="font-semibold text-4xl mb-1">${a.title}</h6>` : ""}
               ${t.length ? `<div class="caption inline sm:flex text-body-md pb-2 mr-2 sm:mr-0"><div class="inline">${t}</div></div>` : ""}
-              ${a.url ? `<a href="${a.url}" class="inline-block text-body-md whitespace-nowrap relative text-theme-red can-hover:hover:text-theme-red-hover cursor-pointer focus:outline-none" title="Full Image Details">Full Image Details</a>` : ""}
+              ${a.url ? `<a href="${a.url}" class="inline-block text-body-md whitespace-nowrap relative text-primary can-hover:hover:text-primary-dark cursor-pointer focus:outline-none" title="Full Image Details">Full Image Details</a>` : ""}
             </div>`), t;
       }
     });

packages/vue/src/components/EventCard/EventCard.vue

@@ -24,20 +24,20 @@
         </p>
 
         <div class="md:mt-10 text-xl md:flex">
-          <div class="EventCard__Metadata flex text-theme-red text-body-sm">
+          <div class="EventCard__Metadata flex text-primary text-body-sm">
             <IconCalendar class="relative mr-3" />
             <span> {{ formattedEventDates }}</span>
           </div>
           <div
             v-show="displayTime"
-            class="EventCard__Metadata hidden md:flex text-theme-red text-body-sm"
+            class="EventCard__Metadata hidden md:flex text-primary text-body-sm"
           >
             <IconTime class="relative mr-3" />
             <span>{{ displayTime }}</span>
           </div>
           <div
             v-if="location"
-            class="EventCard__Metadata flex text-theme-red text-body-sm"
+            class="EventCard__Metadata flex text-primary text-body-sm"
           >
             <IconLocation class="relative mr-3" />
             <span>{{ location }}</span>

packages/vue/src/templates/PageListingIndex.vue → packages/vue/src/components/HeroListingIndex/HeroListingIndex.vue

@@ -1,36 +1,37 @@
 <template>
   <div
-    v-if="pageData"
+    v-if="data"
     class="max-w-screen-3xl mx-auto"
-    :class="{ '-nav-offset': pageData.featured }"
+    :class="{ '-nav-offset': data.featured }"
   >
     <HeroMedium
-      v-if="pageData.featured"
+      v-if="data.featured"
       class="md:mb-12 lg:mb-18 mb-10"
       :custom-label="customLabel"
-      :feature="pageData.featured"
+      :feature="data.featured"
       :custom-video="customVideo"
       :custom-image="customImage"
       :cta="cta"
     />
+    <h1 class="text-h1">{{ data?.title }}</h1>
   </div>
 </template>
 <script lang="ts">
-// PageListingIndex
-// Creating a wrapper for HeroMedium as PageListingIndex
+// HeroListingIndex
+// Creating a wrapper for HeroMedium as HeroListingIndex
 // needs to parse several different data shapes
 // Parsing occurs in the computed data and returns the appropriate data object for the media if it exists
 import { defineComponent } from 'vue'
-import HeroMedium from '../components/HeroMedium/HeroMedium.vue'
+import HeroMedium from '../HeroMedium/HeroMedium.vue'
 
 export default defineComponent({
-  name: 'PageListingIndex',
+  name: 'HeroListingIndex',
   components: {
     HeroMedium
   },
   props: {
     // pass these directly to HeroMedium
-    pageData: {
+    data: {
       type: Object,
       required: false
     },
@@ -46,17 +47,17 @@ export default defineComponent({
   computed: {
     // parses a hero streamfield block for a video (newsDetailPage model)
     customVideo(): object | undefined {
-      if (this.pageData && this.pageData.featured?.heroBlocks?.length > 0) {
-        if (this.pageData.featured.heroBlocks[0].blockType === 'VideoBlock') {
-          return this.pageData.featured.heroBlocks[0].video
+      if (this.data && this.data.featured?.heroBlocks?.length > 0) {
+        if (this.data.featured.heroBlocks[0].blockType === 'VideoBlock') {
+          return this.data.featured.heroBlocks[0].video
         }
       }
       return undefined
     },
     customImage(): object | undefined {
       // parse hero streamfield block for the first usable image (newsDetailPage model)
-      if (this.pageData && this.pageData.featured?.heroBlocks?.length > 0) {
-        const block = this.pageData.featured.heroBlocks[0]
+      if (this.data && this.data.featured?.heroBlocks?.length > 0) {
+        const block = this.data.featured.heroBlocks[0]
         if (block.blockType === 'ImageChooserBlock' || block.blockType === 'HeroImageBlock') {
           return block.image
         } else if (block.blockType === 'CarouselBlock') {
@@ -67,8 +68,8 @@ export default defineComponent({
         }
       }
       // else use heroImage
-      else if (this.pageData?.featured?.heroImage) {
-        return this.pageData.featured.heroImage
+      else if (this.data?.featured?.heroImage) {
+        return this.data.featured.heroImage
       }
       return undefined
     }

packages/vue/src/components/MixinAnimationCaret/MixinAnimationCaret.vue

@@ -25,7 +25,7 @@ export default defineComponent({
     color: {
       type: String,
       required: false,
-      default: 'text-theme-red'
+      default: 'text-primary'
     },
     // default margin left class
     marginLeft: {

packages/vue/src/components/MixinFancybox/MixinFancybox.vue

@@ -263,7 +263,7 @@ export default defineComponent({
               }
               ${
                 slide.url
-                  ? `<a href="${slide.url}" class="inline-block text-body-md whitespace-nowrap relative text-theme-red can-hover:hover:text-theme-red-hover cursor-pointer focus:outline-none" title="Full Image Details">Full Image Details</a>`
+                  ? `<a href="${slide.url}" class="inline-block text-body-md whitespace-nowrap relative text-primary can-hover:hover:text-primary-dark cursor-pointer focus:outline-none" title="Full Image Details">Full Image Details</a>`
                   : ''
               }
             </div>`

packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue

@@ -29,7 +29,7 @@
           v-model="filterByHandler"
           type="checkbox"
           :value="bucket.key_as_string ? bucket.key_as_string : bucket.key"
-          class="text-theme-red focus:ring-2 focus:ring-jpl-red flex-shrink-0 w-5 h-5 mt-px mr-1 align-middle border rounded-none"
+          class="text-primary focus:ring-2 focus:ring-primary flex-shrink-0 w-5 h-5 mt-px mr-1 align-middle border rounded-none"
         />
         <!-- 'key_as_string' exists for dates to have a human readable version -->
         <label
@@ -49,7 +49,7 @@
 
     <div v-show="truncateFilters && bucketsLength > checkbox.initialLimit">
       <button
-        class="can-hover:hover:underline text-theme-red mt-2"
+        class="can-hover:hover:underline text-primary mt-2"
         :aria-expanded="!checkbox.showMore ? 'true' : 'false'"
         aria-haspopup="true"
         :aria-controls="`filterGroup_${groupKey}`"
@@ -86,6 +86,7 @@ export default {
       default: false
     }
   },
+  emits: ['update:filterBy'],
   data() {
     return {
       checkbox: {
@@ -104,8 +105,6 @@ export default {
       },
       set(newValue) {
         this.$emit('update:filterBy', newValue)
-        // emit the `resetPage` event whenever these values are changed manually
-        this.$emit('resetPage')
       }
     },
     bucketsLength() {

packages/vue/src/components/SearchInput/SearchInput.vue

@@ -29,9 +29,9 @@
         :class="isFocused ? 'border-opacity-100' : 'border-opacity-50'"
       ></span>
     </div>
-
     <input
-      ref="searchQuery"
+      ref="searchQueryRef"
+      v-model="model"
       class="pl-14 focus:ring-2 relative z-10 w-full pr-5 text-lg bg-transparent border-0"
       :class="{
         'text-gray-dark': defaultColors,
@@ -40,63 +40,46 @@
       }"
       type="search"
       aria-label="Query"
-      :value="value"
       :placeholder="placeholder"
-      @keydown.esc="$emit('esc')"
-      @input="$emit('input', $event.target?.value)"
+      @keydown.esc="emit('esc')"
+      @input="emit('input', $event.target)"
       @focus="isFocused = true"
       @blur="isFocused = false"
     />
   </div>
 </template>
-<script lang="ts">
-// @ts-nocheck
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import IconSearch from './../Icons/IconSearch.vue'
 
-export default defineComponent({
-  name: 'SearchInput',
-  components: {
-    IconSearch
-  },
-  props: {
-    value: String,
-    // used in navigation search form
-    underlinedInput: {
-      type: Boolean,
-      default: false
-    },
-    // assign the same value as value (i.e. searchQuery)
-    underlinedInputValue: {
-      type: String || null,
-      required: false,
-      default: null
-    },
-    placeholder: {
-      type: String,
-      required: false
-    },
-    autoFocus: {
-      type: Boolean,
-      default: false
-    },
-    // note: if(underlinedInput), then the border will be overridden
-    defaultColors: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      isFocused: false
-    }
-  },
-  mounted() {
-    if (this.autoFocus) {
-      const inputField = this.$refs.searchQuery as HTMLElement
-      inputField.focus()
-      this.isFocused = true
-    }
+interface SearchInputProps {
+  underlinedInput?: boolean
+  underlinedInputValue?: string
+  placeholder?: string
+  autoFocus?: boolean
+  defaultColors?: boolean
+}
+
+// define props
+const props = withDefaults(defineProps<SearchInputProps>(), {
+  underlinedInput: false,
+  underlinedInputValue: undefined,
+  placeholder: '',
+  autoFocus: false,
+  defaultColors: true
+})
+
+const emit = defineEmits(['input', 'esc'])
+
+const model = defineModel()
+const isFocused = ref(false)
+const searchQueryRef = ref(undefined)
+
+onMounted(() => {
+  if (props.autoFocus && searchQueryRef.value) {
+    const inputField = searchQueryRef.value as HTMLElement
+    inputField.focus()
+    isFocused.value = true
   }
 })
 </script>