spoko-design-system 0.9.6 → 1.0.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 (176) hide show
  1. package/.astro/content.d.ts +1 -1
  2. package/.astro/settings.json +4 -4
  3. package/.astro/types.d.ts +2 -1
  4. package/.github/dependabot.yml +11 -11
  5. package/.github/todo.yml +3 -3
  6. package/.github/workflows/deploy.yml +39 -39
  7. package/.github/workflows/release.yml +64 -0
  8. package/.releaserc.json +93 -0
  9. package/.stackblitzrc +5 -5
  10. package/.vscode/extensions.json +5 -5
  11. package/.vscode/launch.json +11 -11
  12. package/.vscode/settings.json +5 -5
  13. package/CHANGELOG.md +12 -0
  14. package/CONTRIBUTING.md +183 -0
  15. package/LICENSE +21 -21
  16. package/README.md +116 -116
  17. package/astro-i18next.config.mjs +17 -17
  18. package/astro-i18next.config.ts +10 -10
  19. package/astro.config.mjs +86 -86
  20. package/dev-dist/sw.js +91 -91
  21. package/dev-dist/workbox-c676b6d3.js +3391 -3391
  22. package/icon.config.ts +310 -310
  23. package/index.ts +70 -70
  24. package/package.json +13 -3
  25. package/public/arrow-bottom.svg +7 -7
  26. package/public/fonts/lg.svg +53 -53
  27. package/public/fonts/vwhead-bold-demo.html +549 -549
  28. package/public/fonts/vwhead-regular-demo.html +549 -549
  29. package/public/fonts/vwtext-bold-demo.html +549 -549
  30. package/public/fonts/vwtext-regular-demo.html +549 -549
  31. package/public/github.svg +3 -3
  32. package/public/grid_dot.svg +4 -4
  33. package/public/linkedin.svg +44 -44
  34. package/public/locales/en/translation.json +12 -12
  35. package/public/locales/pl/translation.json +12 -12
  36. package/public/make-scrollable-code-focusable.js +3 -3
  37. package/public/pagefind.yml +3 -3
  38. package/public/polo.blue.svg +29 -29
  39. package/public/spoko.space.svg +71 -71
  40. package/public/twitter.svg +46 -46
  41. package/renovate.json +6 -6
  42. package/sandbox.config.json +11 -11
  43. package/src/MyComponent.astro +8 -8
  44. package/src/components/Badge.vue +19 -19
  45. package/src/components/Badges.vue +21 -21
  46. package/src/components/Breadcrumbs.vue +94 -94
  47. package/src/components/Button.vue +101 -101
  48. package/src/components/ButtonCopy.astro +183 -183
  49. package/src/components/ButtonCopy.vue +36 -36
  50. package/src/components/Card.astro +27 -27
  51. package/src/components/Carousel.astro +26 -26
  52. package/src/components/Category/CategoriesCarousel.astro +101 -101
  53. package/src/components/Category/CategoryDetails.astro +169 -169
  54. package/src/components/Category/CategoryLink.vue +28 -28
  55. package/src/components/Category/CategorySidebarToggler.vue +9 -9
  56. package/src/components/Category/CategoryTile.astro +37 -37
  57. package/src/components/Category/CategoryViewToggler.astro +89 -89
  58. package/src/components/Category/SubCategoryLink.vue +19 -19
  59. package/src/components/Copyright.astro +12 -12
  60. package/src/components/Date.astro +7 -7
  61. package/src/components/Faq.astro +33 -33
  62. package/src/components/FaqItem.astro +80 -80
  63. package/src/components/FeaturesList.vue +37 -37
  64. package/src/components/FuckRussia.vue +62 -62
  65. package/src/components/HandDrive.astro +55 -29
  66. package/src/components/Header/Header.astro +210 -210
  67. package/src/components/Header/SkipToContent.astro +1 -1
  68. package/src/components/Headline.vue +87 -87
  69. package/src/components/Image.astro +30 -30
  70. package/src/components/LeftSidebar.astro +53 -53
  71. package/src/components/MainColors.vue +22 -22
  72. package/src/components/MainInput.vue +15 -15
  73. package/src/components/Modal.astro +27 -27
  74. package/src/components/PageContent.astro +5 -5
  75. package/src/components/PartNumber.vue +27 -27
  76. package/src/components/Post/PostCategories.astro +41 -41
  77. package/src/components/Post/PostCategories.vue +30 -30
  78. package/src/components/PostHeader.astro +103 -103
  79. package/src/components/PrCode.vue +141 -141
  80. package/src/components/Product/ProductButton.vue +18 -18
  81. package/src/components/Product/ProductCarousel.astro +35 -35
  82. package/src/components/Product/ProductEngineType.vue +42 -42
  83. package/src/components/Product/ProductImage.astro +40 -40
  84. package/src/components/Product/ProductLink.astro +101 -101
  85. package/src/components/Product/ProductLink.vue +59 -59
  86. package/src/components/Product/ProductLinkInfo.astro +37 -37
  87. package/src/components/Product/ProductNumber.astro +60 -60
  88. package/src/components/ProductCarousel.astro +38 -38
  89. package/src/components/ProductCodes.vue +39 -39
  90. package/src/components/ProductDetailName.vue +52 -52
  91. package/src/components/ProductDetailsList.vue +216 -216
  92. package/src/components/ProductTile.astro +48 -48
  93. package/src/components/Quote.vue +23 -23
  94. package/src/components/ReloadPrompt.astro +50 -50
  95. package/src/components/SlimBanner.vue +72 -72
  96. package/src/components/Table.vue +32 -32
  97. package/src/components/TableOfContents.astro +15 -15
  98. package/src/components/Translations.vue +23 -23
  99. package/src/components/flags/FlagPL.vue +3 -3
  100. package/src/components/flags/FlagUA.vue +2 -2
  101. package/src/components/{Layout → layout}/CallToAction.astro +52 -52
  102. package/src/components/{Layout → layout}/Container.astro +7 -7
  103. package/src/components/{Layout → layout}/Header.astro +80 -80
  104. package/src/config.ts +56 -56
  105. package/src/design.config.ts +98 -98
  106. package/src/env.d.ts +6 -6
  107. package/src/layouts/Layout.astro +61 -61
  108. package/src/layouts/MainLayout.astro +81 -81
  109. package/src/layouts/partials/FooterCommon.astro +4 -4
  110. package/src/layouts/partials/HeadCommon.astro +44 -44
  111. package/src/layouts/partials/HeadSEO.astro +41 -41
  112. package/src/pages/components/badges.mdx +57 -57
  113. package/src/pages/components/breadcrumbs.mdx +139 -139
  114. package/src/pages/components/buttons.mdx +360 -360
  115. package/src/pages/components/card.mdx +294 -294
  116. package/src/pages/components/carousel.mdx +62 -62
  117. package/src/pages/components/copyright.mdx +42 -42
  118. package/src/pages/components/details-list.mdx +115 -115
  119. package/src/pages/components/features-list.mdx +37 -37
  120. package/src/pages/components/flags.mdx +49 -49
  121. package/src/pages/components/fuck-russia.mdx +39 -39
  122. package/src/pages/components/hand-drive.mdx +105 -38
  123. package/src/pages/components/headline.mdx +137 -137
  124. package/src/pages/components/icons.astro +135 -135
  125. package/src/pages/components/image.mdx +513 -513
  126. package/src/pages/components/input.mdx +367 -367
  127. package/src/pages/components/jumbotron.mdx +359 -359
  128. package/src/pages/components/modal.mdx +64 -64
  129. package/src/pages/components/post-header.mdx +64 -64
  130. package/src/pages/components/pr-code.mdx +65 -65
  131. package/src/pages/components/product-number.mdx +58 -58
  132. package/src/pages/components/product-tile.mdx +51 -51
  133. package/src/pages/components/quote.mdx +33 -33
  134. package/src/pages/components/slimbanner.mdx +35 -35
  135. package/src/pages/components/table.mdx +108 -108
  136. package/src/pages/core/colors.mdx +10 -10
  137. package/src/pages/core/grid.mdx +89 -89
  138. package/src/pages/core/introduction.mdx +77 -77
  139. package/src/pages/core/shadows.astro +20 -20
  140. package/src/pages/core/typography.astro +49 -49
  141. package/src/pages/index.astro +133 -133
  142. package/src/pages/patterns/introduction.mdx +60 -60
  143. package/src/pwa.ts +12 -12
  144. package/src/styles/_variables.scss +70 -70
  145. package/src/styles/base/base.css +184 -184
  146. package/src/styles/base/grid.css +92 -92
  147. package/src/styles/base/typography.css +70 -70
  148. package/src/styles/content.css +73 -73
  149. package/src/styles/main.css +7 -7
  150. package/src/types/Product.ts +31 -31
  151. package/src/types/astro.d.ts +3 -3
  152. package/src/utils/product/getPriceFormatted.ts +15 -15
  153. package/src/utils/product/getProductChecklist.ts +17 -17
  154. package/src/utils/product/useFormatProductNumber.ts +41 -41
  155. package/src/utils/seo/getShorterDescription.ts +14 -14
  156. package/src/utils/text/formatDate.ts +5 -5
  157. package/src/utils/text/formatLocaleNumber.ts +6 -6
  158. package/src/utils/text/formatPad.ts +12 -12
  159. package/src/utils/text/getNumberFormatted.ts +33 -33
  160. package/src/utils/text/getTranslatedLink.ts +5 -5
  161. package/src/utils/text.ts +19 -19
  162. package/tailwind.config.cjs +8 -8
  163. package/tsconfig.json +28 -28
  164. package/uno-config/index.ts +268 -268
  165. package/uno-config/theme/breakpoints.ts +9 -9
  166. package/uno-config/theme/colors.ts +64 -64
  167. package/uno-config/theme/dimensions.ts +17 -17
  168. package/uno-config/theme/effects.ts +14 -14
  169. package/uno-config/theme/grid.ts +10 -10
  170. package/uno-config/theme/index.ts +28 -28
  171. package/uno-config/theme/shortcuts/buttons.ts +53 -53
  172. package/uno-config/theme/shortcuts/components.ts +123 -123
  173. package/uno-config/theme/shortcuts/index.ts +20 -20
  174. package/uno-config/theme/shortcuts/layout.ts +74 -74
  175. package/uno-config/theme/typography.ts +29 -29
  176. package/uno.config.ts +2 -2
@@ -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 |