spoko-design-system 0.4.5 → 0.4.6

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 (168) hide show
  1. package/.astro/settings.json +4 -4
  2. package/.github/dependabot.yml +11 -11
  3. package/.github/todo.yml +3 -3
  4. package/.github/workflows/deploy.yml +39 -39
  5. package/.stackblitzrc +5 -5
  6. package/.vscode/extensions.json +5 -5
  7. package/.vscode/launch.json +11 -11
  8. package/.vscode/settings.json +5 -5
  9. package/LICENSE +21 -21
  10. package/README.md +114 -114
  11. package/astro-i18next.config.mjs +17 -17
  12. package/astro-i18next.config.ts +10 -10
  13. package/astro.config.mjs +86 -86
  14. package/dev-dist/sw.js +91 -91
  15. package/dev-dist/workbox-c676b6d3.js +3391 -3391
  16. package/icon.config.ts +278 -277
  17. package/index.ts +63 -63
  18. package/package.json +2 -2
  19. package/public/fonts/lg.svg +53 -53
  20. package/public/fonts/vwhead-bold-demo.html +549 -549
  21. package/public/fonts/vwhead-regular-demo.html +549 -549
  22. package/public/fonts/vwtext-bold-demo.html +549 -549
  23. package/public/fonts/vwtext-regular-demo.html +549 -549
  24. package/public/github.svg +3 -3
  25. package/public/grid_dot.svg +4 -4
  26. package/public/linkedin.svg +44 -44
  27. package/public/locales/en/translation.json +8 -8
  28. package/public/locales/pl/translation.json +8 -8
  29. package/public/make-scrollable-code-focusable.js +3 -3
  30. package/public/pagefind.yml +3 -3
  31. package/public/polo.blue.svg +29 -29
  32. package/public/spoko.space.svg +71 -71
  33. package/public/twitter.svg +46 -46
  34. package/renovate.json +6 -6
  35. package/sandbox.config.json +11 -11
  36. package/src/MyComponent.astro +8 -8
  37. package/src/components/Badge.vue +19 -19
  38. package/src/components/Badges.vue +21 -21
  39. package/src/components/Breadcrumbs.vue +107 -107
  40. package/src/components/Button.vue +87 -87
  41. package/src/components/ButtonCopy.astro +183 -183
  42. package/src/components/ButtonCopy.vue +36 -36
  43. package/src/components/Card.astro +27 -27
  44. package/src/components/Carousel.astro +26 -26
  45. package/src/components/Category/CategoriesCarousel.astro +101 -101
  46. package/src/components/Category/CategoryDetails.astro +169 -169
  47. package/src/components/Category/CategoryLink.vue +23 -23
  48. package/src/components/Category/CategorySidebarToggler.vue +9 -9
  49. package/src/components/Category/CategoryTile.astro +38 -38
  50. package/src/components/Category/CategoryViewToggler.astro +89 -89
  51. package/src/components/Category/SubCategoryLink.vue +19 -19
  52. package/src/components/CategoryLink.astro +18 -18
  53. package/src/components/Copyright.astro +12 -12
  54. package/src/components/Date.astro +7 -7
  55. package/src/components/Faq.astro +33 -33
  56. package/src/components/FaqItem.astro +96 -96
  57. package/src/components/FeaturesList.vue +41 -41
  58. package/src/components/FuckRussia.vue +62 -62
  59. package/src/components/HandDrive.astro +29 -29
  60. package/src/components/Header/Header.astro +210 -210
  61. package/src/components/Header/SkipToContent.astro +1 -1
  62. package/src/components/Headline.vue +48 -48
  63. package/src/components/Image.astro +30 -30
  64. package/src/components/LeftSidebar.astro +53 -53
  65. package/src/components/MainColors.vue +22 -22
  66. package/src/components/MainInput.vue +15 -15
  67. package/src/components/Modal.astro +27 -27
  68. package/src/components/PageContent.astro +5 -5
  69. package/src/components/PartNumber.vue +27 -27
  70. package/src/components/PostHeader.astro +103 -103
  71. package/src/components/PrCode.vue +141 -141
  72. package/src/components/Product/ProductButton.vue +18 -18
  73. package/src/components/Product/ProductCarousel.astro +35 -35
  74. package/src/components/Product/ProductCodes.vue +174 -174
  75. package/src/components/Product/ProductEngineType.vue +42 -42
  76. package/src/components/Product/ProductImage.astro +40 -40
  77. package/src/components/Product/ProductLink.astro +101 -101
  78. package/src/components/Product/ProductLink.vue +59 -59
  79. package/src/components/Product/ProductLinkInfo.astro +37 -37
  80. package/src/components/Product/ProductNumber.astro +60 -60
  81. package/src/components/ProductCarousel.astro +38 -38
  82. package/src/components/ProductCodes.vue +39 -39
  83. package/src/components/ProductDetailName.vue +52 -52
  84. package/src/components/ProductDetailsList.vue +65 -65
  85. package/src/components/ProductTile.astro +48 -48
  86. package/src/components/Quote.vue +23 -23
  87. package/src/components/ReloadPrompt.astro +50 -50
  88. package/src/components/SlimBanner.vue +72 -72
  89. package/src/components/Table.vue +32 -32
  90. package/src/components/TableOfContents.astro +15 -15
  91. package/src/components/Translations.vue +23 -23
  92. package/src/components/flags/FlagPL.vue +3 -3
  93. package/src/components/flags/FlagUA.vue +2 -2
  94. package/src/components/layout/Container.astro +7 -7
  95. package/src/components/layout/Header.astro +80 -80
  96. package/src/config.ts +56 -56
  97. package/src/design.config.ts +98 -98
  98. package/src/env.d.ts +6 -6
  99. package/src/layouts/Layout.astro +61 -61
  100. package/src/layouts/MainLayout.astro +81 -81
  101. package/src/layouts/partials/FooterCommon.astro +4 -4
  102. package/src/layouts/partials/HeadCommon.astro +44 -44
  103. package/src/layouts/partials/HeadSEO.astro +41 -41
  104. package/src/pages/components/badges.mdx +57 -57
  105. package/src/pages/components/breadcrumbs.mdx +139 -139
  106. package/src/pages/components/buttons.mdx +360 -356
  107. package/src/pages/components/card.mdx +294 -294
  108. package/src/pages/components/carousel.mdx +62 -62
  109. package/src/pages/components/copyright.mdx +42 -42
  110. package/src/pages/components/details-list.mdx +115 -115
  111. package/src/pages/components/features-list.mdx +37 -37
  112. package/src/pages/components/flags.mdx +49 -49
  113. package/src/pages/components/fuck-russia.mdx +39 -39
  114. package/src/pages/components/hand-drive.mdx +38 -38
  115. package/src/pages/components/headline.mdx +152 -152
  116. package/src/pages/components/icons.astro +135 -135
  117. package/src/pages/components/image.mdx +513 -513
  118. package/src/pages/components/input.mdx +45 -45
  119. package/src/pages/components/jumbotron.mdx +359 -359
  120. package/src/pages/components/modal.mdx +64 -64
  121. package/src/pages/components/post-header.mdx +60 -60
  122. package/src/pages/components/pr-code.mdx +65 -65
  123. package/src/pages/components/product-number.mdx +58 -58
  124. package/src/pages/components/product-tile.mdx +51 -51
  125. package/src/pages/components/quote.mdx +33 -33
  126. package/src/pages/components/slimbanner.mdx +35 -35
  127. package/src/pages/components/table.mdx +108 -108
  128. package/src/pages/core/colors.mdx +10 -10
  129. package/src/pages/core/grid.mdx +89 -89
  130. package/src/pages/core/introduction.mdx +77 -77
  131. package/src/pages/core/shadows.astro +20 -20
  132. package/src/pages/core/typography.astro +49 -49
  133. package/src/pages/index.astro +130 -130
  134. package/src/pages/patterns/introduction.mdx +60 -60
  135. package/src/pwa.ts +12 -12
  136. package/src/styles/_variables.scss +70 -70
  137. package/src/styles/base/base.css +184 -184
  138. package/src/styles/base/grid.css +92 -92
  139. package/src/styles/base/typography.css +70 -70
  140. package/src/styles/content.css +73 -73
  141. package/src/styles/main.css +7 -7
  142. package/src/types/Product.ts +31 -31
  143. package/src/types/astro.d.ts +3 -3
  144. package/src/utils/product/getPriceFormatted.ts +15 -15
  145. package/src/utils/product/getProductChecklist.ts +17 -17
  146. package/src/utils/product/useFormatProductNumber.ts +41 -41
  147. package/src/utils/seo/getShorterDescription.ts +14 -14
  148. package/src/utils/text/formatDate.ts +5 -5
  149. package/src/utils/text/formatLocaleNumber.ts +6 -6
  150. package/src/utils/text/formatPad.ts +12 -12
  151. package/src/utils/text/getNumberFormatted.ts +33 -33
  152. package/src/utils/text/getTranslatedLink.ts +5 -5
  153. package/src/utils/text.ts +19 -19
  154. package/tailwind.config.cjs +8 -8
  155. package/tsconfig.json +28 -28
  156. package/uno-config/index.ts +61 -61
  157. package/uno-config/theme/breakpoints.ts +9 -9
  158. package/uno-config/theme/colors.ts +64 -64
  159. package/uno-config/theme/dimensions.ts +17 -17
  160. package/uno-config/theme/effects.ts +14 -14
  161. package/uno-config/theme/grid.ts +10 -10
  162. package/uno-config/theme/index.ts +28 -28
  163. package/uno-config/theme/shortcuts/buttons.ts +42 -42
  164. package/uno-config/theme/shortcuts/components.ts +92 -92
  165. package/uno-config/theme/shortcuts/index.ts +18 -18
  166. package/uno-config/theme/shortcuts/layout.ts +64 -64
  167. package/uno-config/theme/typography.ts +29 -29
  168. package/uno.config.ts +2 -2
@@ -1,46 +1,46 @@
1
- ---
2
- title: Input
3
- layout: ../../layouts/MainLayout.astro
4
- ---
5
- import MainInput from '../../components/MainInput.vue'
6
-
7
- # Input text
8
-
9
- <div class="component-preview">
10
- <MainInput label="Name"></MainInput>
11
- </div>
12
-
13
- ```js
14
- <MainInput type="text" value="Hello world!"></MainInput>
15
- ```
16
-
17
-
18
-
19
- <div class="component-preview">
20
-
21
- <div class="bg-white grid items-end w-full gap-6 md:grid-cols-3 px-4 py-6">
22
- <div class="relative">
23
- <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer" placeholder=" " />
24
- <label for="floating_filled" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
25
- </div>
26
-
27
- <div class="relative z-0">
28
- <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer" placeholder=" " />
29
- <label for="floating_standard" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
30
- </div>
31
- </div>
32
-
33
- </div>
34
-
35
-
36
- ```js
37
- <div class="relative">
38
- <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer" placeholder=" " />
39
- <label for="floating_filled" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
40
- </div>
41
-
42
- <div class="relative z-0">
43
- <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer" placeholder=" " />
44
- <label for="floating_standard" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
45
- </div>
1
+ ---
2
+ title: Input
3
+ layout: ../../layouts/MainLayout.astro
4
+ ---
5
+ import MainInput from '../../components/MainInput.vue'
6
+
7
+ # Input text
8
+
9
+ <div class="component-preview">
10
+ <MainInput label="Name"></MainInput>
11
+ </div>
12
+
13
+ ```js
14
+ <MainInput type="text" value="Hello world!"></MainInput>
15
+ ```
16
+
17
+
18
+
19
+ <div class="component-preview">
20
+
21
+ <div class="bg-white grid items-end w-full gap-6 md:grid-cols-3 px-4 py-6">
22
+ <div class="relative">
23
+ <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer" placeholder=" " />
24
+ <label for="floating_filled" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
25
+ </div>
26
+
27
+ <div class="relative z-0">
28
+ <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer" placeholder=" " />
29
+ <label for="floating_standard" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
30
+ </div>
31
+ </div>
32
+
33
+ </div>
34
+
35
+
36
+ ```js
37
+ <div class="relative">
38
+ <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer" placeholder=" " />
39
+ <label for="floating_filled" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
40
+ </div>
41
+
42
+ <div class="relative z-0">
43
+ <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer" placeholder=" " />
44
+ <label for="floating_standard" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
45
+ </div>
46
46
  ```