spoko-design-system 1.1.1 → 1.1.3

package/src/components/Category/CategoriesCarousel.astro

@@ -1,100 +1,100 @@
 ---
 const { activeCategorySlug, locale, class: className } = Astro.props;
 
-import { getTranslatedLink } from "@utils/text/getTranslatedLink"
-import { getMainCategoryList } from "@utils/category/getMainCategoryList"
-import { Image } from 'astro:assets'
+import { getTranslatedLink } from '@utils/text/getTranslatedLink';
+import { getMainCategoryList } from '@utils/category/getMainCategoryList';
+import { Image } from 'astro:assets';
 
-const categories = await getMainCategoryList()
+const categories = await getMainCategoryList();
 const imgDomain = 'https://api.polo.blue/img/';
 
-const activeIndex = activeCategorySlug && categories ? categories.map(a => a.slug).findIndex(e => e === activeCategorySlug) : 0
+const activeIndex =
+  activeCategorySlug && categories
+    ? categories.map(a => a.slug).findIndex(e => e === activeCategorySlug)
+    : 0;
 ---
+
 <!-- <div class={`cat-menu ${className ? className : ''}`} 
   data-pagefind-ignore
   itemscope itemtype="https://schema.org/SiteNavigationElement"
   transition:persist={`catcarousel${activeIndex}`}
   transition:animate="none"
 > -->
-  <swiper-container 
-    class={`categories-carousel flex pb-1 sm:pb-0 bg-white cat-menu ${className ? className : ''}`}
-    data-pagefind-ignore
-    itemscope itemtype="https://schema.org/SiteNavigationElement"
-    transition:persist={`catcarousel${activeIndex}`}
-    transition:animate="none"
-    data-active={activeIndex}
-    initial-slide={activeIndex}
-    space-between="0"
-    slides-per-view="auto"
-    scrollbar="true"
-    draggable="true"
-    keyboard
-    free-mode
-    data-off-observer
-    run-callbacks-on-init="false"
-  >
-    {
-      categories.map((category, index) => (
-        <swiper-slide itemprop="hasPart" role="presentation"
-          class={`swiper-slide cats-slide group ${category.slug === activeCategorySlug ? 'active': ''}`}
-        >
-          <a href={getTranslatedLink(`/${category.slug}/`)}
-            class="carousel-item"
-          >
-            {
-              // itemprop="url" 
-              // role="menuitem"
-              // aria-label={ t(`cat.${category.slug}.name`) }
-            }
+<swiper-container
+  class={`categories-carousel flex pb-1 sm:pb-0 bg-white cat-menu ${className ? className : ''}`}
+  data-pagefind-ignore
+  itemscope
+  itemtype="https://schema.org/SiteNavigationElement"
+  transition:persist={`catcarousel${activeIndex}`}
+  transition:animate="none"
+  data-active={activeIndex}
+  initial-slide={activeIndex}
+  space-between="0"
+  slides-per-view="auto"
+  scrollbar="true"
+  draggable="true"
+  keyboard
+  free-mode
+  data-off-observer
+  run-callbacks-on-init="false"
+>
+  {
+    categories.map((category, index) => (
+      <swiper-slide
+        itemprop="hasPart"
+        role="presentation"
+        class={`swiper-slide cats-slide group ${category.slug === activeCategorySlug ? 'active' : ''}`}
+      >
+        <a href={getTranslatedLink(`/${category.slug}/`)} class="carousel-item">
+          {
+            // itemprop="url"
+            // role="menuitem"
+            // aria-label={ t(`cat.${category.slug}.name`) }
+          }
 
-              <Image 
-                src={`${imgDomain}${category.photo}`} 
-                alt={category.name}
-                height="70"
-                width="70"
-                format="avif"
-                loading="eager"
-                onerror="this.style.display='none';"
-                class="cats-img"
-              />
-              <div class="swiper-lazy-preloader"></div>
-   
-            <div class="cat-name"
-              // itemprop="name"
-            >
-              { category.name }
-            </div>
-          </a>
-        </swiper-slide>
-      ))
-    }
+          <Image
+            src={`${imgDomain}${category.photo}`}
+            alt={category.name}
+            height="70"
+            width="70"
+            format="avif"
+            loading="eager"
+            onerror="this.style.display='none';"
+            class="cats-img"
+          />
+          <div class="swiper-lazy-preloader" />
 
-  </swiper-container>
+          <div class="cat-name" itemprop="name">
+            {category.name}
+          </div>
+        </a>
+      </swiper-slide>
+    ))
+  }
+</swiper-container>
 <!-- </div> -->
 
-<style >
-.active {
-  @apply bg-blue-darker text-white bg-opacity-100;
+<style>
+  .active {
+    @apply bg-blue-darker text-white bg-opacity-100;
 
-  &:not(:hover) .cats-img {
-    filter: invert(100%);
-    /* // @apply filter-invert; */
+    &:not(:hover) .cats-img {
+      filter: invert(100%);
+      /* // @apply filter-invert; */
+    }
   }
-  
-}
 
-.categories-carousel {
-  @apply overflow-hidden;
+  .categories-carousel {
+    @apply overflow-hidden;
 
-  &.swiper-initialized {
-    .img-preloader {
-      display: none;
+    &.swiper-initialized {
+      .img-preloader {
+        display: none;
+      }
     }
   }
-}
-
-.swiper-slide {
-  @apply transition w-[calc(100%/3.55)] min-w-[calc(100%/3.55)] sm:w-35 sm:min-w-35 3xl:min-w-[calc(100%/12.5-4px)];
-}
 
+  .swiper-slide {
+    @apply transition w-[calc(100%/3.55)] min-w-[calc(100%/3.55)] sm:w-35 sm:min-w-35 3xl:min-w-[calc(100%/12.5-4px)];
+  }
 </style>

package/src/components/Category/CategoryDetails.astro

@@ -3,98 +3,95 @@ import CategorySidebarToggler from './CategorySidebarToggler.vue';
 import CategoryViewToggler from './CategoryViewToggler.astro';
 import { Icon } from 'astro-icon/components';
 
-const { 
-  category, 
-  subcategory, 
-  subtitle, 
-  subsubtitle, 
-  titleSmall, 
-  locale, 
-  showViewToggler, 
-  viewerLabels 
+const {
+  category,
+  subcategory,
+  subtitle,
+  subsubtitle,
+  titleSmall,
+  locale,
+  showViewToggler,
+  viewerLabels,
 } = Astro.props;
 
 const baseURL = '';
 ---
 
-<div 
+<div
   class="flex flex-nowrap items-center pr-3 sm:pb-3 sm:pt-4 md:pl-4 relative z-10-off bg-neutral-lightest md:bg-white"
   transition:name="category-details"
   transition:animate="fade"
 >
-<CategorySidebarToggler class="category-sidebar-toggler w-12 md:w-8" data-state="desktop">
-  <div class="desktop-icons hidden md:block">
-    <!-- Desktop icons container -->
-    <Icon 
-      name="ant-design:menu-fold-outlined" 
-      class="toggler-btn w-6 expanded-icon" 
-      aria-hidden="true"
-    />
-    <Icon 
-      name="ant-design:menu-unfold-outlined" 
-      class="toggler-btn w-6 collapsed-icon hidden" 
-      aria-hidden="true"
-    />
-  </div>
-  <!-- Mobile icon in separate container -->
-  <div class="mobile-icon block md:hidden">
-    <Icon 
-      name="ant-design:menu-outlined" 
-      class="toggler-btn w-6" 
-      aria-hidden="true"
-    />
-  </div>
-</CategorySidebarToggler>
-
+  <CategorySidebarToggler class="category-sidebar-toggler w-12 md:w-8" data-state="desktop">
+    <div class="desktop-icons hidden md:block">
+      <!-- Desktop icons container -->
+      <Icon
+        name="ant-design:menu-fold-outlined"
+        class="toggler-btn w-6 expanded-icon"
+        aria-hidden="true"
+      />
+      <Icon
+        name="ant-design:menu-unfold-outlined"
+        class="toggler-btn w-6 collapsed-icon hidden"
+        aria-hidden="true"
+      />
+    </div>
+    <!-- Mobile icon in separate container -->
+    <div class="mobile-icon block md:hidden">
+      <Icon name="ant-design:menu-outlined" class="toggler-btn w-6" aria-hidden="true" />
+    </div>
+  </CategorySidebarToggler>
 
   <div class="overflow-x-auto overflow-y-hidden flex max-w-full items-center">
-    {subtitle ? (
-      <>
-        <a class="text-lg font-vw-headregular whitespace-nowrap block" href={`${baseURL}/${category.slug}/`}>
-          {category.name}
-          {titleSmall && <small>{titleSmall}</small>}
-        </a>
-        <span class="text-neutral-lighter text-lg inline-block px-1 font-headlight">/</span>
-        {!subsubtitle ? (
-          <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap underline underline-offset-6 decoration-blue-300 decoration-0.5">
-            {subtitle} <span class="sr-only"> catalog</span>
-          </h1>
-        ) : (
-          <>
-            <div class="text-lg py-2.5 sm:py-0 whitespace-nowrap">
-              <a href={`${baseURL}/${category.slug}/${subcategory.slug}/`}>
-                {subtitle}
-              </a>
-            </div>
-            <span class="text-neutral-lighter text-lg inline-block px-1 font-headlight">/</span>
+    {
+      subtitle ? (
+        <>
+          <a
+            class="text-lg font-vw-headregular whitespace-nowrap block"
+            href={`${baseURL}/${category.slug}/`}
+          >
+            {category.name}
+            {titleSmall && <small>{titleSmall}</small>}
+          </a>
+          <span class="text-neutral-lighter text-lg inline-block px-1 font-headlight">/</span>
+          {!subsubtitle ? (
             <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap underline underline-offset-6 decoration-blue-300 decoration-0.5">
-              {subsubtitle} <span class="sr-only"> catalog</span>
+              {subtitle} <span class="sr-only"> catalog</span>
             </h1>
-          </>
-        )}
-      </>
-    ) : (
-      <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap">
-        {category.name}
-        {titleSmall && <small>{titleSmall}</small>}
-        <span class="sr-only"> catalog</span>
-      </h1>
-    )}
+          ) : (
+            <>
+              <div class="text-lg py-2.5 sm:py-0 whitespace-nowrap">
+                <a href={`${baseURL}/${category.slug}/${subcategory.slug}/`}>{subtitle}</a>
+              </div>
+              <span class="text-neutral-lighter text-lg inline-block px-1 font-headlight">/</span>
+              <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap underline underline-offset-6 decoration-blue-300 decoration-0.5">
+                {subsubtitle} <span class="sr-only"> catalog</span>
+              </h1>
+            </>
+          )}
+        </>
+      ) : (
+        <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap">
+          {category.name}
+          {titleSmall && <small>{titleSmall}</small>}
+          <span class="sr-only"> catalog</span>
+        </h1>
+      )
+    }
   </div>
 
-  {showViewToggler && (
-    <CategoryViewToggler 
-      {...viewerLabels}  
-      class="hidden lg:flex items-center gap-2 ml-auto" 
-    />
-  )}
+  {
+    showViewToggler && (
+      <CategoryViewToggler {...viewerLabels} class="hidden lg:flex items-center gap-2 ml-auto" />
+    )
+  }
 </div>
 
 <script>
   function initializeSidebar() {
     const sidebar = document.getElementById('sidebar');
     const savedState = localStorage.getItem('sidebarState') || 'open';
-    
+
     if (sidebar) {
       sidebar.classList.toggle('collapsed', savedState === 'closed');
       updateTogglers(savedState === 'closed');
@@ -105,18 +102,18 @@ const baseURL = '';
     document.querySelectorAll('.category-sidebar-toggler').forEach(toggler => {
       const expandedIcon = toggler.querySelector('.expanded-icon');
       const collapsedIcon = toggler.querySelector('.collapsed-icon');
-      
+
       if (expandedIcon && collapsedIcon) {
         expandedIcon.classList.toggle('hidden', isCollapsed);
         collapsedIcon.classList.toggle('hidden', !isCollapsed);
       }
     });
   }
-  
+
   function toggleSidebar() {
     const sidebar = document.getElementById('sidebar');
-    const isMobile = window.matchMedia("(max-width: 768px)").matches;
-  
+    const isMobile = window.matchMedia('(max-width: 768px)').matches;
+
     if (sidebar) {
       if (isMobile) {
         const isShown = sidebar.classList.toggle('show');
@@ -142,7 +139,7 @@ const baseURL = '';
     initializeSidebar();
     setupTogglers();
   });
-  
+
   // Preserve state during view transitions
   document.addEventListener('astro:before-swap', () => {
     const sidebarState = localStorage.getItem('sidebarState');
@@ -150,7 +147,7 @@ const baseURL = '';
       sessionStorage.setItem('tempSidebarState', sidebarState);
     }
   });
-  
+
   document.addEventListener('astro:after-swap', () => {
     const tempState = sessionStorage.getItem('tempSidebarState');
     if (tempState) {
@@ -161,9 +158,8 @@ const baseURL = '';
   });
 </script>
 
-
 <style>
   .toggler-btn {
     @apply md:-mt-0.5;
   }
-</style>
+</style>

package/src/components/Category/CategoryLink.vue

@@ -1,9 +1,5 @@
 <template>
-  <a
-    :href="href"
-    class="category-link"
-    :class="{ 'active': active }"
-  >
+  <a :href="href" class="category-link" :class="{ active: active }">
     {{ text }}
   </a>
 </template>
@@ -14,16 +10,16 @@ export default {
   props: {
     active: {
       type: Boolean,
-      default: false
+      default: false,
     },
     text: {
       type: String,
-      required: true
+      required: true,
     },
     href: {
       type: String,
-      required: true
-    }
-  }
-}
-</script>
+      required: true,
+    },
+  },
+};
+</script>

package/src/components/Category/CategorySidebarToggler.vue

@@ -1,10 +1,5 @@
-
 <template>
-  <button
-    class="category-toggler md:w-8"
-    type="button"
-    aria-label="toggle menu"
-  >
+  <button class="category-toggler md:w-8" type="button" aria-label="toggle menu">
     <slot />
   </button>
-</template>
+</template>

package/src/components/Category/CategoryTile.astro

@@ -1,5 +1,5 @@
 ---
-import { Image } from "astro:assets";
+import { Image } from 'astro:assets';
 
 interface Props {
   CategoryObject: {
@@ -33,6 +33,6 @@ const href = `/${prefix}${CategoryObject.slug}/`;
     onerror="this.style.display='none';"
     class="cats-img"
   />
-  <div class="swiper-lazy-preloader" />
+  <div class="swiper-lazy-preloader"></div>
   <div class="cat-name" itemprop="name">{CategoryObject.name}</div>
-</a>
+</a>

package/src/components/Category/CategoryViewToggler.astro

@@ -2,28 +2,28 @@
 import { Icon } from 'astro-icon/components';
 
 interface Props {
-  showText: string;      // "Show:"
-  listText: string;      // "List"
-  gridText: string;      // "Grid"
+  showText: string; // "Show:"
+  listText: string; // "List"
+  gridText: string; // "Grid"
   listAriaLabel: string; // "List view"
   gridAriaLabel: string; // "Grid view"
-  class?: string; 
+  class?: string;
 }
 
-const { 
-  showText, 
-  listText, 
-  gridText, 
-  listAriaLabel, 
-  gridAriaLabel, 
-  class: className
+const {
+  showText,
+  listText,
+  gridText,
+  listAriaLabel,
+  gridAriaLabel,
+  class: className,
 } = Astro.props;
 ---
 
-<div class:list={[ className ]}>
+<div class:list={[className]}>
   <span class="text-slate-default text-sm">{showText}</span>
   <div class="flex border rounded">
-    <button 
+    <button
       data-view="list"
       data-view-toggle
       class="view-toggle flex items-center gap-1 px-3 py-0.5 transition-colors"
@@ -32,7 +32,7 @@ const {
       <Icon name="ant-design:bars-outlined" class="w-4 h-4" />
       <span class="text-sm">{listText}</span>
     </button>
-    <button 
+    <button
       data-view="grid"
       data-view-toggle
       class="view-toggle flex items-center gap-1 px-3 py-0.5 transition-colors"
@@ -48,7 +48,7 @@ const {
   function initializeView() {
     const savedView = localStorage.getItem('categoryView') || 'list';
     updateUI(savedView);
-    
+
     // Clean up existing listeners to prevent duplicates
     document.querySelectorAll('[data-view-toggle]').forEach(btn => {
       btn.removeEventListener('click', handleViewToggle);
@@ -59,7 +59,7 @@ const {
   function handleViewToggle(e: Event) {
     const button = e.currentTarget as HTMLElement;
     if (!button?.dataset.view) return;
-    
+
     const view = button.dataset.view;
     localStorage.setItem('categoryView', view);
     updateUI(view);
@@ -69,7 +69,7 @@ const {
       window.dataLayer.push({
         event: 'view_style_change',
         viewType: view,
-        category: window.location.pathname
+        category: window.location.pathname,
       });
     }
   }
@@ -87,4 +87,4 @@ const {
   }
 
   document.addEventListener('astro:page-load', initializeView);
-</script>
+</script>

package/src/components/Category/SubCategoryLink.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
 defineProps<{
- text: string
- active: boolean
-}>()
+  text: string;
+  active: boolean;
+}>();
 </script>
 
 <template>
- <component 
-   :is="active ? 'div' : 'a'"
-   :class="[
-     'w-full block text-base font-medium py-2 pl-6 pr-2 hover:(bg-gray-50 sm:bg-inherit)',
-     'sm:(w-auto text-sm pr-3) md:(py-0.5 pr-4)',
-     active ? 's-active' : 'text-gray-400'
-   ]"
- >
-   {{ text }}
- </component>
+  <component
+    :is="active ? 'div' : 'a'"
+    :class="[
+      'w-full block text-base font-medium py-2 pl-6 pr-2 hover:(bg-gray-50 sm:bg-inherit)',
+      'sm:(w-auto text-sm pr-3) md:(py-0.5 pr-4)',
+      active ? 's-active' : 'text-gray-400',
+    ]"
+  >
+    {{ text }}
+  </component>
 </template>

package/src/components/Faq.astro

@@ -1,32 +1,31 @@
 ---
-
 /* 
 	FAQ component for questons & answers with structured microdata for rich snippets 
 	https://developers.google.com/search/docs/appearance/structured-data/faqpage?hl=en
 
 	*/
 
-import FaqItem from "../components/FaqItem.astro"
+import FaqItem from '../components/FaqItem.astro';
 
 interface Props {
-
-	questions: {
-		question: string;
+  questions: {
+    question: string;
     answer: string;
-	}[]
+  }[];
 }
 
-const { questions } = Astro.props
+const { questions } = Astro.props;
 ---
 
-<div class="flex flex-col mt-6 mb-4 w-full px-4 md:px-0" itemscope itemtype="https://schema.org/FAQPage" >
-	<div class="mb-6 text-4xl font-headbold sm:text-4xl text-blue-802 faq-heading">
-		Frequently Asked Questions
-	</div>
-	<div class="flex flex-col divide-y dark:divide-gray-700">
-		{
-			questions.map((question) => 
-				<FaqItem data={question} />)
-		}
-	</div>
+<div
+  class="flex flex-col mt-6 mb-4 w-full px-4 md:px-0"
+  itemscope
+  itemtype="https://schema.org/FAQPage"
+>
+  <div class="mb-6 text-4xl font-headbold sm:text-4xl text-blue-802 faq-heading">
+    Frequently Asked Questions
+  </div>
+  <div class="flex flex-col divide-y dark:divide-gray-700">
+    {questions.map(question => <FaqItem data={question} />)}
+  </div>
 </div>