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; + } } }