spoko-design-system 0.2.20 → 0.2.23

package/src/pages/components/input.mdx

@@ -1,46 +1,46 @@
----
-title: Input
-layout: ../../layouts/MainLayout.astro
----
-import MainInput from '../../components/MainInput.vue'
-
-# Input text
-
-<div class="component-preview">
-    <MainInput label="Name"></MainInput>
-</div>
-
-```js
-<MainInput type="text" value="Hello world!"></MainInput>
-```
-
-
-
-<div class="component-preview">
-
-<div class="bg-white grid items-end w-full gap-6 md:grid-cols-3 px-4 py-6">
-    <div class="relative">
-        <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
-        <label for="floating_filled" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
-    </div>
-
-    <div class="relative z-0">
-        <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
-        <label for="floating_standard" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
-    </div>
-</div>
-
-</div>
-
-
-```js
-<div class="relative">
-    <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
-    <label for="floating_filled" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
-</div>
-
-<div class="relative z-0">
-    <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
-    <label for="floating_standard" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
-</div>
+---
+title: Input
+layout: ../../layouts/MainLayout.astro
+---
+import MainInput from '../../components/MainInput.vue'
+
+# Input text
+
+<div class="component-preview">
+    <MainInput label="Name"></MainInput>
+</div>
+
+```js
+<MainInput type="text" value="Hello world!"></MainInput>
+```
+
+
+
+<div class="component-preview">
+
+<div class="bg-white grid items-end w-full gap-6 md:grid-cols-3 px-4 py-6">
+    <div class="relative">
+        <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+        <label for="floating_filled" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
+    </div>
+
+    <div class="relative z-0">
+        <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+        <label for="floating_standard" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
+    </div>
+</div>
+
+</div>
+
+
+```js
+<div class="relative">
+    <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+    <label for="floating_filled" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
+</div>
+
+<div class="relative z-0">
+    <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+    <label for="floating_standard" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
+</div>
 ```

package/src/pages/components/jumbatron.mdx

@@ -1,73 +1,73 @@
----
-title: "Jumbatron"
-layout: "../../layouts/MainLayout.astro"
----
-import Jumbatron from '../../components/Jumbatron.vue'
-import Button from '../../components/Button.vue'
-
-# Jumbatron
-
-A jumbotron indicates a big box for calling extra attention to some special content or information.
-
-Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
-
-## Jumbatron - classic
-<div class="component-preview">
-    <Jumbatron class="w-full">
-        <span slot="intro" set:html={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`} />
-        <p slot="subtitle"
-          class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
-          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
-        />
-        <Button primary slot="cta"
-          href="#"
-          title="short text"
-        >
-         Read More
-        </Button>
-    </Jumbatron>
-</div>
-
-```js
-    <Jumbatron>
-        <span slot="intro" set:html="text-intro" />
-        <p slot="subtitle"
-          class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
-          set:html="subtitle"
-        />
-        <Button primary slot="cta"
-          href="#"
-          title="short text"
-        >
-         Read More
-        </Button>
-    </Jumbatron>
-```
-
-## Small Jumbatron
-
-<div class="component-preview">
-    <Jumbatron class="w-full" small>
-        <span slot="intro" set:html={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`} />
-        <p slot="subtitle"
-          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
-          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
-        />
-    </Jumbatron>
-</div>
-
-```js
-    <Jumbatron small>
-        <span slot="intro" set:html="text-intro" />
-        <p slot="subtitle"
-          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
-          set:html="subtitle"
-        />
-        <Button primary slot="cta"
-          href="#"
-          title="short text"
-        >
-         Read More
-        </Button>
-    </Jumbatron>
-```
+---
+title: "Jumbatron"
+layout: "../../layouts/MainLayout.astro"
+---
+import Jumbatron from '../../components/Jumbatron.vue'
+import Button from '../../components/Button.vue'
+
+# Jumbatron
+
+A jumbotron indicates a big box for calling extra attention to some special content or information.
+
+Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
+
+## Jumbatron - classic
+<div class="component-preview">
+    <Jumbatron class="w-full">
+        <span slot="intro" set:html={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`} />
+        <p slot="subtitle"
+          class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
+          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
+        />
+        <Button primary slot="cta"
+          href="#"
+          title="short text"
+        >
+         Read More
+        </Button>
+    </Jumbatron>
+</div>
+
+```js
+    <Jumbatron>
+        <span slot="intro" set:html="text-intro" />
+        <p slot="subtitle"
+          class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
+          set:html="subtitle"
+        />
+        <Button primary slot="cta"
+          href="#"
+          title="short text"
+        >
+         Read More
+        </Button>
+    </Jumbatron>
+```
+
+## Small Jumbatron
+
+<div class="component-preview">
+    <Jumbatron class="w-full" small>
+        <span slot="intro" set:html={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`} />
+        <p slot="subtitle"
+          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
+        />
+    </Jumbatron>
+</div>
+
+```js
+    <Jumbatron small>
+        <span slot="intro" set:html="text-intro" />
+        <p slot="subtitle"
+          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+          set:html="subtitle"
+        />
+        <Button primary slot="cta"
+          href="#"
+          title="short text"
+        >
+         Read More
+        </Button>
+    </Jumbatron>
+```

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,60 +1,60 @@
----
-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}
-      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' }  }
-      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"
-      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"
-      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}
+      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' }  }
+      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"
+      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"
+      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"]} />
+```
+