Add pink border to VSearchButton on group hover

src/components/VHeader/VSearchBar/VSearchBar.vue

@@ -32,6 +32,7 @@ import { useMatchHomeRoute } from '~/composables/use-match-routes'
 import VInputField from '~/components/VInputField/VInputField.vue'
 import VSearchButton from '~/components/VHeader/VSearchBar/VSearchButton.vue'
 
+const SIZES = ['small', 'medium', 'large', 'standalone']
 /**
  * Displays a text field for a search query and is attached to an action button
  * that fires a search request. The loading state and number of hits are also
@@ -52,7 +53,11 @@ const VSearchBar = defineComponent({
     size: {
       type: String,
       required: true,
-      validator: (v) => ['small', 'medium', 'large', 'standalone'].includes(v),
+      /**
+       * @param {string} v
+       * @returns {boolean}
+       */
+      validator: (v) => SIZES.includes(v),
     },
     placeholder: {
       type: String,
@@ -64,6 +69,9 @@ const VSearchBar = defineComponent({
     const { matches: isHomeRoute } = useMatchHomeRoute()
 
     const searchText = computed(() => props.value)
+    /**
+     * @param {string} val
+     */
     const updateSearchText = (val) => {
       emit('input', val)
     }

src/components/VHeader/VSearchBar/meta/VSearchBar.stories.mdx

@@ -8,7 +8,7 @@ import {
 import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
 
 <Meta
-  title="Components/Header/Search bar"
+  title="Components/VHeader/Search bar"
   component={VSearchBar}
   argTypes={{
     input: {
@@ -46,6 +46,7 @@ button is clicked.
     name="Default"
     args={{
       value: 'Search query',
+      size: 'medium',
     }}
   >
     {Template.bind({})}
@@ -58,7 +59,7 @@ representing the search query.
 export const vModelTemplate = () => ({
   template: `
     <div>
-      <VSearchBar v-model="text">
+      <VSearchBar v-model="text" size="small">
         {{ text.length }}
       </VSearchBar>
       {{ text }}
@@ -85,6 +86,7 @@ easy `<input>` attributes like placeholders or HTML validations.
     name="With placeholder"
     args={{
       placeholder: 'Search query',
+      size: 'large',
     }}
   >
     {Template.bind({})}

src/components/VInputField/VInputField.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="input-field group flex flex-row items-center hover:bg-dark-charcoal-06 focus-within:bg-dark-charcoal-06 group-hover:bg-dark-charcoal-06 p-0.5px focus-within:p-0 border focus-within:border-1.5 border-dark-charcoal-20 rounded-sm overflow-hidden focus-within:border-pink"
+    class="input-field group flex flex-row items-center focus-within:bg-dark-charcoal-06 group-hover:bg-dark-charcoal-06 p-0.5px focus-within:p-0 border focus-within:border-1.5 border-dark-charcoal-20 rounded-sm overflow-hidden focus-within:border-pink"
     :class="[
       {
         // Padding is set to 1.5px to accommodate the border that will appear later.
@@ -26,20 +26,20 @@
   </div>
 </template>
 
-<script>
-import { computed } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 const FIELD_SIZES = {
   small: 'h-10 text-md',
   medium: 'h-12',
   large: 'h-14',
   standalone: 'h-14 md:h-[69px]',
-}
+} as const
 
 /**
  * Provides a control to enter text as input.
  */
-export default {
+export default defineComponent({
   name: 'VInputField',
   inheritAttrs: false,
   model: {
@@ -76,7 +76,8 @@ export default {
     connectionSides: {
       type: Array,
       default: () => [],
-      validator: (v) => v.every((item) => ['start', 'end'].includes(item)),
+      validator: (v: string[]) =>
+        v.every((item) => ['start', 'end'].includes(item)),
     },
     /**
      *  Small size is for mobile header/scrolled
@@ -85,18 +86,18 @@ export default {
      *  Standalone size is for homepage
      */
     size: {
-      type: String,
+      type: String as PropType<keyof typeof FIELD_SIZES>,
       required: true,
-      validator: (v) => ['small', 'medium', 'large', 'standalone'].includes(v),
+      validator: (v: string) => Object.keys(FIELD_SIZES).includes(v),
     },
   },
   // using non-native event name to ensure the two are not mixed
   emits: ['update:modelValue'],
   setup(props, { emit, attrs }) {
-    const type = attrs['type'] ?? 'text'
+    const type = typeof attrs['type'] === 'string' ? attrs['type'] : 'text'
 
-    const updateModelValue = (event) => {
-      emit('update:modelValue', event.target.value)
+    const updateModelValue = (event: Event) => {
+      emit('update:modelValue', (event.target as HTMLInputElement).value)
     }
     const sizeClass = computed(() => FIELD_SIZES[props.size])
 
@@ -108,7 +109,7 @@ export default {
       updateModelValue,
     }
   },
-}
+})
 </script>
 
 <style scoped>

src/composables/use-match-routes.js → src/composables/use-match-routes.ts

@@ -1,4 +1,10 @@
-import { useContext, ref, useRoute, useRouter } from '@nuxtjs/composition-api'
+import {
+  useContext,
+  ref,
+  useRoute,
+  useRouter,
+  Ref,
+} from '@nuxtjs/composition-api'
 
 /**
  * Reactive property that returns true only on the matching routes.
@@ -7,17 +13,18 @@ import { useContext, ref, useRoute, useRouter } from '@nuxtjs/composition-api'
  * Routes are also localized before comparison, so 'search' becomes
  * 'search__en', for example.
  *
- * @returns {{matches: import('@nuxtjs/composition-api').Ref<boolean>}}
  */
-export const useMatchRoute = (routes = []) => {
+export const useMatchRoute = (
+  routes: string[] = []
+): { matches: Ref<boolean> } => {
   const { app } = useContext()
   const route = useRoute()
   const router = useRouter()
   const localizedRoutes = routes.map(
-    (route) => app.localeRoute({ name: route }).name
+    (route) => app.localeRoute({ name: route })?.name
   )
   const matches = ref(localizedRoutes.includes(route.value.name))
-  router.beforeEach((to, from, next) => {
+  router.beforeEach((to, _from, next) => {
     matches.value = localizedRoutes.includes(to.name)
     next()
   })

tsconfig.json

@@ -52,6 +52,8 @@
     "src/components/VNotificationBanner.vue",
     "src/components/VMigrationNotice.vue",
     "src/components/VVariations.vue",
+    "src/components/VInputField/VInputField.vue",
+    "src/components/VHeader/VSearchBar/VSearchBar.vue",
     "src/composables/types.js",
     "src/composables/use-event-listener-outside.js",
     "src/composables/use-active-audio.js",