feat: APPS-2516 Add block remove search filter to vue3 branch (#437)

* update to vue3 and afix the colorway functionality

* fix outline on button and updtae README with connection to Nuxt directions
git push origin APPS-2516_add-block-remove-search-filter-to-vue3-branch_1-24-24

* update stories

* run auto-fix on linter

* delete changes to the README

* update focus area to the entire button

* fix linting errors

.gitignore

@@ -33,3 +33,4 @@ cypress/e2e/2-advanced-examples
 serve
 vite.config.serve.ts
 src/App.vue
+src/mock.js

README.md

@@ -4,7 +4,7 @@ This template should help get you started developing with Vue 3 and TypeScript i
 
 ## Recommended IDE Setup
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+-   [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 
 ## Type Support For `.vue` Imports in TS
 
@@ -13,8 +13,8 @@ TypeScript cannot handle type information for `.vue` imports by default, so we r
 If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
 
 1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+    1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
 
 ## Setup
@@ -27,13 +27,16 @@ pnpm install
 ```
 
 ## Development Server
+
 Start the development server on `http://localhost:5173`:
 
 ```bash
 # pnpm
 pnpm run dev
 ```
+
 ## Test component library package Server
+
 Start the vite server on `http://localhost:5174`:
 
 ```bash
@@ -42,21 +45,19 @@ pnpm run serve
 ```
 
 ## Test stories
+
 Start the storybook on `http://localhost:6006`:
 
 ```bash
 # pnpm
 pnpm run storybook
 ```
 
-## Build vite  component library 
+## Build vite component library
+
 Build library using vite:
 
 ```bash
 # pnpm
 pnpm run vite
 ```
-
-
-
-

src/lib-components/BlockRemoveSearchFilter.vue

@@ -0,0 +1,110 @@
+<script setup>
+// Helpers
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import SvgGlyphClose from 'ucla-library-design-tokens/assets/svgs/icon-close.svg'
+import getSectionName from '@/utils/getSectionName'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  filterType: {
+    type: String,
+    default: '',
+  },
+  index: {
+    type: Number,
+    default: 0,
+  },
+  color: {
+    type: String,
+    default: '', // This will be "visit", "about", "help".
+  },
+},)
+
+const emit = defineEmits(['removeBlockFilter'])
+
+const route = useRoute()
+
+const sectionName = computed(() => {
+  return (
+    props.color
+    || (route.path
+      ? getSectionName(route.path)
+      : 'color-default')
+  )
+})
+
+const classes = computed(() => {
+  return ['block-remove-search-filter', `color-${sectionName.value}`]
+})
+
+function closeBlockFilter() {
+  emit('removeBlockFilter', props.index)
+}
+</script>
+
+<template>
+  <button type="button" :class="classes" @click="closeBlockFilter">
+    <span class="title">{{ title }}</span>
+
+    <span class="button-close">
+      <SvgGlyphClose class="svg-glyph-close" />
+    </span>
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.block-remove-search-filter {
+  padding: 12px;
+  display: flex;
+  flex-direction: row;
+  border: 1.5px var(--color-border) solid;
+  background-color: #ffffff;
+  border-radius: 4px;
+  align-items: center;
+  width: fit-content;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 100%;
+
+  .title {
+    margin-right: 8px;
+    color: #032d5b;
+  }
+
+  &.color-default {
+    --color-border: var(--color-default-cyan-03);
+
+    &:hover {
+      background-color: transparentize(($default-cyan-03), 0.9);
+    }
+  }
+
+  &.color-help {
+    --color-border: var(--color-help-green-03);
+
+    &:hover {
+      background-color: transparentize(($help-green-03), 0.9);
+    }
+  }
+
+  &.color-visit {
+    --color-border: var(--color-visit-fushia-03);
+
+    &:hover {
+      background-color: transparentize(($visit-fushia-03), 0.9);
+    }
+  }
+
+  &.color-about {
+    --color-border: var(--color-about-purple-03);
+
+    &:hover {
+      background-color: transparentize(($about-purple-03), 0.9);
+    }
+  }
+}
+</style>

src/lib-components/index.js

@@ -18,6 +18,7 @@ export { default as BlockFloatingHighlight } from './BlockFloatingHighlight.vue'
 export { default as BlockForm } from './BlockForm.vue'
 export { default as BlockGenericList } from './BlockGenericList.vue'
 export { default as BlockMediaWithText } from './BlockMediaWithText.vue'
+export { default as BlockRemoveSearchFilter } from './BlockRemoveSearchFilter.vue'
 export { default as BlockSimpleCard } from './BlockSimpleCard.vue'
 export { default as BlockShowHide } from './BlockShowHide.vue'
 export { default as BlockSpaces } from './BlockSpaces.vue'

src/stories/BlockRemoveSearchFilter.spec.js

@@ -0,0 +1,10 @@
+describe('SEARCH / Block Remove Search Filter', () => {
+  it('Default', () => {
+    cy.visit(
+      '/iframe.html?id=search-block-remove-search-filter--default&args=&viewMode=story'
+    )
+    cy.get('.block-remove-search-filter').should('exist')
+
+    cy.percySnapshot('SEARCH / Block Remove Search Filter: Default')
+  })
+})

src/stories/BlockRemoveSearchFilter.stories.js

@@ -0,0 +1,100 @@
+import BlockRemoveSearchFilter from '@/lib-components/BlockRemoveSearchFilter'
+
+export default {
+  title: 'SEARCH / Block Remove Search Filter',
+  component: BlockRemoveSearchFilter,
+}
+
+const mock = {
+  title: ' Default Amenities',
+  filterType: 'location || departments || subjects || categories',
+  color: 'default',
+}
+
+// Variations of stories below
+export function Default() {
+  return {
+    data() {
+      return { ...mock }
+    },
+    components: { BlockRemoveSearchFilter },
+    template: `
+        <block-remove-search-filter
+            :title="title"
+            :color="color"
+        />
+    `,
+  }
+}
+
+export function Help() {
+  return {
+    data() {
+      return { ...mock }
+    },
+    components: { BlockRemoveSearchFilter },
+    template: `
+        <block-remove-search-filter
+            title="Help"
+            color="help"
+        />
+    `,
+  }
+}
+
+export function Visit() {
+  return {
+    data() {
+      return { ...mock }
+    },
+    components: { BlockRemoveSearchFilter },
+    template: `
+        <block-remove-search-filter
+            title="Visit"
+            color="visit"
+        />
+    `,
+  }
+}
+
+export function About() {
+  return {
+    data() {
+      return { ...mock }
+    },
+    components: { BlockRemoveSearchFilter },
+    template: `
+        <block-remove-search-filter
+            title="About"
+            color="about"
+        />
+    `,
+  }
+}
+
+export function FocusTest() {
+  return {
+    data() {
+      return { ...mock }
+    },
+    components: { BlockRemoveSearchFilter },
+    template: `
+        <block-remove-search-filter
+          :title="title"
+          :filterType="filterType"
+        /><br>
+        <block-remove-search-filter
+          title="Help"
+          color="help"
+        /><br>
+        <block-remove-search-filter
+            title="Visit"
+            color="visit"
+        /><br>
+        <block-remove-search-filter
+            title="About"
+            color="about"
+        />
+    `,
+  }
+}