spoko-design-system 1.20.0 → 1.21.1
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/.claude/settings.json +48 -48
- package/.github/dependabot.yml +11 -11
- package/.github/todo.yml +3 -3
- package/.github/workflows/claude.yml +37 -37
- package/.github/workflows/code-quality.yml +72 -72
- package/.github/workflows/deploy.yml +43 -43
- package/.husky/README.md +41 -41
- package/.husky/commit-msg +1 -1
- package/.husky/pre-commit +40 -40
- package/.prettierignore +14 -14
- package/.prettierrc +30 -30
- package/.stackblitzrc +5 -5
- package/.vscode/extensions.json +4 -4
- package/.vscode/launch.json +11 -11
- package/.vscode/settings.json +21 -21
- package/CHANGELOG.md +476 -462
- package/CLAUDE.md +268 -268
- package/LICENSE +21 -21
- package/README.md +303 -303
- package/TOOLTIPS.md +236 -236
- package/astro.config.mjs +84 -84
- package/commitlint.config.js +3 -3
- package/dev-dist/sw.js +91 -91
- package/dev-dist/workbox-c676b6d3.js +3391 -3391
- package/eslint.config.js +70 -70
- package/icon.config.ts +348 -348
- package/index.ts +78 -78
- package/package.json +160 -160
- package/public/arrow-bottom.svg +7 -7
- 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/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/sonar-project.properties +26 -26
- package/src/components/Category/CategoriesCarousel.astro +3 -7
- package/src/pages/components/badges.mdx +57 -57
- package/src/pages/components/breadcrumbs.mdx +139 -139
- package/src/pages/components/buttons.mdx +359 -359
- 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 +207 -207
- 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 +78 -78
- package/src/pages/components/headline.mdx +337 -337
- package/src/pages/components/image.mdx +513 -513
- package/src/pages/components/input.mdx +367 -367
- package/src/pages/components/jumbotron.mdx +530 -530
- package/src/pages/components/modal.mdx +212 -212
- package/src/pages/components/post-header.mdx +64 -64
- package/src/pages/components/pr-code.mdx +213 -213
- package/src/pages/components/product-engine.mdx +418 -418
- 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 +260 -260
- package/src/pages/components/table.mdx +108 -108
- package/src/pages/core/colors.mdx +21 -21
- package/src/pages/core/grid.mdx +193 -193
- package/src/pages/core/introduction.mdx +77 -77
- package/src/pages/core/tooltips.mdx +491 -491
- package/src/pages/patterns/introduction.mdx +60 -60
- package/src/styles/_variables.scss +70 -70
- package/tailwind.config.cjs +8 -8
- package/tsconfig.json +28 -28
- package/uno-config/index.ts +269 -269
- package/uno-config/theme/breakpoints.ts +9 -9
- package/uno-config/theme/colors.ts +65 -65
- 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 +26 -26
- package/uno-config/theme/shortcuts/buttons.ts +53 -53
- package/uno-config/theme/shortcuts/components.ts +124 -124
- package/uno-config/theme/shortcuts/index.ts +20 -20
- package/uno-config/theme/shortcuts/jumbotron.ts +71 -71
- package/uno-config/theme/shortcuts/layout.ts +75 -75
- package/uno-config/theme/typography.ts +29 -29
- package/uno.config.ts +2 -2
|
@@ -1,57 +1,57 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: "Badges"
|
|
3
|
-
layout: "../../layouts/MainLayout.astro"
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
import Badges from '../../components/Badges.vue'
|
|
7
|
-
|
|
8
|
-
# Product badges
|
|
9
|
-
Extra product badges (labels).
|
|
10
|
-
|
|
11
|
-
## Badges - GTI
|
|
12
|
-
<div class="component-preview">
|
|
13
|
-
<div class="relative min-h-19">
|
|
14
|
-
<Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
|
|
15
|
-
</div>
|
|
16
|
-
</div>
|
|
17
|
-
|
|
18
|
-
```js
|
|
19
|
-
<div class="relative min-h-10">
|
|
20
|
-
<Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
|
|
21
|
-
</div>
|
|
22
|
-
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
## Badge on image
|
|
27
|
-
<div class="component-preview">
|
|
28
|
-
<div class="relative">
|
|
29
|
-
<img src="https://placehold.co/300x200" alt="image alt" />
|
|
30
|
-
<Badges badges={['Motorsport']} class="top-2" />
|
|
31
|
-
</div>
|
|
32
|
-
</div>
|
|
33
|
-
|
|
34
|
-
```js
|
|
35
|
-
<div class="relative">
|
|
36
|
-
<img src="https://placehold.co/300x200" alt="image alt" />
|
|
37
|
-
<Badges badges={['Motorsport']} class="top-2" />
|
|
38
|
-
</div>
|
|
39
|
-
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
## Few badges on image
|
|
44
|
-
<div class="component-preview">
|
|
45
|
-
<div class="relative">
|
|
46
|
-
<img src="https://placehold.co/300x200" alt="image alt" />
|
|
47
|
-
<Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
|
|
51
|
-
```js
|
|
52
|
-
<div class="relative">
|
|
53
|
-
<img src="https://placehold.co/300x200" alt="image alt" />
|
|
54
|
-
<Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
|
|
55
|
-
</div>
|
|
56
|
-
|
|
57
|
-
```
|
|
1
|
+
---
|
|
2
|
+
title: "Badges"
|
|
3
|
+
layout: "../../layouts/MainLayout.astro"
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
import Badges from '../../components/Badges.vue'
|
|
7
|
+
|
|
8
|
+
# Product badges
|
|
9
|
+
Extra product badges (labels).
|
|
10
|
+
|
|
11
|
+
## Badges - GTI
|
|
12
|
+
<div class="component-preview">
|
|
13
|
+
<div class="relative min-h-19">
|
|
14
|
+
<Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
```js
|
|
19
|
+
<div class="relative min-h-10">
|
|
20
|
+
<Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
## Badge on image
|
|
27
|
+
<div class="component-preview">
|
|
28
|
+
<div class="relative">
|
|
29
|
+
<img src="https://placehold.co/300x200" alt="image alt" />
|
|
30
|
+
<Badges badges={['Motorsport']} class="top-2" />
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
```js
|
|
35
|
+
<div class="relative">
|
|
36
|
+
<img src="https://placehold.co/300x200" alt="image alt" />
|
|
37
|
+
<Badges badges={['Motorsport']} class="top-2" />
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
## Few badges on image
|
|
44
|
+
<div class="component-preview">
|
|
45
|
+
<div class="relative">
|
|
46
|
+
<img src="https://placehold.co/300x200" alt="image alt" />
|
|
47
|
+
<Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
```js
|
|
52
|
+
<div class="relative">
|
|
53
|
+
<img src="https://placehold.co/300x200" alt="image alt" />
|
|
54
|
+
<Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
```
|
|
@@ -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 |
|