spoko-design-system 0.2.20 → 0.2.23

package/src/components/PrCode.vue

@@ -1,157 +1,157 @@
-<script lang="ts" setup>
-/*
-     VAG group (VW/Audi/Skoda/Seat/Porsche/Bentley/Lamborghini/Ducati/Cupra/Scania/MAN) manufacturer PR-Code
-*/
-
-import type { PropType } from 'vue'
-
-const props = defineProps({
-    prcode: {
-        type: String,
-        default: null,
-        required: true,
-    },
-    isPdp: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
-})
-</script>
-
-<template>
-    <span data-pagefind-filter="PR-Code" class="btn-prcode "
-        :class="`btn-prcode--${props.prcode} ${props.isPdp ? ' btn-prcode--pdp' : ''}`">
-        {{ props.prcode }}
-    </span>
-</template>
-
-<style lang="scss" scoped>
-.btn-prcode {
-
-    &--pdp {
-        @apply mb-1
-    }
-
-    &:before {
-        @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-lightBlue-500 text-center z-50;
-
-        display: none;
-        position: absolute;
-        top: -10px;
-        transform: translateY(-50%) translateX(-50%);
-        left: 50%;
-    }
-
-    &:hover:before {
-        display: block;
-    }
-
-    &--2JK {
-        color: #f3881d;
-
-        &:before {
-            content: 'CROSS';
-        }
-    }
-
-    &--1LR,
-    &--1ZG,
-    &--1ZJ {
-        &:before {
-            content: '⌀ 256 mm';
-        }
-    }
-
-    &--1KD,
-    &--1ZP,
-    &--1ZR {
-        &:before {
-            content: '⌀ 310 mm';
-        }
-    }
-
-    &--1ZD,
-    &--1ZC,
-    &--1LN {
-        &:before {
-            content: '⌀ 288 mm; LUCAS';
-        }
-    }
-
-    &--2JZ {
-        @apply: text-lightBlue-500;
-
-        &:before {
-            content: 'Bluemotion';
-        }
-    }
-
-    &--7L6 {
-        @apply: text-lightBlue-500;
-
-        &:before {
-            content: 'Bluemotion (CFWA + start-stop)';
-        }
-    }
-
-    &--1KK,
-    &--1KT,
-    &--1KV,
-    &--1LV,
-    &--2EJ {
-        &:before {
-            content: '⌀ 230 mm';
-        }
-    }
-
-    &--2JE {
-        @apply text-lightBlue-700;
-
-        &:before {
-            content: 'BlueGT';
-        }
-    }
-
-    &--2JP {
-        &:before {
-            content: 'R-Line';
-        }
-    }
-
-    // WRC Street R
-    &--E5M,
-
-    // emblems/stickers
-    &--1KD,
-
-    //brakes
-    &--1ZP,
-
-    //brakes
-    &--2JQ,
-
-    //bumpers / engine parts
-    &--TA2 {
-        color: blue;
-
-        &:before {
-            content: 'R WRC Street';
-        }
-    }
-
-    // GTI
-    &--1KV,
-    &--1ZD,
-    &--1ZR,
-    &--0NH,
-    &--2JD {
-        color: red;
-
-        &:before {
-            content: 'GTI';
-        }
-    }
-
-}
+<script lang="ts" setup>
+/*
+     VAG group (VW/Audi/Skoda/Seat/Porsche/Bentley/Lamborghini/Ducati/Cupra/Scania/MAN) manufacturer PR-Code
+*/
+
+import type { PropType } from 'vue'
+
+const props = defineProps({
+    prcode: {
+        type: String,
+        default: null,
+        required: true,
+    },
+    isPdp: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+})
+</script>
+
+<template>
+    <span data-pagefind-filter="PR-Code" class="btn-prcode "
+        :class="`btn-prcode--${props.prcode} ${props.isPdp ? ' btn-prcode--pdp' : ''}`">
+        {{ props.prcode }}
+    </span>
+</template>
+
+<style lang="scss" scoped>
+.btn-prcode {
+
+    &--pdp {
+        @apply mb-1
+    }
+
+    &:before {
+        @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-lightBlue-500 text-center z-50;
+
+        display: none;
+        position: absolute;
+        top: -10px;
+        transform: translateY(-50%) translateX(-50%);
+        left: 50%;
+    }
+
+    &:hover:before {
+        display: block;
+    }
+
+    &--2JK {
+        color: #f3881d;
+
+        &:before {
+            content: 'CROSS';
+        }
+    }
+
+    &--1LR,
+    &--1ZG,
+    &--1ZJ {
+        &:before {
+            content: '⌀ 256 mm';
+        }
+    }
+
+    &--1KD,
+    &--1ZP,
+    &--1ZR {
+        &:before {
+            content: '⌀ 310 mm';
+        }
+    }
+
+    &--1ZD,
+    &--1ZC,
+    &--1LN {
+        &:before {
+            content: '⌀ 288 mm; LUCAS';
+        }
+    }
+
+    &--2JZ {
+        @apply: text-lightBlue-500;
+
+        &:before {
+            content: 'Bluemotion';
+        }
+    }
+
+    &--7L6 {
+        @apply: text-lightBlue-500;
+
+        &:before {
+            content: 'Bluemotion (CFWA + start-stop)';
+        }
+    }
+
+    &--1KK,
+    &--1KT,
+    &--1KV,
+    &--1LV,
+    &--2EJ {
+        &:before {
+            content: '⌀ 230 mm';
+        }
+    }
+
+    &--2JE {
+        @apply text-lightBlue-700;
+
+        &:before {
+            content: 'BlueGT';
+        }
+    }
+
+    &--2JP {
+        &:before {
+            content: 'R-Line';
+        }
+    }
+
+    // WRC Street R
+    &--E5M,
+
+    // emblems/stickers
+    &--1KD,
+
+    //brakes
+    &--1ZP,
+
+    //brakes
+    &--2JQ,
+
+    //bumpers / engine parts
+    &--TA2 {
+        color: blue;
+
+        &:before {
+            content: 'R WRC Street';
+        }
+    }
+
+    // GTI
+    &--1KV,
+    &--1ZD,
+    &--1ZR,
+    &--0NH,
+    &--2JD {
+        color: red;
+
+        &:before {
+            content: 'GTI';
+        }
+    }
+
+}
 </style>

package/src/components/ProductCarousel.astro

@@ -1,38 +1,38 @@
----
-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",
-};
----
-
-<div class="bg-white rounded-lg p-4 w-full">
-  <swiper-container
-    class="flex w-full max-w-full"
-    grid-rows="1"
-    mousewheel-force-to-axis="true"
-    navigation="false"
-    scrollbar="false"
-    slides-per-view="auto"
-    space-between="0"
-  >
-    <swiper-slide class="carousel-product-tile">
-      <ProductTile productObject={productObject} />
-    </swiper-slide>
-    <swiper-slide class="carousel-product-tile">
-      <ProductTile productObject={productObject} />
-    </swiper-slide>
-    <swiper-slide class="carousel-product-tile">
-      <ProductTile productObject={productObject} />
-    </swiper-slide>
-    <swiper-slide class="carousel-product-tile">
-      <ProductTile productObject={productObject} />
-    </swiper-slide>
-    <swiper-slide class="carousel-product-tile">
-      <ProductTile productObject={productObject} />
-    </swiper-slide>
-  </swiper-container>
-</div>
+---
+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",
+};
+---
+
+<div class="bg-white rounded-lg p-4 w-full">
+  <swiper-container
+    class="flex w-full max-w-full"
+    grid-rows="1"
+    mousewheel-force-to-axis="true"
+    navigation="false"
+    scrollbar="false"
+    slides-per-view="auto"
+    space-between="0"
+  >
+    <swiper-slide class="carousel-product-tile">
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide class="carousel-product-tile">
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide class="carousel-product-tile">
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide class="carousel-product-tile">
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide class="carousel-product-tile">
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+  </swiper-container>
+</div>

package/src/components/ProductCodes.vue

@@ -1,39 +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>
-
+<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/ProductDetailName.vue

@@ -1,53 +1,53 @@
-<script lang="ts" setup>
-import { PropType } from 'vue';
-
-const props = defineProps({
-  as: {
-    type: String as PropType< 'th'| 'td' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
-    default: 'div',
-    required: true,
-  },
-  text: {
-    type: String,
-    default: '',
-    required: true,
-  },
-  styles: {
-    type: String,
-    default: '',
-    required: false,
-  }
-})
-</script>
-
-<template>
-  <component :is="props.as" class="font-bold detail-name w-full sm:w-50 flex 2xl:w-64">
-    <span :class="styles && styles.length ? styles : 'mt-auto'">
-      <b class="bg-white z-1 colon-after pr-1">{{ props.text }}</b>
-    </span>
-  </component>
-</template>
-
-
-<style lang="scss">
-.detail-name {
-  @apply overflow-hidden relative;
-
-    span {
-      @apply block bg-white relative z-10 pr-1.5 w-full;
-
-      &:before {
-        // order: 2;
-        @apply text-gray-300 absolute select-none border-b border-gray-200 w-full -z-1 absolute content-empty left-0;
-        height: 1em;
-        white-space: nowrap;
-        font-weight: 100;
-        bottom: 2px;
-        flex: 1;
-      }
-    }
-
-
-}
-
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+const props = defineProps({
+  as: {
+    type: String as PropType< 'th'| 'td' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
+    default: 'div',
+    required: true,
+  },
+  text: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  styles: {
+    type: String,
+    default: '',
+    required: false,
+  }
+})
+</script>
+
+<template>
+  <component :is="props.as" class="font-bold detail-name w-full sm:w-50 flex 2xl:w-64">
+    <span :class="styles && styles.length ? styles : 'mt-auto'">
+      <b class="bg-white z-1 colon-after pr-1">{{ props.text }}</b>
+    </span>
+  </component>
+</template>
+
+
+<style lang="scss">
+.detail-name {
+  @apply overflow-hidden relative;
+
+    span {
+      @apply block bg-white relative z-10 pr-1.5 w-full;
+
+      &:before {
+        // order: 2;
+        @apply text-gray-300 absolute select-none border-b border-gray-200 w-full -z-1 absolute content-empty left-0;
+        height: 1em;
+        white-space: nowrap;
+        font-weight: 100;
+        bottom: 2px;
+        flex: 1;
+      }
+    }
+
+
+}
+
 </style>