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.
- package/.astro/settings.json +4 -4
- package/.github/dependabot.yml +11 -11
- package/.github/todo.yml +3 -3
- package/.github/workflows/deploy.yml +39 -39
- package/.stackblitzrc +5 -5
- package/.vscode/extensions.json +5 -5
- package/.vscode/launch.json +11 -11
- package/.vscode/settings.json +5 -5
- package/LICENSE +21 -21
- package/README.md +114 -114
- package/astro-i18next.config.mjs +17 -17
- package/astro-i18next.config.ts +10 -10
- package/astro.config.mjs +86 -86
- package/dev-dist/sw.js +91 -91
- package/dev-dist/workbox-c676b6d3.js +3391 -3391
- package/icon.config.ts +278 -277
- package/index.ts +63 -63
- package/package.json +2 -2
- package/public/fonts/lg.svg +53 -53
- package/public/fonts/vwhead-bold-demo.html +549 -549
- package/public/fonts/vwhead-regular-demo.html +549 -549
- package/public/fonts/vwtext-bold-demo.html +549 -549
- package/public/fonts/vwtext-regular-demo.html +549 -549
- package/public/github.svg +3 -3
- package/public/grid_dot.svg +4 -4
- package/public/linkedin.svg +44 -44
- package/public/locales/en/translation.json +8 -8
- package/public/locales/pl/translation.json +8 -8
- package/public/make-scrollable-code-focusable.js +3 -3
- package/public/pagefind.yml +3 -3
- package/public/polo.blue.svg +29 -29
- package/public/spoko.space.svg +71 -71
- package/public/twitter.svg +46 -46
- package/renovate.json +6 -6
- package/sandbox.config.json +11 -11
- package/src/MyComponent.astro +8 -8
- package/src/components/Badge.vue +19 -19
- package/src/components/Badges.vue +21 -21
- package/src/components/Breadcrumbs.vue +107 -107
- package/src/components/Button.vue +87 -87
- package/src/components/ButtonCopy.astro +183 -183
- package/src/components/ButtonCopy.vue +36 -36
- package/src/components/Card.astro +27 -27
- package/src/components/Carousel.astro +26 -26
- package/src/components/Category/CategoriesCarousel.astro +101 -101
- package/src/components/Category/CategoryDetails.astro +169 -169
- package/src/components/Category/CategoryLink.vue +23 -23
- package/src/components/Category/CategorySidebarToggler.vue +9 -9
- package/src/components/Category/CategoryTile.astro +38 -38
- package/src/components/Category/CategoryViewToggler.astro +89 -89
- package/src/components/Category/SubCategoryLink.vue +19 -19
- package/src/components/CategoryLink.astro +18 -18
- package/src/components/Copyright.astro +12 -12
- package/src/components/Date.astro +7 -7
- package/src/components/Faq.astro +33 -33
- package/src/components/FaqItem.astro +96 -96
- package/src/components/FeaturesList.vue +41 -41
- package/src/components/FuckRussia.vue +62 -62
- package/src/components/HandDrive.astro +29 -29
- package/src/components/Header/Header.astro +210 -210
- package/src/components/Header/SkipToContent.astro +1 -1
- package/src/components/Headline.vue +48 -48
- package/src/components/Image.astro +30 -30
- package/src/components/LeftSidebar.astro +53 -53
- package/src/components/MainColors.vue +22 -22
- package/src/components/MainInput.vue +15 -15
- package/src/components/Modal.astro +27 -27
- package/src/components/PageContent.astro +5 -5
- package/src/components/PartNumber.vue +27 -27
- package/src/components/PostHeader.astro +103 -103
- package/src/components/PrCode.vue +141 -141
- package/src/components/Product/ProductButton.vue +18 -18
- package/src/components/Product/ProductCarousel.astro +35 -35
- package/src/components/Product/ProductCodes.vue +174 -174
- package/src/components/Product/ProductEngineType.vue +42 -42
- package/src/components/Product/ProductImage.astro +40 -40
- package/src/components/Product/ProductLink.astro +101 -101
- package/src/components/Product/ProductLink.vue +59 -59
- package/src/components/Product/ProductLinkInfo.astro +37 -37
- package/src/components/Product/ProductNumber.astro +60 -60
- package/src/components/ProductCarousel.astro +38 -38
- package/src/components/ProductCodes.vue +39 -39
- package/src/components/ProductDetailName.vue +52 -52
- package/src/components/ProductDetailsList.vue +65 -65
- package/src/components/ProductTile.astro +48 -48
- package/src/components/Quote.vue +23 -23
- package/src/components/ReloadPrompt.astro +50 -50
- package/src/components/SlimBanner.vue +72 -72
- package/src/components/Table.vue +32 -32
- package/src/components/TableOfContents.astro +15 -15
- package/src/components/Translations.vue +23 -23
- package/src/components/flags/FlagPL.vue +3 -3
- package/src/components/flags/FlagUA.vue +2 -2
- package/src/components/layout/Container.astro +7 -7
- package/src/components/layout/Header.astro +80 -80
- package/src/config.ts +56 -56
- package/src/design.config.ts +98 -98
- package/src/env.d.ts +6 -6
- package/src/layouts/Layout.astro +61 -61
- package/src/layouts/MainLayout.astro +81 -81
- package/src/layouts/partials/FooterCommon.astro +4 -4
- package/src/layouts/partials/HeadCommon.astro +44 -44
- package/src/layouts/partials/HeadSEO.astro +41 -41
- package/src/pages/components/badges.mdx +57 -57
- package/src/pages/components/breadcrumbs.mdx +139 -139
- package/src/pages/components/buttons.mdx +360 -356
- package/src/pages/components/card.mdx +294 -294
- package/src/pages/components/carousel.mdx +62 -62
- package/src/pages/components/copyright.mdx +42 -42
- package/src/pages/components/details-list.mdx +115 -115
- package/src/pages/components/features-list.mdx +37 -37
- package/src/pages/components/flags.mdx +49 -49
- package/src/pages/components/fuck-russia.mdx +39 -39
- package/src/pages/components/hand-drive.mdx +38 -38
- package/src/pages/components/headline.mdx +152 -152
- package/src/pages/components/icons.astro +135 -135
- package/src/pages/components/image.mdx +513 -513
- package/src/pages/components/input.mdx +45 -45
- package/src/pages/components/jumbotron.mdx +359 -359
- package/src/pages/components/modal.mdx +64 -64
- package/src/pages/components/post-header.mdx +60 -60
- package/src/pages/components/pr-code.mdx +65 -65
- package/src/pages/components/product-number.mdx +58 -58
- package/src/pages/components/product-tile.mdx +51 -51
- package/src/pages/components/quote.mdx +33 -33
- package/src/pages/components/slimbanner.mdx +35 -35
- package/src/pages/components/table.mdx +108 -108
- package/src/pages/core/colors.mdx +10 -10
- package/src/pages/core/grid.mdx +89 -89
- package/src/pages/core/introduction.mdx +77 -77
- package/src/pages/core/shadows.astro +20 -20
- package/src/pages/core/typography.astro +49 -49
- package/src/pages/index.astro +130 -130
- package/src/pages/patterns/introduction.mdx +60 -60
- package/src/pwa.ts +12 -12
- package/src/styles/_variables.scss +70 -70
- package/src/styles/base/base.css +184 -184
- package/src/styles/base/grid.css +92 -92
- package/src/styles/base/typography.css +70 -70
- package/src/styles/content.css +73 -73
- package/src/styles/main.css +7 -7
- package/src/types/Product.ts +31 -31
- package/src/types/astro.d.ts +3 -3
- package/src/utils/product/getPriceFormatted.ts +15 -15
- package/src/utils/product/getProductChecklist.ts +17 -17
- package/src/utils/product/useFormatProductNumber.ts +41 -41
- package/src/utils/seo/getShorterDescription.ts +14 -14
- package/src/utils/text/formatDate.ts +5 -5
- package/src/utils/text/formatLocaleNumber.ts +6 -6
- package/src/utils/text/formatPad.ts +12 -12
- package/src/utils/text/getNumberFormatted.ts +33 -33
- package/src/utils/text/getTranslatedLink.ts +5 -5
- package/src/utils/text.ts +19 -19
- package/tailwind.config.cjs +8 -8
- package/tsconfig.json +28 -28
- package/uno-config/index.ts +61 -61
- package/uno-config/theme/breakpoints.ts +9 -9
- package/uno-config/theme/colors.ts +64 -64
- package/uno-config/theme/dimensions.ts +17 -17
- package/uno-config/theme/effects.ts +14 -14
- package/uno-config/theme/grid.ts +10 -10
- package/uno-config/theme/index.ts +28 -28
- package/uno-config/theme/shortcuts/buttons.ts +42 -42
- package/uno-config/theme/shortcuts/components.ts +92 -92
- package/uno-config/theme/shortcuts/index.ts +18 -18
- package/uno-config/theme/shortcuts/layout.ts +64 -64
- package/uno-config/theme/typography.ts +29 -29
- 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
|
```
|