fix: APPS-2675 fix BlockStaffDetail.vue image type (#508)

fix: image type

Co-authored-by: Jess Divers <[email protected]>

src/lib-components/BlockStaffDetail.vue

@@ -20,8 +20,8 @@ import IconWithLink from '@/lib-components/IconWithLink.vue'
 // PROPS & DATA
 const props = defineProps({
   image: {
-    type: Array as PropType<MediaItemType[]>,
-    default: () => [],
+    type: Object as PropType<MediaItemType>,
+    default: () => {},
   },
   to: {
     type: String,
@@ -92,10 +92,6 @@ const props = defineProps({
   }
 })
 
-const parsedImage = computed(() => {
-  return props.image.length ? props.image[0].src : {}
-})
-
 const parsedPronouns = computed(() => {
   return `Pronouns: ${props.pronouns}`
 })
@@ -152,8 +148,8 @@ const mergeSortTopics = computed(() => {
     <div class="section-staff-bio">
       <div :class="image ? 'body-contact' : 'body-contact no-image'">
         <ResponsiveImage
-          v-if="props.image.length"
-          :media="parsedImage"
+          v-if="image"
+          :media="image"
           :aspect-ratio="100"
           class="image"
         />

src/stories/BlockStaffDetail.stories.js

@@ -13,7 +13,7 @@ const mockDefault = {
   slug: 'test-subject-librarian',
   uri: 'about/staff/test-subject-librarian',
   title: 'TEST - Subject Librarian',
-  image: [{ src: API.image_people }],
+  image: API.image_people,
   to: 'test-subject-librarian',
   nameFirst: 'TEST - Subject',
   nameLast: 'Librarian',
@@ -82,7 +82,7 @@ const mockAlternativeName = {
   slug: 'test-phyllis-blackshear',
   uri: 'about/staff/test-phyllis-blackshear',
   title: 'Test Alternative Name Phyllis Blackshear',
-  image: [{ src: API.image_people }],
+  image: API.image_people,
   to: 'test-phyllis-blackshear',
   nameFirst: 'test_Phyllis',
   nameLast: 'Blackshear',
@@ -155,7 +155,7 @@ const mockNoImageOneLocation = {
   slug: 'sylvia-page',
   uri: 'about/staff/sylvia-page',
   title: 'Test  NO IMAGE Penelope Pitstop',
-  image: [],
+  // image: {},
   to: 'sylvia-page',
   nameFirst: 'Test  NO IMAGE Penelope',
   nameLast: 'Pitstop',
@@ -234,7 +234,7 @@ const mockNoImageOrBio = {
   slug: 'sylvia-page',
   uri: 'about/staff/sylvia-page',
   title: 'Test  NO IMAGE Penelope Pitstop',
-  image: [],
+  image: {},
   to: 'sylvia-page',
   nameFirst: 'Test  NO IMAGE Penelope',
   nameLast: 'Pitstop',
@@ -377,7 +377,7 @@ export function NoImageOrBio() {
   }
 }
 
-export function AskMeAboutAndAcademicDeaprtments() {
+export function AskMeAboutAndAcademicDepartments() {
   return {
     data() {
       return {