Merge branch 'main' into APPS-3045_mobile_datefilter

CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.35.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.34.0...v3.35.0) (2024-11-21)
+
+
+### Features
+
+* APPS-3067 add ishighlighted prop to BlockTag.vue ([#656](https://github.com/UCLALibrary/ucla-library-website-components/issues/656)) ([7b2c3a7](https://github.com/UCLALibrary/ucla-library-website-components/commit/7b2c3a736b3c2551dc3fbb61566241878a889838))
+
 # [3.34.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.33.0...v3.34.0) (2024-11-21)
 
 

package.json

@@ -2,7 +2,7 @@
   "name": "ucla-library-website-components",
   "type": "module",
   "private": false,
-  "version": "3.34.0",
+  "version": "3.35.0",
   "main": "./dist/ucla-library-website-components.umd.cjs",
   "module": "./dist/ucla-library-website-components.js",
   "style": "./dist/style.css",

src/lib-components/BlockTag.vue

@@ -6,7 +6,7 @@ import { computed, defineAsyncComponent } from 'vue'
 import { useTheme } from '@/composables/useTheme'
 
 // PROPS & DATA
-const { label, iconName, isSecondary } = defineProps({
+const { label, iconName, isSecondary, isHighlighted } = defineProps({
   label: {
     type: String,
     default: '' // Text displayed on the tag or pill.
@@ -19,11 +19,10 @@ const { label, iconName, isSecondary } = defineProps({
     type: Boolean,
     default: false
   },
-  // TODO ADD PROP TO HANDLE isSelected prop
-  // isSelected: {
-  //   type: Boolean,
-  //   default: false
-  // },
+  isHighlighted: {
+    type: Boolean,
+    default: false
+  },
 })
 
 // THEME
@@ -63,7 +62,7 @@ const BlockTagIcons: any = {
 }
 
 const classes = computed(() => {
-  return ['block-tag', theme?.value || '', isSecondary ? '' : 'primary']
+  return ['block-tag', theme?.value || '', isSecondary ? '' : 'primary', isHighlighted ? 'highlighted' : '']
 })
 </script>
 

src/stories/BlockTag.stories.js

@@ -1,6 +1,20 @@
 import { computed } from 'vue'
 import BlockTag from '@/lib-components/BlockTag'
 
+/**
+ * A component to display a non-interactive tag with a label and an optional icon. <br>
+ * <sub>(For an interactive tag that can be clicked to remove it from a list, try BlockRemoveSearchFilter). </sub>
+ *
+ * Props:
+ * - <b>label</b>: A string representing the text to display in the tag
+ * - <b>iconName</b>: A string representing the name of the icon to display in the tag. <br>
+ * <sub>Valid names: <i>SvgIconGuest, SvgIconFilm, SvgIconTV, SvgIconFilmreel, SvgIconDigital, SvgIconOnline, SvgIconFamilyFriendly</i></sub>
+ * - <b>isSecondary</b>: A boolean value to determine if the tag is styled with primary or secondary styles
+ *
+ * Props added 2024-11-19:
+ *
+ * - <b>isHighlighted</b>: A boolean value to determine if the tag is styled with highlight styles
+ */
 export default {
   title: 'BLOCK / Tag',
   component: BlockTag
@@ -38,6 +52,24 @@ export function Default() {
   }
 }
 
+// note: currently highlighted styles for default are placeholder styles / not yet implemented
+export function DefaultHighlighted() {
+  return {
+    data() {
+      return {
+        ...defaultmock,
+      }
+    },
+    components: { BlockTag },
+    template: `
+    <block-tag
+        :label="label"
+        :isHighlighted="true"
+    />
+  `,
+  }
+}
+
 export function PrimaryFTVA() {
   return {
     data() {
@@ -104,25 +136,25 @@ export function SecondaryFTVANoIcon() {
   }
 }
 
-// TODO
-// export function SecondaryFTVASelected() {
-//   return {
-//     data() {
-//       return {
-//         ...ftvamockwLinkLabel
-//       }
-//     },
-//     provide() {
-//       return {
-//         theme: computed(() => 'ftva'),
-//       }
-//     },
-//     components: { BlockTag },
-//     template: `
-//     <block-tag
-//         :label="label"
-//         isSecondary="true"
-//     />
-//   `,
-//   }
-// }
+export function SecondaryFTVAHighlighted() {
+  return {
+    data() {
+      return {
+        ...ftvamock
+      }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { BlockTag },
+    template: `
+    <block-tag
+        :label="label"
+        isSecondary="true"
+        isHighlighted="true"
+    />
+  `,
+  }
+}

src/styles/default/_block-tag.scss

@@ -15,4 +15,15 @@
     .label {
         color: #{$primary-blue-05};
     }
+
+    // primary colors & styles
+    &.highlighted {
+        color: #{$white};
+        background-color: var(--color-default-cyan-03);
+        border: none;
+
+        .label {
+            color: #{$white};
+        }
+    }
 }

src/styles/ftva/_block-tag.scss

@@ -1,12 +1,12 @@
 .ftva.block-tag {
     @include ftva-tags;
+     // secondary colors and styles
     background-color: transparent;
     border: 1.5px solid $subtitle-grey;
     border-radius: 16px;
     color: $subtitle-grey;
     padding: 8px 16px;
     height: 32px;
-    // secondary colors and styles
     // focused and disabled,styled in blockRemoveSearchFilter
 
     .label {
@@ -35,7 +35,12 @@
         }
     }
 
-    &.is-selected {
+    &.highlighted {
         background-color: $page-blue;
+        color: $subtitle-grey;
+        border: 1.5px solid $subtitle-grey;
+        .label {
+            color: $subtitle-grey;
+        }
     }
 }