diff --git a/CHANGELOG.md b/CHANGELOG.md
index aa34704fc..271cad1c4 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/package.json b/package.json
index 5d00989d0..735f62da6 100644
--- a/package.json
+++ b/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",
diff --git a/src/lib-components/BlockTag.vue b/src/lib-components/BlockTag.vue
index 907ba34a6..ff713e396 100644
--- a/src/lib-components/BlockTag.vue
+++ b/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' : '']
})
diff --git a/src/stories/BlockTag.stories.js b/src/stories/BlockTag.stories.js
index 8671c8363..6635348da 100644
--- a/src/stories/BlockTag.stories.js
+++ b/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.
+ * (For an interactive tag that can be clicked to remove it from a list, try BlockRemoveSearchFilter).
+ *
+ * Props:
+ * - label: A string representing the text to display in the tag
+ * - iconName: A string representing the name of the icon to display in the tag.
+ * Valid names: SvgIconGuest, SvgIconFilm, SvgIconTV, SvgIconFilmreel, SvgIconDigital, SvgIconOnline, SvgIconFamilyFriendly
+ * - isSecondary: A boolean value to determine if the tag is styled with primary or secondary styles
+ *
+ * Props added 2024-11-19:
+ *
+ * - isHighlighted: 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: `
+
+ `,
+ }
+}
+
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: `
-//
-// `,
-// }
-// }
+export function SecondaryFTVAHighlighted() {
+ return {
+ data() {
+ return {
+ ...ftvamock
+ }
+ },
+ provide() {
+ return {
+ theme: computed(() => 'ftva'),
+ }
+ },
+ components: { BlockTag },
+ template: `
+
+ `,
+ }
+}
diff --git a/src/styles/default/_block-tag.scss b/src/styles/default/_block-tag.scss
index fb9e5fa0c..152791d8a 100644
--- a/src/styles/default/_block-tag.scss
+++ b/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};
+ }
+ }
}
diff --git a/src/styles/ftva/_block-tag.scss b/src/styles/ftva/_block-tag.scss
index ff150c935..fbb7079b5 100644
--- a/src/styles/ftva/_block-tag.scss
+++ b/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;
+ }
}
}