spoko-design-system 0.3.2 → 0.3.8

package/README.md

@@ -66,7 +66,7 @@ export const SIDEBAR = [
     { text: "Introduction", link: "/core/introduction" },
     ...,
     { text: "Components", header: true },
-    { text: "Buttons", link: "/components/jumbatron" },
+    { text: "Buttons", link: "/components/jumbotron" },
     ...,
     { text: "New section", header: true },
     { text: "New component", link: "/new-section/new-component.md" },
@@ -81,7 +81,7 @@ You're free to organize the pages however you want.
 
 ### Customizing Core section (colors, typography, shadows...)
 
-If you want to customize the default colors, typography or shadows you can find the configuration file at `src/config/design.config.ts`.  I think I have prepared enough shades of blue ;-)
+If you want to customize the default colors, typography or shadows you can find the configuration file at uno.config.ts`.  I think I have prepared enough shades of blue ;-)
 
 Feel free to add new pages to the Core section
 

package/astro.config.mjs

@@ -10,6 +10,9 @@ import pagefind from "astro-pagefind";
 import AstroPWA from '@vite-pwa/astro';
 import metaTags from "astro-meta-tags";
 import playformInline from "@playform/inline";
+import { createSdsConfig } from './uno-config';
+
+const unoConfig = createSdsConfig();
 
 // https://astro.build/config
 export default defineConfig({
@@ -72,8 +75,10 @@ export default defineConfig({
     experimental: {
       directoryAndTrailingSlashHandler: true
     }
-  }), UnoCSS({
-    injectReset: true
+  }), 
+  UnoCSS({
+    injectReset: true,
+    ...unoConfig
   }),
   icon(iconConfig), 
   metaTags(),

package/index.ts

@@ -8,7 +8,7 @@ export { default as FuckRussia } from './src/components/FuckRussia.vue';
 export { default as FlagPL } from './src/components/flags/FlagPL.vue';
 export { default as Badges } from './src/components/Badges.vue';
 export { default as SlimBanner } from './src/components/SlimBanner.vue';
-export { default as Jumbatron } from './src/components/Jumbatron.vue';
+export { default as Jumbotron } from './src/components/Jumbotron.astro';
 export { default as Button } from './src/components/Button.vue';
 export { default as Breadcrumbs } from './src/components/Breadcrumbs.vue';
 export { default as ProductDetailsList } from './src/components/ProductDetailsList.vue';

package/package.json

@@ -1,119 +1,119 @@
-{
-  "name": "spoko-design-system",
-  "version": "0.3.02",
-  "private": false,
-  "main": "./index.ts",
-  "module": "./index.ts",
-  "types": "./index.ts",
-  "exports": {
-    ".": {
-      "import": "./index.ts",
-      "require": "./index.ts"
-    },
-    "./styles/*": "./src/styles/*",
-    "./icons": "./icon.config.ts",
-    "./icon-collections": "./icon.collections.ts",
-    "./uno-config": "./uno-config/index.ts"
-  },
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/polo-blue/sds"
-  },
-  "author": {
-    "name": "spokospace",
-    "email": "szymon@spoko.space",
-    "url": "https://spoko.space"
-  },
-  "homepage": "https://sds.spoko.space/",
-  "license": "MIT",
-  "keywords": [
-    "astro-starter",
-    "seo",
-    "astro",
-    "sds design system",
-    "spoko design system"
-  ],
-  "dependencies": {
-    "@algolia/client-search": "^5.20.2",
-    "@astrojs/mdx": "^4.0.8",
-    "@astrojs/node": "^9.0.2",
-    "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/ts-plugin": "^1.10.4",
-    "@astrojs/vue": "^5.0.6",
-    "@docsearch/css": "^3.8.3",
-    "@iconify-json/ant-design": "^1.2.5",
-    "@iconify-json/bi": "^1.2.2",
-    "@iconify-json/bx": "^1.2.2",
-    "@iconify-json/carbon": "^1.2.6",
-    "@iconify-json/circle-flags": "^1.2.6",
-    "@iconify-json/ei": "^1.2.2",
-    "@iconify-json/el": "^1.2.1",
-    "@iconify-json/eos-icons": "^1.2.2",
-    "@iconify-json/et": "^1.2.1",
-    "@iconify-json/flowbite": "^1.2.4",
-    "@iconify-json/fluent": "^1.2.13",
-    "@iconify-json/fluent-emoji": "1.2.3",
-    "@iconify-json/ic": "^1.2.2",
-    "@iconify-json/icon-park-outline": "^1.2.2",
-    "@iconify-json/la": "^1.2.1",
-    "@iconify-json/material-symbols-light": "^1.2.14",
-    "@iconify-json/mdi": "^1.2.3",
-    "@iconify-json/noto-v1": "^1.2.1",
-    "@iconify-json/octicon": "^1.2.4",
-    "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.24",
-    "@iconify-json/system-uicons": "^1.2.2",
-    "@iconify-json/uil": "^1.2.3",
-    "@iconify/json": "^2.2.305",
-    "@iconify/vue": "^4.3.0",
-    "@playform/compress": "^0.1.7",
-    "@playform/inline": "^0.1.1",
-    "@types/node": "^22.13.1",
-    "@unocss/astro": "^65.4.3",
-    "@unocss/preset-attributify": "^65.4.3",
-    "@unocss/preset-typography": "^65.4.3",
-    "@unocss/preset-uno": "^65.4.3",
-    "@unocss/preset-web-fonts": "^65.4.3",
-    "@unocss/preset-wind": "^65.4.3",
-    "@unocss/reset": "^65.4.3",
-    "@vite-pwa/astro": "^0.5.0",
-    "@vueuse/core": "^12.5.0",
-    "astro-i18next": "1.0.0-beta.21",
-    "astro-icon": "^1.1.5",
-    "astro-meta-tags": "^0.3.1",
-    "astro-navbar": "^2.3.9",
-    "astro-pagefind": "^1.8.0",
-    "astro-remote": "^0.3.3",
-    "dotenv": "^16.4.7",
-    "i18next": "^24.2.2",
-    "i18next-browser-languagedetector": "^8.0.2",
-    "i18next-fs-backend": "^2.6.0",
-    "i18next-http-backend": "^3.0.2",
-    "i18next-vue": "^5.0.0",
-    "swiper": "^11.2.2",
-    "unocss": "^65.4.3",
-    "vite": "^6.1.0",
-    "vue": "^3.5.13"
-  },
-  "devDependencies": {
-    "@unocss/transformer-variant-group": "^65.4.3",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/compiler-sfc": "^3.5.13",
-    "astro": "^5.2.5",
-    "unocss": "^0.65.0"
-  },
-  "packageManager": "pnpm@9.15.3",
-  "pnpm": {
-    "default": "8.15.2",
-    "overrides": {
-      "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
-      "sharp@<0.30.5": ">=0.30.5"
-    }
-  }
-}
+{
+  "name": "spoko-design-system",
+  "version": "0.3.08",
+  "private": false,
+  "main": "./index.ts",
+  "module": "./index.ts",
+  "types": "./index.ts",
+  "exports": {
+    ".": {
+      "import": "./index.ts",
+      "require": "./index.ts"
+    },
+    "./styles/*": "./src/styles/*",
+    "./icons": "./icon.config.ts",
+    "./icon-collections": "./icon.collections.ts",
+    "./uno-config": "./uno-config/index.ts"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/polo-blue/sds"
+  },
+  "author": {
+    "name": "spokospace",
+    "email": "szymon@spoko.space",
+    "url": "https://spoko.space"
+  },
+  "homepage": "https://sds.spoko.space/",
+  "license": "MIT",
+  "keywords": [
+    "astro-starter",
+    "seo",
+    "astro",
+    "sds design system",
+    "spoko design system"
+  ],
+  "dependencies": {
+    "@algolia/client-search": "^5.20.2",
+    "@astrojs/mdx": "^4.0.8",
+    "@astrojs/node": "^9.1.0",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/ts-plugin": "^1.10.4",
+    "@astrojs/vue": "^5.0.6",
+    "@docsearch/css": "^3.8.3",
+    "@iconify-json/ant-design": "^1.2.5",
+    "@iconify-json/bi": "^1.2.2",
+    "@iconify-json/bx": "^1.2.2",
+    "@iconify-json/carbon": "^1.2.7",
+    "@iconify-json/circle-flags": "^1.2.6",
+    "@iconify-json/ei": "^1.2.2",
+    "@iconify-json/el": "^1.2.1",
+    "@iconify-json/eos-icons": "^1.2.2",
+    "@iconify-json/et": "^1.2.1",
+    "@iconify-json/flowbite": "^1.2.4",
+    "@iconify-json/fluent": "^1.2.13",
+    "@iconify-json/fluent-emoji": "1.2.3",
+    "@iconify-json/ic": "^1.2.2",
+    "@iconify-json/icon-park-outline": "^1.2.2",
+    "@iconify-json/la": "^1.2.1",
+    "@iconify-json/material-symbols-light": "^1.2.14",
+    "@iconify-json/mdi": "^1.2.3",
+    "@iconify-json/noto-v1": "^1.2.1",
+    "@iconify-json/octicon": "^1.2.4",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/simple-icons": "^1.2.24",
+    "@iconify-json/system-uicons": "^1.2.2",
+    "@iconify-json/uil": "^1.2.3",
+    "@iconify/json": "^2.2.306",
+    "@iconify/vue": "^4.3.0",
+    "@playform/compress": "^0.1.7",
+    "@playform/inline": "^0.1.1",
+    "@types/node": "^22.13.3",
+    "@unocss/astro": "^65.4.3",
+    "@unocss/preset-attributify": "^65.4.3",
+    "@unocss/preset-typography": "^65.4.3",
+    "@unocss/preset-uno": "^65.4.3",
+    "@unocss/preset-web-fonts": "^65.4.3",
+    "@unocss/preset-wind": "^65.4.3",
+    "@unocss/reset": "^65.4.3",
+    "@vite-pwa/astro": "^0.5.0",
+    "@vueuse/core": "^12.5.0",
+    "astro-i18next": "1.0.0-beta.21",
+    "astro-icon": "^1.1.5",
+    "astro-meta-tags": "^0.3.1",
+    "astro-navbar": "^2.3.9",
+    "astro-pagefind": "^1.8.0",
+    "astro-remote": "^0.3.3",
+    "dotenv": "^16.4.7",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.2",
+    "i18next-fs-backend": "^2.6.0",
+    "i18next-http-backend": "^3.0.2",
+    "i18next-vue": "^5.1.0",
+    "swiper": "^11.2.3",
+    "unocss": "^65.4.3",
+    "vite": "^6.1.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@unocss/transformer-variant-group": "^65.4.3",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/compiler-sfc": "^3.5.13",
+    "astro": "^5.3.0",
+    "unocss": "^0.65.0"
+  },
+  "packageManager": "pnpm@9.15.3",
+  "pnpm": {
+    "default": "8.15.2",
+    "overrides": {
+      "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
+      "sharp@<0.30.5": ">=0.30.5"
+    }
+  }
+}

package/src/components/Category/CategoryDetails.astro

@@ -8,23 +8,22 @@ const { category, subcategory, subtitle, subsubtitle, titleSmall, locale, showVi
 
 // Compute base URL for localization
 const baseURL = locale === 'en' ? '' : `/${locale}`;
-
+   
 ---
 
 <div 
-  ref="el"
   class="flex flex-nowrap items-center pr-3 sm:pb-3 sm:pt-4 md:pl-4 relative z-10-off bg-neutral-lightest md:bg-white"
   transition:name="category-details"
   transition:animate="fade"
 >
-<CategorySidebarToggler onclick="toggleSidebar()" client:load>
-  <!-- First icon - visible only on desktop when sidebar is expanded -->
+<CategorySidebarToggler onclick="toggleSidebar()">
+  <!-- Desktop expanded - initially visible -->
   <Icon 
     name="ant-design:menu-fold-outlined" 
-    class="toggler-btn hidden md:[&:not(.hidden)]:block" 
+    class="toggler-btn md:[&:not(.hidden)]:block" 
     aria-hidden="true"
   />
-  <!-- Second icon - visible only on desktop when sidebar is collapsed -->
+  <!-- Desktop collapsed - initially hidden -->
   <Icon 
     name="ant-design:menu-unfold-outlined" 
     class="toggler-btn hidden md:[&:not(.hidden)]:block" 
@@ -67,70 +66,61 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
     ) : (
       <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap">
         {category.name}
-        {titleSmall && <small>{titleSmall}</small>}
+        {titleSmall && (<small>{titleSmall}</small>)}
         <span class="sr-only"> {t('catalog.extra-short')}</span>
       </h1>
     )}
   </div>
 
-  <CategoryViewToggler {...viewerLabels} showViewToggler={showViewToggler}  class="hidden lg:flex items-center gap-2 ml-auto" />
+{ showViewToggler && (  <CategoryViewToggler {...viewerLabels}  class="hidden lg:flex items-center gap-2 ml-auto" /> ) }
+
 </div>
 
 <script is:inline>
+  function initializeSidebar() {
+    const sidebar = document.getElementById('sidebar');
+    const savedState = localStorage.getItem('sidebarState') || 'open';
+    
+    if (sidebar) {
+      sidebar.classList.toggle('collapsed', savedState === 'closed');
+      
+      const togglers = document.querySelectorAll('.toggler-btn');
+      if (togglers.length >= 2) {
+        const isCollapsed = savedState === 'closed';
+        togglers[0].classList.toggle('hidden', isCollapsed);
+        togglers[1].classList.toggle('hidden', !isCollapsed);
+      }
+    }
+  }
+  
   function toggleSidebar() {
     const sidebar = document.getElementById('sidebar');
     const togglers = document.querySelectorAll('.toggler-btn');
     const isMobile = window.matchMedia("(max-width: 768px)").matches;
-
+  
     if (sidebar) {
       if (isMobile) {
-        // On mobile just toggle classes without localStorage
-        document.body.classList.toggle('overflow-hidden');
-        sidebar.classList.toggle('show');
+        const isShown = sidebar.classList.toggle('show');
+        document.body.classList.toggle('overflow-hidden', isShown);
       } else {
-        // On desktop save the state
+        const isCollapsed = sidebar.classList.toggle('collapsed');
         document.body.classList.remove('overflow-hidden');
-        sidebar.classList.toggle('collapsed');
-        localStorage.setItem('sidebarState', sidebar.classList.contains('collapsed') ? 'closed' : 'open');
+        localStorage.setItem('sidebarState', isCollapsed ? 'closed' : 'open');
         
-        // Toggle visibility of buttons on desktop
-        togglers.forEach(btn => btn.classList.toggle('hidden'));
-      }
-    }
-  }
-
-  function handlePageLoad() {
-    const sidebar = document.getElementById('sidebar');
-    const togglers = document.querySelectorAll('.toggler-btn');
-    const isMobile = window.matchMedia("(max-width: 768px)").matches;
-    
-    if (sidebar && !isMobile) {
-      const savedState = localStorage.getItem('sidebarState');
-      
-      if (savedState === 'open') {
-        sidebar.classList.remove('collapsed');
-        // Show correct button on desktop
-        if (togglers.length >= 2) {
-          togglers[0].classList.remove('hidden'); // menu-fold
-          togglers[1].classList.add('hidden');    // menu-unfold
-        }
-      } else if (savedState === 'closed') {
-        sidebar.classList.add('collapsed');
-        // Show correct button on desktop
         if (togglers.length >= 2) {
-          togglers[0].classList.add('hidden');    // menu-fold
-          togglers[1].classList.remove('hidden'); // menu-unfold
+          togglers[0].classList.toggle('hidden', isCollapsed);
+          togglers[1].classList.toggle('hidden', !isCollapsed);
         }
       }
     }
   }
-
-  // Remove previous listener if exists
-  // document.removeEventListener('astro:page-load', handlePageLoad);
-  // Add new listener
-  // document.addEventListener('astro:page-load', handlePageLoad);
-  document.addEventListener('astro:page-load', handlePageLoad, { once: true });
   
-  // Initial call to set up the initial state
-  handlePageLoad();
-</script>
+  document.addEventListener('DOMContentLoaded', initializeSidebar);
+  document.addEventListener('astro:page-load', initializeSidebar, { once: true });
+  </script>
+
+  <style>
+    .toggler-btn {
+      @apply md:-mt-0.5;
+    }
+  </style>

package/src/components/Category/CategorySidebarToggler.vue

@@ -1,7 +1,7 @@
 
 <template>
   <button
-    class="category-toggler"
+    class="category-toggler md:w-8"
     type="button"
     aria-label="toggle menu"
   >

package/src/components/Category/CategoryViewToggler.astro

@@ -7,7 +7,6 @@ interface Props {
   gridText: string;      // "Grid"
   listAriaLabel: string; // "List view"
   gridAriaLabel: string; // "Grid view"
-  showViewToggler: boolean;
   class?: string; 
 }
 
@@ -17,13 +16,10 @@ const {
   gridText, 
   listAriaLabel, 
   gridAriaLabel, 
-  showViewToggler,
   class: className
 } = Astro.props;
 ---
 
-{
-  showViewToggler && 
 <div class:list={[ className ]}>
   <span class="text-slate-default text-sm">{showText}</span>
   <div class="flex border rounded">
@@ -45,9 +41,9 @@ const {
     </button>
   </div>
 </div>
-}
 
-<script define:vars={{ showViewToggler }}>
+
+<script >
   function handleViewToggle(e) {
     const button = e.currentTarget;
     if (!(button instanceof HTMLElement)) return;
@@ -72,7 +68,6 @@ const {
   }
   
   document.addEventListener('astro:page-load', () => {
-    if (!showViewToggler) return;
     
     updateUI(localStorage.getItem('categoryView') || 'list');
     document.querySelectorAll('.view-toggle')

package/src/components/Category/SubCategoryLink.vue

@@ -9,7 +9,7 @@ defineProps<{
  <component 
    :is="active ? 'div' : 'a'"
    :class="[
-     'w-full text-base font-medium py-2 pl-6 pr-2 hover:(bg-gray-50 sm:bg-inherit)',
+     'w-full block text-base font-medium py-2 pl-6 pr-2 hover:(bg-gray-50 sm:bg-inherit)',
      'sm:(w-auto text-sm pr-3) md:(py-0.5 pr-4)',
      active ? 's-active' : 'text-gray-300'
    ]"

package/src/components/Jumbotron/index.astro

@@ -0,0 +1,153 @@
+---
+import type { Author, Category } from './types';
+import DefaultVariant from './variants/Default.astro';
+import HeroVariant from './variants/Hero.astro';
+import PostVariant from './variants/Post.astro';
+import PostSplitVariant from './variants/PostSplit.astro';
+
+interface Props {
+  variant?: "default" | "hero" | "post" | "post-split";
+  title?: string;
+  image?: string;
+  small?: boolean;
+  description?: string;
+  info?: string;
+  date?: string;
+  author?: Author;
+  categories?: Category[];
+  backgroundClass?: string;
+}
+
+const {
+  variant = "default",
+  title = "",
+  image,
+  small = false,
+  description,
+  info,
+  date,
+  author,
+  categories = [],
+  backgroundClass = 'bg-blue-darker'
+} = Astro.props;
+
+// Helper (function to check if a slot has content)
+const hasSlotContent = async (slotName) => {
+  const slot = await Astro.slots.render(slotName);
+  return slot?.trim().length > 0;
+};
+
+// Get content status
+const hasIntroContent = await hasSlotContent('intro');
+const hasSubtitleContent = await hasSlotContent('subtitle');
+const hasCtaContent = await hasSlotContent('cta-content');
+
+// Content helpers
+const hasMetadata = author || date;
+const hasCategories = categories.length > 0;
+
+// Props to pass to variants
+const commonProps = {
+  title,
+  image,
+  hasIntroContent,
+  hasSubtitleContent,
+  hasCtaContent,
+  hasMetadata,
+  hasCategories,
+  backgroundClass,
+};
+---
+
+{variant === "default" && (
+  <DefaultVariant 
+    {...commonProps}
+    small={small}
+  >
+    <slot name="intro" slot="intro" />
+    <slot name="subtitle" slot="subtitle" />
+    <slot name="cta-content" slot="cta-content" />
+  </DefaultVariant>
+)}
+
+{variant === "hero" && (
+  <HeroVariant 
+    {...commonProps}
+    description={description}
+    info={info}
+  />
+)}
+
+{variant === "post" && (
+  <PostVariant 
+    {...commonProps}
+    author={author}
+    date={date}
+    categories={categories}
+  />
+)}
+
+{variant === "post-split" && (
+  <PostSplitVariant 
+    {...commonProps}
+    author={author}
+    date={date}
+    categories={categories}
+  />
+)}
+
+<style is:global>
+  .bg-vw {
+    background: radial-gradient(circle at 50% 85%, #00437a 0%, #001e50 100%);
+  }
+
+  .featured-image-overlay {
+    @apply absolute top-0 bottom-0 left-0 right-0 overflow-hidden w-full bg-gray-100 z-1;
+
+    &:before,
+    &:after {
+      @apply content-empty top-0 bottom-0 left-0 right-0 absolute;
+    }
+
+    &:before {
+      z-index: 5;
+      background: linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.95),
+        transparent 30%,
+        transparent 70%,
+        rgba(0, 0, 0, 0.95)
+      );
+      opacity: 0.5;
+    }
+
+    &:after {
+      background: radial-gradient(circle at 50% 85%, #00437a 0, #001e50 100%);
+      opacity: 0.8;
+    }
+  }
+
+  .featured-image {
+    width: 100%;
+    @apply bg-blue-900;
+
+    img {
+      width: 100%;
+      object-fit: cover;
+      max-width: 100%;
+      display: block;
+    }
+  }
+
+  h1 {
+    b {
+      @apply font-headregular whitespace-nowrap;
+    }
+    small {
+      @apply text-6 whitespace-nowrap;
+    }
+    span {
+      @apply text-accent-light;
+    }
+  }
+</style>

package/src/components/Jumbotron/types.ts

@@ -0,0 +1,29 @@
+// types.ts
+export interface Author {
+  firstName?: string;
+  name: string;
+}
+
+export interface Category {
+  name: string;
+  uri: string;
+}
+
+export interface Props {
+  // Common props
+  variant?: "default" | "hero" | "post" | "post-split";
+  title?: string; 
+  image?: string;
+  backgroundClass?: string;
+
+
+  // Default & Hero variant props
+  small?: boolean;
+  description?: string;
+  info?: string;
+
+  // Post variants props
+  date?: string;
+  author?: Author;
+  categories?: Category[];
+}