spoko-design-system 0.2.45 → 0.2.48

package/src/components/PrCode.vue

@@ -26,132 +26,117 @@ const props = defineProps({
     </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 scoped>
+.btn-prcode--pdp {
+  @apply mb-1;
+}
+
+.btn-prcode::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%;
+}
+
+.btn-prcode:hover::before {
+  display: block;
+}
+
+.btn-prcode--2JK {
+  color: #f3881d;
+}
+
+.btn-prcode--2JK::before {
+  content: 'CROSS';
+}
+
+.btn-prcode--1LR::before,
+.btn-prcode--1ZG::before,
+.btn-prcode--1ZJ::before {
+  content: '⌀ 256 mm';
+}
+
+.btn-prcode--1KD::before,
+.btn-prcode--1ZP::before,
+.btn-prcode--1ZR::before {
+  content: '⌀ 310 mm';
+}
+
+.btn-prcode--1ZD::before,
+.btn-prcode--1ZC::before,
+.btn-prcode--1LN::before {
+  content: '⌀ 288 mm; LUCAS';
+}
 
+.btn-prcode--2JZ {
+  @apply text-lightBlue-500;
 }
+
+.btn-prcode--2JZ::before {
+  content: 'Bluemotion';
+}
+
+.btn-prcode--7L6 {
+  @apply text-lightBlue-500;
+}
+
+.btn-prcode--7L6::before {
+  content: 'Bluemotion (CFWA + start-stop)';
+}
+
+.btn-prcode--1KK::before,
+.btn-prcode--1KT::before,
+.btn-prcode--1KV::before,
+.btn-prcode--1LV::before,
+.btn-prcode--2EJ::before {
+  content: '⌀ 230 mm';
+}
+
+.btn-prcode--2JE {
+  @apply text-lightBlue-700;
+}
+
+.btn-prcode--2JE::before {
+  content: 'BlueGT';
+}
+
+.btn-prcode--2JP::before {
+  content: 'R-Line';
+}
+
+.btn-prcode--E5M,
+.btn-prcode--1KD,
+.btn-prcode--1ZP,
+.btn-prcode--2JQ,
+.btn-prcode--TA2 {
+  color: blue;
+}
+
+.btn-prcode--E5M::before,
+.btn-prcode--1KD::before,
+.btn-prcode--1ZP::before,
+.btn-prcode--2JQ::before,
+.btn-prcode--TA2::before {
+  content: 'R WRC Street';
+}
+
+.btn-prcode--1KV,
+.btn-prcode--1ZD,
+.btn-prcode--1ZR,
+.btn-prcode--0NH,
+.btn-prcode--2JD {
+  color: red;
+}
+
+.btn-prcode--1KV::before,
+.btn-prcode--1ZD::before,
+.btn-prcode--1ZR::before,
+.btn-prcode--0NH::before,
+.btn-prcode--2JD::before {
+  content: 'GTI';
+}
+
+
 </style>

package/src/components/Product/ProductCodes.vue

@@ -45,123 +45,130 @@ const settings = {
 
 </template>
 
-<style lang="scss" scoped>
+<style  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
-  }
+.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;
-
-    display: none;
-    position: absolute;
-    text-align: center;
-    // bottom: 100%;
-    top: -10px;
-    transform: translateY(-50%) translateX(-50%);
-    left: 50%;
-    z-index: 50;
-  }
+.btn-prcode::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;
+  top: -10px;
+  transform: translateY(-50%) translateX(-50%);
+  left: 50%;
+  z-index: 50;
+}
 
-  &:hover:before {
-    display:block;
-  }
+.btn-prcode:hover::before {
+  display: block;
+}
 
-  &--2JK {
-    color: #f3881d;
-    &:before {
-      content: 'CROSS';
-    }
-  }
+.btn-prcode--2JK {
+  color: #f3881d;
+}
 
-  &--1LR,
-  &--1ZG,
-  &--1ZJ {
-     &:before {
-      content: '⌀ 256 mm';
-    }
-  }
+.btn-prcode--2JK::before {
+  content: 'CROSS';
+}
 
-  &--1KD,
-  &--1ZP,
-  &--1ZR {
-    &:before {
-      content: '⌀ 310 mm';
-    }
+.btn-prcode--1LR,
+.btn-prcode--1ZG,
+.btn-prcode--1ZJ {
+  &::before {
+    content: '⌀ 256 mm';
   }
+}
 
-  &--1ZD,
-  &--1ZC,
-  &--1LN {
-    &:before {
-      content: '⌀ 288 mm; LUCAS';
-    }
+.btn-prcode--1KD,
+.btn-prcode--1ZP,
+.btn-prcode--1ZR {
+  &::before {
+    content: '⌀ 310 mm';
   }
+}
 
-  &--2JZ {
-    @apply: text-lightBlue-500;
-    &:before {
-      content: 'Bluemotion';
-    }
+.btn-prcode--1ZD,
+.btn-prcode--1ZC,
+.btn-prcode--1LN {
+  &::before {
+    content: '⌀ 288 mm; LUCAS';
   }
+}
 
-  &--7L6 {
-    @apply: text-lightBlue-500;
-    &:before {
-      content: 'Bluemotion (CFWA + start-stop)';
-    }
-  }
+.btn-prcode--2JZ {
+  @apply text-lightBlue-500;
+}
 
-  &--1KK,
-  &--1KT,
-  &--1KV,
-  &--1LV,
-  &--2EJ {
-    &:before {
-      content: '⌀ 230 mm';
-    }
-  }
+.btn-prcode--2JZ::before {
+  content: 'Bluemotion';
+}
 
-  &--2JE {
-    @apply text-lightBlue-700;
+.btn-prcode--7L6 {
+  @apply text-lightBlue-500;
+}
 
-    &:before {
-      content: 'BlueGT';
-    }
-  }
+.btn-prcode--7L6::before {
+  content: 'Bluemotion (CFWA + start-stop)';
+}
 
-  &--2JP {
-     &:before {
-      content: 'R-Line';
-    }
+.btn-prcode--1KK,
+.btn-prcode--1KT,
+.btn-prcode--1KV,
+.btn-prcode--1LV,
+.btn-prcode--2EJ {
+  &::before {
+    content: '⌀ 230 mm';
   }
+}
 
-  // WRC Street R
-  &--E5M, // emblems/stickers
-  &--1KD, //brakes
-  &--1ZP, //brakes
-  &--2JQ,//bumpers
-  &--TA2 { //engine parts
-    color: blue;
-    &:before {
-      content: 'R WRC Street';
-    }
-  }
+.btn-prcode--2JE {
+  @apply text-lightBlue-700;
+}
 
-  // GTI
-  &--1KV,
-  &--1ZD,
-  &--1ZR,
-  &--0NH,
-  &--2JD {
-    color: red;
-     &:before {
-      content: 'GTI';
-    }
-  }
+.btn-prcode--2JE::before {
+  content: 'BlueGT';
+}
 
+.btn-prcode--2JP::before {
+  content: 'R-Line';
 }
+
+.btn-prcode--E5M,
+.btn-prcode--1KD,
+.btn-prcode--1ZP,
+.btn-prcode--2JQ,
+.btn-prcode--TA2 {
+  color: blue;
+}
+
+.btn-prcode--E5M::before,
+.btn-prcode--1KD::before,
+.btn-prcode--1ZP::before,
+.btn-prcode--2JQ::before,
+.btn-prcode--TA2::before {
+  content: 'R WRC Street';
+}
+
+.btn-prcode--1KV,
+.btn-prcode--1ZD,
+.btn-prcode--1ZR,
+.btn-prcode--0NH,
+.btn-prcode--2JD {
+  color: red;
+}
+
+.btn-prcode--1KV::before,
+.btn-prcode--1ZD::before,
+.btn-prcode--1ZR::before,
+.btn-prcode--0NH::before,
+.btn-prcode--2JD::before {
+  content: 'GTI';
+}
+
 </style>

package/src/components/Product/ProductColors.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  colors: {
+    type: Object 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

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

package/src/components/Product/ProductDetails.vue

@@ -0,0 +1,99 @@
+<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-gray-900 dark:text-gray-300 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

@@ -0,0 +1,25 @@
+<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-500 dark:text-lightBlue-500" /> <span>{{ props.file.name }}</span>
+    </a>
+  </li>
+</template>

package/src/components/Product/ProductEngineType.vue

@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<{
   </ul>
 </template>
 
-<style lang="scss">
+<style >
 .engine-types {
   @apply flex flex-wrap items-center;
 }

package/src/components/Product/ProductModel.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { Model } from 'types/index';
+import type { PropType } from 'vue';
+
+const props = defineProps({
+  carModel: {
+    type: Object as PropType<Model>,
+    required: true,
+  },
+})
+
+</script>
+<template>
+  <strong class="product-model" :data-pagefind-filter="`model:${props.carModel.name}`">{{ props.carModel.name }}</strong>
+</template>
+<style >
+.product-model:not(:last-child) {
+  @apply mr-1;
+
+  &:after {
+    content: ','
+  }
+}
+</style>