spoko-design-system 0.2.83 → 0.2.85

package/src/components/Category/CategoryViewToggler.astro

@@ -0,0 +1,99 @@
+---
+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"
+}
+
+const { 
+  showText, 
+  listText, 
+  gridText, 
+  listAriaLabel, 
+  gridAriaLabel 
+} = Astro.props;
+---
+
+<div class="flex items-center gap-2 ml-auto">
+  <span class="text-gray-600 text-sm">{showText}</span>
+  <div class="flex border rounded">
+    <button 
+      data-view="list"
+      class="view-toggle flex items-center gap-1 px-3 py-1.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"
+      class="view-toggle flex items-center gap-1 px-3 py-1.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>
+  // Initialize view state
+  function initializeView() {
+    const savedView = localStorage.getItem('categoryView') || 'list';
+    const buttons = document.querySelectorAll('.view-toggle');
+    const productsContainer = document.querySelector('.products-container');
+
+    // Set initial active state
+    buttons.forEach(button => {
+      if (button instanceof HTMLElement) {
+        const isActive = button.dataset.view === savedView;
+        button.classList.toggle('bg-gray-100', isActive);
+      }
+    });
+
+    // Set initial view on products container
+    if (productsContainer) {
+      productsContainer.classList.remove('view-grid', 'view-list');
+      productsContainer.classList.add(`view-${savedView}`);
+    }
+  }
+
+  // Handle view changes
+  function setupViewToggle() {
+    const buttons = document.querySelectorAll('.view-toggle');
+    
+    buttons.forEach(button => {
+      button.addEventListener('click', (e) => {
+        const clickedButton = e.currentTarget;
+        if (!(clickedButton instanceof HTMLElement)) return;
+        
+        const view = clickedButton.dataset.view;
+        if (!view) return;
+
+        // Update localStorage
+        localStorage.setItem('categoryView', view);
+
+        // Update button states
+        buttons.forEach(btn => btn.classList.remove('bg-gray-100'));
+        clickedButton.classList.add('bg-gray-100');
+
+        // Update products container
+        const productsContainer = document.querySelector('.products-container');
+        if (productsContainer) {
+          productsContainer.classList.remove('view-grid', 'view-list');
+          productsContainer.classList.add(`view-${view}`);
+        }
+      });
+    });
+  }
+
+  // Setup on page load
+  document.addEventListener('astro:page-load', () => {
+    initializeView();
+    setupViewToggle();
+  });
+</script>

package/src/components/Category/SubCategoryLink.vue

@@ -1,29 +1,29 @@
-<script setup lang="ts">
-const props = defineProps({
-  text: {
-    type: String,
-    default: null,
-    required: true,
-  },
-  active: {
-    type: Boolean,
-    default: false,
-    required: true,
-  },
-})
-</script>
-
-<template>
-  <a
-    v-if="!props.active"
-    class="w-full block text-base hover:(bg-gray-50 sm:bg-inherit) font-medium text-gray-300 pr-2 py-2 text-left pl-6 sm:(pr-3 text-sm w-auto) md:(py-0.5 pr-4)"
-  >
-    {{ props.text }}
-</a>
-  <div
-    v-else
-    class="w-full text-base hover:(bg-gray-50 sm:bg-inherit) font-medium pr-2 py-2 pl-6 sm:(w-auto pr-3 text-sm) md:(py-0.5 pr-4) s-active"
-  >
-    {{ props.text }}
-  </div>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  text: {
+    type: String,
+    default: null,
+    required: true,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <a
+    v-if="!props.active"
+    class="w-full block text-base hover:(bg-gray-50 sm:bg-inherit) font-medium text-gray-300 pr-2 py-2 text-left pl-6 sm:(pr-3 text-sm w-auto) md:(py-0.5 pr-4)"
+  >
+    {{ props.text }}
+</a>
+  <div
+    v-else
+    class="w-full text-base hover:(bg-gray-50 sm:bg-inherit) font-medium pr-2 py-2 pl-6 sm:(w-auto pr-3 text-sm) md:(py-0.5 pr-4) s-active"
+  >
+    {{ props.text }}
+  </div>
+</template>

package/src/components/CategoryLink.astro

@@ -1,18 +1,18 @@
----
-const { categories } = Astro.props;
----
-
-<div class="text-light-blue-400 uppercase text-base z-3 relative w-full">
-  {
-    categories
-      ? categories.map((category) => (
-          <a
-            class="term-link text-sm sm:text-base not-first:(before:content-empty) before:(w-px h-2.5 bg-gray-300 mx-2.5 inline-block relative)"
-            href={category.uri}
-          >
-            {category.name}
-          </a>
-        ))
-      : null
-  }
-</div>
+---
+const { categories } = Astro.props;
+---
+
+<div class="text-light-blue-400 uppercase text-base z-3 relative w-full">
+  {
+    categories
+      ? categories.map((category) => (
+          <a
+            class="term-link text-sm sm:text-base not-first:(before:content-empty) before:(w-px h-2.5 bg-gray-300 mx-2.5 inline-block relative)"
+            href={category.uri}
+          >
+            {category.name}
+          </a>
+        ))
+      : null
+  }
+</div>

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,96 +1,96 @@
----
-import { Markdown } from 'astro-remote';
-
-/* 
-  Question & Answer based on details & summary HTML tag 
-  https://web.dev/learn/html/details
-  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
-
-*/
-
-interface Props {
-  data: {
-    question: string;
-    answer: string;
-  };
-}
-
-const { data } = Astro.props;
----
-
-{ data.answer &&
-  <details itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" class="[&_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-contain bg-center bg-no-repeat h-3 w-4 min-w-4 my-auto ml-4 opacity-60 bg-[url(/arrow-bottom.svg)])"
-      >
-        <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>
-
-  details {
-
-    &[open] {
-      h2 {
-        color: var(--clr-primary-450);
-      }
-    }
-
-
-    ul {
-      @apply list-disc pl-5;
-
-      &+p {
-        @apply mt-2;
-      }
-    }
-
-    ol {
-      @apply list-decimal	 pl-5;
-      &+p {
-        @apply mt-2;
-      }
-    }
-
-    h2 {
-      color: var(--clr-primary-700);
-      /* font-size: clamp(1.5rem, 1.29rem + 0.59vw, 2rem);
-        line-height: 120%;
-        letter-spacing: calc(-0.02em + 0.02rem); */
-      &:hover {
-        color: var(--clr-primary-450);
-      }
-    }
-    
-    h3 {
-      @apply mt-2;
-    }
-
-    /* table {
-      @apply table-auto;
-    } */
-
-    td, th {
-      @apply border-b text-left py-2 pr-4;
-    }
-
-    a {
-      @apply underline decoration-light-blue-400 underline-offset-2;
-    }
-  }
-  
-</style>
+---
+import { Markdown } from 'astro-remote';
+
+/* 
+  Question & Answer based on details & summary HTML tag 
+  https://web.dev/learn/html/details
+  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
+
+*/
+
+interface Props {
+  data: {
+    question: string;
+    answer: string;
+  };
+}
+
+const { data } = Astro.props;
+---
+
+{ data.answer &&
+  <details itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" class="[&_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-contain bg-center bg-no-repeat h-3 w-4 min-w-4 my-auto ml-4 opacity-60 bg-[url(/arrow-bottom.svg)])"
+      >
+        <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>
+
+  details {
+
+    &[open] {
+      h2 {
+        color: var(--clr-primary-450);
+      }
+    }
+
+
+    ul {
+      @apply list-disc pl-5;
+
+      &+p {
+        @apply mt-2;
+      }
+    }
+
+    ol {
+      @apply list-decimal	 pl-5;
+      &+p {
+        @apply mt-2;
+      }
+    }
+
+    h2 {
+      color: var(--clr-primary-700);
+      /* font-size: clamp(1.5rem, 1.29rem + 0.59vw, 2rem);
+        line-height: 120%;
+        letter-spacing: calc(-0.02em + 0.02rem); */
+      &:hover {
+        color: var(--clr-primary-450);
+      }
+    }
+    
+    h3 {
+      @apply mt-2;
+    }
+
+    /* table {
+      @apply table-auto;
+    } */
+
+    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,41 +1,41 @@
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-
-const props = defineProps({
-    items: {
-        type: Object as PropType<String[] | null>,
-        default: null,
-        required: true,
-    },
-    caption: {
-        type: Object as PropType<String | null>,
-        default: null,
-        required: false,
-    }
-})
-</script>
-
-<template>
-    <h2 class="mb-2 colon-after text-xl font-textbold block leading-none" v-if="props.caption">{{ props.caption }}</h2>
-    <ul class="mb-6">
-        <li v-for="item in props.items" class="leading-5">
-            {{ item }}
-        </li>
-    </ul>
-</template>
-
-
-<style  scoped>
-ul {
-    @apply list-square pl-5;
-
-    li {
-        @apply relative mb-2;
-
-        &::marker {
-            @apply text-blue-400;
-        }
-    }
-}
-</style>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+const props = defineProps({
+    items: {
+        type: Object as PropType<String[] | null>,
+        default: null,
+        required: true,
+    },
+    caption: {
+        type: Object as PropType<String | null>,
+        default: null,
+        required: false,
+    }
+})
+</script>
+
+<template>
+    <h2 class="mb-2 colon-after text-xl font-textbold block leading-none" v-if="props.caption">{{ props.caption }}</h2>
+    <ul class="mb-6">
+        <li v-for="item in props.items" class="leading-5">
+            {{ item }}
+        </li>
+    </ul>
+</template>
+
+
+<style  scoped>
+ul {
+    @apply list-square pl-5;
+
+    li {
+        @apply relative mb-2;
+
+        &::marker {
+            @apply text-blue-400;
+        }
+    }
+}
+</style>