spoko-design-system 1.9.1 → 1.9.2

package/src/components/Header/Header.astro

@@ -7,10 +7,7 @@ import Search from 'astro-pagefind/components/Search';
 
 <header class="p-3 bg-blue-medium bg-opacity-10 backdrop-blur-md border-b text-slate-900">
   <SkipToContent />
-  <nav
-    title="Top Navigation"
-    class="mx-auto flex justify-between items-center px-4"
-  >
+  <nav title="Top Navigation" class="mx-auto flex justify-between items-center px-4">
     <div class="flex flex-nowrap">
       <MenuIcon class="w-4 h-4 text-gray-800 lg:hidden mr-4" />
       <a
@@ -39,11 +36,7 @@ import Search from 'astro-pagefind/components/Search';
             class="opacity-80 hover:opacity-100 hover:bg-slate-200 p-2 rounded-full transition-colors"
             href={'https://github.com/' + SITE.github}
           >
-            <img
-              class="h-7"
-              src="/github.svg"
-              alt="github logo"
-            />
+            <img class="h-7" src="/github.svg" alt="github logo" />
           </a>
         )
       }
@@ -54,11 +47,7 @@ import Search from 'astro-pagefind/components/Search';
             class="opacity-80 hover:opacity-100 hover:bg-blue-50 p-2 rounded-full transition-colors"
             href={'https://linkedin.com/in/' + SITE.linkedin}
           >
-            <img
-              class="h-7"
-              src="/linkedin.svg"
-              alt="linkedin logo"
-            />
+            <img class="h-7" src="/linkedin.svg" alt="linkedin logo" />
           </a>
         )
       }

package/src/components/Header/SkipToContent.astro

@@ -1,5 +1 @@
-<a
-  href="#article"
-  class="sr-only focus:not-sr-only skiplink"
-  ><span>Skip to Content</span></a
->
+<a href="#article" class="sr-only focus:not-sr-only skiplink"><span>Skip to Content</span></a>

package/src/components/Input.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+/* global Event, HTMLInputElement, HTMLTextAreaElement, FocusEvent */
 import { computed, useAttrs } from 'vue';
 
 interface InputProps {
@@ -30,7 +31,7 @@ const props = withDefaults(defineProps<InputProps>(), {
   error: false,
   success: false,
   size: 'md',
-  class: ''
+  class: '',
 });
 
 const emit = defineEmits(['update:modelValue', 'input', 'focus', 'blur']);
@@ -45,7 +46,7 @@ const wrapperClass = computed(() => `relative input-wrapper-${props.variant}`);
 const inputClass = computed(() => {
   // Base classes
   const classes = ['input-base', `input-${props.variant}`];
-  
+
   // Focus and placeholder behavior - using direct arbitrary selectors
   classes.push('[&:focus~label]:text-blue-light');
   classes.push('[&:focus~label]:dark:text-blue-lightest');
@@ -53,7 +54,7 @@ const inputClass = computed(() => {
   classes.push('[&:placeholder-shown~label]:scale-100');
   classes.push('[&:placeholder-shown~label]:translate-y-0');
   classes.push('[&:not(:placeholder-shown)~label]:scale-75');
-  
+
   // Variant-specific behaviors
   if (props.variant === 'standard') {
     classes.push('[&:focus~label]:-translate-y-6');
@@ -63,14 +64,14 @@ const inputClass = computed(() => {
     classes.push('[&:focus~label]:-translate-y-4');
     classes.push('[&:not(:placeholder-shown)~label]:-translate-y-4');
   }
-  
+
   // Additional classes
   if (props.size) classes.push(`input-${props.size}`);
   if (props.type === 'textarea') classes.push('input-textarea');
   if (props.error) classes.push('input-error');
   else if (props.success) classes.push('input-success');
   if (props.class) classes.push(props.class);
-  
+
   return classes.join(' ');
 });
 
@@ -78,7 +79,7 @@ const inputClass = computed(() => {
 const labelClass = computed(() => {
   // Base classes
   const classes = ['input-label-base', `input-label-${props.variant}`];
-  
+
   // Explicitly add transform for initial state to ensure consistency
   if (props.variant === 'standard') {
     // Start in position and let focus/content move it
@@ -87,12 +88,12 @@ const labelClass = computed(() => {
     // Start in position and let focus/content move it
     classes.push('translate-y-0');
   }
-  
+
   // Additional classes
   if (props.size) classes.push(`input-label-${props.size}`);
   if (props.error) classes.push('input-label-error');
   else if (props.success) classes.push('input-label-success');
-  
+
   return classes.join(' ');
 });
 
@@ -125,7 +126,7 @@ const handleBlur = (event: FocusEvent) => emit('blur', event);
       @focus="handleFocus"
       @blur="handleBlur"
     />
-    
+
     <!-- Input field -->
     <input
       v-else
@@ -140,35 +141,22 @@ const handleBlur = (event: FocusEvent) => emit('blur', event);
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"
-    >
-    
+    />
+
     <!-- Label with guaranteed correct transform origin -->
-    <label
-      :for="id"
-      :class="labelClass"
-      style="transform-origin: top left;"
-    >
+    <label :for="id" :class="labelClass" style="transform-origin: top left">
       {{ label }}
-      <span
-        v-if="required"
-        class="text-red-500 ml-1"
-      >*</span>
+      <span v-if="required" class="text-red-500 ml-1">*</span>
     </label>
-    
+
     <!-- Error message -->
-    <div 
-      v-if="error && typeof error === 'string'" 
-      class="input-error-message"
-    >
+    <div v-if="error && typeof error === 'string'" class="input-error-message">
       {{ error }}
     </div>
-    
+
     <!-- Success message -->
-    <div 
-      v-if="success && typeof success === 'string'" 
-      class="input-success-message"
-    >
+    <div v-if="success && typeof success === 'string'" class="input-success-message">
       {{ success }}
     </div>
   </div>
-</template>
+</template>

package/src/components/Jumbotron/index.astro

@@ -64,55 +64,21 @@ const commonProps = {
 
 {
   variant === 'default' && (
-    <DefaultVariant
-      {...commonProps}
-      small={small}
-    >
-      <slot
-        name="intro"
-        slot="intro"
-      />
-      <slot
-        name="subtitle"
-        slot="subtitle"
-      />
-      <slot
-        name="cta-content"
-        slot="cta-content"
-      />
+    <DefaultVariant {...commonProps} small={small}>
+      <slot name="intro" slot="intro" />
+      <slot name="subtitle" slot="subtitle" />
+      <slot name="cta-content" slot="cta-content" />
     </DefaultVariant>
   )
 }
 
-{
-  variant === 'hero' && (
-    <HeroVariant
-      {...commonProps}
-      description={description}
-      info={info}
-    />
-  )
-}
+{variant === 'hero' && <HeroVariant {...commonProps} description={description} info={info} />}
 
-{
-  variant === 'post' && (
-    <PostVariant
-      {...commonProps}
-      author={author}
-      date={date}
-      categories={categories}
-    />
-  )
-}
+{variant === 'post' && <PostVariant {...commonProps} author={author} date={date} categories={categories} />}
 
 {
   variant === 'post-split' && (
-    <PostSplitVariant
-      {...commonProps}
-      author={author}
-      date={date}
-      categories={categories}
-    />
+    <PostSplitVariant {...commonProps} author={author} date={date} categories={categories} />
   )
 }
 

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

@@ -8,13 +8,7 @@ interface Props {
   hasCtaContent: boolean;
 }
 
-const {
-  title = '',
-  small = false,
-  hasIntroContent,
-  hasSubtitleContent,
-  hasCtaContent,
-} = Astro.props;
+const { title = '', small = false, hasIntroContent, hasSubtitleContent, hasCtaContent } = Astro.props;
 ---
 
 <header
@@ -24,16 +18,7 @@ const {
     small ? 'jumbotron-container-small' : 'jumbotron-container-large', // wariant rozmiaru
   ]}
 >
-  {
-    hasIntroContent ? (
-      <slot name="intro" />
-    ) : (
-      <h1
-        class="jumbotron-title-default"
-        set:html={title}
-      />
-    )
-  }
+  {hasIntroContent ? <slot name="intro" /> : <h1 class="jumbotron-title-default" set:html={title} />}
 
   {hasSubtitleContent && <slot name="subtitle" />}
 

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

@@ -16,11 +16,7 @@ const { title = '', image, description, info, backgroundClass } = Astro.props;
     image && (
       <div class="absolute inset-0 w-full h-full">
         <div class="absolute inset-0 bg-gradient-to-r from-blue-900 to-transparent opacity-90 z-1" />
-        <img
-          class="w-full h-full object-cover"
-          src={image}
-          alt={title}
-        />
+        <img class="w-full h-full object-cover" src={image} alt={title} />
       </div>
     )
   }
@@ -33,20 +29,10 @@ const { title = '', image, description, info, backgroundClass } = Astro.props;
       />
       {
         description && (
-          <div
-            class="mb-1 line-clamp-3 text-base sm:text-lg leading-none mt-4"
-            set:html={description}
-          />
-        )
-      }
-      {
-        info && (
-          <div
-            class="font-medium mb-4 line-clamp-1 text-base sm:text-lg mt-2"
-            set:html={info}
-          />
+          <div class="mb-1 line-clamp-3 text-base sm:text-lg leading-none mt-4" set:html={description} />
         )
       }
+      {info && <div class="font-medium mb-4 line-clamp-1 text-base sm:text-lg mt-2" set:html={info} />}
     </header>
   </div>
 </div>

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

@@ -41,10 +41,7 @@ const {
       {
         hasCategories && (
           <div class="order-1">
-            <PostCategories
-              categories={categories}
-              lang={lang}
-            />
+            <PostCategories categories={categories} lang={lang} />
           </div>
         )
       }
@@ -53,10 +50,7 @@ const {
         hasMetadata && (
           <div class="order-3 flex items-center text-gray-100">
             {author && (
-              <span
-                class="text-sm"
-                title={author.firstName}
-              >
+              <span class="text-sm" title={author.firstName}>
                 {author.name}
               </span>
             )}
@@ -69,10 +63,6 @@ const {
   </div>
 
   <div class="featured-image-overlay">
-    <img
-      src={image}
-      alt={title}
-      class="w-full h-full object-cover block max-w-full"
-    />
+    <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

@@ -42,18 +42,12 @@ const cleanTitle = stripHtml(title);
         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}
-          />
+          <h1 class="jumbotron-split-title" set:html={title} />
 
           {
             hasCategories && (
               <div class="jumbotron-categories">
-                <PostCategories
-                  categories={categories}
-                  lang={lang}
-                />
+                <PostCategories categories={categories} lang={lang} />
               </div>
             )
           }
@@ -62,11 +56,7 @@ const cleanTitle = stripHtml(title);
             hasMetadata && (
               <div class="jumbotron-split-meta">
                 {author && (
-                  <span
-                    class="text-sm"
-                    title={author.firstName}
-                    data-pagefind-ignore
-                  >
+                  <span class="text-sm" title={author.firstName} data-pagefind-ignore>
                     {author.name}
                   </span>
                 )}

package/src/components/Jumbotron.astro

@@ -6,16 +6,7 @@ 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"
-  />
+  <slot name="intro" slot="intro" />
+  <slot name="subtitle" slot="subtitle" />
+  <slot name="cta-content" slot="cta-content" />
 </BaseJumbotron>

package/src/components/LanguageSuggestion.astro

@@ -8,13 +8,7 @@ interface Props {
   showIcon?: boolean;
 }
 
-const {
-  position = 'bottom',
-  className = '',
-  customPath,
-  dismissTimeout,
-  showIcon = true,
-} = Astro.props;
+const { position = 'bottom', className = '', customPath, dismissTimeout, showIcon = true } = Astro.props;
 
 const currentLocale = Astro.currentLocale;
 const preferredLocale = Astro.preferredLocale;
@@ -33,10 +27,7 @@ const targetPath = customPath
   ]}
   role="alert"
 >
-  <a
-    href={targetPath}
-    class="flex items-center gap-2 font-medium hover:underline"
-  >
+  <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>
@@ -51,9 +42,7 @@ const targetPath = customPath
 
 <script define:vars={{ currentLocale, preferredLocale, dismissTimeout }}>
   const shouldShow =
-    preferredLocale &&
-    preferredLocale !== currentLocale &&
-    !localStorage.getItem('languageSuggestDenied');
+    preferredLocale && preferredLocale !== currentLocale && !localStorage.getItem('languageSuggestDenied');
 
   if (shouldShow) {
     const popup = document.getElementById('languageSuggestion');

package/src/components/MainColors.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+/* global navigator, setTimeout */
 import { ref } from 'vue';
 import { colors } from './../../uno-config/theme/colors';
 
@@ -29,19 +30,12 @@ const getColorClass = (category: string, name: string) => {
 
 <template>
   <div class="flex flex-col space-y-12">
-    <div
-      v-for="[category, shades] in colorCategories"
-      :key="category"
-    >
+    <div v-for="[category, shades] in colorCategories" :key="category">
       <h3 class="capitalize text-xl font-bold mb-4">
         {{ category }}
       </h3>
       <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-5 gap-x-6 gap-y-10">
-        <div
-          v-for="(value, name) in shades"
-          :key="name"
-          class="group relative"
-        >
+        <div v-for="(value, name) in shades" :key="name" class="group relative">
           <!-- Color Swatch -->
           <button
             class="w-full h-10 rounded-lg shadow-md transition-all duration-200 hover:shadow-xl hover:scale-105 cursor-pointer relative overflow-hidden"
@@ -73,14 +67,8 @@ const getColorClass = (category: string, name: string) => {
                 :title="`Copy hex: ${value}`"
                 @click="copyToClipboard(value, `${category}-${name}-hex`)"
               >
-                <span
-                  v-if="copiedItem === `${category}-${name}-hex`"
-                  class="text-green-600"
-                >✓</span>
-                <span
-                  v-else
-                  class="uppercase text-xs"
-                >{{ value }}</span>
+                <span v-if="copiedItem === `${category}-${name}-hex`" class="text-green-600">✓</span>
+                <span v-else class="uppercase text-xs">{{ value }}</span>
               </button>
 
               <!-- Copy Class Name (text-*) -->
@@ -89,10 +77,7 @@ const getColorClass = (category: string, name: string) => {
                 :title="`Copy class: text-${getColorClass(category, name)}`"
                 @click="copyToClipboard(`text-${getColorClass(category, name)}`, `${category}-${name}-class`)"
               >
-                <span
-                  v-if="copiedItem === `${category}-${name}-class`"
-                  class="text-green-600"
-                >✓</span>
+                <span v-if="copiedItem === `${category}-${name}-class`" class="text-green-600">✓</span>
                 <span v-else>text-</span>
               </button>
 
@@ -102,10 +87,7 @@ const getColorClass = (category: string, name: string) => {
                 :title="`Copy class: bg-${getColorClass(category, name)}`"
                 @click="copyToClipboard(`bg-${getColorClass(category, name)}`, `${category}-${name}-bg`)"
               >
-                <span
-                  v-if="copiedItem === `${category}-${name}-bg`"
-                  class="text-green-600"
-                >✓</span>
+                <span v-if="copiedItem === `${category}-${name}-bg`" class="text-green-600">✓</span>
                 <span v-else>bg-</span>
               </button>
             </div>

package/src/components/MainInput.vue

@@ -8,8 +8,9 @@ const props = defineProps<{
   <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"
-      >{{ props.label }}</span
     >
+      {{ props.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"

package/src/components/Modal.astro

@@ -84,31 +84,26 @@ const {
   }
 </style>
 
-{showTrigger && (
-  <Button
-    primary
-    onclick={`window.${id}.showModal()`}
-    >{open}</Button
-  >
-)}
-
-<dialog
-  id={id}
-  class="p-6"
->
+{
+  showTrigger && (
+    <Button primary onclick={`window.${id}.showModal()`}>
+      {open}
+    </Button>
+  )
+}
+
+<dialog id={id} class="p-6">
   <div class="modal-header">
     {title && <h2 class="text-2xl font-bold pr-8">{title}</h2>}
     <slot name="header" />
 
-    {showXButton && (
-      <form method="dialog" class="inline">
-        <button
-          class="modal-close-x"
-          aria-label="Close"
-          type="submit"
-        />
-      </form>
-    )}
+    {
+      showXButton && (
+        <form method="dialog" class="inline">
+          <button class="modal-close-x" aria-label="Close" type="submit" />
+        </form>
+      )
+    }
   </div>
 
   <div class="modal-content">
@@ -116,37 +111,44 @@ const {
     <slot />
   </div>
 
-  {showActions && (
-    <div class="modal-actions">
-      <slot name="actions">
-        <form method="dialog" class="contents">
-          <Button>{cancelText}</Button>
-        </form>
-        <Button primary={confirmPrimary} onclick={`document.getElementById('${id}').dispatchEvent(new CustomEvent('confirm', { detail: { id: '${id}' } }))`}>
-          {confirmText}
-        </Button>
-      </slot>
-    </div>
-  )}
-
-  {!showActions && (
-    <form method="dialog">
-      <slot name="close" />
-    </form>
-  )}
+  {
+    showActions && (
+      <div class="modal-actions">
+        <slot name="actions">
+          <form method="dialog" class="contents">
+            <Button>{cancelText}</Button>
+          </form>
+          <Button
+            primary={confirmPrimary}
+            onclick={`document.getElementById('${id}').dispatchEvent(new CustomEvent('confirm', { detail: { id: '${id}' } }))`}
+          >
+            {confirmText}
+          </Button>
+        </slot>
+      </div>
+    )
+  }
+
+  {
+    !showActions && (
+      <form method="dialog">
+        <slot name="close" />
+      </form>
+    )
+  }
 </dialog>
 
 <script define:vars={{ id }}>
   // Close on backdrop click
   const dialog = document.getElementById(id);
-  dialog?.addEventListener('click', (e) => {
+  dialog?.addEventListener('click', e => {
     if (e.target === dialog) {
       dialog.close();
     }
   });
 
   // Close on Escape key
-  dialog?.addEventListener('keydown', (e) => {
+  dialog?.addEventListener('keydown', e => {
     if (e.key === 'Escape') {
       dialog.close();
     }

package/src/components/PageContent.astro

@@ -1,7 +1,4 @@
-<article
-  id="article"
-  class="content"
->
+<article id="article" class="content">
   <section class="main-section">
     <slot />
   </section>

package/src/components/PartNumber.vue

@@ -21,10 +21,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <component
-    :is="props.as"
-    :class="props.class"
-  >
+  <component :is="props.as" :class="props.class">
     {{ props.number }}
   </component>
 </template>