feat: APPS 2793 Add selected state to FTVA filters (#642)

* feat: add isSelected prop; update logic, template & CSS * feat: add extra story for ftva selected state --------- Co-authored-by: tinuola <[email protected]>
UCLALibrary · Oct 22, 2024 · 630b584 · 630b584 · github-actions · Oct 22, 2024
1 parent afb31ac
commit 630b584
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 25 deletions.
diff --git a/src/lib-components/BlockRemoveSearchFilter.vue b/src/lib-components/BlockRemoveSearchFilter.vue
@@ -7,14 +7,18 @@ import BlockTag from './BlockTag.vue'
 import getSectionName from '@/utils/getSectionName'
 import { useTheme } from '@/composables/useTheme'
 
-const { title, iconName, removeIconName } = defineProps({
+const { title, iconName, isSelected, removeIconName } = defineProps({
   title: {
     type: String,
     default: '',
   },
   iconName: {
     type: String,
     required: false,
+  },
+  isSelected: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -42,8 +46,9 @@ const sectionName = computed(() => {
 })
 
 const classes = computed(() => {
-  return ['block-remove-search-filter', theme?.value || '', `color-${sectionName.value}`]
+  return ['block-remove-search-filter', theme?.value || '', `color-${sectionName.value}`, (isSelected && theme?.value) ? 'selected' : '']
 })
+
 // compute remove icon based on theme
 const removeIcon = computed(() => {
   switch (theme?.value) {
@@ -62,7 +67,7 @@ function closeBlockFilter() {
 <template>
   <button type="button" :class="classes" @click="closeBlockFilter">
     <BlockTag :label="title" :icon-name="iconName" :theme="theme" :is-secondary="true">
-      <span class="button-close">
+      <span class="button-close" :class="{ 'button-selected': isSelected && theme === 'ftva' }">
         <component :is="removeIcons[removeIcon]" />
       </span>
     </BlockTag>

diff --git a/src/stories/BlockRemoveSearchFilter.stories.js b/src/stories/BlockRemoveSearchFilter.stories.js
@@ -79,23 +79,31 @@ export function About() {
   }
 }
 
-export function FTVA() {
+function FTVATemplate(args) {
   router.push('/')
   return {
-    data() {
-      return { ...mock }
-    },
     provide() {
       return {
         theme: computed(() => 'ftva'),
       }
     },
+    setup() {
+      return { args }
+    },
     components: { BlockRemoveSearchFilter },
-    template: `
-        <block-remove-search-filter
-            title="FTVA"
-            iconName="SvgIconGuest"
-        />
-    `,
+    template: '<block-remove-search-filter v-bind="args" />',
   }
 }
+
+export const FTVA = FTVATemplate.bind({})
+FTVA.args = {
+  title: 'FTVA',
+  iconName: 'SvgIconGuest',
+}
+
+export const FTVASelected = FTVATemplate.bind({})
+FTVASelected.args = {
+  title: 'FTVA',
+  iconName: 'SvgIconGuest',
+  isSelected: 'true'
+}
diff --git a/src/styles/ftva/_block-remove-search-filter.scss b/src/styles/ftva/_block-remove-search-filter.scss
@@ -1,6 +1,12 @@
 .ftva.block-remove-search-filter {
     align-items: center;
 
+    &.color-default {
+        &:hover {
+            background-color: transparent;
+        }
+    }
+
     :deep(.block-tag) {
         font-size: 18px;
         background-color: #{$pure-white};
@@ -11,14 +17,17 @@
     }
 
     .button-close {
+        margin-left: 0;
         font-size: 10px;
         font-weight: bold;
         line-height: 100%;
         width: 0;
         overflow: hidden;
-        -webkit-transition: width .15s ease-in-out;
-        -moz-transition: width .15s ease-in-out;
-        -o-transition: width .15s ease-in-out;
+    }
+
+    .button-selected {
+        margin-left: 8px;
+        width: 20px;
         transition: width .15s ease-in-out;
 
         svg {
@@ -40,19 +49,25 @@
         :deep(path.svg__fill--medium-grey) {
             fill: #{$pure-white};
         }
-
-        .button-close {
-            color: #{$pure-white};
-            width: 20px;
-
-            :deep(.svg__stroke--pure-white) {
-                fill: #{$pure-white};
-            }
-        }
     }
 
     // TODO will discuss with UX
     // &:disabled {
     //     color: #{$page-blue};
     // }
 }
+
+.ftva.block-remove-search-filter.selected {
+    :deep(.block-tag) {
+        border-color: $accent-blue;
+        background-color: $accent-blue;
+
+        .label {
+            color: #{$pure-white};
+        }
+    }
+
+    :deep(path.svg__fill--medium-grey) {
+        fill: #{$pure-white};
+    }
+}