spoko-design-system 1.9.0 → 1.9.2

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" :isPdp="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,7 +67,7 @@ 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"
           />

package/src/components/ProductDetailName.vue

@@ -3,9 +3,7 @@ import { PropType } from 'vue';
 
 const props = defineProps({
   as: {
-    type: String as PropType<
-      'th' | 'td' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'
-    >,
+    type: String as PropType<'th' | 'td' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
     default: 'div',
     required: true,
   },
@@ -23,10 +21,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <component
-    :is="props.as"
-    class="font-bold detail-name w-full sm:w-50 flex 2xl:w-64"
-  >
+  <component :is="props.as" class="font-bold detail-name w-full sm:w-50 flex 2xl:w-64">
     <span :class="styles && styles.length ? styles : 'mt-auto'">
       <b class="bg-white z-1 colon-after pr-1">{{ props.text }}</b>
     </span>

package/src/components/ProductDetailsList.vue

@@ -84,22 +84,11 @@ const validatedItems = computed(() => {
       <col class="details-table-col" />
     </colgroup>
     <tbody>
-      <tr
-        v-for="(row, index) in validatedItems"
-        :key="index"
-        class="details-table-row"
-      >
-        <ProductDetailName
-          as="th"
-          :text="getHeaderText(row)"
-          class="details-table-header"
-        />
+      <tr v-for="(row, index) in validatedItems" :key="index" class="details-table-row">
+        <ProductDetailName as="th" :text="getHeaderText(row)" class="details-table-header" />
 
         <!-- Links Array -->
-        <td
-          v-if="isLinksArray(row)"
-          class="details-table-cell"
-        >
+        <td v-if="isLinksArray(row)" class="details-table-cell">
           <ul class="list-none p-0 m-0">
             <li
               v-for="(link, linkIndex) in row.value as Link[]"
@@ -112,12 +101,7 @@ const validatedItems = computed(() => {
                   'leading-none inline-block mr-2 w-4 min-w-4 h-4 text-gray-400',
                 ]"
               />
-              <a
-                :href="link.url"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link-primary"
-              >
+              <a :href="link.url" target="_blank" rel="noopener noreferrer" class="link-primary">
                 {{ link.anchor }}
               </a>
             </li>
@@ -125,10 +109,7 @@ const validatedItems = computed(() => {
         </td>
 
         <!-- Generic String Array -->
-        <td
-          v-else-if="isGenericArray(row)"
-          class="details-table-cell"
-        >
+        <td v-else-if="isGenericArray(row)" class="details-table-cell">
           <ul class="list-none p-0 m-0">
             <li
               v-for="(item, itemIndex) in row.value as string[]"
@@ -142,17 +123,10 @@ const validatedItems = computed(() => {
         </td>
 
         <!-- HTML Value -->
-        <td
-          v-else-if="isHtmlValue(row.value)"
-          class="details-table-cell"
-          v-html="row.value"
-        />
+        <td v-else-if="isHtmlValue(row.value)" class="details-table-cell" v-html="row.value" />
 
         <!-- Slot or Default Value -->
-        <slot
-          v-else
-          :name="row.id"
-        >
+        <slot v-else :name="row.id">
           <td class="details-table-cell">
             {{ row.value }}
           </td>

package/src/components/ProductTile.astro

@@ -19,11 +19,7 @@ import ProductNumber from './Product/ProductNumber.astro';
             }}
           />
         ) : (
-          <img
-            src="/1x1.png"
-            class="bg-gray-100/70"
-            alt={productObject.name}
-          />
+          <img src="/1x1.png" class="bg-gray-100/70" alt={productObject.name} />
         )}
       </div>
 
@@ -45,14 +41,8 @@ import ProductNumber from './Product/ProductNumber.astro';
 
         {index !== null && (
           <>
-            <meta
-              itemprop="position"
-              content={String(index)}
-            />
-            <meta
-              itemprop="name"
-              content={productObject.name}
-            />
+            <meta itemprop="position" content={String(index)} />
+            <meta itemprop="name" content={productObject.name} />
           </>
         )}
       </div>

package/src/components/ReloadPrompt.astro

@@ -1,9 +1,5 @@
 <script src="./../pwa.ts"></script>
-<div
-  id="pwa-toast"
-  role="alert"
-  aria-labelledby="toast-message"
->
+<div id="pwa-toast" role="alert" aria-labelledby="toast-message">
   <div class="message">
     <span id="toast-message"></span>
   </div>

package/src/components/SlimBanner.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
+/* global localStorage */
 import { ref, onMounted } from 'vue';
 
 const props = defineProps({
   // Primary state (visible by default)
   message: {
     type: String,
-    default: 'We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit',
+    default:
+      'We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit',
   },
   linkText: {
     type: String,
@@ -51,7 +53,8 @@ const props = defineProps({
   },
   iconClass: {
     type: String,
-    default: 'inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]',
+    default:
+      'inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]',
   },
 
   // LocalStorage persistence
@@ -90,7 +93,7 @@ onMounted(() => {
           // Still valid, keep hidden
           isHidden.value = true;
         }
-      } catch (e) {
+      } catch {
         // Invalid data, remove it
         localStorage.removeItem(props.storageKey);
       }
@@ -109,9 +112,8 @@ const closePermanently = () => {
     const data = {
       closed: true,
       timestamp: new Date().getTime(),
-      expires: props.expirationDays > 0
-        ? new Date().getTime() + (props.expirationDays * 24 * 60 * 60 * 1000)
-        : null,
+      expires:
+        props.expirationDays > 0 ? new Date().getTime() + props.expirationDays * 24 * 60 * 60 * 1000 : null,
     };
     localStorage.setItem(props.storageKey, JSON.stringify(data));
   }
@@ -120,16 +122,9 @@ const closePermanently = () => {
 
 <template>
   <template v-if="!isHidden">
-    <div
-      v-if="isShow"
-      data-pagefind-ignore
-      class="slimbanner"
-    >
+    <div v-if="isShow" data-pagefind-ignore class="slimbanner">
       <slot name="icon">
-        <span
-          v-if="props.showIcon"
-          :class="props.iconClass"
-        />
+        <span v-if="props.showIcon" :class="props.iconClass" />
       </slot>
 
       <span class="leading-none inline-flex">

package/src/components/Table.vue

@@ -14,26 +14,14 @@ const capitalizeFirstLetter = (text: string) => {
   <table class="table-auto text-left border bg-white shadow-md">
     <thead class="bg-gray-500 text-white">
       <tr class="border">
-        <th
-          v-for="(thead, index) in theads"
-          :key="index"
-          class="px-4 py-2 font-semibold"
-        >
+        <th v-for="(thead, index) in theads" :key="index" class="px-4 py-2 font-semibold">
           {{ capitalizeFirstLetter(thead) }}
         </th>
       </tr>
     </thead>
     <tbody>
-      <tr
-        v-for="(row, index) in props.data"
-        :key="index"
-        class="border"
-      >
-        <td
-          v-for="key in Object.keys(row)"
-          :key="key"
-          class="px-4 py-2"
-        >
+      <tr v-for="(row, index) in props.data" :key="index" class="border">
+        <td v-for="key in Object.keys(row)" :key="key" class="px-4 py-2">
           {{ row[key] }}
         </td>
       </tr>

package/src/components/Translations.vue

@@ -18,10 +18,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    v-if="props.translations !== null && props.translations.uri"
-    data-pagefind-ignore
-  >
+  <div v-if="props.translations !== null && props.translations.uri" data-pagefind-ignore>
     <a
       aria-label="Change language"
       type="button"

package/src/components/layout/CallToAction.astro

@@ -24,10 +24,7 @@ const hasDescriptionSlotContent = Astro.slots.has('description');
   >
     <div class="flex-shrink-0 hidden md:block">
       <slot name="icon">
-        <span
-          i-ph:sparkle-thin
-          class="mr-1 text-8 md:text-10 text-brand-secondary"
-        ></span>
+        <span i-ph:sparkle-thin class="mr-1 text-8 md:text-10 text-brand-secondary"></span>
       </slot>
     </div>
     <div class="flex-1 text-center md:text-left">
@@ -39,9 +36,7 @@ const hasDescriptionSlotContent = Astro.slots.has('description');
       {
         (propDescription || hasDescriptionSlotContent) && (
           <p class="text-blue-darker mt-1">
-            <slot name="description">
-              {propDescription || 'Domyślny opis, który zachęca do działania.'}
-            </slot>
+            <slot name="description">{propDescription || 'Domyślny opis, który zachęca do działania.'}</slot>
           </p>
         )
       }

package/src/components/layout/Container.astro

@@ -2,8 +2,6 @@
 const { class: className, isFullWidth } = Astro.props;
 ---
 
-<div
-  class:list={[`${isFullWidth ? 'max-w-full' : 'max-w-screen-xl'}  mx-auto px-5 py-4`, className]}
->
+<div class:list={[`${isFullWidth ? 'max-w-full' : 'max-w-screen-xl'}  mx-auto px-5 py-4`, className]}>
   <slot />
 </div>

package/src/components/layout/Header.astro

@@ -30,10 +30,7 @@ const navItemsLeft = [
     <slot name="logo" />
 
     <div class="hidden sm:block sm:ml-6">
-      <div
-        class="flex space-x-4"
-        itemprop="hasPart"
-      >
+      <div class="flex space-x-4" itemprop="hasPart">
         {
           navItemsLeft.map(({ title, description, url }) => (
             <a
@@ -60,14 +57,7 @@ const navItemsLeft = [
     itemscope
     itemtype="http://schema.org/SiteNavigationElement"
   >
-    <a
-      class="icon-btn mx-2"
-      title=""
-      aria-label=""
-      href="#"
-      itemprop="url"
-      data-astro-reload
-    >
+    <a class="icon-btn mx-2" title="" aria-label="" href="#" itemprop="url" data-astro-reload>
       <Icon name="carbon:language" />
     </a>
   </div>

package/src/layouts/Layout.astro

@@ -9,17 +9,10 @@ const { content = {} } = Astro.props;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
 ---
 
-<html
-  dir={content.dir ?? 'ltr'}
-  lang={content.lang ?? 'en-us'}
-  class="initial"
->
+<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
   <head>
     <HeadCommon />
-    <HeadSEO
-      {content}
-      canonicalURL={canonicalURL}
-    />
+    <HeadSEO {content} canonicalURL={canonicalURL} />
     <title>
       {content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
     </title>

package/src/layouts/MainLayout.astro

@@ -25,17 +25,10 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
   import '../scripts/tooltips.ts';
 </script>
 
-<html
-  dir={content.dir ?? 'ltr'}
-  lang={content.lang ?? 'en-us'}
-  class="initial"
->
+<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
   <head>
     <HeadCommon />
-    <HeadSEO
-      content={content}
-      canonicalURL={canonicalURL}
-    />
+    <HeadSEO content={content} canonicalURL={canonicalURL} />
     <title>
       {content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
     </title>
@@ -48,18 +41,12 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
 
     <div class="flex bg-white z-10 mb-11 relative">
       <div class="sticky top-0 flex lg:(h-screen w-64) z-50">
-        <div
-          class="mr-auto"
-          transition:name="sidebar"
-        >
+        <div class="mr-auto" transition:name="sidebar">
           <LeftSidebar currentPage={currentPage} />
         </div>
       </div>
       <main class="pb-4 px-4 sm:px-8 col-auto sm:(pb-32) overflow-auto w-full">
-        <PageContent
-          content={content}
-          transition:name="content"
-        >
+        <PageContent content={content} transition:name="content">
           <slot />
         </PageContent>
       </main>

package/src/layouts/partials/HeadCommon.astro

@@ -5,26 +5,12 @@ import { pwaInfo } from 'virtual:pwa-info';
 
 <!-- Global Metadata -->
 <meta charset="utf-8" />
-<meta
-  name="viewport"
-  content="width=device-width"
-/>
-
-<link
-  rel="icon"
-  type="image/svg+xml"
-  href="/favicon.svg"
-/>
-<link
-  rel="alternate icon"
-  type="image/x-icon"
-  href="/favicon.ico"
-/>
-
-<link
-  rel="sitemap"
-  href="/sitemap-index.xml"
-/>
+<meta name="viewport" content="width=device-width" />
+
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
+<link rel="sitemap" href="/sitemap-index.xml" />
 
 <!-- Preload Fonts -->
 <!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -32,10 +18,7 @@ import { pwaInfo } from 'virtual:pwa-info';
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" /> -->
 
 <!-- Scrollable a11y code helper -->
-<script
-  src="/make-scrollable-code-focusable.js"
-  is:inline
-></script>
+<script src="/make-scrollable-code-focusable.js" is:inline></script>
 
 <!-- This is intentionally inlined to avoid FOUC -->
 <script is:inline>

package/src/layouts/partials/HeadSEO.astro

@@ -13,65 +13,29 @@ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
 ---
 
 <!-- Page Metadata -->
-<link
-  rel="canonical"
-  href={canonicalURL}
-/>
+<link rel="canonical" href={canonicalURL} />
 
 <!-- OpenGraph Tags -->
-<meta
-  property="og:title"
-  content={formattedContentTitle}
-/>
-<meta
-  property="og:type"
-  content="article"
-/>
-<meta
-  property="og:url"
-  content={canonicalURL}
-/>
-<meta
-  property="og:locale"
-  content={content.ogLocale ?? SITE.defaultLanguage}
-/>
+<meta property="og:title" content={formattedContentTitle} />
+<meta property="og:type" content="article" />
+<meta property="og:url" content={canonicalURL} />
+<meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} />
 <!-- <meta property="og:image" content={canonicalImageSrc} /> -->
-<meta
-  property="og:image:alt"
-  content={imageAlt}
-/>
+<meta property="og:image:alt" content={imageAlt} />
 <meta
   name="description"
   property="og:description"
   content={content.description ? content.description : SITE.description}
 />
-<meta
-  property="og:site_name"
-  content={SITE.title}
-/>
+<meta property="og:site_name" content={SITE.title} />
 
 <!-- Twitter Tags -->
-<meta
-  name="twitter:card"
-  content="summary_large_image"
-/>
-<meta
-  name="twitter:site"
-  content={OPEN_GRAPH.twitter}
-/>
-<meta
-  name="twitter:title"
-  content={formattedContentTitle}
-/>
-<meta
-  name="twitter:description"
-  content={content.description ? content.description : SITE.description}
-/>
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
+<meta name="twitter:title" content={formattedContentTitle} />
+<meta name="twitter:description" content={content.description ? content.description : SITE.description} />
 <!-- <meta name="twitter:image" content={canonicalImageSrc} /> -->
-<meta
-  name="twitter:image:alt"
-  content={imageAlt}
-/>
+<meta name="twitter:image:alt" content={imageAlt} />
 
 <!--
   TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?

package/src/pages/components/icons.astro

@@ -57,10 +57,7 @@ const sortedIconCollections = Object.entries(ICONS)
                 >
                   <div class="flex flex-col items-center">
                     <div class="p-4 bg-gray-50 rounded-lg mb-2 w-full flex justify-center items-center min-h-[64px]">
-                      <Icon
-                        name={`${name}:${iconName}`}
-                        class="text-3xl text-blue-medium"
-                      />
+                      <Icon name={`${name}:${iconName}`} class="text-3xl text-blue-medium" />
                     </div>
                     <code class="text-sm text-gray-600 text-center break-all">
                       {name}:{iconName}