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

package/src/components/OpenPositions.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="open-positions-container">
+    <h2 v-if="title" id="open-positions" class="open-positions-title">
+      {{ title }}
+    </h2>
+
+    <!-- List of Open Positions if available -->
+    <div v-if="positions && positions.length > 0" class="positions-list">
+      <div
+        v-for="(position, index) in positions"
+        :key="index"
+        class="position-item"
+      >
+        <h3 class="position-title">{{ position.title }}</h3>
+
+        <div v-if="position.type || position.location" class="position-meta">
+          <span v-if="position.type" class="meta-item">
+            <i class="mdi mdi-calendar-blank-outline"></i>
+            {{ position.type }}
+          </span>
+          <span v-if="position.location" class="meta-item">
+            <i class="mdi mdi-map-marker-outline"></i>
+            {{ position.location }}
+          </span>
+        </div>
+
+        <p class="position-description">
+          {{ position.description || position.content }}
+        </p>
+
+        <a
+          :href="resolveApplyLink(position)"
+          :target="
+            isExternal(resolveApplyLink(position)) ? '_blank' : undefined
+          "
+          :rel="
+            isExternal(resolveApplyLink(position))
+              ? 'noopener noreferrer'
+              : undefined
+          "
+          class="position-apply"
+        >
+          <span>{{ position.linkText || "Apply for this position" }}</span>
+          <i class="mdi mdi-arrow-right"></i>
+        </a>
+      </div>
+    </div>
+
+    <!-- Fallback when no positions are open -->
+    <div v-else class="empty-positions">
+      <slot name="empty">
+        <p class="empty-title">
+          {{ emptyTitle }}
+        </p>
+        <p class="empty-description">
+          {{ emptyText }}
+        </p>
+        <p v-if="showDevjobs" class="empty-devjobs">
+          Also feel free to explore our Team page on
+          <a :href="devjobsGerman" target="_blank" rel="noopener noreferrer"
+            >Devjobs.at (German)</a
+          >
+          or in
+          <a :href="devjobsEnglish" target="_blank" rel="noopener noreferrer"
+            >English</a
+          >.
+        </p>
+      </slot>
+    </div>
+
+    <!-- Always display "Send us your CV" button -->
+    <div v-if="showCvButton" class="cv-action">
+      <a :href="`mailto:${email}`" class="cv-button">
+        <span>{{ cvButtonText }}</span>
+        <i class="mdi mdi-email-outline"></i>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { withBase } from "vitepress";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  positions: {
+    type: Array,
+    default: () => [],
+  },
+  email: {
+    type: String,
+    default: "office@eox.at",
+  },
+  cvButtonText: {
+    type: String,
+    default: "Send us your CV",
+  },
+  showCvButton: {
+    type: Boolean,
+    default: true,
+  },
+  showDevjobs: {
+    type: Boolean,
+    default: true,
+  },
+  devjobsGerman: {
+    type: String,
+    default: "https://devjobs.at/team/eox",
+  },
+  devjobsEnglish: {
+    type: String,
+    default: "https://en.devjobs.at/team/eox",
+  },
+  emptyTitle: {
+    type: String,
+    default: "Great to see you are interested in joining us!",
+  },
+  emptyText: {
+    type: String,
+    default:
+      "Currently, we are not looking to fill a particular position, but you're welcome to send us your CV and tell us why you'd be a good fit for our team.",
+  },
+});
+
+function resolveApplyLink(position) {
+  if (position.link) {
+    if (
+      position.link.startsWith("http://") ||
+      position.link.startsWith("https://") ||
+      position.link.startsWith("mailto:")
+    ) {
+      return position.link;
+    }
+    return withBase(
+      position.link.startsWith("/") ? position.link : "/" + position.link,
+    );
+  }
+  return `mailto:${props.email}?subject=Application for ${encodeURIComponent(position.title || "Open Position")}`;
+}
+
+function isExternal(url) {
+  return (
+    typeof url === "string" &&
+    (url.startsWith("http://") || url.startsWith("https://"))
+  );
+}
+</script>
+
+<style scoped>
+.open-positions-container {
+  margin-top: 1.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.open-positions-title {
+  margin-bottom: 1.5rem !important;
+}
+
+.positions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  margin-bottom: 2rem;
+}
+
+.position-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.position-item:not(:last-child) {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  padding-bottom: 2rem;
+}
+
+.position-title {
+  font-size: 1.35rem !important;
+  font-weight: 700 !important;
+  color: var(--on-surface, #0f172a) !important;
+  margin: 0 0 0.5rem 0 !important;
+  border-top: none !important;
+  padding-top: 0 !important;
+  line-height: 1.3 !important;
+}
+
+.position-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1.5rem;
+  color: var(--on-surface-variant, #475569);
+  font-size: 0.95rem;
+  margin-bottom: 1rem;
+}
+
+.meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.meta-item i {
+  font-size: 1.15rem;
+  line-height: 1;
+}
+
+.position-description {
+  font-size: 1rem !important;
+  line-height: 1.6 !important;
+  color: var(--on-surface-variant, #334155) !important;
+  margin: 0 0 1.25rem 0 !important;
+}
+
+.position-apply {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-weight: 700;
+  color: var(--primary, #004170) !important;
+  text-decoration: none !important;
+  font-size: 1rem;
+  transition:
+    gap 0.2s ease,
+    color 0.2s ease;
+}
+
+.position-apply:hover {
+  gap: 0.65rem;
+  text-decoration: underline !important;
+}
+
+.position-apply i {
+  font-size: 1.1rem;
+  transition: transform 0.2s ease;
+}
+
+.empty-positions {
+  margin-bottom: 1.5rem;
+}
+
+.empty-title {
+  font-weight: 700 !important;
+  font-size: 1.15rem !important;
+  color: var(--on-surface, #0f172a) !important;
+  margin: 0 0 0.75rem 0 !important;
+}
+
+.empty-description,
+.empty-devjobs {
+  font-size: 1rem !important;
+  line-height: 1.6 !important;
+  color: var(--on-surface-variant, #334155) !important;
+  margin: 0 0 1rem 0 !important;
+}
+
+.cv-action {
+  margin-top: 1.5rem;
+}
+
+.cv-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  background-color: var(--primary, #004170);
+  color: #ffffff !important;
+  font-weight: 600;
+  font-size: 0.95rem;
+  padding: 0.7rem 1.5rem;
+  border-radius: 9999px;
+  text-decoration: none !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.cv-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
+  background-color: color-mix(in srgb, var(--primary, #004170) 88%, black);
+}
+
+.cv-button i {
+  font-size: 1.15rem;
+  line-height: 1;
+}
+</style>

package/src/components/SectionHeader.cy.js

@@ -0,0 +1,54 @@
+import SectionHeader from "./SectionHeader.vue";
+
+describe("<SectionHeader />", () => {
+  it("renders standard props correctly", () => {
+    const tag = "Viewing Ready & Basic";
+    const icon = "mdi-star-check-outline";
+    const title = "What our users say about Viewing Products";
+    const subtitle =
+      "Optional paragraph providing context and detail for this section.";
+
+    cy.mount(SectionHeader, {
+      props: {
+        tag,
+        icon,
+        title,
+        subtitle,
+      },
+    });
+
+    // Check that tag badge exists and contains correct icon and text classes
+    cy.get(".section-badge-tag").should("exist");
+    cy.get(".section-badge-icon").should("have.class", icon);
+    cy.get(".section-badge-text").should("contain", tag);
+
+    // Check title
+    cy.get(".section-display-title").should("contain", title);
+
+    // Check subtitle
+    cy.get(".section-subtitle").should("contain", subtitle);
+  });
+
+  it("renders with title slot and default slot", () => {
+    cy.mount(SectionHeader, {
+      slots: {
+        title: "Slot-based Title",
+        default: "Slot-based Subtitle",
+      },
+    });
+
+    cy.get(".section-display-title").should("contain", "Slot-based Title");
+    cy.get(".section-subtitle").should("contain", "Slot-based Subtitle");
+  });
+
+  it("hides badge if no tag or icon is provided", () => {
+    cy.mount(SectionHeader, {
+      props: {
+        title: "Just Title",
+      },
+    });
+
+    cy.get(".section-badge-tag").should("not.exist");
+    cy.get(".section-subtitle").should("not.exist");
+  });
+});

package/src/components/SectionHeader.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="section-header-group">
+    <!-- Section Tag Badge -->
+    <div v-if="tag || icon" class="section-badge-tag">
+      <i v-if="icon" :class="['mdi', icon, 'section-badge-icon']"></i>
+      <span class="section-badge-text">{{ tag }}</span>
+    </div>
+
+    <!-- Display Title -->
+    <h2 class="section-display-title">
+      <slot name="title">{{ title }}</slot>
+    </h2>
+
+    <!-- Subtitle / Body text -->
+    <p v-if="subtitle || $slots.default" class="section-subtitle">
+      <slot>{{ subtitle }}</slot>
+    </p>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  tag: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  icon: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  title: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  subtitle: {
+    type: String,
+    required: false,
+    default: "",
+  },
+});
+</script>
+
+<style scoped>
+.section-header-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0 !important;
+  margin: 0 0 40px 0 !important;
+  gap: 16px;
+  width: 100%;
+}
+
+.section-badge-tag {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 !important;
+  margin: 0 !important;
+  gap: 12px;
+  height: 24px;
+}
+
+.section-badge-icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 !important;
+  padding: 0 !important;
+  color: var(--primary, #004170);
+}
+
+.section-badge-text {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  margin: 0 !important;
+  padding: 0 !important;
+  color: var(--primary, #004170);
+}
+
+.section-display-title {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 36px !important;
+  line-height: 44px;
+  letter-spacing: 0.5008px;
+  margin: 0 !important;
+  padding: 0 !important;
+  border-top: none !important;
+}
+
+.section-subtitle {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  max-width: 620px;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+</style>