spoko-design-system 1.16.1 → 1.16.2

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.16.2](https://github.com/polo-blue/sds/compare/v1.16.1...v1.16.2) (2025-12-07)
+
+### Bug Fixes
+
+* **Jumbotron:** make align prop work correctly in PostSplit variant ([9e0f7df](https://github.com/polo-blue/sds/commit/9e0f7df15666c7af54c9709b6fe36f4845afaebd))
+
 ## [1.16.1](https://github.com/polo-blue/sds/compare/v1.16.0...v1.16.1) (2025-12-07)
 
 ### Bug Fixes

package/package.json

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

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

@@ -41,13 +41,21 @@ const {
   align = 'left',
 } = Astro.props;
 
-// Alignment class mapping
-const alignmentClasses = {
-  left: 'justify-start',
-  center: 'justify-center',
-  right: 'justify-end',
+// Alignment determines content and image position
+// align="left" = content left, image right (default)
+// align="center" = both centered
+// align="right" = content right, image left
+
+// Content wrapper margin classes
+const contentMarginClasses = {
+  left: 'mr-auto',
+  center: 'mx-auto text-center',
+  right: 'ml-auto text-right',
 };
-const alignmentClass = alignmentClasses[align];
+const contentMarginClass = contentMarginClasses[align];
+
+// Image is always aligned to the right
+const imageWrapperClass = 'ml-auto';
 
 // Helper function to remove HTML tags
 const stripHtml = (html: string) => {
@@ -61,13 +69,8 @@ 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">
-      <div
-        class:list={[
-          'heading flex flex-wrap text-white relative items-center mt-auto w-full z-[2]',
-          alignmentClass,
-        ]}
-      >
-        <div class="jumbotron-split-content">
+      <div class="heading flex flex-wrap text-white relative items-center mt-auto w-full z-[2]">
+        <div class:list={['jumbotron-split-content', contentMarginClass]}>
           <h1 class="jumbotron-split-title" set:html={title} />
 
           {description && <p class="jumbotron-description order-3 w-full mt-0" set:html={description} />}
@@ -98,7 +101,7 @@ const cleanTitle = stripHtml(title);
 
       {
         image && (
-          <div class="jumbotron-split-image-wrapper">
+          <div class:list={['jumbotron-split-image-wrapper', imageWrapperClass]}>
             <div class:list={['jumbotron-split-image', imageClass]}>
               <Image
                 class="jumbotron-split-img"

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

@@ -54,13 +54,13 @@ 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-content', 'pl-4 pr-8 py-5 xl:(py-0 pl-0) flex flex-wrap ml-auto'],
+  ['jumbotron-split-content', 'pl-4 pr-8 py-5 xl:(py-0 pl-0) flex flex-wrap'],
   [
     '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 -ml-4 mr-4) xl:(ml-0 mr-0)'],
+  ['jumbotron-split-image-wrapper', 'relative -mb-8 md:mt-4'],
   ['jumbotron-split-image', 'relative shadow-xl md:max-h-112 overflow-hidden'],
   ['jumbotron-split-img', 'object-cover'],
 ];