From edd51b7e172e041cba02255ab0dff99ccd42b73c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20Arag=C3=B3n?= <pablo.aragon@ibm.com>
Date: Thu, 3 Aug 2023 15:54:07 +0200
Subject: [PATCH] feat(#3206): truncate EventsCard description
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Pablo Aragón <pablo.aragon@ibm.com>
---
 components/Events/EventsCard.vue              | 42 +++++++++++++++++--
 components/Ui/DataTable/UiDataTable.vue       |  4 +-
 .../events/upcoming-community-events.json     |  2 +-
 pages/events/fall-fest.vue                    |  5 +--
 pages/events/index.vue                        |  5 +--
 pages/events/seminar-series.vue               | 20 ++++-----
 pages/events/summer-school-2022.vue           |  5 +--
 pages/events/summer-school-2023.vue           |  5 +--
 utils/event-schema-org.ts                     |  2 +-
 9 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/components/Events/EventsCard.vue b/components/Events/EventsCard.vue
index d82e8c15a1..32ee250487 100644
--- 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
index d367eb4e28..45b29dfe53 100644
--- 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
index 9de0485a99..10a89698bb 100644
--- 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
index 2ba2605c83..f5f8bc24a7 100644
--- 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
index 58fc6564e5..65854e0775 100644
--- 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
index 2be3dc5e10..59668ea304 100644
--- 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
index 732d78f9e7..ca58edafba 100644
--- 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
index 4990851f4d..9854732863 100644
--- 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
index 1920dff99f..7c240d5d3e 100644
--- 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;