spoko-design-system 0.9.5 → 1.0.0

package/src/components/Post/PostCategories.vue

@@ -1,31 +1,31 @@
-<script setup lang="ts">
-interface Category {
-  id: number;
-  name: string;
-  slug: string;
-  description: string;
-  link: string;
-}
-
-interface Props {
-  category: Category;
-  active?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  active: false
-});
-</script>
-
-<template>
-  <a
-    :href="props.category.link"
-    class="category-link-base"
-    :class="{ 'category-link-active': props.active }"
-    :title="props.category.description || props.category.name"
-  >
-    {{ props.category.name }}
-  </a>
-</template>
-
+<script setup lang="ts">
+interface Category {
+  id: number;
+  name: string;
+  slug: string;
+  description: string;
+  link: string;
+}
+
+interface Props {
+  category: Category;
+  active?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  active: false
+});
+</script>
+
+<template>
+  <a
+    :href="props.category.link"
+    class="category-link-base"
+    :class="{ 'category-link-active': props.active }"
+    :title="props.category.description || props.category.name"
+  >
+    {{ props.category.name }}
+  </a>
+</template>
+
 <!-- No <style> section - all styles are now UnoCSS shortcuts -->

package/src/components/PostHeader.astro

@@ -1,103 +1,103 @@
----
-interface Props {
-  title: string;
-  image: string;
-  date?: string | null;
-  lang: string;
-
-  author: {
-    firstName: string;
-    name: string;
-  } | null;
-
-  categories: {
-    name: string;
-    uri: string;
-  }[];
-}
-
-const { image, title, categories, date, author, lang } = Astro.props;
-import PostCategories from "./Post/PostCategories.astro";
-import Date from "./Date.astro";
----
-
-<header
-  class="post-header pt-11 w-full justify-center text-white z-2 bg-blue-darkest"
->
-  <div class="heading flex flex-wrap">
-    <div
-      class="w-full sm:max-w-[640px] md:max-w-3xl lg:max-w-5xl xl:max-w-7xl 2xl:max-w-[1536px] px-4 py-5 flex flex-col flex-wrap"
-    >
-      <h1
-        class="font-textbold text-2xl mb-1 sm:text-3xl md:(text-4xl mb-3) xl:text-6xl mt-1 order-2 line-clamp-3 pb-1"
-      >
-        {title}
-      </h1>
-      <PostCategories categories={categories} lang={lang} />
-      <div class="order-3 flex items-center text-gray-1 00">
-        {
-          author && (
-            <span class="text-sm" title={author.firstName} data-pagefind-ignore>
-              {author.name}
-            </span>
-          )
-        }
-        {author && date && <span class="mx-1">-</span>}
-        {date && <Date date={date} />}
-      </div>
-    </div>
-  </div>
-  <div class="featured-image">
-    <img src={image} alt={title} />
-  </div>
-</header>
-
-<style >
-  .post-header {
-    @apply flex relative items-center;
-    min-height: 19vw;
-  }
-
-  .heading {
-    @apply text-white relative flex items-center justify-center mt-auto w-full pt-11 z-[2];
-  }
-
-  .featured-image {
-    @apply absolute top-0 bottom-0 left-0 right-0 overflow-hidden w-full bg-gray-100 z-1;
-
-    &:before,
-    &:after {
-      @apply content-empty top-0 bottom-0 left-0 right-0 absolute;
-    }
-
-    &:before {
-      z-index: 5;
-      background: linear-gradient(
-        0deg,
-        rgba(0, 0, 0, 0.95),
-        transparent 30%,
-        transparent 70%,
-        rgba(0, 0, 0, 0.95)
-      );
-      opacity: 0.5;
-    }
-
-    &:after {
-      background: radial-gradient(circle at 50% 85%, #00437a 0, #001e50 100%);
-      opacity: 0.8;
-    }
-
-    img {
-      @apply w-full h-full object-cover block max-w-full;
-    }
-  }
-</style>
-
-<style is:global>
-  .icon {
-    @apply text-brand-secondary mr-2;
-    width: 1em;
-    height: 1em;
-    fill: currentcolor;
-  }
-</style>
+---
+interface Props {
+  title: string;
+  image: string;
+  date?: string | null;
+  lang: string;
+
+  author: {
+    firstName: string;
+    name: string;
+  } | null;
+
+  categories: {
+    name: string;
+    uri: string;
+  }[];
+}
+
+const { image, title, categories, date, author, lang } = Astro.props;
+import PostCategories from "./Post/PostCategories.astro";
+import Date from "./Date.astro";
+---
+
+<header
+  class="post-header pt-11 w-full justify-center text-white z-2 bg-blue-darkest"
+>
+  <div class="heading flex flex-wrap">
+    <div
+      class="w-full sm:max-w-[640px] md:max-w-3xl lg:max-w-5xl xl:max-w-7xl 2xl:max-w-[1536px] px-4 py-5 flex flex-col flex-wrap"
+    >
+      <h1
+        class="font-textbold text-2xl mb-1 sm:text-3xl md:(text-4xl mb-3) xl:text-6xl mt-1 order-2 line-clamp-3 pb-1"
+      >
+        {title}
+      </h1>
+      <PostCategories categories={categories} lang={lang} />
+      <div class="order-3 flex items-center text-gray-1 00">
+        {
+          author && (
+            <span class="text-sm" title={author.firstName} data-pagefind-ignore>
+              {author.name}
+            </span>
+          )
+        }
+        {author && date && <span class="mx-1">-</span>}
+        {date && <Date date={date} />}
+      </div>
+    </div>
+  </div>
+  <div class="featured-image">
+    <img src={image} alt={title} />
+  </div>
+</header>
+
+<style >
+  .post-header {
+    @apply flex relative items-center;
+    min-height: 19vw;
+  }
+
+  .heading {
+    @apply text-white relative flex items-center justify-center mt-auto w-full pt-11 z-[2];
+  }
+
+  .featured-image {
+    @apply absolute top-0 bottom-0 left-0 right-0 overflow-hidden w-full bg-gray-100 z-1;
+
+    &:before,
+    &:after {
+      @apply content-empty top-0 bottom-0 left-0 right-0 absolute;
+    }
+
+    &:before {
+      z-index: 5;
+      background: linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.95),
+        transparent 30%,
+        transparent 70%,
+        rgba(0, 0, 0, 0.95)
+      );
+      opacity: 0.5;
+    }
+
+    &:after {
+      background: radial-gradient(circle at 50% 85%, #00437a 0, #001e50 100%);
+      opacity: 0.8;
+    }
+
+    img {
+      @apply w-full h-full object-cover block max-w-full;
+    }
+  }
+</style>
+
+<style is:global>
+  .icon {
+    @apply text-brand-secondary mr-2;
+    width: 1em;
+    height: 1em;
+    fill: currentcolor;
+  }
+</style>

package/src/components/PrCode.vue

@@ -1,142 +1,142 @@
-<script lang="ts" setup>
-/*
-     VAG group (VW/Audi/Skoda/Seat/Porsche/Bentley/Lamborghini/Ducati/Cupra/Scania/MAN) manufacturer PR-Code
-*/
-
-import type { PropType } from 'vue'
-
-const props = defineProps({
-    prcode: {
-        type: String,
-        default: null,
-        required: true,
-    },
-    isPdp: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
-})
-</script>
-
-<template>
-    <span data-pagefind-filter="PR-Code" class="btn-prcode "
-        :class="`btn-prcode--${props.prcode} ${props.isPdp ? ' btn-prcode--pdp' : ''}`">
-        {{ props.prcode }}
-    </span>
-</template>
-
-<style>
-.btn-prcode--pdp {
-  @apply mb-1;
-}
-
-.btn-prcode::before {
-  @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-accent-light text-center z-50;
-  display: none;
-  position: absolute;
-  top: -10px;
-  transform: translateY(-50%) translateX(-50%);
-  left: 50%;
-}
-
-.btn-prcode:hover::before {
-  display: block;
-}
-
-.btn-prcode--2JK {
-  color: #f3881d;
-}
-
-.btn-prcode--2JK::before {
-  content: 'CROSS';
-}
-
-.btn-prcode--1LR::before,
-.btn-prcode--1ZG::before,
-.btn-prcode--1ZJ::before {
-  content: '⌀ 256 mm';
-}
-
-.btn-prcode--1KD::before,
-.btn-prcode--1ZP::before,
-.btn-prcode--1ZR::before {
-  content: '⌀ 310 mm';
-}
-
-.btn-prcode--1ZD::before,
-.btn-prcode--1ZC::before,
-.btn-prcode--1LN::before {
-  content: '⌀ 288 mm; LUCAS';
-}
-
-.btn-prcode--2JZ {
-  @apply text-accent-light;
-}
-
-.btn-prcode--2JZ::before {
-  content: 'Bluemotion';
-}
-
-.btn-prcode--7L6 {
-  @apply text-accent-light;
-}
-
-.btn-prcode--7L6::before {
-  content: 'Bluemotion (CFWA + start-stop)';
-}
-
-.btn-prcode--1KK::before,
-.btn-prcode--1KT::before,
-.btn-prcode--1KV::before,
-.btn-prcode--1LV::before,
-.btn-prcode--2EJ::before {
-  content: '⌀ 230 mm';
-}
-
-.btn-prcode--2JE {
-  @apply text-accent-dark;
-}
-
-.btn-prcode--2JE::before {
-  content: 'BlueGT';
-}
-
-.btn-prcode--2JP::before {
-  content: 'R-Line';
-}
-
-.btn-prcode--E5M,
-.btn-prcode--1KD,
-.btn-prcode--1ZP,
-.btn-prcode--2JQ,
-.btn-prcode--TA2 {
-  color: blue;
-}
-
-.btn-prcode--E5M::before,
-.btn-prcode--1KD::before,
-.btn-prcode--1ZP::before,
-.btn-prcode--2JQ::before,
-.btn-prcode--TA2::before {
-  content: 'R WRC Street';
-}
-
-.btn-prcode--1KV,
-.btn-prcode--1ZD,
-.btn-prcode--1ZR,
-.btn-prcode--0NH,
-.btn-prcode--2JD {
-  color: red;
-}
-
-.btn-prcode--1KV::before,
-.btn-prcode--1ZD::before,
-.btn-prcode--1ZR::before,
-.btn-prcode--0NH::before,
-.btn-prcode--2JD::before {
-  content: 'GTI';
-}
-
-
+<script lang="ts" setup>
+/*
+     VAG group (VW/Audi/Skoda/Seat/Porsche/Bentley/Lamborghini/Ducati/Cupra/Scania/MAN) manufacturer PR-Code
+*/
+
+import type { PropType } from 'vue'
+
+const props = defineProps({
+    prcode: {
+        type: String,
+        default: null,
+        required: true,
+    },
+    isPdp: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+})
+</script>
+
+<template>
+    <span data-pagefind-filter="PR-Code" class="btn-prcode "
+        :class="`btn-prcode--${props.prcode} ${props.isPdp ? ' btn-prcode--pdp' : ''}`">
+        {{ props.prcode }}
+    </span>
+</template>
+
+<style>
+.btn-prcode--pdp {
+  @apply mb-1;
+}
+
+.btn-prcode::before {
+  @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-accent-light text-center z-50;
+  display: none;
+  position: absolute;
+  top: -10px;
+  transform: translateY(-50%) translateX(-50%);
+  left: 50%;
+}
+
+.btn-prcode:hover::before {
+  display: block;
+}
+
+.btn-prcode--2JK {
+  color: #f3881d;
+}
+
+.btn-prcode--2JK::before {
+  content: 'CROSS';
+}
+
+.btn-prcode--1LR::before,
+.btn-prcode--1ZG::before,
+.btn-prcode--1ZJ::before {
+  content: '⌀ 256 mm';
+}
+
+.btn-prcode--1KD::before,
+.btn-prcode--1ZP::before,
+.btn-prcode--1ZR::before {
+  content: '⌀ 310 mm';
+}
+
+.btn-prcode--1ZD::before,
+.btn-prcode--1ZC::before,
+.btn-prcode--1LN::before {
+  content: '⌀ 288 mm; LUCAS';
+}
+
+.btn-prcode--2JZ {
+  @apply text-accent-light;
+}
+
+.btn-prcode--2JZ::before {
+  content: 'Bluemotion';
+}
+
+.btn-prcode--7L6 {
+  @apply text-accent-light;
+}
+
+.btn-prcode--7L6::before {
+  content: 'Bluemotion (CFWA + start-stop)';
+}
+
+.btn-prcode--1KK::before,
+.btn-prcode--1KT::before,
+.btn-prcode--1KV::before,
+.btn-prcode--1LV::before,
+.btn-prcode--2EJ::before {
+  content: '⌀ 230 mm';
+}
+
+.btn-prcode--2JE {
+  @apply text-accent-dark;
+}
+
+.btn-prcode--2JE::before {
+  content: 'BlueGT';
+}
+
+.btn-prcode--2JP::before {
+  content: 'R-Line';
+}
+
+.btn-prcode--E5M,
+.btn-prcode--1KD,
+.btn-prcode--1ZP,
+.btn-prcode--2JQ,
+.btn-prcode--TA2 {
+  color: blue;
+}
+
+.btn-prcode--E5M::before,
+.btn-prcode--1KD::before,
+.btn-prcode--1ZP::before,
+.btn-prcode--2JQ::before,
+.btn-prcode--TA2::before {
+  content: 'R WRC Street';
+}
+
+.btn-prcode--1KV,
+.btn-prcode--1ZD,
+.btn-prcode--1ZR,
+.btn-prcode--0NH,
+.btn-prcode--2JD {
+  color: red;
+}
+
+.btn-prcode--1KV::before,
+.btn-prcode--1ZD::before,
+.btn-prcode--1ZR::before,
+.btn-prcode--0NH::before,
+.btn-prcode--2JD::before {
+  content: 'GTI';
+}
+
+
 </style>

package/src/components/Product/ProductButton.vue

@@ -1,18 +1,18 @@
-<script setup lang="ts">
-const props = defineProps({
-  shadow: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-})
-</script>
-
-<template>
-  <button
-    class="product-button"
-    :class="props.shadow ? 'drop-shadow hover:(drop-shadow-md)' : ''"
-  >
-    <slot />
-  </button>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  shadow: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+})
+</script>
+
+<template>
+  <button
+    class="product-button"
+    :class="props.shadow ? 'drop-shadow hover:(drop-shadow-md)' : ''"
+  >
+    <slot />
+  </button>
+</template>

package/src/components/Product/ProductCarousel.astro

@@ -1,36 +1,36 @@
----
-import ProductLink from "./ProductLink.astro";
-
-// Get the product directly from the prop on render
-const { locale, class: className, products, isShopProduct = false, ...rest } = Astro.props;
-
----
-
-
-{
-    products && products.length && (
-         <swiper-container slides-per-view="auto" space-between="0" class="flex"
-            itemscope itemtype="https://schema.org/ItemList">
-            {
-                products.map((product, index) => (
-                    <swiper-slide class="product-carousel" 
-                      itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" >
-                        <ProductLink productObject={product} locale={locale} index={index+1} bigTile loading="eager" isShopProduct={isShopProduct} />
-                        <div class="swiper-lazy-preloader"></div>
-                    </swiper-slide>
-                ))
-            }
-            </swiper-container>
-    )
-  }
-  
-  <style>
-    .similar-section {
-      @apply relative z-20;
-
-      &:hover {
-        content-visibility: visible;
-      }
-    }
-    
+---
+import ProductLink from "./ProductLink.astro";
+
+// Get the product directly from the prop on render
+const { locale, class: className, products, isShopProduct = false, ...rest } = Astro.props;
+
+---
+
+
+{
+    products && products.length && (
+         <swiper-container slides-per-view="auto" space-between="0" class="flex"
+            itemscope itemtype="https://schema.org/ItemList">
+            {
+                products.map((product, index) => (
+                    <swiper-slide class="product-carousel" 
+                      itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" >
+                        <ProductLink productObject={product} locale={locale} index={index+1} bigTile loading="eager" isShopProduct={isShopProduct} />
+                        <div class="swiper-lazy-preloader"></div>
+                    </swiper-slide>
+                ))
+            }
+            </swiper-container>
+    )
+  }
+  
+  <style>
+    .similar-section {
+      @apply relative z-20;
+
+      &:hover {
+        content-visibility: visible;
+      }
+    }
+    
   </style>

package/src/components/Product/ProductColors.vue

@@ -3,7 +3,7 @@ import type { PropType } from 'vue'
 
 const props = defineProps({
   colors: {
-    type: Object as PropType<{id: number, slug: string, name: string}[]>,
+    type: Array as PropType<{id: number, slug: string, name: string}[]>,
     default: null,
     required: true,
   },