@eox/pages-theme-eox 0.11.5 → 1.1.0

package/src/components/FeaturesGallery.cy.js

@@ -0,0 +1,45 @@
+import FeaturesGallery from "./FeaturesGallery.vue";
+import { __setMockData } from "../../cypress/support/mocks/vitepress";
+
+describe("<FeaturesGallery />", () => {
+  const cards = [
+    { id: 1, title: "Card 1", content: "Content 1", icon: "mdi-home" },
+    { id: 2, title: "Card 2", content: "Content 2" },
+  ];
+
+  beforeEach(() => {
+    __setMockData({});
+  });
+
+  it("renders section title", () => {
+    cy.mount(FeaturesGallery, {
+      props: {
+        sectionTitle: "My Gallery",
+        cards,
+      },
+    });
+
+    cy.contains("h5", "My Gallery").should("be.visible");
+  });
+
+  it("renders feature cards", () => {
+    cy.mount(FeaturesGallery, {
+      props: { cards },
+    });
+
+    cy.contains("Card 1").should("exist");
+    cy.contains("Content 1").should("exist");
+    cy.contains("Card 2").should("exist");
+  });
+
+  it("applies background classes", () => {
+    cy.mount(FeaturesGallery, {
+      props: {
+        cards,
+        background: "custom-bg-class",
+      },
+    });
+
+    cy.get("section").should("have.class", "custom-bg-class");
+  });
+});

package/src/components/FeaturesGallery.vue

@@ -69,7 +69,10 @@ const featuresExcerpts =
           );
         })
         .filter((f) => f);
-const siteTitle = sectionTitle !== false ? (sectionTitle || `More ${site.value.title} features:`) : false;
+const siteTitle =
+  sectionTitle !== false
+    ? sectionTitle || `More ${site.value.title} features:`
+    : false;
 </script>
 
 <template>
@@ -126,11 +129,11 @@ section {
 .link-card {
   display: block;
   text-decoration: none;
-  border: .0625rem solid transparent;
+  border: 0.0625rem solid transparent;
 }
 .link-card:hover article {
   box-shadow: none;
-  border: .0625rem solid var(--outline-variant);
+  border: 0.0625rem solid var(--outline-variant);
 }
 
 .card-wrapper {

package/src/components/Footer.cy.js

@@ -0,0 +1,77 @@
+import Footer from "./Footer.vue";
+import { __setMockData } from "../../cypress/support/mocks/vitepress";
+
+describe("<Footer />", () => {
+  beforeEach(() => {
+    __setMockData({
+      site: { title: "EOX Site" },
+      theme: {
+        logo: { light: "/logo.png" },
+        nav: [
+          { text: "Link 1", link: "/link1" },
+          { text: "Contact", link: "/contact" },
+        ],
+        footer: {
+          copyright: "© 2026 EOX",
+        },
+        theme: {
+          brandConfig: {
+            legal: {
+              about: "/about",
+              termsAndConditions: "/terms",
+              privacyPolicy: "/privacy",
+            },
+          },
+        },
+      },
+    });
+  });
+
+  it("renders logo and copyright", () => {
+    cy.mount(Footer);
+
+    cy.get("img.logo").should("have.attr", "src", "/logo.png");
+    cy.contains("© 2026 EOX").should("exist");
+  });
+
+  it("renders contact button", () => {
+    cy.mount(Footer);
+    cy.contains("a", "Contact").should("have.attr", "href", "/contact");
+  });
+
+  it("renders legal links", () => {
+    cy.mount(Footer);
+    cy.contains("a", "About").should("have.attr", "href", "/about");
+    cy.contains("a", "Terms & Conditions").should(
+      "have.attr",
+      "href",
+      "/terms",
+    );
+    cy.contains("a", "Privacy").should("have.attr", "href", "/privacy");
+  });
+
+  it("renders i18n overrides", () => {
+    __setMockData({
+      site: { title: "EOX Site" },
+      theme: {
+        logo: { light: "/logo.png" },
+        nav: [],
+        footer: {
+          copyright: "© 2026 EOX",
+        },
+        i18n: {
+          About: "Über uns",
+          Legal: "Rechtliches",
+          "Powered by": "Unterstützt von",
+        },
+        theme: {
+          brandConfig: {},
+        },
+      },
+    });
+    cy.mount(Footer);
+    cy.contains("Über uns").should("exist");
+    cy.contains("Rechtliches").should("exist");
+    cy.contains("Unterstützt von").should("exist");
+  });
+});

package/src/components/Footer.vue

@@ -11,16 +11,20 @@
           />
           <div class="small-space"></div>
           <a
-            v-if="theme.nav.find((i) => i.link.includes('contact'))"
-            :href="theme.nav.find((i) => i.link.includes('contact')).link"
+            v-if="theme.nav.find((i) => i.link && i.link.includes('contact'))"
+            :href="
+              theme.nav.find((i) => i.link && i.link.includes('contact')).link
+            "
             class="button small border no-margin"
             style="color: var(--on-surface)"
             @click="trackEvent(['CTA', 'Click', 'Footer', action.text])"
-            >{{ theme.nav.find((i) => i.link.includes("contact")).text }}</a
+            >{{
+              theme.nav.find((i) => i.link && i.link.includes("contact")).text
+            }}</a
           >
           <p v-html="theme.footer.copyright"></p>
           <p class="middle-align">
-            Powered by
+            {{ t("Powered by", theme.i18n) }}
             <a
               href="https://hub.eox.at"
               target="_blank"
@@ -33,9 +37,12 @@
         </div>
         <div class="s12 l6">
           <div class="grid large-line">
-            <div class="s6">
-              <p class="bold">About</p>
-              <p v-for="item in theme.nav.filter((i) => !i.action)">
+            <div
+              class="s6 l4"
+              v-if="theme.nav.filter((i) => !i.action && i.link).length"
+            >
+              <p class="bold">{{ t("About", theme.i18n) }}</p>
+              <p v-for="item in theme.nav.filter((i) => !i.action && i.link)">
                 <a
                   :href="withBase(item.link)"
                   :target="item.target"
@@ -45,8 +52,20 @@
                 >
               </p>
             </div>
-            <div class="s6">
-              <p class="bold">Legal</p>
+            <div class="s6 l4" v-for="item in theme.nav.filter((i) => i.items)">
+              <p class="bold">{{ item.text }}</p>
+              <p v-for="subItem in getFlatList(item.items)">
+                <a
+                  :href="withBase(subItem.link)"
+                  :target="subItem.target"
+                  :rel="subItem.rel"
+                  class="link"
+                  >{{ subItem.text }}</a
+                >
+              </p>
+            </div>
+            <div class="s6 l4">
+              <p class="bold">{{ t("Legal", theme.i18n) }}</p>
               <p>
                 <a
                   :href="
@@ -55,7 +74,7 @@
                   "
                   target="_blank"
                   class="link"
-                  >About</a
+                  >{{ t("About", theme.i18n) }}</a
                 >
               </p>
               <p>
@@ -66,7 +85,7 @@
                   "
                   target="_blank"
                   class="link"
-                  >Terms & Conditions</a
+                  >{{ t("Terms & Conditions", theme.i18n) }}</a
                 >
               </p>
               <p>
@@ -77,11 +96,13 @@
                   "
                   target="_blank"
                   class="link"
-                  >Privacy</a
+                  >{{ t("Privacy", theme.i18n) }}</a
                 >
               </p>
               <p v-if="theme.theme.brandConfig?.analytics">
-                <a href="/cookie-settings" class="link">Cookie settings</a>
+                <a href="/cookie-settings" class="link">{{
+                  t("Cookie settings", theme.i18n)
+                }}</a>
               </p>
             </div>
           </div>
@@ -94,7 +115,7 @@
 
 <script setup>
 import { useData, withBase } from "vitepress";
-import { trackEvent } from "../helpers";
+import { trackEvent, getFlatList, t } from "../helpers";
 const { site, theme } = useData();
 </script>
 

package/src/components/HeroSection.cy.js

@@ -0,0 +1,66 @@
+import HeroSection from "./HeroSection.vue";
+import { __setMockData } from "../../cypress/support/mocks/vitepress";
+
+describe("<HeroSection />", () => {
+  beforeEach(() => {
+    // Reset mock data before each test
+    __setMockData({
+      frontmatter: {
+        hero: {
+          text: "Hero Text",
+          tagline: "Hero Tagline",
+          actions: [
+            { text: "Start", link: "/start", theme: "brand" },
+            { text: "More", link: "/more", theme: "secondary" },
+          ],
+          image: { src: "/image.png", alt: "Hero Image" },
+        },
+      },
+    });
+  });
+
+  it("renders correctly with default data", () => {
+    cy.mount(HeroSection);
+
+    cy.get("h1").should("contain", "Hero Text");
+    cy.get("p").should("contain", "Hero Tagline");
+
+    // Check actions
+    cy.contains("a", "Start").should("have.attr", "href", "/start");
+    cy.contains("a", "Start").should("have.class", "primary-text"); // brand theme
+
+    cy.contains("a", "More").should("have.attr", "href", "/more");
+    cy.contains("a", "More").should("have.class", "secondary"); // secondary theme
+
+    // Check image
+    cy.get("img.hero-image").should("have.attr", "src", "/image.png");
+  });
+
+  it("renders video when provided", () => {
+    __setMockData({
+      frontmatter: {
+        hero: {
+          text: "Video Hero",
+          video: { src: "/video.mp4" },
+        },
+      },
+    });
+
+    cy.mount(HeroSection);
+    cy.get("video.hero-image").should("have.attr", "src", "/video.mp4");
+  });
+
+  it("renders background image", () => {
+    __setMockData({
+      frontmatter: {
+        hero: {
+          text: "BG Hero",
+          background: { src: "/bg.jpg" },
+        },
+      },
+    });
+
+    cy.mount(HeroSection);
+    cy.get("img.background-image").should("have.attr", "src", "/bg.jpg");
+  });
+});

package/src/components/LogoSection.cy.js

@@ -0,0 +1,53 @@
+import LogoSection from "./LogoSection.vue";
+
+describe("<LogoSection />", () => {
+  const logos = [
+    { image: "/logo1.png", alt: "Logo 1", link: "https://example.com" },
+    { image: "/logo2.png", alt: "Logo 2" }, // No link
+  ];
+
+  it("renders list of logos", () => {
+    cy.mount(LogoSection, {
+      props: { logos },
+    });
+
+    cy.get(".logo-row").find("img").should("have.length", 2);
+    cy.get('img[alt="Logo 1"]').should("exist");
+    cy.get('img[alt="Logo 2"]').should("exist");
+  });
+
+  it("wraps logos with link when provided", () => {
+    cy.mount(LogoSection, {
+      props: { logos },
+    });
+
+    cy.get('a[href="https://example.com"]')
+      .find('img[alt="Logo 1"]')
+      .should("exist");
+  });
+
+  it("renders div instead of link when no link provided", () => {
+    cy.mount(LogoSection, {
+      props: { logos },
+    });
+
+    cy.get("div.logo").find('img[alt="Logo 2"]').should("exist");
+  });
+
+  it("sets css variables on mount", () => {
+    cy.mount(LogoSection, {
+      props: {
+        logos: [],
+        baseHeight: 5,
+        strength: 0.8,
+      },
+    });
+
+    cy.get(".logo-row")
+      .should("have.attr", "style")
+      .and("include", "--base-height: 5rem");
+    cy.get(".logo-row")
+      .should("have.attr", "style")
+      .and("include", "--strength: 0.8");
+  });
+});

package/src/components/MobileNavDropdown.cy.js

@@ -0,0 +1,67 @@
+import MobileNavDropdown from "./MobileNavDropdown.vue";
+import { __setRouteMock } from "../../cypress/support/mocks/vitepress";
+
+describe("<MobileNavDropdown />", () => {
+  const items = [
+    { text: "Home", link: "/" },
+    { text: "About", link: "/about" },
+    {
+      text: "Products",
+      items: [
+        { text: "Product A", link: "/products/a" },
+        { text: "Product B", link: "/products/b" },
+      ],
+    },
+  ];
+
+  it("renders list of items", () => {
+    cy.mount(MobileNavDropdown, {
+      props: {
+        items,
+      },
+    });
+
+    cy.contains("Home").should("exist");
+    cy.contains("About").should("exist");
+    cy.contains("Products").should("exist");
+  });
+
+  it("renders nested dropdowns inside details", () => {
+    cy.mount(MobileNavDropdown, {
+      props: {
+        items,
+      },
+    });
+
+    // Products should be a summary
+    cy.contains("summary", "Products").should("exist");
+    // Children should be there (hidden by default maybe, but existent in DOM)
+    cy.contains("Product A").should("exist");
+  });
+
+  it("marks active item", () => {
+    __setRouteMock({ path: "/about" });
+
+    cy.mount(MobileNavDropdown, {
+      props: {
+        items,
+      },
+    });
+
+    cy.contains("a", "About").should("have.class", "active");
+  });
+
+  it("marks parent active if child is active", () => {
+    __setRouteMock({ path: "/products/a" });
+
+    cy.mount(MobileNavDropdown, {
+      props: {
+        items,
+      },
+    });
+
+    // In MobileNavDropdown.vue:
+    // <span class="max" :class="{ active: isActive(item, route.path) }">{{ item.text }}</span>
+    cy.contains("span", "Products").should("have.class", "active");
+  });
+});

package/src/components/MobileNavDropdown.vue

@@ -0,0 +1,48 @@
+<template>
+  <template v-for="item in items">
+    <li v-if="item.items && item.text">
+      <details>
+        <summary>
+          <span class="max" :class="{ active: isActive(item, route.path) }">{{
+            t(item.text, theme.i18n)
+          }}</span>
+          <i class="mdi mdi-chevron-down"></i>
+        </summary>
+        <ul class="list">
+          <MobileNavDropdown :items="item.items" />
+        </ul>
+      </details>
+    </li>
+    <MobileNavDropdown v-else-if="item.items" :items="item.items" />
+    <li v-else>
+      <a
+        v-if="item.link"
+        :href="withBase(item.link)"
+        :target="item.target"
+        :rel="item.rel"
+        data-ui="#mobile-menu"
+        :class="{ active: isActive(item, route.path) }"
+      >
+        <span>{{ t(item.text, theme.i18n) }}</span>
+      </a>
+      <span v-else :class="{ active: isActive(item, route.path) }">{{
+        t(item.text, theme.i18n)
+      }}</span>
+    </li>
+  </template>
+</template>
+
+<script setup>
+import { withBase, useRoute, useData } from "vitepress";
+import { isActive, t } from "../helpers";
+
+defineProps({
+  items: {
+    type: Array,
+    required: true,
+  },
+});
+
+const route = useRoute();
+const { theme } = useData();
+</script>

package/src/components/NavBar.cy.js

@@ -0,0 +1,143 @@
+import NavBar from "./NavBar.vue";
+import { __setMockData } from "../../cypress/support/mocks/vitepress";
+
+describe("<NavBar />", () => {
+  beforeEach(() => {
+    __setMockData({
+      site: { title: "EOX" },
+      theme: {
+        logo: { light: "/logo.png", dark: "/logo-dark.png" },
+        socialLinks: [
+          { icon: "github", link: "https://github.com/eox-a/pages-theme-eox" },
+          { icon: "twitter", link: "https://twitter.com/eox_at" },
+        ],
+        nav: [
+          { text: "Home", link: "/" },
+          { text: "Services", link: "/services" },
+          { text: "Contact", link: "/contact", action: "primary" },
+          {
+            text: "More",
+            items: [{ text: "Team", link: "/team" }],
+          },
+        ],
+      },
+    });
+  });
+
+  it("renders logo", () => {
+    cy.viewport(1920, 1080);
+    cy.mount(NavBar);
+    cy.get(".nav-desktop img.logo").should("have.attr", "src", "/logo.png");
+  });
+
+  it("renders desktop navigation items", () => {
+    cy.viewport(1920, 1080);
+    cy.mount(NavBar);
+
+    // Direct links
+    cy.get(".nav-desktop").contains("Home").should("be.visible");
+    cy.get(".nav-desktop").contains("Services").should("be.visible");
+
+    // Dropdown (More)
+    // Note: NavBar implementation of top-level items with children:
+    // <NavDropdown v-for="item in theme.nav.filter(...)" ... />
+    // NavDropdown handles top level items too if they have items.
+    cy.get(".nav-desktop").contains("More").should("be.visible");
+
+    // CTA (Contact)
+    // The action items are rendered separately in the template
+    cy.get(".nav-desktop").contains("Contact").should("be.visible");
+    cy.get(".nav-desktop").contains("Contact").should("have.class", "button");
+  });
+
+  it("renders social links on desktop", () => {
+    cy.viewport(1920, 1080);
+    cy.mount(NavBar);
+    cy.get(".nav-desktop .social-links").should("be.visible");
+    cy.get(".nav-desktop .social-links a").should("have.length", 2);
+    cy.get(".nav-desktop .social-links .mdi-github").should("exist");
+  });
+
+  it("renders mobile navigation trigger", () => {
+    // Mobile view
+    cy.viewport(375, 667);
+    cy.mount(NavBar);
+
+    // Mobile menu button should be visible (css driven)
+    // Since we import style.css which has media queries, viewport change should work effectively if media queries match
+    // However, Component testing runs in an iframe. cy.viewportResizes that iframe.
+    // We can check if the button exists.
+    cy.get('button[data-ui="#mobile-menu"]').should("exist");
+  });
+
+  it("renders mobile menu content", () => {
+    cy.mount(NavBar);
+
+    // The dialog content exists in DOM but might be hidden
+    cy.get("dialog#mobile-menu").should("exist");
+
+    // Check for items inside mobile menu
+    cy.get("#mobile-menu").contains("Home").should("exist");
+    cy.get("#mobile-menu").contains("Services").should("exist");
+    // Dropdown in mobile menu uses details/summary
+    cy.get("#mobile-menu details summary").contains("More").should("exist");
+  });
+
+  it("renders social links on mobile", () => {
+    cy.viewport(375, 667);
+    cy.mount(NavBar);
+    // Find only the button that triggers the mobile menu (data-ui="#mobile-menu" on button)
+    // The previous selector 'button[data-ui="#mobile-menu"]' was returning 2 elements (probably the close button too or duplicates in DOM)
+    // Looking at template:
+    // <button data-ui="#mobile-menu" class="circle transparent"><i class="mdi mdi-menu"></i></button>
+    // <button data-ui="#mobile-menu" class="circle transparent"><i class="mdi mdi-close"></i></button>
+    // We want the one inside the mobile nav bar, likely the first one visible or distinguishing by icon
+
+    // Clicking the menu icon (open)
+    cy.get('button[data-ui="#mobile-menu"] .mdi-menu').click({ force: true });
+
+    // The dialog should be visible. If the test fails here, it might be due to css transitions or how ui library handles dialogs.
+    // In component testing, we can assert existence or class changes if visibility is flaky due to environment.
+    cy.get("dialog#mobile-menu").should("exist");
+    // cy.get("dialog#mobile-menu").invoke('attr', 'open').should('exist');
+    cy.get("dialog#mobile-menu .social-links").should("exist");
+    cy.get("dialog#mobile-menu .social-links a").should("have.length", 2);
+  });
+
+  it("renders language switcher when multiple locales are defined", () => {
+    __setMockData({
+      site: {
+        title: "EOX",
+        locales: {
+          root: { label: "English", lang: "en" },
+          de: { label: "German", lang: "de" },
+        },
+        localeIndex: "root",
+      },
+      theme: {
+        logo: { light: "/logo.png" },
+        nav: [],
+      },
+    });
+
+    cy.viewport(1920, 1080);
+    cy.mount(NavBar);
+
+    // Desktop
+    cy.get(".nav-desktop .mdi-translate").should("exist");
+    cy.get(".nav-desktop menu li").should("have.length", 2);
+    cy.get(".nav-desktop menu li").contains("English").should("exist");
+    cy.get(".nav-desktop menu li").contains("German").should("exist");
+    cy.get(".nav-desktop menu li.active").contains("English").should("exist");
+
+    // Mobile
+    cy.viewport(375, 667);
+    cy.get("#mobile-menu details summary").contains("English").should("exist");
+    cy.get("#mobile-menu details summary .mdi-translate").should("exist");
+    cy.get("#mobile-menu details ul li").should("have.length", 1);
+    cy.get("#mobile-menu details ul li").contains("German").should("exist");
+    cy.get("#mobile-menu details ul li")
+      .contains("English")
+      .should("not.exist");
+  });
+});