spoko-design-system 1.6.0 → 1.8.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.8.0](https://github.com/polo-blue/sds/compare/v1.7.0...v1.8.0) (2025-10-29)
+
+### Features
+
+* **Headline:** add responsive design support and advanced features ([254d5d3](https://github.com/polo-blue/sds/commit/254d5d30f8eff673a48343270f0f23eb39ab7f95))
+
+## [1.7.0](https://github.com/polo-blue/sds/compare/v1.6.0...v1.7.0) (2025-10-29)
+
+### Features
+
+* add Tippy.js tooltips with ProductEngine components and API-driven translations ([eb18a17](https://github.com/polo-blue/sds/commit/eb18a171a3e5d80889f64a645d82767898561764))
+
 ## [1.6.0](https://github.com/polo-blue/sds/compare/v1.5.3...v1.6.0) (2025-10-28)
 
 ### Features

package/index.ts

@@ -19,6 +19,8 @@ export { default as Headline } from './src/components/Headline.vue';
 export { default as Quote } from './src/components/Quote.vue';
 
 export { default as ProductEngineType } from './src/components/Product/ProductEngineType.vue';
+export { default as ProductEngine } from './src/components/Product/ProductEngine.vue';
+export { default as ProductEngines } from './src/components/Product/ProductEngines.vue';
 export { default as ProductButton } from './src/components/Product/ProductButton.vue';
 export { default as ProductColors } from './src/components/Product/ProductColors.vue';
 export { default as ProductDetailName } from './src/components/Product/ProductDetailName.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -53,12 +53,13 @@
   ],
   "dependencies": {
     "@algolia/client-search": "^5.41.0",
-    "@astrojs/mdx": "^4.3.8",
+    "@astrojs/mdx": "^4.3.9",
     "@astrojs/node": "^9.5.0",
     "@astrojs/sitemap": "^3.6.0",
     "@astrojs/ts-plugin": "^1.10.5",
-    "@astrojs/vue": "^5.1.1",
+    "@astrojs/vue": "^5.1.2",
     "@docsearch/css": "^4.2.0",
+    "@floating-ui/vue": "^1.1.9",
     "@iconify-json/ant-design": "^1.2.5",
     "@iconify-json/bi": "^1.2.6",
     "@iconify-json/bx": "^1.2.2",
@@ -107,6 +108,7 @@
     "astro-remote": "^0.3.4",
     "dotenv": "^17.2.3",
     "swiper": "^12.0.3",
+    "tippy.js": "^6.3.7",
     "unocss": "66.5.4",
     "vite-plugin-pwa": "^1.1.0",
     "vue": "^3.5.22"
@@ -115,14 +117,14 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/gtag.js": "^0.0.20",
-    "@types/node": "^24.9.1",
+    "@types/node": "^24.9.2",
     "@typescript-eslint/eslint-plugin": "^8.46.2",
     "@typescript-eslint/parser": "^8.46.2",
     "@unocss/transformer-variant-group": "66.5.4",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/compiler-sfc": "^3.5.22",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "astro": "^5.15.1",
+    "astro": "^5.15.2",
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "eslint": "^9.38.0",
     "eslint-plugin-astro": "^1.4.0",

package/src/components/Headline.vue

@@ -1,85 +1,90 @@
 <script setup lang="ts">
-import type { PropType } from 'vue';
-
-const props = defineProps({
-  as: {
-    type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
-    default: 'span',
-    required: true,
-  },
-  textSize: {
-    type: String as PropType<
-      | 'xs'
-      | 'sm'
-      | 'base'
-      | 'lg'
-      | 'xl'
-      | '2xl'
-      | '3xl'
-      | '4xl'
-      | '5xl'
-      | '6xl'
-      | '7xl'
-      | '8xl'
-      | '9xl'
-    >,
-    required: false,
-    default: null,
-  },
-  fontFamily: {
-    type: String as PropType<'head' | 'text' | 'novamono' | 'mono'>,
-    required: false,
-    default: 'head',
-  },
-  fontWeight: {
-    type: String as PropType<'light' | 'regular' | 'bold' | 'light-bold' | 'light-thin'>,
-    required: false,
-    default: 'regular',
-  },
-  underline: {
-    type: [Boolean, String] as PropType<boolean | 'center'>,
-    required: false,
-    default: false,
-  },
+import { computed, useAttrs } from 'vue';
+
+const attrs = useAttrs();
+
+interface HeadlineProps {
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
+  class?: string;
+  fontFamily?: 'head' | 'text' | 'novamono' | 'mono';
+  fontWeight?: 'light' | 'regular' | 'bold' | 'light-bold' | 'light-thin';
+  underline?: boolean | 'center';
+  defaultSize?: string;
+  noFlexLayout?: boolean;
+  noMargin?: boolean;
+  noLeading?: boolean;
+}
+
+const props = withDefaults(defineProps<HeadlineProps>(), {
+  as: 'span',
+  class: '',
+  fontFamily: 'head',
+  fontWeight: 'regular',
+  underline: false,
+  defaultSize: 'text-inherit',
+  noFlexLayout: false,
+  noMargin: false,
+  noLeading: false,
 });
 
-// Generate the typography class based on font family and weight
-const getTypographyClass = (): string => {
-  const family = props.fontFamily;
-  const weight = props.fontWeight;
+const typographyClass = computed(() => {
+  const { fontFamily, fontWeight } = props;
 
-  // Handle special cases for mono fonts
-  if (family === 'novamono' || family === 'mono') {
-    return `font-${family}`;
+  if (fontFamily === 'novamono' || fontFamily === 'mono') {
+    return `font-${fontFamily}`;
   }
 
-  // For head family, generate specific classes
-  if (family === 'head') {
-    if (weight === 'light') return 'headline-light';
-    if (weight === 'bold') return 'headline-bold';
-    if (weight === 'light-bold') return 'headline-light-bold';
-    if (weight === 'light-thin') return 'headline-light-thin';
-    return 'headline'; // for regular weight
+  if (fontFamily === 'head') {
+    const weightMap = {
+      light: 'headline-light',
+      bold: 'headline-bold',
+      'light-bold': 'headline-light-bold',
+      'light-thin': 'headline-light-thin',
+      regular: 'headline',
+    };
+    return weightMap[fontWeight] || 'headline';
   }
 
-  // For text family, generate appropriate class
-  if (family === 'text') {
-    return `font-text${weight}`;
+  if (fontFamily === 'text') {
+    return `font-text${fontWeight}`;
   }
 
-  // Default fallback
   return 'headline';
-};
+});
+
+const underlineClass = computed(() => {
+  if (props.underline === true) return 'headline--underline';
+  if (props.underline === 'center') return 'headline--underline-center';
+  return '';
+});
+
+const layoutClass = computed(() => {
+  // Centered underline needs block + text-center
+  if (props.underline === 'center') return 'block text-center';
 
-const typographyClass = getTypographyClass();
+  // Default flex layout for icon alignment (unless disabled)
+  if (!props.noFlexLayout) {
+    return 'flex sm:block md:flex items-center';
+  }
+
+  return '';
+});
+
+const computedClasses = computed(() => {
+  const baseClasses = [];
+
+  // Conditionally add base classes
+  if (!props.noMargin) baseClasses.push('mb-2.5');
+  if (!props.noLeading) baseClasses.push('leading-none');
+
+  const sizeClasses = props.class || props.defaultSize;
+
+  return `${baseClasses.join(' ')} ${typographyClass.value} ${sizeClasses} ${underlineClass.value} ${layoutClass.value}`.trim();
+});
 </script>
 
 <template>
-  <component
-    :is="props.as"
-    class="mb-2.5 leading-none"
-    :class="`${typographyClass} ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline === true ? 'headline--underline' : ''} ${props.underline === 'center' ? 'headline--underline-center block text-center' : 'flex sm:block md:flex items-center'}`"
-  >
+  <component :is="as" :class="computedClasses" v-bind="attrs">
     <slot />
   </component>
 </template>
@@ -92,14 +97,14 @@ const typographyClass = getTypographyClass();
     @apply content-empty absolute left-0 bottom-0;
     height: 3px;
     width: 55px;
-    background-color: var(--clr-primary-400);
+    background-color: var(--headline-underline-accent, var(--clr-primary-400));
   }
 
   &:before {
     @apply content-empty absolute left-0 bottom-px h-px;
     width: 95%;
     max-width: 255px;
-    background-color: #64748b;
+    background-color: var(--headline-underline-base, #64748b);
   }
 }
 
@@ -110,7 +115,7 @@ const typographyClass = getTypographyClass();
     @apply content-empty absolute left-1/2 bottom-px h-px;
     width: 95%;
     max-width: 255px;
-    background-color: #64748b;
+    background-color: var(--headline-underline-base, #64748b);
     transform: translateX(-50%);
   }
 
@@ -118,7 +123,7 @@ const typographyClass = getTypographyClass();
     @apply content-empty absolute bottom-0;
     height: 3px;
     width: 55px;
-    background-color: var(--clr-primary-400);
+    background-color: var(--headline-underline-accent, var(--clr-primary-400));
     left: calc(50% - min(47.5%, 127.5px));
   }
 }

package/src/components/PrCode.vue

@@ -27,69 +27,31 @@ const props = defineProps({
 </script>
 
 <template>
-  <span class="relative has-tooltip inline-block">
-    <span
-      data-pagefind-filter="PR-Code"
-      class="btn-prcode"
-      :class="[
-        prcode.variant_category ? `btn-prcode--variant-${prcode.variant_category.toLowerCase()}` : '',
-        { 'btn-prcode--pdp': isPdp }
-      ]"
-    >
-      {{ prcode.code }}
-    </span>
-
-    <!-- Dynamic Tooltip with description from API -->
-    <div v-if="props.prcode.description" class="tooltip">
-      <div class="tooltip-content">
-        {{ props.prcode.description }}
-        <span v-if="props.prcode.group" class="tooltip-group">
-          ({{ props.prcode.group }})
-        </span>
-      </div>
-    </div>
+  <span
+    data-pagefind-filter="PR-Code"
+    class="btn-prcode"
+    :class="[
+      prcode.variant_category ? `btn-prcode--variant-${prcode.variant_category.toLowerCase()}` : '',
+      { 'btn-prcode--pdp': isPdp }
+    ]"
+    :data-tippy-content="prcode.description || undefined"
+  >
+    {{ prcode.code }}
   </span>
 </template>
 
 <style scoped>
-/* Base PrCode Button Styles */
+/* Base PrCode Styles */
 .btn-prcode {
-  @apply inline-block relative cursor-default;
+  @apply inline-block cursor-default;
+  @apply px-1.5 py-0.5;
+  @apply rounded;
 }
 
 .btn-prcode--pdp {
   @apply mb-1;
 }
 
-/* Tooltip Styles - Similar to ProductEngine */
-.tooltip {
-  @apply invisible absolute left-1/2 -translate-x-1/2 bottom-full mb-2 z-50;
-  @apply px-3 py-1.5 rounded-lg shadow-lg whitespace-nowrap;
-  @apply bg-blue-darker text-white text-xs;
-  @apply pointer-events-none;
-  max-width: 300px;
-  white-space: normal;
-}
-
-.has-tooltip:hover .tooltip {
-  @apply visible;
-}
-
-.tooltip-content {
-  @apply relative;
-}
-
-.tooltip-group {
-  @apply ml-2 opacity-75 text-xs font-light;
-}
-
-/* Tooltip Arrow */
-.tooltip::after {
-  content: '';
-  @apply absolute left-1/2 -translate-x-1/2 top-full;
-  @apply border-4 border-transparent border-t-blue-darker;
-}
-
 /* Semantic Variant Category Colors */
 /* GTI - Red */
 .btn-prcode--variant-gti {

package/src/components/Product/ProductEngine.vue

@@ -0,0 +1,240 @@
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import type { PropType } from 'vue';
+import tippy, { type Instance } from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+import '../../styles/tippy-theme.css';
+
+/*
+  VAG group (VW/Audi/Skoda/Seat/Porsche/Bentley/Lamborghini/Ducati/Cupra/Scania/MAN) manufacturer Engine Code
+  Displays engine code with detailed tooltip showing: name, power, displacement, dates, etc.
+*/
+
+interface Engine {
+  id?: number;
+  code: string;
+  name?: string;
+  info?: string | null;
+  serie?: {
+    value: string;
+    label: string;
+  };
+  type?: {
+    value: string;
+    translated: string;
+    label: string;
+  };
+  power?: {
+    kw: number;
+    ps: number;
+    ps_label: string;
+    label: string;
+  };
+  date?: {
+    value: string;
+    label: string;
+  };
+  displacement?: {
+    value: number;
+    label: string;
+  };
+  compression_ratio?: {
+    value: string | null;
+    label: string;
+  };
+  valves?: {
+    value: number | null;
+    label: string;
+  };
+  euro?: {
+    value: number;
+    label: string;
+  };
+  pivot?: any;
+
+  // Backward compatibility - old flat structure
+  kw?: number;
+  ps?: number;
+  cc?: number;
+  c_ratio?: string | null;
+}
+
+const props = defineProps({
+  engine: {
+    type: Object as PropType<Engine>,
+    required: true,
+  },
+  showComma: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+  translations: {
+    type: Object as PropType<{
+      power?: string;
+      cc?: string;
+      compressionRatio?: string;
+      valves?: string;
+      euro?: string;
+      horsepowerUnit?: string; // 'PS' for German, 'KM' for Polish, 'HP' for English
+    }>,
+    default: () => ({
+      power: 'Power',
+      cc: 'CC',
+      compressionRatio: 'C. Ratio',
+      valves: 'Valves',
+      euro: 'Euro',
+      horsepowerUnit: 'PS',
+    }),
+    required: false,
+  },
+});
+
+const engineRef = ref<HTMLElement | null>(null);
+let tippyInstance: Instance | null = null;
+
+// Helper to get series value (supports both old and new API)
+const getSerieValue = (): string => {
+  if (props.engine.serie && typeof props.engine.serie === 'object') {
+    return props.engine.serie.value;
+  }
+  // Backward compatibility - old API
+  const serie = props.engine.serie as any;
+  if (!serie) return '';
+  return serie === 3 ? 'EA288' : serie === 2 ? 'EA189' : `Serie ${serie}`;
+};
+
+// Generate tooltip HTML content
+const getTooltipContent = () => {
+  // Header section
+  let headerContent = `<strong>${props.engine.name || props.engine.code}</strong>`;
+  if (props.engine.info) {
+    headerContent += ` <span class="info">${props.engine.info}</span>`;
+  }
+  const serieValue = getSerieValue();
+  if (serieValue) {
+    headerContent += `<div class="series-badge">${serieValue}</div>`;
+  }
+
+  const header = `<div class="tooltip-header">${headerContent}</div>`;
+
+  // Specs rows
+  const rows = [];
+
+  // Power (supports both new and old API structure)
+  const power = props.engine.power;
+  const oldKw = props.engine.kw;
+  const oldPs = props.engine.ps;
+
+  if (power || oldKw || oldPs) {
+    const powerValues = [];
+    const kw = power?.kw || oldKw;
+    const ps = power?.ps || oldPs;
+    const psLabel = power?.ps_label || props.translations.horsepowerUnit;
+    const powerLabel = power?.label || props.translations.power;
+
+    if (kw) powerValues.push(`${kw} kW`);
+    if (ps) powerValues.push(`${ps} ${psLabel}`);
+
+    if (powerValues.length) {
+      rows.push(`<div class="tooltip-row"><span class="tooltip-label">${powerLabel}:</span><span class="tooltip-value">${powerValues.join(' / ')}</span></div>`);
+    }
+  }
+
+  // Displacement (CC)
+  const displacement = props.engine.displacement;
+  const oldCc = props.engine.cc;
+
+  if (displacement || oldCc) {
+    const ccValue = displacement?.value || oldCc;
+    const ccLabel = displacement?.label || props.translations.cc;
+
+    if (ccValue) {
+      rows.push(`<div class="tooltip-row"><span class="tooltip-label">${ccLabel}:</span><span class="tooltip-value">${ccValue} cm³</span></div>`);
+    }
+  }
+
+  // Euro standard
+  const euro = props.engine.euro;
+
+  if (euro && typeof euro === 'object') {
+    if (euro.value) {
+      rows.push(`<div class="tooltip-row"><span class="tooltip-label">${euro.label}:</span><span class="tooltip-value">Euro ${euro.value}</span></div>`);
+    }
+  } else if (euro) {
+    // Backward compatibility - old API
+    rows.push(`<div class="tooltip-row"><span class="tooltip-label">${props.translations.euro}:</span><span class="tooltip-value">Euro ${euro}</span></div>`);
+  }
+
+  const specsContent = rows.length
+    ? `<div class="tooltip-specs">${rows.join('')}</div>`
+    : '';
+
+  return header + specsContent;
+};
+
+onMounted(() => {
+  if (engineRef.value) {
+    tippyInstance = tippy(engineRef.value, {
+      content: getTooltipContent(),
+      allowHTML: true,
+      theme: 'sds',
+      placement: 'top',
+      arrow: true,
+      animation: 'shift-away',
+      duration: [200, 150],
+      maxWidth: 280,
+    });
+  }
+});
+
+onUnmounted(() => {
+  if (tippyInstance) {
+    tippyInstance.destroy();
+  }
+});
+</script>
+
+<template>
+  <span
+    ref="engineRef"
+    class="engine-code"
+    :class="`engine-code-${engine.code}`"
+  >
+    {{ engine.code }}<span v-if="showComma">,</span>
+  </span>
+</template>
+
+<style scoped>
+/* Engine Code Styles */
+.engine-code {
+  @apply inline-block mr-1;
+  @apply underline decoration-dotted underline-offset-4 py-0.5;
+  @apply decoration-neutral-light cursor-default;
+  @apply transition-colors duration-200;
+}
+
+.engine-code:hover {
+  @apply decoration-blue-darker dark:decoration-blue-light;
+}
+
+/* Semantic Engine Code Colors */
+/* GTI Engines - Red */
+.engine-code-CAVE,
+.engine-code-CTHE,
+.engine-code-DAJA,
+.engine-code-DAYB {
+  @apply text-red-600 dark:text-red-500;
+}
+
+/* WRC R Engine - Blue */
+.engine-code-CDLJ {
+  @apply text-blue-600 dark:text-blue-500;
+}
+
+/* Special Blue Engines */
+.engine-code-CPTA,
+.engine-code-CZEA {
+  @apply text-blue-700 dark:text-blue-600;
+}
+</style>