spoko-design-system 0.3.3 → 0.3.9

package/src/components/Jumbotron/index.astro

@@ -0,0 +1,153 @@
+---
+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;
+}
+
+const {
+  variant = "default",
+  title = "",
+  image,
+  small = false,
+  description,
+  info,
+  date,
+  author,
+  categories = [],
+  backgroundClass = 'bg-blue-darker'
+} = 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,
+};
+---
+
+{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 is:global>
+  .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

@@ -0,0 +1,29 @@
+// 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

@@ -0,0 +1,40 @@
+---
+// 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

@@ -0,0 +1,54 @@
+---
+// variants/Hero.astro
+interface Props {
+  title?: string;
+  image?: string;
+  description?: string;
+  info?: string;
+  backgroundClass?: string;
+}
+
+const {
+  title = "",
+  image,
+  description,
+  info,
+  backgroundClass
+} = Astro.props;
+
+console.log('Received backgroundClass:', backgroundClass); // debug
+---
+
+<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>

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

@@ -0,0 +1,62 @@
+---
+// variants/Post.astro
+import type { Author, Category } from '../types';
+import CategoryLink from "../../CategoryLink.astro";
+import Date from "../../Date.astro";
+
+interface Props {
+  title?: string;
+  image?: string;
+  author?: Author;
+  date?: string;
+  categories?: Category[];
+  hasMetadata: boolean;
+  hasCategories: boolean;
+}
+
+const {
+  title = "",
+  image,
+  author,
+  date,
+  categories = [],
+  hasMetadata,
+  hasCategories,
+} = 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">
+          <CategoryLink categories={categories} />
+        </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

@@ -0,0 +1,71 @@
+---
+import type { Author, Category } from '../types';
+import CategoryLink from "../../CategoryLink.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;
+}
+
+const {
+  title = "",
+  image,
+  author,
+  date,
+  categories = [],
+  hasMetadata,
+  hasCategories,
+} = Astro.props;
+---
+
+<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">
+              <CategoryLink categories={categories} />
+            </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={title}
+              width={768}
+              height={432}
+              loading="eager"
+            />
+          </div>
+        </div>
+      )}
+    </header>
+  </div>
+</div>

package/src/components/Jumbotron.astro

@@ -0,0 +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>

package/src/config.ts

@@ -37,7 +37,7 @@ export const SIDEBAR = [
   { text: "Icons", link: "/components/icons/" },
   { text: "Image", link: "/components/image/" },
   { text: "Input", link: "/components/input/" },
-  { text: "Jumbatron", link: "/components/jumbatron/" },
+  { text: "Jumbotron", link: "/components/jumbotron/" },
   { text: "Modal", link: "/components/modal/" },
   { text: "PostHeader", link: "/components/post-header/" },
   { text: "PR-Code", link: "/components/pr-code/" },

package/src/layouts/Layout.astro

@@ -45,7 +45,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
             createdy by
           </div>
           <img
-            class="h-4 w-min md:h-5 "
+            class="h-4 w-min md:h-5"
             src="spoko.space.svg"
             alt="Modern Websites"
             width="126"
@@ -58,3 +58,4 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
     </footer>
   </body>
 </html>
+

package/src/pages/components/image.mdx

@@ -1,5 +1,5 @@
 ---
-title: "Jumbatron"
+title: "Jumbotron"
 layout: "../../layouts/MainLayout.astro"
 ---
 import Image from '../../components/Image.astro'