spoko-design-system 1.16.2 → 1.18.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.18.0](https://github.com/polo-blue/sds/compare/v1.17.0...v1.18.0) (2025-12-07)
+
+### Features
+
+* **icons:** add bi:arrow-right-short icon ([edf3039](https://github.com/polo-blue/sds/commit/edf30393b8594cd50848aa7b38e0a84d2cc43a87))
+
+## [1.17.0](https://github.com/polo-blue/sds/compare/v1.16.2...v1.17.0) (2025-12-07)
+
+### Features
+
+* **Jumbotron:** add split and slim props to PostSplit variant ([831969f](https://github.com/polo-blue/sds/commit/831969ff0a3bacdfde8eeb0d33b84d518bff836f))
+
 ## [1.16.2](https://github.com/polo-blue/sds/compare/v1.16.1...v1.16.2) (2025-12-07)
 
 ### Bug Fixes

package/icon.config.ts

@@ -102,6 +102,7 @@ export const iconConfig: IconConfig = {
     ],
 
     bi: [
+      "arrow-right-short",
       "credit-card",
       "emoji-smile",
       "envelope-open",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.16.2",
+  "version": "1.18.0",
   "type": "module",
   "private": false,
   "main": "./index.ts",

package/src/components/Jumbotron/index.astro

@@ -12,7 +12,7 @@ interface Props {
   imageWidth?: number;
   imageHeight?: number;
   imageClass?: string;
-  small?: boolean;
+  slim?: boolean;
   description?: string;
   info?: string;
   date?: string;
@@ -22,6 +22,7 @@ interface Props {
   lang?: string;
   fullWidth?: boolean;
   align?: 'left' | 'center' | 'right';
+  split?: 'equal' | 'wide';
 }
 
 const {
@@ -31,7 +32,7 @@ const {
   imageWidth,
   imageHeight,
   imageClass,
-  small = false,
+  slim = false,
   description,
   info,
   date,
@@ -41,6 +42,7 @@ const {
   lang = 'en',
   fullWidth = false,
   align = 'left',
+  split = 'equal',
 } = Astro.props;
 
 // Helper (function to check if a slot has content)
@@ -74,7 +76,7 @@ const commonProps = {
 
 {
   variant === 'default' && (
-    <DefaultVariant {...commonProps} small={small}>
+    <DefaultVariant {...commonProps} slim={slim}>
       <slot name="intro" slot="intro" />
       <slot name="subtitle" slot="subtitle" />
       <slot name="cta-content" slot="cta-content" />
@@ -82,7 +84,7 @@ const commonProps = {
   )
 }
 
-{variant === 'hero' && <HeroVariant {...commonProps} description={description} info={info} small={small} />}
+{variant === 'hero' && <HeroVariant {...commonProps} description={description} info={info} slim={slim} />}
 
 {variant === 'post' && <PostVariant {...commonProps} author={author} date={date} categories={categories} />}
 
@@ -99,6 +101,8 @@ const commonProps = {
       imageClass={imageClass}
       fullWidth={fullWidth}
       align={align}
+      split={split}
+      slim={slim}
     />
   )
 }

package/src/components/Jumbotron/types.ts

@@ -15,9 +15,9 @@ export interface Props {
   title?: string;
   image?: string;
   backgroundClass?: string;
+  slim?: boolean;
 
   // Default & Hero variant props
-  small?: boolean;
   description?: string;
   info?: string;
 
@@ -25,4 +25,7 @@ export interface Props {
   date?: string;
   author?: Author;
   categories?: Category[];
+
+  // Post Split variant props
+  split?: 'equal' | 'wide';
 }

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

@@ -2,20 +2,20 @@
 // variants/Default.astro
 interface Props {
   title?: string;
-  small?: boolean;
+  slim?: boolean;
   hasIntroContent: boolean;
   hasSubtitleContent: boolean;
   hasCtaContent: boolean;
 }
 
-const { title = '', small = false, hasIntroContent, hasSubtitleContent, hasCtaContent } = Astro.props;
+const { title = '', slim = 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
+    slim ? 'jumbotron-container-small' : 'jumbotron-container-large', // wariant rozmiaru
   ]}
 >
   {hasIntroContent ? <slot name="intro" /> : <h1 class="jumbotron-title-default" set:html={title} />}

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

@@ -6,13 +6,13 @@ interface Props {
   description?: string;
   info?: string;
   backgroundClass?: string;
-  small?: boolean;
+  slim?: boolean;
 }
 
-const { title = '', image, description, info, backgroundClass, small = false } = Astro.props;
+const { title = '', image, description, info, backgroundClass, slim = false } = Astro.props;
 
-// Height classes based on small prop
-const heightClass = small ? 'py-6 min-h-32' : 'py-8 h-56 sm:h-72 md:max-h-72';
+// Height classes based on slim prop
+const heightClass = slim ? 'py-6 min-h-32' : 'py-8 h-56 sm:h-72 md:max-h-72';
 ---
 
 <div class={`relative w-full ${backgroundClass}`}>

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

@@ -19,6 +19,8 @@ interface Props {
   lang: string;
   fullWidth?: boolean;
   align?: 'left' | 'center' | 'right';
+  split?: 'equal' | 'wide';
+  slim?: boolean;
 }
 
 // Note: imageClass allows responsive image sizing via Tailwind/UnoCSS classes
@@ -39,8 +41,18 @@ const {
   lang = 'en',
   fullWidth = false,
   align = 'left',
+  split = 'equal',
+  slim = false,
 } = Astro.props;
 
+// Grid classes based on split prop
+// equal = 50/50, wide = 2/3 text + 1/3 image
+const splitClasses = {
+  equal: 'jumbotron-split-header',
+  wide: 'jumbotron-split-header jumbotron-split-header-wide',
+};
+const splitClass = splitClasses[split];
+
 // Alignment determines content and image position
 // align="left" = content left, image right (default)
 // align="center" = both centered
@@ -68,9 +80,15 @@ const cleanTitle = stripHtml(title);
 
 <div class:list={['jumbotron-split-wrapper bg-blue-900 bg-vw', { 'full-width-block': fullWidth }]}>
   <div class="jumbotron-split-container">
-    <header class="jumbotron-split-header">
+    <header class:list={[splitClass, { 'jumbotron-split-header-slim': slim }]}>
       <div class="heading flex flex-wrap text-white relative items-center mt-auto w-full z-[2]">
-        <div class:list={['jumbotron-split-content', contentMarginClass]}>
+        <div
+          class:list={[
+            'jumbotron-split-content',
+            contentMarginClass,
+            { 'jumbotron-split-content-slim': slim },
+          ]}
+        >
           <h1 class="jumbotron-split-title" set:html={title} />
 
           {description && <p class="jumbotron-description order-3 w-full mt-0" set:html={description} />}
@@ -101,8 +119,14 @@ const cleanTitle = stripHtml(title);
 
       {
         image && (
-          <div class:list={['jumbotron-split-image-wrapper', imageWrapperClass]}>
-            <div class:list={['jumbotron-split-image', imageClass]}>
+          <div
+            class:list={[
+              'jumbotron-split-image-wrapper',
+              imageWrapperClass,
+              { 'jumbotron-split-image-wrapper-slim': slim },
+            ]}
+          >
+            <div class:list={['jumbotron-split-image', imageClass, { 'jumbotron-split-image-slim': slim }]}>
               <Image
                 class="jumbotron-split-img"
                 src={image}

package/src/pages/components/jumbotron.mdx

@@ -14,7 +14,7 @@ A Jumbotron indicates a big box for calling extra attention to some special cont
 - [Responsive Behavior](#responsive-behavior)
 - [Variants](#variants)
   - [Default Variant](#default-variant-classic)
-  - [Small Variant](#small-variant)
+  - [Slim Variant](#slim-variant)
   - [Hero Variant](#hero-variant)
   - [Post Variant](#post-variant-full-overlay)
   - [Post Split Variant](#post-split-variant)
@@ -26,7 +26,7 @@ A Jumbotron indicates a big box for calling extra attention to some special cont
 - 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
+- Consider using `slim` prop for less important or secondary sections
 
 ## Responsive Behavior
 The component adapts to different screen sizes:
@@ -71,13 +71,13 @@ The default variant is ideal for primary content sections. It supports custom in
 </Jumbotron>
 ```
 
-## Small Variant
+## Slim 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 
+    <Jumbotron
       variant="default"
-      small
+      slim
       title={`Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.`}
     >
         <p slot="subtitle"
@@ -87,9 +87,9 @@ A more compact version of the default variant, useful for secondary content sect
 </div>
 
 ```js
-<Jumbotron 
+<Jumbotron
   variant="default"
-  small
+  slim
   title={`Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.`}
 >
     <p slot="subtitle"
@@ -355,6 +355,71 @@ Use the `imageClass` prop to control image dimensions with Tailwind/UnoCSS class
 />
 ```
 
+### Post Split Slim Version
+Use the `slim` prop to reduce vertical padding and image height. Useful for secondary content or when vertical space is limited.
+
+<div class="component-preview pb-0 !block">
+    <Jumbotron
+      variant="post-split"
+      title="Slim Post Split"
+      image="https://img.freepik.com/premium-photo/tranquil-scene-nature-beauty-tropical-rainforest-adventure-generated-by-artificial-intelligence_188544-83820.jpg?w=1200&h=675&f=webp"
+      slim
+    />
+</div>
+
+```js
+<Jumbotron
+  variant="post-split"
+  title="Slim Post Split"
+  image="path/to/image.jpg"
+  slim
+/>
+```
+
+### Post Split with Column Split Ratio
+Use the `split` prop to control the column width ratio between text and image on desktop. Available options: `equal` (default 50/50), `wide` (2/3 text + 1/3 image).
+
+<div class="component-preview pb-0 !block">
+    <Jumbotron
+      variant="post-split"
+      title="Wide Split (2/3 + 1/3)"
+      image="https://img.freepik.com/premium-photo/tranquil-scene-nature-beauty-tropical-rainforest-adventure-generated-by-artificial-intelligence_188544-83820.jpg?w=1200&h=675&f=webp"
+      split="wide"
+    />
+</div>
+
+```js
+<Jumbotron
+  variant="post-split"
+  title="Wide Split (2/3 + 1/3)"
+  image="path/to/image.jpg"
+  split="wide"
+/>
+```
+
+### Post Split Slim with Wide Split
+Combine `slim` and `split="wide"` for a compact layout with 2/3 + 1/3 column ratio.
+
+<div class="component-preview pb-0 !block">
+    <Jumbotron
+      variant="post-split"
+      title="Slim Wide Split"
+      image="https://img.freepik.com/premium-photo/tranquil-scene-nature-beauty-tropical-rainforest-adventure-generated-by-artificial-intelligence_188544-83820.jpg?w=1200&h=675&f=webp"
+      slim
+      split="wide"
+    />
+</div>
+
+```js
+<Jumbotron
+  variant="post-split"
+  title="Slim Wide Split"
+  image="path/to/image.jpg"
+  slim
+  split="wide"
+/>
+```
+
 ### Post Split with Text Alignment
 Use the `align` prop to control text alignment within the content area. Available options: `left` (default), `center`, `right`.
 
@@ -398,7 +463,7 @@ Use the `align` prop to control text alignment within the content area. Availabl
 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>
+    <Jumbotron variant="default" slim>
         <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>
@@ -409,7 +474,7 @@ Shows how to fully customize the header section using the intro slot. Useful for
 </div>
 
 ```js
-<Jumbotron variant="default" small>
+<Jumbotron variant="default" slim>
     <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>
@@ -428,9 +493,9 @@ Shows how to fully customize the header section using the intro slot. Useful for
   - default: 'default'
 - `title`: Main heading text. Supports HTML markup for styling.
 - `image`: Image URL (required for hero, post and post-split variants)
+- `slim`: Reduces vertical padding and height (works with default, hero, 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)
 
@@ -450,6 +515,9 @@ Shows how to fully customize the header section using the intro slot. Useful for
 - `description`: Optional description text below the title
 - `fullWidth`: When true, adds `full-width-block` class for full viewport width
 - `align`: Text alignment within content area ('left' | 'center' | 'right', default: 'left')
+- `split`: Column width ratio on desktop ('equal' | 'wide', default: 'equal')
+  - `equal`: 50/50 split between text and image
+  - `wide`: 2/3 text + 1/3 image split
 
 ### Slots
 - `intro`: Replaces the default title with custom content. Useful for complex headings or custom markup.

package/uno-config/theme/shortcuts/jumbotron.ts

@@ -54,13 +54,18 @@ export const jumbotronShortcuts = [
   ['jumbotron-split-wrapper', 'w-full'],
   ['jumbotron-split-container', 'xl:container mx-auto px-3.5 md:px-0'],
   ['jumbotron-split-header', 'w-full justify-center text-white z-2 mt-auto md:(grid grid-cols-2) pb-4 mb-8'],
+  ['jumbotron-split-header-wide', 'md:grid-cols-[2fr_1fr]'],
+  ['jumbotron-split-header-slim', 'pb-2 mb-4'],
   ['jumbotron-split-content', 'pl-4 pr-8 py-5 xl:(py-0 pl-0) flex flex-wrap'],
+  ['jumbotron-split-content-slim', 'py-3 xl:py-0'],
   [
     'jumbotron-split-title',
     'font-headlight text-3xl md:(text-4xl mb-3) xl:text-11 mt-1 order-2 line-clamp-3 pb-1 w-full',
   ],
   ['jumbotron-split-meta', 'order-3 flex items-center text-gray-100'],
   ['jumbotron-split-image-wrapper', 'relative -mb-8 md:mt-4'],
+  ['jumbotron-split-image-wrapper-slim', '-mb-4 md:mt-2'],
   ['jumbotron-split-image', 'relative shadow-xl md:max-h-112 overflow-hidden'],
+  ['jumbotron-split-image-slim', 'md:max-h-72'],
   ['jumbotron-split-img', 'object-cover'],
 ];