spoko-design-system 0.7.3 → 0.7.4

package/package.json

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

package/src/components/ProductDetailsList.vue

@@ -3,16 +3,31 @@ import { PropType } from "vue";
 import ProductDetailName from "./ProductDetailName.vue";
 
 interface TableItem {
-  id: string,
-  name: string 
-  value: unknown
+  id: string;
+  name: string;
+  value: unknown;
+  translated?: boolean;
+  icon?: boolean;
 }
 
 const props = defineProps({
-  items: {type: Array as PropType<TableItem[]>, default: () => []},
+  items: { type: Array as PropType<TableItem[]>, default: () => [] },
   caption: { type: String, default: null }
-})
+});
 
+const isLink = (id: string) => {
+  return ['blog', 'youtube', 'vimeo'].includes(id);
+};
+
+
+const getHeaderText = (row: TableItem) => {
+  if (row.id === 'blog') {
+    return row.id.charAt(0).toUpperCase() + row.id.slice(1); 
+  }
+  
+
+  return row.name;
+};
 </script>
 
 <template>
@@ -26,8 +41,15 @@ const props = defineProps({
     </colgroup>
     <tbody>
       <tr v-for="row, index in props.items" :key="index">
-        <ProductDetailName as="th" :text="row.name" />
-        <slot :name="row.id">
+        <ProductDetailName as="th" :text="getHeaderText(row)" />
+        
+        <td v-if="isLink(row.id)" class="link-cell">
+          <a :href="row.value as string" target="_blank" rel="noopener noreferrer" class="link-primary">
+            {{ row.name }} <!-- row.name zawiera tekst anchora dla linków -->
+          </a>
+        </td>
+        
+        <slot v-else :name="row.id">
           <td>{{ row.value }}</td>
         </slot>
       </tr>
@@ -36,30 +58,33 @@ const props = defineProps({
 </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;
+.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 {
+    @apply border-none;
+  }
 
-    tr,
-    th {
-      @apply leading-none text-3.5 py-2 border-none xl:(py-4) 3xl:(text-4);
-    }
+  tr,
+  th {
+    @apply leading-none text-3.5 py-2 border-none xl:(py-4) 3xl:(text-4);
+  }
 
-    th {
-      @apply px-0;
-    }
+  th {
+    @apply px-0;
+  }
 
-    td {
-      @apply relative;
-    }
+  td {
+    @apply relative;
   }
-</style>
+}
+
+.link-primary {
+  @apply text-blue-600 hover:text-blue-800 hover:underline;
+}
+</style>