npm - spoko-design-system - Versions diffs - 1.19.0 → 1.20.0 - Mend

spoko-design-system 1.19.0 → 1.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (92) hide show

package/.claude/settings.json +48 -48
package/.github/dependabot.yml +11 -11
package/.github/todo.yml +3 -3
package/.github/workflows/claude.yml +37 -37
package/.github/workflows/code-quality.yml +72 -72
package/.github/workflows/deploy.yml +43 -43
package/.husky/README.md +41 -41
package/.husky/commit-msg +1 -1
package/.husky/pre-commit +40 -40
package/.prettierignore +14 -14
package/.prettierrc +30 -30
package/.stackblitzrc +5 -5
package/.vscode/extensions.json +4 -4
package/.vscode/launch.json +11 -11
package/.vscode/settings.json +21 -21
package/CHANGELOG.md +462 -456
package/CLAUDE.md +268 -268
package/LICENSE +21 -21
package/README.md +303 -132
package/TOOLTIPS.md +236 -236
package/astro.config.mjs +84 -84
package/commitlint.config.js +3 -3
package/dev-dist/sw.js +91 -91
package/dev-dist/workbox-c676b6d3.js +3391 -3391
package/eslint.config.js +70 -70
package/icon.config.ts +348 -348
package/index.ts +78 -78
package/package.json +160 -160
package/public/arrow-bottom.svg +7 -7
package/public/fonts/lg.svg +53 -53
package/public/fonts/vwhead-bold-demo.html +549 -549
package/public/fonts/vwhead-regular-demo.html +549 -549
package/public/fonts/vwtext-bold-demo.html +549 -549
package/public/fonts/vwtext-regular-demo.html +549 -549
package/public/github.svg +3 -3
package/public/grid_dot.svg +4 -4
package/public/linkedin.svg +44 -44
package/public/make-scrollable-code-focusable.js +3 -3
package/public/pagefind.yml +3 -3
package/public/polo.blue.svg +29 -29
package/public/spoko.space.svg +71 -71
package/public/twitter.svg +46 -46
package/renovate.json +6 -6
package/sandbox.config.json +11 -11
package/sonar-project.properties +26 -26
package/src/components/Category/CategoryDetails.astro +46 -18
package/src/pages/components/badges.mdx +57 -57
package/src/pages/components/breadcrumbs.mdx +139 -139
package/src/pages/components/buttons.mdx +359 -359
package/src/pages/components/card.mdx +294 -294
package/src/pages/components/carousel.mdx +62 -62
package/src/pages/components/copyright.mdx +42 -42
package/src/pages/components/details-list.mdx +207 -207
package/src/pages/components/features-list.mdx +37 -37
package/src/pages/components/flags.mdx +49 -49
package/src/pages/components/fuck-russia.mdx +39 -39
package/src/pages/components/hand-drive.mdx +78 -78
package/src/pages/components/headline.mdx +337 -337
package/src/pages/components/image.mdx +513 -513
package/src/pages/components/input.mdx +367 -367
package/src/pages/components/jumbotron.mdx +530 -530
package/src/pages/components/modal.mdx +212 -212
package/src/pages/components/post-header.mdx +64 -64
package/src/pages/components/pr-code.mdx +213 -213
package/src/pages/components/product-engine.mdx +418 -418
package/src/pages/components/product-number.mdx +58 -58
package/src/pages/components/product-tile.mdx +51 -51
package/src/pages/components/quote.mdx +33 -33
package/src/pages/components/slimbanner.mdx +260 -260
package/src/pages/components/table.mdx +108 -108
package/src/pages/core/colors.mdx +21 -21
package/src/pages/core/grid.mdx +193 -193
package/src/pages/core/introduction.mdx +77 -77
package/src/pages/core/tooltips.mdx +491 -491
package/src/pages/patterns/introduction.mdx +60 -60
package/src/styles/_variables.scss +70 -70
package/tailwind.config.cjs +8 -8
package/tsconfig.json +28 -28
package/uno-config/index.ts +269 -269
package/uno-config/theme/breakpoints.ts +9 -9
package/uno-config/theme/colors.ts +65 -65
package/uno-config/theme/dimensions.ts +17 -17
package/uno-config/theme/effects.ts +14 -14
package/uno-config/theme/grid.ts +10 -10
package/uno-config/theme/index.ts +26 -26
package/uno-config/theme/shortcuts/buttons.ts +53 -53
package/uno-config/theme/shortcuts/components.ts +124 -124
package/uno-config/theme/shortcuts/index.ts +20 -20
package/uno-config/theme/shortcuts/jumbotron.ts +71 -71
package/uno-config/theme/shortcuts/layout.ts +75 -75
package/uno-config/theme/typography.ts +29 -29
package/uno.config.ts +2 -2

package/TOOLTIPS.md CHANGED Viewed

@@ -1,236 +1,236 @@
-# Tooltip System Documentation
-## Overview
-SDS includes a complete tooltip system built on [Tippy.js](https://atomiks.github.io/tippyjs/) with custom styling and automatic initialization.
-## Features
-- 🎨 Custom SDS theme matching design system colors
-- ⚡ Performance-optimized delegation pattern
-- 🔄 Automatic support for Astro View Transitions
-- 🎯 Simple data-attribute API
-- 📦 All dependencies bundled (no need to install tippy.js separately)
-## Installation
-**Option 1: Automatic initialization (recommended)**
-Import the complete tooltip system in your layout's script tag:
-```astro
----
-// In your BaseLayout.astro or HeadCommon.astro
----
-<head>
-  <!-- ... other head elements -->
-  <script src="/src/scripts/tooltips.ts"></script>
-</head>
-```
-```ts
-// In your /src/scripts/tooltips.ts
-import 'spoko-design-system/scripts/tooltips';
-```
-**Option 2: Manual initialization**
-If you need more control:
-```ts
-import { initTooltips } from 'spoko-design-system';
-// Initialize tooltips manually
-initTooltips();
-```
-## Usage
-Add tooltips to any element using the `data-tippy-content` attribute:
-```astro
-<span data-tippy-content="This is a tooltip">
-  Hover over me
-</span>
-```
-### With HTML content
-```astro
-<span data-tippy-content="<strong>Bold text</strong> and <em>italic</em>">
-  Rich tooltip
-</span>
-```
-### Structured tooltips (like engine codes)
-The system supports structured tooltips with headers and specs:
-```astro
-<span
-  class="engine-code"
-  data-tippy-content={tooltipHTML}
->
-  CAYA
-</span>
-```
-Where `tooltipHTML` can be generated using:
-```ts
-import { getEngineTooltipContent } from 'spoko-design-system';
-const tooltipHTML = getEngineTooltipContent(engine, translations);
-```
-## Components with built-in tooltips
-These SDS components automatically include tooltip functionality:
-- `<ProductEngine>` - Engine codes with detailed specs
-- `<ProductEngines>` - List of engine codes
-- `<ProductCodes>` - PR codes (when descriptions are available)
-## Styling
-The tooltip theme uses SDS design tokens:
-- Background: `neutral-lightest` (#f3f4f6)
-- Text: `slate-darkest` (#1e293b)
-- Border: `neutral-lighter` (#e5e7eb)
-- Header (engine tooltips): `accent-deepBlue` (#001e50)
-To customize, override the `.tippy-box[data-theme~='sds']` class in your project.
-## Dependencies
-SDS includes `tippy.js` as a dependency, so your project **does not need to install it separately**.
-If your project already has `tippy.js` installed, you can safely remove it:
-```bash
-pnpm remove tippy.js
-```
-## Technical Details
-### Delegation Pattern
-The tooltip system uses Tippy.js's delegation pattern for optimal performance:
-- Single event listener on `body`
-- Targets all `[data-tippy-content]` elements
-- No need to re-initialize when DOM changes
-- Works with dynamically added content
-### Astro View Transitions
-The system automatically re-initializes on Astro page navigation:
-```ts
-document.addEventListener('astro:page-load', () => {
-  initTooltips();
-});
-```
-### Configuration
-Default configuration (in `src/scripts/tooltips.ts`):
-```ts
-{
-  target: '[data-tippy-content]',
-  allowHTML: true,
-  theme: 'sds',
-  placement: 'top',
-  arrow: true,
-  animation: 'shift-away',
-  duration: [200, 150],
-  maxWidth: 280
-}
-```
-## Troubleshooting
-### Tooltips not showing
-1. Verify the script is imported in your layout
-2. Check that elements have `data-tippy-content` attribute
-3. Ensure content is not empty or "undefined"
-4. Check browser console for errors
-### Double tooltips or conflicts
-If you see duplicate tooltips:
-1. Make sure you're only importing the tooltip script once
-2. Don't call `initTooltips()` manually if using auto-initialization
-3. Remove any local tippy.js installations that might conflict
-### Styling not applied
-1. Verify SDS theme CSS is imported (included in script import)
-2. Check CSS specificity - SDS uses `!important` for some properties
-3. Ensure your build process handles CSS imports from node_modules
-## Examples
-### Basic tooltip
-```astro
-<button data-tippy-content="Click to save">
-  Save
-</button>
-```
-### Engine code tooltip
-```astro
----
-import { ProductEngine } from 'spoko-design-system';
-const engine = {
-  code: 'CAYA',
-  name: '1.6 TDI',
-  power: { kw: 55, ps: 75, ps_label: 'PS', label: 'Power' },
-  displacement: { value: 1598, label: 'Displacement' },
-  euro: { value: 5, label: 'Standard' }
-};
----
-<ProductEngine engine={engine} />
-```
-### Custom structured tooltip
-```astro
-<span data-tippy-content={`
-  <div class="tooltip-header">
-    <strong>Custom Header</strong>
-  </div>
-  <div class="tooltip-specs">
-    <div class="tooltip-row">
-      <span class="tooltip-label">Label:</span>
-      <span class="tooltip-value">Value</span>
-    </div>
-  </div>
-`}>
-  Custom tooltip
-</span>
-```
-## Migration from standalone Tippy.js
-If migrating from a direct Tippy.js implementation:
-1. Remove `tippy.js` from package.json
-2. Remove local tooltip initialization code
-3. Import SDS tooltip script: `import 'spoko-design-system/scripts/tooltips'`
-4. Update elements to use `data-tippy-content` instead of manual initialization
-5. Update custom styles to target `.tippy-box[data-theme~='sds']`
-## Support
-For issues or feature requests, please open an issue at:
-https://github.com/polo-blue/sds/issues
+# Tooltip System Documentation
+## Overview
+SDS includes a complete tooltip system built on [Tippy.js](https://atomiks.github.io/tippyjs/) with custom styling and automatic initialization.
+## Features
+- 🎨 Custom SDS theme matching design system colors
+- ⚡ Performance-optimized delegation pattern
+- 🔄 Automatic support for Astro View Transitions
+- 🎯 Simple data-attribute API
+- 📦 All dependencies bundled (no need to install tippy.js separately)
+## Installation
+**Option 1: Automatic initialization (recommended)**
+Import the complete tooltip system in your layout's script tag:
+```astro
+---
+// In your BaseLayout.astro or HeadCommon.astro
+---
+<head>
+  <!-- ... other head elements -->
+  <script src="/src/scripts/tooltips.ts"></script>
+</head>
+```
+```ts
+// In your /src/scripts/tooltips.ts
+import 'spoko-design-system/scripts/tooltips';
+```
+**Option 2: Manual initialization**
+If you need more control:
+```ts
+import { initTooltips } from 'spoko-design-system';
+// Initialize tooltips manually
+initTooltips();
+```
+## Usage
+Add tooltips to any element using the `data-tippy-content` attribute:
+```astro
+<span data-tippy-content="This is a tooltip">
+  Hover over me
+</span>
+```
+### With HTML content
+```astro
+<span data-tippy-content="<strong>Bold text</strong> and <em>italic</em>">
+  Rich tooltip
+</span>
+```
+### Structured tooltips (like engine codes)
+The system supports structured tooltips with headers and specs:
+```astro
+<span
+  class="engine-code"
+  data-tippy-content={tooltipHTML}
+>
+  CAYA
+</span>
+```
+Where `tooltipHTML` can be generated using:
+```ts
+import { getEngineTooltipContent } from 'spoko-design-system';
+const tooltipHTML = getEngineTooltipContent(engine, translations);
+```
+## Components with built-in tooltips
+These SDS components automatically include tooltip functionality:
+- `<ProductEngine>` - Engine codes with detailed specs
+- `<ProductEngines>` - List of engine codes
+- `<ProductCodes>` - PR codes (when descriptions are available)
+## Styling
+The tooltip theme uses SDS design tokens:
+- Background: `neutral-lightest` (#f3f4f6)
+- Text: `slate-darkest` (#1e293b)
+- Border: `neutral-lighter` (#e5e7eb)
+- Header (engine tooltips): `accent-deepBlue` (#001e50)
+To customize, override the `.tippy-box[data-theme~='sds']` class in your project.
+## Dependencies
+SDS includes `tippy.js` as a dependency, so your project **does not need to install it separately**.
+If your project already has `tippy.js` installed, you can safely remove it:
+```bash
+pnpm remove tippy.js
+```
+## Technical Details
+### Delegation Pattern
+The tooltip system uses Tippy.js's delegation pattern for optimal performance:
+- Single event listener on `body`
+- Targets all `[data-tippy-content]` elements
+- No need to re-initialize when DOM changes
+- Works with dynamically added content
+### Astro View Transitions
+The system automatically re-initializes on Astro page navigation:
+```ts
+document.addEventListener('astro:page-load', () => {
+  initTooltips();
+});
+```
+### Configuration
+Default configuration (in `src/scripts/tooltips.ts`):
+```ts
+{
+  target: '[data-tippy-content]',
+  allowHTML: true,
+  theme: 'sds',
+  placement: 'top',
+  arrow: true,
+  animation: 'shift-away',
+  duration: [200, 150],
+  maxWidth: 280
+}
+```
+## Troubleshooting
+### Tooltips not showing
+1. Verify the script is imported in your layout
+2. Check that elements have `data-tippy-content` attribute
+3. Ensure content is not empty or "undefined"
+4. Check browser console for errors
+### Double tooltips or conflicts
+If you see duplicate tooltips:
+1. Make sure you're only importing the tooltip script once
+2. Don't call `initTooltips()` manually if using auto-initialization
+3. Remove any local tippy.js installations that might conflict
+### Styling not applied
+1. Verify SDS theme CSS is imported (included in script import)
+2. Check CSS specificity - SDS uses `!important` for some properties
+3. Ensure your build process handles CSS imports from node_modules
+## Examples
+### Basic tooltip
+```astro
+<button data-tippy-content="Click to save">
+  Save
+</button>
+```
+### Engine code tooltip
+```astro
+---
+import { ProductEngine } from 'spoko-design-system';
+const engine = {
+  code: 'CAYA',
+  name: '1.6 TDI',
+  power: { kw: 55, ps: 75, ps_label: 'PS', label: 'Power' },
+  displacement: { value: 1598, label: 'Displacement' },
+  euro: { value: 5, label: 'Standard' }
+};
+---
+<ProductEngine engine={engine} />
+```
+### Custom structured tooltip
+```astro
+<span data-tippy-content={`
+  <div class="tooltip-header">
+    <strong>Custom Header</strong>
+  </div>
+  <div class="tooltip-specs">
+    <div class="tooltip-row">
+      <span class="tooltip-label">Label:</span>
+      <span class="tooltip-value">Value</span>
+    </div>
+  </div>
+`}>
+  Custom tooltip
+</span>
+```
+## Migration from standalone Tippy.js
+If migrating from a direct Tippy.js implementation:
+1. Remove `tippy.js` from package.json
+2. Remove local tooltip initialization code
+3. Import SDS tooltip script: `import 'spoko-design-system/scripts/tooltips'`
+4. Update elements to use `data-tippy-content` instead of manual initialization
+5. Update custom styles to target `.tippy-box[data-theme~='sds']`
+## Support
+For issues or feature requests, please open an issue at:
+https://github.com/polo-blue/sds/issues

package/astro.config.mjs CHANGED Viewed

@@ -1,85 +1,85 @@
-import { defineConfig, sharpImageService } from "astro/config";
-import { iconConfig } from './icon.config';
-import vue from "@astrojs/vue";
-import mdx from '@astrojs/mdx';
-import UnoCSS from '@unocss/astro';
-import icon from "astro-icon";
-import sitemap from "@astrojs/sitemap";
-import pagefind from "astro-pagefind";
-import AstroPWA from '@vite-pwa/astro';
-import metaTags from "astro-meta-tags";
-import { createSdsConfig } from './uno-config';
-const unoConfig = createSdsConfig();
-// https://astro.build/config
-export default defineConfig({
-  site: "https://sds.spoko.space/",
-  server: {
-    port: 1234
-  },
-  image: {
-    service: sharpImageService(),
-    domains: ["placehold.co", "api.polo.blue", "polo.blue", "media.istockphoto.com", "freepik.com", "img.freepik.com", "polo6r.pl"]
-  },
-  integrations: [
-    // Enable Vue to support Vue3 components
-    vue(),
-    mdx(),
-    AstroPWA({
-      mode: 'production',
-      base: '/',
-      scope: '/',
-      includeAssets: ['favicon.svg', 'safari-pinned-tab.svg', 'brands/*.svg', 'fonts/*.woff2', 'fonts/*.svg', 'vw.svg', 'polo.blue.svg', 'spoko.space.svg'],
-      registerType: 'autoUpdate',
-      manifest: {
-        name: 'Spoko Design System',
-        short_name: 'SDS',
-        description: 'SDS PWA app description',
-        categories: ['multimedia'],
-        screenshots: [{
-          "src": "pwa-512x512.png",
-          "sizes": "512x512",
-          "platform": "windows",
-          "label": "SDS"
-        }],
-        theme_color: '#001e50',
-        icons: [{
-          src: 'pwa-192x192.png',
-          sizes: '192x192',
-          type: 'image/png'
-        }, {
-          src: 'pwa-512x512.png',
-          sizes: '512x512',
-          type: 'image/png'
-        }, {
-          src: 'pwa-512x512.png',
-          sizes: '512x512',
-          type: 'image/png',
-          purpose: 'any maskable'
-        }]
-      },
-      workbox: {
-        navigateFallback: '/',
-        globPatterns: ['**/*.{css,js,html,svg,png,ico,txt}']
-      },
-      devOptions: {
-        enabled: false,
-        navigateFallbackAllowlist: [/^\//]
-      },
-      experimental: {
-        directoryAndTrailingSlashHandler: true
-      }
-    }),
-    UnoCSS({
-      injectReset: true,
-      ...unoConfig
-    }),
-    icon(iconConfig),
-    metaTags(),
-    (await import("@playform/inline")).default(),
-    pagefind(),
-    sitemap()
-  ]
+import { defineConfig, sharpImageService } from "astro/config";
+import { iconConfig } from './icon.config';
+import vue from "@astrojs/vue";
+import mdx from '@astrojs/mdx';
+import UnoCSS from '@unocss/astro';
+import icon from "astro-icon";
+import sitemap from "@astrojs/sitemap";
+import pagefind from "astro-pagefind";
+import AstroPWA from '@vite-pwa/astro';
+import metaTags from "astro-meta-tags";
+import { createSdsConfig } from './uno-config';
+const unoConfig = createSdsConfig();
+// https://astro.build/config
+export default defineConfig({
+  site: "https://sds.spoko.space/",
+  server: {
+    port: 1234
+  },
+  image: {
+    service: sharpImageService(),
+    domains: ["placehold.co", "api.polo.blue", "polo.blue", "media.istockphoto.com", "freepik.com", "img.freepik.com", "polo6r.pl"]
+  },
+  integrations: [
+    // Enable Vue to support Vue3 components
+    vue(),
+    mdx(),
+    AstroPWA({
+      mode: 'production',
+      base: '/',
+      scope: '/',
+      includeAssets: ['favicon.svg', 'safari-pinned-tab.svg', 'brands/*.svg', 'fonts/*.woff2', 'fonts/*.svg', 'vw.svg', 'polo.blue.svg', 'spoko.space.svg'],
+      registerType: 'autoUpdate',
+      manifest: {
+        name: 'Spoko Design System',
+        short_name: 'SDS',
+        description: 'SDS PWA app description',
+        categories: ['multimedia'],
+        screenshots: [{
+          "src": "pwa-512x512.png",
+          "sizes": "512x512",
+          "platform": "windows",
+          "label": "SDS"
+        }],
+        theme_color: '#001e50',
+        icons: [{
+          src: 'pwa-192x192.png',
+          sizes: '192x192',
+          type: 'image/png'
+        }, {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png'
+        }, {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'any maskable'
+        }]
+      },
+      workbox: {
+        navigateFallback: '/',
+        globPatterns: ['**/*.{css,js,html,svg,png,ico,txt}']
+      },
+      devOptions: {
+        enabled: false,
+        navigateFallbackAllowlist: [/^\//]
+      },
+      experimental: {
+        directoryAndTrailingSlashHandler: true
+      }
+    }),
+    UnoCSS({
+      injectReset: true,
+      ...unoConfig
+    }),
+    icon(iconConfig),
+    metaTags(),
+    (await import("@playform/inline")).default(),
+    pagefind(),
+    sitemap()
+  ]
 });

package/commitlint.config.js CHANGED Viewed

@@ -1,3 +1,3 @@
-export default {
-  extends: ['@commitlint/config-conventional'],
-};
+export default {
+  extends: ['@commitlint/config-conventional'],
+};