spoko-design-system 0.3.9 → 0.4.2

package/.astro/data-store.json

@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.2.5","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"img.freepik.com\"],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.3.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"img.freepik.com\",\"polo6r.pl\"],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]

package/astro.config.mjs

@@ -9,7 +9,7 @@ import sitemap from "@astrojs/sitemap";
 import pagefind from "astro-pagefind";
 import AstroPWA from '@vite-pwa/astro';
 import metaTags from "astro-meta-tags";
-import playformInline from "@playform/inline";
+
 import { createSdsConfig } from './uno-config';
 
 const unoConfig = createSdsConfig();
@@ -22,68 +22,66 @@ export default defineConfig({
   },
   image: {
     service: sharpImageService(),
-    domains: ["placehold.co", "api.polo.blue", "polo.blue", "media.istockphoto.com", "img.freepik.com"]
+    domains: ["placehold.co", "api.polo.blue", "polo.blue", "media.istockphoto.com", "img.freepik.com", "polo6r.pl"]
   },
   integrations: [
-  // Enable Vue to support Vue3 components.
-  vue(), mdx(), astroI18next(), AstroPWA({
-    mode: 'production',
-    base: '/',
-    scope: '/',
-    includeAssets: ['favicon.svg', 'safari-pinned-tab.svg', 'brands/*.svg', 'fonts/*.woff2', 'fonts/*.svg', 'vw.svg', 'polo.blue.svg', 'spoko.space.svg'],
-    // add this to cache all the static assets in the public folder
-    // includeAssets: [
-    //   "**/*",
-    // ],
-    registerType: 'autoUpdate',
-    manifest: {
-      name: 'Spoko Design System',
-      short_name: 'SDS',
-      description: 'SDS PWA app description',
-      categories: ['multimedia'],
-      screenshots: [{
-        "src": "pwa-512x512.png",
-        "sizes": "512x512",
-        "platform": "windows",
-        "label": "SDS"
-      }],
-      theme_color: '#001e50',
-      icons: [{
-        src: 'pwa-192x192.png',
-        sizes: '192x192',
-        type: 'image/png'
-      }, {
-        src: 'pwa-512x512.png',
-        sizes: '512x512',
-        type: 'image/png'
-      }, {
-        src: 'pwa-512x512.png',
-        sizes: '512x512',
-        type: 'image/png',
-        purpose: 'any maskable'
-      }]
-    },
-    workbox: {
-      navigateFallback: '/',
-      globPatterns: ['**/*.{css,js,html,svg,png,ico,txt}']
-      // globPatterns: ["**/*"],             // add this to cache all the imports
-    },
-    devOptions: {
-      enabled: false,
-      navigateFallbackAllowlist: [/^\//]
-    },
-    experimental: {
-      directoryAndTrailingSlashHandler: true
-    }
-  }), 
-  UnoCSS({
-    injectReset: true,
-    ...unoConfig
-  }),
-  icon(iconConfig), 
-  metaTags(),
-  (await import("@playform/inline")).default(),
-  pagefind(), 
-  sitemap()
-]
+    // Enable Vue to support Vue3 components
+    vue(), 
+    mdx(), 
+    astroI18next(), 
+    AstroPWA({
+      mode: 'production',
+      base: '/',
+      scope: '/',
+      includeAssets: ['favicon.svg', 'safari-pinned-tab.svg', 'brands/*.svg', 'fonts/*.woff2', 'fonts/*.svg', 'vw.svg', 'polo.blue.svg', 'spoko.space.svg'],
+      registerType: 'autoUpdate',
+      manifest: {
+        name: 'Spoko Design System',
+        short_name: 'SDS',
+        description: 'SDS PWA app description',
+        categories: ['multimedia'],
+        screenshots: [{
+          "src": "pwa-512x512.png",
+          "sizes": "512x512",
+          "platform": "windows",
+          "label": "SDS"
+        }],
+        theme_color: '#001e50',
+        icons: [{
+          src: 'pwa-192x192.png',
+          sizes: '192x192',
+          type: 'image/png'
+        }, {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png'
+        }, {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'any maskable'
+        }]
+      },
+      workbox: {
+        navigateFallback: '/',
+        globPatterns: ['**/*.{css,js,html,svg,png,ico,txt}']
+      },
+      devOptions: {
+        enabled: false,
+        navigateFallbackAllowlist: [/^\//]
+      },
+      experimental: {
+        directoryAndTrailingSlashHandler: true
+      }
+    }), 
+    UnoCSS({
+      injectReset: true,
+      ...unoConfig
+    }),
+    icon(iconConfig), 
+    metaTags(),
+    (await import("@playform/inline")).default(),
+    pagefind(), 
+    sitemap()
+  ]
 });

package/index.ts

@@ -38,6 +38,7 @@ export { default as Copyright } from './src/components/Copyright.astro';
 export { default as HandDrive } from './src/components/HandDrive.astro';
 export { default as Faq } from './src/components/Faq.astro';
 export { default as FaqItem } from './src/components/FaqItem.astro';
+export { default as ButtonCopy } from './src/components/ButtonCopy.astro'; // Add this line
 
 export { default as ProductImage } from './src/components/Product/ProductImage.astro';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.3.9",
+  "version": "0.4.2",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",

package/src/components/ButtonCopy.astro

@@ -0,0 +1,165 @@
+---
+interface Props {
+  productNumber: string;
+  tooltipClasses?: string;
+  texts: {
+    copy: string;
+    copied: string;
+  };
+}
+
+const { 
+  productNumber,
+  tooltipClasses = '',
+  texts 
+} = Astro.props;
+
+// Move SVG definition to a constant to avoid recomputing
+const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
+  `<svg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' d='M184 66H40a6 6 0 0 0-6 6v144a6 6 0 0 0 6 6h144a6 6 0 0 0 6-6V72a6 6 0 0 0-6-6m-6 144H46V78h132Zm44-170v144a6 6 0 0 1-12 0V46H72a6 6 0 0 1 0-12h144a6 6 0 0 1 6 6'/></svg>`
+)}")`;
+---
+
+<button 
+  aria-label={texts.copy} 
+  class="btn-copy has-tooltip" 
+  data-copy-text={productNumber}
+>
+  <span 
+    class:list={["tooltip rounded-full btn-copy-text", tooltipClasses]}
+    data-text={texts.copy}
+    data-copied-text={texts.copied}
+  />
+  <span class="copy-icon" role="img" aria-hidden="true" />
+</button>
+
+<script>
+  class ClipboardButton {
+    private static COPY_TIMEOUT = 2000;
+
+    constructor(private button: HTMLButtonElement) {
+      this.init();
+    }
+
+    private init(): void {
+      this.button.addEventListener('click', () => this.handleCopy());
+    }
+
+    private get tooltip(): HTMLSpanElement {
+      return this.button.querySelector('.tooltip') as HTMLSpanElement;
+    }
+
+    private get copyText(): string {
+      return this.button.dataset.copyText || '';
+    }
+
+    private get originalText(): string {
+      return this.tooltip.dataset.text || 'Copy';
+    }
+
+    private get copiedText(): string {
+      return this.tooltip.dataset.copiedText || 'Copied';
+    }
+
+    private async handleCopy(): Promise<void> {
+      try {
+        await this.copyToClipboard();
+        this.updateTooltip();
+      } catch (err) {
+        console.error('Failed to copy text:', err);
+      }
+    }
+
+    private async copyToClipboard(): Promise<void> {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(this.copyText);
+      } else {
+        this.fallbackCopy();
+      }
+    }
+
+    private updateTooltip(): void {
+      this.tooltip.dataset.text = this.copiedText;
+      setTimeout(() => {
+        this.tooltip.dataset.text = this.originalText;
+      }, ClipboardButton.COPY_TIMEOUT);
+    }
+
+    private fallbackCopy(): void {
+      const textArea = document.createElement('textarea');
+      textArea.value = this.copyText;
+      textArea.style.position = 'fixed';
+      textArea.style.opacity = '0';
+      
+      document.body.appendChild(textArea);
+      textArea.select();
+      
+      try {
+        document.execCommand('copy');
+      } catch (err) {
+        console.error('Fallback copy failed:', err);
+      } finally {
+        document.body.removeChild(textArea);
+      }
+    }
+  }
+
+  // Use a single event listener with event delegation
+  document.addEventListener('astro:page-load', () => {
+    document.querySelectorAll('.btn-copy').forEach(button => {
+      if (button instanceof HTMLButtonElement) {
+        new ClipboardButton(button);
+      }
+    });
+  });
+</script>
+
+<style define:vars={{ iconUrl: COPY_ICON }}>
+  .btn-copy {
+    position: absolute;
+    right: -1.75rem;
+    margin-left: auto;
+    width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1;
+    opacity: 0.1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  .btn-copy:hover {
+    opacity: 1;
+  }
+
+  @media (min-width: 640px) {
+    .btn-copy {
+      right: -1.25rem;
+    }
+  }
+
+  .tooltip {
+    @apply invisible absolute -top-8 left-1/2 -translate-x-1/2 bg-neutral px-2 py-1 text-xs text-white opacity-0 transition-opacity;
+  }
+
+  .tooltip::before {
+    content: attr(data-text);
+  }
+
+  .has-tooltip:hover .tooltip {
+    @apply visible opacity-100;
+  }
+
+  .copy-icon {
+    width: 1.2em;
+    height: 1.2em;
+    display: inline-block;
+    vertical-align: middle;
+    background-color: currentColor;
+    -webkit-mask: var(--iconUrl) no-repeat;
+    mask: var(--iconUrl) no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+  }
+</style>

package/src/components/Category/CategoryDetails.astro

@@ -23,34 +23,71 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
   transition:name="category-details"
   transition:animate="fade"
 >
-  <CategorySidebarToggler onclick="toggleSidebar()">
-    <!-- Desktop expanded -->
+<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 md:[&:not(.hidden)]:block" 
+      class="toggler-btn w-6 expanded-icon" 
       aria-hidden="true"
     />
-    <!-- Desktop collapsed -->
     <Icon 
       name="ant-design:menu-unfold-outlined" 
-      class="toggler-btn hidden md:[&:not(.hidden)]:block" 
+      class="toggler-btn w-6 collapsed-icon hidden" 
       aria-hidden="true"
     />
-    <!-- Mobile icon -->
+  </div>
+  <!-- Mobile icon in separate container -->
+  <div class="mobile-icon block md:hidden">
     <Icon 
       name="ant-design:menu-outlined" 
-      class="toggler-btn block md:hidden" 
+      class="toggler-btn w-6" 
       aria-hidden="true"
     />
-  </CategorySidebarToggler>
+  </div>
+</CategorySidebarToggler>
 
-  <!-- Rest of the existing template code -->
 
-  { showViewToggler && (
+  <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"> {t('catalog.extra-short')}</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"> {t('catalog.extra-short')}</span>
+            </h1>
+          </>
+        )}
+      </>
+    ) : (
+      <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap">
+        {category.name}
+        {titleSmall && <small>{titleSmall}</small>}
+        <span class="sr-only"> {t('catalog.extra-short')}</span>
+      </h1>
+    )}
+  </div>
+
+  {showViewToggler && (
     <CategoryViewToggler 
       {...viewerLabels}  
       class="hidden lg:flex items-center gap-2 ml-auto" 
-    /> 
+    />
   )}
 </div>
 
@@ -61,19 +98,24 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
     
     if (sidebar) {
       sidebar.classList.toggle('collapsed', savedState === 'closed');
+      updateTogglers(savedState === 'closed');
+    }
+  }
+
+  function updateTogglers(isCollapsed) {
+    document.querySelectorAll('.category-sidebar-toggler').forEach(toggler => {
+      const expandedIcon = toggler.querySelector('.expanded-icon');
+      const collapsedIcon = toggler.querySelector('.collapsed-icon');
       
-      const togglers = document.querySelectorAll('.toggler-btn');
-      if (togglers.length >= 2) {
-        const isCollapsed = savedState === 'closed';
-        togglers[0].classList.toggle('hidden', isCollapsed);
-        togglers[1].classList.toggle('hidden', !isCollapsed);
+      if (expandedIcon && collapsedIcon) {
+        expandedIcon.classList.toggle('hidden', isCollapsed);
+        collapsedIcon.classList.toggle('hidden', !isCollapsed);
       }
-    }
+    });
   }
   
   function toggleSidebar() {
     const sidebar = document.getElementById('sidebar');
-    const togglers = document.querySelectorAll('.toggler-btn');
     const isMobile = window.matchMedia("(max-width: 768px)").matches;
   
     if (sidebar) {
@@ -84,26 +126,28 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
         const isCollapsed = sidebar.classList.toggle('collapsed');
         document.body.classList.remove('overflow-hidden');
         localStorage.setItem('sidebarState', isCollapsed ? 'closed' : 'open');
-        
-        if (togglers.length >= 2) {
-          togglers[0].classList.toggle('hidden', isCollapsed);
-          togglers[1].classList.toggle('hidden', !isCollapsed);
-        }
+        updateTogglers(isCollapsed);
       }
     }
   }
 
-  // Initialize on every page load to maintain state during navigation
-  document.addEventListener('astro:page-load', initializeSidebar);
-  
-  // Initialize on initial page load
-  document.addEventListener('DOMContentLoaded', initializeSidebar);
+  function setupTogglers() {
+    document.querySelectorAll('.category-sidebar-toggler').forEach(toggler => {
+      toggler.removeEventListener('click', toggleSidebar);
+      toggler.addEventListener('click', toggleSidebar);
+    });
+  }
+
+  // Initialize on page load
+  document.addEventListener('astro:page-load', () => {
+    initializeSidebar();
+    setupTogglers();
+  });
   
-  // Handle state during view transitions
+  // Preserve state during view transitions
   document.addEventListener('astro:before-swap', () => {
     const sidebarState = localStorage.getItem('sidebarState');
     if (sidebarState) {
-      // Store state temporarily during transition
       sessionStorage.setItem('tempSidebarState', sidebarState);
     }
   });
@@ -111,7 +155,6 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
   document.addEventListener('astro:after-swap', () => {
     const tempState = sessionStorage.getItem('tempSidebarState');
     if (tempState) {
-      // Restore state after transition
       localStorage.setItem('sidebarState', tempState);
       sessionStorage.removeItem('tempSidebarState');
       initializeSidebar();
@@ -119,6 +162,7 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
   });
 </script>
 
+
 <style>
   .toggler-btn {
     @apply md:-mt-0.5;

package/src/components/Category/CategoryViewToggler.astro

@@ -25,7 +25,7 @@ const {
   <div class="flex border rounded">
     <button 
       data-view="list"
-      class="view-toggle flex items-center gap-1 px-3 py-1.5 transition-colors"
+      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" />
@@ -33,7 +33,7 @@ const {
     </button>
     <button 
       data-view="grid"
-      class="view-toggle flex items-center gap-1 px-3 py-1.5 transition-colors"
+      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" />

package/src/components/Jumbotron/index.astro

@@ -96,7 +96,7 @@ const commonProps = {
   />
 )}
 
-<style is:global>
+<style>
   .bg-vw {
     background: radial-gradient(circle at 50% 85%, #00437a 0%, #001e50 100%);
   }

package/src/components/Product/ProductNumber.astro

@@ -1,5 +1,5 @@
 ---
-import ButtonCopy from '../ButtonCopy.vue';
+import ButtonCopy from '../ButtonCopy.astro';
 import useFormatProductNumber from '../../utils/product/useFormatProductNumber';
 
 const {
@@ -41,7 +41,6 @@ const FormattedWrapper = isPdp ? 'h3' : 'div';
           productNumber={productNumber}
           texts={buttonTexts}
           tooltipClasses=""
-          client:only="vue"
         />
       )}
     </div>

package/uno-config/theme/shortcuts/jumbotron.ts

@@ -25,7 +25,7 @@ export const jumbotronShortcuts = [
 
   // Metadata and categories
   ['jumbotron-meta', 'order-3 flex items-center text-gray-100'],
-  ['jumbotron-categories', 'order-1'],
+  ['jumbotron-categories', 'order-1 mt-4'],
 
   // Content styles
   ['jumbotron-description', 'mb-1 line-clamp-3 text-base sm:text-lg leading-none mt-4'],