@eox/pages-theme-eox 0.11.5 → 1.1.0

package/src/components/NavBar.vue

@@ -34,16 +34,48 @@
         </nav>
         <ul class="list border large-space">
           <li v-for="item in theme.nav.filter((item) => !item.action)">
+            <details v-if="item.items">
+              <summary>
+                <span class="max">{{ t(item.text, theme.i18n) }}</span>
+                <i class="mdi mdi-chevron-down"></i>
+              </summary>
+              <ul class="list">
+                <MobileNavDropdown :items="item.items" />
+              </ul>
+            </details>
             <a
+              v-else
               data-ui="#mobile-menu"
               :href="withBase(item.link)"
               :target="item.target"
               :rel="item.rel"
               :class="item.action ? 'button large medium-elevate cta' : ''"
             >
-              <span>{{ item.text }}</span>
+              <span>{{ t(item.text, theme.i18n) }}</span>
             </a>
           </li>
+          <li v-if="langs && langs.length > 1">
+            <details>
+              <summary>
+                <i class="mdi mdi-translate small"></i>
+                <span class="max">{{
+                  langs.find((l) => l.active)?.label
+                }}</span>
+                <i class="mdi mdi-chevron-down small"></i>
+              </summary>
+              <ul class="list">
+                <li
+                  v-for="lang in langs.filter((l) => !l.active)"
+                  :key="lang.link"
+                  :class="{ active: lang.active }"
+                >
+                  <a :href="withBase(lang.link)" data-ui="#mobile-menu">
+                    <span>{{ lang.label }}</span>
+                  </a>
+                </li>
+              </ul>
+            </details>
+          </li>
         </ul>
         <div class="grid">
           <div class="s12">
@@ -59,7 +91,7 @@
                     : 'primary-text'
                 "
               >
-                <span>{{ item.text }}</span>
+                <span>{{ t(item.text, theme.i18n) }}</span>
                 <i
                   v-if="
                     item.action === 'primary' || item.action === 'secondary'
@@ -70,6 +102,20 @@
             </nav>
           </div>
         </div>
+        <div class="row center-align" v-if="theme.socialLinks">
+          <ul class="no-margin social-links">
+            <li v-for="link in theme.socialLinks">
+              <a
+                :href="link.link"
+                target="_blank"
+                rel="noopener"
+                class="button circle transparent"
+              >
+                <i :class="`mdi mdi-${link.icon}`"></i>
+              </a>
+            </li>
+          </ul>
+        </div>
       </dialog>
     </nav>
     <nav class="large-padding no-margin center-align row holder nav-desktop">
@@ -90,12 +136,25 @@
       <nav>
         <ul class="left-align no-margin">
           <li v-for="item in theme.nav.filter((i) => !i.action)">
+            <button
+              v-if="item.items"
+              class="button text"
+              :class="{ active: isActive(item, route.path) }"
+            >
+              <span>{{ t(item.text, theme.i18n) }}</span>
+              <i class="mdi mdi-chevron-down"></i>
+              <menu class="no-wrap surface-container-lowest">
+                <NavDropdown :items="item.items" />
+              </menu>
+            </button>
             <a
+              v-else
               class="button text"
+              :class="{ active: isActive(item, route.path) }"
               :href="withBase(item.link)"
               :target="item.target"
               :rel="item.rel"
-              >{{ item.text }}</a
+              >{{ t(item.text, theme.i18n) }}</a
             >
           </li>
         </ul>
@@ -116,7 +175,7 @@
               :rel="item.rel"
               @click="trackEvent(['CTA', 'Click', 'Nav', item.text])"
             >
-              <span>{{ item.text }}</span>
+              <span>{{ t(item.text, theme.i18n) }}</span>
               <i
                 v-if="item.action === 'primary' || item.action === 'secondary'"
                 class="mdi mdi-arrow-right"
@@ -124,16 +183,90 @@
             </a>
           </li>
         </ul>
+        <ul class="left-align no-margin social-links" v-if="theme.socialLinks">
+          <li v-for="link in theme.socialLinks">
+            <a
+              :href="link.link"
+              target="_blank"
+              rel="noopener"
+              class="button circle transparent"
+            >
+              <i :class="`mdi mdi-${link.icon}`"></i>
+            </a>
+          </li>
+        </ul>
+        <ul class="left-align no-margin" v-if="langs && langs.length > 1">
+          <li>
+            <button class="button text">
+              <i class="mdi mdi-translate small"></i>
+              <i class="mdi mdi-chevron-down small"></i>
+              <menu class="no-wrap surface-container-lowest">
+                <li
+                  v-for="lang in langs"
+                  :key="lang.link"
+                  :class="{ active: lang.active }"
+                >
+                  <a :href="withBase(lang.link)">
+                    <span>{{ lang.label }}</span>
+                  </a>
+                </li>
+              </menu>
+            </button>
+          </li>
+        </ul>
       </nav>
     </nav>
   </div>
 </template>
 
 <script setup>
-import { useData, withBase } from "vitepress";
-import { trackEvent } from "../helpers";
+import { computed } from "vue";
+import { useData, useRoute, withBase } from "vitepress";
+import { t, trackEvent, isActive } from "../helpers";
+import NavDropdown from "./NavDropdown.vue";
+import MobileNavDropdown from "./MobileNavDropdown.vue";
+
+const { site, theme, localeIndex } = useData();
+const route = useRoute();
+
+const langs = computed(() => {
+  const locales = site.value.locales;
+  if (!locales || Object.keys(locales).length <= 1) {
+    return [];
+  }
+  return Object.entries(locales).map(([id, locale]) => {
+    const currentPath = route.path;
+    const base = withBase("");
+    let pathRelativeToBase = currentPath;
+    if (base !== "/" && currentPath.startsWith(base)) {
+      pathRelativeToBase = currentPath.substring(base.length);
+    }
 
-const { site, theme } = useData();
+    const currentLocaleId = localeIndex.value;
+    const currentLocalePrefix =
+      currentLocaleId === "root" ? "" : `/${currentLocaleId}`;
+
+    let pathWithoutLocale = pathRelativeToBase;
+    if (
+      currentLocalePrefix &&
+      pathRelativeToBase.startsWith(currentLocalePrefix)
+    ) {
+      pathWithoutLocale = pathRelativeToBase.substring(
+        currentLocalePrefix.length,
+      );
+    }
+
+    const targetLocalePrefix = id === "root" ? "" : `/${id}`;
+    let link = `${targetLocalePrefix}${pathWithoutLocale}`.replace(/\/+/g, "/");
+    if (!link) link = "/";
+
+    return {
+      label: locale.label,
+      link: link,
+      active: id === currentLocaleId,
+    };
+  });
+});
 
 if (!import.meta.env.SSR) {
   const scrollListener = () => {
@@ -151,7 +284,7 @@ if (!import.meta.env.SSR) {
 
 <style>
 .top-nav {
-  position: sticky;
+  position: fixed;
   z-index: 100;
   top: 0;
   background: var(--surface);
@@ -237,4 +370,7 @@ nav.nav-desktop {
     display: flex;
   }
 }
+details summary i.mdi-translate {
+  transform: rotate(0deg) !important;
+}
 </style>

package/src/components/NavDropdown.cy.js

@@ -0,0 +1,71 @@
+import NavDropdown from "./NavDropdown.vue";
+import { __setRouteMock } from "../../cypress/support/mocks/vitepress";
+
+describe("<NavDropdown />", () => {
+  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(NavDropdown, {
+      props: {
+        items,
+      },
+    });
+
+    cy.contains("Home").should("exist");
+    cy.contains("About").should("exist");
+    cy.contains("Products").should("exist");
+  });
+
+  it("renders nested dropdowns", () => {
+    cy.mount(NavDropdown, {
+      props: {
+        items,
+      },
+    });
+
+    cy.contains("Product A").should("exist");
+    cy.contains("Product B").should("exist");
+  });
+
+  it("marks active item", () => {
+    __setRouteMock({ path: "/about" });
+
+    cy.mount(NavDropdown, {
+      props: {
+        items,
+      },
+    });
+
+    cy.contains("a", "About").should("have.class", "active");
+    cy.contains("a", "Home").should("not.have.class", "active");
+  });
+
+  it("marks parent active if child is active", () => {
+    __setRouteMock({ path: "/products/a" });
+
+    cy.mount(NavDropdown, {
+      props: {
+        items,
+      },
+    });
+
+    // The text 'Products' isn't an anchor tag in the dropdown logic when it has items,
+    // it depends on how NavDropdown relies on recursion.
+    // In NavDropdown.vue:
+    // <li v-if="item.items && item.text"> ... <a ... :class="{ active: isActive(item, route.path) }">
+
+    // So 'Products' (parent) should be active
+    // We target the closest 'a' or element with text Products that has class active
+    cy.contains("span", "Products").parent("a").should("have.class", "active");
+  });
+});

package/src/components/NavDropdown.vue

@@ -0,0 +1,62 @@
+<template>
+  <template v-for="item in items">
+    <li v-if="item.items && item.text">
+      <a
+        v-if="item.link"
+        :href="withBase(item.link)"
+        :target="item.target"
+        :rel="item.rel"
+        class="row max padding"
+        :class="{ active: isActive(item, route.path) }"
+      >
+        <span class="max">{{ t(item.text, theme.i18n) }}</span>
+        <i class="mdi mdi-chevron-right"></i>
+      </a>
+      <a
+        v-else
+        class="row max padding"
+        :class="{ active: isActive(item, route.path) }"
+      >
+        <span class="max">{{ t(item.text, theme.i18n) }}</span>
+        <i class="mdi mdi-chevron-right"></i>
+      </a>
+      <menu class="no-wrap surface-container-lowest">
+        <NavDropdown :items="item.items" />
+      </menu>
+    </li>
+    <NavDropdown 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"
+        class="row"
+        :class="{ active: isActive(item, route.path) }"
+      >
+        <span>{{ t(item.text, theme.i18n) }}</span>
+      </a>
+      <span
+        v-else
+        class="row"
+        :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/NewsBanner.cy.js

@@ -0,0 +1,23 @@
+import NewsBanner from "./NewsBanner.vue";
+
+describe("<NewsBanner />", () => {
+  it("renders content passed via prop", () => {
+    const content = "<strong>Important News:</strong> Something happened!";
+    cy.mount(NewsBanner, {
+      props: { content },
+    });
+
+    cy.get(".news-banner").should(
+      "contain.html",
+      "<strong>Important News:</strong>",
+    );
+    cy.contains("Something happened!").should("be.visible");
+  });
+
+  it("applies correct classes", () => {
+    cy.mount(NewsBanner, {
+      props: { content: "Test" },
+    });
+    cy.get(".news-banner").should("have.class", "primary");
+  });
+});

package/src/components/NewsBanner.vue

@@ -6,7 +6,6 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
 const props = defineProps(["content"]);
 </script>
 

package/src/components/NotFound.cy.js

@@ -0,0 +1,16 @@
+import NotFound from "./NotFound.vue";
+
+describe("<NotFound />", () => {
+  it("renders 404 title and message", () => {
+    cy.mount(NotFound);
+    cy.contains("h1", "404").should("be.visible");
+    cy.contains("p", "The page you requested was not found").should(
+      "be.visible",
+    );
+  });
+
+  it("renders back to home link", () => {
+    cy.mount(NotFound);
+    cy.get('a[href="/"]').should("contain.text", "Back to home");
+  });
+});

package/src/components/NotFound.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="VPPage">
     <h1>404</h1>
-    <p>The page you requested was not found.</p>
+    <p>{{ t("The page you requested was not found.", theme.i18n) }}</p>
     <div class="small-space"></div>
     <nav>
       <a class="button responsive-mobile" href="/">
         <i class="mdi mdi-arrow-left"></i>
-        <span>Back to home</span>
+        <span>{{ t("Back to home", theme.i18n) }}</span>
       </a>
     </nav>
     <div class="large-space"></div>
   </div>
 </template>
+
+<script setup>
+import { useData } from "vitepress";
+import { t } from "../helpers";
+const { theme } = useData();
+</script>

package/src/components/PricingTable.cy.js

@@ -0,0 +1,91 @@
+import PricingTable from "./PricingTable.vue";
+
+// Stub ClientOnly to render children immediately
+const ClientOnly = {
+  template: "<div><slot></slot></div>",
+};
+
+describe("<PricingTable />", () => {
+  const plans = [
+    {
+      name: "Basic",
+      price: 10,
+      id: "basic",
+      details: { Storage: { text: "1GB" } },
+    },
+    {
+      name: "Pro",
+      price: 20,
+      id: "pro",
+      details: { Storage: { text: "10GB" } },
+    },
+  ];
+  const options = [
+    {
+      id: "opt1",
+      label: "Extra Support",
+      prices: { basic: 5, pro: 10 },
+      checked: false,
+    },
+  ];
+  const details = [
+    {
+      title: "Features",
+      plans: [
+        { name: "Storage", details: { Storage: "1GB" } },
+        { name: "Storage", details: { Storage: "10GB" } },
+      ],
+    },
+  ];
+
+  const config = {
+    title: "Pricing",
+    plans,
+    options,
+    details,
+    contactLink: "mailto:sales@example.com",
+  };
+
+  it("renders the table with plans", () => {
+    cy.mount(PricingTable, {
+      props: { config },
+      global: {
+        components: { ClientOnly },
+      },
+    });
+
+    cy.contains("Pricing").should("exist");
+    cy.contains("Basic").should("exist");
+    cy.contains("Pro").should("exist");
+  });
+
+  it("renders options checkboxes", () => {
+    cy.mount(PricingTable, {
+      props: { config },
+      global: {
+        components: { ClientOnly },
+      },
+    });
+
+    cy.contains("+ Extra Support").should("exist");
+    cy.get("input#opt1").should("exist");
+  });
+
+  it("renders details rows", () => {
+    cy.mount(PricingTable, {
+      props: { config },
+      global: {
+        components: { ClientOnly },
+      },
+    });
+
+    cy.contains("Storage").should("exist");
+    cy.contains("1GB").should("exist");
+    cy.contains("10GB").should("exist");
+  });
+
+  // Note: Testing actual calculation logic inside the component might require
+  // asserting on the DOM price elements if they were exposed/visible.
+  // The component seems to update prices internally but without clear price display in the simplified view
+  // we extracted, we check for presence mostly.
+});

package/src/components/PricingTable.vue

@@ -48,7 +48,7 @@
             :href="addPlanConfig(contactLink, plan)"
             class="button responsive bold margin-top-1 margin-bottom-2"
           >
-            Contact us
+            {{ t("Contact us", theme.i18n) }}
           </a>
         </ClientOnly>
       </div>
@@ -58,7 +58,9 @@
     <!-- Main Plans Table -->
     <div class="wrapper" :style="gridStyle">
       <div class="cell orig-col-1 l top-margin">
-        <h6 v-if="!localDetails.length" class="bold small">Plans:</h6>
+        <h6 v-if="!localDetails.length" class="bold small">
+          {{ t("Plans:", theme.i18n) }}
+        </h6>
       </div>
       <div
         v-for="(plan, index) in localPlans"
@@ -69,7 +71,9 @@
         <h6 class="primary-text bold top-margin">{{ plan.name }}</h6>
       </div>
 
-      <div class="cell orig-col-1 l">Price (per month):</div>
+      <div class="cell orig-col-1 l">
+        {{ t("Price (per month):", theme.i18n) }}
+      </div>
       <div
         v-for="(plan, index) in localPlans"
         :key="'price-' + index"
@@ -142,7 +146,7 @@
         :class="`surface-container-low cell bottom-cell orig-col-${index + 2} center-align`"
       >
         <a v-if="plan.link" :href="plan.link"
-          >See all features
+          >{{ t("See all features", theme.i18n) }}
           <svg
             style="width: 16px; height: 16px"
             xmlns="http://www.w3.org/2000/svg"
@@ -168,7 +172,7 @@
             v-if="showSales"
             :href="addPlanConfig(contactLink, plan)"
             class="button responsive bold"
-            >Contact us</a
+            >{{ t("Contact us", theme.i18n) }}</a
           >
         </ClientOnly>
       </div>
@@ -185,7 +189,7 @@
 
       <div class="wrapper" :style="secondaryGridStyle">
         <div class="cell cell orig-col-1 l">
-          <div class="">Additional price:</div>
+          <div class="">{{ t("Additional price:", theme.i18n) }}</div>
         </div>
         <div
           v-for="(plan, detailPlanIndex) in detail.plans"
@@ -231,15 +235,28 @@
     </template>
 
     <p class="small grey-text m-4" v-if="showVAT">
-      * All prices are given excluding VAT. Prices are valid until
+      *
+      {{
+        t(
+          "All prices are given excluding VAT. Prices are valid until",
+          theme.i18n,
+        )
+      }}
       {{ showVAT }}.
     </p>
   </div>
 </template>
 
 <script>
+import { t } from "../helpers.js";
+import { useData } from "vitepress";
+
 export default {
   name: "PricingTable",
+  setup() {
+    const { theme } = useData();
+    return { theme, t };
+  },
   props: {
     config: {
       type: Object,