refactor: use new phosphor icon

ICIJ · Jul 2, 2024 · 0cbdd74 · 0cbdd74
1 parent 3d0a10d
commit 0cbdd74
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/src/components/DismissableAlert.vue b/src/components/DismissableAlert.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, defineProps, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import ToastBody from '@/components/ToastBody'
 
@@ -21,7 +21,8 @@ const props = defineProps({
     default: "Don't show this again"
   },
   icon: {
-    type: String
+    type: String,
+    default: null
   },
   noIcon: {
     type: Boolean

diff --git a/src/components/ToastBody.vue b/src/components/ToastBody.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, useSlots } from 'vue'
 
-import Icon from '@/components/Icon'
+import PhosphorIcon from '@/components/PhosphorIcon'
 
 const VARIANTS = {
   default: 'primary',
@@ -63,7 +63,7 @@ const linkClassList = computed(() => [`btn-outline-${variant.value}`])
 <template>
   <div class="toast-body d-flex align-items-center" :class="classList">
     <div v-if="!noIcon" class="toast-body__icon pe-3">
-      <Icon :icon="icon" :variant="variant" />
+      <phosphor-icon :name="icon" :variant="variant" />
     </div>
     <div class="toast-body__content flex-grow-1">
       <h5 v-if="title" class="toast-body__content__title">{{ title }}</h5>

diff --git a/src/stories/components/DismissableAlert.stories.js b/src/stories/components/DismissableAlert.stories.js
@@ -1,7 +1,7 @@
 import { uniqueId } from 'lodash'
 
 import DismissableAlert from '@/components/DismissableAlert'
-import Icon from '@/components/Icon'
+import PhosphorIcon from '@/components/PhosphorIcon'
 
 export default {
   title: 'Components/DismissableAlert',
@@ -39,7 +39,8 @@ export default {
 
 export const Default = {
   args: {
-    persist: false
+    persist: false,
+    name: 'a-unique-name'
   }
 }
 
@@ -51,7 +52,7 @@ export const CustomSlots = {
   render: (args) => ({
     components: {
       DismissableAlert,
-      Icon
+      PhosphorIcon
     },
     setup: () => ({ args }),
     template: `
@@ -60,10 +61,10 @@ export const CustomSlots = {
         <template #button="{ linkClassList, linkLabel }">
           <a href="/" target="_parent" class="btn d-inline-flex"  :class="linkClassList">
             Read the doc
-            <icon icon="arrow-square-out" size="16px" class="ms-2" />
+            <phosphor-icon name="arrow-square-out" size="16px" class="ms-2" />
           </a>
           <a class="btn btn-link d-inline-flex" :title="linkLabel" v-b-tooltip>
-            <icon icon="x" size="20px" />
+            <phosphor-icon name="x" size="20px" />
           </a>
         </template>
       </dismissable-alert>

diff --git a/tests/unit/specs/components/DismissableAlert.spec.js b/tests/unit/specs/components/DismissableAlert.spec.js
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
 
 import DismissableAlert from '@/components/DismissableAlert'
-import Icon from '@/components/Icon'
+import PhosphorIcon from '@/components/PhosphorIcon'
 import ToastBody from '@/components/ToastBody'
 
 describe('DismissableAlert', () => {
@@ -113,7 +113,7 @@ describe('DismissableAlert', () => {
         noIcon: false
       }
     })
-    expect(wrapper.findComponent(Icon).exists()).toBeTruthy()
+    expect(wrapper.findComponent(PhosphorIcon).exists()).toBeTruthy()
     expect(wrapper.findComponent(ToastBody).props('icon')).toBe('info-icon')
   })
 
@@ -125,6 +125,6 @@ describe('DismissableAlert', () => {
         noIcon: true
       }
     })
-    expect(wrapper.findComponent(Icon).exists()).toBeFalsy()
+    expect(wrapper.findComponent(PhosphorIcon).exists()).toBeFalsy()
   })
 })