spoko-design-system 1.9.0 → 1.9.2

package/src/components/Modal.astro

@@ -84,31 +84,26 @@ const {
   }
 </style>
 
-{showTrigger && (
-  <Button
-    primary
-    onclick={`window.${id}.showModal()`}
-    >{open}</Button
-  >
-)}
-
-<dialog
-  id={id}
-  class="p-6"
->
+{
+  showTrigger && (
+    <Button primary onclick={`window.${id}.showModal()`}>
+      {open}
+    </Button>
+  )
+}
+
+<dialog id={id} class="p-6">
   <div class="modal-header">
     {title && <h2 class="text-2xl font-bold pr-8">{title}</h2>}
     <slot name="header" />
 
-    {showXButton && (
-      <form method="dialog" class="inline">
-        <button
-          class="modal-close-x"
-          aria-label="Close"
-          type="submit"
-        />
-      </form>
-    )}
+    {
+      showXButton && (
+        <form method="dialog" class="inline">
+          <button class="modal-close-x" aria-label="Close" type="submit" />
+        </form>
+      )
+    }
   </div>
 
   <div class="modal-content">
@@ -116,37 +111,44 @@ const {
     <slot />
   </div>
 
-  {showActions && (
-    <div class="modal-actions">
-      <slot name="actions">
-        <form method="dialog" class="contents">
-          <Button>{cancelText}</Button>
-        </form>
-        <Button primary={confirmPrimary} onclick={`document.getElementById('${id}').dispatchEvent(new CustomEvent('confirm', { detail: { id: '${id}' } }))`}>
-          {confirmText}
-        </Button>
-      </slot>
-    </div>
-  )}
-
-  {!showActions && (
-    <form method="dialog">
-      <slot name="close" />
-    </form>
-  )}
+  {
+    showActions && (
+      <div class="modal-actions">
+        <slot name="actions">
+          <form method="dialog" class="contents">
+            <Button>{cancelText}</Button>
+          </form>
+          <Button
+            primary={confirmPrimary}
+            onclick={`document.getElementById('${id}').dispatchEvent(new CustomEvent('confirm', { detail: { id: '${id}' } }))`}
+          >
+            {confirmText}
+          </Button>
+        </slot>
+      </div>
+    )
+  }
+
+  {
+    !showActions && (
+      <form method="dialog">
+        <slot name="close" />
+      </form>
+    )
+  }
 </dialog>
 
 <script define:vars={{ id }}>
   // Close on backdrop click
   const dialog = document.getElementById(id);
-  dialog?.addEventListener('click', (e) => {
+  dialog?.addEventListener('click', e => {
     if (e.target === dialog) {
       dialog.close();
     }
   });
 
   // Close on Escape key
-  dialog?.addEventListener('keydown', (e) => {
+  dialog?.addEventListener('keydown', e => {
     if (e.key === 'Escape') {
       dialog.close();
     }

package/src/components/PageContent.astro

@@ -1,7 +1,4 @@
-<article
-  id="article"
-  class="content"
->
+<article id="article" class="content">
   <section class="main-section">
     <slot />
   </section>

package/src/components/PartNumber.vue

@@ -21,10 +21,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <component
-    :is="props.as"
-    :class="props.class"
-  >
+  <component :is="props.as" :class="props.class">
     {{ props.number }}
   </component>
 </template>

package/src/components/PostHeader.astro

@@ -31,18 +31,11 @@ import Date from './Date.astro';
       >
         {title}
       </h1>
-      <PostCategories
-        categories={categories}
-        lang={lang}
-      />
+      <PostCategories categories={categories} lang={lang} />
       <div class="order-3 flex items-center text-gray-1 00">
         {
           author && (
-            <span
-              class="text-sm"
-              title={author.firstName}
-              data-pagefind-ignore
-            >
+            <span class="text-sm" title={author.firstName} data-pagefind-ignore>
               {author.name}
             </span>
           )
@@ -53,10 +46,7 @@ import Date from './Date.astro';
     </div>
   </div>
   <div class="featured-image">
-    <img
-      src={image}
-      alt={title}
-    />
+    <img src={image} alt={title} />
   </div>
 </header>
 

package/src/components/PrCode.vue

@@ -13,7 +13,7 @@ interface PrCodeObject {
   variant_category?: string;
 }
 
-const props = defineProps({
+defineProps({
   prcode: {
     type: Object as PropType<PrCodeObject>,
     required: true,
@@ -32,7 +32,7 @@ const props = defineProps({
     class="btn-prcode"
     :class="[
       prcode.variant_category ? `btn-prcode--variant-${prcode.variant_category.toLowerCase()}` : '',
-      { 'btn-prcode--pdp': isPdp }
+      { 'btn-prcode--pdp': isPdp },
     ]"
     :data-tippy-content="prcode.description || undefined"
   >

package/src/components/Product/ProductButton.vue

@@ -9,10 +9,7 @@ const props = defineProps({
 </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/ProductDetailName.vue

@@ -15,10 +15,7 @@ const props = defineProps({
 
 <template>
   <div class="font-bold detail-name w-full sm:w-50 flex">
-    <span
-      class="colon-after"
-      :class="styles && styles.length ? styles : 'mt-auto'"
-    >
+    <span class="colon-after" :class="styles && styles.length ? styles : 'mt-auto'">
       {{ props.text }}
     </span>
   </div>

package/src/components/Product/ProductDetails.vue

@@ -30,28 +30,18 @@ const props = defineProps({
 
 <template>
   <div v-if="details && details.length">
-    <template
-      v-for="(detail, index) in details"
-      :key="index"
-    >
+    <template v-for="(detail, index) in details" :key="index">
       <!-- 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"
-        >
+        <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"
-        >
+        <span v-if="detail.translated" :class="detail.id ? 'font-semibold' : ''" class="items--1">
           {{ detail.value }}
         </span>
 
@@ -59,26 +49,16 @@ const props = defineProps({
           v-else-if="detail.value !== undefined && detail.id === 'color' && detail.isArrayValue"
           class="items--2 inline-block"
         >
-          <span
-            v-for="(color, indexColor) in detail.value"
-            :key="indexColor"
-            class="comma"
-          >
+          <span v-for="(color, indexColor) in detail.value" :key="indexColor" class="comma">
             {{ color['name'] }}
           </span>
         </div>
 
-        <span
-          v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue"
-          class="items--3"
-        >
+        <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"
-        >
+        <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>
@@ -91,14 +71,8 @@ const props = defineProps({
         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"
-        >
+        <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' : ''"
@@ -106,51 +80,31 @@ const props = defineProps({
             {{ getTranslation(`detail.value.${detail.value}`) }}
           </span>
 
-          <span
-            v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue"
-            class=""
-          >
+          <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
+              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> -
+            <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, markIndex) in JSON.parse(String(detail.value))"
-              :key="markIndex"
-              class="item"
-            >
-              {{ mark[0] }} x <span>{{ getTranslation(`color.${mark[1]}`) }}</span>
+          <span v-else-if="detail.id && detail.id === 'paint-marks'" class="items">
+            <span v-for="(mark, markIndex) in JSON.parse(String(detail.value))" :key="markIndex" 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"
-            >
+          <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>

package/src/components/Product/ProductDoc.vue

@@ -20,10 +20,7 @@ const props = defineProps({
       :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"
-      />
+      <div i-system-uicons-document-justified class="text-blue-lightest dark:text-accent-light" />
       <span>{{ props.file.name }}</span>
     </a>
   </li>

package/src/components/Product/ProductEngine.astro

@@ -0,0 +1,67 @@
+---
+import { getEngineTooltipContent } from '../../utils/product/getEngineTooltipContent';
+import type { Engine, EngineTranslations } from '../../utils/product/getEngineTooltipContent';
+
+/*
+  VAG group (VW/Audi/Skoda/Seat/Porsche/Bentley/Lamborghini/Ducati/Cupra/Scania/MAN) manufacturer Engine Code
+  Displays engine code with detailed tooltip showing: name, power, displacement, dates, etc.
+
+  SEO-friendly: Engine code is rendered in HTML, tooltips enhanced via delegation script
+*/
+
+interface Props {
+  engine: Engine;
+  showComma?: boolean;
+  translations?: EngineTranslations;
+}
+
+const { engine, showComma = false, translations = {} } = Astro.props;
+
+// Generate tooltip content for data attribute
+const tooltipContent = getEngineTooltipContent(engine, translations);
+
+// Escape quotes for HTML attribute
+const tooltipContentEscaped = tooltipContent.replace(/"/g, '"');
+---
+
+<span
+  class="engine-code"
+  class:list={[`engine-code-${engine.code}`]}
+  data-tippy-content={tooltipContentEscaped}
+>
+  {engine.code}{showComma && ','}
+</span>
+
+<style>
+  /* Engine Code Styles */
+  .engine-code {
+    @apply inline-block mr-1;
+    @apply underline decoration-dotted underline-offset-4 py-0.5;
+    @apply decoration-neutral-light cursor-default;
+    @apply transition-colors duration-200;
+  }
+
+  .engine-code:hover {
+    @apply decoration-blue-darker dark:decoration-blue-light;
+  }
+
+  /* Semantic Engine Code Colors */
+  /* GTI Engines - Red */
+  .engine-code-CAVE,
+  .engine-code-CTHE,
+  .engine-code-DAJA,
+  .engine-code-DAYB {
+    @apply text-red-600 dark:text-red-500;
+  }
+
+  /* WRC R Engine - Blue */
+  .engine-code-CDLJ {
+    @apply text-blue-600 dark:text-blue-500;
+  }
+
+  /* Special Blue Engines */
+  .engine-code-CPTA,
+  .engine-code-CZEA {
+    @apply text-blue-700 dark:text-blue-600;
+  }
+</style>

package/src/components/Product/ProductEngineType.vue

@@ -15,10 +15,7 @@ const props = withDefaults(
 </script>
 
 <template>
-  <ul
-    v-if="props.engines.length"
-    class="engine-types"
-  >
+  <ul v-if="props.engines.length" class="engine-types">
     <li
       v-for="(engine, index) in props.engines"
       :key="engine.id"

package/src/components/Product/ProductEngines.astro

@@ -0,0 +1,43 @@
+---
+import ProductEngine from './ProductEngine.astro';
+import type { Engine, EngineTranslations } from '../../utils/product/getEngineTooltipContent';
+
+/*
+  ProductEngines wrapper component
+  Displays a list of engine codes with tooltips
+  SEO-friendly: All engine codes rendered in HTML, enhanced by global delegation script
+*/
+
+interface Props {
+  engines: Engine[];
+  isPdp?: boolean;
+  translations?: EngineTranslations;
+}
+
+const { engines = [], translations = {} } = Astro.props;
+
+// Sort engines by code
+const sortedEngines = engines.length
+  ? [...engines].sort((a, b) => (a.code || '').localeCompare(b.code || ''))
+  : [];
+---
+
+{
+  sortedEngines.length > 0 && (
+    <div class="engines-list inline-flex flex-wrap items-center gap-x-0.5">
+      {sortedEngines.map((engine, index) => (
+        <ProductEngine
+          engine={engine}
+          showComma={index !== sortedEngines.length - 1}
+          translations={translations}
+        />
+      ))}
+    </div>
+  )
+}
+
+<style>
+  .engines-list {
+    @apply leading-none;
+  }
+</style>

package/src/components/Product/ProductLink.astro

@@ -27,12 +27,7 @@ import { getProductUrl } from '@utils/product/getProductUrl';
 import { getShopProductUrl } from '@utils/product/getShopProductUrl';
 import { getProductTranslation } from '@utils/product/getProductTranslation';
 import { getImageUrl } from '@utils/getImageUrl';
-import {
-  ProductImage,
-  ProductNumber,
-  removeSemicolon,
-  getPriceFormatted,
-} from 'spoko-design-system';
+import { ProductImage, ProductNumber, removeSemicolon, getPriceFormatted } from 'spoko-design-system';
 
 // Użycie productObject jeśli przekazane, inaczej pobranie produktu na podstawie productId
 const product =
@@ -51,9 +46,7 @@ const thumb = product
   : '';
 
 // Product translation removed - using English only
-const productTranslation = productId
-  ? await getProductTranslation(productId, product?.number || '')
-  : null;
+const productTranslation = productId ? await getProductTranslation(productId, product?.number || '') : null;
 
 const productName = product
   ? isShopProduct
@@ -67,9 +60,7 @@ const nameFormatted = removeSemicolon(productName.toString());
 {
   product && (
     <>
-      <div
-        class={bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel'}
-      >
+      <div class={bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel'}>
         {product.photo !== null && thumb ? (
           <ProductImage
             imagesApiUrl="https://api.polo.blue"
@@ -82,11 +73,7 @@ const nameFormatted = removeSemicolon(productName.toString());
             }}
           />
         ) : (
-          <img
-            src="/1x1.png"
-            class="bg-neutral-lightest/70"
-            alt={productName}
-          />
+          <img src="/1x1.png" class="bg-neutral-lightest/70" alt={productName} />
         )}
       </div>
 
@@ -98,30 +85,19 @@ const nameFormatted = removeSemicolon(productName.toString());
         <a
           class="product-link--url"
           href={
-            isShopProduct
-              ? getShopProductUrl(product.slug, locale)
-              : getProductUrl(product.number, locale)
+            isShopProduct ? getShopProductUrl(product.slug, locale) : getProductUrl(product.number, locale)
           }
           itemprop="url"
           title={product.number}
           set:html={nameFormatted}
         />
 
-        <ProductNumber
-          productNumber={product.number}
-          copyDisabled={true}
-        />
+        <ProductNumber productNumber={product.number} copyDisabled={true} />
 
         {index !== null && (
           <>
-            <meta
-              itemprop="position"
-              content={index.toString()}
-            />
-            <meta
-              itemprop="name"
-              content={nameFormatted}
-            />
+            <meta itemprop="position" content={index.toString()} />
+            <meta itemprop="name" content={nameFormatted} />
           </>
         )}
       </div>

package/src/components/Product/ProductLink.vue

@@ -1,52 +1,24 @@
 <template>
-  <div
-    class="product-link"
-    itemscope
-    itemtype="https://schema.org/Product"
-  >
-    <div
-      :class="[bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel']"
-    >
+  <div class="product-link" itemscope itemtype="https://schema.org/Product">
+    <div :class="[bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel']">
       <!-- Slot na ProductImage z Astro -->
       <slot name="image">
-        <img
-          src="/1x1.png"
-          class="bg-neutral-lightest/70"
-          :alt="productName"
-        />
+        <img src="/1x1.png" class="bg-neutral-lightest/70" :alt="productName" />
       </slot>
     </div>
 
     <div :class="[bigTile ? '' : 'sm:pl-4']">
-      <p
-        v-if="price"
-        class="block mb-2 font-600 font-headbold text-5"
-      >
+      <p v-if="price" class="block mb-2 font-600 font-headbold text-5">
         {{ price }}
       </p>
 
-      <a
-        class="product-link--url"
-        :href="url"
-        itemprop="url"
-        :title="productNumber"
-        v-html="nameFormatted"
-      />
+      <a class="product-link--url" :href="url" itemprop="url" :title="productNumber" v-html="nameFormatted" />
 
-      <ProductNumber
-        :product-number="productNumber"
-        :copy-disabled="true"
-      />
+      <ProductNumber :product-number="productNumber" :copy-disabled="true" />
 
       <template v-if="index !== null">
-        <meta
-          itemprop="position"
-          :content="index.toString()"
-        />
-        <meta
-          itemprop="name"
-          :content="nameFormatted"
-        />
+        <meta itemprop="position" :content="index.toString()" />
+        <meta itemprop="name" :content="nameFormatted" />
       </template>
     </div>
   </div>

package/src/components/Product/ProductLinkInfo.astro

@@ -16,28 +16,13 @@ const { product, nameFormatted, price, url, index, bigTile } = Astro.props;
 
 <div class={`flex flex-col ${bigTile ? '' : 'sm:pl-4'}`}>
   {price && <p class="block mb-2 font-600 font-headbold text-5">{price}</p>}
-  <a
-    class="product-link--url"
-    href={url}
-    itemprop="url"
-    title={product.number}
-    set:html={nameFormatted}
-  />
-  <ProductNumber
-    productNumber={product.number}
-    copyDisabled={true}
-  />
+  <a class="product-link--url" href={url} itemprop="url" title={product.number} set:html={nameFormatted} />
+  <ProductNumber productNumber={product.number} copyDisabled={true} />
   {
     index !== null && (
       <>
-        <meta
-          itemprop="position"
-          content={index}
-        />
-        <meta
-          itemprop="name"
-          content={nameFormatted}
-        />
+        <meta itemprop="position" content={index} />
+        <meta itemprop="name" content={nameFormatted} />
       </>
     )
   }