spoko-design-system 0.2.48 → 0.2.50

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 (154) hide show
  1. package/.github/dependabot.yml +11 -11
  2. package/.github/todo.yml +3 -3
  3. package/.github/workflows/deploy.yml +39 -39
  4. package/.stackblitzrc +5 -5
  5. package/.vscode/extensions.json +5 -5
  6. package/.vscode/launch.json +11 -11
  7. package/.vscode/settings.json +5 -5
  8. package/LICENSE +21 -21
  9. package/README.md +113 -113
  10. package/astro-i18next.config.mjs +17 -17
  11. package/astro-i18next.config.ts +10 -10
  12. package/astro.config.mjs +147 -147
  13. package/dev-dist/sw.js +91 -91
  14. package/dev-dist/workbox-c676b6d3.js +3391 -3391
  15. package/index.ts +63 -61
  16. package/package.json +109 -109
  17. package/public/fonts/lg.svg +53 -53
  18. package/public/fonts/vwhead-bold-demo.html +549 -549
  19. package/public/fonts/vwhead-regular-demo.html +549 -549
  20. package/public/fonts/vwtext-bold-demo.html +549 -549
  21. package/public/fonts/vwtext-regular-demo.html +549 -549
  22. package/public/github.svg +3 -3
  23. package/public/grid_dot.svg +4 -4
  24. package/public/linkedin.svg +44 -44
  25. package/public/locales/en/translation.json +8 -8
  26. package/public/locales/pl/translation.json +8 -8
  27. package/public/make-scrollable-code-focusable.js +3 -3
  28. package/public/pagefind.yml +3 -3
  29. package/public/polo.blue.svg +29 -29
  30. package/public/spoko.space.svg +71 -71
  31. package/public/twitter.svg +46 -46
  32. package/renovate.json +6 -6
  33. package/sandbox.config.json +11 -11
  34. package/src/MyComponent.astro +8 -8
  35. package/src/components/Badge.vue +19 -19
  36. package/src/components/Badges.vue +21 -21
  37. package/src/components/Breadcrumbs.vue +107 -107
  38. package/src/components/Button.vue +55 -55
  39. package/src/components/ButtonCopy.vue +36 -47
  40. package/src/components/Card.astro +27 -27
  41. package/src/components/Carousel.astro +26 -26
  42. package/src/components/Category/CategoriesCarousel.astro +101 -101
  43. package/src/components/Category/CategoriesSidebar.astro +186 -186
  44. package/src/components/Category/CategoryDetails.astro +82 -82
  45. package/src/components/Category/CategoryLink.vue +23 -23
  46. package/src/components/Category/CategorySection.astro +69 -69
  47. package/src/components/Category/CategorySidebarToggler.vue +9 -9
  48. package/src/components/Category/CategoryTile.astro +42 -42
  49. package/src/components/Category/SubCategoryLink.vue +29 -29
  50. package/src/components/CategoryLink.astro +18 -18
  51. package/src/components/Copyright.astro +12 -12
  52. package/src/components/Date.astro +7 -7
  53. package/src/components/Faq.astro +33 -33
  54. package/src/components/FaqItem.astro +96 -96
  55. package/src/components/FeaturesList.vue +41 -41
  56. package/src/components/FuckRussia.vue +62 -62
  57. package/src/components/HandDrive.astro +29 -29
  58. package/src/components/Header/Header.astro +210 -210
  59. package/src/components/Header/SkipToContent.astro +1 -1
  60. package/src/components/Headline.vue +48 -48
  61. package/src/components/Image.astro +30 -30
  62. package/src/components/Jumbatron.vue +40 -40
  63. package/src/components/LeftSidebar.astro +53 -53
  64. package/src/components/MainColors.vue +23 -23
  65. package/src/components/MainInput.vue +15 -15
  66. package/src/components/Modal.astro +27 -27
  67. package/src/components/PageContent.astro +5 -5
  68. package/src/components/PartNumber.vue +27 -27
  69. package/src/components/PostHeader.astro +103 -103
  70. package/src/components/PrCode.vue +141 -141
  71. package/src/components/Product/ProductButton.vue +18 -18
  72. package/src/components/Product/ProductCodes.vue +174 -174
  73. package/src/components/Product/ProductEngineType.vue +42 -42
  74. package/src/components/Product/ProductImage.astro +41 -41
  75. package/src/components/Product/ProductLinkInfo.astro +37 -37
  76. package/src/components/Product/ProductNumber.astro +61 -105
  77. package/src/components/ProductCarousel.astro +38 -38
  78. package/src/components/ProductCodes.vue +39 -39
  79. package/src/components/ProductDetailName.vue +52 -52
  80. package/src/components/ProductDetailsList.vue +65 -65
  81. package/src/components/ProductTile.astro +48 -48
  82. package/src/components/Quote.vue +23 -23
  83. package/src/components/ReloadPrompt.astro +50 -50
  84. package/src/components/SlimBanner.vue +72 -72
  85. package/src/components/Table.vue +32 -32
  86. package/src/components/TableOfContents.astro +15 -15
  87. package/src/components/Translations.vue +23 -23
  88. package/src/components/flags/FlagPL.vue +3 -3
  89. package/src/components/flags/FlagUA.vue +2 -2
  90. package/src/components/layout/Container.astro +7 -7
  91. package/src/components/layout/Header.astro +80 -80
  92. package/src/config.ts +56 -56
  93. package/src/design.config.ts +81 -81
  94. package/src/env.d.ts +1 -1
  95. package/src/layouts/Layout.astro +60 -60
  96. package/src/layouts/MainLayout.astro +81 -81
  97. package/src/layouts/partials/FooterCommon.astro +4 -4
  98. package/src/layouts/partials/HeadCommon.astro +44 -44
  99. package/src/layouts/partials/HeadSEO.astro +41 -41
  100. package/src/pages/components/badges.mdx +57 -57
  101. package/src/pages/components/breadcrumbs.mdx +139 -139
  102. package/src/pages/components/buttons.mdx +236 -236
  103. package/src/pages/components/card.mdx +294 -294
  104. package/src/pages/components/carousel.mdx +62 -62
  105. package/src/pages/components/copyright.mdx +42 -42
  106. package/src/pages/components/details-list.mdx +115 -115
  107. package/src/pages/components/features-list.mdx +37 -37
  108. package/src/pages/components/flags.mdx +49 -49
  109. package/src/pages/components/fuck-russia.mdx +39 -39
  110. package/src/pages/components/hand-drive.mdx +38 -38
  111. package/src/pages/components/headline.mdx +152 -152
  112. package/src/pages/components/icons.astro +48 -48
  113. package/src/pages/components/image.mdx +513 -513
  114. package/src/pages/components/input.mdx +45 -45
  115. package/src/pages/components/jumbatron.mdx +95 -95
  116. package/src/pages/components/modal.mdx +64 -64
  117. package/src/pages/components/post-header.mdx +60 -60
  118. package/src/pages/components/pr-code.mdx +65 -65
  119. package/src/pages/components/product-number.mdx +59 -66
  120. package/src/pages/components/product-tile.mdx +51 -51
  121. package/src/pages/components/quote.mdx +33 -33
  122. package/src/pages/components/slimbanner.mdx +35 -35
  123. package/src/pages/components/table.mdx +108 -108
  124. package/src/pages/core/colors.mdx +10 -10
  125. package/src/pages/core/grid.mdx +89 -89
  126. package/src/pages/core/introduction.mdx +77 -77
  127. package/src/pages/core/shadows.astro +20 -20
  128. package/src/pages/core/typography.astro +47 -47
  129. package/src/pages/index.astro +126 -126
  130. package/src/pages/patterns/introduction.mdx +60 -60
  131. package/src/pwa.ts +12 -12
  132. package/src/styles/_variables.scss +70 -70
  133. package/src/styles/base/base.css +184 -184
  134. package/src/styles/base/grid.css +92 -92
  135. package/src/styles/base/typography.css +70 -70
  136. package/src/styles/content.css +73 -73
  137. package/src/styles/main.css +7 -7
  138. package/src/types/Product.ts +31 -31
  139. package/src/types/astro.d.ts +3 -3
  140. package/src/utils/product/getPriceFormatted.ts +15 -15
  141. package/src/utils/product/getProductChecklist.ts +17 -17
  142. package/src/utils/product/useFormatProductNumber.ts +42 -0
  143. package/src/utils/seo/getShorterDescription.ts +14 -14
  144. package/src/utils/text/formatDate.ts +5 -5
  145. package/src/utils/text/formatLocaleNumber.ts +6 -6
  146. package/src/utils/text/formatPad.ts +12 -12
  147. package/src/utils/text/getNumberFormatted.ts +33 -33
  148. package/src/utils/text/getTranslatedLink.ts +7 -7
  149. package/src/utils/text.ts +28 -43
  150. package/tailwind.config.cjs +8 -8
  151. package/tsconfig.json +28 -28
  152. package/uno.config.ts +256 -256
  153. package/src/components/ProductNumber copy.astro +0 -116
  154. package/src/components/ProductNumber.astro +0 -105
@@ -1,139 +1,139 @@
1
- ---
2
- title: "Breadcrumbs"
3
- layout: "../../layouts/MainLayout.astro"
4
-
5
-
6
- ---
7
- import Breadcrumbs from '../../components/Breadcrumbs.vue'
8
-
9
- # Breadcrumbs
10
-
11
- Breadcrumbs component with BreadcrumbList Microdata.
12
-
13
- Structured Data for Breadcrumbs that produce a Rich Snippet (in this case breadcrumbs) in search results that are clickable, too!
14
-
15
- #
16
-
17
- https://schema.org/BreadcrumbList
18
-
19
- https://schema.org/ListItem
20
-
21
-
22
-
23
- ## Show back
24
-
25
- <div class="component-preview">
26
- <Breadcrumbs
27
- breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
28
- product-number="6R0XXXXXX"
29
- class="py-1 order-0 px-1 max-w-full flex bg-white"
30
- show-back
31
- text-back="Back"
32
- />
33
- </div>
34
-
35
- ```js
36
- <Breadcrumbs
37
- breadcrumbs={
38
- [
39
- {"name": "Level1", "path": "level1"},
40
- {"name": "Level 2", "path": "level2"},
41
- {"name": "Level 3", "path": "level3"}
42
- ]
43
- }
44
- product-number="6R0XXXXXX"
45
- class="py-1 order-0 px-1 max-w-full flex bg-white"
46
- show-back
47
- text-back="Back"
48
- />
49
- ```
50
-
51
-
52
- ## Show home
53
-
54
- <div class="component-preview">
55
- <Breadcrumbs
56
- breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
57
- product-number="6R0XXXXXX"
58
- class="py-1 order-0 px-1 max-w-full flex bg-white"
59
- show-home
60
- />
61
- </div>
62
-
63
- ```js
64
- <Breadcrumbs
65
- breadcrumbs={
66
- [
67
- {"name": "Level1", "path": "level 1"},
68
- {"name": "Level 2", "path": "level2"},
69
- {"name": "Level 3", "path": "level3"}
70
- ]
71
- }
72
- product-number="6R0XXXXXX"
73
- class="py-1 order-0 px-1 max-w-full flex bg-white"
74
- show-home
75
- />
76
- ```
77
-
78
-
79
- ## Simply
80
-
81
- <div class="component-preview">
82
- <Breadcrumbs
83
- breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
84
- product-number="6R0XXXXXX"
85
- class="py-1 order-0 px-1 max-w-full flex bg-white"
86
- />
87
- </div>
88
-
89
- ```js
90
- <Breadcrumbs
91
- breadcrumbs={
92
- [
93
- {"name": "Level1", "path": "level 1"},
94
- {"name": "Level 2", "path": "level2"},
95
- {"name": "Level 3", "path": "level3"}
96
- ]
97
- }
98
- product-number="6R0XXXXXX"
99
- class="py-1 order-0 px-1 max-w-full flex bg-white"
100
- show-back
101
- text-back="Back"
102
- />
103
- ```
104
-
105
-
106
- ### Schema support:
107
- - https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=en
108
-
109
- #### Example
110
- - https://validator.schema.org/?hl=en-US#url=https%3A%2F%2Fcatalog.polo.blue%2FN10733102%2F
111
-
112
-
113
- | @type | BreadcrumbList |
114
- | ---------------- | --------------------------------------------------------------------------------- |
115
- | **itemListElement** | |
116
- | **@type** | ListItem |
117
- | **name** | Electrical, Lighting, Telematics |
118
- | **position** | 1 |
119
- | **item** | |
120
- | **@type** | Thing |
121
- | **@id** | https://catalog.polo.blue/electrical-lighting-telematics/ |
122
- | **itemListElement** | |
123
- | **@type** | ListItem |
124
- | **name** | Exterior Lighting |
125
- | **position** | 2 |
126
- | **item** | |
127
- | **@type** | Thing |
128
- | **@id** | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/ |
129
- | **itemListElement** | |
130
- | **@type** | ListItem |
131
- | **name** | Bulbs |
132
- | **position** | 3 |
133
- | **item** | |
134
- | **@type** | Thing |
135
- | **@id** | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/bulbs/ |
136
- | **itemListElement** | |
137
- | **@type** | ListItem |
138
- | **name** | Bulb carrier with bulb; silver lens |
139
- | **position** | 4 |
1
+ ---
2
+ title: "Breadcrumbs"
3
+ layout: "../../layouts/MainLayout.astro"
4
+
5
+
6
+ ---
7
+ import Breadcrumbs from '../../components/Breadcrumbs.vue'
8
+
9
+ # Breadcrumbs
10
+
11
+ Breadcrumbs component with BreadcrumbList Microdata.
12
+
13
+ Structured Data for Breadcrumbs that produce a Rich Snippet (in this case breadcrumbs) in search results that are clickable, too!
14
+
15
+ #
16
+
17
+ https://schema.org/BreadcrumbList
18
+
19
+ https://schema.org/ListItem
20
+
21
+
22
+
23
+ ## Show back
24
+
25
+ <div class="component-preview">
26
+ <Breadcrumbs
27
+ breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
28
+ product-number="6R0XXXXXX"
29
+ class="py-1 order-0 px-1 max-w-full flex bg-white"
30
+ show-back
31
+ text-back="Back"
32
+ />
33
+ </div>
34
+
35
+ ```js
36
+ <Breadcrumbs
37
+ breadcrumbs={
38
+ [
39
+ {"name": "Level1", "path": "level1"},
40
+ {"name": "Level 2", "path": "level2"},
41
+ {"name": "Level 3", "path": "level3"}
42
+ ]
43
+ }
44
+ product-number="6R0XXXXXX"
45
+ class="py-1 order-0 px-1 max-w-full flex bg-white"
46
+ show-back
47
+ text-back="Back"
48
+ />
49
+ ```
50
+
51
+
52
+ ## Show home
53
+
54
+ <div class="component-preview">
55
+ <Breadcrumbs
56
+ breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
57
+ product-number="6R0XXXXXX"
58
+ class="py-1 order-0 px-1 max-w-full flex bg-white"
59
+ show-home
60
+ />
61
+ </div>
62
+
63
+ ```js
64
+ <Breadcrumbs
65
+ breadcrumbs={
66
+ [
67
+ {"name": "Level1", "path": "level 1"},
68
+ {"name": "Level 2", "path": "level2"},
69
+ {"name": "Level 3", "path": "level3"}
70
+ ]
71
+ }
72
+ product-number="6R0XXXXXX"
73
+ class="py-1 order-0 px-1 max-w-full flex bg-white"
74
+ show-home
75
+ />
76
+ ```
77
+
78
+
79
+ ## Simply
80
+
81
+ <div class="component-preview">
82
+ <Breadcrumbs
83
+ breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
84
+ product-number="6R0XXXXXX"
85
+ class="py-1 order-0 px-1 max-w-full flex bg-white"
86
+ />
87
+ </div>
88
+
89
+ ```js
90
+ <Breadcrumbs
91
+ breadcrumbs={
92
+ [
93
+ {"name": "Level1", "path": "level 1"},
94
+ {"name": "Level 2", "path": "level2"},
95
+ {"name": "Level 3", "path": "level3"}
96
+ ]
97
+ }
98
+ product-number="6R0XXXXXX"
99
+ class="py-1 order-0 px-1 max-w-full flex bg-white"
100
+ show-back
101
+ text-back="Back"
102
+ />
103
+ ```
104
+
105
+
106
+ ### Schema support:
107
+ - https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=en
108
+
109
+ #### Example
110
+ - https://validator.schema.org/?hl=en-US#url=https%3A%2F%2Fcatalog.polo.blue%2FN10733102%2F
111
+
112
+
113
+ | @type | BreadcrumbList |
114
+ | ---------------- | --------------------------------------------------------------------------------- |
115
+ | **itemListElement** | |
116
+ | **@type** | ListItem |
117
+ | **name** | Electrical, Lighting, Telematics |
118
+ | **position** | 1 |
119
+ | **item** | |
120
+ | **@type** | Thing |
121
+ | **@id** | https://catalog.polo.blue/electrical-lighting-telematics/ |
122
+ | **itemListElement** | |
123
+ | **@type** | ListItem |
124
+ | **name** | Exterior Lighting |
125
+ | **position** | 2 |
126
+ | **item** | |
127
+ | **@type** | Thing |
128
+ | **@id** | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/ |
129
+ | **itemListElement** | |
130
+ | **@type** | ListItem |
131
+ | **name** | Bulbs |
132
+ | **position** | 3 |
133
+ | **item** | |
134
+ | **@type** | Thing |
135
+ | **@id** | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/bulbs/ |
136
+ | **itemListElement** | |
137
+ | **@type** | ListItem |
138
+ | **name** | Bulb carrier with bulb; silver lens |
139
+ | **position** | 4 |