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

package/src/components/TestimonialsSection.cy.js

@@ -0,0 +1,76 @@
+import TestimonialsSection from "./TestimonialsSection.vue";
+
+describe("<TestimonialsSection />", () => {
+  it("renders with default props and switches testimonials", () => {
+    cy.mount(TestimonialsSection);
+
+    // Verify title
+    cy.get(".headline h2").should("contain", "What our customers are saying");
+
+    // Verify first testimonial quote
+    cy.get(".quote-text").should(
+      "contain",
+      "The VirES platform has completely revolutionized",
+    );
+    cy.get(".author-name").should("contain", "Dr. Fiona Harrison");
+
+    // Click next button
+    cy.get("button[aria-label='Next testimonial']").click();
+
+    // Verify second testimonial quote
+    cy.get(".quote-text").should(
+      "contain",
+      "Deploying our Area Monitoring System",
+    );
+    cy.get(".author-name").should("contain", "Dr. Liam O'Connor");
+
+    // Click prev button
+    cy.get("button[aria-label='Previous testimonial']").click();
+
+    // Verify first testimonial quote again
+    cy.get(".quote-text").should(
+      "contain",
+      "The VirES platform has completely revolutionized",
+    );
+    cy.get(".author-name").should("contain", "Dr. Fiona Harrison");
+  });
+
+  it("renders custom title and custom testimonials list", () => {
+    const customTitle = "What Our Amazing Clients Think";
+    const customTestimonials = [
+      {
+        quote: "This is a custom quote that is extremely positive.",
+        author: "Alice Smith",
+        role: "Software Architect",
+      },
+      {
+        quote: "Another custom quote for testing purposes.",
+        author: "Bob Jones",
+        role: "Data Analyst",
+      },
+    ];
+
+    cy.mount(TestimonialsSection, {
+      props: {
+        title: customTitle,
+        testimonials: customTestimonials,
+      },
+    });
+
+    // Check title
+    cy.get(".headline h2").should("contain", customTitle);
+
+    // Check first custom testimonial
+    cy.get(".quote-text").should("contain", "This is a custom quote");
+    cy.get(".author-name").should("contain", "Alice Smith");
+    cy.get(".author-role").should("contain", "Software Architect");
+
+    // Go next
+    cy.get("button[aria-label='Next testimonial']").click();
+
+    // Check second custom testimonial
+    cy.get(".quote-text").should("contain", "Another custom quote");
+    cy.get(".author-name").should("contain", "Bob Jones");
+    cy.get(".author-role").should("contain", "Data Analyst");
+  });
+});

package/src/components/TestimonialsSection.vue

@@ -0,0 +1,368 @@
+<template>
+  <section class="testimonials-section full-width surface-container-lowest">
+    <div class="holder">
+      <!-- Left Side: Headline -->
+      <div class="headline">
+        <h2>
+          {{ title }}
+        </h2>
+      </div>
+
+      <!-- Right Side: Text Block -->
+      <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 -->
+        <div class="divider"></div>
+
+        <!-- Frame 469: Author info & sliders -->
+        <div class="frame-469">
+          <!-- Frame 468: Author Name and Role Overlapping Grid -->
+          <div class="frame-468">
+            <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 -->
+          <div class="sliders">
+            <!-- Left Arrow Button -->
+            <button
+              class="nav-button"
+              @click="prev"
+              aria-label="Previous testimonial"
+            >
+              <i class="mdi mdi-arrow-left"></i>
+            </button>
+
+            <!-- Right Arrow Button -->
+            <button
+              class="nav-button"
+              @click="next"
+              aria-label="Next testimonial"
+            >
+              <i class="mdi mdi-arrow-right"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "What our customers are saying",
+  },
+  testimonials: {
+    type: Array,
+    default: () => [
+      {
+        quote:
+          "The VirES platform has completely revolutionized how Swarm mission data is accessed and analyzed by the global scientific community. Its cloud-native performance and seamless visualization are unmatched.",
+        author: "Dr. Fiona Harrison",
+        role: "Lead Swarm Researcher, Scientific Advisory Group",
+      },
+      {
+        quote:
+          "Deploying our Area Monitoring System on EOxHub workspaces allowed us to process millions of parcels in near real-time. This level of automation and reliability is precisely what we needed for the CAP implementation.",
+        author: "Dr. Liam O'Connor",
+        role: "Senior Spatial Scientist, Agricultural Paying Agency",
+      },
+      {
+        quote:
+          "The EOX base map layers are an essential asset for our global dashboard. Their Sentinel-2 cloudless composites provide a pristine, cloud-free visual experience that our users absolutely love.",
+        author: "Sarah Jenkins",
+        role: "Chief Product Officer, Global Earth Explorer Platform",
+      },
+    ],
+  },
+});
+
+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];
+});
+
+function prev() {
+  if (!props.testimonials || props.testimonials.length === 0) return;
+  currentIndex.value =
+    (currentIndex.value - 1 + props.testimonials.length) %
+    props.testimonials.length;
+}
+
+function next() {
+  if (!props.testimonials || props.testimonials.length === 0) return;
+  currentIndex.value = (currentIndex.value + 1) % props.testimonials.length;
+}
+</script>
+
+<style scoped>
+section.testimonials-section {
+  display: flex;
+  justify-content: center;
+  overflow-x: hidden;
+  padding: 3rem 1.5rem;
+  margin-block-start: 6rem;
+  margin-block-end: 6rem;
+  box-sizing: border-box;
+  background-color: var(--surface-container-lowest, #ffffff);
+}
+
+@media (min-width: 1024px) {
+  section.testimonials-section {
+    padding: 6rem 1.5rem;
+  }
+}
+
+.holder {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  width: 100%;
+}
+
+@media (min-width: 1024px) {
+  .holder {
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 64px;
+  }
+}
+
+.headline {
+  flex: 1 1 50%;
+  max-width: 620px;
+}
+
+.headline h2 {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 36px !important;
+  line-height: 44px;
+  letter-spacing: 0.5008px;
+  color: #00060a;
+  margin: 0 !important;
+  padding: 0 !important;
+  border-top: none !important;
+}
+
+.text-block {
+  flex: 1 1 50%;
+  max-width: 620px;
+  display: flex;
+  flex-direction: column;
+  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;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  color: #00060a;
+  min-height: 72px;
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  background: #ccd9e2;
+}
+
+.frame-469 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+}
+
+.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;
+  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-text {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  color: #00060a;
+}
+
+.author-role,
+.author-role-text {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  color: #00060a;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .quote-slide,
+  .author-slide {
+    transition: none;
+  }
+}
+
+.sliders {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 24px;
+  flex-shrink: 0;
+}
+
+.nav-button {
+  display: flex !important;
+  flex-direction: row !important;
+  justify-content: center !important;
+  align-items: center !important;
+  padding: 0 !important;
+  width: 48px !important;
+  min-width: 48px !important;
+  max-width: 48px !important;
+  height: 48px !important;
+  min-height: 48px !important;
+  max-height: 48px !important;
+  background: #004170 !important;
+  box-shadow:
+    0px 24px 48px -8px rgba(62, 52, 69, 0.12),
+    0px 2px 4px rgba(62, 52, 69, 0.04) !important;
+  border-radius: 999px !important;
+  border: none !important;
+  cursor: pointer !important;
+  transition: background-color 0.2s ease !important;
+  box-sizing: border-box !important;
+}
+
+.nav-button:hover {
+  background: #002e52;
+}
+
+.nav-button i {
+  color: #ffffff;
+  font-size: 24px;
+  line-height: 1;
+}
+</style>

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");
+  });
+});