spoko-design-system 0.2.49 → 0.2.51

package/src/components/ProductDetailsList.vue

@@ -1,65 +1,65 @@
-<script setup lang="ts">
-import { PropType } from "vue";
-import ProductDetailName from "./ProductDetailName.vue";
-
-interface TableItem {
-  id: string,
-  name: string 
-  value: unknown
-}
-
-const props = defineProps({
-  items: {type: Array as PropType<TableItem[]>, default: () => []},
-  caption: { type: String, default: null }
-})
-
-</script>
-
-<template>
-  <table class="details table-auto text-left bg-white">
-    <caption v-if="!!$slots.caption || caption">
-      <slot name="caption">{{ caption }}</slot>
-    </caption>
-    <colgroup>
-      <col>
-      <col>
-    </colgroup>
-    <tbody>
-      <tr v-for="row, index in props.items" :key="index">
-        <ProductDetailName as="th" :text="row.name" />
-        <slot :name="row.id">
-          <td>{{ row.value }}</td>
-        </slot>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<style  scoped>
-  .details {
-    @apply border-none shadow-none w-full md:w-auto
-    box-shadow: none;
-
-    col {
-      @apply w-1/2 md:w-auto;
-
-    }
-
-    tr {
-      @apply border-none;
-    }
-
-    tr,
-    th {
-      @apply leading-none text-3.5 py-2 border-none xl:(py-4) 3xl:(text-4);
-    }
-
-    th {
-      @apply px-0;
-    }
-
-    td {
-      @apply relative;
-    }
-  }
-</style>
+<script setup lang="ts">
+import { PropType } from "vue";
+import ProductDetailName from "./ProductDetailName.vue";
+
+interface TableItem {
+  id: string,
+  name: string 
+  value: unknown
+}
+
+const props = defineProps({
+  items: {type: Array as PropType<TableItem[]>, default: () => []},
+  caption: { type: String, default: null }
+})
+
+</script>
+
+<template>
+  <table class="details table-auto text-left bg-white">
+    <caption v-if="!!$slots.caption || caption">
+      <slot name="caption">{{ caption }}</slot>
+    </caption>
+    <colgroup>
+      <col>
+      <col>
+    </colgroup>
+    <tbody>
+      <tr v-for="row, index in props.items" :key="index">
+        <ProductDetailName as="th" :text="row.name" />
+        <slot :name="row.id">
+          <td>{{ row.value }}</td>
+        </slot>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style  scoped>
+  .details {
+    @apply border-none shadow-none w-full md:w-auto
+    box-shadow: none;
+
+    col {
+      @apply w-1/2 md:w-auto;
+
+    }
+
+    tr {
+      @apply border-none;
+    }
+
+    tr,
+    th {
+      @apply leading-none text-3.5 py-2 border-none xl:(py-4) 3xl:(text-4);
+    }
+
+    th {
+      @apply px-0;
+    }
+
+    td {
+      @apply relative;
+    }
+  }
+</style>

package/src/components/ProductTile.astro

@@ -1,48 +1,48 @@
----
-const { productObject, locale, index } = Astro.props;
-import Image from "./Image.astro"
-import ProductNumber from "./Product/ProductNumber.astro"
-
----
-
-{ productObject && 
-  (
-
-    <!-- product image -->
-    <div class="img--4/3 img--small">
-      { productObject.photo !== null ?
-        <Image
-          imageObject={
-            {
-              src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
-              alt: 'Image Alt',
-              height: '180',
-              width: '240',
-              class: 'img--overlay object-cover'
-            }
-          }
-        />
-        :
-        <img src="/1x1.png" class="bg-gray-100/70" alt={productObject.name} />
-      }
-    </div>
-      
-    <!-- product deails -->
-    <div class="sm:pl-4 flex flex-col" >
-      <a class="font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em] before:(content-empty absolute left-0 right-4 h-full top-0)"
-        href={productObject.url} itemprop="url"
-        title={productObject.number}
-      >
-        { productObject.name }
-      </a>
-
-      <ProductNumber productNumber={productObject.number} copyDisabled={false}  />
-      
-      { index !== null && 
-        ( <meta itemprop="position" content={String(index)} />
-        <meta itemprop="name" content={productObject.name} /> )
-      }
-    </div>
-
-)}
-
+---
+const { productObject, locale, index } = Astro.props;
+import Image from "./Image.astro"
+import ProductNumber from "./Product/ProductNumber.astro"
+import { t } from "i18next";
+---
+
+{ productObject && 
+  (
+
+    <!-- product image -->
+    <div class="img--4/3 img--small">
+      { productObject.photo !== null ?
+        <Image
+          imageObject={
+            {
+              src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+              alt: 'Image Alt',
+              height: '180',
+              width: '240',
+              class: 'img--overlay object-cover'
+            }
+          }
+        />
+        :
+        <img src="/1x1.png" class="bg-gray-100/70" alt={productObject.name} />
+      }
+    </div>
+      
+    <!-- product deails -->
+    <div class="sm:pl-4 flex flex-col" >
+      <a class="font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em] before:(content-empty absolute left-0 right-4 h-full top-0)"
+        href={productObject.url} itemprop="url"
+        title={productObject.number}
+      >
+        { productObject.name }
+      </a>
+
+      <ProductNumber productNumber={productObject.number} copyDisabled={false} buttonTexts={{ copy: t('copy'), copied: t('copied') }}  />
+      
+      { index !== null && 
+        ( <meta itemprop="position" content={String(index)} />
+        <meta itemprop="name" content={productObject.name} /> )
+      }
+    </div>
+
+)}
+

package/src/components/Quote.vue

@@ -1,23 +1,23 @@
-<script setup lang="ts">
-import { PropType } from 'vue';
-
-const props = defineProps({
-  as: {
-    type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
-    default: 'div',
-    required: false,
-  },
-  text: {
-    type: String,
-    default: '',
-    required: false,
-  }
-})
-</script>
-
-<template>
-  <component :is="props.as"
-    class="px-8 sm:px-8 mx-4 sm:mx-6 lg:max-w-4xl drop-shadow-primary text-2xl md:text-4xl lg:text-4.5xl relative font-light after:left-0 after:content-empty after:rounded-3xl after:top-0 after:absolute after:h-full after:border-solid after:border-[var(--primary)] after:border-l-3 after:z-0">
-      <slot>{{ props.text }}</slot>
-    </component>
-</template>
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+const props = defineProps({
+  as: {
+    type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
+    default: 'div',
+    required: false,
+  },
+  text: {
+    type: String,
+    default: '',
+    required: false,
+  }
+})
+</script>
+
+<template>
+  <component :is="props.as"
+    class="px-8 sm:px-8 mx-4 sm:mx-6 lg:max-w-4xl drop-shadow-primary text-2xl md:text-4xl lg:text-4.5xl relative font-light after:left-0 after:content-empty after:rounded-3xl after:top-0 after:absolute after:h-full after:border-solid after:border-[var(--primary)] after:border-l-3 after:z-0">
+      <slot>{{ props.text }}</slot>
+    </component>
+</template>

package/src/components/ReloadPrompt.astro

@@ -1,51 +1,51 @@
-<script src="./../pwa.ts"></script>
-<div
-    id="pwa-toast"
-    role="alert"
-    aria-labelledby="toast-message"
->
-    <div class="message">
-      <span id="toast-message"></span>
-    </div>
-    <button id="pwa-refresh">
-      Reload
-    </button>
-    <button id="pwa-close">
-      Close
-    </button>
-</div>
-
-<style>
-#pwa-toast {
-  visibility: hidden;
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  margin: 16px;
-  padding: 12px;
-  border: 1px solid #8885;
-  border-radius: 4px;
-  z-index: 1;
-  text-align: left;
-  box-shadow: 3px 4px 5px 0 #8885;
-}
-#pwa-toast .message {
-  margin-bottom: 8px;
-}
-#pwa-toast button {
-  border: 1px solid #8885;
-  outline: none;
-  margin-right: 5px;
-  border-radius: 2px;
-  padding: 3px 10px;
-}
-#pwa-toast.show {
-  visibility: visible;
-}
-button#pwa-refresh {
-  display: none;
-}
-#pwa-toast.show.refresh button#pwa-refresh {
-  display: inline-block;
-}
+<script src="./../pwa.ts"></script>
+<div
+    id="pwa-toast"
+    role="alert"
+    aria-labelledby="toast-message"
+>
+    <div class="message">
+      <span id="toast-message"></span>
+    </div>
+    <button id="pwa-refresh">
+      Reload
+    </button>
+    <button id="pwa-close">
+      Close
+    </button>
+</div>
+
+<style>
+#pwa-toast {
+  visibility: hidden;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  margin: 16px;
+  padding: 12px;
+  border: 1px solid #8885;
+  border-radius: 4px;
+  z-index: 1;
+  text-align: left;
+  box-shadow: 3px 4px 5px 0 #8885;
+}
+#pwa-toast .message {
+  margin-bottom: 8px;
+}
+#pwa-toast button {
+  border: 1px solid #8885;
+  outline: none;
+  margin-right: 5px;
+  border-radius: 2px;
+  padding: 3px 10px;
+}
+#pwa-toast.show {
+  visibility: visible;
+}
+button#pwa-refresh {
+  display: none;
+}
+#pwa-toast.show.refresh button#pwa-refresh {
+  display: inline-block;
+}
 </style>

package/src/components/SlimBanner.vue

@@ -1,73 +1,73 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const props = defineProps({
-  showCloseButton: {
-    type: Boolean,
-    default: true,
-    required: false,
-  },
-})
-const isShow = ref(true)
-const toggleVisibility = () => {
-  isShow.value = !isShow.value
-}
-</script>
-
-<template>
-  <div v-if="isShow" data-pagefind-ignore class="slimbanner">
-    <span
-      class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]" />
-    <span class="leading-none "><span
-        data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit " />
-      <a href="https://polo.blue/support-ukraine/" target="_blank" rel="noopener" title="Support Ukraine"
-        class="underline underline-offset-2 hover:text-blue-wrc">this page</a>.
-    </span>
-
-    <button class="btn-close text-white" v-if="props.showCloseButton" @click="toggleVisibility()"
-      aria-label="Toggle">
-      <span class="close close-dark"></span>
-    </button>
-  </div>
-  <div v-else data-pagefind-ignore
-    class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative bg-black drop-shadow-md z-2 ">
-    <div class="tracking-widest leading-none">
-      <span data-text="RUSSIA IS A" /> <span class="underline decoration-red-600 decoration-1 underline-offset-3"
-        data-text="TERRORIST" /> <span data-text="STATE" />
-    </div>
-    <button class="btn-close" v-if="props.showCloseButton" @click="toggleVisibility()"
-      aria-label="Toggle">
-      <span class="close close-light"></span>
-    </button>
-  </div>
-</template>
-
-<style>
-.btn-close {
- @apply ml-3 relative w-5 h-5;
-}
-
-.close {
-  @apply absolute top-0 left-0 opacity-50 transition-opacity duration-200;
-}
-
-.btn-close:hover .close {
-  @apply opacity-100;
-}
-
-.close:before,
-.close:after {
-  position: absolute;
-  left: 0.5rem;
-  content: ' ';
-  height: 1.25rem;
-  width: 2px;
-}
-
-.close:before {
-  transform: rotate(45deg);
-}
-
-.close:after {
-  transform: rotate(-45deg);
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  showCloseButton: {
+    type: Boolean,
+    default: true,
+    required: false,
+  },
+})
+const isShow = ref(true)
+const toggleVisibility = () => {
+  isShow.value = !isShow.value
+}
+</script>
+
+<template>
+  <div v-if="isShow" data-pagefind-ignore class="slimbanner">
+    <span
+      class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]" />
+    <span class="leading-none "><span
+        data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit " />
+      <a href="https://polo.blue/support-ukraine/" target="_blank" rel="noopener" title="Support Ukraine"
+        class="underline underline-offset-2 hover:text-blue-wrc">this page</a>.
+    </span>
+
+    <button class="btn-close text-white" v-if="props.showCloseButton" @click="toggleVisibility()"
+      aria-label="Toggle">
+      <span class="close close-dark"></span>
+    </button>
+  </div>
+  <div v-else data-pagefind-ignore
+    class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative bg-black drop-shadow-md z-2 ">
+    <div class="tracking-widest leading-none">
+      <span data-text="RUSSIA IS A" /> <span class="underline decoration-red-600 decoration-1 underline-offset-3"
+        data-text="TERRORIST" /> <span data-text="STATE" />
+    </div>
+    <button class="btn-close" v-if="props.showCloseButton" @click="toggleVisibility()"
+      aria-label="Toggle">
+      <span class="close close-light"></span>
+    </button>
+  </div>
+</template>
+
+<style>
+.btn-close {
+ @apply ml-3 relative w-5 h-5;
+}
+
+.close {
+  @apply absolute top-0 left-0 opacity-50 transition-opacity duration-200;
+}
+
+.btn-close:hover .close {
+  @apply opacity-100;
+}
+
+.close:before,
+.close:after {
+  position: absolute;
+  left: 0.5rem;
+  content: ' ';
+  height: 1.25rem;
+  width: 2px;
+}
+
+.close:before {
+  transform: rotate(45deg);
+}
+
+.close:after {
+  transform: rotate(-45deg);
 }</style>

package/src/components/Table.vue

@@ -1,32 +1,32 @@
-<script setup lang="ts">
-const props = defineProps<{
-  data: string;
-}>();
-
-const theads = Object.keys(Object.values(props.data)[0])
-
-const capitalizeFirstLetter = (text: String) => {
-  return text[0].toUpperCase() + text.slice(1)
-}
-
-</script>
-
-<template>
-  <table class="table-auto text-left border bg-white shadow-md">
-    <thead class="bg-gray-500 text-white">
-      <tr class="border">
-        <th class="px-4 py-2 font-semibold" v-for="thead, index in theads" :key="index">
-          {{ capitalizeFirstLetter(thead) }}
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr class="border" v-for="row in props.data" :key="row">
-        <td class="px-4 py-2" v-for="key in Object.keys(row)" :key="key">
-          {{ row[key] }}
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
+<script setup lang="ts">
+const props = defineProps<{
+  data: string;
+}>();
+
+const theads = Object.keys(Object.values(props.data)[0])
+
+const capitalizeFirstLetter = (text: String) => {
+  return text[0].toUpperCase() + text.slice(1)
+}
+
+</script>
+
+<template>
+  <table class="table-auto text-left border bg-white shadow-md">
+    <thead class="bg-gray-500 text-white">
+      <tr class="border">
+        <th class="px-4 py-2 font-semibold" v-for="thead, index in theads" :key="index">
+          {{ capitalizeFirstLetter(thead) }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="border" v-for="row in props.data" :key="row">
+        <td class="px-4 py-2" v-for="key in Object.keys(row)" :key="key">
+          {{ row[key] }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+

package/src/components/TableOfContents.astro

@@ -1,15 +1,15 @@
----
-const { headers } = Astro.props;
----
-
-<ul class="flex flex-col gap-4 mt-24">
-  {
-    headers.map(({ slug, text }) => {
-      return (
-        <li class="text-slate-400 hover:text-slate-800 hover:text-slate-900">
-          #<a href={`#${slug}`}>{text}</a>
-        </li>
-      );
-    })
-  }
-</ul>
+---
+const { headers } = Astro.props;
+---
+
+<ul class="flex flex-col gap-4 mt-24">
+  {
+    headers.map(({ slug, text }) => {
+      return (
+        <li class="text-slate-400 hover:text-slate-800 hover:text-slate-900">
+          #<a href={`#${slug}`}>{text}</a>
+        </li>
+      );
+    })
+  }
+</ul>

package/src/components/Translations.vue

@@ -1,23 +1,23 @@
-
-<script setup lang="ts">
-import { PropType } from 'vue';
-
-const props = defineProps({
-  lang: {
-    type: String
-  },
-  translations: {
-    type: Object as PropType<{ uri: string | null, title: string | null, name: string | null } | null>
-  }
-});
-</script>
-
-<template>
-  <div data-pagefind-ignore v-if="props.translations !== null && props.translations.uri">
-    <a aria-label="Change language" type="button" :href="translations.uri"
-      :title="translations.name ? translations.name : translations.title"
-      :class="[lang === 'en' ? 'i-circle-flags:en' : '', lang === 'pl' ? 'i-circle-flags:pl' : '', 'w-5 hover:rotate--3']" />
-  </div>
-</template>
-
-
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+const props = defineProps({
+  lang: {
+    type: String
+  },
+  translations: {
+    type: Object as PropType<{ uri: string | null, title: string | null, name: string | null } | null>
+  }
+});
+</script>
+
+<template>
+  <div data-pagefind-ignore v-if="props.translations !== null && props.translations.uri">
+    <a aria-label="Change language" type="button" :href="translations.uri"
+      :title="translations.name ? translations.name : translations.title"
+      :class="[lang === 'en' ? 'i-circle-flags:en' : '', lang === 'pl' ? 'i-circle-flags:pl' : '', 'w-5 hover:rotate--3']" />
+  </div>
+</template>
+
+