spoko-design-system 1.6.0 → 1.8.0

package/src/pages/components/product-engine.mdx

@@ -0,0 +1,370 @@
+---
+title: "ProductEngine"
+layout: "../../layouts/MainLayout.astro"
+---
+import ProductEngine from '../../components/Product/ProductEngine.vue'
+import ProductEngines from '../../components/Product/ProductEngines.vue'
+
+# ProductEngine
+
+Engine codes with detailed tooltips showing specifications like power, displacement, dates, and more.
+
+## Single Engine Code
+
+Display a single engine code with tooltip showing detailed engine information.
+
+### import:
+
+```js
+import ProductEngine from 'spoko-design-system/src/components/Product/ProductEngine.vue'
+```
+
+### Basic Usage (New API Structure):
+
+<div class="component-preview">
+     <div class="bg-white p-6 w-full flex gap-2">
+          <ProductEngine client:load engine={{
+               code: "CAYA",
+               name: "1.6 TDI",
+               serie: { value: "EA189", label: "Seria silnika" },
+               power: { kw: 55, ps: 75, ps_label: "KM", label: "Moc" },
+               displacement: { value: 1598, label: "Pojemność" },
+               euro: { value: 5, label: "Norma Euro" }
+          }} />
+          <ProductEngine client:load engine={{
+               code: "CAYB",
+               name: "1.6 TDI",
+               serie: { value: "EA189", label: "Seria silnika" },
+               power: { kw: 66, ps: 90, ps_label: "KM", label: "Moc" },
+               displacement: { value: 1598, label: "Pojemność" },
+               euro: { value: 5, label: "Norma Euro" }
+          }} />
+     </div>
+</div>
+
+```vue
+<!-- New API structure (with built-in translations) -->
+<ProductEngine :engine="{
+  code: 'CAYA',
+  name: '1.6 TDI',
+  serie: { value: 'EA189', label: 'Seria silnika' },
+  power: { kw: 55, ps: 75, ps_label: 'KM', label: 'Moc' },
+  displacement: { value: 1598, label: 'Pojemność' },
+  euro: { value: 5, label: 'Norma Euro' }
+}" />
+
+<!-- Old API structure (backward compatible) -->
+<ProductEngine
+  :engine="{ code: 'CAYA', name: '1.6 TDI', kw: 55, ps: 75, cc: 1598, serie: 3, euro: 5 }"
+  :translations="{ power: 'Moc', cc: 'Pojemność', euro: 'Euro', horsepowerUnit: 'KM' }"
+/>
+```
+
+### Special Engine Variants (Colored):
+
+Engine codes for special editions are automatically color-coded:
+
+<div class="component-preview">
+     <div class="bg-white p-6 w-full flex flex-wrap gap-3">
+          <div class="flex flex-col gap-1">
+               <small class="text-xs text-gray-500">GTI Engine (Red)</small>
+               <ProductEngine client:load engine={{
+                    code: "CAVE",
+                    name: "1.4 TSI",
+                    power: { kw: 132, ps: 180, ps_label: "KM", label: "Moc" },
+                    displacement: { value: 1390, label: "Pojemność" },
+                    euro: { value: 5, label: "Norma Euro" }
+               }} />
+          </div>
+          <div class="flex flex-col gap-1">
+               <small class="text-xs text-gray-500">WRC Engine (Blue)</small>
+               <ProductEngine client:load engine={{
+                    code: "CDLJ",
+                    name: "1.6 TDI",
+                    power: { kw: 165, ps: 220, ps_label: "KM", label: "Moc" },
+                    displacement: { value: 1598, label: "Pojemność" },
+                    euro: { value: 6, label: "Norma Euro" }
+               }} />
+          </div>
+          <div class="flex flex-col gap-1">
+               <small class="text-xs text-gray-500">Special Blue</small>
+               <ProductEngine client:load engine={{
+                    code: "CPTA",
+                    name: "1.0 TSI",
+                    power: { kw: 70, ps: 95, ps_label: "KM", label: "Moc" },
+                    displacement: { value: 999, label: "Pojemność" },
+                    euro: { value: 6, label: "Norma Euro" }
+               }} />
+          </div>
+     </div>
+</div>
+
+```vue
+<!-- GTI Engine - Red -->
+<ProductEngine :engine="{
+  code: 'CAVE',
+  name: '1.4 TSI',
+  power: { kw: 132, ps: 180, ps_label: 'KM', label: 'Moc' },
+  displacement: { value: 1390, label: 'Pojemność' },
+  euro: { value: 5, label: 'Norma Euro' }
+}" />
+
+<!-- WRC Engine - Blue -->
+<ProductEngine :engine="{
+  code: 'CDLJ',
+  name: '1.6 TDI',
+  power: { kw: 165, ps: 220, ps_label: 'KM', label: 'Moc' },
+  displacement: { value: 1598, label: 'Pojemność' },
+  euro: { value: 6, label: 'Norma Euro' }
+}" />
+```
+
+## Engine List
+
+Display multiple engine codes from an array (from API response).
+
+### import:
+
+```js
+import ProductEngines from 'spoko-design-system/src/components/Product/ProductEngines.vue'
+```
+
+### Usage:
+
+<div class="component-preview">
+     <div class="bg-white p-6 w-full">
+          <ProductEngines client:load engines={[
+               {
+                    id: 13,
+                    code: "CAYA",
+                    name: "1.6 TDI",
+                    serie: { value: "EA189", label: "Seria silnika" },
+                    power: { kw: 55, ps: 75, ps_label: "KM", label: "Moc" },
+                    displacement: { value: 1598, label: "Pojemność" },
+                    euro: { value: 5, label: "Norma Euro" }
+               },
+               {
+                    id: 14,
+                    code: "CAYB",
+                    name: "1.6 TDI",
+                    serie: { value: "EA189", label: "Seria silnika" },
+                    power: { kw: 66, ps: 90, ps_label: "KM", label: "Moc" },
+                    displacement: { value: 1598, label: "Pojemność" },
+                    euro: { value: 5, label: "Norma Euro" }
+               },
+               {
+                    id: 15,
+                    code: "CAYC",
+                    name: "1.6 TDI",
+                    serie: { value: "EA189", label: "Seria silnika" },
+                    power: { kw: 77, ps: 105, ps_label: "KM", label: "Moc" },
+                    displacement: { value: 1598, label: "Pojemność" },
+                    euro: { value: 5, label: "Norma Euro" }
+               },
+          ]} />
+     </div>
+</div>
+
+```vue
+<ProductEngines :engines="[
+  {
+    id: 13,
+    code: 'CAYA',
+    name: '1.6 TDI',
+    serie: { value: 'EA189', label: 'Seria silnika' },
+    power: { kw: 55, ps: 75, ps_label: 'KM', label: 'Moc' },
+    displacement: { value: 1598, label: 'Pojemność' },
+    euro: { value: 5, label: 'Norma Euro' }
+  },
+  {
+    id: 14,
+    code: 'CAYB',
+    name: '1.6 TDI',
+    serie: { value: 'EA189', label: 'Seria silnika' },
+    power: { kw: 66, ps: 90, ps_label: 'KM', label: 'Moc' },
+    displacement: { value: 1598, label: 'Pojemność' },
+    euro: { value: 5, label: 'Norma Euro' }
+  }
+]" />
+```
+
+### With API Data:
+
+When using data from the API, pass the `part_engines` array directly. The component automatically extracts translations from the nested structure:
+
+```vue
+<ProductEngines
+  :engines="product.part_engines"
+  :isPdp="true"
+/>
+```
+
+**Note**: The new API structure includes labels and translations, so you no longer need to pass the `translations` prop. The component will use labels from the API (e.g., "Moc", "Pojemność", "KM").
+
+### API Response Structure:
+
+```json
+{
+  "part_engines": [
+    {
+      "id": 13,
+      "code": "CAYA",
+      "name": "1.6 TDI",
+      "info": null,
+      "serie": {
+        "value": "EA189",
+        "label": "Seria silnika"
+      },
+      "type": {
+        "value": "diesel",
+        "translated": "Diesel",
+        "label": "Typ paliwa"
+      },
+      "power": {
+        "kw": 55,
+        "ps": 75,
+        "ps_label": "KM",
+        "label": "Moc"
+      },
+      "date": {
+        "value": "03/2009–05/2010",
+        "label": "Data produkcji"
+      },
+      "displacement": {
+        "value": 1598,
+        "label": "Pojemność"
+      },
+      "compression_ratio": {
+        "value": "16,5:1",
+        "label": "Stopień sprężania"
+      },
+      "valves": {
+        "value": 16,
+        "label": "Zawory"
+      },
+      "euro": {
+        "value": 5,
+        "formatted": "Norma Euro 5",
+        "label": "Norma Euro"
+      }
+    },
+    {
+      "id": 14,
+      "code": "CAYB",
+      "name": "1.6 TDI",
+      "info": null,
+      "serie": {
+        "value": "EA189",
+        "label": "Seria silnika"
+      },
+      "type": {
+        "value": "diesel",
+        "translated": "Diesel",
+        "label": "Typ paliwa"
+      },
+      "power": {
+        "kw": 66,
+        "ps": 90,
+        "ps_label": "KM",
+        "label": "Moc"
+      },
+      "date": {
+        "value": "03/2009–03/2014",
+        "label": "Data produkcji"
+      },
+      "displacement": {
+        "value": 1598,
+        "label": "Pojemność"
+      },
+      "compression_ratio": {
+        "value": "16,5:1",
+        "label": "Stopień sprężania"
+      },
+      "valves": {
+        "value": 16,
+        "label": "Zawory"
+      },
+      "euro": {
+        "value": 5,
+        "formatted": "Norma Euro 5",
+        "label": "Norma Euro"
+      }
+    }
+  ]
+}
+```
+
+## Props
+
+### ProductEngine Props:
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `engine` | `Object` | Yes | - | Engine object with nested structure from API |
+| `engine.code` | `String` | Yes | - | Engine code (e.g., "CAYA") |
+| `engine.name` | `String` | No | - | Engine name (e.g., "1.6 TDI") |
+| `engine.info` | `String` | No | - | Additional info shown in header |
+| `engine.serie` | `Object` | No | - | Engine series object |
+| `engine.serie.value` | `String` | No | - | Series value (e.g., "EA189", "EA288") |
+| `engine.serie.label` | `String` | No | - | Series label (e.g., "Seria silnika") |
+| `engine.power` | `Object` | No | - | Power object with kw, ps, labels |
+| `engine.power.kw` | `Number` | No | - | Power in kilowatts |
+| `engine.power.ps` | `Number` | No | - | Power in horsepower |
+| `engine.power.ps_label` | `String` | No | - | Unit label (e.g., "KM", "PS") |
+| `engine.power.label` | `String` | No | - | Power label (e.g., "Moc") |
+| `engine.displacement` | `Object` | No | - | Displacement object |
+| `engine.displacement.value` | `Number` | No | - | Displacement in cm³ |
+| `engine.displacement.label` | `String` | No | - | Label (e.g., "Pojemność") |
+| `engine.euro` | `Object` | No | - | Euro standard object |
+| `engine.euro.value` | `Number` | No | - | Euro standard number |
+| `engine.euro.label` | `String` | No | - | Label (e.g., "Norma Euro") |
+| `engine.euro.formatted` | `String` | No | - | Formatted string (e.g., "Norma Euro 5") |
+| `showComma` | `Boolean` | No | `false` | Show comma after code (for lists) |
+| `translations` | `Object` | No | API labels | Fallback translations (used only with old API) |
+
+**Note**: The component supports both the new nested API structure (with built-in labels) and the old flat structure for backward compatibility.
+
+### ProductEngines Props:
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `engines` | `Array<Object>` | Yes | `[]` | Array of engine objects (new nested structure) |
+| `isPdp` | `Boolean` | No | `false` | Product detail page styling |
+| `translations` | `Object` | No | API labels | Fallback translations (used only with old API) |
+
+## Features
+
+- ✅ **Rich Tooltips**: Shows detailed engine specifications on hover (Tippy.js)
+- ✅ **API-Driven Translations**: Labels and units come directly from API
+- ✅ **Multi-language**: Supports Polish (KM), German (PS), English (HP)
+- ✅ **Two-Tone Design**: Dark blue header with light body for better hierarchy
+- ✅ **Semantic Colors**: Automatic color coding for special engines (GTI, WRC, etc.)
+- ✅ **Clean Layout**: Flexbox-based design with semantic CSS classes
+- ✅ **Smart Data**: Only shows relevant fields (power, displacement, euro)
+- ✅ **Auto-sorting**: Engines automatically sorted alphabetically by code
+- ✅ **SEO-Friendly**: Static HTML enhanced with client-side tooltips
+- ✅ **Backward Compatible**: Works with both new and old API structures
+- ✅ **Touch Friendly**: Works on mobile devices
+
+## Engine Color Coding
+
+Special engine codes are automatically color-coded:
+
+| Engine Codes | Color | Description |
+|--------------|-------|-------------|
+| CAVE, CTHE, DAJA, DAYB | Red | GTI Performance engines |
+| CDLJ | Blue | WRC/R Street engines |
+| CPTA, CZEA | Light Blue | Special blue engines |
+
+## Notes
+
+- Hover over any engine code to see full specifications in a detailed tooltip
+- Tooltips use Tippy.js with custom two-tone SDS theme
+- **New API structure**: Labels come from API (e.g., "Moc", "Pojemność", "KM")
+- **No manual translations needed**: The API provides all labels and units
+- The component automatically extracts series value from nested structure
+- Date field is not shown in tooltips (only power, displacement, and euro)
+- Missing data fields are gracefully hidden
+- Commas between engine codes are automatically handled in lists
+- **Backward compatible**: Still works with old flat API structure
+- Tooltip has dark blue header (#001e50) with light gray body (#f3f4f6)

package/src/scripts/tooltips.ts

@@ -0,0 +1,46 @@
+import tippy from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+import '../styles/tippy-theme.css';
+
+/**
+ * Global Tooltip Initializer
+ * Automatically enhances all elements with data-tippy-content attribute
+ * Works with static HTML - perfect for SEO and Astro static pages
+ */
+
+function initTooltips() {
+  // Destroy existing tooltips to avoid duplicates
+  document.querySelectorAll('[data-tippy-content]').forEach((el: any) => {
+    if (el._tippy) {
+      el._tippy.destroy();
+    }
+  });
+
+  // Initialize tooltips for all elements with data-tippy-content
+  tippy('[data-tippy-content]', {
+    theme: 'sds',
+    placement: 'top',
+    arrow: true,
+    animation: 'shift-away',
+    duration: [200, 150],
+    maxWidth: 280,
+    allowHTML: true, // Allow HTML content for rich tooltips
+  });
+}
+
+// Initialize on page load
+if (typeof window !== 'undefined') {
+  // Initial load
+  document.addEventListener('DOMContentLoaded', () => {
+    initTooltips();
+    // Reinitialize after a short delay to catch Vue components
+    setTimeout(initTooltips, 100);
+  });
+
+  // Reinitialize on Astro page transitions (for View Transitions)
+  document.addEventListener('astro:page-load', () => {
+    initTooltips();
+    // Reinitialize after a short delay to catch Vue components
+    setTimeout(initTooltips, 100);
+  });
+}

package/src/styles/tippy-theme.css

@@ -0,0 +1,131 @@
+/*
+ * Custom Tippy.js Theme for SDS
+ * Matches the design system colors and styling
+ */
+
+/* SDS Theme for Tippy */
+.tippy-box[data-theme~='sds'] {
+  background-color: #f3f4f6 !important; /* neutral-lightest */
+  color: #1e293b !important; /* slate-darkest */
+  font-size: 0.75rem;
+  line-height: 1.5;
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  max-width: 280px;
+  border: 1px solid #e5e7eb; /* neutral-lighter */
+}
+
+.tippy-box[data-theme~='sds'][data-placement^='top'] > .tippy-arrow::before {
+  border-top-color: #f3f4f6;
+}
+.tippy-box[data-theme~='sds'][data-placement^='bottom'] > .tippy-arrow::before {
+  border-bottom-color: #f3f4f6;
+}
+.tippy-box[data-theme~='sds'][data-placement^='left'] > .tippy-arrow::before {
+  border-left-color: #f3f4f6;
+}
+.tippy-box[data-theme~='sds'][data-placement^='right'] > .tippy-arrow::before {
+  border-right-color: #f3f4f6;
+}
+
+/* Content styling */
+.tippy-box[data-theme~='sds'] .tippy-content {
+  padding: 0.5rem 0.75rem;
+  background-color: transparent !important;
+  color: #1e293b !important; /* slate-darkest */
+}
+
+/* Remove padding for structured tooltips (with tooltip-header) */
+.tippy-box[data-theme~='sds'] .tippy-content:has(.tooltip-header) {
+  padding: 0;
+}
+
+/* Force all child elements to inherit text color */
+.tippy-box[data-theme~='sds'] * {
+  color: inherit;
+}
+
+/* Engine tooltip header - dark blue background */
+.tippy-box[data-theme~='sds'] .tooltip-header {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem 0.5rem;
+  background-color: #001e50;
+  border-radius: 0.5rem 0.5rem 0 0;
+  color: white;
+}
+
+.tippy-box[data-theme~='sds'] .tooltip-header strong {
+  font-weight: 600;
+  color: white;
+}
+
+.tippy-box[data-theme~='sds'] .tooltip-header .info {
+  font-weight: 300;
+  margin-left: 0.5rem;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.tippy-box[data-theme~='sds'] .tooltip-header .series-badge {
+  margin-left: auto;
+  font-weight: 400;
+  color: #00b0f0;
+  font-size: 0.75rem;
+}
+
+/* Engine tooltip specs */
+.tippy-box[data-theme~='sds'] .tooltip-specs {
+  padding: 0.375rem 0.5rem;
+}
+
+.tippy-box[data-theme~='sds'] .tooltip-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.25rem 0;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.tippy-box[data-theme~='sds'] .tooltip-row:last-child {
+  border-bottom: none;
+}
+
+.tippy-box[data-theme~='sds'] .tooltip-label {
+  font-size: 0.7rem;
+  color: #64748B;
+  font-weight: 400;
+}
+
+.tippy-box[data-theme~='sds'] .tooltip-value {
+  font-size: 0.75rem;
+  color: #1e293b;
+  font-weight: 500;
+  margin-left: 1rem;
+}
+
+/* Engine tooltip table styling */
+.tippy-box[data-theme~='sds'] table {
+  width: 100%;
+  margin-top: 0.25rem;
+  border-collapse: collapse;
+  color: white;
+}
+
+.tippy-box[data-theme~='sds'] th {
+  text-align: left;
+  padding: 0.125rem 0.5rem 0.125rem 0;
+  color: rgba(255, 255, 255, 0.7) !important;
+  font-weight: 400;
+  font-size: 0.7rem;
+}
+
+.tippy-box[data-theme~='sds'] td {
+  padding: 0.125rem 0;
+  font-weight: 500;
+  text-align: right;
+  color: white !important;
+}
+
+.tippy-box[data-theme~='sds'] strong {
+  font-weight: 600;
+}

package/uno-config/index.ts

@@ -165,6 +165,8 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
       // All peer selectors from the list (needed for floating labels)
       ...peerSelectorClasses,
     ],
+    // Disable default extractors to prevent false positives from JavaScript code
+    extractorDefault: false,
     // Optimized extractors for static Astro builds
     extractors: [
       {
@@ -207,7 +209,7 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
       presetAttributify(),
       presetIcons({
         scale: 1.2,
-        warn: true,
+        warn: true, // Show warnings for actual missing icons
         prefix: 'i-',
         extraProperties: {
           'display': 'inline-block',

package/uno-config/theme/shortcuts/jumbotron.ts

@@ -7,7 +7,7 @@ import { breakpoints } from './../breakpoints';
 
 export const jumbotronShortcuts = [
   // Default variant
-  ['jumbotron-header-base', 'relative mx-auto my-auto lg:w-full text-center py-8'],
+  ['jumbotron-header-base', 'relative mx-auto my-auto w-full text-center py-8'],
   ['jumbotron-container-small', 'md:min-h-xs sm:py-12 md:py-14 lg:py-16 xl:py-20'],
   ['jumbotron-container-large', 'md:min-h-md sm:py-16 md:py-20 lg:py-28 xl:py-32'],
   ['jumbotron-title-default', 'text-3xl headline-light text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl'],