spoko-design-system 1.3.2 → 1.3.4

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.
Files changed (46) hide show
  1. package/.github/workflows/claude.yml +1 -1
  2. package/.prettierrc +1 -0
  3. package/CHANGELOG.md +12 -0
  4. package/package.json +15 -15
  5. package/src/components/Breadcrumbs.vue +8 -5
  6. package/src/components/ButtonCopy.astro +7 -2
  7. package/src/components/Card.astro +4 -1
  8. package/src/components/Category/CategoriesCarousel.astro +8 -2
  9. package/src/components/Category/CategoryDetails.astro +29 -9
  10. package/src/components/Category/CategoryTile.astro +11 -2
  11. package/src/components/Category/CategoryViewToggler.astro +8 -2
  12. package/src/components/Date.astro +4 -1
  13. package/src/components/FaqItem.astro +14 -3
  14. package/src/components/HandDrive.astro +5 -1
  15. package/src/components/Header/Header.astro +14 -3
  16. package/src/components/Header/SkipToContent.astro +5 -1
  17. package/src/components/Input.vue +3 -2
  18. package/src/components/Jumbotron/index.astro +37 -7
  19. package/src/components/Jumbotron/variants/Default.astro +4 -1
  20. package/src/components/Jumbotron/variants/Hero.astro +9 -2
  21. package/src/components/Jumbotron/variants/Post.astro +13 -3
  22. package/src/components/Jumbotron/variants/PostSplit.astro +13 -3
  23. package/src/components/Jumbotron.astro +12 -3
  24. package/src/components/LanguageSuggestion.astro +4 -1
  25. package/src/components/MainInput.vue +3 -2
  26. package/src/components/Modal.astro +9 -2
  27. package/src/components/PageContent.astro +4 -1
  28. package/src/components/PostHeader.astro +13 -3
  29. package/src/components/Product/ProductDetails.vue +2 -2
  30. package/src/components/Product/ProductLink.astro +17 -4
  31. package/src/components/Product/ProductLink.vue +3 -3
  32. package/src/components/Product/ProductLinkInfo.astro +12 -3
  33. package/src/components/Product/ProductModel.vue +2 -3
  34. package/src/components/Product/ProductNumber.astro +23 -5
  35. package/src/components/ProductDetailsList.vue +14 -6
  36. package/src/components/ProductTile.astro +13 -3
  37. package/src/components/ReloadPrompt.astro +5 -1
  38. package/src/components/SlimBanner.vue +6 -4
  39. package/src/components/layout/CallToAction.astro +4 -1
  40. package/src/components/layout/Header.astro +12 -2
  41. package/src/layouts/Layout.astro +9 -2
  42. package/src/layouts/MainLayout.astro +17 -4
  43. package/src/layouts/partials/HeadCommon.astro +24 -7
  44. package/src/layouts/partials/HeadSEO.astro +44 -11
  45. package/src/pages/components/icons.astro +4 -1
  46. package/src/pages/index.astro +58 -14
package/src/pages/index.astro CHANGED
@@ -59,8 +59,16 @@ const navItems = [
59
59
  title={description}
60
60
  class="flex w-full flex-wrap bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 md:(flex-col w-auto flex-nowrap text-center py-16)"
61
61
  >
62
- <Headline as="h2" textSize="2xl" underline={false}>
63
- <Icon name={icon} aria-hidden="true" class="text-blue-400 mr-2 text-4xl" />
62
+ <Headline
63
+ as="h2"
64
+ textSize="2xl"
65
+ underline={false}
66
+ >
67
+ <Icon
68
+ name={icon}
69
+ aria-hidden="true"
70
+ class="text-blue-400 mr-2 text-4xl"
71
+ />
64
72
  {title}
65
73
  </Headline>
66
74
  <p class="text-slate-500 w-full">{description}</p>
@@ -73,7 +81,12 @@ const navItems = [
73
81
  <!-- Features Section -->
74
82
  <section class="py-16 px-4 max-w-5xl mx-auto">
75
83
  <div class="text-center mb-12">
76
- <Headline as="h2" textSize="3xl" underline="center" class="text-gray-900 mb-6">
84
+ <Headline
85
+ as="h2"
86
+ textSize="3xl"
87
+ underline="center"
88
+ class="text-gray-900 mb-6"
89
+ >
77
90
  Why Spoko Design System?
78
91
  </Headline>
79
92
  <p class="text-lg text-gray-600 max-w-2xl mx-auto">
@@ -102,7 +115,8 @@ const navItems = [
102
115
  href="https://astro.build/"
103
116
  target="_blank"
104
117
  rel="noopener noreferrer"
105
- class="text-blue-600 hover:text-blue-800 underline transition-colors">Astro</a
118
+ class="text-blue-600 hover:text-blue-800 underline transition-colors"
119
+ >Astro</a
106
120
  > for lightning-fast performance and seamless integration with modern frameworks.
107
121
  </p>
108
122
  </div>
@@ -146,7 +160,8 @@ const navItems = [
146
160
  href="https://unocss.dev/"
147
161
  target="_blank"
148
162
  rel="noopener noreferrer"
149
- class="text-blue-600 hover:text-blue-800 underline transition-colors">UnoCSS</a
163
+ class="text-blue-600 hover:text-blue-800 underline transition-colors"
164
+ >UnoCSS</a
150
165
  > for flexible, maintainable styling and consistent design tokens.
151
166
  </p>
152
167
  </div>
@@ -170,7 +185,8 @@ const navItems = [
170
185
  href="https://vuejs.org/"
171
186
  target="_blank"
172
187
  rel="noopener noreferrer"
173
- class="text-blue-600 hover:text-blue-800 underline transition-colors">Vue 3</a
188
+ class="text-blue-600 hover:text-blue-800 underline transition-colors"
189
+ >Vue 3</a
174
190
  > component integration with TypeScript support for interactive elements.
175
191
  </p>
176
192
  </div>
@@ -233,7 +249,12 @@ const navItems = [
233
249
  <div class="grid lg:grid-cols-2 gap-8 md:gap-12">
234
250
  <!-- Download Section -->
235
251
  <div class="text-center">
236
- <Headline underline as="h2" class="text-gray-900 mb-8" textSize="3xl">
252
+ <Headline
253
+ underline
254
+ as="h2"
255
+ class="text-gray-900 mb-8"
256
+ textSize="3xl"
257
+ >
237
258
  <Icon
238
259
  name="streamline-freehand-color:archive-box"
239
260
  aria-hidden="true"
@@ -262,7 +283,10 @@ const navItems = [
262
283
  rel="noopener noreferrer"
263
284
  class="flex items-center gap-3 bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg transition-colors"
264
285
  >
265
- <Icon name="vscode-icons:file-type-npm" class="text-3xl" />
286
+ <Icon
287
+ name="vscode-icons:file-type-npm"
288
+ class="text-3xl"
289
+ />
266
290
  <span class="font-semibold">npm Package</span>
267
291
  </a>
268
292
  <a
@@ -271,7 +295,10 @@ const navItems = [
271
295
  rel="noopener noreferrer"
272
296
  class="flex items-center gap-3 bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 rounded-lg transition-colors"
273
297
  >
274
- <Icon name="mdi:github" class="text-2xl" />
298
+ <Icon
299
+ name="mdi:github"
300
+ class="text-2xl"
301
+ />
275
302
  <span class="font-semibold">Source Code</span>
276
303
  </a>
277
304
  </div>
@@ -283,7 +310,12 @@ const navItems = [
283
310
 
284
311
  <!-- Examples Section -->
285
312
  <div class="text-center">
286
- <Headline underline as="h2" class="text-gray-900 mb-8" textSize="3xl">
313
+ <Headline
314
+ underline
315
+ as="h2"
316
+ class="text-gray-900 mb-8"
317
+ textSize="3xl"
318
+ >
287
319
  <Icon
288
320
  name="streamline-freehand-color:coding-files-network-folder"
289
321
  aria-hidden="true"
@@ -306,7 +338,10 @@ const navItems = [
306
338
  </h4>
307
339
  <p class="text-sm text-gray-600">Car parts catalog</p>
308
340
  </div>
309
- <Icon name="lucide:link" class="text-gray-400 group-hover:text-blue-400" />
341
+ <Icon
342
+ name="lucide:link"
343
+ class="text-gray-400 group-hover:text-blue-400"
344
+ />
310
345
  </a>
311
346
 
312
347
  <a
@@ -319,7 +354,10 @@ const navItems = [
319
354
  <h4 class="font-semibold text-gray-900 group-hover:text-blue-600">polo.blue</h4>
320
355
  <p class="text-sm text-gray-600">Polo 6R DIY workshop & guides</p>
321
356
  </div>
322
- <Icon name="lucide:link" class="text-gray-400 group-hover:text-blue-400" />
357
+ <Icon
358
+ name="lucide:link"
359
+ class="text-gray-400 group-hover:text-blue-400"
360
+ />
323
361
  </a>
324
362
 
325
363
  <a
@@ -334,7 +372,10 @@ const navItems = [
334
372
  </h4>
335
373
  <p class="text-sm text-gray-600">Used car parts marketplace</p>
336
374
  </div>
337
- <Icon name="lucide:link" class="text-gray-400 group-hover:text-blue-400" />
375
+ <Icon
376
+ name="lucide:link"
377
+ class="text-gray-400 group-hover:text-blue-400"
378
+ />
338
379
  </a>
339
380
 
340
381
  <a
@@ -347,7 +388,10 @@ const navItems = [
347
388
  <h4 class="font-semibold text-gray-900 group-hover:text-blue-600">polo6r.pl</h4>
348
389
  <p class="text-sm text-gray-600">Polo V Manual</p>
349
390
  </div>
350
- <Icon name="lucide:link" class="text-gray-400 group-hover:text-blue-400" />
391
+ <Icon
392
+ name="lucide:link"
393
+ class="text-gray-400 group-hover:text-blue-400"
394
+ />
351
395
  </a>
352
396
  </div>
353
397