spoko-design-system 1.1.1 → 1.1.3

package/src/components/Jumbotron/variants/Post.astro

@@ -1,64 +1,68 @@
----
-// variants/Post.astro
-import type { Author, Category } from '../types';
-import PostCategories from "../../Post/PostCategories.astro";
-import Date from "../../Date.astro";
-
-interface Props {
-  title?: string;
-  image?: string;
-  author?: Author;
-  date?: string;
-  categories?: Category[];
-  hasMetadata: boolean;
-  hasCategories: boolean;
-  lang?: string;
-}
-
-const {
-  title = "",
-  image,
-  author,
-  date,
-  categories = [],
-  hasMetadata,
-  hasCategories,
-  lang = 'en'
-} = Astro.props;
----
-
-<header class="post-header pt-11 w-full justify-center text-white z-2 bg-blue-darkest relative">
-  <div class="heading text-white relative flex items-center justify-center mt-auto w-full z-[2]">
-    <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-headlight 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>
-      
-      {hasCategories && (
-        <div class="order-1">
-          <PostCategories categories={categories} lang={lang} />
-        </div>
-      )}
-
-      {hasMetadata && (
-        <div class="order-3 flex items-center text-gray-100">
-          {author && (
-            <span class="text-sm" title={author.firstName}>
-              {author.name}
-            </span>
-          )}
-          {author && date && <span class="mx-1">-</span>}
-          {date && <Date date={date} />}
-        </div>
-      )}
-    </div>
-  </div>
-
-  <div class="featured-image-overlay">
-    <img 
-      src={image} 
-      alt={title} 
-      class="w-full h-full object-cover block max-w-full" 
-    />
-  </div>
-</header>
+---
+// variants/Post.astro
+import type { Author, Category } from '../types';
+import PostCategories from '../../Post/PostCategories.astro';
+import Date from '../../Date.astro';
+
+interface Props {
+  title?: string;
+  image?: string;
+  author?: Author;
+  date?: string;
+  categories?: Category[];
+  hasMetadata: boolean;
+  hasCategories: boolean;
+  lang?: string;
+}
+
+const {
+  title = '',
+  image,
+  author,
+  date,
+  categories = [],
+  hasMetadata,
+  hasCategories,
+  lang = 'en',
+} = Astro.props;
+---
+
+<header class="post-header pt-11 w-full justify-center text-white z-2 bg-blue-darkest relative">
+  <div class="heading text-white relative flex items-center justify-center mt-auto w-full z-[2]">
+    <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-headlight 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>
+
+      {
+        hasCategories && (
+          <div class="order-1">
+            <PostCategories categories={categories} lang={lang} />
+          </div>
+        )
+      }
+
+      {
+        hasMetadata && (
+          <div class="order-3 flex items-center text-gray-100">
+            {author && (
+              <span class="text-sm" title={author.firstName}>
+                {author.name}
+              </span>
+            )}
+            {author && date && <span class="mx-1">-</span>}
+            {date && <Date date={date} />}
+          </div>
+        )
+      }
+    </div>
+  </div>
+
+  <div class="featured-image-overlay">
+    <img src={image} alt={title} class="w-full h-full object-cover block max-w-full" />
+  </div>
+</header>

package/src/components/Jumbotron/variants/PostSplit.astro

@@ -1,81 +1,89 @@
----
-import type { Author, Category } from '../types';
-import PostCategories from "../../Post/PostCategories.astro";
-import Date from "../../Date.astro";
-import { Image } from "astro:assets";
-
-interface Props {
-  title?: string;
-  image?: string;
-  author?: Author;
-  date?: string;
-  categories?: Category[];
-  hasMetadata: boolean;
-  hasCategories: boolean;
-  lang: string;
-}
-
-const {
-  title = "",
-  image,
-  author,
-  date,
-  categories = [],
-  hasMetadata,
-  hasCategories,
-  lang='en'
-} = Astro.props;
-
-// Helper function to remove HTML tags
-const stripHtml = (html: string) => {
-  return html.replace(/<[^>]*>/g, '');
-};
-
-// Get clean title for alt attribute
-const cleanTitle = stripHtml(title);
----
-
-<div class="jumbotron-split-wrapper bg-blue-900 bg-vw">
-  <div class="jumbotron-split-container">
-    <header class="jumbotron-split-header">
-      <div class="heading flex flex-wrap text-white relative items-center justify-center mt-auto w-full z-[2]">
-        <div class="jumbotron-split-content">
-          <h1 class="jumbotron-split-title" set:html={title} />
-          
-          {hasCategories && (
-            <div class="jumbotron-categories">
-              <PostCategories categories={categories} lang={lang} />
-            </div>
-          )}
-
-          {hasMetadata && (
-            <div class="jumbotron-split-meta">
-              {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>
-      
-      {image && (
-        <div class="jumbotron-split-image-wrapper">
-          <div class="jumbotron-split-image">
-            <Image 
-              class="jumbotron-split-img"
-              src={image} 
-              alt={cleanTitle}
-              width={768}
-              height={432}
-              loading="eager"
-            />
-          </div>
-        </div>
-      )}
-    </header>
-  </div>
-</div>
+---
+import type { Author, Category } from '../types';
+import PostCategories from '../../Post/PostCategories.astro';
+import Date from '../../Date.astro';
+import { Image } from 'astro:assets';
+
+interface Props {
+  title?: string;
+  image?: string;
+  author?: Author;
+  date?: string;
+  categories?: Category[];
+  hasMetadata: boolean;
+  hasCategories: boolean;
+  lang: string;
+}
+
+const {
+  title = '',
+  image,
+  author,
+  date,
+  categories = [],
+  hasMetadata,
+  hasCategories,
+  lang = 'en',
+} = Astro.props;
+
+// Helper function to remove HTML tags
+const stripHtml = (html: string) => {
+  return html.replace(/<[^>]*>/g, '');
+};
+
+// Get clean title for alt attribute
+const cleanTitle = stripHtml(title);
+---
+
+<div class="jumbotron-split-wrapper bg-blue-900 bg-vw">
+  <div class="jumbotron-split-container">
+    <header class="jumbotron-split-header">
+      <div
+        class="heading flex flex-wrap text-white relative items-center justify-center mt-auto w-full z-[2]"
+      >
+        <div class="jumbotron-split-content">
+          <h1 class="jumbotron-split-title" set:html={title} />
+
+          {
+            hasCategories && (
+              <div class="jumbotron-categories">
+                <PostCategories categories={categories} lang={lang} />
+              </div>
+            )
+          }
+
+          {
+            hasMetadata && (
+              <div class="jumbotron-split-meta">
+                {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>
+
+      {
+        image && (
+          <div class="jumbotron-split-image-wrapper">
+            <div class="jumbotron-split-image">
+              <Image
+                class="jumbotron-split-img"
+                src={image}
+                alt={cleanTitle}
+                width={768}
+                height={432}
+                loading="eager"
+              />
+            </div>
+          </div>
+        )
+      }
+    </header>
+  </div>
+</div>

package/src/components/Jumbotron.astro

@@ -1,12 +1,12 @@
----
-import type { Props } from "./Jumbotron/types";
-import BaseJumbotron from "./Jumbotron/index.astro";
-
-const props = Astro.props as Props;
----
-
-<BaseJumbotron {...props}>
-  <slot name="intro" slot="intro" />
-  <slot name="subtitle" slot="subtitle" />
-  <slot name="cta-content" slot="cta-content" />
-</BaseJumbotron>
+---
+import type { Props } from './Jumbotron/types';
+import BaseJumbotron from './Jumbotron/index.astro';
+
+const props = Astro.props as Props;
+---
+
+<BaseJumbotron {...props}>
+  <slot name="intro" slot="intro" />
+  <slot name="subtitle" slot="subtitle" />
+  <slot name="cta-content" slot="cta-content" />
+</BaseJumbotron>

package/src/components/LanguageSuggestion.astro

@@ -1,69 +1,66 @@
----
-// components/LanguageSuggestion.astro
-interface Props {
-  position?: 'top' | 'bottom';
-  className?: string;
-  customPath?: string;
-  dismissTimeout?: number; // Auto-dismiss after X ms
-  showIcon?: boolean;
-}
-
-const { 
-  position = 'bottom',
-  className = '',
-  customPath,
-  dismissTimeout,
-  showIcon = true
-} = Astro.props;
-
-const currentLocale = Astro.currentLocale;
-const preferredLocale = Astro.preferredLocale;
-
-const targetPath = customPath 
-  ? `/${preferredLocale}${customPath}`
-  : `/${preferredLocale}${Astro.url.pathname}`;
----
-
-<div 
-  id="languageSuggestion"
-  class:list={[
-    'fixed right-4 bg-white shadow-lg p-4 rounded-lg hidden transition-opacity duration-300',
-    position === 'top' ? 'top-4' : 'bottom-4',
-    className
-  ]}
-  role="alert"
->
-  <a 
-    href={targetPath} 
-    class="flex items-center gap-2 font-medium hover:underline"
-  >
-    {showIcon && <span class="material-icons-outlined text-sm">translate</span>}
-    {new Intl.DisplayNames([preferredLocale], {type: 'language'}).of(preferredLocale)}
-  </a>
-  <button 
-    class="absolute top-1.5 right-1.5 p-1 opacity-60 hover:opacity-100 transition-opacity"
-    aria-label="Dismiss"
-    onclick="this.parentElement.remove(); localStorage.setItem('languageSuggestDenied', true);"
-  >
-    ✕
-  </button>
-</div>
-
-<script define:vars={{ currentLocale, preferredLocale, dismissTimeout }}>
-const shouldShow = 
-  preferredLocale && 
-  preferredLocale !== currentLocale && 
-  !localStorage.getItem('languageSuggestDenied');
-
-if (shouldShow) {
-  const popup = document.getElementById('languageSuggestion');
-  popup?.classList.remove('hidden');
-  
-  if (dismissTimeout) {
-    setTimeout(() => {
-      popup?.classList.add('opacity-0');
-      setTimeout(() => popup?.remove(), 300);
-    }, dismissTimeout);
-  }
-}
-</script>
+---
+// components/LanguageSuggestion.astro
+interface Props {
+  position?: 'top' | 'bottom';
+  className?: string;
+  customPath?: string;
+  dismissTimeout?: number; // Auto-dismiss after X ms
+  showIcon?: boolean;
+}
+
+const {
+  position = 'bottom',
+  className = '',
+  customPath,
+  dismissTimeout,
+  showIcon = true,
+} = Astro.props;
+
+const currentLocale = Astro.currentLocale;
+const preferredLocale = Astro.preferredLocale;
+
+const targetPath = customPath
+  ? `/${preferredLocale}${customPath}`
+  : `/${preferredLocale}${Astro.url.pathname}`;
+---
+
+<div
+  id="languageSuggestion"
+  class:list={[
+    'fixed right-4 bg-white shadow-lg p-4 rounded-lg hidden transition-opacity duration-300',
+    position === 'top' ? 'top-4' : 'bottom-4',
+    className,
+  ]}
+  role="alert"
+>
+  <a href={targetPath} class="flex items-center gap-2 font-medium hover:underline">
+    {showIcon && <span class="material-icons-outlined text-sm">translate</span>}
+    {new Intl.DisplayNames([preferredLocale], { type: 'language' }).of(preferredLocale)}
+  </a>
+  <button
+    class="absolute top-1.5 right-1.5 p-1 opacity-60 hover:opacity-100 transition-opacity"
+    aria-label="Dismiss"
+    onclick="this.parentElement.remove(); localStorage.setItem('languageSuggestDenied', true);"
+  >
+    ✕
+  </button>
+</div>
+
+<script define:vars={{ currentLocale, preferredLocale, dismissTimeout }}>
+  const shouldShow =
+    preferredLocale &&
+    preferredLocale !== currentLocale &&
+    !localStorage.getItem('languageSuggestDenied');
+
+  if (shouldShow) {
+    const popup = document.getElementById('languageSuggestion');
+    popup?.classList.remove('hidden');
+
+    if (dismissTimeout) {
+      setTimeout(() => {
+        popup?.classList.add('opacity-0');
+        setTimeout(() => popup?.remove(), 300);
+      }, dismissTimeout);
+    }
+  }
+</script>

package/src/components/LeftSidebar.astro

@@ -1,22 +1,22 @@
 ---
-import { SIDEBAR } from "../config";
-import { Astronav, MenuItems } from "astro-navbar";
+import { SIDEBAR } from '../config';
+import { Astronav, MenuItems } from 'astro-navbar';
 const { currentPage } = Astro.props;
 const currentPageMatch = currentPage.slice(1);
 
-const isCurrentPage = (item) => {
+const isCurrentPage = item => {
   if (item.link) {
     return item.link.includes(currentPageMatch);
   }
   return false;
 };
 
-const getLinkClasses = (link) => {
+const getLinkClasses = link => {
   const baseClasses =
-    "block py-1.5 px-6  my-1 transition-colors border-l hover:border-slate-400 text-slate-500 hover:text-slate-900";
+    'block py-1.5 px-6  my-1 transition-colors border-l hover:border-slate-400 text-slate-500 hover:text-slate-900';
 
   if (isCurrentPage(link)) {
-    return baseClasses + " border-slate-500 text-slate-900";
+    return baseClasses + ' border-slate-500 text-slate-900';
   } else {
     return baseClasses;
   }
@@ -29,14 +29,14 @@ const getLinkClasses = (link) => {
   >
     <ul class="mt-0 mb-auto">
       {
-        SIDEBAR.map((item) =>
+        SIDEBAR.map(item =>
           item.header ? (
             <h2 class="mt-4 font-semibold text-slate-700">{item.text}</h2>
           ) : (
             <li class={getLinkClasses(item)}>
               <a href={item.link}>{item.text}</a>
             </li>
-          ),
+          )
         )
       }
     </ul>
@@ -44,10 +44,10 @@ const getLinkClasses = (link) => {
 </Astronav>
 
 <script is:inline>
-  window.addEventListener("DOMContentLoaded", (event) => {
+  window.addEventListener('DOMContentLoaded', event => {
     var target = document.querySelector('[aria-current="page"]');
     if (target && target.offsetTop > window.innerHeight - 100) {
-      document.querySelector(".nav-groups").scrollTop = target.offsetTop;
+      document.querySelector('.nav-groups').scrollTop = target.offsetTop;
     }
   });
 </script>

package/src/components/MainColors.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { colors } from "./../../uno-config/theme/colors";
+import { colors } from './../../uno-config/theme/colors';
 
 // Get color categories
 const colorCategories = Object.entries(colors);
@@ -20,4 +20,4 @@ const colorCategories = Object.entries(colors);
       </div>
     </div>
   </div>
-</template>
+</template>

package/src/components/MainInput.vue

@@ -6,10 +6,13 @@ const props = defineProps<{
 
 <template>
   <label class="group text-left w-full max-w-xs flex flex-col">
-    <span class="group-hover:text-blue-medium ml-2 text-slate-600 text-sm group-focus-within:text-blue-medium">{{ label
-    }}</span>
+    <span
+      class="group-hover:text-blue-medium ml-2 text-slate-600 text-sm group-focus-within:text-blue-medium"
+      >{{ label }}</span
+    >
     <input
       class="group-hover:border-blue-lightest border px-4 py-2 transition-colors rounded-md w-full focus:ring focus:outline-none focus:border-blue-medium"
-      type="text" />
+      type="text"
+    />
   </label>
 </template>

package/src/components/Modal.astro

@@ -1,9 +1,9 @@
 ---
 const { id, open } = Astro.props;
-import Button from "../components/Button.vue";
+import Button from '../components/Button.vue';
 ---
 
-<style >
+<style>
   dialog {
     @apply fixed top-0 left-0 right-0 bottom-0;
 

package/src/components/PartNumber.vue

@@ -17,12 +17,11 @@ const props = defineProps({
     default: '',
     required: false,
   },
-})
-
+});
 </script>
 
 <template>
   <component :is="props.as" :class="props.class">
     {{ props.number }}
   </component>
-</template>
+</template>

package/src/components/Post/PostCategories.astro

@@ -25,9 +25,7 @@ const categoryLabel = lang === 'pl' ? 'Kategoria' : 'Category';
     categories && categories.length > 0
       ? categories.map((category, index) => (
           <>
-            {index > 0 && (
-              <span class="w-px h-2.5 bg-gray-300 mx-2.5 inline-block relative" />
-            )}
+            {index > 0 && <span class="w-px h-2.5 bg-gray-300 mx-2.5 inline-block relative" />}
             <a
               class="term-link text-sm sm:text-base hover:text-light-blue-400"
               data-pagefind-filter={`${categoryLabel}:${category.name}`}
@@ -39,4 +37,4 @@ const categoryLabel = lang === 'pl' ? 'Kategoria' : 'Category';
         ))
       : null
   }
-</div>
+</div>

package/src/components/Post/PostCategories.vue

@@ -13,7 +13,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  active: false
+  active: false,
 });
 </script>
 
@@ -28,4 +28,4 @@ const props = withDefaults(defineProps<Props>(), {
   </a>
 </template>
 
-<!-- No <style> section - all styles are now UnoCSS shortcuts -->
+<!-- No <style> section - all styles are now UnoCSS shortcuts -->

package/src/components/PostHeader.astro

@@ -17,13 +17,11 @@ interface Props {
 }
 
 const { image, title, categories, date, author, lang } = Astro.props;
-import PostCategories from "./Post/PostCategories.astro";
-import Date from "./Date.astro";
+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"
->
+<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"
@@ -52,7 +50,7 @@ import Date from "./Date.astro";
   </div>
 </header>
 
-<style >
+<style>
   .post-header {
     @apply flex relative items-center;
     min-height: 19vw;