@eox/pages-theme-eox 2.0.0-alpha.1 → 2.0.0-alpha.10

package/src/components/TestimonialsSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="testimonials-section full-width surface-container-low">
+  <section class="testimonials-section full-width surface-container-lowest">
     <div class="holder">
       <!-- Left Side: Headline -->
       <div class="headline">
@@ -9,10 +9,27 @@
       </div>
 
       <!-- Right Side: Text Block -->
-      <div v-if="testimonials && testimonials.length > 0" class="text-block">
-        <!-- Testimonial Quote -->
-        <div class="quote-text">
-          &ldquo;{{ currentTestimonial.quote }}&rdquo;
+      <div
+        v-if="testimonials && testimonials.length > 0"
+        class="text-block"
+        role="region"
+        aria-roledescription="carousel"
+        :aria-label="title"
+      >
+        <!-- Testimonial Quotes Overlapping Grid -->
+        <div class="quotes-grid" aria-live="polite">
+          <div
+            v-for="(item, index) in testimonials"
+            :key="index"
+            class="quote-slide"
+            :class="{
+              active: index === currentIndex,
+              'quote-text': index === currentIndex,
+            }"
+            :aria-hidden="index !== currentIndex"
+          >
+            &ldquo;{{ item.quote }}&rdquo;
+          </div>
         </div>
 
         <!-- Divider / Separator -->
@@ -20,14 +37,28 @@
 
         <!-- Frame 469: Author info & sliders -->
         <div class="frame-469">
-          <!-- Frame 468: Author Name and Role -->
+          <!-- Frame 468: Author Name and Role Overlapping Grid -->
           <div class="frame-468">
-            <span class="author-name">
-              {{ currentTestimonial.author }}
-            </span>
-            <span class="author-role">
-              {{ currentTestimonial.role }}
-            </span>
+            <div
+              v-for="(item, index) in testimonials"
+              :key="index"
+              class="author-slide"
+              :class="{ active: index === currentIndex }"
+              :aria-hidden="index !== currentIndex"
+            >
+              <span
+                class="author-name-text"
+                :class="{ 'author-name': index === currentIndex }"
+              >
+                {{ item.author }}
+              </span>
+              <span
+                class="author-role-text"
+                :class="{ 'author-role': index === currentIndex }"
+              >
+                {{ item.role }}
+              </span>
+            </div>
           </div>
 
           <!-- sliders: Navigation Buttons -->
@@ -57,7 +88,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 
 const props = defineProps({
   title: {
@@ -91,6 +122,16 @@ const props = defineProps({
 
 const currentIndex = ref(0);
 
+// Clamp currentIndex if testimonials prop array changes dynamically
+watch(
+  () => props.testimonials?.length,
+  (len) => {
+    if (len && currentIndex.value >= len) {
+      currentIndex.value = 0;
+    }
+  },
+);
+
 const currentTestimonial = computed(() => {
   if (!props.testimonials || props.testimonials.length === 0) return null;
   return props.testimonials[currentIndex.value];
@@ -118,6 +159,7 @@ section.testimonials-section {
   margin-block-start: 6rem;
   margin-block-end: 6rem;
   box-sizing: border-box;
+  background-color: var(--surface-container-lowest, #ffffff);
 }
 
 @media (min-width: 1024px) {
@@ -168,6 +210,38 @@ section.testimonials-section {
   gap: 24px;
 }
 
+.quotes-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  width: 100%;
+}
+
+.quote-slide {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  color: #00060a;
+  min-height: 72px;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.25s ease,
+    visibility 0.25s ease;
+  pointer-events: none;
+}
+
+.quote-slide.active {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
 .quote-text {
   font-family: "Inter", sans-serif;
   font-style: normal;
@@ -195,14 +269,35 @@ section.testimonials-section {
 }
 
 .frame-468 {
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: flex-start;
+  flex-grow: 1;
+}
+
+.author-slide {
+  grid-column: 1;
+  grid-row: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
-  flex-grow: 1;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.25s ease,
+    visibility 0.25s ease;
+  pointer-events: none;
+}
+
+.author-slide.active {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
 }
 
-.author-name {
+.author-name,
+.author-name-text {
   font-family: "Inter", sans-serif;
   font-style: normal;
   font-weight: 700;
@@ -212,7 +307,8 @@ section.testimonials-section {
   color: #00060a;
 }
 
-.author-role {
+.author-role,
+.author-role-text {
   font-family: "Inter", sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -222,6 +318,13 @@ section.testimonials-section {
   color: #00060a;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .quote-slide,
+  .author-slide {
+    transition: none;
+  }
+}
+
 .sliders {
   display: flex;
   flex-direction: row;

package/src/components/TextSection.cy.js

@@ -0,0 +1,115 @@
+import { h } from "vue";
+import TextSection from "./TextSection.vue";
+
+describe("<TextSection />", () => {
+  it("renders title, tagline and button", () => {
+    cy.mount(TextSection, {
+      props: {
+        title: "Test Section",
+        tagline: "Test Tagline",
+        buttonText: "Click Me",
+        buttonLink: "https://example.com",
+      },
+    });
+
+    cy.contains("Test Section").should("exist");
+    cy.contains("Test Tagline").should("exist");
+    cy.contains("a.button", "Click Me")
+      .should("have.attr", "href", "https://example.com")
+      .and("have.attr", "target", "_blank");
+  });
+
+  it("renders slot content and image", () => {
+    cy.mount(TextSection, {
+      props: {
+        image: "/test.jpg",
+        imageAlt: "Test Image",
+      },
+      slots: {
+        default: "<p>This is paragraph text.</p>",
+      },
+    });
+
+    cy.contains("This is paragraph text.").should("exist");
+    cy.get("img.section-image")
+      .should("have.attr", "src", "/test.jpg")
+      .and("have.attr", "alt", "Test Image");
+  });
+
+  it("applies reverse class when reverse prop is true", () => {
+    cy.mount(TextSection, {
+      props: {
+        image: "/test.jpg",
+        reverse: true,
+      },
+    });
+
+    cy.get(".text-section").should("have.class", "is-reverse");
+    cy.get(".text-section-grid").should("have.class", "grid-reverse");
+  });
+
+  it("applies single column styling when no image is provided", () => {
+    cy.mount(TextSection, {
+      slots: {
+        default: "<p>Single column text</p>",
+      },
+    });
+
+    cy.get(".text-section").should("have.class", "no-image");
+    cy.get(".text-section-grid").should("have.class", "grid-single");
+    cy.get(".media-column").should("not.exist");
+  });
+
+  it("applies extra padding-block-end to a single section", () => {
+    cy.mount(TextSection, {
+      props: {
+        title: "Single Section",
+      },
+    });
+
+    cy.get(".text-section").should("have.css", "padding-bottom", "80px");
+    cy.get(".text-section").should("have.css", "padding-top", "56px");
+  });
+
+  it("applies extra padding-block-end only to the last section when multiple are consecutive", () => {
+    const TestWrapper = {
+      render() {
+        return h("div", [
+          h(TextSection, { title: "Section 1" }),
+          h(TextSection, { title: "Section 2" }),
+          h(TextSection, { title: "Section 3" }),
+        ]);
+      },
+    };
+
+    cy.mount(TestWrapper);
+
+    // First section: standard padding-bottom 56px, normal padding-top 56px
+    cy.get(".text-section").eq(0).should("have.css", "padding-bottom", "56px");
+    cy.get(".text-section").eq(0).should("have.css", "padding-top", "56px");
+
+    // Second section: standard padding-bottom 56px, tightened padding-top 16px
+    cy.get(".text-section").eq(1).should("have.css", "padding-bottom", "56px");
+    cy.get(".text-section").eq(1).should("have.css", "padding-top", "16px");
+
+    // Third (last) section: extra padding-bottom 80px, tightened padding-top 16px
+    cy.get(".text-section").eq(2).should("have.css", "padding-bottom", "80px");
+    cy.get(".text-section").eq(2).should("have.css", "padding-top", "16px");
+  });
+
+  it("handles compact sections with appropriate padding-block-end", () => {
+    const TestWrapper = {
+      render() {
+        return h("div", [
+          h(TextSection, { title: "Compact 1", compact: true }),
+          h(TextSection, { title: "Compact 2", compact: true }),
+        ]);
+      },
+    };
+
+    cy.mount(TestWrapper);
+
+    cy.get(".text-section").eq(0).should("have.css", "padding-bottom", "28px");
+    cy.get(".text-section").eq(1).should("have.css", "padding-bottom", "40px");
+  });
+});

package/src/components/TextSection.vue

@@ -0,0 +1,396 @@
+<template>
+  <section
+    class="text-section full-width"
+    :class="{
+      'is-reverse': reverse,
+      'no-image': !image && !$slots.media,
+      'is-compact': compact,
+    }"
+  >
+    <div class="holder">
+      <div
+        class="text-section-grid"
+        :class="{
+          'grid-reverse': reverse,
+          'grid-single': !image && !$slots.media,
+        }"
+      >
+        <!-- Text Column -->
+        <div class="text-column">
+          <span v-if="tagline" class="tagline">{{ tagline }}</span>
+          <h2 v-if="title" class="section-title">{{ title }}</h2>
+          <div class="section-content">
+            <slot></slot>
+          </div>
+          <!-- Prop-based button -->
+          <div v-if="buttonText && buttonLink" class="section-actions">
+            <a
+              :href="resolvedButtonLink"
+              :target="resolvedButtonTarget"
+              class="button"
+              @click="
+                trackEvent([
+                  'TextSection',
+                  'Click',
+                  title || buttonText,
+                  buttonText,
+                ])
+              "
+            >
+              <span>{{ buttonText }}</span>
+              <i v-if="buttonIcon" :class="buttonIcon" class="btn-icon"></i>
+            </a>
+          </div>
+          <slot name="actions"></slot>
+        </div>
+
+        <!-- Media Column -->
+        <div v-if="image || $slots.media" class="media-column">
+          <slot name="media">
+            <img
+              v-if="image"
+              :src="resolvedImage"
+              :alt="imageAlt || title || ''"
+              class="section-image"
+              loading="lazy"
+            />
+          </slot>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { withBase } from "vitepress";
+import { computed } from "vue";
+import { trackEvent } from "../helpers.js";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  tagline: {
+    type: String,
+    default: "",
+  },
+  image: {
+    type: String,
+    default: "",
+  },
+  imageAlt: {
+    type: String,
+    default: "",
+  },
+  reverse: {
+    type: Boolean,
+    default: false,
+  },
+  buttonText: {
+    type: String,
+    default: "",
+  },
+  buttonLink: {
+    type: String,
+    default: "",
+  },
+  buttonTarget: {
+    type: String,
+    default: "",
+  },
+  buttonIcon: {
+    type: String,
+    default: "",
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+function resolveUrl(url) {
+  if (!url) return "";
+  if (
+    url.startsWith("http://") ||
+    url.startsWith("https://") ||
+    url.startsWith("//") ||
+    url.startsWith("#")
+  ) {
+    return url;
+  }
+  return withBase(url);
+}
+
+const resolvedImage = computed(() => resolveUrl(props.image));
+const resolvedButtonLink = computed(() => resolveUrl(props.buttonLink));
+const resolvedButtonTarget = computed(() => {
+  if (props.buttonTarget) return props.buttonTarget;
+  if (
+    props.buttonLink &&
+    (props.buttonLink.startsWith("http://") ||
+      props.buttonLink.startsWith("https://") ||
+      props.buttonLink.startsWith("//"))
+  ) {
+    return "_blank";
+  }
+  return "_self";
+});
+</script>
+
+<style scoped>
+.full-width {
+  width: 100svw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50svw;
+  margin-right: -50svw;
+  max-inline-size: unset !important;
+}
+
+.text-section {
+  padding-block-start: 56px;
+  padding-block-end: 80px;
+  display: flex;
+  justify-content: center;
+  background: transparent;
+  color: var(--on-surface, #020617);
+}
+
+.text-section.is-compact {
+  padding-block-start: 28px;
+  padding-block-end: 40px;
+}
+
+/* When text-sections are placed consecutively, tighten spacing and only apply extra end padding to the last one */
+:deep(.text-section:has(+ .text-section)),
+.text-section:has(+ .text-section) {
+  padding-block-end: 56px;
+}
+
+:deep(.text-section.is-compact:has(+ .text-section)),
+.text-section.is-compact:has(+ .text-section) {
+  padding-block-end: 28px;
+}
+
+:deep(.text-section + .text-section),
+.text-section + .text-section {
+  padding-block-start: 16px;
+}
+
+.text-section .holder {
+  width: 100%;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-inline: 24px;
+}
+
+.text-section-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+  align-items: center;
+}
+
+/* On mobile (< 1024px), the media/image column is always at the start before the text */
+.text-section-grid .media-column {
+  order: 1;
+}
+
+.text-section-grid .text-column {
+  order: 2;
+}
+
+@media (min-width: 1024px) {
+  .text-section-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+  }
+
+  /* Default on desktop: Text on left (1), Media on right (2) */
+  .text-section-grid .text-column {
+    order: 1;
+  }
+
+  .text-section-grid .media-column {
+    order: 2;
+  }
+
+  /* Reverse on desktop: Media on left (1), Text on right (2) */
+  .text-section-grid.grid-reverse .text-column {
+    order: 2;
+  }
+
+  .text-section-grid.grid-reverse .media-column {
+    order: 1;
+  }
+
+  .text-section-grid.grid-single {
+    grid-template-columns: 1fr;
+    max-width: 680px;
+  }
+}
+
+.text-column {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.tagline {
+  display: inline-block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--primary, #004170);
+  margin-bottom: 0.5rem;
+}
+
+.section-title {
+  font-family: inherit;
+  font-weight: 700;
+  font-size: 2rem;
+  line-height: 1.25;
+  color: #020617;
+  margin-top: 0;
+  margin-bottom: 1.25rem;
+  border-top: none;
+}
+
+/* Markdown Content Styling */
+.section-content :deep(h2) {
+  font-family: inherit;
+  font-weight: 700;
+  font-size: 2rem;
+  line-height: 1.25;
+  color: #020617;
+  margin-top: 0;
+  margin-bottom: 1.25rem;
+  border-top: none;
+}
+
+.section-content :deep(h3) {
+  font-family: inherit;
+  font-weight: 700;
+  font-size: 1.5rem;
+  line-height: 1.35;
+  color: #020617;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  border-top: none;
+}
+
+.section-content :deep(h4),
+.section-content :deep(h5) {
+  font-family: inherit;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.4;
+  color: #020617;
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.section-content :deep(p) {
+  font-size: 1rem;
+  line-height: 1.65;
+  color: #334155;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.section-content :deep(ul) {
+  margin-top: 0.75rem;
+  margin-bottom: 1.25rem;
+  padding-left: 1.25rem;
+  list-style-type: disc;
+}
+
+.section-content :deep(li) {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: #334155;
+  margin-bottom: 0.5rem;
+}
+
+.section-content :deep(li strong) {
+  color: #020617;
+  font-weight: 700;
+}
+
+.section-content :deep(a:not(.button)) {
+  color: #0284c7;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.15s ease-in-out;
+}
+
+.section-content :deep(a:not(.button):hover) {
+  text-decoration: underline;
+  color: #0369a1;
+}
+
+/* Pill Button Styling - for both prop and markdown links with .button */
+.section-actions {
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.button,
+.section-content :deep(a.button),
+.section-content :deep(.button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1.5rem;
+  border-radius: 9999px;
+  border: 1px solid #020617;
+  background-color: #ffffff;
+  color: #020617 !important;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  text-decoration: none !important;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  width: fit-content;
+}
+
+.button:hover,
+.section-content :deep(a.button:hover),
+.section-content :deep(.button:hover) {
+  background-color: #f1f5f9;
+  border-color: #020617;
+  color: #020617 !important;
+}
+
+.btn-icon {
+  font-size: 1.1em;
+  display: inline-flex;
+}
+
+/* Media Column & Image Styling */
+.media-column {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.section-image {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  border-radius: 16px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow:
+    0 4px 16px -2px rgba(15, 23, 42, 0.06),
+    0 2px 6px -2px rgba(15, 23, 42, 0.04);
+  background-color: #ffffff;
+  display: block;
+}
+</style>