feat: APPS-2788 Create Component FTVA NavSearch (#539)

* feat: initial commit

* feat: navsearch styles and fix story

* update design-token library, and design tokens, and some other styles

* fix: styles for button

---------

Co-authored-by: Jess Divers <[email protected]>
Co-authored-by: jendiamond <[email protected]>

package.json

@@ -72,7 +72,7 @@
         "sass": "^1.64.2",
         "storybook": "^7.4.1",
         "typescript": "^5.2.2",
-        "ucla-library-design-tokens": "^5.18.0",
+        "ucla-library-design-tokens": "^5.19.0",
         "video.js": "^8.5.2",
         "vite": "^5.3.1",
         "vite-svg-loader": "^4.0.0",

src/lib-components/NavSearch.vue

@@ -0,0 +1,82 @@
+<script
+  lang="ts"
+  setup
+>
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import IconSearch from 'ucla-library-design-tokens/assets/svgs/icon-ftva-search.svg'
+import { useTheme } from '@/composables/useTheme'
+
+import SearchInput from '@/lib-components/SearchInput.vue'
+import ButtonLink from '@/lib-components/ButtonLink.vue'
+import SmartLink from '@/lib-components/SmartLink.vue'
+
+const { placeholder } = defineProps({
+  placeholder: {
+    type: String,
+    default: 'Enter keywords to search this website',
+  },
+})
+const theme = useTheme()
+const router = useRouter()
+
+// DEFAULT CONTENT
+// if this component ever needs to be reused with different content,
+// we can pass these as default props instead
+const defaultBottomText = 'Looking for something else? Search the Film & Television Archive Catalog at '
+const defaultBottomLink = {
+  label: 'UC LIBRARY SEARCH >',
+  to: 'https://search.library.ucla.edu/discovery/search?vid=01UCS_LAL:UCLA&tab=Articles_books_more_slot&search_scope=ArticlesBooksMore&lang=en&query=any,contains,',
+}
+const classes = computed(() => {
+  return ['nav-search', theme?.value || '']
+})
+
+// SEARCH
+const searchWords = ref('')
+function doSearch() {
+  router.push({
+    path: '/search-site',
+    query: { q: searchWords.value },
+  })
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <span class="top-row">
+      <IconSearch class="icon" />
+      <SearchInput
+        v-model="searchWords"
+        class="search-input"
+        :placeholder="placeholder"
+        @clear="doSearch"
+        @keyup.enter="doSearch"
+      />
+      <ButtonLink
+        label="search site"
+        icon-name="none"
+        class="button-link"
+        @click="doSearch"
+      />
+    </span>
+
+    <span class="bottom-row">
+      {{ defaultBottomText }}
+      <SmartLink
+        id="search-link"
+        :to="defaultBottomLink.to"
+        class="bottom-link"
+      >
+        {{ defaultBottomLink.label }}
+      </SmartLink>
+    </span>
+  </div>
+</template>
+
+<style
+  lang="scss"
+  scoped
+>
+@import "@/styles/themes.scss";
+</style>

src/stories/NavSearch.spec.js

@@ -0,0 +1,7 @@
+describe('NAV / Search', () => {
+  it('Default', () => {
+    cy.visit('/iframe.html?id=nav-search--default&args=&viewMode=story')
+    cy.get('.nav-search').should('exist')
+    cy.percySnapshot('NAV / Search')
+  })
+})

src/stories/NavSearch.stories.js

@@ -0,0 +1,36 @@
+import { computed } from 'vue'
+import NavSearch from '@/lib-components/NavSearch'
+
+export default {
+  title: 'NAV / Search',
+  component: NavSearch,
+}
+
+const mockData = {
+  placeholder: 'Search the Library',
+}
+
+// Variations of stories below
+export function DefaultWithPlaceholderProp() {
+  return {
+    data() {
+      return {
+        ...mockData
+      }
+    },
+    components: { NavSearch },
+    template: '<nav-search :placeholder="placeholder"/>',
+  }
+}
+
+export function FTVA() {
+  return {
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { NavSearch },
+    template: '<nav-search />',
+  }
+}

src/styles/_base.scss

@@ -1,9 +1,9 @@
 // default styles correspond to old library-website-nuxt styles formerly in components
 
 @import "default/_blockremovesearchfilter";
-@import "default/_card-meta";
 @import "default/_divider-way-finder";
 @import "default/_blockeventdetail";
 @import "default/_blocktag";
 @import "default/_button-link";
 @import "default/_card-meta";
+@import "default/_nav-search";

src/styles/_ftva-theme.scss

@@ -6,8 +6,8 @@
 @import "ftva/_block-info";
 @import "ftva/_blocktag";
 @import "ftva/_blockremovesearchfilter";
-@import "ftva/_card-meta";
 @import "ftva/_divider-way-finder";
 @import "ftva/_blockeventdetail";
 @import "ftva/_button-link";
 @import "ftva/_card-meta";
+@import "ftva/_nav-search";

src/styles/default/_button-link.scss

@@ -98,7 +98,6 @@
         transition-property: clip-path, -webkit-clip-path;
         @include animate-normal;
 
-        @include button;
         display: inline-flex;
         align-items: center;
         justify-content: center;

src/styles/default/_nav-search.scss

@@ -0,0 +1,52 @@
+.nav-search {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    padding: 2rem;
+    margin: 0 auto;
+
+    .top-row {
+        position: relative;
+
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+
+        margin-bottom: 20px;
+        width: 100%;
+
+        .icon {
+            position: absolute;
+            left: 10px;
+            top: 20px;
+            z-index: 5;
+        }
+
+        :deep(.search-input-wrapper.search-input) {
+            flex-grow: 1;
+
+            input[data-search-input="true"] {
+                padding-left: 45px;
+            }
+        }
+
+        button.smart-link {
+            width: auto;
+        }
+    }
+
+    .bottom-row {
+        font-size: 18px;
+        text-align: left;
+        width: 100%;
+
+        a.bottom-link {
+            font-size: 20px;
+            font-weight: bold;
+            text-decoration: underline;
+            margin-left: 5px;
+        }
+    }
+}

src/styles/ftva/_nav-search.scss

@@ -0,0 +1,61 @@
+.ftva.nav-search {
+  color: $pure-white;
+  background-color: $navy-blue;
+
+  .top-row {
+    .icon {
+      top: 21px;
+      left: 29px;
+      width: 17px;
+      height: 17px;
+    }
+
+    :deep(.search-input-wrapper.search-input) {
+      input[data-search-input="true"] {
+        @include ftva-input;
+        background-color: $pure-white;
+        border-radius: 4px;
+        padding: 15px 10px 15px 63px;
+
+        &::placeholder {
+          text-transform: unset;
+        }
+      }
+
+      .clear-icon {
+        top: 18px;
+        right: 20px;
+        width: 17px;
+        height: 17px;
+
+        &::after,
+        &::before {
+          background-color: $navy-blue;
+        }
+      }
+    }
+
+    svg {
+      height: 20px;
+      width: 20px;
+
+      :deep(.svg__fill--primary-blue-03) {
+        fill: $navy-blue;
+      }
+    }
+  }
+
+  .button-link {
+    @include ftva-button;
+  }
+
+  .bottom-row {
+    @include ftva-body;
+    color: $grey-blue;
+
+    a.bottom-link {
+      @include ftva-button-link;
+      margin-left: 5px;
+    }
+  }
+}