From b1f20dcd7dbcd977393503e8d4bd30c50cbe4d86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20Arag=C3=B3n?= <pablo.aragon@ibm.com>
Date: Wed, 17 Jan 2024 08:55:10 +0100
Subject: [PATCH] 3206 eventcard limit description lengths (#3484)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(#3206): change mock data

Signed-off-by: Pablo Aragón <pablo.aragon@ibm.com>

* feat(#3206): truncate EventsCard description

Signed-off-by: Pablo Aragón <pablo.aragon@ibm.com>

* feat(#3206): UICard content sticked to the bottom, EventsCar description to the top

Signed-off-by: Pablo Aragón <pablo.aragon@ibm.com>

* feat(#3206): toggle description into UiCard

Signed-off-by: Pablo Aragón <pablo.aragon@ibm.com>

* fix(#3206): refactor description limited by char length

Signed-off-by: Pablo Aragón <pablo.aragon@ibm.com>

* fix: card ctas inline

* fix(ui-card): remove extra spacing after header

* chore: remove unnecessary line

---------

Signed-off-by: Pablo Aragón <pablo.aragon@ibm.com>
Co-authored-by: Eddybrando Vásquez <eddybrando.vasquez@gmail.com>
---
 components/Events/EventsCard.vue              |  13 +-
 components/Ui/DataTable/UiDataTable.vue       |   4 +-
 components/Ui/UiCard.vue                      | 114 +++++++++++++++---
 .../events/upcoming-community-events.json     |   2 +-
 pages/events/fall-fest.vue                    |   5 +-
 pages/events/index.vue                        |   9 +-
 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 +-
 10 files changed, 125 insertions(+), 54 deletions(-)

diff --git a/components/Events/EventsCard.vue b/components/Events/EventsCard.vue
index d82e8c15a1..e734e7627a 100644
--- a/components/Events/EventsCard.vue
+++ b/components/Events/EventsCard.vue
@@ -10,10 +10,8 @@
     :segment="segment"
     :vertical-layout="verticalLayout"
     :alt-text="altText"
+    :description="description"
   >
-    <div class="events-card__description">
-      <slot v-if="$slots.default" />
-    </div>
     <div>
       <div v-if="location" class="events-card__detail">
         <Map20 class="events-card__icon" />
@@ -46,12 +44,13 @@ 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;
@@ -68,6 +67,8 @@ withDefaults(defineProps<Props>(), {
   segment: undefined,
   time: undefined,
   verticalLayout: false,
+  description: undefined,
+  to: "",
   regions: () => [],
 });
 </script>
@@ -76,10 +77,6 @@ withDefaults(defineProps<Props>(), {
 @use "~/assets/scss/carbon.scss";
 
 .events-card {
-  &__description {
-    margin-bottom: carbon.$spacing-06;
-  }
-
   &__detail {
     display: flex;
     align-items: center;
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/components/Ui/UiCard.vue b/components/Ui/UiCard.vue
index c23fb24ab0..a41dc19cb9 100644
--- a/components/Ui/UiCard.vue
+++ b/components/Ui/UiCard.vue
@@ -51,26 +51,55 @@
         </div>
       </header>
       <div class="card__body">
-        <div class="card__description">
-          <slot />
+        <div class="card__body__top">
+          <div class="card__eyebrow">
+            <slot name="eyebrow"></slot>
+          </div>
+          <div v-if="description" class="card__description">
+            <p :id="`ui-card-desc-${$.uid}`">
+              {{ showMaxDescription(description) }}
+              <UiLinkText
+                v-if="descriptionTooLong"
+                :link="{
+                  url: '',
+                  segment:
+                    segment && descriptionTooLong && !showMore
+                      ? {
+                          cta: 'show-more',
+                          location: segment?.location,
+                        }
+                      : undefined,
+                }"
+                class="card__description__toggle"
+                @click="toggleDescriptionLength"
+              >
+                {{ !showMore ? "Show more" : "Show less" }}
+              </UiLinkText>
+            </p>
+          </div>
         </div>
-        <div class="card__ctas">
-          <UiCta
-            v-if="to"
-            is-wider
-            kind="ghost"
-            :label="ctaLink.label"
-            :segment="ctaLink.segment"
-            :url="ctaLink.url"
-          />
-          <UiCta
-            v-if="secondaryCta"
-            is-wider
-            kind="ghost"
-            :label="secondaryCta.label"
-            :segment="secondaryCta.segment"
-            :url="secondaryCta.url"
-          />
+        <div class="card__body__bottom">
+          <div class="card__slot">
+            <slot></slot>
+          </div>
+          <div class="card__ctas">
+            <UiCta
+              v-if="to"
+              is-wider
+              kind="ghost"
+              :label="ctaLink.label"
+              :segment="ctaLink.segment"
+              :url="ctaLink.url"
+            />
+            <UiCta
+              v-if="secondaryCta"
+              is-wider
+              kind="ghost"
+              :label="secondaryCta.label"
+              :segment="secondaryCta.segment"
+              :url="secondaryCta.url"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -87,6 +116,8 @@ interface Props {
   image?: string;
   imageContain?: boolean;
   altText?: string;
+  description?: string;
+  maxDescriptionLength?: number;
   segment?: CtaClickedEventProp | undefined;
   subtitle?: string;
   secondaryTags?: string[];
@@ -103,6 +134,8 @@ const props = withDefaults(defineProps<Props>(), {
   image: "",
   imageContain: false,
   altText: "No description available",
+  description: undefined,
+  maxDescriptionLength: 240,
   segment: undefined,
   subtitle: "",
   secondaryTags: () => [],
@@ -122,6 +155,22 @@ const ctaLink = computed(() => ({
 function hasTags(tags: string[]) {
   return Array.isArray(tags) && tags.length > 0;
 }
+
+const descriptionTooLong =
+  props.description && props.description.length > props.maxDescriptionLength;
+
+const showMore = ref(false);
+function toggleDescriptionLength() {
+  showMore.value = !showMore.value;
+}
+
+function showMaxDescription(description: string) {
+  if (descriptionTooLong && !showMore.value) {
+    return description.substring(0, props.maxDescriptionLength).trim() + "...";
+  }
+
+  return description;
+}
 </script>
 
 <style lang="scss" scoped>
@@ -168,6 +217,18 @@ function hasTags(tags: string[]) {
 
   &__body {
     overflow-wrap: break-word;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    height: 100%;
+
+    &__top {
+      height: 100%;
+    }
+  }
+
+  &__eyebrow {
+    margin-bottom: carbon.$spacing-05;
   }
 
   &__content {
@@ -178,6 +239,20 @@ function hasTags(tags: string[]) {
     justify-content: space-between;
   }
 
+  &__description {
+    margin-bottom: carbon.$spacing-06;
+    max-height: 240ch;
+
+    &__toggle {
+      cursor: pointer;
+      color: qiskit.$link-color-tertiary;
+
+      &:hover {
+        color: qiskit.$link-color-tertiary;
+      }
+    }
+  }
+
   &__ctas {
     display: flex;
     justify-content: flex-start;
@@ -188,7 +263,6 @@ function hasTags(tags: string[]) {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    margin-bottom: carbon.$spacing-07;
 
     @include carbon.breakpoint-down(lg) {
       flex-direction: column;
diff --git a/hooks/mock/content/events/upcoming-community-events.json b/hooks/mock/content/events/upcoming-community-events.json
index cfaa8de135..c8a893d9e0 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."
+    "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"
   },
   {
     "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..2570659058 100644
--- a/pages/events/index.vue
+++ b/pages/events/index.vue
@@ -96,9 +96,12 @@
                 :time="eventItem.startDateAndTime"
                 :to="eventItem.to"
                 :regions="eventItem.regions"
-              >
-                {{ eventItem.abstract }}
-              </EventsCard>
+                :description="eventItem.abstract || ''"
+                :segment="{
+                  cta: '',
+                  location: 'event-pages-index',
+                }"
+              />
             </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;