spoko-design-system 1.14.1 → 1.15.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.15.0](https://github.com/polo-blue/sds/compare/v1.14.2...v1.15.0) (2025-12-07)
+
+### Features
+
+* **Jumbotron:** add imageClass prop for responsive image sizing ([56d6392](https://github.com/polo-blue/sds/commit/56d6392721eb3bd7509d5b064cb00d4b81aa6d9c))
+
+## [1.14.2](https://github.com/polo-blue/sds/compare/v1.14.1...v1.14.2) (2025-12-07)
+
+### Bug Fixes
+
+* **jumbotron:** make description margin conditional per variant ([6c8e59d](https://github.com/polo-blue/sds/commit/6c8e59d813aa512f210503f4ac9facfb3f9b23d6))
+
 ## [1.14.1](https://github.com/polo-blue/sds/compare/v1.14.0...v1.14.1) (2025-12-07)
 
 ### Bug Fixes

package/package.json

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

package/src/components/Jumbotron/index.astro

@@ -11,6 +11,7 @@ interface Props {
   image?: string;
   imageWidth?: number;
   imageHeight?: number;
+  imageClass?: string;
   small?: boolean;
   description?: string;
   info?: string;
@@ -29,6 +30,7 @@ const {
   image,
   imageWidth,
   imageHeight,
+  imageClass,
   small = false,
   description,
   info,
@@ -94,6 +96,7 @@ const commonProps = {
       description={description}
       imageWidth={imageWidth}
       imageHeight={imageHeight}
+      imageClass={imageClass}
       fullWidth={fullWidth}
       align={align}
     />

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

@@ -27,12 +27,8 @@ const { title = '', image, description, info, backgroundClass } = Astro.props;
         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} />}
+      {description && <div class="jumbotron-description mt-4" set:html={description} />}
+      {info && <div class="jumbotron-info" set:html={info} />}
     </header>
   </div>
 </div>

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

@@ -10,6 +10,7 @@ interface Props {
   image?: string;
   imageWidth?: number;
   imageHeight?: number;
+  imageClass?: string;
   author?: Author;
   date?: string;
   categories?: Category[];
@@ -20,12 +21,16 @@ interface Props {
   align?: 'left' | 'center' | 'right';
 }
 
+// Note: imageClass allows responsive image sizing via Tailwind/UnoCSS classes
+// Example: imageClass="max-w-100 lg:max-w-80" for responsive max-width control
+
 const {
   title = '',
   description,
   image,
   imageWidth = 768,
   imageHeight = 432,
+  imageClass,
   author,
   date,
   categories = [],
@@ -65,7 +70,7 @@ const cleanTitle = stripHtml(title);
         <div class="jumbotron-split-content">
           <h1 class="jumbotron-split-title" set:html={title} />
 
-          {description && <p class="jumbotron-description order-3 w-full" set:html={description} />}
+          {description && <p class="jumbotron-description order-3 w-full mt-0" set:html={description} />}
 
           {
             hasCategories && (
@@ -94,7 +99,7 @@ const cleanTitle = stripHtml(title);
       {
         image && (
           <div class="jumbotron-split-image-wrapper">
-            <div class="jumbotron-split-image">
+            <div class:list={['jumbotron-split-image', imageClass]}>
               <Image
                 class="jumbotron-split-img"
                 src={image}

package/src/pages/components/jumbotron.mdx

@@ -326,6 +326,35 @@ Use `fullWidth` prop to make the jumbotron span the full viewport width, useful
 />
 ```
 
+### Post Split with Responsive Image Sizing
+Use the `imageClass` prop to control image dimensions with Tailwind/UnoCSS classes. This allows responsive sizing at different breakpoints.
+
+```js
+// Limit image width on desktop
+<Jumbotron
+  variant="post-split"
+  title="Post with Custom Image Size"
+  image="path/to/image.jpg"
+  imageClass="max-w-100 lg:max-w-80"
+/>
+
+// Limit both width and height
+<Jumbotron
+  variant="post-split"
+  title="Category with Small Image"
+  image="path/to/image.jpg"
+  imageClass="max-w-75 max-h-50"
+/>
+
+// Different sizes at breakpoints
+<Jumbotron
+  variant="post-split"
+  title="Responsive Image"
+  image="path/to/image.jpg"
+  imageClass="max-w-full md:max-w-80 lg:max-w-100"
+/>
+```
+
 ### Post Split with Text Alignment
 Use the `align` prop to control text alignment within the content area. Available options: `left` (default), `center`, `right`.
 
@@ -417,6 +446,8 @@ Shows how to fully customize the header section using the intro slot. Useful for
 ### Post Split Props
 - `imageWidth`: Custom image width in pixels (default: 768)
 - `imageHeight`: Custom image height in pixels (default: 432)
+- `imageClass`: Tailwind/UnoCSS classes for responsive image sizing (e.g., `max-w-100 lg:max-w-80`)
+- `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')
 

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

@@ -47,7 +47,7 @@ export const jumbotronShortcuts = [
   ['jumbotron-categories', 'order-1 mt-4'],
 
   // Content styles
-  ['jumbotron-description', 'mb-1 line-clamp-3 text-base sm:text-lg leading-none mt-4'],
+  ['jumbotron-description', 'mb-1 line-clamp-3 text-base sm:text-lg leading-tight'],
   ['jumbotron-info', 'font-medium mb-4 line-clamp-1 text-base sm:text-lg mt-2'],
 
   // Post Split variant
@@ -61,6 +61,6 @@ export const jumbotronShortcuts = [
   ],
   ['jumbotron-split-meta', 'order-4 flex items-center text-gray-100'],
   ['jumbotron-split-image-wrapper', 'relative -mb-8 md:(mt-4 -ml-4 mr-4) xl:(ml-0 mr-0)'],
-  ['jumbotron-split-image', 'relative shadow-xl md:max-h-112 overflow-hidden md:ml-auto'],
+  ['jumbotron-split-image', 'relative shadow-xl overflow-hidden md:ml-auto'],
   ['jumbotron-split-img', 'object-cover'],
 ];