feat(#3206): toggle description into UiCard

Signed-off-by: Pablo Aragón <[email protected]>
Qiskit · Jan 15, 2024 · 0c0a24d · 0c0a24d
1 parent e4202d1
commit 0c0a24d
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 51 deletions.
diff --git a/components/Events/EventsCard.vue b/components/Events/EventsCard.vue
@@ -10,28 +10,8 @@
     :segment="segment"
     :vertical-layout="verticalLayout"
     :alt-text="altText"
+    :description="description"
   >
-    <div v-if="description" class="events-card__description">
-      <p v-if="!tooLongDescription">
-        {{ description }}
-      </p>
-      <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">
         <Map20 class="events-card__icon" />
@@ -77,7 +57,7 @@ interface Props {
   regions?: string[];
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   types: () => [],
   altText: "Event image",
   institution: "",
@@ -91,33 +71,13 @@ const props = withDefaults(defineProps<Props>(), {
   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>
 @use "~/assets/scss/carbon.scss";
 @use "~/assets/scss/helpers/index.scss" as qiskit;
 
 .events-card {
-  &__description {
-    margin-bottom: carbon.$spacing-06;
-    max-height: 240ch;
-    height: 100%;
-
-    &__toggle {
-      cursor: pointer;
-      color: qiskit.$link-color-tertiary;
-    }
-  }
-
   &__detail {
     display: flex;
     align-items: center;

diff --git a/components/Ui/UiCard.vue b/components/Ui/UiCard.vue
@@ -51,10 +51,51 @@
         </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 v-if="!tooLongDescription">
+              {{ description }}
+            </p>
+            <p v-if="tooLongDescription && !showMore">
+              {{
+                description.substring(0, MAX_DESCRIPTION_LENGTH_CH).trim()
+              }}...
+              <UiLinkText
+                :link="{
+                  url: '',
+                  segment: segment
+                    ? {
+                        cta: 'show-more',
+                        location: segment?.location,
+                      }
+                    : undefined,
+                }"
+                class="card__description__toggle"
+                @click="toggleDescriptionLength"
+                >show more</UiLinkText
+              >
+            </p>
+            <p v-if="showMore">
+              {{ description }}
+              <UiLinkText
+                :link="{
+                  url: '',
+                }"
+                class="card__description__toggle"
+                @click="toggleDescriptionLength"
+                >show less</UiLinkText
+              >
+            </p>
+          </div>
         </div>
-        <div class="card__ctas">
+        <div class="card__body__bottom">
+          <div class="card__slot">
+            <slot></slot>
+          </div>
+          <div class="card__ctas"></div>
           <UiCta
             v-if="to"
             is-wider
@@ -87,6 +128,7 @@ interface Props {
   image?: string;
   imageContain?: boolean;
   altText?: string;
+  description?: string;
   segment?: CtaClickedEventProp | undefined;
   subtitle?: string;
   secondaryTags?: string[];
@@ -103,6 +145,7 @@ const props = withDefaults(defineProps<Props>(), {
   image: "",
   imageContain: false,
   altText: "No description available",
+  description: undefined,
   segment: undefined,
   subtitle: "",
   secondaryTags: () => [],
@@ -122,6 +165,15 @@ const ctaLink = computed(() => ({
 function hasTags(tags: string[]) {
   return Array.isArray(tags) && tags.length > 0;
 }
+
+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>
@@ -168,10 +220,18 @@ function hasTags(tags: string[]) {
 
   &__body {
     overflow-wrap: break-word;
-    height: 100%;
     display: flex;
-    justify-content: flex-end;
     flex-direction: column;
+    justify-content: flex-end;
+    height: 100%;
+
+    &__top {
+      height: 100%;
+    }
+  }
+
+  &__eyebrow {
+    margin-bottom: carbon.$spacing-05;
   }
 
   &__content {
@@ -183,10 +243,17 @@ function hasTags(tags: string[]) {
   }
 
   &__description {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
+    margin-bottom: carbon.$spacing-06;
+    max-height: 240ch;
+
+    &__toggle {
+      cursor: pointer;
+      color: qiskit.$link-color-tertiary;
+
+      &:hover {
+        color: qiskit.$link-color-tertiary;
+      }
+    }
   }
 
   &__ctas {

diff --git a/pages/events/index.vue b/pages/events/index.vue
@@ -97,6 +97,10 @@
                 :to="eventItem.to"
                 :regions="eventItem.regions"
                 :description="eventItem.abstract || ''"
+                :segment="{
+                  cta: '',
+                  location: 'event-pages-index',
+                }"
               />
             </div>
           </div>