spoko-design-system 0.3.2 → 0.3.8

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'

package/src/pages/components/jumbotron.mdx

@@ -0,0 +1,360 @@
+---
+title: "Jumbotron"
+layout: "../../layouts/MainLayout.astro"
+---
+import Jumbotron from '../../components/Jumbotron.astro'
+import Button from '../../components/Button.vue'
+
+# Jumbotron
+
+A Jumbotron indicates a big box for calling extra attention to some special content or information. It provides various layouts through different variants to suit your content presentation needs.
+
+## Table of Contents
+- [Best Practices](#best-practices)
+- [Responsive Behavior](#responsive-behavior)
+- [Variants](#variants)
+  - [Default Variant](#default-variant-classic)
+  - [Small Variant](#small-variant)
+  - [Hero Variant](#hero-variant)
+  - [Post Variant](#post-variant-full-overlay)
+  - [Post Split Variant](#post-split-variant)
+- [Component API](#component-api)
+- [Accessibility](#accessibility)
+
+## Best Practices
+- Use the `default` variant for main content sections and general announcements
+- Use the `hero` variant for page headers with background images and important messaging
+- Use the `post` variant for blog posts and articles with full-width image overlays
+- Use the `post-split` variant when you need to display image alongside content
+- Consider using `small` prop for less important or secondary sections
+
+## Responsive Behavior
+The component adapts to different screen sizes:
+- On mobile: Stacks content vertically, adjusts font sizes and padding
+- On tablet: Optimizes layout and spacing
+- On desktop: Full layout with optimal content width and spacing
+
+## Default Variant (Classic)
+The default variant is ideal for primary content sections. It supports custom intro, subtitle, and CTA content with centered layout.
+
+<div class="component-preview !block">
+    <Jumbotron 
+      variant="default"
+      title={`Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.`}
+    >
+        <p slot="subtitle"
+          class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
+        >Nunc posuere massa eget turpis laoreet ultrices eget vel massa.</p>
+        <Fragment slot="cta-content">
+          <Button primary rounded href="#" title="short text">
+            Read More
+          </Button>
+        </Fragment>
+    </Jumbotron>
+</div>
+
+```js
+<Jumbotron 
+  variant="default"
+  title={`Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.`}
+>
+    <p slot="subtitle"
+      class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
+    >
+      Nunc posuere massa eget turpis laoreet ultrices eget vel massa.
+    </p>
+    <Fragment slot="cta-content">
+      <Button primary rounded href="#" title="short text">
+        Read More
+      </Button>
+    </Fragment>
+</Jumbotron>
+```
+
+## Small Variant
+A more compact version of the default variant, useful for secondary content sections or when vertical space is limited.
+
+<div class="component-preview">
+    <Jumbotron 
+      variant="default"
+      small
+      title={`Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.`}
+    >
+        <p slot="subtitle"
+          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+        >Nunc posuere massa eget turpis laoreet ultrices eget vel massa.</p>
+    </Jumbotron>
+</div>
+
+```js
+<Jumbotron 
+  variant="default"
+  small
+  title={`Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.`}
+>
+    <p slot="subtitle"
+      class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+    >
+      Nunc posuere massa eget turpis laoreet ultrices eget vel massa.
+    </p>
+</Jumbotron>
+```
+
+## Hero Variant
+Perfect for page headers and key sections that need visual impact. Features a background image with gradient overlay and optional description and info text.
+
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Main Hero</b> Title"
+      description="Detailed description of the hero section goes here."
+      info="<span>Additional</span> information can be displayed here"
+      image="https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=1920&ext=jpg"
+    />
+</div>
+
+```js
+<Jumbotron
+  variant="hero"
+  title="<b>Main Hero</b> Title"
+  description="Detailed description of the hero section goes here."
+  info="<span>Additional</span> information can be displayed here"
+  image="https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=1920&ext=jpg"
+/>
+```
+
+### Hero Variant without image
+When used without an image, the hero variant provides a clean, simple header with a solid background color.
+
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Simple Hero</b> Title"
+      description="A clean and simple hero section without background image."
+      info="Perfect for text-focused content sections"
+    />
+</div>
+
+```js
+<Jumbotron
+  variant="hero"
+  title="<b>Simple Hero</b> Title"
+  description="A clean and simple hero section without background image."
+  info="Perfect for text-focused content sections"
+/>
+```
+
+### Hero Variant with Different Backgrounds
+Hero variant supports different background classes to match your design needs.
+
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Blue Darker Background</b> (Default)"
+      description="Uses the default bg-blue-darker background"
+    />
+</div>
+```js
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Blue Darker Background</b> (Default)"
+      description="Uses the default bg-blue-darker background"
+    />
+</div>
+```
+<br/>
+
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Blue Darkest Background</b>"
+      description="Uses blue-darkest background"
+      backgroundClass="bg-blue-darkest"
+    />
+</div>
+```js
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Blue Darkest Background</b>"
+      description="Uses blue-darkest background"
+      backgroundClass="bg-blue-darkest"
+    />
+</div>
+```
+<br/>
+
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Accent Background</b>"
+      description="Uses accent-darker background"
+      backgroundClass="bg-accent-darker"
+    />
+</div>
+
+```js
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Accent Background</b>"
+      description="Uses accent-darker background"
+      backgroundClass="bg-accent-darker"
+    />
+</div>
+```
+<br/>
+
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Gradient Background</b>"
+      description="Uses custom gradient background"
+      backgroundClass="bg-vw"
+    />
+</div>
+```js
+<div class="component-preview">
+    <Jumbotron
+      variant="hero"
+      title="<b>Gradient Background</b>"
+      description="Uses custom gradient background"
+      backgroundClass="bg-vw"
+    />
+</div>
+
+
+## Post Variant (Full Overlay)
+Designed for blog posts and articles, featuring a full-width image overlay with metadata support for author, date, and categories.
+
+<div class="component-preview">
+    <Jumbotron
+      variant="post"
+      title="Blog Post Title"
+      image="https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=1920&ext=jpg"
+      categories={[
+        { name: 'Technology', uri: '#' },
+        { name: 'Design', uri: '#' }
+      ]}
+      author={{
+        firstName: "John",
+        name: "John Doe"
+      }}
+      date="2024-02-12"
+    />
+</div>
+
+```js
+<Jumbotron
+  variant="post"
+  title="Blog Post Title"
+  image="https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=1920&ext=jpg"
+  categories={[
+    { name: 'Technology', uri: '#' },
+    { name: 'Design', uri: '#' }
+  ]}
+  author={{
+    firstName: "John",
+    name: "John Doe"
+  }}
+  date="2024-02-12"
+/>
+```
+
+## Post Split Variant
+A two-column layout variant for posts where image and content need equal emphasis. Great for featured articles or important announcements.
+
+<div class="component-preview pb-0 !block">
+    <Jumbotron
+      variant="post-split"
+      title="<b>Formatted</b> Blog Post Title <small>Lorem Ipsum</small>"
+      image="http://localhost:1234/_image?href=https%3A%2F%2Fimg.freepik.com%2Ffree-photo%2Fnature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg%3Fsize%3D960%26ext%3Djpg&w=1200&h=675&f=webp"
+      categories={[
+        { name: 'Technology', uri: '#' },
+        { name: 'Design', uri: '#' }
+      ]}
+      author={{
+        firstName: "John",
+        name: "John Doe"
+      }}
+      date="2024-02-12"
+    />
+</div>
+
+```js
+<Jumbotron
+  variant="post-split"
+  title="<b>Formatted</b> Blog Post Title <small>Lorem Ipsum</small>"
+  image="path/to/image.jpg"
+  categories={[
+    { name: 'Technology', uri: '#' },
+    { name: 'Design', uri: '#' }
+  ]}
+  author={{
+    firstName: "John",
+    name: "John Doe"
+  }}
+  date="2024-02-12"
+/>
+```
+
+## Custom Intro Slot Example
+Shows how to fully customize the header section using the intro slot. Useful for complex layouts or custom styling.
+
+<div class="component-preview">
+    <Jumbotron variant="default" small>
+        <h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl">
+          Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.
+        </h2>
+        <p slot="subtitle"
+          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+        >Nunc posuere massa eget turpis laoreet ultrices eget vel massa.</p>
+    </Jumbotron>
+</div>
+
+```js
+<Jumbotron variant="default" small>
+    <h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl">
+      Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.
+    </h2>
+    <p slot="subtitle"
+      class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+    >
+      Nunc posuere massa eget turpis laoreet ultrices eget vel massa.
+    </p>
+</Jumbotron>
+```
+
+## Component API
+
+### Common Props
+- `variant`: Layout variant ('default' | 'hero' | 'post' | 'post-split')
+  - default: 'default'
+- `title`: Main heading text. Supports HTML markup for styling.
+- `image`: Image URL (required for hero, post and post-split variants)
+
+### Default & Hero Props
+- `small`: Reduces vertical padding (useful for secondary content)
+- `description`: Secondary text below title (hero variant only)
+- `info`: Additional information text (hero variant only)
+
+### Post Variants Props
+- `date`: Publication date string
+- `author`: Author information object
+  - `firstName`: Author's first name (used in title attribute)
+  - `name`: Full author name (displayed)
+- `categories`: Array of category objects for post categorization
+  - `name`: Category display name
+  - `uri`: Category link URL
+
+### Slots
+- `intro`: Replaces the default title with custom content. Useful for complex headings or custom markup.
+- `subtitle`: Additional content below the title. Supports markdown and HTML.
+- `cta-content`: Call to action content (buttons, links etc.) - wrapped in centered container.
+
+## Accessibility
+- Use semantic HTML markup in slots
+- Ensure proper contrast for text over background images
+- Provide meaningful alt text for images
+- Title text supports HTML markup for better semantics and styling