spoko-design-system 1.1.0 → 1.1.2

package/src/components/PrCode.vue

@@ -3,27 +3,30 @@
      VAG group (VW/Audi/Skoda/Seat/Porsche/Bentley/Lamborghini/Ducati/Cupra/Scania/MAN) manufacturer PR-Code
 */
 
-import type { PropType } from 'vue'
+import type { PropType } from 'vue';
 
 const props = defineProps({
-    prcode: {
-        type: String,
-        default: null,
-        required: true,
-    },
-    isPdp: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
-})
+  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>
+  <span
+    data-pagefind-filter="PR-Code"
+    class="btn-prcode"
+    :class="`btn-prcode--${props.prcode} ${props.isPdp ? ' btn-prcode--pdp' : ''}`"
+  >
+    {{ props.prcode }}
+  </span>
 </template>
 
 <style>
@@ -137,6 +140,4 @@ const props = defineProps({
 .btn-prcode--2JD::before {
   content: 'GTI';
 }
-
-
-</style>
+</style>

package/src/components/Product/ProductButton.vue

@@ -5,14 +5,11 @@ const props = defineProps({
     default: false,
     required: false,
   },
-})
+});
 </script>
 
 <template>
-  <button
-    class="product-button"
-    :class="props.shadow ? 'drop-shadow hover:(drop-shadow-md)' : ''"
-  >
+  <button class="product-button" :class="props.shadow ? 'drop-shadow hover:(drop-shadow-md)' : ''">
     <slot />
   </button>
 </template>

package/src/components/Product/ProductCarousel.astro

@@ -1,36 +1,47 @@
 ---
-import ProductLink from "./ProductLink.astro";
+import ProductLink from './ProductLink.astro';
 
 // Get the product directly from the prop on render
 const { locale, class: className, products, isShopProduct = false, ...rest } = Astro.props;
-
 ---
 
-
 {
-    products && products.length && (
-         <swiper-container slides-per-view="auto" space-between="0" class="flex"
-            itemscope itemtype="https://schema.org/ItemList">
-            {
-                products.map((product, index) => (
-                    <swiper-slide class="product-carousel" 
-                      itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" >
-                        <ProductLink productObject={product} locale={locale} index={index+1} bigTile loading="eager" isShopProduct={isShopProduct} />
-                        <div class="swiper-lazy-preloader"></div>
-                    </swiper-slide>
-                ))
-            }
-            </swiper-container>
-    )
-  }
-  
-  <style>
-    .similar-section {
-      @apply relative z-20;
+  products && products.length && (
+    <swiper-container
+      slides-per-view="auto"
+      space-between="0"
+      class="flex"
+      itemscope
+      itemtype="https://schema.org/ItemList"
+    >
+      {products.map((product, index) => (
+        <swiper-slide
+          class="product-carousel"
+          itemprop="itemListElement"
+          itemscope
+          itemtype="https://schema.org/ListItem"
+        >
+          <ProductLink
+            productObject={product}
+            locale={locale}
+            index={index + 1}
+            bigTile
+            loading="eager"
+            isShopProduct={isShopProduct}
+          />
+          <div class="swiper-lazy-preloader" />
+        </swiper-slide>
+      ))}
+    </swiper-container>
+  )
+}
 
-      &:hover {
-        content-visibility: visible;
-      }
+<style>
+  .similar-section {
+    @apply relative z-20;
+
+    &:hover {
+      content-visibility: visible;
     }
-    
-  </style>
+  }
+</style>

package/src/components/Product/ProductColors.vue

@@ -1,42 +1,46 @@
-<script lang="ts" setup>
-import type { PropType } from 'vue'
-
-const props = defineProps({
-  colors: {
-    type: Array as PropType<{id: number, slug: string, name: string}[]>,
-    default: null,
-    required: true,
-  },
-  small: {
-    type: Boolean,
-    required: false,
-  },
-  isPdp: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  filterName: {
-    type: String,
-    required: false,
-    default: 'Color'
-  }
-})
-
-</script>
-
-<template>
-  <span v-for="(color, index) in colors" :key="index" class="product-color" :data-pagefind-filter="filterName">
-    {{  color.name }}
-  </span>
-</template>
-
-<style >
-.product-color:not(:last-child) {
-  @apply mr-1;
-
-  &:after {
-    content: ','
-  }
-}
-</style>
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+
+const props = defineProps({
+  colors: {
+    type: Array as PropType<{ id: number; slug: string; name: string }[]>,
+    default: null,
+    required: true,
+  },
+  small: {
+    type: Boolean,
+    required: false,
+  },
+  isPdp: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  filterName: {
+    type: String,
+    required: false,
+    default: 'Color',
+  },
+});
+</script>
+
+<template>
+  <span
+    v-for="(color, index) in colors"
+    :key="index"
+    class="product-color"
+    :data-pagefind-filter="filterName"
+  >
+    {{ color.name }}
+  </span>
+</template>
+
+<style>
+.product-color:not(:last-child) {
+  @apply mr-1;
+
+  &:after {
+    content: ',';
+  }
+}
+</style>

package/src/components/Product/ProductDetailName.vue

@@ -1,22 +1,22 @@
-<script lang="ts" setup>
-const props = defineProps({
-  text: {
-    type: String,
-    default: '',
-    required: true,
-  },
-  styles: {
-    type: String,
-    default: '',
-    required: false,
-  }
-})
-</script>
-
-<template>
-  <div class="font-bold detail-name w-full sm:w-50 flex">
-    <span class="colon-after" :class="styles && styles.length ? styles : 'mt-auto'">
-      {{ props.text }}
-    </span>
-  </div>
-</template>
+<script lang="ts" setup>
+const props = defineProps({
+  text: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  styles: {
+    type: String,
+    default: '',
+    required: false,
+  },
+});
+</script>
+
+<template>
+  <div class="font-bold detail-name w-full sm:w-50 flex">
+    <span class="colon-after" :class="styles && styles.length ? styles : 'mt-auto'">
+      {{ props.text }}
+    </span>
+  </div>
+</template>

package/src/components/Product/ProductDetails.vue

@@ -1,99 +1,115 @@
-<script lang="ts" setup>
-import type { PropType } from 'vue'
-import type { DetailList, DetailObject } from '../../types/index'
-import ProductDetailName from './ProductDetailName.vue'
-import {getTranslation} from "../../utils/text"
-// import ProductColors from "@components/Product/ProductColors.vue"
-
-const props = defineProps({
-  details: {
-    type: Array as PropType<DetailList[]> | null,
-    default: null,
-    required: false,
-  },
-  small: {
-    type: Boolean,
-    required: false,
-  },
-  colors: {
-    type: Array as PropType<string[] | null>,
-    default: null,
-    required: false,
-  },
-  locale: {
-    type: String,
-    default: 'en',
-    required: false,
-  },
-})
-
-</script>
-
-<template>
-  <template v-for="(detail, index) in details" :key="index" class="" v-if="details && details.length">
-    <!-- PDP PAGE - PRODUCT ROW -->
-    <!-- <pre>{{  JSON.stringify(details) }}</pre> -->
-    <li v-if="props.small" class="text-xs md:text-sm text-slate-darkest dark:text-neutral-light leading-tight font-textlight md:font-textregular">
-
-      <span v-if="detail.id" class="inline-block mr-1 items--0">
-        {{ getTranslation(`detail.${detail.id}`) }}:
-      </span>
-
-      <span v-if="detail.translated" :class="detail.id ? 'font-semibold' : ''" class="items--1">
-        {{ detail.value }}
-      </span>
-
-      <div v-else-if="detail.value !== undefined && detail.id === 'color' && detail.isArrayValue" class="items--2 inline-block">
-          <span class="comma" v-for="(color, indexColor) in detail.value" :key="indexColor">
-            {{ color['name'] }}
-          </span>
-      </div>
-
-      <span v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue" class="items--3">
-        {{ locale === 'en' ? String(detail.value).replace(/,/g, '.') : String(detail.value) }}
-      </span>
-      
-      <span v-else-if="detail.id && detail.id === 'paint-marks'" class="items items--4">
-        {{  detail.value }}
-        <!-- <span v-for="(mark, index2) in JSON.parse(String(detail.value))" :key="index2" class="item">
-          {{ mark[0] }} x <span>{{ getTranslation(`color.${mark[1]}`) }}</span>
-        </span> -->
-      </span>
-
-    </li>
-
-    <div v-else class="text-sm mt-1 md:mt-4 mb-4 grid grid-cols-2
-    sm:(grid-cols-details-desktop grid-flow-col auto-cols-max) gap-4">
-      <!-- PRODUCT CARD -->
-      <ProductDetailName v-if="detail.id" :text="getTranslation(`detail.${detail.id}`)" />
-      <div v-if="detail.value"
-        class="leading-4 flex items-end">
-
-        <span v-if="detail.translated && !detail.isArrayValue" :class="detail.id === 'light-function' ? 'whitespace-pre-line' : ''">
-          {{ getTranslation(`detail.value.${detail.value}`) }}
-        </span>
-
-        <span v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue" class="">
-          {{ detail.value }}
-        </span>
-
-        <span v-else-if="detail.value !== undefined && detail.id === 'for-exterior-colour' && detail.isArrayValue" class="">
-          <div v-for="(color, indexColor) in JSON.parse(String(detail.value))" :key="indexColor">
-            <span class="font-mono">{{ color }}</span> - {{ getTranslation(`colorCodes.${color}`)  }}
-          </div>
-        </span>
-        
-        <span v-else-if="detail.id && detail.id === 'paint-marks'" class="items">
-          <span v-for="(mark, index) in JSON.parse(String(detail.value))" :key="index" class="item">
-            {{ mark[0] }} x <span>{{ getTranslation(`color.${mark[1]}`) }}</span>
-          </span>
-        </span>
-        <ul v-else-if="detail.id && detail.isArrayValue" class="items">
-          <li v-for="(d, index3) in JSON.parse(String(detail.value))" :key="index3" class="item">
-            · {{ d }}
-          </li>
-        </ul>
-      </div>
-    </div>
-  </template>
-</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import type { DetailList, DetailObject } from '../../types/index';
+import ProductDetailName from './ProductDetailName.vue';
+import { getTranslation } from '../../utils/text';
+// import ProductColors from "@components/Product/ProductColors.vue"
+
+const props = defineProps({
+  details: {
+    type: Array as PropType<DetailList[]> | null,
+    default: null,
+    required: false,
+  },
+  small: {
+    type: Boolean,
+    required: false,
+  },
+  colors: {
+    type: Array as PropType<string[] | null>,
+    default: null,
+    required: false,
+  },
+  locale: {
+    type: String,
+    default: 'en',
+    required: false,
+  },
+});
+</script>
+
+<template>
+  <template
+    v-for="(detail, index) in details"
+    :key="index"
+    class=""
+    v-if="details && details.length"
+  >
+    <!-- PDP PAGE - PRODUCT ROW -->
+    <!-- <pre>{{  JSON.stringify(details) }}</pre> -->
+    <li
+      v-if="props.small"
+      class="text-xs md:text-sm text-slate-darkest dark:text-neutral-light leading-tight font-textlight md:font-textregular"
+    >
+      <span v-if="detail.id" class="inline-block mr-1 items--0">
+        {{ getTranslation(`detail.${detail.id}`) }}:
+      </span>
+
+      <span v-if="detail.translated" :class="detail.id ? 'font-semibold' : ''" class="items--1">
+        {{ detail.value }}
+      </span>
+
+      <div
+        v-else-if="detail.value !== undefined && detail.id === 'color' && detail.isArrayValue"
+        class="items--2 inline-block"
+      >
+        <span class="comma" v-for="(color, indexColor) in detail.value" :key="indexColor">
+          {{ color['name'] }}
+        </span>
+      </div>
+
+      <span v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue" class="items--3">
+        {{ locale === 'en' ? String(detail.value).replace(/,/g, '.') : String(detail.value) }}
+      </span>
+
+      <span v-else-if="detail.id && detail.id === 'paint-marks'" class="items items--4">
+        {{ detail.value }}
+        <!-- <span v-for="(mark, index2) in JSON.parse(String(detail.value))" :key="index2" class="item">
+          {{ mark[0] }} x <span>{{ getTranslation(`color.${mark[1]}`) }}</span>
+        </span> -->
+      </span>
+    </li>
+
+    <div
+      v-else
+      class="text-sm mt-1 md:mt-4 mb-4 grid grid-cols-2 sm:(grid-cols-details-desktop grid-flow-col auto-cols-max) gap-4"
+    >
+      <!-- PRODUCT CARD -->
+      <ProductDetailName v-if="detail.id" :text="getTranslation(`detail.${detail.id}`)" />
+      <div v-if="detail.value" class="leading-4 flex items-end">
+        <span
+          v-if="detail.translated && !detail.isArrayValue"
+          :class="detail.id === 'light-function' ? 'whitespace-pre-line' : ''"
+        >
+          {{ getTranslation(`detail.value.${detail.value}`) }}
+        </span>
+
+        <span v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue" class="">
+          {{ detail.value }}
+        </span>
+
+        <span
+          v-else-if="
+            detail.value !== undefined && detail.id === 'for-exterior-colour' && detail.isArrayValue
+          "
+          class=""
+        >
+          <div v-for="(color, indexColor) in JSON.parse(String(detail.value))" :key="indexColor">
+            <span class="font-mono">{{ color }}</span> - {{ getTranslation(`colorCodes.${color}`) }}
+          </div>
+        </span>
+
+        <span v-else-if="detail.id && detail.id === 'paint-marks'" class="items">
+          <span v-for="(mark, index) in JSON.parse(String(detail.value))" :key="index" class="item">
+            {{ mark[0] }} x <span>{{ getTranslation(`color.${mark[1]}`) }}</span>
+          </span>
+        </span>
+        <ul v-else-if="detail.id && detail.isArrayValue" class="items">
+          <li v-for="(d, index3) in JSON.parse(String(detail.value))" :key="index3" class="item">
+            · {{ d }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </template>
+</template>

package/src/components/Product/ProductDoc.vue

@@ -1,25 +1,27 @@
-<script lang="ts" setup>
-const props = defineProps({
-  file: {
-    type: Object,
-    default: null,
-    required: true,
-  },
-  locale: {
-    type: String,
-    default: 'en',
-    required: false
-  }
-})
-</script>
-
-<template>
-  <li v-if="props.file">
-    <a :href="`${locale !== 'en' ? `/${locale}` : ''}/docs/${props.file.name}/`" 
-      :title="props.file.path"
-      class="flex items-center hover:underline underline-offset-2 hover:underline-1"
-    >
-      <div i-system-uicons-document-justified class="text-blue-lightest dark:text-accent-light" /> <span>{{ props.file.name }}</span>
-    </a>
-  </li>
-</template>
+<script lang="ts" setup>
+const props = defineProps({
+  file: {
+    type: Object,
+    default: null,
+    required: true,
+  },
+  locale: {
+    type: String,
+    default: 'en',
+    required: false,
+  },
+});
+</script>
+
+<template>
+  <li v-if="props.file">
+    <a
+      :href="`${locale !== 'en' ? `/${locale}` : ''}/docs/${props.file.name}/`"
+      :title="props.file.path"
+      class="flex items-center hover:underline underline-offset-2 hover:underline-1"
+    >
+      <div i-system-uicons-document-justified class="text-blue-lightest dark:text-accent-light" />
+      <span>{{ props.file.name }}</span>
+    </a>
+  </li>
+</template>

package/src/components/Product/ProductEngineType.vue

@@ -4,17 +4,20 @@ interface Engine {
   name: string;
 }
 
-const props = withDefaults(defineProps<{
-  engines: Engine[];
-}>(), {
-  engines: () => []
-});
+const props = withDefaults(
+  defineProps<{
+    engines: Engine[];
+  }>(),
+  {
+    engines: () => [],
+  }
+);
 </script>
 
 <template>
   <ul v-if="engines.length" class="engine-types">
-    <li 
-      v-for="(engine, index) in engines" 
+    <li
+      v-for="(engine, index) in engines"
       :key="engine.id"
       class="engine-type"
       :class="{ 'with-comma': index !== engines.length - 1 }"
@@ -24,7 +27,7 @@ const props = withDefaults(defineProps<{
   </ul>
 </template>
 
-<style >
+<style>
 .engine-types {
   @apply flex flex-wrap items-center;
 }
@@ -34,10 +37,10 @@ const props = withDefaults(defineProps<{
 
   &.with-comma {
     @apply mr-1;
-    
+
     &:after {
       content: ',';
     }
   }
 }
-</style>
+</style>

package/src/components/Product/ProductImage.astro

@@ -1,5 +1,5 @@
 ---
-import { Image } from 'astro:assets'
+import { Image } from 'astro:assets';
 interface ImageObject {
   src: string;
   alt?: string;
@@ -11,31 +11,30 @@ interface ImageObject {
   index?: number;
 }
 
-const { imageObject } = Astro.props as { imageObject: ImageObject; };
+const { imageObject } = Astro.props as { imageObject: ImageObject };
 
 let inputProps = {};
 
-
 if (imageObject.index && imageObject.index === 1) {
   inputProps['data-pagefind-meta'] = 'image[src], image_alt[alt]';
-  imageObject.loading = 'eager'
+  imageObject.loading = 'eager';
 }
 
 if (imageObject.srcset && imageObject.srcset.length) {
-  inputProps['widths'] = imageObject.srcset
+  inputProps['widths'] = imageObject.srcset;
 }
-
 ---
-<Image 
-    src={imageObject.src}
-    alt={imageObject.alt}
-    height={Number(imageObject.height)} 
-    width={Number(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}
-/>
+
+<Image
+  src={imageObject.src}
+  alt={imageObject.alt}
+  height={Number(imageObject.height)}
+  width={Number(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}
+/>