feat: APPS-2920 theme to toggle 'multiple locations' (#601)

* feat: prop to toggle 'multiple locations' * feat: change to themesettings, fix story --------- Co-authored-by: Jess Divers <[email protected]>
UCLALibrary · Sep 4, 2024 · b998ab6 · b998ab6 · github-actions · Sep 4, 2024
1 parent cdced68
commit b998ab6
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 18 deletions.
diff --git a/src/lib-components/BlockEventDetail.vue b/src/lib-components/BlockEventDetail.vue
@@ -33,14 +33,26 @@ const { startDate, time, locations } = defineProps({
   locations: {
     type: Array<BlockEventDetailLocation>,
     default: () => [],
-  },
+  }
 })
 
 const theme = useTheme()
 
 const classes = computed(() => {
   return ['block-event-detail', theme?.value || '']
 })
+const themeSettings = computed(() => {
+  switch (theme?.value) {
+    case 'ftva':
+      return {
+        multiLocationMsgDisplay: true,
+      }
+    default:
+      return {
+        multiLocationMsgDisplay: false,
+      }
+  }
+})
 </script>
 
 <template>
@@ -63,23 +75,28 @@ const classes = computed(() => {
     >
       <span>
         <SvgIconLocation class="row-icon" />
-        <span
-          v-for="(location, index) in locations"
-          :key="location.title"
-          class="location-link"
-        >
-          <SmartLink
-            :to="location.title"
-            :link-target="location.uri ? location.uri : ''"
+        <span v-if="themeSettings?.multiLocationMsgDisplay && locations.length > 1">
+          Multiple Locations
+        </span>
+        <span v-else class="locations-wrapper">
+          <span
+            v-for="(location, index) in locations"
+            :key="location.title"
+            class="location-link"
           >
-            {{ location.title }}
-          </SmartLink>
-          {{ index
-            < locations.length
-            - 1
-            ? ', '
-            : ''
-          }}
+            <SmartLink
+              :to="location.title"
+              :link-target="location.uri ? location.uri : ''"
+            >
+              {{ location.title }}
+            </SmartLink>
+            {{ index
+              < locations.length
+              - 1
+              ? ', '
+              : ''
+            }}
+          </span>
         </span>
       </span>
     </div>

diff --git a/src/stories/BlockEventDetail.stories.js b/src/stories/BlockEventDetail.stories.js
@@ -20,6 +20,12 @@ const mockEventDetailData = {
       title: 'Billy Wilder Theater',
       url: 'https://test-craft.library.ucla.edu/locations/billy-wilder-theater',
       uri: 'locations/billy-wilder-theater'
+    },
+    {
+      id: '195746',
+      title: 'Other Location',
+      url: 'https://test-craft.library.ucla.edu/locations/other-locations',
+      uri: 'locations/somelocation'
     }
   ]
 }
@@ -42,7 +48,7 @@ export function Default() {
   }
 }
 
-export function FTVA() {
+export function FTVAMultipleLocations() {
   return {
     data() {
       return {
@@ -65,6 +71,29 @@ export function FTVA() {
   }
 }
 
+export function FTVAOneLocation() {
+  return {
+    data() {
+      return {
+        data: mockEventDetailData,
+      }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { BlockEventDetail },
+    template: `
+    <block-event-detail
+      :startDate="data.startDateWithTime"
+      :time="data.startDateWithTime"
+      :locations="[data.location[0]]"
+    />
+    `,
+  }
+}
+
 export function FtvaNoLocation() {
   return {
     data() {