spoko-design-system 1.1.1 → 1.1.3

package/src/components/ProductCodes.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue'
+import type { PropType } from 'vue';
 import PrCode from './PrCode.vue';
 
 const props = defineProps({
@@ -13,27 +13,25 @@ const props = defineProps({
     default: false,
     required: false,
   },
-})
+});
 
-const codes = props.prcodes || []
-const decodedCodes = codes ? codes.sort() : []
+const codes = props.prcodes || [];
+const decodedCodes = codes ? codes.sort() : [];
 
 const settings = {
   prcodes: decodedCodes,
-}
+};
 </script>
 
 <template>
- 
- <span
-    v-for="(prcode, index) in settings.prcodes"
-    :key="index"
-    class="not-last:mr-1"
-  >
+  <span v-for="(prcode, index) in settings.prcodes" :key="index" class="not-last:mr-1">
     <PrCode :prcode="prcode" v-if="!String(prcode).includes('+')" />
-    <span v-else >
-      <PrCode  v-for="(splittedCode, index2) in String(prcode).split('+')" :key="index2" :prcode="splittedCode" />
+    <span v-else>
+      <PrCode
+        v-for="(splittedCode, index2) in String(prcode).split('+')"
+        :key="index2"
+        :prcode="splittedCode"
+      />
     </span>
   </span>
 </template>
-

package/src/components/ProductDetailName.vue

@@ -3,7 +3,9 @@ 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,
   },
@@ -16,8 +18,8 @@ const props = defineProps({
     type: String,
     default: '',
     required: false,
-  }
-})
+  },
+});
 </script>
 
 <template>
@@ -28,26 +30,22 @@ const props = defineProps({
   </component>
 </template>
 
-
 <style>
 .detail-name {
   @apply overflow-hidden relative;
 
-    span {
-      @apply block bg-white relative z-10 pr-1.5 w-full;
-
-      &:before {
-        /* // order: 2; */
-        @apply text-gray-300 absolute select-none border-b border-gray-200 w-full -z-1 absolute content-empty left-0;
-        height: 1em;
-        white-space: nowrap;
-        font-weight: 100;
-        bottom: 2px;
-        flex: 1;
-      }
+  span {
+    @apply block bg-white relative z-10 pr-1.5 w-full;
+
+    &:before {
+      /* // order: 2; */
+      @apply text-gray-300 absolute select-none border-b border-gray-200 w-full -z-1 absolute content-empty left-0;
+      height: 1em;
+      white-space: nowrap;
+      font-weight: 100;
+      bottom: 2px;
+      flex: 1;
     }
-
-
+  }
 }
-
-</style>
+</style>

package/src/components/ProductDetailsList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { PropType, computed } from "vue";
-import ProductDetailName from "./ProductDetailName.vue";
+import { PropType, computed } from 'vue';
+import ProductDetailName from './ProductDetailName.vue';
 
 interface ColorCode {
   code: string;
@@ -30,7 +30,7 @@ interface GroupedLink {
 
 const props = defineProps({
   items: { type: Array as PropType<TableItem[]>, default: () => [] },
-  caption: { type: String, default: null }
+  caption: { type: String, default: null },
 });
 
 // Function to check if a value is a link
@@ -60,7 +60,6 @@ const isForExteriorColour = (item: TableItem) => {
   return item.id === 'for-exterior-colour' && Array.isArray(item.value);
 };
 
-
 // Function to check if value is HTML string (fallback)
 const isHtmlValue = (value: unknown): boolean => {
   return typeof value === 'string' && (value.includes('<span') || value.includes('<br>'));
@@ -72,9 +71,12 @@ const getHeaderText = (row: TableItem | GroupedLink) => {
     return row.id.charAt(0).toUpperCase() + row.id.slice(1);
   }
   // Użyj `name` z obiektu `TableItem`, jeśli istnieje, w przeciwnym razie sformatuj `id`.
-  return 'name' in row ? row.name : row.id.split('-')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
+  return 'name' in row
+    ? row.name
+    : row.id
+        .split('-')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
 };
 
 // Function to determine the icon class for a link type
@@ -110,14 +112,14 @@ const groupedItems = computed(() => {
       if (!linkGroups.has(item.id)) {
         linkGroups.set(item.id, {
           id: item.id,
-          links: []
+          links: [],
         });
       }
 
       // Add link to the relevant group
       linkGroups.get(item.id)?.links.push({
         name: item.name,
-        value: item.value as string
+        value: item.value as string,
       });
     } else {
       // If it's not a link, add it normally to the results
@@ -140,18 +142,26 @@ const groupedItems = computed(() => {
       <slot name="caption">{{ caption }}</slot>
     </caption>
     <colgroup>
-      <col class="details-table-col">
-      <col class="details-table-col">
+      <col class="details-table-col" />
+      <col class="details-table-col" />
     </colgroup>
     <tbody>
-      <tr v-for="row, index in groupedItems" :key="index" class="details-table-row">
+      <tr v-for="(row, index) in groupedItems" :key="index" class="details-table-row">
         <ProductDetailName as="th" :text="getHeaderText(row)" class="details-table-header" />
 
         <td v-if="'links' in row" class="details-table-cell">
           <ul class="list-none p-0 m-0">
-            <li v-for="(link, linkIndex) in row.links" :key="linkIndex" class="mb-2 last:mb-0 flex items-center">
+            <li
+              v-for="(link, linkIndex) in row.links"
+              :key="linkIndex"
+              class="mb-2 last:mb-0 flex items-center"
+            >
               <span
-                :class="[getLinkIconClass(row.id), 'leading-none inline-block mr-2 w-4 min-w-4 h-4 text-gray-400']" />
+                :class="[
+                  getLinkIconClass(row.id),
+                  'leading-none inline-block mr-2 w-4 min-w-4 h-4 text-gray-400',
+                ]"
+              />
               <a :href="link.value" target="_blank" rel="noopener noreferrer" class="link-primary">
                 {{ link.name }}
               </a>
@@ -161,13 +171,15 @@ const groupedItems = computed(() => {
 
         <td v-else-if="'id' in row && isColorArray(row)" class="details-table-cell">
           <ul class="list-none p-0 m-0">
-            <li v-for="(colorItem, colorIndex) in (row.value as ColorCode[])" :key="colorIndex"
-              class="flex items-center gap-1 mb-1 last:mb-0">
-
+            <li
+              v-for="(colorItem, colorIndex) in row.value as ColorCode[]"
+              :key="colorIndex"
+              class="flex items-center gap-1 mb-1 last:mb-0"
+            >
               <template v-if="colorItem.code">
                 <code class="font-mono text-sm">
-                        {{ colorItem.code }}
-                    </code>
+                  {{ colorItem.code }}
+                </code>
                 <span class="text-gray-400">-</span>
               </template>
               <span class="text-gray-700 dark:text-gray-300">{{ colorItem.name }}</span>
@@ -181,13 +193,15 @@ const groupedItems = computed(() => {
 
         <td v-else-if="'id' in row && isForExteriorColour(row)" class="details-table-cell">
           <ul class="list-none p-0 m-0">
-            <li v-for="(colorEntry, colourIndex) in (row.value as ColorCode[])" :key="colourIndex"
-              class="flex items-center gap-1 mb-1 last:mb-0">
-
+            <li
+              v-for="(colorEntry, colourIndex) in row.value as ColorCode[]"
+              :key="colourIndex"
+              class="flex items-center gap-1 mb-1 last:mb-0"
+            >
               <template v-if="colorEntry.code">
                 <code class="font-mono text-sm">
-                        {{ colorEntry.code }}
-                    </code>
+                  {{ colorEntry.code }}
+                </code>
                 <span class="text-gray-400">-</span>
               </template>
               <span class="text-gray-700 dark:text-gray-300">{{ colorEntry.name }}</span>
@@ -197,15 +211,22 @@ const groupedItems = computed(() => {
 
         <td v-else-if="'id' in row && isGenericArray(row)" class="details-table-cell">
           <ul class="list-none p-0 m-0">
-            <li v-for="(item, itemIndex) in (row.value as string[])" :key="itemIndex"
-              class="flex items-start gap-2 mb-1 last:mb-0 leading-relaxed">
+            <li
+              v-for="(item, itemIndex) in row.value as string[]"
+              :key="itemIndex"
+              class="flex items-start gap-2 mb-1 last:mb-0 leading-relaxed"
+            >
               <span class="text-gray-500 font-bold flex-shrink-0 mt-0.5">·</span>
               <span class="text-gray-700 dark:text-gray-300 text-sm">{{ item }}</span>
             </li>
           </ul>
         </td>
 
-        <td v-else-if="'id' in row && isHtmlValue(row.value)" class="details-table-cell" v-html="row.value"></td>
+        <td
+          v-else-if="'id' in row && isHtmlValue(row.value)"
+          class="details-table-cell"
+          v-html="row.value"
+        ></td>
 
         <slot v-else-if="'id' in row" :name="row.id">
           <td class="details-table-cell">{{ row.value }}</td>

package/src/components/ProductTile.astro

@@ -1,47 +1,51 @@
 ---
 const { productObject, locale, index } = Astro.props;
-import Image from "./Image.astro"
-import ProductNumber from "./Product/ProductNumber.astro"
+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={
-            {
+{
+  productObject && (
+    <>
+      <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>
+              class: 'img--overlay object-cover',
+            }}
+          />
+        ) : (
+          <img src="/1x1.png" class="bg-gray-100/70" alt={productObject.name} />
+        )}
+      </div>
 
-      <ProductNumber productNumber={productObject.number} copyDisabled={false} buttonTexts={{ copy: 'Copy', copied: 'Copied' }}  />
-      
-      { index !== null && 
-        ( <meta itemprop="position" content={String(index)} />
-        <meta itemprop="name" content={productObject.name} /> )
-      }
-    </div>
+      <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}
+          buttonTexts={{ copy: 'Copy', copied: 'Copied' }}
+        />
 
+        {index !== null && (
+          <>
+            <meta itemprop="position" content={String(index)} />
+            <meta itemprop="name" content={productObject.name} />
+          </>
+        )}
+      </div>
+    </>
+  )
+}

package/src/components/Quote.vue

@@ -11,13 +11,15 @@ const props = defineProps({
     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>
+  <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>

package/src/components/ReloadPrompt.astro

@@ -1,51 +1,43 @@
 <script src="./../pwa.ts"></script>
-<div
-    id="pwa-toast"
-    role="alert"
-    aria-labelledby="toast-message"
->
-    <div class="message">
-      <span id="toast-message"></span>
-    </div>
-    <button id="pwa-refresh">
-      Reload
-    </button>
-    <button id="pwa-close">
-      Close
-    </button>
+<div id="pwa-toast" role="alert" aria-labelledby="toast-message">
+  <div class="message">
+    <span id="toast-message"></span>
+  </div>
+  <button id="pwa-refresh"> Reload </button>
+  <button id="pwa-close"> Close </button>
 </div>
 
 <style>
-#pwa-toast {
-  visibility: hidden;
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  margin: 16px;
-  padding: 12px;
-  border: 1px solid #8885;
-  border-radius: 4px;
-  z-index: 1;
-  text-align: left;
-  box-shadow: 3px 4px 5px 0 #8885;
-}
-#pwa-toast .message {
-  margin-bottom: 8px;
-}
-#pwa-toast button {
-  border: 1px solid #8885;
-  outline: none;
-  margin-right: 5px;
-  border-radius: 2px;
-  padding: 3px 10px;
-}
-#pwa-toast.show {
-  visibility: visible;
-}
-button#pwa-refresh {
-  display: none;
-}
-#pwa-toast.show.refresh button#pwa-refresh {
-  display: inline-block;
-}
-</style>
+  #pwa-toast {
+    visibility: hidden;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    margin: 16px;
+    padding: 12px;
+    border: 1px solid #8885;
+    border-radius: 4px;
+    z-index: 1;
+    text-align: left;
+    box-shadow: 3px 4px 5px 0 #8885;
+  }
+  #pwa-toast .message {
+    margin-bottom: 8px;
+  }
+  #pwa-toast button {
+    border: 1px solid #8885;
+    outline: none;
+    margin-right: 5px;
+    border-radius: 2px;
+    padding: 3px 10px;
+  }
+  #pwa-toast.show {
+    visibility: visible;
+  }
+  button#pwa-refresh {
+    display: none;
+  }
+  #pwa-toast.show.refresh button#pwa-refresh {
+    display: inline-block;
+  }
+</style>

package/src/components/SlimBanner.vue

@@ -7,36 +7,60 @@ const props = defineProps({
     default: true,
     required: false,
   },
-})
-const isShow = ref(true)
+});
+const isShow = ref(true);
 const toggleVisibility = () => {
-  isShow.value = !isShow.value
-}
+  isShow.value = !isShow.value;
+};
 </script>
 
 <template>
   <div v-if="isShow" data-pagefind-ignore class="slimbanner">
     <span
-      class="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%]" />
-    <span class="leading-none "><span
-        data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit " />
-      <a href="https://polo.blue/support-ukraine/" target="_blank" rel="noopener" title="Support Ukraine"
-        class="underline underline-offset-2 hover:text-blue-wrc">this page</a>.
+      class="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%]"
+    />
+    <span class="leading-none"
+      ><span
+        data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit "
+      />
+      <a
+        href="https://polo.blue/support-ukraine/"
+        target="_blank"
+        rel="noopener"
+        title="Support Ukraine"
+        class="underline underline-offset-2 hover:text-blue-wrc"
+        >this page</a
+      >.
     </span>
 
-    <button class="btn-close text-white" v-if="props.showCloseButton" @click="toggleVisibility()"
-      aria-label="Toggle">
+    <button
+      class="btn-close text-white"
+      v-if="props.showCloseButton"
+      @click="toggleVisibility()"
+      aria-label="Toggle"
+    >
       <span class="close close-dark"></span>
     </button>
   </div>
-  <div v-else data-pagefind-ignore
-    class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative bg-black drop-shadow-md z-2 ">
+  <div
+    v-else
+    data-pagefind-ignore
+    class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative bg-black drop-shadow-md z-2"
+  >
     <div class="tracking-widest leading-none">
-      <span data-text="RUSSIA IS A" /> <span class="underline decoration-red-600 decoration-1 underline-offset-3"
-        data-text="TERRORIST" /> <span data-text="STATE" />
+      <span data-text="RUSSIA IS A" />
+      <span
+        class="underline decoration-red-600 decoration-1 underline-offset-3"
+        data-text="TERRORIST"
+      />
+      <span data-text="STATE" />
     </div>
-    <button class="btn-close" v-if="props.showCloseButton" @click="toggleVisibility()"
-      aria-label="Toggle">
+    <button
+      class="btn-close"
+      v-if="props.showCloseButton"
+      @click="toggleVisibility()"
+      aria-label="Toggle"
+    >
       <span class="close close-light"></span>
     </button>
   </div>
@@ -44,7 +68,7 @@ const toggleVisibility = () => {
 
 <style>
 .btn-close {
- @apply ml-3 relative w-5 h-5;
+  @apply ml-3 relative w-5 h-5;
 }
 
 .close {
@@ -70,4 +94,5 @@ const toggleVisibility = () => {
 
 .close:after {
   transform: rotate(-45deg);
-}</style>
+}
+</style>

package/src/components/Table.vue

@@ -3,19 +3,18 @@ const props = defineProps<{
   data: string;
 }>();
 
-const theads = Object.keys(Object.values(props.data)[0])
+const theads = Object.keys(Object.values(props.data)[0]);
 
 const capitalizeFirstLetter = (text: String) => {
-  return text[0].toUpperCase() + text.slice(1)
-}
-
+  return text[0].toUpperCase() + text.slice(1);
+};
 </script>
 
 <template>
   <table class="table-auto text-left border bg-white shadow-md">
     <thead class="bg-gray-500 text-white">
       <tr class="border">
-        <th class="px-4 py-2 font-semibold" v-for="thead, index in theads" :key="index">
+        <th class="px-4 py-2 font-semibold" v-for="(thead, index) in theads" :key="index">
           {{ capitalizeFirstLetter(thead) }}
         </th>
       </tr>
@@ -29,4 +28,3 @@ const capitalizeFirstLetter = (text: String) => {
     </tbody>
   </table>
 </template>
-

package/src/components/Translations.vue

@@ -1,23 +1,32 @@
-
 <script setup lang="ts">
 import { PropType } from 'vue';
 
 const props = defineProps({
   lang: {
-    type: String
+    type: String,
   },
   translations: {
-    type: Object as PropType<{ uri: string | null, title: string | null, name: string | null } | null>
-  }
+    type: Object as PropType<{
+      uri: string | null;
+      title: string | null;
+      name: string | null;
+    } | null>,
+  },
 });
 </script>
 
 <template>
   <div data-pagefind-ignore v-if="props.translations !== null && props.translations.uri">
-    <a aria-label="Change language" type="button" :href="translations.uri"
+    <a
+      aria-label="Change language"
+      type="button"
+      :href="translations.uri"
       :title="translations.name ? translations.name : translations.title"
-      :class="[lang === 'en' ? 'i-circle-flags:en' : '', lang === 'pl' ? 'i-circle-flags:pl' : '', 'w-5 hover:rotate--3']" />
+      :class="[
+        lang === 'en' ? 'i-circle-flags:en' : '',
+        lang === 'pl' ? 'i-circle-flags:pl' : '',
+        'w-5 hover:rotate--3',
+      ]"
+    />
   </div>
 </template>
-
-

package/src/components/flags/FlagPL.vue

@@ -1,4 +1,5 @@
 <template>
-      <span
-            class="drop-shadow inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#fff_50%,50%,#d4213d_100%]" />
-</template>
+  <span
+    class="drop-shadow inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#fff_50%,50%,#d4213d_100%]"
+  />
+</template>

package/src/components/flags/FlagUA.vue

@@ -1,3 +1,3 @@
 <template>
-    <span class="flag-ua" />
-</template>
+  <span class="flag-ua" />
+</template>