spoko-design-system 0.2.20 → 0.2.21

package/src/pages/components/product-number.mdx

@@ -1,66 +1,66 @@
----
-title: "ProductNumber"
-layout: "../../layouts/MainLayout.astro"
----
-import ProductNumber from '../../components/ProductNumber.astro'
-
-# ProductNumber
-
-ProductNumber - with additional formatting adding spacing for Volkswagen product numbers + additional copy button for easier copying.
-
-#
-<div class="component-preview">
-  <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-4 w-full bg-white p-y-5 px-4">
-    <ProductNumber
-      big
-      productNumber="6R0920870F"
-      class="mb-2"
-    />
-
-    <ProductNumber
-      big
-      isPdp
-      productNumber="000051443F"
-      class="mb-2"
-    />
-
-    <ProductNumber
-      isPdp
-      productNumber="WHT005227"
-      class="mb-2"
-    />
-
-    <ProductNumber
-      isPdp
-      productNumber="N0385491"
-      class="mb-2"
-    />
-  </div>
-</div>
-
-```js
-<ProductNumber
-  big
-  productNumber="6R0920870F"
-  class="mb-2"
-/>
-
-<ProductNumber
-  big
-  isPdp
-  productNumber="000051443F"
-  class="mb-2"
-/>
-
-<ProductNumber
-  isPdp
-  productNumber="WHT005227"
-  class="mb-2"
-/>
-
-<ProductNumber
-  isPdp
-  productNumber="N0385491"
-  class="mb-2"
-/>
-```
+---
+title: "ProductNumber"
+layout: "../../layouts/MainLayout.astro"
+---
+import ProductNumber from '../../components/ProductNumber.astro'
+
+# ProductNumber
+
+ProductNumber - with additional formatting adding spacing for Volkswagen product numbers + additional copy button for easier copying.
+
+#
+<div class="component-preview">
+  <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-4 w-full bg-white p-y-5 px-4">
+    <ProductNumber
+      big
+      productNumber="6R0920870F"
+      class="mb-2"
+    />
+
+    <ProductNumber
+      big
+      isPdp
+      productNumber="000051443F"
+      class="mb-2"
+    />
+
+    <ProductNumber
+      isPdp
+      productNumber="WHT005227"
+      class="mb-2"
+    />
+
+    <ProductNumber
+      isPdp
+      productNumber="N0385491"
+      class="mb-2"
+    />
+  </div>
+</div>
+
+```js
+<ProductNumber
+  big
+  productNumber="6R0920870F"
+  class="mb-2"
+/>
+
+<ProductNumber
+  big
+  isPdp
+  productNumber="000051443F"
+  class="mb-2"
+/>
+
+<ProductNumber
+  isPdp
+  productNumber="WHT005227"
+  class="mb-2"
+/>
+
+<ProductNumber
+  isPdp
+  productNumber="N0385491"
+  class="mb-2"
+/>
+```

package/src/pages/components/product-tile.mdx

@@ -1,51 +1,51 @@
----
-title: "ProductTile"
-layout: "../../layouts/MainLayout.astro"
----
-import ProductTile from '../../components/ProductTile.astro'
-
-export const productObject = {
-  name: 'Combi-instrument MFA+',
-  url: 'https://google.com',
-  number: '6R0920870F',
-  photo: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337'
-}
-
-# ProductTile
-
-ProductTile - product link component which can be used for carousels, section with related products, recently added etc.
-
-It requires a container with a specific width - it's best to set it directly in the carousel's `<swiper-slide>` tag.
-#
-
-<div class="component-preview">
-  <div class="flex flex-wrap bg-white w-full p-4 pb-0">
-
-      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
-        <ProductTile productObject={productObject} />
-      </div>
-      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
-        <ProductTile productObject={productObject} />
-      </div>
-      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
-        <ProductTile productObject={productObject} />
-      </div>
-      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
-        <ProductTile productObject={productObject} />
-      </div>
-      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
-        <ProductTile productObject={productObject} />
-      </div>
-  </div>
-</div>
-
-```js
-export const productObject = {
-  name: 'Combi-instrument MFA+',
-  url: 'https://google.com',
-  number: '6R0920870F',
-  photo: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337'
-}
-
-<ProductTile productObject={productObject} />
-```
+---
+title: "ProductTile"
+layout: "../../layouts/MainLayout.astro"
+---
+import ProductTile from '../../components/ProductTile.astro'
+
+export const productObject = {
+  name: 'Combi-instrument MFA+',
+  url: 'https://google.com',
+  number: '6R0920870F',
+  photo: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337'
+}
+
+# ProductTile
+
+ProductTile - product link component which can be used for carousels, section with related products, recently added etc.
+
+It requires a container with a specific width - it's best to set it directly in the carousel's `<swiper-slide>` tag.
+#
+
+<div class="component-preview">
+  <div class="flex flex-wrap bg-white w-full p-4 pb-0">
+
+      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+        <ProductTile productObject={productObject} />
+      </div>
+      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+        <ProductTile productObject={productObject} />
+      </div>
+      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+        <ProductTile productObject={productObject} />
+      </div>
+      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+        <ProductTile productObject={productObject} />
+      </div>
+      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+        <ProductTile productObject={productObject} />
+      </div>
+  </div>
+</div>
+
+```js
+export const productObject = {
+  name: 'Combi-instrument MFA+',
+  url: 'https://google.com',
+  number: '6R0920870F',
+  photo: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337'
+}
+
+<ProductTile productObject={productObject} />
+```

package/src/pages/components/quote.mdx

@@ -1,33 +1,33 @@
----
-title: "Quote"
-layout: "../../layouts/MainLayout.astro"
-
----
-
-import Quote from '../../components/Quote.vue'
-
-
-# Quote
-
-Simple Quote component with left border in primary color.
-
-<div class="component-preview">
-    <Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
-</div>
-
-
-```html
-<Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
-```
-
-#
-
-
-<div class="component-preview">
-    <Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
-</div>
-
-
-```html
-<Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
-```
+---
+title: "Quote"
+layout: "../../layouts/MainLayout.astro"
+
+---
+
+import Quote from '../../components/Quote.vue'
+
+
+# Quote
+
+Simple Quote component with left border in primary color.
+
+<div class="component-preview">
+    <Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+</div>
+
+
+```html
+<Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+```
+
+#
+
+
+<div class="component-preview">
+    <Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+</div>
+
+
+```html
+<Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+```

package/src/pages/components/slimbanner.mdx

@@ -1,29 +1,29 @@
----
-title: "SlimBanner"
-layout: "../../layouts/MainLayout.astro"
----
-import SlimBanner from '../../components/SlimBanner.vue'
-
-# SlimBanner
-
-SlimBanner - solidarity with Ukraine.
-
-<div class="component-preview">
-  <SlimBanner
-    class="w-full"
-    client:load
-    showCloseButton
-    transition:name="slim-banner"
-    transition:persist
-  />
-</div>
-
-```js
-<SlimBanner
-  class="w-full"
-  client:load
-  showCloseButton
-  transition:name="slim-banner"
-  transition:persist
-/>
-```
+---
+title: "SlimBanner"
+layout: "../../layouts/MainLayout.astro"
+---
+import SlimBanner from '../../components/SlimBanner.vue'
+
+# SlimBanner
+
+SlimBanner - solidarity with Ukraine.
+
+<div class="component-preview">
+  <SlimBanner
+    class="w-full"
+    client:load
+    showCloseButton
+    transition:name="slim-banner"
+    transition:persist
+  />
+</div>
+
+```js
+<SlimBanner
+  class="w-full"
+  client:load
+  showCloseButton
+  transition:name="slim-banner"
+  transition:persist
+/>
+```

package/src/pages/components/table.mdx

@@ -1,109 +1,109 @@
----
-title: "Table"
-layout: "../../layouts/MainLayout.astro"
-
----
-
-import Table from '../../components/Table.vue'
-export const tableData = [
-  {
-    id: 1,
-    name: "Lorem Ipsum",
-    email: "lorem@email.com",
-  },
-  {
-    id: 2,
-    name: "Chuck Norris",
-    email: "ipsum@email.com",
-  },
-  {
-    id: 3,
-    name: "Ipsum Lorem",
-    email: "lorem@email.com",
-  }
-];
-
-export const tableDataSecondary = [
-  {
-    name: "Lorem Ipsum",
-    email: "lorem@email.com",
-  },
-  {
-    name: "Chuck Norris",
-    email: "ipsum@email.com",
-  },
-  {
-    name: "Ipsum Lorem",
-    email: "lorem@email.com",
-  }
-];
-
-
-# Table
-
-Simple table based on JSON data object.
-
-<div class="component-preview">
-    <Table data={tableData}></Table>
-</div>
-
-## Code
-
-```ts
-const tableData = [
-  {
-    id: 1,
-    name: "Lorem Ipsum",
-    email: "lorem@email.com",
-  },
-  {
-    id: 2,
-    name: "Chuck Norris",
-    email: "ipsum@email.com",
-  },
-  {
-    id: 3,
-    name: "Ipsum Lorem",
-    email: "lorem@email.com",
-  }
-];
-
-```
-
-```html
-  <!-- Astro -->
-  <Table data={tableData} />
-
-  <!-- Vue -->
-  <Table :data="tableData" />
-```
-
-
-
-# Table
-
-<div class="component-preview">
-    <Table data={tableDataSecondary} />
-</div>
-
-## Code
-
-```ts
-const tableDataSecondary = [
-  {
-    name: "Lorem Ipsum",
-    email: "lorem@email.com",
-  },
-  {
-    name: "Chuck Norris",
-    email: "ipsum@email.com",
-  },
-  {
-    name: "Ipsum Lorem",
-    email: "lorem@email.com",
-  }
-];
-
-
-<Table data={tableDataSecondary} />
+---
+title: "Table"
+layout: "../../layouts/MainLayout.astro"
+
+---
+
+import Table from '../../components/Table.vue'
+export const tableData = [
+  {
+    id: 1,
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    id: 2,
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    id: 3,
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
+
+export const tableDataSecondary = [
+  {
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
+
+
+# Table
+
+Simple table based on JSON data object.
+
+<div class="component-preview">
+    <Table data={tableData}></Table>
+</div>
+
+## Code
+
+```ts
+const tableData = [
+  {
+    id: 1,
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    id: 2,
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    id: 3,
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
+
+```
+
+```html
+  <!-- Astro -->
+  <Table data={tableData} />
+
+  <!-- Vue -->
+  <Table :data="tableData" />
+```
+
+
+
+# Table
+
+<div class="component-preview">
+    <Table data={tableDataSecondary} />
+</div>
+
+## Code
+
+```ts
+const tableDataSecondary = [
+  {
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
+
+
+<Table data={tableDataSecondary} />
 ```

package/src/pages/core/colors.mdx

@@ -1,10 +1,10 @@
----
-layout: ../../layouts/MainLayout.astro
----
-
-import MainColors from '../../components/MainColors.vue';
-
-<h1>Colors</h1>
-<p>Base colors.</p>
-
-<MainColors class="mt-8" />
+---
+layout: ../../layouts/MainLayout.astro
+---
+
+import MainColors from '../../components/MainColors.vue';
+
+<h1>Colors</h1>
+<p>Base colors.</p>
+
+<MainColors class="mt-8" />