spoko-design-system 0.2.29 → 0.2.32

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,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,35 @@
----
-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 drop-shadow"
+    client:load
+    showCloseButton
+    transition:name="slim-banner"
+    transition:persist
+    
+  />
+</div>
+
+```js
+<SlimBanner
+  class="w-full drop-shadow"
+  client:load
+  showCloseButton
+  transition:name="slim-banner"
+  transition:persist
+/>
+```
+
+## uno.config.ts / shortcuts
+```js
+['slimbanner','px-4 sm:px-8  flex items-center justify-center text-xs sm:text-base leading-none relative bg-gray-100  z-2 px-4 py-3 sm:(text-base px-8) text-blue-700 print-hidden'],
+```