spoko-design-system 1.18.1 → 1.20.0

package/src/components/Jumbotron/variants/Hero.astro

@@ -28,7 +28,7 @@ const heightClass = slim ? 'py-6 min-h-32' : 'py-8 h-56 sm:h-72 md:max-h-72';
   <div class:list={['xl:container mx-auto px-3.5 md:px-8 items-center flex', heightClass]}>
     <header class="relative z-10 text-white">
       <h1
-        class="font-headlight text-3xl sm:text-4xl md:text-5xl xl:text-6xl mt-1 line-clamp-3 leading-tight"
+        class="font-headlight text-7.5 sm:text-8 md:text-10 xl:text-12 mt-1 line-clamp-3 leading-tight"
         set:html={title}
       />
       {description && <div class="jumbotron-description mt-4" set:html={description} />}
@@ -36,3 +36,11 @@ const heightClass = slim ? 'py-6 min-h-32' : 'py-8 h-56 sm:h-72 md:max-h-72';
     </header>
   </div>
 </div>
+
+<style scoped>
+  .font-headlight {
+    b {
+      font-family: 'vw_headregular', sans-serif;
+    }
+  }
+</style>

package/src/components/Jumbotron/variants/PostSplit.astro

@@ -142,3 +142,11 @@ const cleanTitle = stripHtml(title);
     </header>
   </div>
 </div>
+
+<style scoped>
+  .jumbotron-split-title {
+    b {
+      font-family: 'vw_headregular', sans-serif;
+    }
+  }
+</style>

package/src/pages/components/badges.mdx

@@ -1,57 +1,57 @@
----
-title: "Badges"
-layout: "../../layouts/MainLayout.astro"
-
----
-import Badges from '../../components/Badges.vue'
-
-# Product badges
-Extra product badges (labels).
-
-## Badges - GTI
-<div class="component-preview">
-    <div class="relative min-h-19">
-            <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
-    </div>
-</div>
-
-```js
-<div class="relative min-h-10">
-    <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
-</div>
-
-```
-
-
-## Badge on image
-<div class="component-preview">
-<div class="relative">
-    <img src="https://placehold.co/300x200" alt="image alt" />
-    <Badges badges={['Motorsport']} class="top-2" />
-</div>
-</div>
-
-```js
-<div class="relative">
-    <img src="https://placehold.co/300x200" alt="image alt" />
-    <Badges badges={['Motorsport']} class="top-2" />
-</div>
-
-```
-
-
-## Few badges on image
-<div class="component-preview">
-<div class="relative">
-    <img src="https://placehold.co/300x200" alt="image alt" />
-    <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
-</div>
-</div>
-
-```js
-<div class="relative">
-    <img src="https://placehold.co/300x200" alt="image alt" />
-    <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
-</div>
-
-```
+---
+title: "Badges"
+layout: "../../layouts/MainLayout.astro"
+
+---
+import Badges from '../../components/Badges.vue'
+
+# Product badges
+Extra product badges (labels).
+
+## Badges - GTI
+<div class="component-preview">
+    <div class="relative min-h-19">
+            <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
+    </div>
+</div>
+
+```js
+<div class="relative min-h-10">
+    <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
+</div>
+
+```
+
+
+## Badge on image
+<div class="component-preview">
+<div class="relative">
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport']} class="top-2" />
+</div>
+</div>
+
+```js
+<div class="relative">
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport']} class="top-2" />
+</div>
+
+```
+
+
+## Few badges on image
+<div class="component-preview">
+<div class="relative">
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
+</div>
+</div>
+
+```js
+<div class="relative">
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
+</div>
+
+```

package/src/pages/components/breadcrumbs.mdx

@@ -1,139 +1,139 @@
----
-title: "Breadcrumbs"
-layout: "../../layouts/MainLayout.astro"
-
-
----
-import Breadcrumbs from '../../components/Breadcrumbs.vue'
-
-# Breadcrumbs
-
-Breadcrumbs component with BreadcrumbList Microdata.
-
-Structured Data for Breadcrumbs that produce a Rich Snippet (in this case breadcrumbs) in search results that are clickable, too!
-
-#
-
-https://schema.org/BreadcrumbList
-
-https://schema.org/ListItem
-
-
-
-## Show back
-
-<div class="component-preview">
-    <Breadcrumbs
-      breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
-      product-number="6R0XXXXXX"
-      class="py-1 order-0 px-1 max-w-full flex bg-white"
-      show-back
-      text-back="Back"
-    />
-</div>
-
-```js
-<Breadcrumbs
-  breadcrumbs={ 
-    [ 
-      {"name": "Level1", "path": "level1"},
-      {"name": "Level 2", "path": "level2"},
-      {"name": "Level 3", "path": "level3"}
-    ] 
-  }
-  product-number="6R0XXXXXX"
-  class="py-1 order-0 px-1 max-w-full flex bg-white"
-  show-back
-  text-back="Back"
-/>
-```
-
-
-## Show home
-
-<div class="component-preview">
-    <Breadcrumbs
-      breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
-      product-number="6R0XXXXXX"
-      class="py-1 order-0 px-1 max-w-full flex bg-white"
-      show-home
-    />
-</div>
-
-```js
-<Breadcrumbs
-  breadcrumbs={ 
-    [ 
-      {"name": "Level1", "path": "level 1"},
-      {"name": "Level 2", "path": "level2"},
-      {"name": "Level 3", "path": "level3"}
-    ] 
-  }
-  product-number="6R0XXXXXX"
-  class="py-1 order-0 px-1 max-w-full flex bg-white"
-  show-home
-/>
-```
-
-
-## Simply
-
-<div class="component-preview">
-    <Breadcrumbs
-      breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
-      product-number="6R0XXXXXX"
-      class="py-1 order-0 px-1 max-w-full flex bg-white"
-    />
-</div>
-
-```js
-<Breadcrumbs
-  breadcrumbs={ 
-    [ 
-      {"name": "Level1", "path": "level 1"},
-      {"name": "Level 2", "path": "level2"},
-      {"name": "Level 3", "path": "level3"}
-    ] 
-  }
-  product-number="6R0XXXXXX"
-  class="py-1 order-0 px-1 max-w-full flex bg-white"
-  show-back
-  text-back="Back"
-/>
-```
-
-
-### Schema support:
-- https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=en
-
-#### Example
-- https://validator.schema.org/?hl=en-US#url=https%3A%2F%2Fcatalog.polo.blue%2FN10733102%2F
-
-
-| @type            | BreadcrumbList                                                                    |
-| ---------------- | --------------------------------------------------------------------------------- |
-| **itemListElement**  |                                                                                   |
-| **@type**          | ListItem                                                                          |
-| **name**             | Electrical, Lighting, Telematics                                                  |
-| **position**         | 1                                                                                 |
-| **item**             |                                                                                   |
-| **@type**            | Thing                                                                             |
-| **@id**              | https://catalog.polo.blue/electrical-lighting-telematics/                         |
-| **itemListElement**  |                                                                                   |
-| **@type**            | ListItem                                                                          |
-| **name**             | Exterior Lighting                                                                 |
-| **position**         | 2                                                                                 |
-| **item**             |                                                                                   |
-| **@type**            | Thing                                                                             |
-| **@id**              | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/       |
-| **itemListElement**  |                                                                                   |
-| **@type**            | ListItem                                                                          |
-| **name**             | Bulbs                                                                             |
-| **position**         | 3                                                                                 |
-| **item**             |                                                                                   |
-| **@type**            | Thing                                                                             |
-| **@id**              | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/bulbs/ |
-| **itemListElement**  |                                                                                   |
-| **@type**            | ListItem                                                                          |
-| **name**             | Bulb carrier with bulb; silver lens                                               |
-| **position**         | 4                                                                                 |
+---
+title: "Breadcrumbs"
+layout: "../../layouts/MainLayout.astro"
+
+
+---
+import Breadcrumbs from '../../components/Breadcrumbs.vue'
+
+# Breadcrumbs
+
+Breadcrumbs component with BreadcrumbList Microdata.
+
+Structured Data for Breadcrumbs that produce a Rich Snippet (in this case breadcrumbs) in search results that are clickable, too!
+
+#
+
+https://schema.org/BreadcrumbList
+
+https://schema.org/ListItem
+
+
+
+## Show back
+
+<div class="component-preview">
+    <Breadcrumbs
+      breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
+      product-number="6R0XXXXXX"
+      class="py-1 order-0 px-1 max-w-full flex bg-white"
+      show-back
+      text-back="Back"
+    />
+</div>
+
+```js
+<Breadcrumbs
+  breadcrumbs={ 
+    [ 
+      {"name": "Level1", "path": "level1"},
+      {"name": "Level 2", "path": "level2"},
+      {"name": "Level 3", "path": "level3"}
+    ] 
+  }
+  product-number="6R0XXXXXX"
+  class="py-1 order-0 px-1 max-w-full flex bg-white"
+  show-back
+  text-back="Back"
+/>
+```
+
+
+## Show home
+
+<div class="component-preview">
+    <Breadcrumbs
+      breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
+      product-number="6R0XXXXXX"
+      class="py-1 order-0 px-1 max-w-full flex bg-white"
+      show-home
+    />
+</div>
+
+```js
+<Breadcrumbs
+  breadcrumbs={ 
+    [ 
+      {"name": "Level1", "path": "level 1"},
+      {"name": "Level 2", "path": "level2"},
+      {"name": "Level 3", "path": "level3"}
+    ] 
+  }
+  product-number="6R0XXXXXX"
+  class="py-1 order-0 px-1 max-w-full flex bg-white"
+  show-home
+/>
+```
+
+
+## Simply
+
+<div class="component-preview">
+    <Breadcrumbs
+      breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
+      product-number="6R0XXXXXX"
+      class="py-1 order-0 px-1 max-w-full flex bg-white"
+    />
+</div>
+
+```js
+<Breadcrumbs
+  breadcrumbs={ 
+    [ 
+      {"name": "Level1", "path": "level 1"},
+      {"name": "Level 2", "path": "level2"},
+      {"name": "Level 3", "path": "level3"}
+    ] 
+  }
+  product-number="6R0XXXXXX"
+  class="py-1 order-0 px-1 max-w-full flex bg-white"
+  show-back
+  text-back="Back"
+/>
+```
+
+
+### Schema support:
+- https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=en
+
+#### Example
+- https://validator.schema.org/?hl=en-US#url=https%3A%2F%2Fcatalog.polo.blue%2FN10733102%2F
+
+
+| @type            | BreadcrumbList                                                                    |
+| ---------------- | --------------------------------------------------------------------------------- |
+| **itemListElement**  |                                                                                   |
+| **@type**          | ListItem                                                                          |
+| **name**             | Electrical, Lighting, Telematics                                                  |
+| **position**         | 1                                                                                 |
+| **item**             |                                                                                   |
+| **@type**            | Thing                                                                             |
+| **@id**              | https://catalog.polo.blue/electrical-lighting-telematics/                         |
+| **itemListElement**  |                                                                                   |
+| **@type**            | ListItem                                                                          |
+| **name**             | Exterior Lighting                                                                 |
+| **position**         | 2                                                                                 |
+| **item**             |                                                                                   |
+| **@type**            | Thing                                                                             |
+| **@id**              | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/       |
+| **itemListElement**  |                                                                                   |
+| **@type**            | ListItem                                                                          |
+| **name**             | Bulbs                                                                             |
+| **position**         | 3                                                                                 |
+| **item**             |                                                                                   |
+| **@type**            | Thing                                                                             |
+| **@id**              | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/bulbs/ |
+| **itemListElement**  |                                                                                   |
+| **@type**            | ListItem                                                                          |
+| **name**             | Bulb carrier with bulb; silver lens                                               |
+| **position**         | 4                                                                                 |