3206 eventcard limit description lengths (#3484)

* feat(#3206): change mock data Signed-off-by: Pablo Aragón <[email protected]> * feat(#3206): truncate EventsCard description Signed-off-by: Pablo Aragón <[email protected]> * feat(#3206): UICard content sticked to the bottom, EventsCar description to the top Signed-off-by: Pablo Aragón <[email protected]> * feat(#3206): toggle description into UiCard Signed-off-by: Pablo Aragón <[email protected]> * fix(#3206): refactor description limited by char length Signed-off-by: Pablo Aragón <[email protected]> * fix: card ctas inline * fix(ui-card): remove extra spacing after header * chore: remove unnecessary line --------- Signed-off-by: Pablo Aragón <[email protected]> Co-authored-by: Eddybrando Vásquez <[email protected]>
Qiskit · Jan 17, 2024 · b1f20dc · b1f20dc
1 parent 79b18cb
commit b1f20dc
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 54 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,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
@@ -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;