spoko-design-system 1.1.1 → 1.1.2

package/src/components/Jumbotron/index.astro

@@ -1,156 +1,143 @@
----
-import type { Author, Category } from './types';
-import DefaultVariant from './variants/Default.astro';
-import HeroVariant from './variants/Hero.astro';
-import PostVariant from './variants/Post.astro';
-import PostSplitVariant from './variants/PostSplit.astro';
-
-interface Props {
-  variant?: "default" | "hero" | "post" | "post-split";
-  title?: string;
-  image?: string;
-  small?: boolean;
-  description?: string;
-  info?: string;
-  date?: string;
-  author?: Author;
-  categories?: Category[];
-  backgroundClass?: string;
-  lang?: string;
-}
-
-const {
-  variant = "default",
-  title = "",
-  image,
-  small = false,
-  description,
-  info,
-  date,
-  author,
-  categories = [],
-  backgroundClass = 'bg-blue-darker',
-  lang = 'en'
-} = Astro.props;
-
-// Helper (function to check if a slot has content)
-const hasSlotContent = async (slotName) => {
-  const slot = await Astro.slots.render(slotName);
-  return slot?.trim().length > 0;
-};
-
-// Get content status
-const hasIntroContent = await hasSlotContent('intro');
-const hasSubtitleContent = await hasSlotContent('subtitle');
-const hasCtaContent = await hasSlotContent('cta-content');
-
-// Content helpers
-const hasMetadata = author || date;
-const hasCategories = categories.length > 0;
-
-// Props to pass to variants
-const commonProps = {
-  title,
-  image,
-  hasIntroContent,
-  hasSubtitleContent,
-  hasCtaContent,
-  hasMetadata,
-  hasCategories,
-  backgroundClass,
-  lang,
-};
----
-
-{variant === "default" && (
-  <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 === "post" && (
-  <PostVariant 
-    {...commonProps}
-    author={author}
-    date={date}
-    categories={categories}
-  />
-)}
-
-{variant === "post-split" && (
-  <PostSplitVariant 
-    {...commonProps}
-    author={author}
-    date={date}
-    categories={categories}
-  />
-)}
-
-<style>
-  .bg-vw {
-    background: radial-gradient(circle at 50% 85%, #00437a 0%, #001e50 100%);
-  }
-
-  .featured-image-overlay {
-    @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;
-    }
-  }
-
-  .featured-image {
-    width: 100%;
-    @apply bg-blue-900;
-
-    img {
-      width: 100%;
-      object-fit: cover;
-      max-width: 100%;
-      display: block;
-    }
-  }
-
-  h1 {
-    b {
-      @apply font-headregular whitespace-nowrap;
-    }
-    small {
-      @apply text-6 whitespace-nowrap;
-    }
-    span {
-      @apply text-accent-light;
-    }
-  }
-</style>
+---
+import type { Author, Category } from './types';
+import DefaultVariant from './variants/Default.astro';
+import HeroVariant from './variants/Hero.astro';
+import PostVariant from './variants/Post.astro';
+import PostSplitVariant from './variants/PostSplit.astro';
+
+interface Props {
+  variant?: 'default' | 'hero' | 'post' | 'post-split';
+  title?: string;
+  image?: string;
+  small?: boolean;
+  description?: string;
+  info?: string;
+  date?: string;
+  author?: Author;
+  categories?: Category[];
+  backgroundClass?: string;
+  lang?: string;
+}
+
+const {
+  variant = 'default',
+  title = '',
+  image,
+  small = false,
+  description,
+  info,
+  date,
+  author,
+  categories = [],
+  backgroundClass = 'bg-blue-darker',
+  lang = 'en',
+} = Astro.props;
+
+// Helper (function to check if a slot has content)
+const hasSlotContent = async slotName => {
+  const slot = await Astro.slots.render(slotName);
+  return slot?.trim().length > 0;
+};
+
+// Get content status
+const hasIntroContent = await hasSlotContent('intro');
+const hasSubtitleContent = await hasSlotContent('subtitle');
+const hasCtaContent = await hasSlotContent('cta-content');
+
+// Content helpers
+const hasMetadata = author || date;
+const hasCategories = categories.length > 0;
+
+// Props to pass to variants
+const commonProps = {
+  title,
+  image,
+  hasIntroContent,
+  hasSubtitleContent,
+  hasCtaContent,
+  hasMetadata,
+  hasCategories,
+  backgroundClass,
+  lang,
+};
+---
+
+{
+  variant === 'default' && (
+    <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 === 'post' && (
+    <PostVariant {...commonProps} author={author} date={date} categories={categories} />
+  )
+}
+
+{
+  variant === 'post-split' && (
+    <PostSplitVariant {...commonProps} author={author} date={date} categories={categories} />
+  )
+}
+
+<style>
+  .bg-vw {
+    background: radial-gradient(circle at 50% 85%, #00437a 0%, #001e50 100%);
+  }
+
+  .featured-image-overlay {
+    @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;
+    }
+  }
+
+  .featured-image {
+    width: 100%;
+    @apply bg-blue-900;
+
+    img {
+      width: 100%;
+      object-fit: cover;
+      max-width: 100%;
+      display: block;
+    }
+  }
+
+  h1 {
+    b {
+      @apply font-headregular whitespace-nowrap;
+    }
+    small {
+      @apply text-6 whitespace-nowrap;
+    }
+    span {
+      @apply text-accent-light;
+    }
+  }
+</style>

package/src/components/Jumbotron/types.ts

@@ -1,29 +1,28 @@
-// types.ts
-export interface Author {
-  firstName?: string;
-  name: string;
-}
-
-export interface Category {
-  name: string;
-  uri: string;
-}
-
-export interface Props {
-  // Common props
-  variant?: "default" | "hero" | "post" | "post-split";
-  title?: string; 
-  image?: string;
-  backgroundClass?: string;
-
-
-  // Default & Hero variant props
-  small?: boolean;
-  description?: string;
-  info?: string;
-
-  // Post variants props
-  date?: string;
-  author?: Author;
-  categories?: Category[];
-}
+// types.ts
+export interface Author {
+  firstName?: string;
+  name: string;
+}
+
+export interface Category {
+  name: string;
+  uri: string;
+}
+
+export interface Props {
+  // Common props
+  variant?: 'default' | 'hero' | 'post' | 'post-split';
+  title?: string;
+  image?: string;
+  backgroundClass?: string;
+
+  // Default & Hero variant props
+  small?: boolean;
+  description?: string;
+  info?: string;
+
+  // Post variants props
+  date?: string;
+  author?: Author;
+  categories?: Category[];
+}

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

@@ -1,40 +1,44 @@
----
-// variants/Default.astro
-interface Props {
-  title?: string;
-  small?: boolean;
-  hasIntroContent: boolean;
-  hasSubtitleContent: boolean;
-  hasCtaContent: boolean;
-}
-
-const {
-  title = "",
-  small = false,
-  hasIntroContent,
-  hasSubtitleContent,
-  hasCtaContent,
-} = Astro.props;
----
-
-<header
-  class:list={[
-    "flow content-grid", // globalne klasy
-    "jumbotron-header-base bg-vw", // klasy bazowe i tło
-    small ? "jumbotron-container-small" : "jumbotron-container-large" // wariant rozmiaru
-  ]}
->
-  {hasIntroContent ? (
-    <slot name="intro" />
-  ) : (
-    <h1 class="jumbotron-title-default" set:html={title} />
-  )}
-  
-  {hasSubtitleContent && <slot name="subtitle" />}
-  
-  {hasCtaContent && (
-    <div class="jumbotron-cta-wrapper">
-      <slot name="cta-content" />
-    </div>
-  )}
-</header>
+---
+// variants/Default.astro
+interface Props {
+  title?: string;
+  small?: boolean;
+  hasIntroContent: boolean;
+  hasSubtitleContent: boolean;
+  hasCtaContent: boolean;
+}
+
+const {
+  title = '',
+  small = false,
+  hasIntroContent,
+  hasSubtitleContent,
+  hasCtaContent,
+} = Astro.props;
+---
+
+<header
+  class:list={[
+    'flow content-grid', // globalne klasy
+    'jumbotron-header-base bg-vw', // klasy bazowe i tło
+    small ? 'jumbotron-container-small' : 'jumbotron-container-large', // wariant rozmiaru
+  ]}
+>
+  {
+    hasIntroContent ? (
+      <slot name="intro" />
+    ) : (
+      <h1 class="jumbotron-title-default" set:html={title} />
+    )
+  }
+
+  {hasSubtitleContent && <slot name="subtitle" />}
+
+  {
+    hasCtaContent && (
+      <div class="jumbotron-cta-wrapper">
+        <slot name="cta-content" />
+      </div>
+    )
+  }
+</header>

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

@@ -1,53 +1,45 @@
----
-// variants/Hero.astro
-interface Props {
-  title?: string;
-  image?: string;
-  description?: string;
-  info?: string;
-  backgroundClass?: string;
-}
-
-const {
-  title = "",
-  image,
-  description,
-  info,
-  backgroundClass
-} = Astro.props;
-
----
-
-<div class={`relative w-full ${backgroundClass}`}>
-  {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}
-      />
-    </div>
-  )}
-  
-  <div class="xl:container mx-auto px-3.5 md:px-8 py-8 h-56 sm:h-72 md:max-h-72 items-center flex">
-    <header class="relative z-10 text-white">
-      <h1
-        class="font-headlight text-3xl sm:text-4xl md:text-5xl xl:text-6xl mt-1 line-clamp-3 leading-tight"
-        set:html={title}
-      />
-      {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}
-        />
-      )}
-    </header>
-  </div>
-</div>
+---
+// variants/Hero.astro
+interface Props {
+  title?: string;
+  image?: string;
+  description?: string;
+  info?: string;
+  backgroundClass?: string;
+}
+
+const { title = '', image, description, info, backgroundClass } = Astro.props;
+---
+
+<div class={`relative w-full ${backgroundClass}`}>
+  {
+    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} />
+      </div>
+    )
+  }
+
+  <div class="xl:container mx-auto px-3.5 md:px-8 py-8 h-56 sm:h-72 md:max-h-72 items-center flex">
+    <header class="relative z-10 text-white">
+      <h1
+        class="font-headlight text-3xl sm:text-4xl md:text-5xl xl:text-6xl mt-1 line-clamp-3 leading-tight"
+        set:html={title}
+      />
+      {
+        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} />
+        )
+      }
+    </header>
+  </div>
+</div>