spoko-design-system 0.9.6 → 1.0.0

package/src/components/Category/CategoryTile.astro

@@ -1,38 +1,38 @@
----
-import { Image } from "astro:assets";
-
-interface Props {
-  CategoryObject: {
-    photo: string;
-    desc: string;
-    alt: string;
-    name: string;
-    slug: string;
-    height?: number;
-    width?: number;
-    class?: string;
-  };
-  locale?: string;
-}
-
-const { CategoryObject, locale = 'en' } = Astro.props;
-const { height = 70, width = 70 } = CategoryObject;
-
-const prefix = locale === 'en' ? '' : `${locale}/`;
-const href = `/${prefix}${CategoryObject.slug}/`;
----
-
-<a href={href} class="carousel-item" data-astro-prefetch>
-  <Image
-    src={CategoryObject.photo}
-    alt={CategoryObject.alt}
-    height={height}
-    width={width}
-    format="avif"
-    loading="eager"
-    onerror="this.style.display='none';"
-    class="cats-img"
-  />
-  <div class="swiper-lazy-preloader" />
-  <div class="cat-name" itemprop="name">{CategoryObject.name}</div>
+---
+import { Image } from "astro:assets";
+
+interface Props {
+  CategoryObject: {
+    photo: string;
+    desc: string;
+    alt: string;
+    name: string;
+    slug: string;
+    height?: number;
+    width?: number;
+    class?: string;
+  };
+  locale?: string;
+}
+
+const { CategoryObject, locale = 'en' } = Astro.props;
+const { height = 70, width = 70 } = CategoryObject;
+
+const prefix = locale === 'en' ? '' : `${locale}/`;
+const href = `/${prefix}${CategoryObject.slug}/`;
+---
+
+<a href={href} class="carousel-item" data-astro-prefetch>
+  <Image
+    src={CategoryObject.photo}
+    alt={CategoryObject.alt}
+    height={height}
+    width={width}
+    format="avif"
+    loading="eager"
+    onerror="this.style.display='none';"
+    class="cats-img"
+  />
+  <div class="swiper-lazy-preloader" />
+  <div class="cat-name" itemprop="name">{CategoryObject.name}</div>
 </a>

package/src/components/Category/CategoryViewToggler.astro

@@ -1,90 +1,90 @@
----
-import { Icon } from 'astro-icon/components';
-
-interface Props {
-  showText: string;      // "Show:"
-  listText: string;      // "List"
-  gridText: string;      // "Grid"
-  listAriaLabel: string; // "List view"
-  gridAriaLabel: string; // "Grid view"
-  class?: string; 
-}
-
-const { 
-  showText, 
-  listText, 
-  gridText, 
-  listAriaLabel, 
-  gridAriaLabel, 
-  class: className
-} = Astro.props;
----
-
-<div class:list={[ className ]}>
-  <span class="text-slate-default text-sm">{showText}</span>
-  <div class="flex border rounded">
-    <button 
-      data-view="list"
-      data-view-toggle
-      class="view-toggle flex items-center gap-1 px-3 py-0.5 transition-colors"
-      aria-label={listAriaLabel}
-    >
-      <Icon name="ant-design:bars-outlined" class="w-4 h-4" />
-      <span class="text-sm">{listText}</span>
-    </button>
-    <button 
-      data-view="grid"
-      data-view-toggle
-      class="view-toggle flex items-center gap-1 px-3 py-0.5 transition-colors"
-      aria-label={gridAriaLabel}
-    >
-      <Icon name="ant-design:appstore-outlined" class="w-4 h-4" />
-      <span class="text-sm">{gridText}</span>
-    </button>
-  </div>
-</div>
-
-<script>
-  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);
-      btn.addEventListener('click', handleViewToggle);
-    });
-  }
-
-  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);
-
-    // Push to dataLayer directly
-    if (window.dataLayer) {
-      window.dataLayer.push({
-        event: 'view_style_change',
-        viewType: view,
-        category: window.location.pathname
-      });
-    }
-  }
-
-  function updateUI(view: string) {
-    document.querySelectorAll('.view-toggle').forEach(btn => {
-      btn.classList.toggle('bg-neutral-lightest', btn.dataset.view === view);
-    });
-
-    const productsContainer = document.querySelector('.products-container');
-    if (productsContainer) {
-      productsContainer.classList.remove('view-grid', 'view-list');
-      productsContainer.classList.add(`view-${view}`);
-    }
-  }
-
-  document.addEventListener('astro:page-load', initializeView);
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  showText: string;      // "Show:"
+  listText: string;      // "List"
+  gridText: string;      // "Grid"
+  listAriaLabel: string; // "List view"
+  gridAriaLabel: string; // "Grid view"
+  class?: string; 
+}
+
+const { 
+  showText, 
+  listText, 
+  gridText, 
+  listAriaLabel, 
+  gridAriaLabel, 
+  class: className
+} = Astro.props;
+---
+
+<div class:list={[ className ]}>
+  <span class="text-slate-default text-sm">{showText}</span>
+  <div class="flex border rounded">
+    <button 
+      data-view="list"
+      data-view-toggle
+      class="view-toggle flex items-center gap-1 px-3 py-0.5 transition-colors"
+      aria-label={listAriaLabel}
+    >
+      <Icon name="ant-design:bars-outlined" class="w-4 h-4" />
+      <span class="text-sm">{listText}</span>
+    </button>
+    <button 
+      data-view="grid"
+      data-view-toggle
+      class="view-toggle flex items-center gap-1 px-3 py-0.5 transition-colors"
+      aria-label={gridAriaLabel}
+    >
+      <Icon name="ant-design:appstore-outlined" class="w-4 h-4" />
+      <span class="text-sm">{gridText}</span>
+    </button>
+  </div>
+</div>
+
+<script>
+  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);
+      btn.addEventListener('click', handleViewToggle);
+    });
+  }
+
+  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);
+
+    // Push to dataLayer directly
+    if (window.dataLayer) {
+      window.dataLayer.push({
+        event: 'view_style_change',
+        viewType: view,
+        category: window.location.pathname
+      });
+    }
+  }
+
+  function updateUI(view: string) {
+    document.querySelectorAll('.view-toggle').forEach(btn => {
+      btn.classList.toggle('bg-neutral-lightest', btn.dataset.view === view);
+    });
+
+    const productsContainer = document.querySelector('.products-container');
+    if (productsContainer) {
+      productsContainer.classList.remove('view-grid', 'view-list');
+      productsContainer.classList.add(`view-${view}`);
+    }
+  }
+
+  document.addEventListener('astro:page-load', initializeView);
 </script>

package/src/components/Category/SubCategoryLink.vue

@@ -1,19 +1,19 @@
-<script setup lang="ts">
-defineProps<{
- 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>
-</template>
+<script setup lang="ts">
+defineProps<{
+ 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>
+</template>

package/src/components/Copyright.astro

@@ -1,12 +1,12 @@
----
-const { class: className } = Astro.props;
----
-
-<div
-  class="bg-vw h-11 flex items-center font-headlight justify-between px-4"
-  class:list={[className]}
->
-  <slot name="left-item" />
-  <slot name="middle-item" />
-  <slot name="right-item" />
-</div>
+---
+const { class: className } = Astro.props;
+---
+
+<div
+  class="bg-vw h-11 flex items-center font-headlight justify-between px-4"
+  class:list={[className]}
+>
+  <slot name="left-item" />
+  <slot name="middle-item" />
+  <slot name="right-item" />
+</div>

package/src/components/Date.astro

@@ -1,7 +1,7 @@
----
-const { date } = Astro.props;
----
-
-<time class="text-sm flex items-center mr-2" datetime={date}>
-  {new Date(date).toLocaleDateString()}
-</time>
+---
+const { date } = Astro.props;
+---
+
+<time class="text-sm flex items-center mr-2" datetime={date}>
+  {new Date(date).toLocaleDateString()}
+</time>

package/src/components/Faq.astro

@@ -1,33 +1,33 @@
----
-
-/* 
-	FAQ component for questons & answers with structured microdata for rich snippets 
-	https://developers.google.com/search/docs/appearance/structured-data/faqpage?hl=en
-
-	*/
-
-import {t }  from "i18next"
-import FaqItem from "../components/FaqItem.astro"
-
-interface Props {
-
-	questions: {
-		question: string;
-    answer: string;
-	}[]
-}
-
-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">
-		{t('faq.title')}
-	</div>
-	<div class="flex flex-col divide-y dark:divide-gray-700">
-		{
-			questions.map((question) => 
-				<FaqItem data={question} />)
-		}
-	</div>
-</div>
+---
+
+/* 
+	FAQ component for questons & answers with structured microdata for rich snippets 
+	https://developers.google.com/search/docs/appearance/structured-data/faqpage?hl=en
+
+	*/
+
+import {t }  from "i18next"
+import FaqItem from "../components/FaqItem.astro"
+
+interface Props {
+
+	questions: {
+		question: string;
+    answer: string;
+	}[]
+}
+
+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">
+		{t('faq.title')}
+	</div>
+	<div class="flex flex-col divide-y dark:divide-gray-700">
+		{
+			questions.map((question) => 
+				<FaqItem data={question} />)
+		}
+	</div>
+</div>

package/src/components/FaqItem.astro

@@ -1,81 +1,81 @@
----
-import { Markdown } from 'astro-remote';
-
-interface Props {
-  data: {
-    question: string;
-    answer: string;
-  };
-}
-
-const { data } = Astro.props;
----
-
-{data.answer && (
-  <details 
-    itemscope 
-    itemprop="mainEntity" 
-    itemtype="https://schema.org/Question" 
-    class="faq-details [&_summary:after]:open:-rotate-180"
-  >
-    <summary
-      class="py-2 outline-none cursor-pointer focus:underline text-xl font-500 relative items-center flex justify-between list-none
-      after:(block duration-200 content-empty bg-[url(/arrow-bottom.svg)] bg-contain bg-center bg-no-repeat h-3 w-4 min-w-4 my-auto ml-4 opacity-60)"
-    >
-      <h2 itemprop="name" class="font-headbold" set:html={data.question} />
-    </summary>
-    <div
-      itemscope
-      itemprop="acceptedAnswer"
-      itemtype="https://schema.org/Answer"
-    >
-      <div itemprop="text" class="px-0 pb-4">
-        <Markdown content={data.answer} />
-      </div>
-    </div>
-  </details>
-)}
-
-<style is:global>
-  .faq-details {
-    &[open] h2 {
-      color: var(--clr-primary-450);
-    }
-
-    ul, ol {
-      @apply pl-5;
-      
-      & + p {
-        @apply mt-2;
-      }
-    }
-
-    ul {
-      @apply list-disc;
-    }
-
-    ol {
-      @apply list-decimal;
-    }
-
-    h2 {
-      color: var(--clr-primary-700);
-      
-      &:hover {
-        color: var(--clr-primary-450);
-      }
-    }
-    
-    h3 {
-      @apply mt-2;
-    }
-
-    td, th {
-      @apply border-b text-left py-2 pr-4;
-    }
-
-    a {
-      @apply underline decoration-light-blue-400 underline-offset-2;
-    }
-  }
+---
+import { Markdown } from 'astro-remote';
+
+interface Props {
+  data: {
+    question: string;
+    answer: string;
+  };
+}
+
+const { data } = Astro.props;
+---
+
+{data.answer && (
+  <details 
+    itemscope 
+    itemprop="mainEntity" 
+    itemtype="https://schema.org/Question" 
+    class="faq-details [&_summary:after]:open:-rotate-180"
+  >
+    <summary
+      class="py-2 outline-none cursor-pointer focus:underline text-xl font-500 relative items-center flex justify-between list-none
+      after:(block duration-200 content-empty bg-[url(/arrow-bottom.svg)] bg-contain bg-center bg-no-repeat h-3 w-4 min-w-4 my-auto ml-4 opacity-60)"
+    >
+      <h2 itemprop="name" class="font-headbold" set:html={data.question} />
+    </summary>
+    <div
+      itemscope
+      itemprop="acceptedAnswer"
+      itemtype="https://schema.org/Answer"
+    >
+      <div itemprop="text" class="px-0 pb-4">
+        <Markdown content={data.answer} />
+      </div>
+    </div>
+  </details>
+)}
+
+<style is:global>
+  .faq-details {
+    &[open] h2 {
+      color: var(--clr-primary-450);
+    }
+
+    ul, ol {
+      @apply pl-5;
+      
+      & + p {
+        @apply mt-2;
+      }
+    }
+
+    ul {
+      @apply list-disc;
+    }
+
+    ol {
+      @apply list-decimal;
+    }
+
+    h2 {
+      color: var(--clr-primary-700);
+      
+      &:hover {
+        color: var(--clr-primary-450);
+      }
+    }
+    
+    h3 {
+      @apply mt-2;
+    }
+
+    td, th {
+      @apply border-b text-left py-2 pr-4;
+    }
+
+    a {
+      @apply underline decoration-light-blue-400 underline-offset-2;
+    }
+  }
 </style>

package/src/components/FeaturesList.vue

@@ -1,37 +1,37 @@
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-
-const props = defineProps({
-    items: {
-        type: Object as PropType<String[] | null>,
-        default: null,
-        required: true,
-    },
-    caption: {
-        type: String as PropType<String | null>,
-        default: null,
-        required: false,
-    }
-})
-</script>
-
-<template>
-    <h2 
-        class="features-list-caption" 
-        v-if="props.caption"
-    >
-        {{ props.caption }}
-    </h2>
-    <ul class="features-list-ul">
-        <li 
-            v-for="item in props.items" 
-            class="features-list-item"
-            :key="item"
-        >
-            {{ item }}
-        </li>
-    </ul>
-</template>
-
-
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+const props = defineProps({
+    items: {
+        type: Object as PropType<String[] | null>,
+        default: null,
+        required: true,
+    },
+    caption: {
+        type: String as PropType<String | null>,
+        default: null,
+        required: false,
+    }
+})
+</script>
+
+<template>
+    <h2 
+        class="features-list-caption" 
+        v-if="props.caption"
+    >
+        {{ props.caption }}
+    </h2>
+    <ul class="features-list-ul">
+        <li 
+            v-for="item in props.items" 
+            class="features-list-item"
+            :key="item"
+        >
+            {{ item }}
+        </li>
+    </ul>
+</template>
+
+