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.
Files changed (94) hide show
  1. package/.claude/settings.json +48 -48
  2. package/.github/dependabot.yml +11 -11
  3. package/.github/todo.yml +3 -3
  4. package/.github/workflows/claude.yml +37 -37
  5. package/.github/workflows/code-quality.yml +72 -72
  6. package/.github/workflows/deploy.yml +43 -43
  7. package/.husky/README.md +41 -41
  8. package/.husky/commit-msg +1 -1
  9. package/.husky/pre-commit +40 -40
  10. package/.prettierignore +14 -14
  11. package/.prettierrc +30 -30
  12. package/.stackblitzrc +5 -5
  13. package/.vscode/extensions.json +4 -4
  14. package/.vscode/launch.json +11 -11
  15. package/.vscode/settings.json +21 -21
  16. package/CHANGELOG.md +462 -450
  17. package/CLAUDE.md +268 -268
  18. package/LICENSE +21 -21
  19. package/README.md +303 -132
  20. package/TOOLTIPS.md +236 -236
  21. package/astro.config.mjs +84 -84
  22. package/commitlint.config.js +3 -3
  23. package/dev-dist/sw.js +91 -91
  24. package/dev-dist/workbox-c676b6d3.js +3391 -3391
  25. package/eslint.config.js +70 -70
  26. package/icon.config.ts +348 -348
  27. package/index.ts +78 -78
  28. package/package.json +160 -160
  29. package/public/arrow-bottom.svg +7 -7
  30. package/public/fonts/lg.svg +53 -53
  31. package/public/fonts/vwhead-bold-demo.html +549 -549
  32. package/public/fonts/vwhead-regular-demo.html +549 -549
  33. package/public/fonts/vwtext-bold-demo.html +549 -549
  34. package/public/fonts/vwtext-regular-demo.html +549 -549
  35. package/public/github.svg +3 -3
  36. package/public/grid_dot.svg +4 -4
  37. package/public/linkedin.svg +44 -44
  38. package/public/make-scrollable-code-focusable.js +3 -3
  39. package/public/pagefind.yml +3 -3
  40. package/public/polo.blue.svg +29 -29
  41. package/public/spoko.space.svg +71 -71
  42. package/public/twitter.svg +46 -46
  43. package/renovate.json +6 -6
  44. package/sandbox.config.json +11 -11
  45. package/sonar-project.properties +26 -26
  46. package/src/components/Category/CategoryDetails.astro +46 -18
  47. package/src/components/Jumbotron/variants/Hero.astro +9 -1
  48. package/src/components/Jumbotron/variants/PostSplit.astro +8 -0
  49. package/src/pages/components/badges.mdx +57 -57
  50. package/src/pages/components/breadcrumbs.mdx +139 -139
  51. package/src/pages/components/buttons.mdx +359 -359
  52. package/src/pages/components/card.mdx +294 -294
  53. package/src/pages/components/carousel.mdx +62 -62
  54. package/src/pages/components/copyright.mdx +42 -42
  55. package/src/pages/components/details-list.mdx +207 -207
  56. package/src/pages/components/features-list.mdx +37 -37
  57. package/src/pages/components/flags.mdx +49 -49
  58. package/src/pages/components/fuck-russia.mdx +39 -39
  59. package/src/pages/components/hand-drive.mdx +78 -78
  60. package/src/pages/components/headline.mdx +337 -337
  61. package/src/pages/components/image.mdx +513 -513
  62. package/src/pages/components/input.mdx +367 -367
  63. package/src/pages/components/jumbotron.mdx +530 -530
  64. package/src/pages/components/modal.mdx +212 -212
  65. package/src/pages/components/post-header.mdx +64 -64
  66. package/src/pages/components/pr-code.mdx +213 -213
  67. package/src/pages/components/product-engine.mdx +418 -418
  68. package/src/pages/components/product-number.mdx +58 -58
  69. package/src/pages/components/product-tile.mdx +51 -51
  70. package/src/pages/components/quote.mdx +33 -33
  71. package/src/pages/components/slimbanner.mdx +260 -260
  72. package/src/pages/components/table.mdx +108 -108
  73. package/src/pages/core/colors.mdx +21 -21
  74. package/src/pages/core/grid.mdx +193 -193
  75. package/src/pages/core/introduction.mdx +77 -77
  76. package/src/pages/core/tooltips.mdx +491 -491
  77. package/src/pages/patterns/introduction.mdx +60 -60
  78. package/src/styles/_variables.scss +70 -70
  79. package/tailwind.config.cjs +8 -8
  80. package/tsconfig.json +28 -28
  81. package/uno-config/index.ts +269 -269
  82. package/uno-config/theme/breakpoints.ts +9 -9
  83. package/uno-config/theme/colors.ts +65 -65
  84. package/uno-config/theme/dimensions.ts +17 -17
  85. package/uno-config/theme/effects.ts +14 -14
  86. package/uno-config/theme/grid.ts +10 -10
  87. package/uno-config/theme/index.ts +26 -26
  88. package/uno-config/theme/shortcuts/buttons.ts +53 -53
  89. package/uno-config/theme/shortcuts/components.ts +124 -124
  90. package/uno-config/theme/shortcuts/index.ts +20 -20
  91. package/uno-config/theme/shortcuts/jumbotron.ts +71 -71
  92. package/uno-config/theme/shortcuts/layout.ts +75 -75
  93. package/uno-config/theme/typography.ts +29 -29
  94. package/uno.config.ts +2 -2
package/src/pages/components/product-number.mdx CHANGED
@@ -1,59 +1,59 @@
1
- ---
2
- title: "ProductNumber"
3
- layout: "../../layouts/MainLayout.astro"
4
- productNumbers:
5
- - "6R0920870F"
6
- - "000051443F"
7
- - "WHT005227"
8
- - "N0385491"
9
- ---
10
- import ProductNumber from '../../components/Product/ProductNumber.astro'
11
-
12
- # ProductNumber
13
-
14
- ProductNumber - with additional formatting adding spacing for Volkswagen product numbers + additional copy button for easier copying.
15
-
16
- #
17
- <div class="component-preview">
18
- <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-4 w-full bg-white p-y-5 px-4">
19
- {frontmatter.productNumbers.map((number, index) => (
20
- <ProductNumber
21
- big={index === 0 || index === 1}
22
- isPdp={index >= 1}
23
- productNumber={number}
24
- class="mb-2"
25
- />
26
- ))}
27
- </div>
28
- </div>
29
-
30
- ```js
31
- <ProductNumber
32
- small
33
- productNumber="6R0920870F"
34
- class="mb-2"
35
- />
36
- ```
37
-
38
- <div class="component-preview">
39
- <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-4 w-full bg-white p-y-5 px-4">
40
- {frontmatter.productNumbers.map((number, index) => (
41
- <ProductNumber
42
- big
43
- productNumber={number}
44
- class="mb-2"
45
- />
46
- ))}
47
- </div>
48
- </div>
49
-
50
- <div class="component-preview">
51
- <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-4 w-full bg-white p-y-5 px-4">
52
- {frontmatter.productNumbers.map((number, index) => (
53
- <ProductNumber
54
- productNumber={number}
55
- class="mb-2"
56
- />
57
- ))}
58
- </div>
1
+ ---
2
+ title: "ProductNumber"
3
+ layout: "../../layouts/MainLayout.astro"
4
+ productNumbers:
5
+ - "6R0920870F"
6
+ - "000051443F"
7
+ - "WHT005227"
8
+ - "N0385491"
9
+ ---
10
+ import ProductNumber from '../../components/Product/ProductNumber.astro'
11
+
12
+ # ProductNumber
13
+
14
+ ProductNumber - with additional formatting adding spacing for Volkswagen product numbers + additional copy button for easier copying.
15
+
16
+ #
17
+ <div class="component-preview">
18
+ <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-4 w-full bg-white p-y-5 px-4">
19
+ {frontmatter.productNumbers.map((number, index) => (
20
+ <ProductNumber
21
+ big={index === 0 || index === 1}
22
+ isPdp={index >= 1}
23
+ productNumber={number}
24
+ class="mb-2"
25
+ />
26
+ ))}
27
+ </div>
28
+ </div>
29
+
30
+ ```js
31
+ <ProductNumber
32
+ small
33
+ productNumber="6R0920870F"
34
+ class="mb-2"
35
+ />
36
+ ```
37
+
38
+ <div class="component-preview">
39
+ <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-4 w-full bg-white p-y-5 px-4">
40
+ {frontmatter.productNumbers.map((number, index) => (
41
+ <ProductNumber
42
+ big
43
+ productNumber={number}
44
+ class="mb-2"
45
+ />
46
+ ))}
47
+ </div>
48
+ </div>
49
+
50
+ <div class="component-preview">
51
+ <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-4 w-full bg-white p-y-5 px-4">
52
+ {frontmatter.productNumbers.map((number, index) => (
53
+ <ProductNumber
54
+ productNumber={number}
55
+ class="mb-2"
56
+ />
57
+ ))}
58
+ </div>
59
59
  </div>
package/src/pages/components/product-tile.mdx CHANGED
@@ -1,51 +1,51 @@
1
- ---
2
- title: "ProductTile"
3
- layout: "../../layouts/MainLayout.astro"
4
- ---
5
- import ProductTile from '../../components/ProductTile.astro'
6
-
7
- export const productObject = {
8
- name: 'Combi-instrument MFA+',
9
- url: 'https://google.com',
10
- number: '6R0920870F',
11
- photo: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337'
12
- }
13
-
14
- # ProductTile
15
-
16
- ProductTile - product link component which can be used for carousels, section with related products, recently added etc.
17
-
18
- It requires a container with a specific width - it's best to set it directly in the carousel's `<swiper-slide>` tag.
19
- #
20
-
21
- <div class="component-preview">
22
- <div class="flex flex-wrap bg-white w-full p-4 pb-0">
23
-
24
- <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
25
- <ProductTile productObject={productObject} />
26
- </div>
27
- <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
28
- <ProductTile productObject={productObject} />
29
- </div>
30
- <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
31
- <ProductTile productObject={productObject} />
32
- </div>
33
- <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
34
- <ProductTile productObject={productObject} />
35
- </div>
36
- <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
37
- <ProductTile productObject={productObject} />
38
- </div>
39
- </div>
40
- </div>
41
-
42
- ```js
43
- export const productObject = {
44
- name: 'Combi-instrument MFA+',
45
- url: 'https://google.com',
46
- number: '6R0920870F',
47
- photo: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337'
48
- }
49
-
50
- <ProductTile productObject={productObject} />
51
- ```
1
+ ---
2
+ title: "ProductTile"
3
+ layout: "../../layouts/MainLayout.astro"
4
+ ---
5
+ import ProductTile from '../../components/ProductTile.astro'
6
+
7
+ export const productObject = {
8
+ name: 'Combi-instrument MFA+',
9
+ url: 'https://google.com',
10
+ number: '6R0920870F',
11
+ photo: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337'
12
+ }
13
+
14
+ # ProductTile
15
+
16
+ ProductTile - product link component which can be used for carousels, section with related products, recently added etc.
17
+
18
+ It requires a container with a specific width - it's best to set it directly in the carousel's `<swiper-slide>` tag.
19
+ #
20
+
21
+ <div class="component-preview">
22
+ <div class="flex flex-wrap bg-white w-full p-4 pb-0">
23
+
24
+ <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
25
+ <ProductTile productObject={productObject} />
26
+ </div>
27
+ <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
28
+ <ProductTile productObject={productObject} />
29
+ </div>
30
+ <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
31
+ <ProductTile productObject={productObject} />
32
+ </div>
33
+ <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
34
+ <ProductTile productObject={productObject} />
35
+ </div>
36
+ <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
37
+ <ProductTile productObject={productObject} />
38
+ </div>
39
+ </div>
40
+ </div>
41
+
42
+ ```js
43
+ export const productObject = {
44
+ name: 'Combi-instrument MFA+',
45
+ url: 'https://google.com',
46
+ number: '6R0920870F',
47
+ photo: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337'
48
+ }
49
+
50
+ <ProductTile productObject={productObject} />
51
+ ```
package/src/pages/components/quote.mdx CHANGED
@@ -1,33 +1,33 @@
1
- ---
2
- title: "Quote"
3
- layout: "../../layouts/MainLayout.astro"
4
-
5
- ---
6
-
7
- import Quote from '../../components/Quote.vue'
8
-
9
-
10
- # Quote
11
-
12
- Simple Quote component with left border in primary color.
13
-
14
- <div class="component-preview">
15
- <Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
16
- </div>
17
-
18
-
19
- ```html
20
- <Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
21
- ```
22
-
23
- #
24
-
25
-
26
- <div class="component-preview">
27
- <Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
28
- </div>
29
-
30
-
31
- ```html
32
- <Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
33
- ```
1
+ ---
2
+ title: "Quote"
3
+ layout: "../../layouts/MainLayout.astro"
4
+
5
+ ---
6
+
7
+ import Quote from '../../components/Quote.vue'
8
+
9
+
10
+ # Quote
11
+
12
+ Simple Quote component with left border in primary color.
13
+
14
+ <div class="component-preview">
15
+ <Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
16
+ </div>
17
+
18
+
19
+ ```html
20
+ <Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
21
+ ```
22
+
23
+ #
24
+
25
+
26
+ <div class="component-preview">
27
+ <Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
28
+ </div>
29
+
30
+
31
+ ```html
32
+ <Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
33
+ ```