spoko-design-system 1.1.1 → 1.1.2

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/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>

package/src/components/layout/CallToAction.astro

@@ -1,5 +1,5 @@
 ---
-import Button from "./../Button.vue"
+import Button from './../Button.vue';
 
 interface Props {
   class?: string;
@@ -15,11 +15,13 @@ const hasDescriptionSlotContent = Astro.slots.has('description');
 
 <section
   class:list={[
-    "full-width border-blue-medium bg-blue-darker/5 border-t-4 md:(border-t-0 px-6 bg-white) my-8",
+    'full-width border-blue-medium bg-blue-darker/5 border-t-4 md:(border-t-0 px-6 bg-white) my-8',
     additionalClasses,
   ]}
 >
-  <div class="flex flex-col items-center gap-4 md:(flex-row border-l-4 border-blue-medium bg-blue-darker/5 px-6) py-6">
+  <div
+    class="flex flex-col items-center gap-4 md:(flex-row border-l-4 border-blue-medium bg-blue-darker/5 px-6) py-6"
+  >
     <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>
@@ -31,13 +33,15 @@ const hasDescriptionSlotContent = Astro.slots.has('description');
           {propTitle || 'Domyślny tytuł akcji'}
         </slot>
       </h3>
-      {(propDescription || hasDescriptionSlotContent) && (
-        <p class="text-blue-darker mt-1">
-          <slot name="description">
-            {propDescription || 'Domyślny opis, który zachęca do działania.'}
-          </slot>
-        </p>
-      )}
+      {
+        (propDescription || hasDescriptionSlotContent) && (
+          <p class="text-blue-darker mt-1">
+            <slot name="description">
+              {propDescription || 'Domyślny opis, który zachęca do działania.'}
+            </slot>
+          </p>
+        )
+      }
     </div>
     <slot name="action">
       <Button
@@ -45,9 +49,10 @@ const hasDescriptionSlotContent = Astro.slots.has('description');
         class:list="w-fit place-self-center gap-2"
         tertiary
         rounded
-        title="Domyślny przycisk akcji">
+        title="Domyślny przycisk akcji"
+      >
         Kliknij mnie!
       </Button>
     </slot>
   </div>
-</section>
+</section>

package/src/components/layout/Container.astro

@@ -2,6 +2,8 @@
 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

@@ -1,19 +1,19 @@
 ---
 const { class: className } = Astro.props;
-import { Icon } from "astro-icon/components";
+import { Icon } from 'astro-icon/components';
 
 const navItemsLeft = [
   {
-    title: "Components",
-    description: "The building blocks for our UI.",
-    url: "/components/buttons",
-    img: "/Components.jpg",
+    title: 'Components',
+    description: 'The building blocks for our UI.',
+    url: '/components/buttons',
+    img: '/Components.jpg',
   },
   {
-    title: "Patterns",
-    description: "Common patterns for building interfaces.",
-    url: "/patterns/introduction",
-    img: "/Patterns.jpg",
+    title: 'Patterns',
+    description: 'Common patterns for building interfaces.',
+    url: '/patterns/introduction',
+    img: '/Patterns.jpg',
   },
 ];
 ---
@@ -23,7 +23,7 @@ const navItemsLeft = [
   itemtype="http://schema.org/WPHeader"
   class:list={[
     className,
-    "nav print-hidden mx-auto px-4 shadow-md relative flex items-center justify-between h-24 sm:h-14 flex-wrap sm:flex-nowrap pt-1 sm:pt-0",
+    'nav print-hidden mx-auto px-4 shadow-md relative flex items-center justify-between h-24 sm:h-14 flex-wrap sm:flex-nowrap pt-1 sm:pt-0',
   ]}
 >
   <div class="flex items-center justify-start sm:items-stretch order-1">
@@ -47,9 +47,7 @@ const navItemsLeft = [
     </div>
   </div>
 
-  <div
-    class="relative md:block sm:ml-4 w-full order-4 h-10 md:(w-64 mr-auto order-2)"
-  >
+  <div class="relative md:block sm:ml-4 w-full order-4 h-10 md:(w-64 mr-auto order-2)">
     <slot name="search" />
   </div>
 
@@ -59,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>