spoko-design-system 0.2.40 → 0.2.42

package/src/components/ProductNumber copy.astro

@@ -1,116 +1,116 @@
----
-import { t } from "i18next";
-import ButtonCopy from "./ButtonCopy.vue";
-
-const {
-  copyDisabled,
-  productNumber,
-  isPdp,
-  small,
-  big,
-  class: className,
-} = Astro.props;
-
-const butonTexts = {
-  copy: t("copy"),
-  copied: t("copied"),
-};
-
-const isLetter = (string: string) => {
-  return string.toLowerCase() !== string.toUpperCase();
-};
-
-const niceName = (string: string, separator = "\u00A0") => {
-  let word = string; //e.g. to 6Q0947106EY20 .split('+')
-
-  if (
-    isLetter(string[0]) === true &&
-    isLetter(string[1]) === false &&
-    string.length === 9
-  ) {
-    // mainly liquids
-    word = string
-      .replace(
-        /^(\w{1})(\w{3})(\w{3})(.*)$/,
-        `$1${separator}$2${separator}$3${separator}$4`,
-      )
-      .replace(/(^\s+|\s+$)/, "");
-  }
-
-  // wheels / emblems e.g. 6R0601025AK8Z8 --> 6R0 601 025 AB 8Z8 || 6C0601025DFZZ --> 6C0 601 025 D FZZ || 6R0853433ADA1 -> 6R0 853 433 A DA1
-  else if (string.length >= 13) {
-    // console.log('part number: wheels / emblems', word)
-    word = string
-      .replace(
-        /^(\w{3})(\w{3})(\w{3})(.*)(\w{3})$/,
-        `$1${separator}$2${separator}$3${separator}$4${separator}$5`,
-      )
-      .replace(/(^\s+|\s+$)/, "");
-  } else if (string.length > 12) {
-    // accessories / mats
-    word = string
-      .replace(
-        /^(\w{3})(\w{3})(\w{3})(\w{1})(.*)$/,
-        `$1${separator}$2${separator}$3${separator}$4${separator}$5`,
-      )
-      .replace(/(^\s+|\s+$)/, "");
-  } else {
-    // other parts
-    word = string
-      .replace(/(\w{3})/g, `$1${separator}`)
-      .replace(/(^\s+|\s+$)/, "");
-  }
-
-  return word.replace(" ", separator);
-};
----
-
-{
-  productNumber !== null && (
-    <div
-      class={`product-number ${
-        big ? "text-lg" : `text-sm ${className ? className : "mt-2 sm:mt-0"}`
-      }`}
-    >
-      <div
-        class={`inline-flex leading-none relative ${small ? "w-full" : ""}`}
-        itemprop="identifier"
-      >
-        {isPdp ? (
-          <h2 id={productNumber} class="product-code">
-            {productNumber}
-          </h2>
-        ) : (
-          <div id={productNumber} class="product-code">
-            {productNumber}
-          </div>
-        )}
-
-        {copyDisabled && (
-          <ButtonCopy
-            productNumber={String(productNumber)}
-            texts={butonTexts}
-            tooltipClasses=""
-            client:only
-          />
-        )}
-      </div>
-
-      <div
-        class={`code-formatted ${small ? "tracking-wide" : "tracking-tight"}`}
-      >
-        <div class="relative inset-0" data-pagefind-ignore>
-          {niceName(productNumber, ".")}
-        </div>
-        <div class="absolute inset-0" data-pagefind-ignore>
-          {niceName(productNumber, "-")}
-        </div>
-        {isPdp ? (
-          <h3 class="number-secondary">{niceName(productNumber)}</h3>
-        ) : (
-          <div class="number-secondary">{niceName(productNumber)}</div>
-        )}
-      </div>
-    </div>
-  )
-}
+---
+import { t } from "i18next";
+import ButtonCopy from "./ButtonCopy.vue";
+
+const {
+  copyDisabled,
+  productNumber,
+  isPdp,
+  small,
+  big,
+  class: className,
+} = Astro.props;
+
+const butonTexts = {
+  copy: t("copy"),
+  copied: t("copied"),
+};
+
+const isLetter = (string: string) => {
+  return string.toLowerCase() !== string.toUpperCase();
+};
+
+const niceName = (string: string, separator = "\u00A0") => {
+  let word = string; //e.g. to 6Q0947106EY20 .split('+')
+
+  if (
+    isLetter(string[0]) === true &&
+    isLetter(string[1]) === false &&
+    string.length === 9
+  ) {
+    // mainly liquids
+    word = string
+      .replace(
+        /^(\w{1})(\w{3})(\w{3})(.*)$/,
+        `$1${separator}$2${separator}$3${separator}$4`,
+      )
+      .replace(/(^\s+|\s+$)/, "");
+  }
+
+  // wheels / emblems e.g. 6R0601025AK8Z8 --> 6R0 601 025 AB 8Z8 || 6C0601025DFZZ --> 6C0 601 025 D FZZ || 6R0853433ADA1 -> 6R0 853 433 A DA1
+  else if (string.length >= 13) {
+    // console.log('part number: wheels / emblems', word)
+    word = string
+      .replace(
+        /^(\w{3})(\w{3})(\w{3})(.*)(\w{3})$/,
+        `$1${separator}$2${separator}$3${separator}$4${separator}$5`,
+      )
+      .replace(/(^\s+|\s+$)/, "");
+  } else if (string.length > 12) {
+    // accessories / mats
+    word = string
+      .replace(
+        /^(\w{3})(\w{3})(\w{3})(\w{1})(.*)$/,
+        `$1${separator}$2${separator}$3${separator}$4${separator}$5`,
+      )
+      .replace(/(^\s+|\s+$)/, "");
+  } else {
+    // other parts
+    word = string
+      .replace(/(\w{3})/g, `$1${separator}`)
+      .replace(/(^\s+|\s+$)/, "");
+  }
+
+  return word.replace(" ", separator);
+};
+---
+
+{
+  productNumber !== null && (
+    <div
+      class={`product-number ${
+        big ? "text-lg" : `text-sm ${className ? className : "mt-2 sm:mt-0"}`
+      }`}
+    >
+      <div
+        class={`inline-flex leading-none relative ${small ? "w-full" : ""}`}
+        itemprop="identifier"
+      >
+        {isPdp ? (
+          <h2 id={productNumber} class="product-code">
+            {productNumber}
+          </h2>
+        ) : (
+          <div id={productNumber} class="product-code">
+            {productNumber}
+          </div>
+        )}
+
+        {copyDisabled && (
+          <ButtonCopy
+            productNumber={String(productNumber)}
+            texts={butonTexts}
+            tooltipClasses=""
+            client:only
+          />
+        )}
+      </div>
+
+      <div
+        class={`code-formatted ${small ? "tracking-wide" : "tracking-tight"}`}
+      >
+        <div class="relative inset-0" data-pagefind-ignore>
+          {niceName(productNumber, ".")}
+        </div>
+        <div class="absolute inset-0" data-pagefind-ignore>
+          {niceName(productNumber, "-")}
+        </div>
+        {isPdp ? (
+          <h3 class="number-secondary">{niceName(productNumber)}</h3>
+        ) : (
+          <div class="number-secondary">{niceName(productNumber)}</div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/ProductNumber.astro

@@ -1,105 +1,105 @@
----
-import { t } from "i18next";
-import ButtonCopy from "./ButtonCopy.vue";
-
-interface Props {
-  productNumber: string | null;
-  copyDisabled?: boolean;
-  isPdp?: boolean;
-  small?: boolean;
-  big?: boolean;
-  class?: string;
-}
-
-const { 
-  productNumber, 
-  copyDisabled, 
-  isPdp, 
-  small, 
-  big, 
-  class: className 
-} = Astro.props;
-
-const buttonTexts = {
-  copy: t('copy'),
-  copied: t('copied')
-} as const;
-
-// Regex patterns:
-const LIQUIDS_PATTERN = /^(\w{1})(\w{3})(\w{3})(.*)$/;
-const WHEELS_EMBLEMS_PATTERN = /^(\w{3})(\w{3})(\w{3})(.*)(\w{3})$/;
-const ACCESSORIES_MATS_PATTERN = /^(\w{3})(\w{3})(\w{3})(\w{1})(.*)$/;
-const OTHER_PARTS_PATTERN = /(\w{3})/g;
-
-const isLetter = (char: string): boolean => 
-  char.toLowerCase() !== char.toUpperCase();
-
-const formatProductNumber = (number: string, separator: string): string => {
-  if (!number) return '';
-  
-  let formatted = number;
-
-  if (isLetter(number[0]) && !isLetter(number[1]) && number.length === 9) {
-    formatted = formatted.replace(LIQUIDS_PATTERN, `$1${separator}$2${separator}$3${separator}$4`);
-  } else if (number.length >= 13) {
-    formatted = formatted.replace(WHEELS_EMBLEMS_PATTERN, `$1${separator}$2${separator}$3${separator}$4${separator}$5`);
-  } else if (number.length > 12) {
-    formatted = formatted.replace(ACCESSORIES_MATS_PATTERN, `$1${separator}$2${separator}$3${separator}$4${separator}$5`);
-  } else {
-    formatted = formatted.replace(OTHER_PARTS_PATTERN, `$1${separator}`);
-  }
-
-  return formatted
-    .replace(' ', separator)
-    .replace(/[^a-zA-Z0-9]$/, ''); // Remove the end trailing separator
-};
-
-// Memoization of formatted numbers
-const formattedNumbers = productNumber ? {
-  standard: formatProductNumber(productNumber, '\u00A0'),
-  dot: formatProductNumber(productNumber, '.'),
-  dash: formatProductNumber(productNumber, '-')
-} : null;
-
-const classNames = [
-  'product-number',
-  big ? 'text-4.5' : 'number-big',
-  className
-].filter(Boolean).join(' ');
-
-const trackingClass = small ? 'tracking-wide' : 'tracking-tight';
-
-const ProductWrapper = isPdp ? 'h2' : 'div';
-const FormattedWrapper = isPdp ? 'h3' : 'div';
----
-
-{productNumber && formattedNumbers && (
-  <div class={classNames}>
-    <div class={`p-number ${small ? "w-full" : ""}`} itemprop="identifier">
-      <ProductWrapper id={productNumber} class="product-code">
-        {productNumber}
-      </ProductWrapper>
-
-      {big && (
-        <ButtonCopy 
-          productNumber={productNumber} 
-          copyDisabled={!big} 
-          texts={buttonTexts} 
-          client:idle 
-        />
-      )}
-    </div>
-
-    <div class={`code-formatted ${trackingClass}`}>
-      <div class="relative inset-0" data-pagefind-ignore>
-        {formattedNumbers.dot}
-      </div>
-      <div class="absolute inset-0" data-pagefind-ignore>
-        {formattedNumbers.dash}
-      </div>
-      <FormattedWrapper class="number-secondary">
-        {formattedNumbers.standard}
-      </FormattedWrapper>
-    </div>
-  </div>
+---
+import { t } from "i18next";
+import ButtonCopy from "./ButtonCopy.vue";
+
+interface Props {
+  productNumber: string | null;
+  copyDisabled?: boolean;
+  isPdp?: boolean;
+  small?: boolean;
+  big?: boolean;
+  class?: string;
+}
+
+const { 
+  productNumber, 
+  copyDisabled, 
+  isPdp, 
+  small, 
+  big, 
+  class: className 
+} = Astro.props;
+
+const buttonTexts = {
+  copy: t('copy'),
+  copied: t('copied')
+} as const;
+
+// Regex patterns:
+const LIQUIDS_PATTERN = /^(\w{1})(\w{3})(\w{3})(.*)$/;
+const WHEELS_EMBLEMS_PATTERN = /^(\w{3})(\w{3})(\w{3})(.*)(\w{3})$/;
+const ACCESSORIES_MATS_PATTERN = /^(\w{3})(\w{3})(\w{3})(\w{1})(.*)$/;
+const OTHER_PARTS_PATTERN = /(\w{3})/g;
+
+const isLetter = (char: string): boolean => 
+  char.toLowerCase() !== char.toUpperCase();
+
+const formatProductNumber = (number: string, separator: string): string => {
+  if (!number) return '';
+  
+  let formatted = number;
+
+  if (isLetter(number[0]) && !isLetter(number[1]) && number.length === 9) {
+    formatted = formatted.replace(LIQUIDS_PATTERN, `$1${separator}$2${separator}$3${separator}$4`);
+  } else if (number.length >= 13) {
+    formatted = formatted.replace(WHEELS_EMBLEMS_PATTERN, `$1${separator}$2${separator}$3${separator}$4${separator}$5`);
+  } else if (number.length > 12) {
+    formatted = formatted.replace(ACCESSORIES_MATS_PATTERN, `$1${separator}$2${separator}$3${separator}$4${separator}$5`);
+  } else {
+    formatted = formatted.replace(OTHER_PARTS_PATTERN, `$1${separator}`);
+  }
+
+  return formatted
+    .replace(' ', separator)
+    .replace(/[^a-zA-Z0-9]$/, ''); // Remove the end trailing separator
+};
+
+// Memoization of formatted numbers
+const formattedNumbers = productNumber ? {
+  standard: formatProductNumber(productNumber, '\u00A0'),
+  dot: formatProductNumber(productNumber, '.'),
+  dash: formatProductNumber(productNumber, '-')
+} : null;
+
+const classNames = [
+  'product-number',
+  big ? 'text-4.5' : 'number-big',
+  className
+].filter(Boolean).join(' ');
+
+const trackingClass = small ? 'tracking-wide' : 'tracking-tight';
+
+const ProductWrapper = isPdp ? 'h2' : 'div';
+const FormattedWrapper = isPdp ? 'h3' : 'div';
+---
+
+{productNumber && formattedNumbers && (
+  <div class={classNames}>
+    <div class={`p-number ${small ? "w-full" : ""}`} itemprop="identifier">
+      <ProductWrapper id={productNumber} class="product-code">
+        {productNumber}
+      </ProductWrapper>
+
+      {big && (
+        <ButtonCopy 
+          productNumber={productNumber} 
+          copyDisabled={!big} 
+          texts={buttonTexts} 
+          client:idle 
+        />
+      )}
+    </div>
+
+    <div class={`code-formatted ${trackingClass}`}>
+      <div class="relative inset-0" data-pagefind-ignore>
+        {formattedNumbers.dot}
+      </div>
+      <div class="absolute inset-0" data-pagefind-ignore>
+        {formattedNumbers.dash}
+      </div>
+      <FormattedWrapper class="number-secondary">
+        {formattedNumbers.standard}
+      </FormattedWrapper>
+    </div>
+  </div>
 )}

package/src/components/ProductTile.astro

@@ -1,48 +1,48 @@
----
-const { productObject, locale, index } = Astro.props;
-import Image from "./Image.astro"
-import ProductNumber from "./Product/ProductNumber.astro"
-
----
-
-{ productObject && 
-  (
-
-    <!-- product image -->
-    <div class="img--4/3 img--small">
-      { productObject.photo !== null ?
-        <Image
-          imageObject={
-            {
-              src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
-              alt: 'Image Alt',
-              height: '180',
-              width: '240',
-              class: 'img--overlay object-cover'
-            }
-          }
-        />
-        :
-        <img src="/1x1.png" class="bg-gray-100/70" alt={productObject.name} />
-      }
-    </div>
-      
-    <!-- product deails -->
-    <div class="sm:pl-4 flex flex-col" >
-      <a class="font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em] before:(content-empty absolute left-0 right-4 h-full top-0)"
-        href={productObject.url} itemprop="url"
-        title={productObject.number}
-      >
-        { productObject.name }
-      </a>
-
-      <ProductNumber productNumber={productObject.number} copyDisabled={false}  />
-      
-      { index !== null && 
-        ( <meta itemprop="position" content={String(index)} />
-        <meta itemprop="name" content={productObject.name} /> )
-      }
-    </div>
-
-)}
-
+---
+const { productObject, locale, index } = Astro.props;
+import Image from "./Image.astro"
+import ProductNumber from "./Product/ProductNumber.astro"
+
+---
+
+{ productObject && 
+  (
+
+    <!-- product image -->
+    <div class="img--4/3 img--small">
+      { productObject.photo !== null ?
+        <Image
+          imageObject={
+            {
+              src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+              alt: 'Image Alt',
+              height: '180',
+              width: '240',
+              class: 'img--overlay object-cover'
+            }
+          }
+        />
+        :
+        <img src="/1x1.png" class="bg-gray-100/70" alt={productObject.name} />
+      }
+    </div>
+      
+    <!-- product deails -->
+    <div class="sm:pl-4 flex flex-col" >
+      <a class="font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em] before:(content-empty absolute left-0 right-4 h-full top-0)"
+        href={productObject.url} itemprop="url"
+        title={productObject.number}
+      >
+        { productObject.name }
+      </a>
+
+      <ProductNumber productNumber={productObject.number} copyDisabled={false}  />
+      
+      { index !== null && 
+        ( <meta itemprop="position" content={String(index)} />
+        <meta itemprop="name" content={productObject.name} /> )
+      }
+    </div>
+
+)}
+

package/src/components/Quote.vue

@@ -1,23 +1,23 @@
-<script setup lang="ts">
-import { PropType } from 'vue';
-
-const props = defineProps({
-  as: {
-    type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
-    default: 'div',
-    required: false,
-  },
-  text: {
-    type: String,
-    default: '',
-    required: false,
-  }
-})
-</script>
-
-<template>
-  <component :is="props.as"
-    class="px-8 sm:px-8 mx-4 sm:mx-6 lg:max-w-4xl drop-shadow-primary text-2xl md:text-4xl lg:text-4.5xl relative font-light after:left-0 after:content-empty after:rounded-3xl after:top-0 after:absolute after:h-full after:border-solid after:border-[var(--primary)] after:border-l-3 after:z-0">
-      <slot>{{ props.text }}</slot>
-    </component>
-</template>
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+const props = defineProps({
+  as: {
+    type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
+    default: 'div',
+    required: false,
+  },
+  text: {
+    type: String,
+    default: '',
+    required: false,
+  }
+})
+</script>
+
+<template>
+  <component :is="props.as"
+    class="px-8 sm:px-8 mx-4 sm:mx-6 lg:max-w-4xl drop-shadow-primary text-2xl md:text-4xl lg:text-4.5xl relative font-light after:left-0 after:content-empty after:rounded-3xl after:top-0 after:absolute after:h-full after:border-solid after:border-[var(--primary)] after:border-l-3 after:z-0">
+      <slot>{{ props.text }}</slot>
+    </component>
+</template>