3206 eventcard limit description lengths

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;

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 {

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;

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"],

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>
 

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>

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,

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>
 

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>
 

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;