spoko-design-system 1.3.7 → 1.4.1

package/src/pages/components/slimbanner.mdx

@@ -6,29 +6,254 @@ import SlimBanner from '../../components/SlimBanner.vue'
 
 # SlimBanner
 
-SlimBanner - solidarity with Ukraine.
+A flexible banner component for announcements, alerts, or calls to action. Supports custom messages, links, icons, and toggle states.
+
+## Basic Example (Ukraine Solidarity)
 
 <div class="component-preview">
   <SlimBanner
     class="w-full drop-shadow"
     client:load
+    message="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit"
+    linkText="this page"
+    linkUrl="https://polo.blue/support-ukraine/"
+    linkTitle="Support Ukraine"
+    showIcon
     showCloseButton
-    transition:name="slim-banner"
-    transition:persist
-    
+    toggleMessage="RUSSIA IS A TERRORIST STATE"
   />
 </div>
 
-```js
+```astro
 <SlimBanner
   class="w-full drop-shadow"
   client:load
+  message="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit"
+  linkText="this page"
+  linkUrl="https://polo.blue/support-ukraine/"
+  linkTitle="Support Ukraine"
+  showIcon
+  showCloseButton
+  toggleMessage="RUSSIA IS A TERRORIST STATE"
+/>
+```
+
+## Simple Announcement
+
+<div class="component-preview">
+  <SlimBanner
+    class="w-full drop-shadow"
+    client:load
+    message="🎉 New features are now available!"
+    linkText="Learn more"
+    linkUrl="/updates"
+    showCloseButton={false}
+  />
+</div>
+
+```astro
+<SlimBanner
+  message="🎉 New features are now available!"
+  linkText="Learn more"
+  linkUrl="/updates"
+  showCloseButton={false}
+/>
+```
+
+## Custom Message with Link
+
+<div class="component-preview">
+  <SlimBanner
+    class="w-full drop-shadow"
+    client:load
+    message="Limited time offer! Get 50% off all products. "
+    linkText="Shop now"
+    linkUrl="/shop"
+    linkTitle="Visit our shop"
+    showCloseButton={false}
+  />
+</div>
+
+```astro
+<SlimBanner
+  message="Limited time offer! Get 50% off all products. "
+  linkText="Shop now"
+  linkUrl="/shop"
+  linkTitle="Visit our shop"
+  showCloseButton={false}
+/>
+```
+
+## With Toggle State
+
+<div class="component-preview">
+  <SlimBanner
+    class="w-full drop-shadow"
+    client:load
+    message="Join us at the annual car meet this weekend!"
+    linkText="See the lineup"
+    linkUrl="/events"
+    showCloseButton
+    toggleMessage="🏁 TORQUE IS EVERYTHING"
+    toggleBgClass="bg-red-700"
+    toggleTextClass="text-white"
+  />
+</div>
+
+```astro
+<SlimBanner
+  message="Join us at the annual car meet this weekend!"
+  linkText="See the lineup"
+  linkUrl="/events"
   showCloseButton
-  transition:name="slim-banner"
-  transition:persist
+  toggleMessage="🏁 TORQUE IS EVERYTHING"
+  toggleBgClass="bg-red-700"
+  toggleTextClass="text-white"
 />
 ```
 
+## Message Only (No Link)
+
+<div class="component-preview">
+  <SlimBanner
+    class="w-full drop-shadow"
+    client:load
+    message="Scheduled maintenance: The site will be down on Sunday, 3-5 AM EST."
+    linkUrl=""
+    showCloseButton={false}
+  />
+</div>
+
+```astro
+<SlimBanner
+  message="Scheduled maintenance: The site will be down on Sunday, 3-5 AM EST."
+  linkUrl=""
+  showCloseButton={false}
+/>
+```
+
+## Persistent Banner (LocalStorage)
+
+Close the banner permanently using localStorage. It will stay hidden even after page refresh.
+
+<div class="component-preview">
+  <SlimBanner
+    class="w-full drop-shadow"
+    client:load
+    message="🍪 This website uses cookies to enhance your experience."
+    linkText="Learn more"
+    linkUrl="/privacy"
+    showCloseButton
+    persistClose
+    storageKey="cookie-banner-closed"
+    expirationDays={90}
+  />
+</div>
+
+```astro
+<SlimBanner
+  message="🍪 This website uses cookies to enhance your experience."
+  linkText="Learn more"
+  linkUrl="/privacy"
+  showCloseButton
+  persistClose
+  storageKey="cookie-banner-closed"
+  expirationDays={90}
+/>
+```
+
+**Note:** Once you close this banner, it won't show again for 90 days (or until you clear localStorage).
+
+## Persistent with No Expiration
+
+<div class="component-preview">
+  <SlimBanner
+    class="w-full drop-shadow"
+    client:load
+    message="📢 Important: This is a one-time announcement."
+    linkUrl=""
+    showCloseButton
+    persistClose
+    storageKey="announcement-dismissed"
+    expirationDays={0}
+  />
+</div>
+
+```astro
+<SlimBanner
+  message="📢 Important: This is a one-time announcement."
+  linkUrl=""
+  showCloseButton
+  persistClose
+  storageKey="announcement-dismissed"
+  expirationDays={0}
+/>
+```
+
+**Tip:** Set `expirationDays={0}` to hide the banner forever once closed.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `message` | String | Ukraine message | Main banner message text |
+| `linkText` | String | `'this page'` | Text for the link |
+| `linkUrl` | String | Ukraine URL | URL for the link (set to empty string for no link) |
+| `linkTitle` | String | `''` | Title attribute for the link |
+| `toggleMessage` | String | `''` | Message to show when close button is clicked (enables toggle) |
+| `toggleBgClass` | String | `'bg-black'` | Background class for toggle state |
+| `toggleTextClass` | String | `'text-white'` | Text color class for toggle state |
+| `showCloseButton` | Boolean | `true` | Show close/toggle button |
+| `closeButtonAriaLabel` | String | `'Toggle'` | Aria label for close button |
+| `showIcon` | Boolean | `false` | Show icon (Ukraine flag by default) |
+| `iconClass` | String | Ukraine flag CSS | Custom CSS class for icon |
+| `persistClose` | Boolean | `false` | Save close state to localStorage |
+| `storageKey` | String | `'slimbanner-closed'` | localStorage key for persistence |
+| `expirationDays` | Number | `30` | Days until localStorage expires (0 = never) |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Override the entire message content |
+| `icon` | Override the icon/flag |
+| `toggle` | Override the toggle state content |
+
+## Using Slots
+
+```astro
+<SlimBanner client:load>
+  <strong slot="default">Custom content</strong> with <em>HTML markup</em>
+</SlimBanner>
+```
+
+## LocalStorage Management
+
+When using `persistClose={true}`, the close state is saved to localStorage. Here's how to manage it:
+
+### Clear specific banner:
+```javascript
+localStorage.removeItem('cookie-banner-closed');
+```
+
+### Clear all banners:
+```javascript
+// If using default key
+localStorage.removeItem('slimbanner-closed');
+
+// Or clear all by pattern
+Object.keys(localStorage)
+  .filter(key => key.includes('banner'))
+  .forEach(key => localStorage.removeItem(key));
+```
+
+### Check if banner is closed:
+```javascript
+const data = JSON.parse(localStorage.getItem('cookie-banner-closed'));
+console.log('Banner closed:', data?.closed);
+console.log('Expires at:', new Date(data?.expires));
+```
+
 ## uno.config.ts / shortcuts
 ```js
 ['slimbanner','px-4 sm:px-8  flex items-center justify-center text-xs sm:text-base leading-none relative bg-gray-100  z-2 px-4 py-3 sm:(text-base px-8) text-blue-darker print-hidden'],

package/src/pages/core/colors.mdx

@@ -5,6 +5,17 @@ layout: ../../layouts/MainLayout.astro
 import MainColors from '../../components/MainColors.vue';
 
 <h1>Colors</h1>
-<p>Base colors.</p>
+<p>Base colors for the design system.</p>
 
-<MainColors class="mt-8" />
+## How to use
+
+Click on any element to copy values to your clipboard:
+
+- **Color swatch** - Click the large color box to copy the hex value
+- **Hex button** - Click to copy the hex color code (e.g., `#0040c5`)
+- **text- button** - Click to copy the text color class (e.g., `text-brand-primary`)
+- **bg- button** - Click to copy the background color class (e.g., `bg-brand-primary`)
+
+A green checkmark (✓) will appear when copied successfully.
+
+<MainColors class="mt-8" client:load />

package/src/pages/core/grid.mdx

@@ -87,3 +87,107 @@ Template inspired by [Kevin Powell](https://www.youtube.com/kevinpowell)
   </section>
 </main>
 ```
+
+## Full-width variants
+
+Additional utility classes for more flexible full-width layouts.
+
+### Full-width with Flexbox
+
+Use `.full-width-flex` when you need flexbox layout across the full width instead of grid.
+
+<div class="component-preview" style="display: block">
+<main class="flow content-grid bg-white pt-8">
+  <h2>Full-width Flexbox Example</h2>
+  <p>The section below uses flexbox for horizontal layout across the full width.</p>
+
+  <section class="full-width-flex bg-primary text-white section-padding justify-center gap-8">
+    <div class="text-center">
+      <h3 class="text-2xl font-bold">Feature 1</h3>
+      <p>Flexbox layout</p>
+    </div>
+    <div class="text-center">
+      <h3 class="text-2xl font-bold">Feature 2</h3>
+      <p>Full width span</p>
+    </div>
+    <div class="text-center">
+      <h3 class="text-2xl font-bold">Feature 3</h3>
+      <p>Easy alignment</p>
+    </div>
+  </section>
+
+  <p>Back to regular content width.</p>
+</main>
+</div>
+
+```html
+<section class="full-width-flex bg-primary text-white section-padding justify-center gap-8">
+  <div class="text-center">
+    <h3 class="text-2xl font-bold">Feature 1</h3>
+    <p>Flexbox layout</p>
+  </div>
+  <div class="text-center">
+    <h3 class="text-2xl font-bold">Feature 2</h3>
+    <p>Full width span</p>
+  </div>
+  <div class="text-center">
+    <h3 class="text-2xl font-bold">Feature 3</h3>
+    <p>Easy alignment</p>
+  </div>
+</section>
+```
+
+### Full-width Uncontained
+
+Use `.full-width-uncontained` when you want a full-width section where children also span the full width (not constrained to content area).
+
+<div class="component-preview" style="display: block">
+<main class="flow content-grid bg-white pt-8">
+  <h2>Full-width Uncontained Example</h2>
+  <p>The section below has a full-width background and its children span the full width too.</p>
+
+  <section class="full-width-uncontained bg-gray-100 section-padding">
+    <h3 class="bg-primary text-white py-4 text-center">This heading spans the entire width</h3>
+    <p class="bg-blue-100 py-4 text-center">This paragraph also spans the entire width</p>
+  </section>
+
+  <p>Back to regular content width.</p>
+</main>
+</div>
+
+```html
+<section class="full-width-uncontained bg-gray-100 section-padding">
+  <h3 class="bg-primary text-white py-4 text-center">This heading spans the entire width</h3>
+  <p class="bg-blue-100 py-4 text-center">This paragraph also spans the entire width</p>
+</section>
+```
+
+### Full-width Block
+
+Use `.full-width-block` for simple block-level full-width containers without grid or flex layout.
+
+<div class="component-preview" style="display: block">
+<main class="flow content-grid bg-white pt-8">
+  <h2>Full-width Block Example</h2>
+  <p>The image below is wrapped in a full-width-block container.</p>
+
+  <div class="full-width-block bg-gray-200">
+    <img src="https://unsplash.it/1600/300" alt="Full width example" style="width: 100%; display: block;" />
+  </div>
+
+  <p>Back to regular content width.</p>
+</main>
+</div>
+
+```html
+<div class="full-width-block bg-gray-200">
+  <img src="https://unsplash.it/1600/300" alt="Full width example" style="width: 100%; display: block;" />
+</div>
+```
+
+### Comparison
+
+- **`.full-width`** - Grid layout with children constrained to content area (default behavior)
+- **`.full-width-flex`** - Flexbox layout across full width
+- **`.full-width-uncontained`** - Grid layout with children spanning full width
+- **`.full-width-block`** - Simple block container at full width

package/src/styles/base/grid.css

@@ -29,6 +29,28 @@
     display: grid;
     grid-template-columns: inherit;
   }
+
+  /* Variant: full-width with flexbox layout instead of grid */
+  > .full-width-flex {
+    grid-column: full-width;
+    display: flex;
+  }
+
+  /* Variant: full-width container where children span the full width (not constrained to content area) */
+  > .full-width-uncontained {
+    grid-column: full-width;
+    display: grid;
+    grid-template-columns: inherit;
+
+    > * {
+      grid-column: full-width;
+    }
+  }
+
+  /* Variant: full-width block (no grid/flex on container, children flow naturally at full width) */
+  > .full-width-block {
+    grid-column: full-width;
+  }
 }
 
 img.full-width {

package/src/utils/text.ts

@@ -1,10 +1,12 @@
 export const text2paragraphs = (text: string, firstLineBottomMargin: boolean = false) => {
-  // return '<p class="mb-2">' + text.split(/[\n\r]+/g).join('</p><p>') + '</p>'
+  // Normalize line endings: convert \r\n to \n, then remove any remaining \r
+  const normalizedText = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
   let out =
     '<p' +
-    (firstLineBottomMargin ? 'class="mb-3"' : '') +
+    (firstLineBottomMargin ? ' class="mb-3"' : '') +
     '>' +
-    text.split('\n').join('</p><p>') +
+    normalizedText.split('\n').join('</p><p>') +
     '</p>';
   return out.split('<p></p><p>').join('<p class="mt-3">');
 };

package/.github/workflows/sonarcloud.yml

@@ -1,39 +0,0 @@
-name: SonarCloud Analysis
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  sonarcloud:
-    name: SonarCloud
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v5
-        with:
-          fetch-depth: 0  # Shallow clones should be disabled for better analysis
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10.17.1
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v5
-        with:
-          node-version: '22'
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build project
-        run: pnpm run build
-
-      - name: SonarCloud Scan
-        uses: SonarSource/sonarcloud-github-action@master
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
-          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}