spoko-design-system 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "private": false,
   "scripts": {
     "dev": "astro dev",
@@ -33,8 +33,7 @@
     "@astrojs/sitemap": "^3.0.5",
     "@astrojs/vue": "^4.0.8",
     "@docsearch/css": "^3.5.2",
-    "@docsearch/react": "^3.5.2",
-    "@iconify-json/ant-design": "^1.1.14",
+    "@iconify-json/ant-design": "^1.1.15",
     "@iconify-json/bi": "^1.1.23",
     "@iconify-json/bx": "^1.1.10",
     "@iconify-json/carbon": "^1.1.28",
@@ -49,13 +48,12 @@
     "@iconify-json/mdi": "^1.1.64",
     "@iconify-json/noto-v1": "^1.1.11",
     "@iconify-json/octicon": "^1.1.52",
-    "@iconify-json/ph": "^1.1.10",
+    "@iconify-json/ph": "^1.1.11",
     "@iconify-json/simple-icons": "^1.1.90",
     "@iconify-json/uil": "^1.1.8",
-    "@iconify/json": "^2.2.177",
+    "@iconify/json": "^2.2.178",
     "@iconify/vue": "^4.1.1",
-    "@types/node": "^20.11.14",
-    "@types/react": "^18.2.48",
+    "@types/node": "^20.11.16",
     "@unocss/astro": "^0.58.4",
     "@unocss/preset-attributify": "^0.58.4",
     "@unocss/preset-typography": "^0.58.4",
@@ -64,9 +62,9 @@
     "@unocss/preset-wind": "^0.58.4",
     "@unocss/reset": "^0.58.4",
     "@vueuse/core": "^10.7.2",
-    "astro-compress": "^2.2.8",
+    "astro-compress": "^2.2.9",
     "astro-i18next": "1.0.0-beta.21",
-    "astro-icon": "^1.0.4",
+    "astro-icon": "^1.1.0",
     "astro-navbar": "^2.3.0",
     "astro-pagefind": "^1.4.0",
     "i18next": "^23.8.2",
@@ -82,7 +80,7 @@
   },
   "devDependencies": {
     "@unocss/transformer-variant-group": "^0.58.4",
-    "astro": "^4.2.8",
+    "astro": "^4.3.2",
     "unocss": "^0.58.3"
   },
   "pnpm": {

package/src/components/FeaturesList.vue

@@ -0,0 +1,41 @@
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+const props = defineProps({
+    items: {
+        type: Object as PropType<String[] | null>,
+        default: null,
+        required: true,
+    },
+    caption: {
+        type: Object as PropType<String | null>,
+        default: null,
+        required: false,
+    }
+})
+</script>
+
+<template>
+    <h2 class="font-headregular mb-6 font-medium text-lg colon-after" v-if="props.caption">{{ props.caption }}</h2>
+    <ul class="mb-4">
+        <li v-for="item in props.items" class="leading-5">
+            {{ item }}
+        </li>
+    </ul>
+</template>
+
+
+<style lang="scss" scoped>
+ul {
+    @apply list-square pl-5;
+
+    li {
+        @apply relative mb-2;
+
+        &::marker {
+            @apply text-blue-400;
+        }
+    }
+}
+</style>

package/src/components/PartNumber.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+const props = defineProps({
+  as: {
+    type: String as PropType<'div' | 'td' | 'span' | 'h1' | 'h2' | 'h3'>,
+    default: 'div',
+    required: true,
+  },
+  number: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  class: {
+    type: String,
+    default: '',
+    required: false,
+  },
+})
+
+</script>
+
+<template>
+  <component :is="props.as" :class="props.class">
+    {{ props.number }}
+  </component>
+</template>

package/src/components/PrCode.vue

@@ -7,7 +7,7 @@ import type { PropType } from 'vue'
 
 const props = defineProps({
     prcode: {
-        type: Object as PropType<string[] | null>,
+        type: String,
         default: null,
         required: true,
     },

package/src/components/ProductCodes.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import PrCode from './PrCode.vue';
+
+const props = defineProps({
+  prcodes: {
+    type: Object as PropType<string[] | null>,
+    default: null,
+    required: true,
+  },
+  isPdp: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+})
+
+const codes = props.prcodes || []
+const decodedCodes = codes ? codes.sort() : []
+
+const settings = {
+  prcodes: decodedCodes,
+}
+</script>
+
+<template>
+ 
+ <span
+    v-for="(prcode, index) in settings.prcodes"
+    :key="index"
+    class="not-last:mr-1"
+  >
+    <PrCode :prcode="prcode" v-if="!String(prcode).includes('+')" />
+    <span v-else >
+      <PrCode  v-for="(splittedCode, index2) in String(prcode).split('+')" :key="index2" :prcode="splittedCode" />
+    </span>
+  </span>
+</template>
+

package/src/components/ProductDetailsList.vue

@@ -1,17 +1,39 @@
 <script setup lang="ts">
+import { PropType } from "vue";
 import ProductDetailName from "./ProductDetailName.vue";
-const props = defineProps<{
-  value: {name: string, value: string}[];
-}>();
+
+interface TableItem {
+  slug: string,
+  name: string 
+  value: unknown
+}
+
+const props = defineProps({
+  items: {type: Array as PropType<TableItem[]>, default: () => []},
+  caption: { type: String, default: null }
+})
 
 </script>
 
 <template>
   <table class="details table-auto text-left bg-white">
+    <caption v-if="!!$slots.caption || caption">
+      <slot name="caption">{{ caption }}</slot>
+    </caption>
+    <colgroup>
+      <col>
+      <col>
+    </colgroup>
     <tbody>
-      <tr class="border" v-for="row, index in props.value" :key="index">
+      <tr class="border" v-for="row, index in props.items" :key="index">
         <ProductDetailName as="th" :text="row.name" />
-        <td>{{ row.value }}</td>
+        <td>
+          <slot
+            :name="row.slug"
+          >
+           {{ row.value }}
+          </slot>
+        </td>
       </tr>
     </tbody>
   </table>
@@ -32,5 +54,9 @@ const props = defineProps<{
     th {
       @apply pr-0
     }
+
+    td {
+      @apply relative;
+    }
   }
 </style>

package/src/components/ProductNumber copy.astro

@@ -0,0 +1,116 @@
+---
+import { t } from "i18next";
+import ButtonCopy from "./ButtonCopy.vue";
+
+const {
+  copyDisabled,
+  productNumber,
+  isPdp,
+  small,
+  big,
+  class: className,
+} = Astro.props;
+
+const butonTexts = {
+  copy: t("copy"),
+  copied: t("copied"),
+};
+
+const isLetter = (string: string) => {
+  return string.toLowerCase() !== string.toUpperCase();
+};
+
+const niceName = (string: string, separator = "\u00A0") => {
+  let word = string; //e.g. to 6Q0947106EY20 .split('+')
+
+  if (
+    isLetter(string[0]) === true &&
+    isLetter(string[1]) === false &&
+    string.length === 9
+  ) {
+    // mainly liquids
+    word = string
+      .replace(
+        /^(\w{1})(\w{3})(\w{3})(.*)$/,
+        `$1${separator}$2${separator}$3${separator}$4`,
+      )
+      .replace(/(^\s+|\s+$)/, "");
+  }
+
+  // wheels / emblems e.g. 6R0601025AK8Z8 --> 6R0 601 025 AB 8Z8 || 6C0601025DFZZ --> 6C0 601 025 D FZZ || 6R0853433ADA1 -> 6R0 853 433 A DA1
+  else if (string.length >= 13) {
+    // console.log('part number: wheels / emblems', word)
+    word = string
+      .replace(
+        /^(\w{3})(\w{3})(\w{3})(.*)(\w{3})$/,
+        `$1${separator}$2${separator}$3${separator}$4${separator}$5`,
+      )
+      .replace(/(^\s+|\s+$)/, "");
+  } else if (string.length > 12) {
+    // accessories / mats
+    word = string
+      .replace(
+        /^(\w{3})(\w{3})(\w{3})(\w{1})(.*)$/,
+        `$1${separator}$2${separator}$3${separator}$4${separator}$5`,
+      )
+      .replace(/(^\s+|\s+$)/, "");
+  } else {
+    // other parts
+    word = string
+      .replace(/(\w{3})/g, `$1${separator}`)
+      .replace(/(^\s+|\s+$)/, "");
+  }
+
+  return word.replace(" ", separator);
+};
+---
+
+{
+  productNumber !== null && (
+    <div
+      class={`product-number ${
+        big ? "text-lg" : `text-sm ${className ? className : "mt-2 sm:mt-0"}`
+      }`}
+    >
+      <div
+        class={`inline-flex leading-none relative ${small ? "w-full" : ""}`}
+        itemprop="identifier"
+      >
+        {isPdp ? (
+          <h2 id={productNumber} class="product-code">
+            {productNumber}
+          </h2>
+        ) : (
+          <div id={productNumber} class="product-code">
+            {productNumber}
+          </div>
+        )}
+
+        {copyDisabled && (
+          <ButtonCopy
+            productNumber={String(productNumber)}
+            texts={butonTexts}
+            tooltipClasses=""
+            client:only
+          />
+        )}
+      </div>
+
+      <div
+        class={`code-formatted ${small ? "tracking-wide" : "tracking-tight"}`}
+      >
+        <div class="relative inset-0" data-pagefind-ignore>
+          {niceName(productNumber, ".")}
+        </div>
+        <div class="absolute inset-0" data-pagefind-ignore>
+          {niceName(productNumber, "-")}
+        </div>
+        {isPdp ? (
+          <h3 class="number-secondary">{niceName(productNumber)}</h3>
+        ) : (
+          <div class="number-secondary">{niceName(productNumber)}</div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/ProductNumber.astro

@@ -1,10 +1,12 @@
 ---
 import { t } from "i18next";
 import ButtonCopy from "./ButtonCopy.vue";
+import PartNumber from "./PartNumber.vue";
 
 const {
   copyDisabled,
   productNumber,
+  as,
   isPdp,
   small,
   big,
@@ -63,38 +65,20 @@ const niceName = (string: string, separator = "\u00A0") => {
 
   return word.replace(" ", separator);
 };
+
+
+const classes = `product-number ${big ? "text-lg" : `text-sm ${className ? className : "mt-2 sm:mt-0"}`  }`
+
 ---
 
+<!-- <PartNumber number={productNumber} as="div"></PartNumber> -->
+
+
 {
   productNumber !== null && (
-    <div
-      class={`product-number ${
-        big ? "text-lg" : `text-sm ${className ? className : "mt-2 sm:mt-0"}`
-      }`}
-    >
-      <div
-        class={`inline-flex leading-none relative ${small ? "w-full" : ""}`}
-        itemprop="identifier"
-      >
-        {isPdp ? (
-          <h2 id={productNumber} class="product-code">
-            {productNumber}
-          </h2>
-        ) : (
-          <div id={productNumber} class="product-code">
-            {productNumber}
-          </div>
-        )}
-
-        {copyDisabled && (
-          <ButtonCopy
-            productNumber={String(productNumber)}
-            texts={butonTexts}
-            tooltipClasses=""
-            client:only
-          />
-        )}
-      </div>
+   
+
+      <PartNumber class={`product-code ${classes}`} number={productNumber} as={isPdp ? 'h2' : 'div'} />
 
       <div
         class={`code-formatted ${small ? "tracking-wide" : "tracking-tight"}`}
@@ -105,12 +89,19 @@ const niceName = (string: string, separator = "\u00A0") => {
         <div class="absolute inset-0" data-pagefind-ignore>
           {niceName(productNumber, "-")}
         </div>
-        {isPdp ? (
-          <h3 class="number-secondary">{niceName(productNumber)}</h3>
-        ) : (
-          <div class="number-secondary">{niceName(productNumber)}</div>
-        )}
+        <PartNumber class="number-secondary" number={niceName(productNumber)} as={isPdp ? 'h3' : 'div'} />
       </div>
-    </div>
+    
   )
 }
+
+
+<!-- {!copyDisabled && ( -->
+  <ButtonCopy
+    class="top-3.5 right-0"
+    productNumber={String(productNumber)}
+    texts={butonTexts}
+    tooltipClasses=""
+    client:only
+  />
+<!-- )}  -->

package/src/components/ProductTile.astro

@@ -36,7 +36,7 @@ import ProductNumber from "./ProductNumber.astro"
         { productObject.name }
       </a>
 
-      <ProductNumber productNumber={productObject.number} copyDisabled={true}  />
+      <ProductNumber productNumber={productObject.number} copyDisabled={false}  />
       
       { index !== null && 
         ( <meta itemprop="position" content={String(index)} />

package/src/config.ts

@@ -30,6 +30,7 @@ export const SIDEBAR = [
   { text: "Carousel", link: "/components/carousel/" },
   { text: "Copyright", link: "/components/copyright/" },
   { text: "Details List", link: "/components/details-list/" },
+  { text: "Features List", link: "/components/features-list/"},
   { text: "HandDrive", link: "/components/hand-drive/" },
   { text: "Headline", link: "/components/headline/" },
   { text: "Icons", link: "/components/icons/" },

package/src/pages/components/buttons.mdx

@@ -172,7 +172,7 @@ Rounded edges
         <Button tertiary small rounded>Tertiary</Button>
         
         <Button text medium small rounded>Text</Button>
-        <Button tag small small rounded>Tag Name</Button>
+        <Button tag small rounded>Tag Name</Button>
     </div>
 </div>
 
@@ -193,7 +193,7 @@ Rounded edges
 <Button secondary small rounded>Secondary</Button>
 <Button tertiary small rounded>Tertiary</Button>
 <Button text medium small rounded>Text</Button>
-<Button tag small small rounded>Tag Name</Button>
+<Button tag small rounded>Tag Name</Button>
 ```
 
 ## Outline button

package/src/pages/components/card.mdx

@@ -212,4 +212,83 @@ Card - product link component which can be used for carousels, section with rela
       </a>
   </div>
 </div>
-```
+```
+
+## Card with skewed background
+Skewed background with CSS & SVG.
+
+<div class="component-preview">
+
+<div class="columns-3 gap-8">
+
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
+    <blockquote class="relative p-8 mb-4 text-white/90">
+    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
+    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
+    <p class="text-md font-light mt-2 text-white">
+    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
+    </p>
+    </blockquote>
+</div>
+
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
+    <blockquote class="relative p-8 mb-4 text-white/90">
+    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
+    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
+    <p class="text-md font-light mt-2 text-white">
+    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
+    </p>
+    </blockquote>
+</div>
+
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
+    <blockquote class="relative p-8 mb-4 text-white/90">
+    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
+    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
+    <p class="text-md font-light mt-2 text-white">
+    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
+    </p>
+    </blockquote>
+</div>
+
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
+    <blockquote class="relative p-8 mb-4 text-white/90">
+    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
+    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
+    <p class="text-md font-light mt-2 text-white">
+    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
+    </p>
+    </blockquote>
+</div>
+
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
+    <blockquote class="relative p-8 mb-4 text-white/90">
+    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
+    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
+    <p class="text-md font-light mt-2 text-white">
+    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
+    </p>
+    </blockquote>
+</div>
+
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+    <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
+    <blockquote class="relative p-8 mb-4 text-white/90">
+    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
+    <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
+    <p class="text-md font-light mt-2 text-white">
+    Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
+    </p>
+    </blockquote>
+</div>
+
+</div>
+
+</div>
+
+

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

@@ -4,27 +4,41 @@ layout: "../../layouts/MainLayout.astro"
 ---
 
 import ProductDetailsList from '../../components/ProductDetailsList.vue'
+import ProductNumber from "../../components/ProductNumber.astro"
+import ProductCodes from '../../components/ProductCodes.vue'
 
-export const tablevalue = [
+export const prcodesArray = ["PJ4", "CA2", "C4E", "2JZ"]
+
+export const tableItems = [
+  {
+    slug: "number",
+    name: "Part number",
+    value: "6R0071609GRU",
+  },
   {
-    name: "Product ID",
-    value: "9452694356",
+    slug: "prcodes",
+    name: "PR-Codes",
+    value: ["PJ4", "CA2", "C4E", "2JZ"],
   },
   {
+    slug: "color",
     name: "Color",
     value: "Black",
   },
   {
+    slug: "position",
     name: "Fitting position",
     value: "Front axle",
   },
   {
+    slug: "brake-disck-thicnkess",
     name: "Brake disc thicknes",
     value: "22 mm",
   },
   {
-        name: "Weight",
-        value: "5.185 kg"
+    slug: "weight",
+    name: "Weight",
+    value: "5.185 kg"
   }
 ];
 
@@ -32,35 +46,63 @@ export const tablevalue = [
 
 <div class="component-preview flex-wrap">
  <div class="bg-white rounded-lg p-8">
-    <ProductDetailsList value={tablevalue}></ProductDetailsList>
+    <ProductDetailsList items={tableItems}>
+      <ProductNumber slot="number" class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false}  />
+      <ProductCodes slot="prcodes" prcodes={prcodesArray} />
+    </ProductDetailsList>
  </div>
 </div>
 
 ```ts
- const tablevalue = [
+ const tableItems = [
+  {
+    slug: "number",
+    name: "Part number",
+    value: "6R0071609GRU",
+  },
   {
-    name: "Product ID",
-    value: "9452694356",
+    slug: "prcodes",
+    name: "PR-Codes",
+    value: ["PJ4", "CA2", "C4E"]
   },
   {
+    slug: "color",
     name: "Color",
     value: "Black",
   },
   {
+    slug: "position",
     name: "Fitting position",
     value: "Front axle",
   },
   {
+    slug: "brake-disck-thicnkess",
     name: "Brake disc thicknes",
     value: "22 mm",
   },
   {
+    slug: "weight",
     name: "Weight",
     value: "5.185 kg"
   }
 ];
 
 ```
-```html
- <ProductDetailsList value={tablevalue}></ProductDetailsList>
+### Astro:
+```js
+<ProductDetailsList items={tableItems}>
+  <ProductNumber slot="number" class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false}  />
+  <ProductCodes slot="prcodes" prcodes={prcodesArray} />
+</ProductDetailsList>
+ ```
+ ### Vue:
+```js
+<ProductDetailsList items={tableItems}>
+  <template #number >
+    <ProductNumber class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false}  />
+  </template>
+  <template #prcodes >
+    <ProductCodes prcodes={prcodesArray} />
+  </template>
+</ProductDetailsList>
  ```

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

@@ -0,0 +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" />
+ ```

package/src/pages/components/icons.astro

@@ -38,7 +38,7 @@ const ICONS = {
                     {ICONS[key].map((value) => (
                             <div class="mx-1 mb-2">
                             <div class="component-preview ">
-    <Icon name={`${key}:${value}`} class="text-3xl mx-auto" />
+    <Icon name={`${key}:${value}`} class="text-3xl mx-auto text-light-blue-400" />
                             </div>
                             <pre class="astro-code bg-slate-800 text-white text-sm text-center">&lt;Icon name={`"${key}:${value}"`} /&gt;</pre>
                             </div>

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

@@ -3,7 +3,7 @@ title: "PrCode"
 layout: "../../layouts/MainLayout.astro"
 ---
 import PrCode from '../../components/PrCode.vue'
-
+import ProductCodes from '../../components/ProductCodes.vue'
 
 # PR-Code
 
@@ -17,6 +17,15 @@ They are important when purchasing spare parts as they provide information about
 
 
 ## 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">
@@ -30,8 +39,27 @@ They are important when purchasing spare parts as they provide information about
      <PrCode prcode="1ZJ" />
 ```
 
+
+
+
+## PR-Codes List
+Component to display list of pr codes from array.
+
 ### import:
 
 ```js
-import PrCode from 'spoko-design-system/src/components/PrCode.vue'
+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/patterns/introduction.mdx

@@ -20,7 +20,7 @@ Common patterns for building interfaces.
 
 ### Code
 
-```ts
+```html
 <Container class="bg-white">content</Container>
 ```
 
@@ -33,7 +33,7 @@ Common patterns for building interfaces.
 
 ### Code
 
-```ts
+```html
  <Container class="bg-white" isFullWidth>content</Container>
 ```
 
@@ -50,7 +50,7 @@ Common patterns for building interfaces.
 
 ### Code
 
-```ts
+```html
 <Header>
     <div slot="logo" class="flex-shrink-0 flex items-center h-8">
             <div class="bg-gray">LOGO</div>

package/src/styles/content.scss

@@ -23,7 +23,7 @@
       font-size: 13pt;
     }
 
-    ul {
+    &>ul {
       @apply list-disc pl-5
     }
   }

package/uno.config.ts

@@ -53,7 +53,7 @@ export default defineConfig({
     ['btn-normal', 'md:px-10 md:py-2 md:text-lg px-8 py-3 whitespace-nowrap'],
     ['btn-sm', 'px-6 py-2 text-sm whitespace-nowrap	'],
     ['btn-xs', 'px-4 py-1 text-sm whitespace-nowrap	'],
-    ['product-number','font-mono content-center flex flex-wrap flex-col content-start pr-5 bg-white'],
+    ['product-number','font-novamono leading-none content-center flex flex-wrap flex-col content-start pr-5 bg-white'],
     ['main','text-gray-700 dark:text-gray-200 dark:bg-blue-700 pt-24 sm:pt-14 relative'],
     ['nav','bg-white dark:bg-black absolute sm:fixed w-full top-0 z-40 sm:z-30 max-w-screen'],
     ['cat-menu','fixed bottom-[-4px] w-full z-10 border-t-1 border-gray-300 bg-white dark:bg-blue-900 text-center sm:(static z-auto border-t-none) sm:min-h-32'],
@@ -91,8 +91,8 @@ export default defineConfig({
     ['cat-link','whitespace-nowrap cursor-pointer text-blue-901 dark:text-white hover:text-lightBlue-400 font-light uppercase py-2 md:py-0'],
     ['plp-name','flex items-center leading-none font-headregular cursor-pointer sm:pr-6 md:pr-12'],
     ['plp-replacements','col-span-3 md:col-span-1 md:col-start-2 text-xs mt-3 md:mt-4'],
-    ['product-code','text-blue-500 dark:text-lightBlue-500 mr-1 leading-none tracking-wide select-all'],
-    ['code-formatted','leading-none mt-0 relative text-xs'],
+    ['product-code','text-blue-500 dark:text-lightBlue-500 mr-1 leading-none tracking-wide select-all '],
+    ['code-formatted','font-novamono leading-none mt-0 relative text-xs'],
     ['btn-copy', 'leading-none opacity-10 hover:opacity-80 ml-auto w-6 h-6 -right-7 sm:(h-4 w-4 -right-5) absolute'],
     ['btn-copy-text','shadow-sm py-0.5 px-1 bg-gray-100 -ml-1 -mt-4 text-xxs whitespace-nowrap'],
     ['plp-icons','absolute top-0 -right-2 md:(top-0.5 right-0) w-12 bottom-auto flex justify-end text-sm'],