spoko-design-system 1.18.1 → 1.20.0

package/src/pages/components/carousel.mdx

@@ -1,62 +1,62 @@
----
-title: "Carousel"
-layout: "../../layouts/MainLayout.astro"
----
-import Carousel from '../../components/Carousel.astro'
-import ProductCarousel from '../../components/ProductCarousel.astro'
-
-# Carousel
-
-Carousel - modern carousel based on Swiper Element (Web Component)
-
-<div class="component-preview">
-     <Carousel />
-</div>
-
-```js
-<swiper-container
-  class="max-w-full w-full flex overflow-hidden"
-  grid-rows="1"
-  mousewheel-force-to-axis="true"
-  navigation="true"
-  pagination-type="fraction"
-  scrollbar="false"
-  slides-per-view="auto"
-  space-between="0"
->
-  <swiper-slide class="bg-blue-50 p-12 border-1 min-w-full">A</swiper-slide>
-  <swiper-slide class="bg-blue-100 p-12 border-1 min-w-full">B</swiper-slide>
-  <swiper-slide class="bg-blue-200 p-12 border-1 min-w-full">C</swiper-slide>
-  <swiper-slide class="bg-blue-300 p-12 border-1 min-w-full">D</swiper-slide>
-  <swiper-slide class="bg-blue-400 p-12 border-1 min-w-full">A</swiper-slide>
-</swiper-container>
-```
-#
-
-Find the code for this page in the `src/pages/components/carousel.mdx` file.
-
-
-## Product Carousel
-<div class="component-preview">
-  <ProductCarousel />
-</div>
-```html
-<div class="bg-white rounded-lg p-4 w-full">
-  <swiper-container
-    class="flex w-full max-w-full"
-    grid-rows="1"
-    mousewheel-force-to-axis="true"
-    navigation="false"
-    scrollbar="false"
-    slides-per-view="auto"
-    space-between="0"
-  >
-    <swiper-slide
-      class="carousel-product-tile"
-    >
-      <ProductTile productObject={productObject} />
-    </swiper-slide>
-    ...
-  </swiper-container>
-</div>
-```
+---
+title: "Carousel"
+layout: "../../layouts/MainLayout.astro"
+---
+import Carousel from '../../components/Carousel.astro'
+import ProductCarousel from '../../components/ProductCarousel.astro'
+
+# Carousel
+
+Carousel - modern carousel based on Swiper Element (Web Component)
+
+<div class="component-preview">
+     <Carousel />
+</div>
+
+```js
+<swiper-container
+  class="max-w-full w-full flex overflow-hidden"
+  grid-rows="1"
+  mousewheel-force-to-axis="true"
+  navigation="true"
+  pagination-type="fraction"
+  scrollbar="false"
+  slides-per-view="auto"
+  space-between="0"
+>
+  <swiper-slide class="bg-blue-50 p-12 border-1 min-w-full">A</swiper-slide>
+  <swiper-slide class="bg-blue-100 p-12 border-1 min-w-full">B</swiper-slide>
+  <swiper-slide class="bg-blue-200 p-12 border-1 min-w-full">C</swiper-slide>
+  <swiper-slide class="bg-blue-300 p-12 border-1 min-w-full">D</swiper-slide>
+  <swiper-slide class="bg-blue-400 p-12 border-1 min-w-full">A</swiper-slide>
+</swiper-container>
+```
+#
+
+Find the code for this page in the `src/pages/components/carousel.mdx` file.
+
+
+## Product Carousel
+<div class="component-preview">
+  <ProductCarousel />
+</div>
+```html
+<div class="bg-white rounded-lg p-4 w-full">
+  <swiper-container
+    class="flex w-full max-w-full"
+    grid-rows="1"
+    mousewheel-force-to-axis="true"
+    navigation="false"
+    scrollbar="false"
+    slides-per-view="auto"
+    space-between="0"
+  >
+    <swiper-slide
+      class="carousel-product-tile"
+    >
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    ...
+  </swiper-container>
+</div>
+```

package/src/pages/components/copyright.mdx

@@ -1,42 +1,42 @@
----
-title: "Copyright"
-layout: "../../layouts/MainLayout.astro"
----
-import Copyright from '../../components/Copyright.astro'
-
-# Copyright
-
-Copyright component
-<div class="component-preview">
-       <Copyright class="w-full">
-        <div slot="left-item">left item</div>
-        <div slot="middle-item">middle item</div>
-        <div slot="right-item">right item</div>
-       </Copyright>
-</div>
-
-```js
-        <Copyright class="w-full" >
-          <div slot="left-item">left item</div>
-          <div slot="middle-item">middle item</div>
-          <div slot="right-item">right item</div>
-        </Copyright>
-```
-#
-
-## Copyright with custom classes
-<div class="component-preview">
-       <Copyright class="z-0 w-full">
-        <div slot="left-item">left item</div>
-        <div slot="middle-item">middle item</div>
-        <div slot="right-item">right item</div>
-       </Copyright>
-</div>
-
-```js
-        <Copyright class="fixed bottom-0 z-0 w-full" >
-          <div slot="left-item">left item</div>
-          <div slot="middle-item">middle item</div>
-          <div slot="right-item">right item</div>
-        </Copyright>
-```
+---
+title: "Copyright"
+layout: "../../layouts/MainLayout.astro"
+---
+import Copyright from '../../components/Copyright.astro'
+
+# Copyright
+
+Copyright component
+<div class="component-preview">
+       <Copyright class="w-full">
+        <div slot="left-item">left item</div>
+        <div slot="middle-item">middle item</div>
+        <div slot="right-item">right item</div>
+       </Copyright>
+</div>
+
+```js
+        <Copyright class="w-full" >
+          <div slot="left-item">left item</div>
+          <div slot="middle-item">middle item</div>
+          <div slot="right-item">right item</div>
+        </Copyright>
+```
+#
+
+## Copyright with custom classes
+<div class="component-preview">
+       <Copyright class="z-0 w-full">
+        <div slot="left-item">left item</div>
+        <div slot="middle-item">middle item</div>
+        <div slot="right-item">right item</div>
+       </Copyright>
+</div>
+
+```js
+        <Copyright class="fixed bottom-0 z-0 w-full" >
+          <div slot="left-item">left item</div>
+          <div slot="middle-item">middle item</div>
+          <div slot="right-item">right item</div>
+        </Copyright>
+```

package/src/pages/components/details-list.mdx

@@ -1,208 +1,208 @@
----
-title: "DetailsList"
-layout: "../../layouts/MainLayout.astro"
----
-
-import ProductDetailsList from '../../components/ProductDetailsList.vue'
-import ProductNumber from "../../components/Product/ProductNumber.astro"
-import ProductCodes from '../../components/ProductCodes.vue'
-
-export const prcodesArray = [
-  { code: "PJ4", group: "BAV", description: "Disk brakes example" },
-  { code: "CA2", group: "STF", description: "Standard equipment" },
-  { code: "C4E", group: "AAU", description: "Air conditioning" },
-  { code: "2JZ", group: "STF", description: "Standard bumpers (e.g. Polo 6R Bluemotion)", variant_category: "BLUEMOTION" }
-]
-
-export const tableItems = [
-  {
-    id: "number",
-    label: "Part number",
-    value: "6R0071609GRU",
-  },
-  {
-    id: "prcodes",
-    label: "PR-Codes",
-    value: prcodesArray,
-  },
-  {
-    id: "color",
-    label: "Color",
-    value: "Black",
-  },
-  {
-    id: "position",
-    label: "Fitting position",
-    value: "Front axle",
-  },
-  {
-    id: "brake-disck-thicnkess",
-    label: "Brake disc thicknes",
-    value: "22 mm",
-  },
-  {
-    id: "weight",
-    label: "Weight",
-    value: "5.185 kg"
-  }
-];
-
-# Product Details Table
-
-<div class="component-preview flex-wrap">
- <div class="bg-white rounded-lg p-8">
-    <ProductDetailsList items={tableItems}>
-      <td slot="number" class="pt-0">
-        <ProductNumber  class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false} />
-      </td>
-      <td slot="prcodes" class="pt-0">
-        <ProductCodes prcodes={prcodesArray} />
-      </td>
-    </ProductDetailsList>
- </div>
-</div>
-
-```ts
-const prcodesArray = [
-  { code: "PJ4", group: "BAV", description: "Disk brakes example" },
-  { code: "CA2", group: "STF", description: "Standard equipment" },
-  { code: "C4E", group: "AAU", description: "Air conditioning" }
-]
-
-const tableItems = [
-  {
-    id: "number",
-    label: "Part number",
-    value: "6R0071609GRU",
-  },
-  {
-    id: "prcodes",
-    label: "PR-Codes",
-    value: prcodesArray
-  },
-  {
-    id: "color",
-    label: "Color",
-    value: "Black",
-  },
-  {
-    id: "position",
-    label: "Fitting position",
-    value: "Front axle",
-  },
-  {
-    id: "brake-disck-thicnkess",
-    label: "Brake disc thicknes",
-    value: "22 mm",
-  },
-  {
-    id: "weight",
-    label: "Weight",
-    value: "5.185 kg"
-  }
-];
-
-```
-### Astro:
-```js
-<ProductDetailsList items={tableItems}>
-  <td slot="number" class="pt-0">
-    <ProductNumber class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false} />
-  </td>
-  <td slot="prcodes" class="pt-0">
-    <ProductCodes prcodes={prcodesArray} />
-  </td>
-</ProductDetailsList>
- ```
-### Vue:
-```js
-<ProductDetailsList items={tableItems}>
-  <template #number >
-    <ProductNumber as="td" class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false}  />
-  </template>
-  <template #prcodes >
-    <ProductCodes as="td" prcodes={prcodesArray} />
-  </template>
-</ProductDetailsList>
-```
-
-## Props
-
-### items
-Array of table items with the following structure:
-- `id` (string): Unique identifier for the row, also used for slot names
-- `label` (string): Display name for the table header
-- `value` (unknown): The value to display - can be string, number, boolean, string array, or Link array
-- `type` (optional string): Set to `'links'` for link arrays
-- `isGenericArray` (optional boolean): Set to `true` for generic string arrays
-
-### caption
-Optional string for the table caption.
-
-## Value Types
-
-The component supports multiple value types:
-
-### Link Arrays
-Use `type: 'links'` to display an array of links with icons:
-
-```ts
-{
-  id: "resources",
-  label: "Resources",
-  type: "links",
-  value: [
-    { type: "blog", url: "https://example.com/blog", anchor: "Blog Post" },
-    { type: "youtube", url: "https://youtube.com/watch", anchor: "Video Tutorial" },
-    { type: "vimeo", url: "https://vimeo.com/123", anchor: "Demo Video" }
-  ]
-}
-```
-
-Supported link types with icons:
-- `blog` - Book text icon
-- `youtube` - YouTube icon
-- `vimeo` - Vimeo icon
-- Default - Generic link icon
-
-### Generic String Arrays
-Use `isGenericArray: true` to display a bulleted list:
-
-```ts
-{
-  id: "position",
-  label: "Fitting position",
-  isGenericArray: true,
-  value: ["Front axle", "Rear axle"]
-}
-```
-
-### HTML Values
-The component automatically detects and renders HTML strings:
-
-```ts
-{
-  id: "description",
-  label: "Description",
-  value: "Compatible with <span class='font-bold'>multiple models</span>"
-}
-```
-
-### Simple Values
-Strings, numbers, and booleans are displayed as-is:
-
-```ts
-{
-  id: "weight",
-  label: "Weight",
-  value: "5.185 kg"
-}
-```
-
-## Slots
-
-### caption
-Override the default caption with custom content.
-
-### Row-specific slots
+---
+title: "DetailsList"
+layout: "../../layouts/MainLayout.astro"
+---
+
+import ProductDetailsList from '../../components/ProductDetailsList.vue'
+import ProductNumber from "../../components/Product/ProductNumber.astro"
+import ProductCodes from '../../components/ProductCodes.vue'
+
+export const prcodesArray = [
+  { code: "PJ4", group: "BAV", description: "Disk brakes example" },
+  { code: "CA2", group: "STF", description: "Standard equipment" },
+  { code: "C4E", group: "AAU", description: "Air conditioning" },
+  { code: "2JZ", group: "STF", description: "Standard bumpers (e.g. Polo 6R Bluemotion)", variant_category: "BLUEMOTION" }
+]
+
+export const tableItems = [
+  {
+    id: "number",
+    label: "Part number",
+    value: "6R0071609GRU",
+  },
+  {
+    id: "prcodes",
+    label: "PR-Codes",
+    value: prcodesArray,
+  },
+  {
+    id: "color",
+    label: "Color",
+    value: "Black",
+  },
+  {
+    id: "position",
+    label: "Fitting position",
+    value: "Front axle",
+  },
+  {
+    id: "brake-disck-thicnkess",
+    label: "Brake disc thicknes",
+    value: "22 mm",
+  },
+  {
+    id: "weight",
+    label: "Weight",
+    value: "5.185 kg"
+  }
+];
+
+# Product Details Table
+
+<div class="component-preview flex-wrap">
+ <div class="bg-white rounded-lg p-8">
+    <ProductDetailsList items={tableItems}>
+      <td slot="number" class="pt-0">
+        <ProductNumber  class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false} />
+      </td>
+      <td slot="prcodes" class="pt-0">
+        <ProductCodes prcodes={prcodesArray} />
+      </td>
+    </ProductDetailsList>
+ </div>
+</div>
+
+```ts
+const prcodesArray = [
+  { code: "PJ4", group: "BAV", description: "Disk brakes example" },
+  { code: "CA2", group: "STF", description: "Standard equipment" },
+  { code: "C4E", group: "AAU", description: "Air conditioning" }
+]
+
+const tableItems = [
+  {
+    id: "number",
+    label: "Part number",
+    value: "6R0071609GRU",
+  },
+  {
+    id: "prcodes",
+    label: "PR-Codes",
+    value: prcodesArray
+  },
+  {
+    id: "color",
+    label: "Color",
+    value: "Black",
+  },
+  {
+    id: "position",
+    label: "Fitting position",
+    value: "Front axle",
+  },
+  {
+    id: "brake-disck-thicnkess",
+    label: "Brake disc thicknes",
+    value: "22 mm",
+  },
+  {
+    id: "weight",
+    label: "Weight",
+    value: "5.185 kg"
+  }
+];
+
+```
+### Astro:
+```js
+<ProductDetailsList items={tableItems}>
+  <td slot="number" class="pt-0">
+    <ProductNumber class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false} />
+  </td>
+  <td slot="prcodes" class="pt-0">
+    <ProductCodes prcodes={prcodesArray} />
+  </td>
+</ProductDetailsList>
+ ```
+### Vue:
+```js
+<ProductDetailsList items={tableItems}>
+  <template #number >
+    <ProductNumber as="td" class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false}  />
+  </template>
+  <template #prcodes >
+    <ProductCodes as="td" prcodes={prcodesArray} />
+  </template>
+</ProductDetailsList>
+```
+
+## Props
+
+### items
+Array of table items with the following structure:
+- `id` (string): Unique identifier for the row, also used for slot names
+- `label` (string): Display name for the table header
+- `value` (unknown): The value to display - can be string, number, boolean, string array, or Link array
+- `type` (optional string): Set to `'links'` for link arrays
+- `isGenericArray` (optional boolean): Set to `true` for generic string arrays
+
+### caption
+Optional string for the table caption.
+
+## Value Types
+
+The component supports multiple value types:
+
+### Link Arrays
+Use `type: 'links'` to display an array of links with icons:
+
+```ts
+{
+  id: "resources",
+  label: "Resources",
+  type: "links",
+  value: [
+    { type: "blog", url: "https://example.com/blog", anchor: "Blog Post" },
+    { type: "youtube", url: "https://youtube.com/watch", anchor: "Video Tutorial" },
+    { type: "vimeo", url: "https://vimeo.com/123", anchor: "Demo Video" }
+  ]
+}
+```
+
+Supported link types with icons:
+- `blog` - Book text icon
+- `youtube` - YouTube icon
+- `vimeo` - Vimeo icon
+- Default - Generic link icon
+
+### Generic String Arrays
+Use `isGenericArray: true` to display a bulleted list:
+
+```ts
+{
+  id: "position",
+  label: "Fitting position",
+  isGenericArray: true,
+  value: ["Front axle", "Rear axle"]
+}
+```
+
+### HTML Values
+The component automatically detects and renders HTML strings:
+
+```ts
+{
+  id: "description",
+  label: "Description",
+  value: "Compatible with <span class='font-bold'>multiple models</span>"
+}
+```
+
+### Simple Values
+Strings, numbers, and booleans are displayed as-is:
+
+```ts
+{
+  id: "weight",
+  label: "Weight",
+  value: "5.185 kg"
+}
+```
+
+## Slots
+
+### caption
+Override the default caption with custom content.
+
+### Row-specific slots
 Use the row's `id` as the slot name to override the default value rendering. The slot receives the entire row as slot props.