spoko-design-system 0.8.0 → 0.8.1

package/src/pages/components/modal.mdx

@@ -1,64 +1,64 @@
----
-title: "Modal"
-layout: "../../layouts/MainLayout.astro"
----
-import Modal from '../../components/Modal.astro'
-import Button from '../../components/Button.vue'
-import { Icon } from 'astro-icon/components';
-
-
-# Modal
-
-Native modal window based on `<dialog>` tag with `::backdrop` CSS pseudo-element (pure CSS3 modal window).
-#
-**Documentation:**
-
-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
-- https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop
-
-## Modal window
-
-
-<div class="component-preview">
-     <Modal id="dialog" open="Open modal">
-          <main slot="main">
-               <p>Some extra content you would like here</p>
-               <hr />
-          </main>
-          <Button primary slot="close" class="mt-4">Close</Button>
-     </Modal>
-</div>
-
-```js
-<Modal id="dialog" open="Open modal">
-    <main slot="main">
-        <p>Some extra content you would like here</p>
-        <hr />
-        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
-    </main>
-    <Button primary slot="close" class="mt-4">Close</Button>
-</Modal>
-```
-
-## Modal with different close button
-
-<div class="component-preview">
-     <Modal id="dialog2" open="Open modal">
-          <main slot="main">
-               <p>Some extra content you would like here</p>
-          </main>
-     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
-     </Modal>
-</div>
-
-```js
-<Modal id="dialog2" open="Open modal">
-    <main slot="main">
-        <p>Some extra content you would like here</p>
-        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
-    </main>
-     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
-</Modal>
-```
-
-
+---
+title: "Modal"
+layout: "../../layouts/MainLayout.astro"
+---
+import Modal from '../../components/Modal.astro'
+import Button from '../../components/Button.vue'
+import { Icon } from 'astro-icon/components';
+
+
+# Modal
+
+Native modal window based on `<dialog>` tag with `::backdrop` CSS pseudo-element (pure CSS3 modal window).
+#
+**Documentation:**
+
+- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+- https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop
+
+## Modal window
+
+
+<div class="component-preview">
+     <Modal id="dialog" open="Open modal">
+          <main slot="main">
+               <p>Some extra content you would like here</p>
+               <hr />
+          </main>
+          <Button primary slot="close" class="mt-4">Close</Button>
+     </Modal>
+</div>
+
+```js
+<Modal id="dialog" open="Open modal">
+    <main slot="main">
+        <p>Some extra content you would like here</p>
+        <hr />
+        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
+    </main>
+    <Button primary slot="close" class="mt-4">Close</Button>
+</Modal>
+```
+
+## Modal with different close button
+
+<div class="component-preview">
+     <Modal id="dialog2" open="Open modal">
+          <main slot="main">
+               <p>Some extra content you would like here</p>
+          </main>
+     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
+     </Modal>
+</div>
+
+```js
+<Modal id="dialog2" open="Open modal">
+    <main slot="main">
+        <p>Some extra content you would like here</p>
+        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
+    </main>
+     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
+</Modal>
+```
+
+

package/src/pages/components/post-header.mdx

@@ -1,64 +1,64 @@
----
-title: "PostHeader"
-layout: "../../layouts/MainLayout.astro"
----
-import PostHeader from '../../components/PostHeader.astro'
-export const author = { firstName: 'Szymon', name: 'CNK' } 
-export const categories = [{"name":"Tools & garage accessories","uri":"#"}, {"name":"Lorem Ipsum","uri":"#"}]
-export const date = "2023-07-13T01:35:03"
-
-# PostHeader
-
-WordPress PostHeader - post top component for WordPress Single Post template data like categories etc. comes from WP Rest API.
-
-
-## PostHeader with some content for WordPress single page template
-
-<div class="component-preview">
-  <div class="relative w-full">
-    <PostHeader
-      author={author}
-      lang="en"
-      categories={categories}
-      title="Lorem Ipsum"
-      date={date}
-      image="https://img.freepik.com/free-photo/morskie-oko-tatry_1204-510.jpg?w=1380&t=st=1706297574~exp=1706298174~hmac=5c93e7317e7dbe602d5dcd708c5b9708ffabcb5e8ab2b7f2790941975dfcefe4"
-    />
-  </div>
-</div>
-
-```js
-  <div class="relative">
-    <PostHeader
-      author={ { firstName: 'Szymon', name: 'CNK' }  }
-      lang="en"
-      categories={  [{"name":"Tools & garage accessories","uri":"/category/garage/tools-garage-accessories/"}, , {"name":"Lorem Ipsum","uri":"#"}] }
-            title="Lorem Ipsum"
-      date="2023-07-13T01:35:03"
-      image="https://img.freepik.com/free-photo/morskie-oko-tatry_1204-510.jpg?w=1380&t=st=1706297574~exp=1706298174~hmac=5c93e7317e7dbe602d5dcd708c5b9708ffabcb5e8ab2b7f2790941975dfcefe4"
-    />
-  </div>
-```
-
-
-## PostHeader - only title
-
-<div class="component-preview">
-  <div class="relative w-full">
-    <PostHeader
-      title="Lorem Ipsum"
-      lang="en"
-      image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
-    />
-  </div>
-</div>
-
-```js
-  <div class="relative">
-    <PostHeader
-      title="Lorem Ipsum"
-      lang="en"
-      image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
-    />
-  </div>
-```
+---
+title: "PostHeader"
+layout: "../../layouts/MainLayout.astro"
+---
+import PostHeader from '../../components/PostHeader.astro'
+export const author = { firstName: 'Szymon', name: 'CNK' } 
+export const categories = [{"name":"Tools & garage accessories","uri":"#"}, {"name":"Lorem Ipsum","uri":"#"}]
+export const date = "2023-07-13T01:35:03"
+
+# PostHeader
+
+WordPress PostHeader - post top component for WordPress Single Post template data like categories etc. comes from WP Rest API.
+
+
+## PostHeader with some content for WordPress single page template
+
+<div class="component-preview">
+  <div class="relative w-full">
+    <PostHeader
+      author={author}
+      lang="en"
+      categories={categories}
+      title="Lorem Ipsum"
+      date={date}
+      image="https://img.freepik.com/free-photo/morskie-oko-tatry_1204-510.jpg?w=1380&t=st=1706297574~exp=1706298174~hmac=5c93e7317e7dbe602d5dcd708c5b9708ffabcb5e8ab2b7f2790941975dfcefe4"
+    />
+  </div>
+</div>
+
+```js
+  <div class="relative">
+    <PostHeader
+      author={ { firstName: 'Szymon', name: 'CNK' }  }
+      lang="en"
+      categories={  [{"name":"Tools & garage accessories","uri":"/category/garage/tools-garage-accessories/"}, , {"name":"Lorem Ipsum","uri":"#"}] }
+            title="Lorem Ipsum"
+      date="2023-07-13T01:35:03"
+      image="https://img.freepik.com/free-photo/morskie-oko-tatry_1204-510.jpg?w=1380&t=st=1706297574~exp=1706298174~hmac=5c93e7317e7dbe602d5dcd708c5b9708ffabcb5e8ab2b7f2790941975dfcefe4"
+    />
+  </div>
+```
+
+
+## PostHeader - only title
+
+<div class="component-preview">
+  <div class="relative w-full">
+    <PostHeader
+      title="Lorem Ipsum"
+      lang="en"
+      image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
+    />
+  </div>
+</div>
+
+```js
+  <div class="relative">
+    <PostHeader
+      title="Lorem Ipsum"
+      lang="en"
+      image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
+    />
+  </div>
+```

package/src/pages/components/pr-code.mdx

@@ -1,65 +1,65 @@
----
-title: "PrCode"
-layout: "../../layouts/MainLayout.astro"
----
-import PrCode from '../../components/PrCode.vue'
-import ProductCodes from '../../components/ProductCodes.vue'
-
-# PR-Code
-
-PR Code are Production Codes for all of the installed equipment in the vehicle and is used by manufacturers including VW, Audi, Seat, Skoda, Porsche, Lamborghini etc. 
-PR Codes contain 3 characters comprising of letters and numbers. 
-
-PR codes are located on vehicle´s build sticker that is located on first pages of cars warranty booklet or there should be one in a trunk as well usually under the carpet or in spare tire area.
-
-They are important when purchasing spare parts as they provide information about the manufacturer, make, model, year of manufacture, and other vehicle details.
-
-
-
-## PR-Code
-Single PR-Code.
-
-### import:
-
-```js
-import PrCode from 'spoko-design-system/src/components/PrCode.vue'
-```
-
-#
-
-<div class="component-preview">
-     <div class="bg-white p-6 w-full">
-          <PrCode prcode="2JP" />
-          <PrCode prcode="1ZJ" />
-     </div>
-</div>
-
-```js
-     <PrCode prcode="2JP" />
-     <PrCode prcode="1ZJ" />
-```
-
-
-
-
-## PR-Codes List
-Component to display list of pr codes from array.
-
-### import:
-
-```js
-import ProductCodes from 'spoko-design-system/src/components/ProductCodes.vue'
-```
-
-#
-
-<div class="component-preview">
-     <div class="bg-white p-6 w-full">
-          <ProductCodes prcodes={["2JP", "1ZJ"]}  />
-     </div>
-</div>
-
-```js
-     <ProductCodes prcodes={["2JP", "1ZJ"]} />
-```
-
+---
+title: "PrCode"
+layout: "../../layouts/MainLayout.astro"
+---
+import PrCode from '../../components/PrCode.vue'
+import ProductCodes from '../../components/ProductCodes.vue'
+
+# PR-Code
+
+PR Code are Production Codes for all of the installed equipment in the vehicle and is used by manufacturers including VW, Audi, Seat, Skoda, Porsche, Lamborghini etc. 
+PR Codes contain 3 characters comprising of letters and numbers. 
+
+PR codes are located on vehicle´s build sticker that is located on first pages of cars warranty booklet or there should be one in a trunk as well usually under the carpet or in spare tire area.
+
+They are important when purchasing spare parts as they provide information about the manufacturer, make, model, year of manufacture, and other vehicle details.
+
+
+
+## PR-Code
+Single PR-Code.
+
+### import:
+
+```js
+import PrCode from 'spoko-design-system/src/components/PrCode.vue'
+```
+
+#
+
+<div class="component-preview">
+     <div class="bg-white p-6 w-full">
+          <PrCode prcode="2JP" />
+          <PrCode prcode="1ZJ" />
+     </div>
+</div>
+
+```js
+     <PrCode prcode="2JP" />
+     <PrCode prcode="1ZJ" />
+```
+
+
+
+
+## PR-Codes List
+Component to display list of pr codes from array.
+
+### import:
+
+```js
+import ProductCodes from 'spoko-design-system/src/components/ProductCodes.vue'
+```
+
+#
+
+<div class="component-preview">
+     <div class="bg-white p-6 w-full">
+          <ProductCodes prcodes={["2JP", "1ZJ"]}  />
+     </div>
+</div>
+
+```js
+     <ProductCodes prcodes={["2JP", "1ZJ"]} />
+```
+

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

@@ -1,59 +1,59 @@
----
-title: "ProductNumber"
-layout: "../../layouts/MainLayout.astro"
-productNumbers:
-  - "6R0920870F"
-  - "000051443F" 
-  - "WHT005227"
-  - "N0385491"
----
-import ProductNumber from '../../components/Product/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">
-   {frontmatter.productNumbers.map((number, index) => (
-      <ProductNumber
-        big={index === 0 || index === 1}
-        isPdp={index >= 1}
-        productNumber={number}
-        class="mb-2"
-      />
-    ))}
-  </div>
-</div>
-
-```js
-<ProductNumber
-  small
-  productNumber="6R0920870F"
-  class="mb-2"
-/>
-```
-
-<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">
-   {frontmatter.productNumbers.map((number, index) => (
-      <ProductNumber
-        big
-        productNumber={number}
-        class="mb-2"
-      />
-    ))}
-  </div>
-</div>
-
-<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">
-   {frontmatter.productNumbers.map((number, index) => (
-      <ProductNumber
-        productNumber={number}
-        class="mb-2"
-      />
-    ))}
-  </div>
+---
+title: "ProductNumber"
+layout: "../../layouts/MainLayout.astro"
+productNumbers:
+  - "6R0920870F"
+  - "000051443F" 
+  - "WHT005227"
+  - "N0385491"
+---
+import ProductNumber from '../../components/Product/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">
+   {frontmatter.productNumbers.map((number, index) => (
+      <ProductNumber
+        big={index === 0 || index === 1}
+        isPdp={index >= 1}
+        productNumber={number}
+        class="mb-2"
+      />
+    ))}
+  </div>
+</div>
+
+```js
+<ProductNumber
+  small
+  productNumber="6R0920870F"
+  class="mb-2"
+/>
+```
+
+<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">
+   {frontmatter.productNumbers.map((number, index) => (
+      <ProductNumber
+        big
+        productNumber={number}
+        class="mb-2"
+      />
+    ))}
+  </div>
+</div>
+
+<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">
+   {frontmatter.productNumbers.map((number, index) => (
+      <ProductNumber
+        productNumber={number}
+        class="mb-2"
+      />
+    ))}
+  </div>
 </div>

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} />
+```