spoko-design-system 1.9.1 → 1.9.3

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

@@ -33,35 +33,35 @@ const tooltipContentEscaped = tooltipContent.replace(/"/g, '"');
 </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 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;
-}
+  .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;
-}
+  /* 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;
-}
+  /* 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;
-}
+  /* 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

@@ -14,7 +14,7 @@ interface Props {
   translations?: EngineTranslations;
 }
 
-const { engines = [], isPdp = false, translations = {} } = Astro.props;
+const { engines = [], translations = {} } = Astro.props;
 
 // Sort engines by code
 const sortedEngines = engines.length
@@ -37,7 +37,7 @@ const sortedEngines = engines.length
 }
 
 <style>
-.engines-list {
-  @apply leading-none;
-}
+  .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} />
       </>
     )
   }

package/src/components/Product/ProductModel.vue

@@ -10,11 +10,9 @@ const props = defineProps({
 });
 </script>
 <template>
-  <strong
-    class="product-model"
-    :data-pagefind-filter="`model:${props.carModel.name}`"
-    >{{ props.carModel.name }}</strong
-  >
+  <strong class="product-model" :data-pagefind-filter="`model:${props.carModel.name}`">
+    {{ props.carModel.name }}
+  </strong>
 </template>
 <style>
 .product-model:not(:last-child) {

package/src/components/Product/ProductModels.vue

@@ -11,16 +11,8 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    inline-flex
-    flex-wrap
-    max-w-max
-  >
-    <span
-      v-for="(modelId, index) in props.modelIds"
-      :key="index"
-      class="product-model block"
-    >
+  <div inline-flex flex-wrap max-w-max>
+    <span v-for="(modelId, index) in props.modelIds" :key="index" class="product-model block">
       <ProductModel :id="modelId" />
     </span>
   </div>

package/src/components/Product/ProductNumber.astro

@@ -15,9 +15,7 @@ const {
 const { formattedNumbers: formatted } = useFormatProductNumber(productNumber);
 
 // Define classes dynamically
-const classNames = ['product-number', big ? 'text-4.5' : 'number-big', customClass]
-  .filter(Boolean)
-  .join(' ');
+const classNames = ['product-number', big ? 'text-4.5' : 'number-big', customClass].filter(Boolean).join(' ');
 
 const trackingClass = small ? 'tracking-wide' : 'tracking-tight';
 
@@ -29,37 +27,19 @@ const FormattedWrapper = isPdp ? 'h3' : 'div';
 {
   productNumber && formatted && (
     <div class={classNames}>
-      <div
-        class={['p-number', small ? 'w-full' : ''].join(' ')}
-        itemprop="identifier"
-      >
-        <ProductWrapper
-          id={productNumber}
-          class="product-code"
-        >
+      <div class={['p-number', small ? 'w-full' : ''].join(' ')} itemprop="identifier">
+        <ProductWrapper id={productNumber} class="product-code">
           {productNumber}
         </ProductWrapper>
 
-        {big && (
-          <ButtonCopy
-            productNumber={productNumber}
-            texts={buttonTexts}
-            tooltipClasses=""
-          />
-        )}
+        {big && <ButtonCopy productNumber={productNumber} texts={buttonTexts} tooltipClasses="" />}
       </div>
 
       <div class={['code-formatted', trackingClass].join(' ')}>
-        <div
-          class="relative inset-0"
-          data-pagefind-ignore
-        >
+        <div class="relative inset-0" data-pagefind-ignore>
           {formatted.dot}
         </div>
-        <div
-          class="absolute inset-0"
-          data-pagefind-ignore
-        >
+        <div class="absolute inset-0" data-pagefind-ignore>
           {formatted.dash}
         </div>
         <FormattedWrapper class="number-secondary">{formatted.standard}</FormattedWrapper>

package/src/components/Product/ProductPositions.vue

@@ -16,11 +16,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <span
-    v-for="position in props.positions"
-    :key="position.sort"
-    class="product-position"
-  >
+  <span v-for="position in props.positions" :key="position.sort" class="product-position">
     {{ position.name }}
   </span>
 </template>

package/src/components/ProductCodes.vue

@@ -10,7 +10,7 @@ interface PrCodeObject {
   variant_category?: string;
 }
 
-const props = defineProps({
+defineProps({
   prcodes: {
     type: Array as PropType<PrCodeObject[]>,
     default: () => [],
@@ -33,11 +33,11 @@ const variantCategoryMap: Record<string, string> = {
   '0NH': 'GTI',
   '1ZR': 'GTI',
   // WRC
-  'E5M': 'WRC',
+  E5M: 'WRC',
   '1KD': 'WRC',
   '1ZP': 'WRC',
   '2JQ': 'WRC',
-  'TA2': 'WRC',
+  TA2: 'WRC',
   // CROSS
   '2JK': 'CROSS',
   // BLUEGT
@@ -56,17 +56,9 @@ const getVariantCategory = (code: string, fallback?: string): string | undefined
 </script>
 
 <template>
-  <span
-    v-for="(prcode, index) in prcodes"
-    :key="prcode?.id || index"
-    class="not-last:mr-1"
-  >
+  <span v-for="(prcode, index) in prcodes" :key="prcode?.id || index" class="not-last:mr-1">
     <template v-if="prcode?.code">
-      <PrCode
-        v-if="!prcode.code.includes('+')"
-        :prcode="prcode"
-        :isPdp="isPdp"
-      />
+      <PrCode v-if="!prcode.code.includes('+')" :prcode="prcode" :is-pdp="isPdp" />
       <span v-else class="inline-flex items-center gap-1">
         <template v-for="(code, idx) in prcode.code.split('+')" :key="idx">
           <span v-if="idx > 0" class="text-sm opacity-75">+</span>
@@ -75,9 +67,9 @@ const getVariantCategory = (code: string, fallback?: string): string | undefined
               code: code.trim(),
               group: prcode.group,
               description: null,
-              variant_category: getVariantCategory(code.trim(), prcode.variant_category)
+              variant_category: getVariantCategory(code.trim(), prcode.variant_category),
             }"
-            :isPdp="isPdp"
+            :is-pdp="isPdp"
           />
         </template>
       </span>