spoko-design-system 0.9.5 → 1.0.0

package/src/components/ButtonCopy.astro

@@ -1,184 +1,184 @@
----
-interface Props {
-  productNumber: string;
-  tooltipClasses?: string;
-  texts: {
-    copy: string;
-    copied: string;
-  };
-}
-
-const { 
-  productNumber,
-  tooltipClasses = '',
-  texts 
-} = Astro.props;
-
-// SVG icon as data URL for mask
-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}
-  data-category={Astro.url.pathname.split('/')[1] || ''}
->
-  <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 readonly COPY_TIMEOUT = 2000;
-    private static readonly ANALYTICS_EVENT = 'product_code_copy';
-
-    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 category(): string {
-      return this.button.dataset.category || '';
-    }
-
-    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();
-        this.trackCopy();
-      } catch (err) {
-        console.error('Failed to copy text:', err);
-      }
-    }
-
-    private trackCopy(): void {
-      if (!window.dataLayer) return;
-
-      window.dataLayer.push({
-        event: ClipboardButton.ANALYTICS_EVENT,
-        productCode: this.copyText,
-        category: this.category,
-        pageUrl: window.location.pathname,
-        timestamp: new Date().toISOString()
-      });
-    }
-
-    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);
-      }
-    }
-  }
-
-  // Initialize copy buttons on page load
-  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%;
-  }
+---
+interface Props {
+  productNumber: string;
+  tooltipClasses?: string;
+  texts: {
+    copy: string;
+    copied: string;
+  };
+}
+
+const { 
+  productNumber,
+  tooltipClasses = '',
+  texts 
+} = Astro.props;
+
+// SVG icon as data URL for mask
+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}
+  data-category={Astro.url.pathname.split('/')[1] || ''}
+>
+  <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 readonly COPY_TIMEOUT = 2000;
+    private static readonly ANALYTICS_EVENT = 'product_code_copy';
+
+    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 category(): string {
+      return this.button.dataset.category || '';
+    }
+
+    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();
+        this.trackCopy();
+      } catch (err) {
+        console.error('Failed to copy text:', err);
+      }
+    }
+
+    private trackCopy(): void {
+      if (!window.dataLayer) return;
+
+      window.dataLayer.push({
+        event: ClipboardButton.ANALYTICS_EVENT,
+        productCode: this.copyText,
+        category: this.category,
+        pageUrl: window.location.pathname,
+        timestamp: new Date().toISOString()
+      });
+    }
+
+    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);
+      }
+    }
+  }
+
+  // Initialize copy buttons on page load
+  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/ButtonCopy.vue

@@ -1,36 +1,36 @@
-<script lang="ts" setup>
-import { useClipboard } from "@vueuse/core";
-// import { Icon } from "@iconify/vue";
-
-const props = defineProps({
-    productNumber: {
-        type: String,
-        default: null,
-        required: true,
-    },
-    tooltipClasses: {
-        type: String,
-        required: false,
-        default: '',
-    },
-    texts: {
-        type: Object as PropType<{ copy: String, copied: String }>,
-        required: true,
-        default: {
-            copy: 'copy',
-            copied: 'copied',
-        }
-    }
-})
-const source = props.productNumber;
-const { copy, copied, isSupported } = useClipboard({ source, legacy: true });
-
-</script>
-
-<template>
-    <button :aria-label="texts.copy" class="btn-copy has-tooltip" @click="copy()">
-        <span :class="`tooltip rounded-full btn-copy-text ${tooltipClasses}`"
-            :data-text="!copied ? texts.copy : texts.copied" />
-        <span i-ph-copy-simple-light class="leading-none w-full h-full" />
-    </button>
-</template>
+<script lang="ts" setup>
+import { useClipboard } from "@vueuse/core";
+// import { Icon } from "@iconify/vue";
+
+const props = defineProps({
+    productNumber: {
+        type: String,
+        default: null,
+        required: true,
+    },
+    tooltipClasses: {
+        type: String,
+        required: false,
+        default: '',
+    },
+    texts: {
+        type: Object as PropType<{ copy: String, copied: String }>,
+        required: true,
+        default: {
+            copy: 'copy',
+            copied: 'copied',
+        }
+    }
+})
+const source = props.productNumber;
+const { copy, copied, isSupported } = useClipboard({ source, legacy: true });
+
+</script>
+
+<template>
+    <button :aria-label="texts.copy" class="btn-copy has-tooltip" @click="copy()">
+        <span :class="`tooltip rounded-full btn-copy-text ${tooltipClasses}`"
+            :data-text="!copied ? texts.copy : texts.copied" />
+        <span i-ph-copy-simple-light class="leading-none w-full h-full" />
+    </button>
+</template>

package/src/components/Card.astro

@@ -1,27 +1,27 @@
----
-const { class: className, imgSrc, imgAlt, href } = Astro.props;
-
-import Image from "../components/Image.astro";
----
-
-<div
-  class="bg-white border border-gray-200 rounded-lg shadow overflow-hidden"
->
-  <a href={href} class="aspect-ratio-video block relative">
-    {
-      imgSrc && (
-        <Image
-          imageObject={{
-            src: imgSrc,
-            alt: imgAlt,
-            height: "405",
-            width: "720",
-          }}
-        />
-      )
-    }
-  </a>
-  <div class="p-5">
-    <slot />
-  </div>
-</div>
+---
+const { class: className, imgSrc, imgAlt, href } = Astro.props;
+
+import Image from "../components/Image.astro";
+---
+
+<div
+  class="bg-white border border-gray-200 rounded-lg shadow overflow-hidden"
+>
+  <a href={href} class="aspect-ratio-video block relative">
+    {
+      imgSrc && (
+        <Image
+          imageObject={{
+            src: imgSrc,
+            alt: imgAlt,
+            height: "405",
+            width: "720",
+          }}
+        />
+      )
+    }
+  </a>
+  <div class="p-5">
+    <slot />
+  </div>
+</div>

package/src/components/Carousel.astro

@@ -1,26 +1,26 @@
----
-export const productObject = {
-  name: "Combi-instrument MFA+",
-  url: "https://google.com",
-  number: "6R0920870F",
-  photo:
-    "https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337",
-};
----
-
-<swiper-container
-  class="max-w-full w-full flex overflow-hidden"
-  grid-rows="1"
-  mousewheel-force-to-axis="true"
-  navigation="true"
-  pagination-type="fraction"
-  scrollbar="false"
-  slides-per-view="auto"
-  space-between="0"
->
-  <swiper-slide class="bg-blue-50 p-12 border-1 min-w-full">A</swiper-slide>
-  <swiper-slide class="bg-blue-100 p-12 border-1 min-w-full">B</swiper-slide>
-  <swiper-slide class="bg-blue-200 p-12 border-1 min-w-full">C</swiper-slide>
-  <swiper-slide class="bg-blue-300 p-12 border-1 min-w-full">D</swiper-slide>
-  <swiper-slide class="bg-blue-400 p-12 border-1 min-w-full">A</swiper-slide>
-</swiper-container>
+---
+export const productObject = {
+  name: "Combi-instrument MFA+",
+  url: "https://google.com",
+  number: "6R0920870F",
+  photo:
+    "https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337",
+};
+---
+
+<swiper-container
+  class="max-w-full w-full flex overflow-hidden"
+  grid-rows="1"
+  mousewheel-force-to-axis="true"
+  navigation="true"
+  pagination-type="fraction"
+  scrollbar="false"
+  slides-per-view="auto"
+  space-between="0"
+>
+  <swiper-slide class="bg-blue-50 p-12 border-1 min-w-full">A</swiper-slide>
+  <swiper-slide class="bg-blue-100 p-12 border-1 min-w-full">B</swiper-slide>
+  <swiper-slide class="bg-blue-200 p-12 border-1 min-w-full">C</swiper-slide>
+  <swiper-slide class="bg-blue-300 p-12 border-1 min-w-full">D</swiper-slide>
+  <swiper-slide class="bg-blue-400 p-12 border-1 min-w-full">A</swiper-slide>
+</swiper-container>