spoko-design-system 1.19.0 → 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 (92) 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 -456
  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/pages/components/badges.mdx +57 -57
  48. package/src/pages/components/breadcrumbs.mdx +139 -139
  49. package/src/pages/components/buttons.mdx +359 -359
  50. package/src/pages/components/card.mdx +294 -294
  51. package/src/pages/components/carousel.mdx +62 -62
  52. package/src/pages/components/copyright.mdx +42 -42
  53. package/src/pages/components/details-list.mdx +207 -207
  54. package/src/pages/components/features-list.mdx +37 -37
  55. package/src/pages/components/flags.mdx +49 -49
  56. package/src/pages/components/fuck-russia.mdx +39 -39
  57. package/src/pages/components/hand-drive.mdx +78 -78
  58. package/src/pages/components/headline.mdx +337 -337
  59. package/src/pages/components/image.mdx +513 -513
  60. package/src/pages/components/input.mdx +367 -367
  61. package/src/pages/components/jumbotron.mdx +530 -530
  62. package/src/pages/components/modal.mdx +212 -212
  63. package/src/pages/components/post-header.mdx +64 -64
  64. package/src/pages/components/pr-code.mdx +213 -213
  65. package/src/pages/components/product-engine.mdx +418 -418
  66. package/src/pages/components/product-number.mdx +58 -58
  67. package/src/pages/components/product-tile.mdx +51 -51
  68. package/src/pages/components/quote.mdx +33 -33
  69. package/src/pages/components/slimbanner.mdx +260 -260
  70. package/src/pages/components/table.mdx +108 -108
  71. package/src/pages/core/colors.mdx +21 -21
  72. package/src/pages/core/grid.mdx +193 -193
  73. package/src/pages/core/introduction.mdx +77 -77
  74. package/src/pages/core/tooltips.mdx +491 -491
  75. package/src/pages/patterns/introduction.mdx +60 -60
  76. package/src/styles/_variables.scss +70 -70
  77. package/tailwind.config.cjs +8 -8
  78. package/tsconfig.json +28 -28
  79. package/uno-config/index.ts +269 -269
  80. package/uno-config/theme/breakpoints.ts +9 -9
  81. package/uno-config/theme/colors.ts +65 -65
  82. package/uno-config/theme/dimensions.ts +17 -17
  83. package/uno-config/theme/effects.ts +14 -14
  84. package/uno-config/theme/grid.ts +10 -10
  85. package/uno-config/theme/index.ts +26 -26
  86. package/uno-config/theme/shortcuts/buttons.ts +53 -53
  87. package/uno-config/theme/shortcuts/components.ts +124 -124
  88. package/uno-config/theme/shortcuts/index.ts +20 -20
  89. package/uno-config/theme/shortcuts/jumbotron.ts +71 -71
  90. package/uno-config/theme/shortcuts/layout.ts +75 -75
  91. package/uno-config/theme/typography.ts +29 -29
  92. 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
+ ```