feat(#3206): truncate EventsCard description

Signed-off-by: Pablo Aragón <[email protected]>
Qiskit · Jan 15, 2024 · 9b98e32 · 9b98e32
1 parent 645e8e3
commit 9b98e32
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 30 deletions.
diff --git a/components/Events/EventsCard.vue b/components/Events/EventsCard.vue
@@ -11,8 +11,23 @@
     :vertical-layout="verticalLayout"
     :alt-text="altText"
   >
-    <div class="events-card__description">
-      <slot v-if="$slots.default" />
+    <div v-if="description" class="events-card__description">
+      <p v-if="tooLongDescription && !showMore">
+        {{ description.substring(0, MAX_DESCRIPTION_LENGTH_CH).trim() }}...
+        <span
+          class="events-card__description__toggle"
+          @click="toggleDescriptionLength"
+          >show more</span
+        >
+      </p>
+      <p v-if="showMore">
+        {{ description }}
+        <span
+          class="events-card__description__toggle"
+          @click="toggleDescriptionLength"
+          >show less</span
+        >
+      </p>
     </div>
     <div>
       <div v-if="location" class="events-card__detail">
@@ -46,19 +61,20 @@ interface Props {
   types?: string[];
   title: string;
   image: string;
+  description?: string;
   altText?: string;
   institution?: string;
   location?: string;
   date?: string;
   time?: string | null;
-  to: string;
+  to?: string;
   ctaLabel?: string;
   segment?: CtaClickedEventProp | undefined;
   verticalLayout?: boolean;
   regions?: string[];
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   types: () => [],
   altText: "Event image",
   institution: "",
@@ -68,8 +84,19 @@ withDefaults(defineProps<Props>(), {
   segment: undefined,
   time: undefined,
   verticalLayout: false,
+  description: undefined,
+  to: "",
   regions: () => [],
 });
+
+const MAX_DESCRIPTION_LENGTH_CH = 240;
+const tooLongDescription =
+  props.description && props.description.length > MAX_DESCRIPTION_LENGTH_CH;
+
+const showMore = ref(false);
+function toggleDescriptionLength() {
+  showMore.value = !showMore.value;
+}
 </script>
 
 <style lang="scss" scoped>
@@ -78,6 +105,13 @@ withDefaults(defineProps<Props>(), {
 .events-card {
   &__description {
     margin-bottom: carbon.$spacing-06;
+    max-height: 240ch;
+
+    &__toggle {
+      text-decoration: underline;
+      cursor: pointer;
+      color: var(--cds-link-primary, #{carbon.$purple-80});
+    }
   }
 
   &__detail {

diff --git a/components/Ui/DataTable/UiDataTable.vue b/components/Ui/DataTable/UiDataTable.vue
@@ -16,14 +16,14 @@
 </template>
 
 <script setup lang="ts">
-import { TextLink } from "~/types/links";
+import { Link } from "~/types/links";
 
 export interface TableRowElement {
   addTooltip?: boolean;
   component?: string;
   packageName?: string;
   styles?: string;
-  data: string | TextLink;
+  data: string | Link;
 }
 
 interface Props {

diff --git a/hooks/mock/content/events/upcoming-community-events.json b/hooks/mock/content/events/upcoming-community-events.json
@@ -11,7 +11,7 @@
     "startDateAndTime": null,
     "endDate": "",
     "to": "https://imperturbable-hyphenation.info/",
-    "abstract": "Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem."
+    "abstract": "Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem."
   },
   {
     "types": ["Open Source"],

diff --git a/pages/events/fall-fest.vue b/pages/events/fall-fest.vue
@@ -20,10 +20,9 @@
           :alt-text="headerData.card.altText"
           :title="headerData.card.title"
           :to="headerData.card.to"
+          :description="headerData.card.description"
           vertical-layout
-        >
-          {{ headerData.card.description }}
-        </EventsCard>
+        />
       </template>
     </LayoutLeadSpaceWithCard>
 

diff --git a/pages/events/index.vue b/pages/events/index.vue
@@ -96,9 +96,8 @@
                 :time="eventItem.startDateAndTime"
                 :to="eventItem.to"
                 :regions="eventItem.regions"
-              >
-                {{ eventItem.abstract }}
-              </EventsCard>
+                :description="eventItem.abstract || ''"
+              />
             </div>
           </div>
         </template>

diff --git a/pages/events/seminar-series.vue b/pages/events/seminar-series.vue
@@ -18,7 +18,6 @@
           :institution="cardContent.institution"
           :location="cardContent.location"
           :title="cardContent.title"
-          :to="cardContent.to"
           vertical-layout
         />
       </template>
@@ -311,14 +310,16 @@ function dataPerRow(
     {
       component: "AppCta",
       styles: "min-width: 5rem;",
-      data: {
-        url: event.to,
-        label: "Join event",
-        segment: {
-          cta: "talk-on-youtube",
-          location: eventsSection,
-        },
-      },
+      data: event.to
+        ? {
+            url: event.to,
+            label: "Join event",
+            segment: {
+              cta: "talk-on-youtube",
+              location: eventsSection,
+            },
+          }
+        : "",
     },
   ]);
 }
@@ -332,7 +333,6 @@ useSchemaOrg([
         startDate: new Date(event.startDate),
         mode: "Online",
         location: event.location,
-        url: event.to,
         name: event.title,
         image: event.image,
         performer: event.speaker,

diff --git a/pages/events/summer-school-2022.vue b/pages/events/summer-school-2022.vue
@@ -37,9 +37,8 @@
           :title="headerData.card.title"
           :to="headerData.card.to"
           vertical-layout
-        >
-          {{ headerData.card.description }}
-        </EventsCard>
+          :description="headerData.card.description"
+        />
       </template>
     </LayoutLeadSpaceWithCard>
 

diff --git a/pages/events/summer-school-2023.vue b/pages/events/summer-school-2023.vue
@@ -41,10 +41,9 @@
           :time="headerData.card.time"
           :title="headerData.card.title"
           :to="headerData.card.to"
+          :description="headerData.card.description"
           vertical-layout
-        >
-          {{ headerData.card.description }}
-        </EventsCard>
+        />
       </template>
     </LayoutLeadSpaceWithCard>
 

diff --git a/utils/event-schema-org.ts b/utils/event-schema-org.ts
@@ -33,7 +33,7 @@ interface Event {
   startDate: Date;
   mode: "Online" | "Offline";
   location: string;
-  url: string;
+  url?: string;
   name: string;
   image: string;
   performer?: string;