spoko-design-system 1.1.1 → 1.1.3

package/src/components/Product/ProductLink.astro

@@ -7,7 +7,7 @@ interface Props {
   locale: string;
   index: number;
   bigTile?: boolean;
-  loading?: "eager" | "lazy";
+  loading?: 'eager' | 'lazy';
   isShopProduct?: boolean;
 }
 
@@ -17,80 +17,101 @@ const {
   bigTile,
   locale,
   index,
-  loading = "lazy",
+  loading = 'lazy',
   isShopProduct = false,
 } = Astro.props;
 
 import { getProductById } from '@utils/product/getProductById';
 import { getShopProductById } from '@utils/product/getShopProductById';
-import { getProductUrl } from "@utils/product/getProductUrl";
-import { getShopProductUrl } from "@utils/product/getShopProductUrl";
-import { getProductTranslation } from "@utils/product/getProductTranslation";
+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 = productObject || (productId ? (isShopProduct ? await getShopProductById(productId) : await getProductById(productId)) : null);
+const product =
+  productObject ||
+  (productId
+    ? isShopProduct
+      ? await getShopProductById(productId)
+      : await getProductById(productId)
+    : null);
 
 // Określenie URL miniatury produktu
-const thumb = product ? (
-  isShopProduct
-    ? await getImageUrl(product.images?.[0]?.path || "", "SHOP")
-    : await getImageUrl(product.photo || "", `'ProductLink' ${product.number}`)
-) : "";
+const thumb = product
+  ? isShopProduct
+    ? await getImageUrl(product.images?.[0]?.path || '', 'SHOP')
+    : await getImageUrl(product.photo || '', `'ProductLink' ${product.number}`)
+  : '';
 
 // Product translation removed - using English only
-const productTranslation = productId ? await getProductTranslation(productId, product?.number || "") : null;
- 
-const productName = product ? (
-  isShopProduct
+const productTranslation = productId
+  ? await getProductTranslation(productId, product?.number || '')
+  : null;
+
+const productName = product
+  ? isShopProduct
     ? product.name_en || product.name
     : productTranslation?.name || product.name
-) : 'NO NAME';
+  : 'NO NAME';
 
 const nameFormatted = removeSemicolon(productName.toString());
 ---
 
-{product && (
-  <div class={bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel'}>
-    {product.photo !== null && thumb ? (
-      <ProductImage
-        imagesApiUrl="https://api.polo.blue"
-        imageObject={{
-          src: thumb,
-          alt: productName,
-          height: '180',
-          width: '240',
-          loading
-        }}
-      />
-    ) : (
-      <img src="/1x1.png" class="bg-neutral-lightest/70" alt={productName} />
-    )}
-  </div>
+{
+  product && (
+    <>
+      <div
+        class={bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel'}
+      >
+        {product.photo !== null && thumb ? (
+          <ProductImage
+            imagesApiUrl="https://api.polo.blue"
+            imageObject={{
+              src: thumb,
+              alt: productName,
+              height: '180',
+              width: '240',
+              loading,
+            }}
+          />
+        ) : (
+          <img src="/1x1.png" class="bg-neutral-lightest/70" alt={productName} />
+        )}
+      </div>
+
+      <div class={bigTile ? '' : 'sm:pl-4'}>
+        {product.price_pln && (
+          <p class="block mb-2 font-600 font-headbold text-5">{getPriceFormatted(product)}</p>
+        )}
 
-  <div class={bigTile ? '' : 'sm:pl-4'}>
-    {product.price_pln && (
-      <p class="block mb-2 font-600 font-headbold text-5">
-        {getPriceFormatted(product)}
-      </p>
-    )}
+        <a
+          class="product-link--url"
+          href={
+            isShopProduct
+              ? getShopProductUrl(product.slug, locale)
+              : getProductUrl(product.number, locale)
+          }
+          itemprop="url"
+          title={product.number}
+          set:html={nameFormatted}
+        />
 
-    <a 
-      class="product-link--url"
-      href={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} />
-      </>
-    )}
-  </div>
-)}
+        {index !== null && (
+          <>
+            <meta itemprop="position" content={index.toString()} />
+            <meta itemprop="name" content={nameFormatted} />
+          </>
+        )}
+      </div>
+    </>
+  )
+}

package/src/components/Product/ProductLink.vue

@@ -1,60 +1,57 @@
 <template>
-    <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" />
-        </slot>
-      </div>
-  
-      <div :class="[bigTile ? '' : 'sm:pl-4']">
-        <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"
-        />
-  
-        <ProductNumber 
-          :productNumber="productNumber" 
-          :copyDisabled="true" 
-        />
-        
-        <template v-if="index !== null">
-          <meta itemprop="position" :content="index.toString()" />
-          <meta itemprop="name" :content="nameFormatted" />
-        </template>
-      </div>
+  <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" />
+      </slot>
     </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { computed } from 'vue'
-  import { ProductNumber } from 'spoko-design-system'
-  import { removeSemicolon } from 'spoko-design-system'
-  
-  interface Props {
-    productName: string
-    productNumber: string
-    url: string
-    price?: string
-    bigTile?: boolean
-    index?: number
-  }
-  
-  const props = withDefaults(defineProps<Props>(), {
-    bigTile: false,
-    index: null,
-  })
-  
-  const nameFormatted = computed(() => {
-    return removeSemicolon(props.productName.toString())
-  })
-  </script>
+
+    <div :class="[bigTile ? '' : 'sm:pl-4']">
+      <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"
+      />
+
+      <ProductNumber :productNumber="productNumber" :copyDisabled="true" />
+
+      <template v-if="index !== null">
+        <meta itemprop="position" :content="index.toString()" />
+        <meta itemprop="name" :content="nameFormatted" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ProductNumber } from 'spoko-design-system';
+import { removeSemicolon } from 'spoko-design-system';
+
+interface Props {
+  productName: string;
+  productNumber: string;
+  url: string;
+  price?: string;
+  bigTile?: boolean;
+  index?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  bigTile: false,
+  index: null,
+});
+
+const nameFormatted = computed(() => {
+  return removeSemicolon(props.productName.toString());
+});
+</script>

package/src/components/Product/ProductLinkInfo.astro

@@ -1,6 +1,6 @@
 ---
 import type { Product } from '../../types/Product';
-import ProductNumber from "./ProductNumber.astro"
+import ProductNumber from './ProductNumber.astro';
 
 interface Props {
   product: Product;
@@ -12,27 +12,24 @@ interface Props {
 }
 
 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} />
-    {index !== null && (
+  {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} />
+  {
+    index !== null && (
       <>
         <meta itemprop="position" content={index} />
         <meta itemprop="name" content={nameFormatted} />
       </>
-    )}
-  </div>
+    )
+  }
+</div>

package/src/components/Product/ProductModel.vue

@@ -1,24 +1,25 @@
-<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>
+<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>

package/src/components/Product/ProductModels.vue

@@ -1,33 +1,29 @@
-<script lang="ts" setup>
-import type { PropType } from 'vue'
-
-const props = defineProps({
-  modelIds: {
-    type: Array as PropType<(string | number)[]>,
-    default: () => [],
-    required: true,
-  },
-})
-
-</script>
-
-<template>
-  <div inline-flex flex-wrap max-w-max>
-    <span v-for="(modelId, index) in modelIds"
-      :key="index"
-      class="product-model block"
-    >
-      <ProductModel :id="modelId" />
-    </span>
-  </div>
-</template>
-
-<style>
-.product-model:not(:last-child) {
-  @apply mr-1;
-
-  &:after {
-    content: ','
-  }
-}
-</style>
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+
+const props = defineProps({
+  modelIds: {
+    type: Array as PropType<(string | number)[]>,
+    default: () => [],
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div inline-flex flex-wrap max-w-max>
+    <span v-for="(modelId, index) in modelIds" :key="index" class="product-model block">
+      <ProductModel :id="modelId" />
+    </span>
+  </div>
+</template>
+
+<style>
+.product-model:not(:last-child) {
+  @apply mr-1;
+
+  &:after {
+    content: ',';
+  }
+}
+</style>

package/src/components/Product/ProductName.vue

@@ -1,15 +1,15 @@
-<script lang="ts" setup>
-const props = defineProps({
-  name: {
-    type: String,
-    default: '',
-    required: true,
-  },
-})
-</script>
-
-<template>
-  <h1 class="pdp-headline select-all">
-    {{ props.name }}
-  </h1>
-</template>
+<script lang="ts" setup>
+const props = defineProps({
+  name: {
+    type: String,
+    default: '',
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <h1 class="pdp-headline select-all">
+    {{ props.name }}
+  </h1>
+</template>

package/src/components/Product/ProductNumber.astro

@@ -9,18 +9,16 @@ const {
   small = false,
   big = false,
   class: customClass = '',
-  buttonTexts = { copy: "Copy", copied: "Copied" },
+  buttonTexts = { copy: 'Copy', copied: 'Copied' },
 } = Astro.props;
 
 // Use formatted product number using a helper function
 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,32 +27,26 @@ const ProductWrapper = isPdp ? 'h2' : 'div';
 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">
-        {productNumber}
-      </ProductWrapper>
-
-      {big && (
-        <ButtonCopy
-          productNumber={productNumber}
-          texts={buttonTexts}
-          tooltipClasses=""
-        />
-      )}
-    </div>
+{
+  productNumber && formatted && (
+    <div class={classNames}>
+      <div class={['p-number', small ? 'w-full' : ''].join(' ')} itemprop="identifier">
+        <ProductWrapper id={productNumber} class="product-code">
+          {productNumber}
+        </ProductWrapper>
 
-    <div class={['code-formatted', trackingClass].join(' ')}>
-      <div class="relative inset-0" data-pagefind-ignore>
-        {formatted.dot}
+        {big && <ButtonCopy productNumber={productNumber} texts={buttonTexts} tooltipClasses="" />}
       </div>
-      <div class="absolute inset-0" data-pagefind-ignore>
-        {formatted.dash}
+
+      <div class={['code-formatted', trackingClass].join(' ')}>
+        <div class="relative inset-0" data-pagefind-ignore>
+          {formatted.dot}
+        </div>
+        <div class="absolute inset-0" data-pagefind-ignore>
+          {formatted.dash}
+        </div>
+        <FormattedWrapper class="number-secondary">{formatted.standard}</FormattedWrapper>
       </div>
-      <FormattedWrapper class="number-secondary">
-        {formatted.standard}
-      </FormattedWrapper>
     </div>
-  </div>
-)}
+  )
+}

package/src/components/Product/ProductPositions.vue

@@ -1,34 +1,32 @@
-<script lang="ts" setup>
-
-import type { Position } from 'types/index'
-import type { PropType } from 'vue';
-const props = defineProps({
-  positions: {
-    type: Array as PropType<Position[]>,
-    default: null,
-    required: true,
-  },
-  locale: {
-    type: String,
-    default: null,
-    required: false,
-  }
-})
-
-</script>
-
-<template>
-  <span v-for="(position) in positions" :key="position.sort" class="product-position">
-    {{  position.name }}
-  </span>
-</template>
-
-<style >
-.product-position:not(:last-child) {
-  margin-right: 0.25rem;
-
-  &:after {
-    content: ','
-  }
-}
-</style>
+<script lang="ts" setup>
+import type { Position } from 'types/index';
+import type { PropType } from 'vue';
+const props = defineProps({
+  positions: {
+    type: Array as PropType<Position[]>,
+    default: null,
+    required: true,
+  },
+  locale: {
+    type: String,
+    default: null,
+    required: false,
+  },
+});
+</script>
+
+<template>
+  <span v-for="position in positions" :key="position.sort" class="product-position">
+    {{ position.name }}
+  </span>
+</template>
+
+<style>
+.product-position:not(:last-child) {
+  margin-right: 0.25rem;
+
+  &:after {
+    content: ',';
+  }
+}
+</style>

package/src/components/ProductCarousel.astro

@@ -1,11 +1,11 @@
 ---
-import ProductTile from "../components/ProductTile.astro";
+import ProductTile from '../components/ProductTile.astro';
 export const productObject = {
-  name: "Combi-instrument MFA+",
-  url: "https://google.com",
-  number: "6R0920870F",
+  name: 'Combi-instrument MFA+',
+  url: 'https://google.com',
+  number: '6R0920870F',
   photo:
-    "https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337",
+    'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
 };
 ---