search

UCLALibrary / ucla-library-website-components

This is a library of Vue components that will be used in UCLA Library Nuxt websites.
Other
4 stars 1 forks source link

Component Request - NavSearch - {x}hrs #535

Open pghorpade opened 3 days ago

pghorpade commented 3 days ago

Component Description

This new component is used in Navigation menus to display search input, search icon and search button. You will find the design component in figma under Header Sticky. There is a library-website variation but it is out scope for this component request. FTVA theme scss partial will be created for this component and imported. There will be no filters in this component. The form will submit when the user clicks the button or presses the enter key and the page reloads using the router push feature and the route will be 

/search-site/?q=searchwords

Design

Please also see attached screenshots for quick reference.

If no mobile designs provided, please use your best judgment for responsiveness.

Slots

No slots

Props

No props needed

Developer Tips

List any developer tips here

  1. Look at SearchHome and SearchGeneric for search form implementation
  2. there will be a ref for the v-model 
    const searchWords = ref('')
  3. Add vue router composable 
    const router = useRouter()
  4. add computed method to fetch the actionUrl 
    const actionUrl = computed(() => {
return `/search-site`
})

  5. Add doSearch method which uses router.push method

    
function doSearch() {

router.push({
  path: actionUrl.value,
  query: {q: searchWords.value },
})

}

1. The catalog links will be a smart-link with following URL: `https://search.library.ucla.edu/discovery/search?vid=01UCS_LAL:UCLA&tab=Articles_books_more_slot&search_scope=ArticlesBooksMore&lang=en&query=any,contains,`

## Events

No events emitted

## Child components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

1. `SearchInput` is used for search input text

<SearchInput v-model="searchWords" class="search-input" :placeholder="placeholder" @clear="doSearch" @keyup.enter="doSearch" />



1. `ButtonLink` is used for submit button. This button needs ftva theme variation for primary and secondary styles
1. `IconSearch` svg component which will be added before SearchInput  component inside the form element.
1. `SmartLink` for search catalog link
1. Ask UX  for the colors and other styling tokens.

## Screenshots

![image](https://github.com/UCLALibrary/ucla-library-website-components/assets/4259468/3b9087bb-3dfc-4d68-9b22-d72f7df7e499)

![image](https://github.com/UCLALibrary/ucla-library-website-components/assets/4259468/f69faee8-1cca-4603-92c3-20bb4a73dde3)