feat: add hover variant props to PhosphorIcon

ICIJ · Sep 4, 2024 · 185f3c8 · 185f3c8
1 parent a40cf9f
commit 185f3c8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/lib/components/PhosphorIcon.vue b/lib/components/PhosphorIcon.vue
@@ -86,6 +86,11 @@ const props = defineProps({
     required: false,
     default: null
   },
+  hoverVariant: {
+    type: String,
+    required: false,
+    default: null
+  },
   fill: {
     type: Boolean,
     required: false,
@@ -181,6 +186,9 @@ const weight = computed(() => {
 })
 
 const color = computed(() => {
+  if (currentHover.value && props.hoverVariant) {
+    return `var(--bs-${props.hoverVariant}, var(--bs-${props.variant}, currentColor))`
+  }
   return `var(--bs-${props.variant}, currentColor)`
 })
 

diff --git a/stories/murmur/components/PhosphorIcon.stories.js b/stories/murmur/components/PhosphorIcon.stories.js
@@ -123,6 +123,16 @@ export const HoverWeight = {
   }
 }
 
+export const HoverVariant = {
+  args: {
+    name: 'trash',
+    variant: 'link',
+    hoverVariant: 'danger',
+    hoverWeight: 'duotone',
+    size: '2xl'
+  }
+}
+
 export const WithText = {
   args: {
     name: 'globe',