spoko-design-system 0.0.2 → 0.0.5

package/src/pages/components/image.mdx

@@ -0,0 +1,502 @@
+---
+title: "Jumbatron"
+layout: "../../layouts/MainLayout.astro"
+---
+import Image from '../../components/Image.astro'
+
+## Image
+
+Image converted to AVIF format and resized.
+AVIF compresses images significantly better than older-generation formats such as WebP and JPEG.
+
+#
+Displaying great product images is one of the most important keys to e-Commerce success.
+
+
+
+- https://en.wikipedia.org/wiki/AVIF
+
+#
+
+You can choose the image format you need so that you do not unnecessarily load an image that is larger than the area in which you are displaying it. This ensures maximum page optimisation.
+
+- https://docs.astro.build/en/guides/images/
+
+#
+
+Use `.img--overlay` class for images on white background to make a layer with light grey overlay.
+
+
+### Small Image
+`.img--small`
+
+<div class="component-preview">
+  <div class="img--overlay img--4/3 img--small">
+  <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'object-cover'
+        }
+      }
+    />
+  </div>
+
+
+    <div class="img--4/3 img--small">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'object-cover'
+        }
+      }
+    />
+  </div>
+
+      <div class="img--4/3 img--small">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'object-cover'
+        }
+      }
+    />
+  </div>
+</div>
+
+
+
+
+```js
+<div class="img--overlay img--4/3 img--small">
+  <Image
+    imageObject={
+      {
+        src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+        alt: 'Image Alt',
+        height: '180',
+        width: '240',
+        class: 'object-cover'
+      }
+    }
+  />
+
+  <div class="img--4/3 img--small">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'object-cover'
+        }
+      }
+    />
+  </div>
+
+  <div class="img--4/3 img--small">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'object-cover'
+        }
+      }
+    />
+  </div>
+
+  
+
+</div>
+```
+
+
+### Medium Image
+`.img--medium`
+
+<div class="component-preview">
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+        }
+      }
+    />
+  </a>
+
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'bg-gray-100/70'
+        }
+      }
+    />
+  </a>
+
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'bg-gray-100/70'
+        }
+      }
+    />
+  </a>
+</div>
+
+```ts
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+        }
+      }
+    />
+  </a>
+
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'bg-gray-100/70'
+        }
+      }
+    />
+  </a>
+
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'bg-gray-100/70'
+        }
+      }
+    />
+  </a>
+```
+
+### Responsive Image with srcset
+- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes
+
+<div class="component-preview">
+  <div class="h-full img--3/2 overflow-hidden">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=1970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '1350',
+          width: '1800',
+          class: 'bg-gray-100/70',
+          srcset: [430, 690, 960, 1200, 1800]
+        }
+      }
+    />
+  </div>
+</div>
+
+```js
+ <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=1970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '1350',
+          width: '1800',
+          class: 'bg-gray-100/70',
+          srcset: [430, 690, 960, 1200, 1800]
+        }
+      }
+    />
+```
+
+
+
+### Image Aspect Ratios
+
+Image ratio, also known as aspect ratio, is how wide an image is in relation to how tall it is. 
+For viewing on a mobile device, the recommended image ratio is 1:1 (a square picture). 
+
+<div class="component-preview">
+   <div class="columns-2 lg:columns-4 w-full">
+      <div class="text-center mb-4">
+         <div class="img--medium img--1/1 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">1:1</div>
+         </div>
+      </div>
+
+      <div class="text-center mb-4">
+         <div class="img--medium img--3/1 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">3:1</div>
+         </div>
+      </div>
+
+      <div class="text-center mb-4">
+         <div class="img--medium img--4/3 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">4:3</div>
+         </div>
+      </div>
+      <div class="text-center mb-4">
+         <div class="img--medium img--3/2 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">3:2</div>
+         </div>
+      </div>
+
+      <div class="text-center mb-4">
+         <div class="img--medium img--16/9 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">16:9</div>
+         </div>
+      </div>
+      <div class="text-center mb-4">
+         <div class="img--medium img--3/4 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">3:4</div>
+         </div>
+      </div>
+      <div class="text-center mb-4">
+         <div class="img--medium img--2/3 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">2:3</div>
+         </div>
+      </div>
+   </div>
+</div>
+
+
+```js
+  <div class="img--medium img--1/1 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+
+  <div class="img--medium img--3/1 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+
+  <div class="img--medium img--4/3 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+
+  <div class="img--medium img--3/2 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+
+  <div class="img--medium img--16/9 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '300',
+          width: '300',
+        }
+      }
+    />
+  </div>
+
+  <div class="img--medium img--3/4 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+  
+  <div class="img--medium img--2/3 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+
+```
+
+
+It is good to have all the images in the same ratio so that they look fairly uniform. Additionally, you can use a different ratio on desktop than on mobile view.
+
+### Image 1:1 on mobile, and 4:3 on desktop
+
+<div class="component-preview">
+  <div class="columns-1 md:columns-3">
+    <div class="img--medium img--1/1 md:img--4/3 b-l b-white w-full">
+      <Image
+        imageObject={
+          {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+```js
+<div class="img--medium img--1/1 md:img--4/3 b-l b-white w-full">
+  <Image
+    imageObject={
+      {
+        src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+        alt: 'Image Alt',
+        height: '700',
+        width: '700',
+      }
+    }
+  />
+</div>
+```

package/src/pages/components/jumbatron.mdx

@@ -3,6 +3,7 @@ title: "Jumbatron"
 layout: "../../layouts/MainLayout.astro"
 ---
 import Jumbatron from '../../components/Jumbatron.vue'
+import Button from '../../components/Button.vue'
 
 ## Jumbatron
 
@@ -16,15 +17,12 @@ Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
           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."
         />
-
-
-        <a slot="cta"
-          href="/about/"
+        <Button primary slot="cta"
+          href="#"
           title="short text"
-          class="w-full inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-white bg-lightBlue-500 hover:bg-lightBlue-600 md:py-2 md:text-lg md:px-10 shadow"
         >
          Read More
-        </a>
+        </Button>
     </Jumbatron>
 </div>
 
@@ -35,14 +33,39 @@ Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
           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>
+```
+
+## Jumbatron smaller
 
+<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>
 
-        <a slot="cta"
-          href="/about/"
+```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"
-          class="w-full inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-white bg-lightBlue-500 hover:bg-lightBlue-600 md:py-2 md:text-lg md:px-10 shadow"
         >
          Read More
-        </a>
+        </Button>
     </Jumbatron>
 ```

package/src/pages/components/modal.mdx

@@ -9,8 +9,14 @@ import { Icon } from 'astro-icon/components';
 
 ## Modal
 
-### Modal (native) based on dialog tag.
-https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+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">

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

@@ -19,7 +19,7 @@ WordPress PostHeader - post top component for WordPress Single Post template dat
       categories={categories}
       title="Lorem Ipsum"
       date={date}
-      image="https://placehold.co/2000x700/EEE/31343C"
+      image="https://img.freepik.com/free-photo/morskie-oko-tatry_1204-510.jpg?w=1380&t=st=1706297574~exp=1706298174~hmac=5c93e7317e7dbe602d5dcd708c5b9708ffabcb5e8ab2b7f2790941975dfcefe4"
     />
   </div>
 </div>
@@ -29,8 +29,30 @@ WordPress PostHeader - post top component for WordPress Single Post template dat
     <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://placehold.co/2000x700/EEE/31343C"
+      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

@@ -0,0 +1,41 @@
+---
+title: "PrCode"
+layout: "../../layouts/MainLayout.astro"
+---
+import PrCode from '../../components/PrCode.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.
+
+
+
+
+#### import:
+
+```js
+import PrCode from 'spoko-design-system/src/components/PrCode.vue'
+```
+
+
+### PR-Code
+
+<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" />
+```
+
+