spoko-design-system 0.2.40 → 0.2.42

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/Product/ProductButton.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps({
+  shadow: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+})
+</script>
+
+<template>
+  <button
+    class="product-button"
+    :class="props.shadow ? 'drop-shadow hover:(drop-shadow-md)' : ''"
+  >
+    <slot />
+  </button>
+</template>

package/src/components/Product/ProductCodes.vue

@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+import type { PropType } from '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"
+  >
+    <span data-pagefind-filter="PR-Code"
+      v-if="!String(prcode).includes('+')"
+      class="btn-prcode "
+      :class="`btn-prcode--${prcode}`"
+    >
+      {{ prcode }}
+    </span>
+    <span v-else >
+      <span v-for="(splittedCode, index2) in String(prcode).split('+')" :key="index2" class="btn-prcode" :class="`btn-prcode--${splittedCode} ${isPdp ? ' btn-prcode--pdp' : ''}` " data-pagefind-filter="PR-Code">
+        {{ splittedCode }}
+      </span>
+    </span>
+  </span>
+
+</template>
+
+<style lang="scss" scoped>
+.btn-prcode {
+  @apply relative inline-block leading-none px-1 py-0.5 mr-1 cursor-pointer font-mono border-solid border-1 border-gray-200 select-none text-gray-500 last:mr-0 dark:border-white dark:border-opacity-10 dark:text-gray-300 dark:bg-white dark:bg-opacity-30 not-last:mr-2 not-last:after:content-[+] dark:after:text-white/50 after:pl-0.5 after:text-blue-700 after:absolute after:w-4 text-center;
+
+  &--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;
+
+    display: none;
+    position: absolute;
+    text-align: center;
+    // bottom: 100%;
+    top: -10px;
+    transform: translateY(-50%) translateX(-50%);
+    left: 50%;
+    z-index: 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
+  &--TA2 { //engine parts
+    color: blue;
+    &:before {
+      content: 'R WRC Street';
+    }
+  }
+
+  // GTI
+  &--1KV,
+  &--1ZD,
+  &--1ZR,
+  &--0NH,
+  &--2JD {
+    color: red;
+     &:before {
+      content: 'GTI';
+    }
+  }
+
+}
+</style>

package/src/components/Product/ProductEngineType.vue

@@ -1,43 +1,43 @@
-<script setup lang="ts">
-interface Engine {
-  id: number | string;
-  name: string;
-}
-
-const props = withDefaults(defineProps<{
-  engines: Engine[];
-}>(), {
-  engines: () => []
-});
-</script>
-
-<template>
-  <ul v-if="engines.length" class="engine-types">
-    <li 
-      v-for="(engine, index) in engines" 
-      :key="engine.id"
-      class="engine-type"
-      :class="{ 'with-comma': index !== engines.length - 1 }"
-    >
-      {{ engine.name }}
-    </li>
-  </ul>
-</template>
-
-<style lang="scss">
-.engine-types {
-  @apply flex flex-wrap items-center;
-}
-
-.engine-type {
-  @apply inline-block;
-
-  &.with-comma {
-    @apply mr-1;
-    
-    &:after {
-      content: ',';
-    }
-  }
-}
+<script setup lang="ts">
+interface Engine {
+  id: number | string;
+  name: string;
+}
+
+const props = withDefaults(defineProps<{
+  engines: Engine[];
+}>(), {
+  engines: () => []
+});
+</script>
+
+<template>
+  <ul v-if="engines.length" class="engine-types">
+    <li 
+      v-for="(engine, index) in engines" 
+      :key="engine.id"
+      class="engine-type"
+      :class="{ 'with-comma': index !== engines.length - 1 }"
+    >
+      {{ engine.name }}
+    </li>
+  </ul>
+</template>
+
+<style lang="scss">
+.engine-types {
+  @apply flex flex-wrap items-center;
+}
+
+.engine-type {
+  @apply inline-block;
+
+  &.with-comma {
+    @apply mr-1;
+    
+    &:after {
+      content: ',';
+    }
+  }
+}
 </style>

package/src/components/Product/ProductImage.astro

@@ -1,42 +1,42 @@
----
-import { Image } from 'astro:assets'
-
-interface ImageObject {
-  src: string;
-  alt?: string;
-  height?: string | number;
-  width?: string | number;
-  loading?: 'lazy' | 'eager';
-  srcset?: string[];
-  class?: string;
-  index?: number;
-}
-
-const { imageObject, imagesApiUrl } = Astro.props as { imageObject: ImageObject; imagesApiUrl: string };
-
-let inputProps = {};
-
-
-if (imageObject.index && imageObject.index === 1) {
-  inputProps['data-pagefind-meta'] = 'image[src], image_alt[alt]';
-  imageObject.loading = 'eager'
-}
-
-if (imageObject.srcset && imageObject.srcset.length) {
-  inputProps['widths'] = imageObject.srcset
-}
-
----
-<Image 
-    src={`${imagesApiUrl}${imageObject.src}`}
-    alt={imageObject.alt}
-    height={imageObject.height} 
-    width={imageObject.width}
-    loading={imageObject.loading ? imageObject.loading : 'lazy'}
-    itemprop="image"
-    format="avif"
-    data-pagefind-index-attrs={imageObject.alt}
-    onerror="this.style.display='none';"
-    class={`product-image ${imageObject.class || ''}`}
-    { ...inputProps}
+---
+import { Image } from 'astro:assets'
+
+interface ImageObject {
+  src: string;
+  alt?: string;
+  height?: string | number;
+  width?: string | number;
+  loading?: 'lazy' | 'eager';
+  srcset?: string[];
+  class?: string;
+  index?: number;
+}
+
+const { imageObject, imagesApiUrl } = Astro.props as { imageObject: ImageObject; imagesApiUrl: string };
+
+let inputProps = {};
+
+
+if (imageObject.index && imageObject.index === 1) {
+  inputProps['data-pagefind-meta'] = 'image[src], image_alt[alt]';
+  imageObject.loading = 'eager'
+}
+
+if (imageObject.srcset && imageObject.srcset.length) {
+  inputProps['widths'] = imageObject.srcset
+}
+
+---
+<Image 
+    src={`${imagesApiUrl}${imageObject.src}`}
+    alt={imageObject.alt}
+    height={imageObject.height} 
+    width={imageObject.width}
+    loading={imageObject.loading ? imageObject.loading : 'lazy'}
+    itemprop="image"
+    format="avif"
+    data-pagefind-index-attrs={imageObject.alt}
+    onerror="this.style.display='none';"
+    class={`product-image ${imageObject.class || ''}`}
+    { ...inputProps}
 />