spoko-design-system 1.18.1 → 1.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/settings.json +48 -48
- package/.github/dependabot.yml +11 -11
- package/.github/todo.yml +3 -3
- package/.github/workflows/claude.yml +37 -37
- package/.github/workflows/code-quality.yml +72 -72
- package/.github/workflows/deploy.yml +43 -43
- package/.husky/README.md +41 -41
- package/.husky/commit-msg +1 -1
- package/.husky/pre-commit +40 -40
- package/.prettierignore +14 -14
- package/.prettierrc +30 -30
- package/.stackblitzrc +5 -5
- package/.vscode/extensions.json +4 -4
- package/.vscode/launch.json +11 -11
- package/.vscode/settings.json +21 -21
- package/CHANGELOG.md +462 -450
- package/CLAUDE.md +268 -268
- package/LICENSE +21 -21
- package/README.md +303 -132
- package/TOOLTIPS.md +236 -236
- package/astro.config.mjs +84 -84
- package/commitlint.config.js +3 -3
- package/dev-dist/sw.js +91 -91
- package/dev-dist/workbox-c676b6d3.js +3391 -3391
- package/eslint.config.js +70 -70
- package/icon.config.ts +348 -348
- package/index.ts +78 -78
- package/package.json +160 -160
- package/public/arrow-bottom.svg +7 -7
- package/public/fonts/lg.svg +53 -53
- package/public/fonts/vwhead-bold-demo.html +549 -549
- package/public/fonts/vwhead-regular-demo.html +549 -549
- package/public/fonts/vwtext-bold-demo.html +549 -549
- package/public/fonts/vwtext-regular-demo.html +549 -549
- package/public/github.svg +3 -3
- package/public/grid_dot.svg +4 -4
- package/public/linkedin.svg +44 -44
- package/public/make-scrollable-code-focusable.js +3 -3
- package/public/pagefind.yml +3 -3
- package/public/polo.blue.svg +29 -29
- package/public/spoko.space.svg +71 -71
- package/public/twitter.svg +46 -46
- package/renovate.json +6 -6
- package/sandbox.config.json +11 -11
- package/sonar-project.properties +26 -26
- package/src/components/Category/CategoryDetails.astro +46 -18
- package/src/components/Jumbotron/variants/Hero.astro +9 -1
- package/src/components/Jumbotron/variants/PostSplit.astro +8 -0
- package/src/pages/components/badges.mdx +57 -57
- package/src/pages/components/breadcrumbs.mdx +139 -139
- package/src/pages/components/buttons.mdx +359 -359
- package/src/pages/components/card.mdx +294 -294
- package/src/pages/components/carousel.mdx +62 -62
- package/src/pages/components/copyright.mdx +42 -42
- package/src/pages/components/details-list.mdx +207 -207
- package/src/pages/components/features-list.mdx +37 -37
- package/src/pages/components/flags.mdx +49 -49
- package/src/pages/components/fuck-russia.mdx +39 -39
- package/src/pages/components/hand-drive.mdx +78 -78
- package/src/pages/components/headline.mdx +337 -337
- package/src/pages/components/image.mdx +513 -513
- package/src/pages/components/input.mdx +367 -367
- package/src/pages/components/jumbotron.mdx +530 -530
- package/src/pages/components/modal.mdx +212 -212
- package/src/pages/components/post-header.mdx +64 -64
- package/src/pages/components/pr-code.mdx +213 -213
- package/src/pages/components/product-engine.mdx +418 -418
- package/src/pages/components/product-number.mdx +58 -58
- package/src/pages/components/product-tile.mdx +51 -51
- package/src/pages/components/quote.mdx +33 -33
- package/src/pages/components/slimbanner.mdx +260 -260
- package/src/pages/components/table.mdx +108 -108
- package/src/pages/core/colors.mdx +21 -21
- package/src/pages/core/grid.mdx +193 -193
- package/src/pages/core/introduction.mdx +77 -77
- package/src/pages/core/tooltips.mdx +491 -491
- package/src/pages/patterns/introduction.mdx +60 -60
- package/src/styles/_variables.scss +70 -70
- package/tailwind.config.cjs +8 -8
- package/tsconfig.json +28 -28
- package/uno-config/index.ts +269 -269
- package/uno-config/theme/breakpoints.ts +9 -9
- package/uno-config/theme/colors.ts +65 -65
- package/uno-config/theme/dimensions.ts +17 -17
- package/uno-config/theme/effects.ts +14 -14
- package/uno-config/theme/grid.ts +10 -10
- package/uno-config/theme/index.ts +26 -26
- package/uno-config/theme/shortcuts/buttons.ts +53 -53
- package/uno-config/theme/shortcuts/components.ts +124 -124
- package/uno-config/theme/shortcuts/index.ts +20 -20
- package/uno-config/theme/shortcuts/jumbotron.ts +71 -71
- package/uno-config/theme/shortcuts/layout.ts +75 -75
- package/uno-config/theme/typography.ts +29 -29
- package/uno.config.ts +2 -2
|
@@ -1,418 +1,418 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: "ProductEngine"
|
|
3
|
-
layout: "../../layouts/MainLayout.astro"
|
|
4
|
-
---
|
|
5
|
-
import ProductEngine from '../../components/Product/ProductEngine.astro'
|
|
6
|
-
import ProductEngines from '../../components/Product/ProductEngines.astro'
|
|
7
|
-
|
|
8
|
-
# ProductEngine
|
|
9
|
-
|
|
10
|
-
Engine codes with detailed tooltips showing specifications like power, displacement, dates, and more.
|
|
11
|
-
|
|
12
|
-
**⚡ Performance-optimized**: Uses Tippy.js delegation pattern - one global script handles all tooltips efficiently.
|
|
13
|
-
|
|
14
|
-
**🔍 SEO-friendly**: Engine codes rendered as static HTML (no client-side hydration required).
|
|
15
|
-
|
|
16
|
-
## Single Engine Code
|
|
17
|
-
|
|
18
|
-
Display a single engine code with tooltip showing detailed engine information.
|
|
19
|
-
|
|
20
|
-
### Setup:
|
|
21
|
-
|
|
22
|
-
**1. Import the component:**
|
|
23
|
-
|
|
24
|
-
```js
|
|
25
|
-
import { ProductEngine } from 'spoko-design-system'
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
**2. Initialize tooltips (one-time setup):**
|
|
29
|
-
|
|
30
|
-
Create a tooltip script in your project:
|
|
31
|
-
|
|
32
|
-
```ts
|
|
33
|
-
// src/scripts/tooltips.ts
|
|
34
|
-
import 'spoko-design-system/scripts/tooltips';
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
Then import it in your layout's `<head>`:
|
|
38
|
-
|
|
39
|
-
```astro
|
|
40
|
-
---
|
|
41
|
-
// In your layout file (e.g., HeadCommon.astro)
|
|
42
|
-
---
|
|
43
|
-
<head>
|
|
44
|
-
<script src="/src/scripts/tooltips.ts"></script>
|
|
45
|
-
</head>
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
See [Tooltips documentation](/core/tooltips) for details.
|
|
49
|
-
|
|
50
|
-
### Basic Usage (New API Structure):
|
|
51
|
-
|
|
52
|
-
<div class="component-preview">
|
|
53
|
-
<div class="bg-white p-6 w-full flex gap-2">
|
|
54
|
-
<ProductEngine engine={{
|
|
55
|
-
code: "CAYA",
|
|
56
|
-
name: "1.6 TDI",
|
|
57
|
-
serie: { value: "EA189", label: "Seria silnika" },
|
|
58
|
-
power: { kw: 55, ps: 75, ps_label: "KM", label: "Moc" },
|
|
59
|
-
displacement: { value: 1598, label: "Pojemność" },
|
|
60
|
-
euro: { value: 5, label: "Norma" }
|
|
61
|
-
}} />
|
|
62
|
-
<ProductEngine engine={{
|
|
63
|
-
code: "CAYB",
|
|
64
|
-
name: "1.6 TDI",
|
|
65
|
-
serie: { value: "EA189", label: "Seria silnika" },
|
|
66
|
-
power: { kw: 66, ps: 90, ps_label: "KM", label: "Moc" },
|
|
67
|
-
displacement: { value: 1598, label: "Pojemność" },
|
|
68
|
-
euro: { value: 5, label: "Norma" }
|
|
69
|
-
}} />
|
|
70
|
-
</div>
|
|
71
|
-
</div>
|
|
72
|
-
|
|
73
|
-
```astro
|
|
74
|
-
---
|
|
75
|
-
import { ProductEngine } from 'spoko-design-system';
|
|
76
|
-
---
|
|
77
|
-
|
|
78
|
-
<!-- New API structure (with built-in translations) -->
|
|
79
|
-
<ProductEngine engine={{
|
|
80
|
-
code: 'CAYA',
|
|
81
|
-
name: '1.6 TDI',
|
|
82
|
-
serie: { value: 'EA189', label: 'Seria silnika' },
|
|
83
|
-
power: { kw: 55, ps: 75, ps_label: 'KM', label: 'Moc' },
|
|
84
|
-
displacement: { value: 1598, label: 'Pojemność' },
|
|
85
|
-
euro: { value: 5, label: 'Norma Euro' }
|
|
86
|
-
}} />
|
|
87
|
-
|
|
88
|
-
<!-- Old API structure (backward compatible) -->
|
|
89
|
-
<ProductEngine
|
|
90
|
-
engine={{ code: 'CAYA', name: '1.6 TDI', kw: 55, ps: 75, cc: 1598, serie: 3, euro: 5 }}
|
|
91
|
-
translations={{ power: 'Moc', cc: 'Pojemność', euro: 'Euro', horsepowerUnit: 'KM' }}
|
|
92
|
-
/>
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
### Special Engine Variants (Colored):
|
|
96
|
-
|
|
97
|
-
Engine codes for special editions are automatically color-coded:
|
|
98
|
-
|
|
99
|
-
<div class="component-preview">
|
|
100
|
-
<div class="bg-white p-6 w-full flex flex-wrap gap-3">
|
|
101
|
-
<div class="flex flex-col gap-1">
|
|
102
|
-
<small class="text-xs text-gray-500">GTI Engine (Red)</small>
|
|
103
|
-
<ProductEngine engine={{
|
|
104
|
-
code: "CAVE",
|
|
105
|
-
name: "1.4 TSI",
|
|
106
|
-
power: { kw: 132, ps: 180, ps_label: "KM", label: "Moc" },
|
|
107
|
-
displacement: { value: 1390, label: "Pojemność" },
|
|
108
|
-
euro: { value: 5, label: "Norma " }
|
|
109
|
-
}} />
|
|
110
|
-
</div>
|
|
111
|
-
<div class="flex flex-col gap-1">
|
|
112
|
-
<small class="text-xs text-gray-500">WRC Engine (Blue)</small>
|
|
113
|
-
<ProductEngine engine={{
|
|
114
|
-
code: "CDLJ",
|
|
115
|
-
name: "1.6 TDI",
|
|
116
|
-
power: { kw: 165, ps: 220, ps_label: "KM", label: "Moc" },
|
|
117
|
-
displacement: { value: 1598, label: "Pojemność" },
|
|
118
|
-
euro: { value: 6, label: "Norma " }
|
|
119
|
-
}} />
|
|
120
|
-
</div>
|
|
121
|
-
<div class="flex flex-col gap-1">
|
|
122
|
-
<small class="text-xs text-gray-500">Special Blue</small>
|
|
123
|
-
<ProductEngine engine={{
|
|
124
|
-
code: "CPTA",
|
|
125
|
-
name: "1.0 TSI",
|
|
126
|
-
power: { kw: 70, ps: 95, ps_label: "KM", label: "Moc" },
|
|
127
|
-
displacement: { value: 999, label: "Pojemność" },
|
|
128
|
-
euro: { value: 6, label: "Norma " }
|
|
129
|
-
}} />
|
|
130
|
-
</div>
|
|
131
|
-
</div>
|
|
132
|
-
</div>
|
|
133
|
-
|
|
134
|
-
```astro
|
|
135
|
-
<!-- GTI Engine - Red -->
|
|
136
|
-
<ProductEngine engine={{
|
|
137
|
-
code: 'CAVE',
|
|
138
|
-
name: '1.4 TSI',
|
|
139
|
-
power: { kw: 132, ps: 180, ps_label: 'KM', label: 'Moc' },
|
|
140
|
-
displacement: { value: 1390, label: 'Pojemność' },
|
|
141
|
-
euro: { value: 5, label: 'Norma ' }
|
|
142
|
-
}} />
|
|
143
|
-
|
|
144
|
-
<!-- WRC Engine - Blue -->
|
|
145
|
-
<ProductEngine engine={{
|
|
146
|
-
code: 'CDLJ',
|
|
147
|
-
name: '1.6 TDI',
|
|
148
|
-
power: { kw: 165, ps: 220, ps_label: 'KM', label: 'Moc' },
|
|
149
|
-
displacement: { value: 1598, label: 'Pojemność' },
|
|
150
|
-
euro: { value: 6, label: 'Norma ' }
|
|
151
|
-
}} />
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
## Engine List
|
|
155
|
-
|
|
156
|
-
Display multiple engine codes from an array (from API response).
|
|
157
|
-
|
|
158
|
-
### Import:
|
|
159
|
-
|
|
160
|
-
```js
|
|
161
|
-
import { ProductEngines } from 'spoko-design-system'
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
### Usage:
|
|
165
|
-
|
|
166
|
-
<div class="component-preview">
|
|
167
|
-
<div class="bg-white p-6 w-full">
|
|
168
|
-
<ProductEngines engines={[
|
|
169
|
-
{
|
|
170
|
-
id: 13,
|
|
171
|
-
code: "CAYA",
|
|
172
|
-
name: "1.6 TDI",
|
|
173
|
-
serie: { value: "EA189", label: "Seria silnika" },
|
|
174
|
-
power: { kw: 55, ps: 75, ps_label: "KM", label: "Moc" },
|
|
175
|
-
displacement: { value: 1598, label: "Pojemność" },
|
|
176
|
-
euro: { value: 5, label: "Norma " }
|
|
177
|
-
},
|
|
178
|
-
{
|
|
179
|
-
id: 14,
|
|
180
|
-
code: "CAYB",
|
|
181
|
-
name: "1.6 TDI",
|
|
182
|
-
serie: { value: "EA189", label: "Seria silnika" },
|
|
183
|
-
power: { kw: 66, ps: 90, ps_label: "KM", label: "Moc" },
|
|
184
|
-
displacement: { value: 1598, label: "Pojemność" },
|
|
185
|
-
euro: { value: 5, label: "Norma " }
|
|
186
|
-
},
|
|
187
|
-
{
|
|
188
|
-
id: 15,
|
|
189
|
-
code: "CAYC",
|
|
190
|
-
name: "1.6 TDI",
|
|
191
|
-
serie: { value: "EA189", label: "Seria silnika" },
|
|
192
|
-
power: { kw: 77, ps: 105, ps_label: "KM", label: "Moc" },
|
|
193
|
-
displacement: { value: 1598, label: "Pojemność" },
|
|
194
|
-
euro: { value: 5, label: "Norma " }
|
|
195
|
-
},
|
|
196
|
-
]} />
|
|
197
|
-
</div>
|
|
198
|
-
</div>
|
|
199
|
-
|
|
200
|
-
```astro
|
|
201
|
-
---
|
|
202
|
-
import { ProductEngines } from 'spoko-design-system';
|
|
203
|
-
---
|
|
204
|
-
|
|
205
|
-
<ProductEngines engines={[
|
|
206
|
-
{
|
|
207
|
-
id: 13,
|
|
208
|
-
code: 'CAYA',
|
|
209
|
-
name: '1.6 TDI',
|
|
210
|
-
serie: { value: 'EA189', label: 'Seria silnika' },
|
|
211
|
-
power: { kw: 55, ps: 75, ps_label: 'KM', label: 'Moc' },
|
|
212
|
-
displacement: { value: 1598, label: 'Pojemność' },
|
|
213
|
-
euro: { value: 5, label: 'Norma ' }
|
|
214
|
-
},
|
|
215
|
-
{
|
|
216
|
-
id: 14,
|
|
217
|
-
code: 'CAYB',
|
|
218
|
-
name: '1.6 TDI',
|
|
219
|
-
serie: { value: 'EA189', label: 'Seria silnika' },
|
|
220
|
-
power: { kw: 66, ps: 90, ps_label: 'KM', label: 'Moc' },
|
|
221
|
-
displacement: { value: 1598, label: 'Pojemność' },
|
|
222
|
-
euro: { value: 5, label: 'Norma ' }
|
|
223
|
-
}
|
|
224
|
-
]} />
|
|
225
|
-
```
|
|
226
|
-
|
|
227
|
-
### With API Data:
|
|
228
|
-
|
|
229
|
-
When using data from the API, pass the `part_engines` array directly. The component automatically extracts translations from the nested structure:
|
|
230
|
-
|
|
231
|
-
```astro
|
|
232
|
-
<ProductEngines
|
|
233
|
-
engines={product.part_engines}
|
|
234
|
-
isPdp={true}
|
|
235
|
-
/>
|
|
236
|
-
```
|
|
237
|
-
|
|
238
|
-
**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").
|
|
239
|
-
|
|
240
|
-
### API Response Structure:
|
|
241
|
-
|
|
242
|
-
```json
|
|
243
|
-
{
|
|
244
|
-
"part_engines": [
|
|
245
|
-
{
|
|
246
|
-
"id": 13,
|
|
247
|
-
"code": "CAYA",
|
|
248
|
-
"name": "1.6 TDI",
|
|
249
|
-
"info": null,
|
|
250
|
-
"serie": {
|
|
251
|
-
"value": "EA189",
|
|
252
|
-
"label": "Seria silnika"
|
|
253
|
-
},
|
|
254
|
-
"type": {
|
|
255
|
-
"value": "diesel",
|
|
256
|
-
"translated": "Diesel",
|
|
257
|
-
"label": "Typ paliwa"
|
|
258
|
-
},
|
|
259
|
-
"power": {
|
|
260
|
-
"kw": 55,
|
|
261
|
-
"ps": 75,
|
|
262
|
-
"ps_label": "KM",
|
|
263
|
-
"label": "Moc"
|
|
264
|
-
},
|
|
265
|
-
"date": {
|
|
266
|
-
"value": "03/2009–05/2010",
|
|
267
|
-
"label": "Data produkcji"
|
|
268
|
-
},
|
|
269
|
-
"displacement": {
|
|
270
|
-
"value": 1598,
|
|
271
|
-
"label": "Pojemność"
|
|
272
|
-
},
|
|
273
|
-
"compression_ratio": {
|
|
274
|
-
"value": "16,5:1",
|
|
275
|
-
"label": "Stopień sprężania"
|
|
276
|
-
},
|
|
277
|
-
"valves": {
|
|
278
|
-
"value": 16,
|
|
279
|
-
"label": "Zawory"
|
|
280
|
-
},
|
|
281
|
-
"euro": {
|
|
282
|
-
"value": 5,
|
|
283
|
-
"formatted": "Norma Euro 5",
|
|
284
|
-
"label": "Norma "
|
|
285
|
-
}
|
|
286
|
-
},
|
|
287
|
-
{
|
|
288
|
-
"id": 14,
|
|
289
|
-
"code": "CAYB",
|
|
290
|
-
"name": "1.6 TDI",
|
|
291
|
-
"info": null,
|
|
292
|
-
"serie": {
|
|
293
|
-
"value": "EA189",
|
|
294
|
-
"label": "Seria silnika"
|
|
295
|
-
},
|
|
296
|
-
"type": {
|
|
297
|
-
"value": "diesel",
|
|
298
|
-
"translated": "Diesel",
|
|
299
|
-
"label": "Typ paliwa"
|
|
300
|
-
},
|
|
301
|
-
"power": {
|
|
302
|
-
"kw": 66,
|
|
303
|
-
"ps": 90,
|
|
304
|
-
"ps_label": "KM",
|
|
305
|
-
"label": "Moc"
|
|
306
|
-
},
|
|
307
|
-
"date": {
|
|
308
|
-
"value": "03/2009–03/2014",
|
|
309
|
-
"label": "Data produkcji"
|
|
310
|
-
},
|
|
311
|
-
"displacement": {
|
|
312
|
-
"value": 1598,
|
|
313
|
-
"label": "Pojemność"
|
|
314
|
-
},
|
|
315
|
-
"compression_ratio": {
|
|
316
|
-
"value": "16,5:1",
|
|
317
|
-
"label": "Stopień sprężania"
|
|
318
|
-
},
|
|
319
|
-
"valves": {
|
|
320
|
-
"value": 16,
|
|
321
|
-
"label": "Zawory"
|
|
322
|
-
},
|
|
323
|
-
"euro": {
|
|
324
|
-
"value": 5,
|
|
325
|
-
"formatted": "Norma Euro 5",
|
|
326
|
-
"label": "Norma "
|
|
327
|
-
}
|
|
328
|
-
}
|
|
329
|
-
]
|
|
330
|
-
}
|
|
331
|
-
```
|
|
332
|
-
|
|
333
|
-
## Props
|
|
334
|
-
|
|
335
|
-
### ProductEngine Props:
|
|
336
|
-
|
|
337
|
-
| Prop | Type | Required | Default | Description |
|
|
338
|
-
|------|------|----------|---------|-------------|
|
|
339
|
-
| `engine` | `Object` | Yes | - | Engine object with nested structure from API |
|
|
340
|
-
| `engine.code` | `String` | Yes | - | Engine code (e.g., "CAYA") |
|
|
341
|
-
| `engine.name` | `String` | No | - | Engine name (e.g., "1.6 TDI") |
|
|
342
|
-
| `engine.info` | `String` | No | - | Additional info shown in header |
|
|
343
|
-
| `engine.serie` | `Object` | No | - | Engine series object |
|
|
344
|
-
| `engine.serie.value` | `String` | No | - | Series value (e.g., "EA189", "EA288") |
|
|
345
|
-
| `engine.serie.label` | `String` | No | - | Series label (e.g., "Seria silnika") |
|
|
346
|
-
| `engine.power` | `Object` | No | - | Power object with kw, ps, labels |
|
|
347
|
-
| `engine.power.kw` | `Number` | No | - | Power in kilowatts |
|
|
348
|
-
| `engine.power.ps` | `Number` | No | - | Power in horsepower |
|
|
349
|
-
| `engine.power.ps_label` | `String` | No | - | Unit label (e.g., "KM", "PS") |
|
|
350
|
-
| `engine.power.label` | `String` | No | - | Power label (e.g., "Moc") |
|
|
351
|
-
| `engine.displacement` | `Object` | No | - | Displacement object |
|
|
352
|
-
| `engine.displacement.value` | `Number` | No | - | Displacement in cm³ |
|
|
353
|
-
| `engine.displacement.label` | `String` | No | - | Label (e.g., "Pojemność") |
|
|
354
|
-
| `engine.euro` | `Object` | No | - | Euro standard object |
|
|
355
|
-
| `engine.euro.value` | `Number` | No | - | Euro standard number |
|
|
356
|
-
| `engine.euro.label` | `String` | No | - | Label (e.g., "Norma Euro") |
|
|
357
|
-
| `engine.euro.formatted` | `String` | No | - | Formatted string (e.g., "Norma Euro 5") |
|
|
358
|
-
| `showComma` | `Boolean` | No | `false` | Show comma after code (for lists) |
|
|
359
|
-
| `translations` | `Object` | No | API labels | Fallback translations (used only with old API) |
|
|
360
|
-
|
|
361
|
-
**Note**: The component supports both the new nested API structure (with built-in labels) and the old flat structure for backward compatibility.
|
|
362
|
-
|
|
363
|
-
### ProductEngines Props:
|
|
364
|
-
|
|
365
|
-
| Prop | Type | Required | Default | Description |
|
|
366
|
-
|------|------|----------|---------|-------------|
|
|
367
|
-
| `engines` | `Array<Object>` | Yes | `[]` | Array of engine objects (new nested structure) |
|
|
368
|
-
| `isPdp` | `Boolean` | No | `false` | Product detail page styling |
|
|
369
|
-
| `translations` | `Object` | No | API labels | Fallback translations (used only with old API) |
|
|
370
|
-
|
|
371
|
-
## Features
|
|
372
|
-
|
|
373
|
-
- ✅ **Rich Tooltips**: Shows detailed engine specifications on hover (Tippy.js delegation)
|
|
374
|
-
- ✅ **Performance Optimized**: One global script handles all tooltips efficiently
|
|
375
|
-
- ✅ **SEO-Friendly**: Engine codes rendered as static HTML (no hydration)
|
|
376
|
-
- ✅ **API-Driven Translations**: Labels and units come directly from API
|
|
377
|
-
- ✅ **Multi-language**: Supports Polish (KM), German (PS), English (HP)
|
|
378
|
-
- ✅ **Two-Tone Design**: Dark blue header with light body for better hierarchy
|
|
379
|
-
- ✅ **Semantic Colors**: Automatic color coding for special engines (GTI, WRC, etc.)
|
|
380
|
-
- ✅ **Clean Layout**: Flexbox-based design with semantic CSS classes
|
|
381
|
-
- ✅ **Smart Data**: Only shows relevant fields (power, displacement, euro)
|
|
382
|
-
- ✅ **Auto-sorting**: Engines automatically sorted alphabetically by code
|
|
383
|
-
- ✅ **Backward Compatible**: Works with both new and old API structures
|
|
384
|
-
- ✅ **Touch Friendly**: Works on mobile devices
|
|
385
|
-
|
|
386
|
-
## Engine Color Coding
|
|
387
|
-
|
|
388
|
-
Special engine codes are automatically color-coded:
|
|
389
|
-
|
|
390
|
-
| Engine Codes | Color | Description |
|
|
391
|
-
|--------------|-------|-------------|
|
|
392
|
-
| CAVE, CTHE, DAJA, DAYB | Red | GTI Performance engines |
|
|
393
|
-
| CDLJ | Blue | WRC/R Street engines |
|
|
394
|
-
| CPTA, CZEA | Light Blue | Special blue engines |
|
|
395
|
-
|
|
396
|
-
## Notes
|
|
397
|
-
|
|
398
|
-
- **Setup required**: Import `'spoko-design-system/scripts/tooltips'` once in your layout (see [Tooltips docs](/core/tooltips))
|
|
399
|
-
- Hover over any engine code to see full specifications in a detailed tooltip
|
|
400
|
-
- Tooltips use Tippy.js delegation pattern (one global handler for all tooltips)
|
|
401
|
-
- **Performance**: No client-side hydration needed - pure Astro components
|
|
402
|
-
- **New API structure**: Labels come from API (e.g., "Moc", "Pojemność", "KM")
|
|
403
|
-
- **No manual translations needed**: The API provides all labels and units
|
|
404
|
-
- The component automatically extracts series value from nested structure
|
|
405
|
-
- Date field is not shown in tooltips (only power, displacement, and euro)
|
|
406
|
-
- Missing data fields are gracefully hidden
|
|
407
|
-
- Commas between engine codes are automatically handled in lists
|
|
408
|
-
- **Backward compatible**: Still works with old flat API structure
|
|
409
|
-
- Tooltip has dark blue header (#001e50) with light gray body (#f3f4f6)
|
|
410
|
-
|
|
411
|
-
## Migration from Vue to Astro
|
|
412
|
-
|
|
413
|
-
If upgrading from the old Vue version:
|
|
414
|
-
|
|
415
|
-
1. **Remove `client:load`** directive from all ProductEngine/ProductEngines usage
|
|
416
|
-
2. **Set up tooltips** in your layout (see [Tooltips documentation](/core/tooltips))
|
|
417
|
-
3. **Update imports** to use Astro components (automatically handled by package exports)
|
|
418
|
-
4. **No other changes needed** - props and API structure remain the same
|
|
1
|
+
---
|
|
2
|
+
title: "ProductEngine"
|
|
3
|
+
layout: "../../layouts/MainLayout.astro"
|
|
4
|
+
---
|
|
5
|
+
import ProductEngine from '../../components/Product/ProductEngine.astro'
|
|
6
|
+
import ProductEngines from '../../components/Product/ProductEngines.astro'
|
|
7
|
+
|
|
8
|
+
# ProductEngine
|
|
9
|
+
|
|
10
|
+
Engine codes with detailed tooltips showing specifications like power, displacement, dates, and more.
|
|
11
|
+
|
|
12
|
+
**⚡ Performance-optimized**: Uses Tippy.js delegation pattern - one global script handles all tooltips efficiently.
|
|
13
|
+
|
|
14
|
+
**🔍 SEO-friendly**: Engine codes rendered as static HTML (no client-side hydration required).
|
|
15
|
+
|
|
16
|
+
## Single Engine Code
|
|
17
|
+
|
|
18
|
+
Display a single engine code with tooltip showing detailed engine information.
|
|
19
|
+
|
|
20
|
+
### Setup:
|
|
21
|
+
|
|
22
|
+
**1. Import the component:**
|
|
23
|
+
|
|
24
|
+
```js
|
|
25
|
+
import { ProductEngine } from 'spoko-design-system'
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
**2. Initialize tooltips (one-time setup):**
|
|
29
|
+
|
|
30
|
+
Create a tooltip script in your project:
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
// src/scripts/tooltips.ts
|
|
34
|
+
import 'spoko-design-system/scripts/tooltips';
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Then import it in your layout's `<head>`:
|
|
38
|
+
|
|
39
|
+
```astro
|
|
40
|
+
---
|
|
41
|
+
// In your layout file (e.g., HeadCommon.astro)
|
|
42
|
+
---
|
|
43
|
+
<head>
|
|
44
|
+
<script src="/src/scripts/tooltips.ts"></script>
|
|
45
|
+
</head>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
See [Tooltips documentation](/core/tooltips) for details.
|
|
49
|
+
|
|
50
|
+
### Basic Usage (New API Structure):
|
|
51
|
+
|
|
52
|
+
<div class="component-preview">
|
|
53
|
+
<div class="bg-white p-6 w-full flex gap-2">
|
|
54
|
+
<ProductEngine engine={{
|
|
55
|
+
code: "CAYA",
|
|
56
|
+
name: "1.6 TDI",
|
|
57
|
+
serie: { value: "EA189", label: "Seria silnika" },
|
|
58
|
+
power: { kw: 55, ps: 75, ps_label: "KM", label: "Moc" },
|
|
59
|
+
displacement: { value: 1598, label: "Pojemność" },
|
|
60
|
+
euro: { value: 5, label: "Norma" }
|
|
61
|
+
}} />
|
|
62
|
+
<ProductEngine engine={{
|
|
63
|
+
code: "CAYB",
|
|
64
|
+
name: "1.6 TDI",
|
|
65
|
+
serie: { value: "EA189", label: "Seria silnika" },
|
|
66
|
+
power: { kw: 66, ps: 90, ps_label: "KM", label: "Moc" },
|
|
67
|
+
displacement: { value: 1598, label: "Pojemność" },
|
|
68
|
+
euro: { value: 5, label: "Norma" }
|
|
69
|
+
}} />
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
```astro
|
|
74
|
+
---
|
|
75
|
+
import { ProductEngine } from 'spoko-design-system';
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
<!-- New API structure (with built-in translations) -->
|
|
79
|
+
<ProductEngine engine={{
|
|
80
|
+
code: 'CAYA',
|
|
81
|
+
name: '1.6 TDI',
|
|
82
|
+
serie: { value: 'EA189', label: 'Seria silnika' },
|
|
83
|
+
power: { kw: 55, ps: 75, ps_label: 'KM', label: 'Moc' },
|
|
84
|
+
displacement: { value: 1598, label: 'Pojemność' },
|
|
85
|
+
euro: { value: 5, label: 'Norma Euro' }
|
|
86
|
+
}} />
|
|
87
|
+
|
|
88
|
+
<!-- Old API structure (backward compatible) -->
|
|
89
|
+
<ProductEngine
|
|
90
|
+
engine={{ code: 'CAYA', name: '1.6 TDI', kw: 55, ps: 75, cc: 1598, serie: 3, euro: 5 }}
|
|
91
|
+
translations={{ power: 'Moc', cc: 'Pojemność', euro: 'Euro', horsepowerUnit: 'KM' }}
|
|
92
|
+
/>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### Special Engine Variants (Colored):
|
|
96
|
+
|
|
97
|
+
Engine codes for special editions are automatically color-coded:
|
|
98
|
+
|
|
99
|
+
<div class="component-preview">
|
|
100
|
+
<div class="bg-white p-6 w-full flex flex-wrap gap-3">
|
|
101
|
+
<div class="flex flex-col gap-1">
|
|
102
|
+
<small class="text-xs text-gray-500">GTI Engine (Red)</small>
|
|
103
|
+
<ProductEngine engine={{
|
|
104
|
+
code: "CAVE",
|
|
105
|
+
name: "1.4 TSI",
|
|
106
|
+
power: { kw: 132, ps: 180, ps_label: "KM", label: "Moc" },
|
|
107
|
+
displacement: { value: 1390, label: "Pojemność" },
|
|
108
|
+
euro: { value: 5, label: "Norma " }
|
|
109
|
+
}} />
|
|
110
|
+
</div>
|
|
111
|
+
<div class="flex flex-col gap-1">
|
|
112
|
+
<small class="text-xs text-gray-500">WRC Engine (Blue)</small>
|
|
113
|
+
<ProductEngine engine={{
|
|
114
|
+
code: "CDLJ",
|
|
115
|
+
name: "1.6 TDI",
|
|
116
|
+
power: { kw: 165, ps: 220, ps_label: "KM", label: "Moc" },
|
|
117
|
+
displacement: { value: 1598, label: "Pojemność" },
|
|
118
|
+
euro: { value: 6, label: "Norma " }
|
|
119
|
+
}} />
|
|
120
|
+
</div>
|
|
121
|
+
<div class="flex flex-col gap-1">
|
|
122
|
+
<small class="text-xs text-gray-500">Special Blue</small>
|
|
123
|
+
<ProductEngine engine={{
|
|
124
|
+
code: "CPTA",
|
|
125
|
+
name: "1.0 TSI",
|
|
126
|
+
power: { kw: 70, ps: 95, ps_label: "KM", label: "Moc" },
|
|
127
|
+
displacement: { value: 999, label: "Pojemność" },
|
|
128
|
+
euro: { value: 6, label: "Norma " }
|
|
129
|
+
}} />
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
```astro
|
|
135
|
+
<!-- GTI Engine - Red -->
|
|
136
|
+
<ProductEngine engine={{
|
|
137
|
+
code: 'CAVE',
|
|
138
|
+
name: '1.4 TSI',
|
|
139
|
+
power: { kw: 132, ps: 180, ps_label: 'KM', label: 'Moc' },
|
|
140
|
+
displacement: { value: 1390, label: 'Pojemność' },
|
|
141
|
+
euro: { value: 5, label: 'Norma ' }
|
|
142
|
+
}} />
|
|
143
|
+
|
|
144
|
+
<!-- WRC Engine - Blue -->
|
|
145
|
+
<ProductEngine engine={{
|
|
146
|
+
code: 'CDLJ',
|
|
147
|
+
name: '1.6 TDI',
|
|
148
|
+
power: { kw: 165, ps: 220, ps_label: 'KM', label: 'Moc' },
|
|
149
|
+
displacement: { value: 1598, label: 'Pojemność' },
|
|
150
|
+
euro: { value: 6, label: 'Norma ' }
|
|
151
|
+
}} />
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
## Engine List
|
|
155
|
+
|
|
156
|
+
Display multiple engine codes from an array (from API response).
|
|
157
|
+
|
|
158
|
+
### Import:
|
|
159
|
+
|
|
160
|
+
```js
|
|
161
|
+
import { ProductEngines } from 'spoko-design-system'
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
### Usage:
|
|
165
|
+
|
|
166
|
+
<div class="component-preview">
|
|
167
|
+
<div class="bg-white p-6 w-full">
|
|
168
|
+
<ProductEngines engines={[
|
|
169
|
+
{
|
|
170
|
+
id: 13,
|
|
171
|
+
code: "CAYA",
|
|
172
|
+
name: "1.6 TDI",
|
|
173
|
+
serie: { value: "EA189", label: "Seria silnika" },
|
|
174
|
+
power: { kw: 55, ps: 75, ps_label: "KM", label: "Moc" },
|
|
175
|
+
displacement: { value: 1598, label: "Pojemność" },
|
|
176
|
+
euro: { value: 5, label: "Norma " }
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
id: 14,
|
|
180
|
+
code: "CAYB",
|
|
181
|
+
name: "1.6 TDI",
|
|
182
|
+
serie: { value: "EA189", label: "Seria silnika" },
|
|
183
|
+
power: { kw: 66, ps: 90, ps_label: "KM", label: "Moc" },
|
|
184
|
+
displacement: { value: 1598, label: "Pojemność" },
|
|
185
|
+
euro: { value: 5, label: "Norma " }
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
id: 15,
|
|
189
|
+
code: "CAYC",
|
|
190
|
+
name: "1.6 TDI",
|
|
191
|
+
serie: { value: "EA189", label: "Seria silnika" },
|
|
192
|
+
power: { kw: 77, ps: 105, ps_label: "KM", label: "Moc" },
|
|
193
|
+
displacement: { value: 1598, label: "Pojemność" },
|
|
194
|
+
euro: { value: 5, label: "Norma " }
|
|
195
|
+
},
|
|
196
|
+
]} />
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
```astro
|
|
201
|
+
---
|
|
202
|
+
import { ProductEngines } from 'spoko-design-system';
|
|
203
|
+
---
|
|
204
|
+
|
|
205
|
+
<ProductEngines engines={[
|
|
206
|
+
{
|
|
207
|
+
id: 13,
|
|
208
|
+
code: 'CAYA',
|
|
209
|
+
name: '1.6 TDI',
|
|
210
|
+
serie: { value: 'EA189', label: 'Seria silnika' },
|
|
211
|
+
power: { kw: 55, ps: 75, ps_label: 'KM', label: 'Moc' },
|
|
212
|
+
displacement: { value: 1598, label: 'Pojemność' },
|
|
213
|
+
euro: { value: 5, label: 'Norma ' }
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
id: 14,
|
|
217
|
+
code: 'CAYB',
|
|
218
|
+
name: '1.6 TDI',
|
|
219
|
+
serie: { value: 'EA189', label: 'Seria silnika' },
|
|
220
|
+
power: { kw: 66, ps: 90, ps_label: 'KM', label: 'Moc' },
|
|
221
|
+
displacement: { value: 1598, label: 'Pojemność' },
|
|
222
|
+
euro: { value: 5, label: 'Norma ' }
|
|
223
|
+
}
|
|
224
|
+
]} />
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
### With API Data:
|
|
228
|
+
|
|
229
|
+
When using data from the API, pass the `part_engines` array directly. The component automatically extracts translations from the nested structure:
|
|
230
|
+
|
|
231
|
+
```astro
|
|
232
|
+
<ProductEngines
|
|
233
|
+
engines={product.part_engines}
|
|
234
|
+
isPdp={true}
|
|
235
|
+
/>
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
**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").
|
|
239
|
+
|
|
240
|
+
### API Response Structure:
|
|
241
|
+
|
|
242
|
+
```json
|
|
243
|
+
{
|
|
244
|
+
"part_engines": [
|
|
245
|
+
{
|
|
246
|
+
"id": 13,
|
|
247
|
+
"code": "CAYA",
|
|
248
|
+
"name": "1.6 TDI",
|
|
249
|
+
"info": null,
|
|
250
|
+
"serie": {
|
|
251
|
+
"value": "EA189",
|
|
252
|
+
"label": "Seria silnika"
|
|
253
|
+
},
|
|
254
|
+
"type": {
|
|
255
|
+
"value": "diesel",
|
|
256
|
+
"translated": "Diesel",
|
|
257
|
+
"label": "Typ paliwa"
|
|
258
|
+
},
|
|
259
|
+
"power": {
|
|
260
|
+
"kw": 55,
|
|
261
|
+
"ps": 75,
|
|
262
|
+
"ps_label": "KM",
|
|
263
|
+
"label": "Moc"
|
|
264
|
+
},
|
|
265
|
+
"date": {
|
|
266
|
+
"value": "03/2009–05/2010",
|
|
267
|
+
"label": "Data produkcji"
|
|
268
|
+
},
|
|
269
|
+
"displacement": {
|
|
270
|
+
"value": 1598,
|
|
271
|
+
"label": "Pojemność"
|
|
272
|
+
},
|
|
273
|
+
"compression_ratio": {
|
|
274
|
+
"value": "16,5:1",
|
|
275
|
+
"label": "Stopień sprężania"
|
|
276
|
+
},
|
|
277
|
+
"valves": {
|
|
278
|
+
"value": 16,
|
|
279
|
+
"label": "Zawory"
|
|
280
|
+
},
|
|
281
|
+
"euro": {
|
|
282
|
+
"value": 5,
|
|
283
|
+
"formatted": "Norma Euro 5",
|
|
284
|
+
"label": "Norma "
|
|
285
|
+
}
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
"id": 14,
|
|
289
|
+
"code": "CAYB",
|
|
290
|
+
"name": "1.6 TDI",
|
|
291
|
+
"info": null,
|
|
292
|
+
"serie": {
|
|
293
|
+
"value": "EA189",
|
|
294
|
+
"label": "Seria silnika"
|
|
295
|
+
},
|
|
296
|
+
"type": {
|
|
297
|
+
"value": "diesel",
|
|
298
|
+
"translated": "Diesel",
|
|
299
|
+
"label": "Typ paliwa"
|
|
300
|
+
},
|
|
301
|
+
"power": {
|
|
302
|
+
"kw": 66,
|
|
303
|
+
"ps": 90,
|
|
304
|
+
"ps_label": "KM",
|
|
305
|
+
"label": "Moc"
|
|
306
|
+
},
|
|
307
|
+
"date": {
|
|
308
|
+
"value": "03/2009–03/2014",
|
|
309
|
+
"label": "Data produkcji"
|
|
310
|
+
},
|
|
311
|
+
"displacement": {
|
|
312
|
+
"value": 1598,
|
|
313
|
+
"label": "Pojemność"
|
|
314
|
+
},
|
|
315
|
+
"compression_ratio": {
|
|
316
|
+
"value": "16,5:1",
|
|
317
|
+
"label": "Stopień sprężania"
|
|
318
|
+
},
|
|
319
|
+
"valves": {
|
|
320
|
+
"value": 16,
|
|
321
|
+
"label": "Zawory"
|
|
322
|
+
},
|
|
323
|
+
"euro": {
|
|
324
|
+
"value": 5,
|
|
325
|
+
"formatted": "Norma Euro 5",
|
|
326
|
+
"label": "Norma "
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
]
|
|
330
|
+
}
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
## Props
|
|
334
|
+
|
|
335
|
+
### ProductEngine Props:
|
|
336
|
+
|
|
337
|
+
| Prop | Type | Required | Default | Description |
|
|
338
|
+
|------|------|----------|---------|-------------|
|
|
339
|
+
| `engine` | `Object` | Yes | - | Engine object with nested structure from API |
|
|
340
|
+
| `engine.code` | `String` | Yes | - | Engine code (e.g., "CAYA") |
|
|
341
|
+
| `engine.name` | `String` | No | - | Engine name (e.g., "1.6 TDI") |
|
|
342
|
+
| `engine.info` | `String` | No | - | Additional info shown in header |
|
|
343
|
+
| `engine.serie` | `Object` | No | - | Engine series object |
|
|
344
|
+
| `engine.serie.value` | `String` | No | - | Series value (e.g., "EA189", "EA288") |
|
|
345
|
+
| `engine.serie.label` | `String` | No | - | Series label (e.g., "Seria silnika") |
|
|
346
|
+
| `engine.power` | `Object` | No | - | Power object with kw, ps, labels |
|
|
347
|
+
| `engine.power.kw` | `Number` | No | - | Power in kilowatts |
|
|
348
|
+
| `engine.power.ps` | `Number` | No | - | Power in horsepower |
|
|
349
|
+
| `engine.power.ps_label` | `String` | No | - | Unit label (e.g., "KM", "PS") |
|
|
350
|
+
| `engine.power.label` | `String` | No | - | Power label (e.g., "Moc") |
|
|
351
|
+
| `engine.displacement` | `Object` | No | - | Displacement object |
|
|
352
|
+
| `engine.displacement.value` | `Number` | No | - | Displacement in cm³ |
|
|
353
|
+
| `engine.displacement.label` | `String` | No | - | Label (e.g., "Pojemność") |
|
|
354
|
+
| `engine.euro` | `Object` | No | - | Euro standard object |
|
|
355
|
+
| `engine.euro.value` | `Number` | No | - | Euro standard number |
|
|
356
|
+
| `engine.euro.label` | `String` | No | - | Label (e.g., "Norma Euro") |
|
|
357
|
+
| `engine.euro.formatted` | `String` | No | - | Formatted string (e.g., "Norma Euro 5") |
|
|
358
|
+
| `showComma` | `Boolean` | No | `false` | Show comma after code (for lists) |
|
|
359
|
+
| `translations` | `Object` | No | API labels | Fallback translations (used only with old API) |
|
|
360
|
+
|
|
361
|
+
**Note**: The component supports both the new nested API structure (with built-in labels) and the old flat structure for backward compatibility.
|
|
362
|
+
|
|
363
|
+
### ProductEngines Props:
|
|
364
|
+
|
|
365
|
+
| Prop | Type | Required | Default | Description |
|
|
366
|
+
|------|------|----------|---------|-------------|
|
|
367
|
+
| `engines` | `Array<Object>` | Yes | `[]` | Array of engine objects (new nested structure) |
|
|
368
|
+
| `isPdp` | `Boolean` | No | `false` | Product detail page styling |
|
|
369
|
+
| `translations` | `Object` | No | API labels | Fallback translations (used only with old API) |
|
|
370
|
+
|
|
371
|
+
## Features
|
|
372
|
+
|
|
373
|
+
- ✅ **Rich Tooltips**: Shows detailed engine specifications on hover (Tippy.js delegation)
|
|
374
|
+
- ✅ **Performance Optimized**: One global script handles all tooltips efficiently
|
|
375
|
+
- ✅ **SEO-Friendly**: Engine codes rendered as static HTML (no hydration)
|
|
376
|
+
- ✅ **API-Driven Translations**: Labels and units come directly from API
|
|
377
|
+
- ✅ **Multi-language**: Supports Polish (KM), German (PS), English (HP)
|
|
378
|
+
- ✅ **Two-Tone Design**: Dark blue header with light body for better hierarchy
|
|
379
|
+
- ✅ **Semantic Colors**: Automatic color coding for special engines (GTI, WRC, etc.)
|
|
380
|
+
- ✅ **Clean Layout**: Flexbox-based design with semantic CSS classes
|
|
381
|
+
- ✅ **Smart Data**: Only shows relevant fields (power, displacement, euro)
|
|
382
|
+
- ✅ **Auto-sorting**: Engines automatically sorted alphabetically by code
|
|
383
|
+
- ✅ **Backward Compatible**: Works with both new and old API structures
|
|
384
|
+
- ✅ **Touch Friendly**: Works on mobile devices
|
|
385
|
+
|
|
386
|
+
## Engine Color Coding
|
|
387
|
+
|
|
388
|
+
Special engine codes are automatically color-coded:
|
|
389
|
+
|
|
390
|
+
| Engine Codes | Color | Description |
|
|
391
|
+
|--------------|-------|-------------|
|
|
392
|
+
| CAVE, CTHE, DAJA, DAYB | Red | GTI Performance engines |
|
|
393
|
+
| CDLJ | Blue | WRC/R Street engines |
|
|
394
|
+
| CPTA, CZEA | Light Blue | Special blue engines |
|
|
395
|
+
|
|
396
|
+
## Notes
|
|
397
|
+
|
|
398
|
+
- **Setup required**: Import `'spoko-design-system/scripts/tooltips'` once in your layout (see [Tooltips docs](/core/tooltips))
|
|
399
|
+
- Hover over any engine code to see full specifications in a detailed tooltip
|
|
400
|
+
- Tooltips use Tippy.js delegation pattern (one global handler for all tooltips)
|
|
401
|
+
- **Performance**: No client-side hydration needed - pure Astro components
|
|
402
|
+
- **New API structure**: Labels come from API (e.g., "Moc", "Pojemność", "KM")
|
|
403
|
+
- **No manual translations needed**: The API provides all labels and units
|
|
404
|
+
- The component automatically extracts series value from nested structure
|
|
405
|
+
- Date field is not shown in tooltips (only power, displacement, and euro)
|
|
406
|
+
- Missing data fields are gracefully hidden
|
|
407
|
+
- Commas between engine codes are automatically handled in lists
|
|
408
|
+
- **Backward compatible**: Still works with old flat API structure
|
|
409
|
+
- Tooltip has dark blue header (#001e50) with light gray body (#f3f4f6)
|
|
410
|
+
|
|
411
|
+
## Migration from Vue to Astro
|
|
412
|
+
|
|
413
|
+
If upgrading from the old Vue version:
|
|
414
|
+
|
|
415
|
+
1. **Remove `client:load`** directive from all ProductEngine/ProductEngines usage
|
|
416
|
+
2. **Set up tooltips** in your layout (see [Tooltips documentation](/core/tooltips))
|
|
417
|
+
3. **Update imports** to use Astro components (automatically handled by package exports)
|
|
418
|
+
4. **No other changes needed** - props and API structure remain the same
|