spoko-design-system 1.12.1 → 1.13.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.13.1](https://github.com/polo-blue/sds/compare/v1.13.0...v1.13.1) (2025-12-06)
+
+### Bug Fixes
+
+* **jumbotron:** remove ml-auto from split-content and add align prop docs ([43b4924](https://github.com/polo-blue/sds/commit/43b49244843d3cd9bb202ead0330d7f76737c120))
+
+## [1.13.0](https://github.com/polo-blue/sds/compare/v1.12.1...v1.13.0) (2025-12-06)
+
+### Features
+
+* **jumbotron:** add align prop to PostSplit variant ([b3bd696](https://github.com/polo-blue/sds/commit/b3bd6967fca48eea0ca11d225c320e210bcf749e))
+
 ## [1.12.1](https://github.com/polo-blue/sds/compare/v1.12.0...v1.12.1) (2025-12-06)
 
 ### Bug Fixes

package/package.json

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

package/src/components/Jumbotron/index.astro

@@ -20,6 +20,7 @@ interface Props {
   backgroundClass?: string;
   lang?: string;
   fullWidth?: boolean;
+  align?: 'left' | 'center' | 'right';
 }
 
 const {
@@ -37,6 +38,7 @@ const {
   backgroundClass = 'bg-blue-darker',
   lang = 'en',
   fullWidth = false,
+  align = 'left',
 } = Astro.props;
 
 // Helper (function to check if a slot has content)
@@ -92,6 +94,7 @@ const commonProps = {
       imageWidth={imageWidth}
       imageHeight={imageHeight}
       fullWidth={fullWidth}
+      align={align}
     />
   )
 }

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

@@ -16,6 +16,7 @@ interface Props {
   hasCategories: boolean;
   lang: string;
   fullWidth?: boolean;
+  align?: 'left' | 'center' | 'right';
 }
 
 const {
@@ -30,8 +31,17 @@ const {
   hasCategories,
   lang = 'en',
   fullWidth = false,
+  align = 'left',
 } = Astro.props;
 
+// Alignment class mapping
+const alignmentClasses = {
+  left: 'justify-start',
+  center: 'justify-center',
+  right: 'justify-end',
+};
+const alignmentClass = alignmentClasses[align];
+
 // Helper function to remove HTML tags
 const stripHtml = (html: string) => {
   return html.replace(/<[^>]*>/g, '');
@@ -45,7 +55,10 @@ const cleanTitle = stripHtml(title);
   <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]"
+        class:list={[
+          'heading flex flex-wrap text-white relative items-center mt-auto w-full z-[2]',
+          alignmentClass,
+        ]}
       >
         <div class="jumbotron-split-content">
           <h1 class="jumbotron-split-title" set:html={title} />

package/src/pages/components/jumbotron.mdx

@@ -326,6 +326,45 @@ Use `fullWidth` prop to make the jumbotron span the full viewport width, useful
 />
 ```
 
+### Post Split with Text Alignment
+Use the `align` prop to control text alignment within the content area. Available options: `left` (default), `center`, `right`.
+
+<div class="component-preview pb-0 !block">
+    <Jumbotron
+      variant="post-split"
+      title="Left Aligned Content"
+      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"
+      align="left"
+    />
+</div>
+
+```js
+<Jumbotron
+  variant="post-split"
+  title="Left Aligned Content"
+  image="path/to/image.jpg"
+  align="left"
+/>
+```
+
+<div class="component-preview pb-0 !block">
+    <Jumbotron
+      variant="post-split"
+      title="Center Aligned Content"
+      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"
+      align="center"
+    />
+</div>
+
+```js
+<Jumbotron
+  variant="post-split"
+  title="Center Aligned Content"
+  image="path/to/image.jpg"
+  align="center"
+/>
+```
+
 ## Custom Intro Slot Example
 Shows how to fully customize the header section using the intro slot. Useful for complex layouts or custom styling.
 
@@ -379,6 +418,7 @@ Shows how to fully customize the header section using the intro slot. Useful for
 - `imageWidth`: Custom image width in pixels (default: 768)
 - `imageHeight`: Custom image height in pixels (default: 432)
 - `fullWidth`: When true, adds `full-width-block` class for full viewport width
+- `align`: Text alignment within content area ('left' | 'center' | 'right', default: 'left')
 
 ### Slots
 - `intro`: Replaces the default title with custom content. Useful for complex headings or custom markup.

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

@@ -1,48 +1,66 @@
-// shortcuts/jumbotron.ts
-// import { COLORS, LAYOUT, TRANSITIONS, IMAGE_STYLES } from './constants'
-import { breakpoints } from './../breakpoints';
-
-
-
-
-export const jumbotronShortcuts = [
-  // Default variant
-  ['jumbotron-header-base', 'relative mx-auto my-auto w-full text-center py-8'],
-  ['jumbotron-container-small', 'md:min-h-xs sm:py-12 md:py-14 lg:py-16 xl:py-20'],
-  ['jumbotron-container-large', 'md:min-h-md sm:py-16 md:py-20 lg:py-28 xl:py-32'],
-  ['jumbotron-title-default', 'text-3xl headline-light text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl'],
-  ['jumbotron-cta-wrapper', 'mt-5 sm:(mt-8 flex justify-center)'],
-
-  // Hero variant
-  ['jumbotron-hero-wrapper', 'relative w-full'],
-  ['jumbotron-hero-image', 'absolute inset-0 w-full h-full'],
-  ['jumbotron-hero-overlay', 'absolute inset-0 bg-gradient-to-r from-blue-900 to-transparent opacity-90 z-1'],
-  ['jumbotron-hero-container', 'xl:container mx-auto px-3.5 md:px-8 py-8 h-56 sm:h-72 md:max-h-72 items-center flex'],
-  ['jumbotron-hero-header', 'relative z-10 text-white'],
-  ['jumbotron-hero-title', 'font-headlight text-3xl sm:text-4xl md:text-5xl xl:text-6xl mt-1 line-clamp-3 leading-tight'],
-
-  // Post variant
-  ['jumbotron-post-header', 'post-header pt-11 w-full justify-center text-white z-2 relative'],
-  ['jumbotron-post-heading', 'heading text-white relative flex items-center justify-center mt-auto w-full z-[2]'],
-  ['jumbotron-post-container', `w-full sm:max-w-[${breakpoints.sm}] md:max-w-3xl lg:max-w-5xl xl:max-w-7xl 2xl:max-w-[${breakpoints['2xl']}] px-4 py-5 flex flex-col flex-wrap`],
-  ['jumbotron-post-title', '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'],
-
-  // Metadata and categories
-  ['jumbotron-meta', 'order-3 flex items-center text-gray-100'],
-  ['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-info', 'font-medium mb-4 line-clamp-1 text-base sm:text-lg mt-2'],
-
-  // Post Split variant
-  ['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-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', 'relative shadow-xl md:max-h-112 overflow-hidden md:ml-auto'],
-  ['jumbotron-split-img', 'object-cover']
-];
+// shortcuts/jumbotron.ts
+// import { COLORS, LAYOUT, TRANSITIONS, IMAGE_STYLES } from './constants'
+import { breakpoints } from './../breakpoints';
+
+export const jumbotronShortcuts = [
+  // Default variant
+  ['jumbotron-header-base', 'relative mx-auto my-auto w-full text-center py-8'],
+  ['jumbotron-container-small', 'md:min-h-xs sm:py-12 md:py-14 lg:py-16 xl:py-20'],
+  ['jumbotron-container-large', 'md:min-h-md sm:py-16 md:py-20 lg:py-28 xl:py-32'],
+  [
+    'jumbotron-title-default',
+    'text-3xl headline-light text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl',
+  ],
+  ['jumbotron-cta-wrapper', 'mt-5 sm:(mt-8 flex justify-center)'],
+
+  // Hero variant
+  ['jumbotron-hero-wrapper', 'relative w-full'],
+  ['jumbotron-hero-image', 'absolute inset-0 w-full h-full'],
+  ['jumbotron-hero-overlay', 'absolute inset-0 bg-gradient-to-r from-blue-900 to-transparent opacity-90 z-1'],
+  [
+    'jumbotron-hero-container',
+    'xl:container mx-auto px-3.5 md:px-8 py-8 h-56 sm:h-72 md:max-h-72 items-center flex',
+  ],
+  ['jumbotron-hero-header', 'relative z-10 text-white'],
+  [
+    'jumbotron-hero-title',
+    'font-headlight text-3xl sm:text-4xl md:text-5xl xl:text-6xl mt-1 line-clamp-3 leading-tight',
+  ],
+
+  // Post variant
+  ['jumbotron-post-header', 'post-header pt-11 w-full justify-center text-white z-2 relative'],
+  [
+    'jumbotron-post-heading',
+    'heading text-white relative flex items-center justify-center mt-auto w-full z-[2]',
+  ],
+  [
+    'jumbotron-post-container',
+    `w-full sm:max-w-[${breakpoints.sm}] md:max-w-3xl lg:max-w-5xl xl:max-w-7xl 2xl:max-w-[${breakpoints['2xl']}] px-4 py-5 flex flex-col flex-wrap`,
+  ],
+  [
+    'jumbotron-post-title',
+    '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',
+  ],
+
+  // Metadata and categories
+  ['jumbotron-meta', 'order-3 flex items-center text-gray-100'],
+  ['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-info', 'font-medium mb-4 line-clamp-1 text-base sm:text-lg mt-2'],
+
+  // Post Split variant
+  ['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'],
+  [
+    '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', 'relative shadow-xl md:max-h-112 overflow-hidden md:ml-auto'],
+  ['jumbotron-split-img', 'object-cover'],
+];