spoko-design-system 0.9.6 → 1.0.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,116 +1,116 @@
----
-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 = ["PJ4", "CA2", "C4E", "2JZ"]
-
-export const tableItems = [
-  {
-    id: "number",
-    name: "Part number",
-    value: "6R0071609GRU",
-  },
-  {
-    id: "prcodes",
-    name: "PR-Codes",
-    value: ["PJ4", "CA2", "C4E", "2JZ"],
-  },
-  {
-    id: "color",
-    name: "Color",
-    value: "Black",
-  },
-  {
-    id: "position",
-    name: "Fitting position",
-    value: "Front axle",
-  },
-  {
-    id: "brake-disck-thicnkess",
-    name: "Brake disc thicknes",
-    value: "22 mm",
-  },
-  {
-    id: "weight",
-    name: "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 tableItems = [
-  {
-    id: "number",
-    name: "Part number",
-    value: "6R0071609GRU",
-  },
-  {
-    id: "prcodes",
-    name: "PR-Codes",
-    value: ["PJ4", "CA2", "C4E"]
-  },
-  {
-    id: "color",
-    name: "Color",
-    value: "Black",
-  },
-  {
-    id: "position",
-    name: "Fitting position",
-    value: "Front axle",
-  },
-  {
-    id: "brake-disck-thicnkess",
-    name: "Brake disc thicknes",
-    value: "22 mm",
-  },
-  {
-    id: "weight",
-    name: "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>
+---
+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 = ["PJ4", "CA2", "C4E", "2JZ"]
+
+export const tableItems = [
+  {
+    id: "number",
+    name: "Part number",
+    value: "6R0071609GRU",
+  },
+  {
+    id: "prcodes",
+    name: "PR-Codes",
+    value: ["PJ4", "CA2", "C4E", "2JZ"],
+  },
+  {
+    id: "color",
+    name: "Color",
+    value: "Black",
+  },
+  {
+    id: "position",
+    name: "Fitting position",
+    value: "Front axle",
+  },
+  {
+    id: "brake-disck-thicnkess",
+    name: "Brake disc thicknes",
+    value: "22 mm",
+  },
+  {
+    id: "weight",
+    name: "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 tableItems = [
+  {
+    id: "number",
+    name: "Part number",
+    value: "6R0071609GRU",
+  },
+  {
+    id: "prcodes",
+    name: "PR-Codes",
+    value: ["PJ4", "CA2", "C4E"]
+  },
+  {
+    id: "color",
+    name: "Color",
+    value: "Black",
+  },
+  {
+    id: "position",
+    name: "Fitting position",
+    value: "Front axle",
+  },
+  {
+    id: "brake-disck-thicnkess",
+    name: "Brake disc thicknes",
+    value: "22 mm",
+  },
+  {
+    id: "weight",
+    name: "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>
  ```

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

@@ -1,38 +1,38 @@
----
-title: "DetailsList"
-layout: "../../layouts/MainLayout.astro"
----
-
-import FeaturesList from '../../components/FeaturesList.vue'
-
-export const items = [
-  "do ad dolor exercitation dolor eu eiusmod commodo dolor aliqua deserunt aliquip reprehenderit minim. Lorem fugiat deserunt reprehenderit non velit dolore voluptate nostrud aliquip consectetur minim. Labore dolore anim excepteur sit nostrud deserunt eu occaecat.",
-  "cillum dolore cupidatat ad mollit excepteur quis. Non nisi consequat deserunt dolore laboris est culpa. Elit eu aute magna sunt cupidatat officia do adipisicing quis velit. Consectetur deserunt et pariatur ea laborum occaecat veniam proident elit anim dolor eu nostrud voluptate. Do laboris nisi pariatur ipsum est ad anim ex quis officia est ut.",
-  "dolore cupidatat ad mollit excepteur quis"
-];
-
-# Product Details Table
-
-<div class="component-preview flex-wrap">
- <div class="bg-white rounded-lg p-8">
-     <p class="mb-4">Dolor amet excepteur id quis ut. Nisi incididunt occaecat est officia ea do voluptate deserunt aliqua cillum duis eiusmod. Officia veniam nisi mollit exercitation consequat ex fugiat ea veniam in culpa aliquip deserunt ea. Magna elit aliqua reprehenderit anim. Ullamco do nostrud nulla consectetur dolor fugiat adipisicing adipisicing. Reprehenderit est do culpa eu non quis. Veniam anim amet excepteur in sit et eiusmod. Id amet adipisicing amet ut eiusmod et. Tempor Lorem amet aute anim magna. Do ea aute consectetur fugiat nulla laboris pariatur ad enim anim. Dolor culpa veniam aliquip amet aute sunt excepteur consectetur sit excepteur excepteur Lorem. Ipsum esse ad aute nulla eu do incididunt eiusmod nulla sunt labore id cupidatat incididunt.</p>
-    <FeaturesList items={items} caption="Main features"/>
- </div>
-</div>
-
-```ts
- const items = [
-  "do ad dolor exercitation dolor eu eiusmod commodo dolor aliqua deserunt aliquip reprehenderit minim. Lorem fugiat deserunt reprehenderit non velit dolore voluptate nostrud aliquip consectetur minim. Labore dolore anim excepteur sit nostrud deserunt eu occaecat.",
-  "cillum dolore cupidatat ad mollit excepteur quis. Non nisi consequat deserunt dolore laboris est culpa. Elit eu aute magna sunt cupidatat officia do adipisicing quis velit. Consectetur deserunt et pariatur ea laborum occaecat veniam proident elit anim dolor eu nostrud voluptate. Do laboris nisi pariatur ipsum est ad anim ex quis officia est ut.",
-  "dolore cupidatat ad mollit excepteur quis"
-];
-
-```
-### Astro:
-```html
-<FeaturesList items={items} caption="Main features" />
- ```
- ### Vue:
-```html
-<FeaturesList :items="items" caption="Main features" />
+---
+title: "DetailsList"
+layout: "../../layouts/MainLayout.astro"
+---
+
+import FeaturesList from '../../components/FeaturesList.vue'
+
+export const items = [
+  "do ad dolor exercitation dolor eu eiusmod commodo dolor aliqua deserunt aliquip reprehenderit minim. Lorem fugiat deserunt reprehenderit non velit dolore voluptate nostrud aliquip consectetur minim. Labore dolore anim excepteur sit nostrud deserunt eu occaecat.",
+  "cillum dolore cupidatat ad mollit excepteur quis. Non nisi consequat deserunt dolore laboris est culpa. Elit eu aute magna sunt cupidatat officia do adipisicing quis velit. Consectetur deserunt et pariatur ea laborum occaecat veniam proident elit anim dolor eu nostrud voluptate. Do laboris nisi pariatur ipsum est ad anim ex quis officia est ut.",
+  "dolore cupidatat ad mollit excepteur quis"
+];
+
+# Product Details Table
+
+<div class="component-preview flex-wrap">
+ <div class="bg-white rounded-lg p-8">
+     <p class="mb-4">Dolor amet excepteur id quis ut. Nisi incididunt occaecat est officia ea do voluptate deserunt aliqua cillum duis eiusmod. Officia veniam nisi mollit exercitation consequat ex fugiat ea veniam in culpa aliquip deserunt ea. Magna elit aliqua reprehenderit anim. Ullamco do nostrud nulla consectetur dolor fugiat adipisicing adipisicing. Reprehenderit est do culpa eu non quis. Veniam anim amet excepteur in sit et eiusmod. Id amet adipisicing amet ut eiusmod et. Tempor Lorem amet aute anim magna. Do ea aute consectetur fugiat nulla laboris pariatur ad enim anim. Dolor culpa veniam aliquip amet aute sunt excepteur consectetur sit excepteur excepteur Lorem. Ipsum esse ad aute nulla eu do incididunt eiusmod nulla sunt labore id cupidatat incididunt.</p>
+    <FeaturesList items={items} caption="Main features"/>
+ </div>
+</div>
+
+```ts
+ const items = [
+  "do ad dolor exercitation dolor eu eiusmod commodo dolor aliqua deserunt aliquip reprehenderit minim. Lorem fugiat deserunt reprehenderit non velit dolore voluptate nostrud aliquip consectetur minim. Labore dolore anim excepteur sit nostrud deserunt eu occaecat.",
+  "cillum dolore cupidatat ad mollit excepteur quis. Non nisi consequat deserunt dolore laboris est culpa. Elit eu aute magna sunt cupidatat officia do adipisicing quis velit. Consectetur deserunt et pariatur ea laborum occaecat veniam proident elit anim dolor eu nostrud voluptate. Do laboris nisi pariatur ipsum est ad anim ex quis officia est ut.",
+  "dolore cupidatat ad mollit excepteur quis"
+];
+
+```
+### Astro:
+```html
+<FeaturesList items={items} caption="Main features" />
+ ```
+ ### Vue:
+```html
+<FeaturesList :items="items" caption="Main features" />
  ```

package/src/pages/components/flags.mdx

@@ -1,50 +1,50 @@
----
-title: "FuckRussia"
-layout: "../../layouts/MainLayout.astro"
----
-import FlagPL from '../../components/flags/FlagPL.vue'
-import FlagUA from '../../components/flags/FlagUA.vue'
-import { Icon } from 'astro-icon/components'
-
-# Flags
-Flags based on CSS (UnoCSS) classes only.
-
-## Pure CSS flags:
-### Flag PL
-<div class="component-preview">
-        <FlagPL />
-</div>
-
-```js
-<FlagPL />
-```
-
-### Flag UA
-<div class="component-preview">
-        <FlagUA />
-</div>
-
-```js
-<FlagUA />
-```
-
-## Circle icon flags with shadow
-<div class="component-preview">
-        <div class="bg-white p-6 columns-8 md:columns-16 w-full rounded-full">
-                <Icon name="circle-flags:pl" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:fi" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:nl" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:no" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:ua" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:uk" class="shadow-md rounded-full" />
-        </div>
-</div>
-
-```js
-                <Icon name="circle-flags:pl" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:fi" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:nl" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:no" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:ua" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:uk" class="shadow-md rounded-full" />
+---
+title: "FuckRussia"
+layout: "../../layouts/MainLayout.astro"
+---
+import FlagPL from '../../components/flags/FlagPL.vue'
+import FlagUA from '../../components/flags/FlagUA.vue'
+import { Icon } from 'astro-icon/components'
+
+# Flags
+Flags based on CSS (UnoCSS) classes only.
+
+## Pure CSS flags:
+### Flag PL
+<div class="component-preview">
+        <FlagPL />
+</div>
+
+```js
+<FlagPL />
+```
+
+### Flag UA
+<div class="component-preview">
+        <FlagUA />
+</div>
+
+```js
+<FlagUA />
+```
+
+## Circle icon flags with shadow
+<div class="component-preview">
+        <div class="bg-white p-6 columns-8 md:columns-16 w-full rounded-full">
+                <Icon name="circle-flags:pl" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:fi" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:nl" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:no" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:ua" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:uk" class="shadow-md rounded-full" />
+        </div>
+</div>
+
+```js
+                <Icon name="circle-flags:pl" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:fi" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:nl" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:no" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:ua" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:uk" class="shadow-md rounded-full" />
 ```