spoko-design-system 0.2.24 → 0.2.26

package/src/components/ProductDetailsList.vue

@@ -1,65 +1,65 @@
-<script setup lang="ts">
-import { PropType } from "vue";
-import ProductDetailName from "./ProductDetailName.vue";
-
-interface TableItem {
-  id: string,
-  name: string 
-  value: unknown
-}
-
-const props = defineProps({
-  items: {type: Array as PropType<TableItem[]>, default: () => []},
-  caption: { type: String, default: null }
-})
-
-</script>
-
-<template>
-  <table class="details table-auto text-left bg-white">
-    <caption v-if="!!$slots.caption || caption">
-      <slot name="caption">{{ caption }}</slot>
-    </caption>
-    <colgroup>
-      <col>
-      <col>
-    </colgroup>
-    <tbody>
-      <tr v-for="row, index in props.items" :key="index">
-        <ProductDetailName as="th" :text="row.name" />
-        <slot :name="row.id">
-          <td>{{ row.value }}</td>
-        </slot>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<style lang="scss" scoped>
-  .details {
-    @apply border-none shadow-none w-full md:w-auto
-    box-shadow: none;
-
-    col {
-      @apply w-1/2 md:w-auto;
-
-    }
-
-    tr {
-      @apply border-none;
-    }
-
-    tr,
-    th {
-      @apply leading-none text-3.5 py-2 border-none xl:(py-4) 3xl:(text-4);
-    }
-
-    th {
-      @apply px-0;
-    }
-
-    td {
-      @apply relative;
-    }
-  }
-</style>
+<script setup lang="ts">
+import { PropType } from "vue";
+import ProductDetailName from "./ProductDetailName.vue";
+
+interface TableItem {
+  id: string,
+  name: string 
+  value: unknown
+}
+
+const props = defineProps({
+  items: {type: Array as PropType<TableItem[]>, default: () => []},
+  caption: { type: String, default: null }
+})
+
+</script>
+
+<template>
+  <table class="details table-auto text-left bg-white">
+    <caption v-if="!!$slots.caption || caption">
+      <slot name="caption">{{ caption }}</slot>
+    </caption>
+    <colgroup>
+      <col>
+      <col>
+    </colgroup>
+    <tbody>
+      <tr v-for="row, index in props.items" :key="index">
+        <ProductDetailName as="th" :text="row.name" />
+        <slot :name="row.id">
+          <td>{{ row.value }}</td>
+        </slot>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style lang="scss" scoped>
+  .details {
+    @apply border-none shadow-none w-full md:w-auto
+    box-shadow: none;
+
+    col {
+      @apply w-1/2 md:w-auto;
+
+    }
+
+    tr {
+      @apply border-none;
+    }
+
+    tr,
+    th {
+      @apply leading-none text-3.5 py-2 border-none xl:(py-4) 3xl:(text-4);
+    }
+
+    th {
+      @apply px-0;
+    }
+
+    td {
+      @apply relative;
+    }
+  }
+</style>

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,114 +1,114 @@
----
-import { t } from "i18next";
-import ButtonCopy from "./ButtonCopy.vue";
-import PartNumber from "./PartNumber.vue";
-
-const {
-  copyDisabled,
-  productNumber,
-  as,
-  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+$)/, "");
-  }
-
-  // remove single separator from the end of string:
-  let lastCharacter = word.split('').pop() || '';
-  
-  if (!Boolean(lastCharacter.match(/[a-zA-Z0-9]/))) {
-    word = word.slice(0, -1)
-  }
-
-  return word.replace(" ", separator);
-};
-
-const classes = `product-number ${big ? "text-5.5 leading-none" : "text-sm"} ${className}` //mt-2 sm:mt-0
-
-
----
-
-<!-- <PartNumber number={productNumber} as="div"></PartNumber> -->
-
-
-{
-  productNumber !== null && (
-   
-
-      <PartNumber class={`${classes} product-code`} number={productNumber} as={isPdp ? 'h2' : '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>
-        <PartNumber class="number-secondary" number={niceName(productNumber)} as={isPdp ? 'h3' : 'div'} />
-      </div>
-    
-  )
-}
-
-
-<!-- {!copyDisabled && ( -->
-  <ButtonCopy
-    class="top-1 right-0"
-    productNumber={String(productNumber)}
-    texts={butonTexts}
-    tooltipClasses=""
-    client:only
-  />
-<!-- )}  -->
+---
+import { t } from "i18next";
+import ButtonCopy from "./ButtonCopy.vue";
+import PartNumber from "./PartNumber.vue";
+
+const {
+  copyDisabled,
+  productNumber,
+  as,
+  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+$)/, "");
+  }
+
+  // remove single separator from the end of string:
+  let lastCharacter = word.split('').pop() || '';
+  
+  if (!Boolean(lastCharacter.match(/[a-zA-Z0-9]/))) {
+    word = word.slice(0, -1)
+  }
+
+  return word.replace(" ", separator);
+};
+
+const classes = `product-number ${big ? "text-5.5 leading-none" : "text-sm"} ${className}` //mt-2 sm:mt-0
+
+
+---
+
+<!-- <PartNumber number={productNumber} as="div"></PartNumber> -->
+
+
+{
+  productNumber !== null && (
+   
+
+      <PartNumber class={`${classes} product-code`} number={productNumber} as={isPdp ? 'h2' : '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>
+        <PartNumber class="number-secondary" number={niceName(productNumber)} as={isPdp ? 'h3' : 'div'} />
+      </div>
+    
+  )
+}
+
+
+<!-- {!copyDisabled && ( -->
+  <ButtonCopy
+    class="top-1 right-0"
+    productNumber={String(productNumber)}
+    texts={butonTexts}
+    tooltipClasses=""
+    client:only
+  />
+<!-- )}  -->