spoko-design-system 0.2.23 → 0.2.24
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/.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 +113 -113
- package/astro-i18next.config.mjs +17 -17
- package/astro-i18next.config.ts +10 -10
- package/astro.config.mjs +141 -141
- package/dev-dist/sw.js +91 -91
- package/dev-dist/workbox-c676b6d3.js +3391 -3391
- package/index.ts +6 -6
- package/package.json +95 -95
- 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 +110 -110
- package/src/components/Button.vue +55 -55
- package/src/components/ButtonCopy.vue +47 -47
- package/src/components/Card.astro +27 -27
- package/src/components/Carousel.astro +26 -26
- package/src/components/CategoryLink.astro +18 -18
- package/src/components/Copyright.astro +12 -12
- package/src/components/Date.astro +7 -7
- package/src/components/FeaturesList.vue +41 -41
- package/src/components/FuckRussia.vue +80 -80
- package/src/components/HandDrive.astro +29 -29
- package/src/components/Header/Header.astro +214 -214
- 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/Jumbatron.vue +40 -40
- package/src/components/LeftSidebar.astro +53 -53
- package/src/components/MainColors.vue +23 -23
- 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 +156 -156
- 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/ProductNumber copy.astro +116 -116
- package/src/components/ProductNumber.astro +114 -114
- 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 +82 -70
- 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 +79 -79
- package/src/env.d.ts +1 -1
- package/src/layouts/Layout.astro +60 -60
- 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 +55 -55
- package/src/pages/components/breadcrumbs.mdx +139 -139
- package/src/pages/components/buttons.mdx +236 -236
- 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 +48 -48
- package/src/pages/components/image.mdx +513 -513
- package/src/pages/components/input.mdx +45 -45
- package/src/pages/components/jumbatron.mdx +73 -73
- 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 +66 -66
- package/src/pages/components/product-tile.mdx +51 -51
- package/src/pages/components/quote.mdx +33 -33
- package/src/pages/components/slimbanner.mdx +29 -29
- 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 +47 -47
- package/src/pages/index.astro +125 -125
- package/src/pages/patterns/introduction.mdx +60 -60
- package/src/pwa.ts +12 -12
- package/src/styles/_variables.scss +66 -66
- package/src/styles/base/_base.scss +184 -184
- package/src/styles/base/_typography.scss +70 -70
- package/src/styles/base/grid.scss +98 -98
- package/src/styles/content.scss +64 -64
- package/src/styles/main.scss +7 -7
- package/tailwind.config.cjs +8 -8
- package/tsconfig.json +11 -11
- package/uno.config.ts +252 -252
|
@@ -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 |
|