spoko-design-system 1.39.2 → 1.40.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [1.40.0](https://github.com/polo-blue/sds/compare/v1.39.3...v1.40.0) (2026-06-25)
+
+### ⚠ BREAKING CHANGES
+
+* **Breadcrumbs:** the Breadcrumbs prop `productNumber` is renamed to `suffix`,
+and the hard-coded `Polo 6R` link-title prefix is removed (use `titlePrefix`).
+Consumers must update usages and bump spoko-design-system to ^2.0.0.
+
+### Features
+
+* **Breadcrumbs:** universal props (suffix/titlePrefix/hideOnMobile) ([#471](https://github.com/polo-blue/sds/issues/471)) ([8a23dac](https://github.com/polo-blue/sds/commit/8a23dacc55cd8e8248c7c3365990cb5c8df509a3))
+
+## [1.39.3](https://github.com/polo-blue/sds/compare/v1.39.2...v1.39.3) (2026-06-17)
+
+### Bug Fixes
+
+* **Header:** repair navbar dark-mode toggle (duplicate listeners) ([#468](https://github.com/polo-blue/sds/issues/468)) ([8e915c3](https://github.com/polo-blue/sds/commit/8e915c3452b670d3280fde19c0410412f2208e33)), closes [#dark-mode-toggle](https://github.com/polo-blue/sds/issues/dark-mode-toggle)
+
 ## [1.39.2](https://github.com/polo-blue/sds/compare/v1.39.1...v1.39.2) (2026-06-17)
 
 ## [1.39.1](https://github.com/polo-blue/sds/compare/v1.39.0...v1.39.1) (2026-06-17)

package/MIGRATION-BREADCRUMBS.md

@@ -0,0 +1,106 @@
+# Migracja komponentu `Breadcrumbs` — uniwersalne propsy
+
+> **BREAKING CHANGE** → bump major (np. `1.x` → `2.0.0`).
+> Dotyczy konsumentów paczki `spoko-design-system` używających `Breadcrumbs`
+> (m.in. `sale.polo.blue`, `catalog.polo.blue`).
+
+## Co się zmieniło
+
+Komponent przestał być związany z domeną produktu/marką i używa teraz
+uniwersalnych nazw propsów.
+
+| Przed (1.x) | Po (2.0) | Uwagi |
+|-------------|----------|-------|
+| `productNumber` | **`suffix`** | tekst doklejany po ostatnim okruszku (np. numer produktu) |
+| _(zahardkodowany `Polo 6R` w `title`)_ | **`titlePrefix`** | opcjonalny prefiks tytułów linków; domyślnie `''` (brak) |
+| _(zawsze `hidden sm:inline`)_ | **`hideOnMobile`** | `Array<'suffix' \| 'home' \| 'separators' \| 'trail'>`, domyślnie `['suffix']` |
+
+### Pełna lista propsów po zmianie
+
+| Prop | Typ | Domyślnie |
+|------|-----|-----------|
+| `breadcrumbs` | `Array<{ name: string; path: string }>` | — (wymagane) |
+| `showBack` | `boolean` | `false` |
+| `textBack` | `string` | `'Back'` |
+| `showHome` | `boolean` | `false` |
+| `suffix` | `string` | `undefined` |
+| `titlePrefix` | `string` | `''` |
+| `hideOnMobile` | `Array<'suffix' \| 'home' \| 'separators' \| 'trail'>` | `['suffix']` |
+| `withMicrodata` | `boolean` | `true` |
+
+## Jak zaktualizować konsumenta
+
+### 1. Zmień nazwę propsa `productNumber` → `suffix`
+
+W Vue atrybut był kebab-case (`product-number`), w Astro/JSX camelCase
+(`productNumber`). Znajdź oba warianty:
+
+```bash
+# w repo konsumenta
+grep -rEn "product-number|productNumber" src
+```
+
+**Przed:**
+```vue
+<Breadcrumbs
+  :breadcrumbs="trail"
+  product-number="6R0XXXXXX"
+/>
+```
+```astro
+<Breadcrumbs breadcrumbs={trail} productNumber="6R0XXXXXX" client:visible />
+```
+
+**Po:**
+```vue
+<Breadcrumbs
+  :breadcrumbs="trail"
+  suffix="6R0XXXXXX"
+/>
+```
+```astro
+<Breadcrumbs breadcrumbs={trail} suffix="6R0XXXXXX" client:visible />
+```
+
+### 2. (Opcjonalnie) Przywróć prefiks marki w tytułach linków
+
+Wcześniej tytuły linków (`title="..."`) miały na sztywno prefiks `Polo 6R`.
+Teraz domyślnie go nie ma. Jeśli zależy Ci na tym samym tekście tooltipów,
+podaj `titlePrefix`:
+
+```vue
+<Breadcrumbs :breadcrumbs="trail" suffix="6R0XXXXXX" title-prefix="Polo 6R" />
+```
+
+### 3. Zachowanie na mobile bez zmian (domyślnie)
+
+Domyślnie `hideOnMobile` to `['suffix']` — czyli suffix jest ukrywany poniżej
+breakpointu `sm` (640px) i wraca od `sm` w górę, **dokładnie jak wcześniej**.
+Nic nie trzeba robić, żeby zachować dotychczasowe zachowanie.
+
+Jeśli chcesz to zmienić:
+
+```vue
+<!-- suffix widoczny też na mobile -->
+<Breadcrumbs :breadcrumbs="trail" suffix="6R0XXXXXX" :hide-on-mobile="[]" />
+
+<!-- ukryj na mobile także separatory i ikonę domu -->
+<Breadcrumbs
+  :breadcrumbs="trail"
+  suffix="6R0XXXXXX"
+  show-home
+  :hide-on-mobile="['suffix', 'separators', 'home']"
+/>
+
+<!-- ukryj cały trail na mobile (zostaje np. tylko przycisk Back) -->
+<Breadcrumbs :breadcrumbs="trail" show-back :hide-on-mobile="['trail']" />
+```
+
+Dozwolone wartości: `'suffix'`, `'home'`, `'separators'`, `'trail'`.
+
+## Checklista PR w repo konsumenta
+
+- [ ] `grep -rEn "product-number|productNumber"` — wszystkie wystąpienia w użyciach `Breadcrumbs` zamienione na `suffix`.
+- [ ] (jeśli potrzebne) dodany `title-prefix` tam, gdzie tooltipy miały prefiks marki.
+- [ ] zweryfikowane zachowanie na mobile (suffix ukryty domyślnie — bez zmian).
+- [ ] bump wersji `spoko-design-system` do `^2.0.0` w `package.json`.

package/eslint.config.js

@@ -4,6 +4,7 @@ import typescriptParser from '@typescript-eslint/parser';
 import vue from 'eslint-plugin-vue';
 import astro from 'eslint-plugin-astro';
 import globals from 'globals';
+import eslintConfigPrettier from 'eslint-config-prettier';
 
 export default [
   js.configs.recommended,
@@ -57,6 +58,13 @@ export default [
   // Astro files
   ...astro.configs.recommended,
 
+  // Disable all ESLint formatting rules that conflict with Prettier.
+  // Prettier is the single source of truth for formatting (run via the
+  // pre-commit hook), so rules like vue/max-attributes-per-line and
+  // vue/html-self-closing must be turned off to avoid fighting it.
+  // MUST stay last so it overrides the recommended configs above.
+  eslintConfigPrettier,
+
   // Global ignores
   {
     ignores: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.39.2",
+  "version": "1.40.0",
   "type": "module",
   "private": false,
   "main": "./index.ts",
@@ -39,6 +39,7 @@
     "lint": "eslint \"src/**/*.{js,ts,jsx,tsx,vue,astro}\"",
     "lint:fix": "eslint \"src/**/*.{js,ts,jsx,tsx,vue,astro}\" --fix",
     "check": "astro check",
+    "test:e2e": "playwright test",
     "prepare": "husky"
   },
   "repository": {
@@ -127,6 +128,7 @@
     "@commitlint/cli": "^21.0.2",
     "@commitlint/config-conventional": "^21.0.2",
     "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.50.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/culori": "^4.0.1",
@@ -141,6 +143,7 @@
     "astro": "^6.4.6",
     "conventional-changelog-conventionalcommits": "^9.3.1",
     "eslint": "^10.5.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-astro": "^1.7.0",
     "eslint-plugin-vue": "^10.9.2",
     "globals": "^17.6.0",

package/playwright.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const PORT = 1234;
+const BASE_URL = `http://localhost:${PORT}`;
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: 'list',
+  use: {
+    baseURL: BASE_URL,
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'pnpm dev',
+    url: BASE_URL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+});

package/src/components/Breadcrumbs.vue

@@ -6,12 +6,17 @@ export interface Breadcrumb {
   path: string;
 }
 
+// Parts of the breadcrumb that can be hidden on mobile via `hideOnMobile`.
+export type BreadcrumbPart = 'suffix' | 'home' | 'separators' | 'trail';
+
 interface Props {
   showBack?: boolean;
   textBack?: string;
   showHome?: boolean;
   breadcrumbs: Breadcrumb[];
-  productNumber?: string;
+  suffix?: string;
+  titlePrefix?: string;
+  hideOnMobile?: BreadcrumbPart[];
   withMicrodata?: boolean;
 }
 
@@ -19,7 +24,10 @@ const props = withDefaults(defineProps<Props>(), {
   showBack: false,
   textBack: 'Back',
   showHome: false,
-  productNumber: undefined,
+  suffix: undefined,
+  titlePrefix: '',
+  // Default keeps the original behaviour: the suffix is hidden below `sm`.
+  hideOnMobile: () => ['suffix'],
   withMicrodata: true,
 });
 
@@ -27,6 +35,15 @@ const isLast = (index: number) => {
   return index === props.breadcrumbs.length - 1;
 };
 
+// Build the link title from the optional prefix, the crumb name and (on the
+// last crumb) the suffix — empty parts are dropped so there are no stray spaces.
+const getTitle = (name: string, last = false) =>
+  [props.titlePrefix, name, last ? props.suffix : undefined].filter(Boolean).join(' ');
+
+// Hides the given part below the `sm` breakpoint; the element's base display
+// (flex/inline) is restored from `sm` up. Empty string = always visible.
+const mobileHidden = (part: BreadcrumbPart) => (props.hideOnMobile.includes(part) ? 'max-sm:hidden' : '');
+
 // Microdata attributes - only added when withMicrodata is true
 const listMicrodata = computed(() =>
   props.withMicrodata
@@ -58,7 +75,7 @@ const listItemMicrodata = computed(() =>
       </li>
     </ul>
     <ul class="breadcrumbs-base overflow-x-auto overflow-y-hidden sm:mr-12" v-bind="listMicrodata">
-      <li v-if="props.showHome" class="breadcrumb-item">
+      <li v-if="props.showHome" class="breadcrumb-item" :class="mobileHidden('home')">
         <a
           href="/"
           class="breadcrumb-link flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-brand-secondary whitespace-nowrap translate-y-0 text-sm my-auto"
@@ -72,16 +89,23 @@ const listItemMicrodata = computed(() =>
         v-for="(crumb, index) in breadcrumbs"
         :key="index"
         class="breadcrumb-item"
+        :class="mobileHidden('trail')"
         v-bind="listItemMicrodata"
       >
-        <span v-if="index > 0 || props.showHome" class="text-gray-400 px-1 py-4.25 sm:py-1">/</span>
+        <span
+          v-if="index > 0 || props.showHome"
+          class="text-gray-400 px-1 py-4.25 sm:py-1"
+          :class="mobileHidden('separators')"
+        >
+          /
+        </span>
 
         <a
           v-if="!isLast(index)"
           :href="crumb.path"
           class="breadcrumb-link"
           v-bind="withMicrodata ? { itemprop: 'item' } : {}"
-          :title="`Polo 6R ${crumb.name}`"
+          :title="getTitle(crumb.name)"
         >
           <strong class="font-normal" v-bind="withMicrodata ? { itemprop: 'name' } : {}">
             {{ crumb.name }}
@@ -91,12 +115,12 @@ const listItemMicrodata = computed(() =>
           v-else
           :href="crumb.path"
           class="breadcrumb-link breadcrumb-link-disabled"
-          :title="`Polo 6R ${crumb.name} ${productNumber}`"
+          :title="getTitle(crumb.name, true)"
           v-bind="withMicrodata ? { itemprop: 'item' } : {}"
         >
           <span class="font-normal" v-bind="withMicrodata ? { itemprop: 'name' } : {}">
             <span v-html="crumb.name" />
-            <b v-if="productNumber" class="hidden sm:inline font-normal ml-1">&nbsp;{{ productNumber }}</b>
+            <b v-if="suffix" class="font-normal ml-1" :class="mobileHidden('suffix')">&nbsp;{{ suffix }}</b>
           </span>
         </a>
 

package/src/components/Header/Header.astro

@@ -135,11 +135,16 @@ import SearchModal from './SearchModal.vue';
 <script>
   function setupDarkModeToggle() {
     const toggle = document.getElementById('dark-mode-toggle');
-    if (toggle) {
+    if (toggle && toggle.dataset.bound !== '1') {
+      toggle.dataset.bound = '1';
       toggle.addEventListener('click', () => {
         const isDark = document.documentElement.classList.toggle('dark');
         document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
-        localStorage.setItem('sds-color-scheme', isDark ? 'dark' : 'light');
+        try {
+          localStorage.setItem('sds-color-scheme', isDark ? 'dark' : 'light');
+        } catch {
+          /* localStorage may be unavailable */
+        }
       });
     }
   }

package/src/pages/components/breadcrumbs.mdx

@@ -36,7 +36,7 @@ const trail = [
 ---
 <Breadcrumbs
   breadcrumbs={trail}
-  productNumber="6R0XXXXXX"
+  suffix="6R0XXXXXX"
   class="py-1 px-1 max-w-full flex bg-white"
   showBack
   textBack="Back"
@@ -55,7 +55,7 @@ const trail = [
 <template>
   <Breadcrumbs
     :breadcrumbs="trail"
-    product-number="6R0XXXXXX"
+    suffix="6R0XXXXXX"
     class="py-1 px-1 max-w-full flex bg-white"
     show-back
     text-back="Back"
@@ -63,7 +63,7 @@ const trail = [
 </template>`}>
   <Breadcrumbs
     breadcrumbs={[{name: 'Level1', path: '#level1'}, {name: 'Level 2', path: '#level2'}, {name: 'Level 3', path: '#level3'}]}
-    product-number="6R0XXXXXX"
+    suffix="6R0XXXXXX"
     class="py-1 order-0 px-1 max-w-full flex bg-white"
     show-back
     text-back="Back"
@@ -76,20 +76,20 @@ const trail = [
 <ComponentPreview client:visible
   astro={`<Breadcrumbs
   breadcrumbs={trail}
-  productNumber="6R0XXXXXX"
+  suffix="6R0XXXXXX"
   class="py-1 px-1 max-w-full flex bg-white"
   showHome
   client:visible
 />`}
   vue={`<Breadcrumbs
   :breadcrumbs="trail"
-  product-number="6R0XXXXXX"
+  suffix="6R0XXXXXX"
   class="py-1 px-1 max-w-full flex bg-white"
   show-home
 />`}>
   <Breadcrumbs
     breadcrumbs={[{name: 'Level1', path: '#level1'}, {name: 'Level 2', path: '#level2'}, {name: 'Level 3', path: '#level3'}]}
-    product-number="6R0XXXXXX"
+    suffix="6R0XXXXXX"
     class="py-1 order-0 px-1 max-w-full flex bg-white"
     show-home
   />
@@ -101,18 +101,48 @@ const trail = [
 <ComponentPreview client:visible
   astro={`<Breadcrumbs
   breadcrumbs={trail}
-  productNumber="6R0XXXXXX"
+  suffix="6R0XXXXXX"
   class="py-1 px-1 max-w-full flex bg-white"
   client:visible
 />`}
   vue={`<Breadcrumbs
   :breadcrumbs="trail"
-  product-number="6R0XXXXXX"
+  suffix="6R0XXXXXX"
   class="py-1 px-1 max-w-full flex bg-white"
 />`}>
   <Breadcrumbs
     breadcrumbs={[{name: 'Level1', path: '#level1'}, {name: 'Level 2', path: '#level2'}, {name: 'Level 3', path: '#level3'}]}
-    product-number="6R0XXXXXX"
+    suffix="6R0XXXXXX"
+    class="py-1 order-0 px-1 max-w-full flex bg-white"
+  />
+</ComponentPreview>
+
+## Hide parts on mobile
+
+Use `hideOnMobile` to hide selected parts below the `sm` breakpoint (640px); they
+reappear from `sm` up. Accepted parts: `'suffix'`, `'home'`, `'separators'`, `'trail'`.
+It defaults to `['suffix']`, so pass `[]` to show everything on mobile, or list more
+parts to hide. Resize the preview below to see the suffix and separators come and go.
+
+<ComponentPreview client:visible
+  astro={`<Breadcrumbs
+  breadcrumbs={trail}
+  suffix="6R0XXXXXX"
+  hideOnMobile={['suffix', 'separators']}
+  class="py-1 px-1 max-w-full flex bg-white"
+  client:visible
+/>`}
+  vue={`<Breadcrumbs
+  :breadcrumbs="trail"
+  suffix="6R0XXXXXX"
+  :hide-on-mobile="['suffix', 'separators']"
+  class="py-1 px-1 max-w-full flex bg-white"
+/>`}>
+  <Breadcrumbs
+    breadcrumbs={[{name: 'Level1', path: '#level1'}, {name: 'Level 2', path: '#level2'}, {name: 'Level 3', path: '#level3'}]}
+    suffix="6R0XXXXXX"
+    hideOnMobile={['suffix', 'separators']}
+    showHome
     class="py-1 order-0 px-1 max-w-full flex bg-white"
   />
 </ComponentPreview>
@@ -124,7 +154,9 @@ const trail = [
   { name: 'showBack', type: 'boolean', default: 'false', description: 'Show a back button before the breadcrumbs' },
   { name: 'textBack', type: 'string', default: "'Back'", description: 'Label text for the back button' },
   { name: 'showHome', type: 'boolean', default: 'false', description: 'Show home icon as first breadcrumb' },
-  { name: 'productNumber', type: 'string', default: 'null', description: 'Product number shown after last breadcrumb (hidden on mobile)' },
+  { name: 'suffix', type: 'string', default: 'undefined', description: 'Text appended after the last breadcrumb — e.g. a product number' },
+  { name: 'titlePrefix', type: 'string', default: "''", description: 'Optional prefix prepended to each link title attribute — e.g. a brand name' },
+  { name: 'hideOnMobile', type: "Array<'suffix' | 'home' | 'separators' | 'trail'>", default: "['suffix']", description: 'Parts hidden below the sm breakpoint (restored from sm up). Defaults to hiding the suffix; pass [] to show everything on mobile' },
   { name: 'withMicrodata', type: 'boolean', default: 'true', description: 'Include Schema.org BreadcrumbList markup — set false to avoid duplicates when rendering twice' },
 ]} />
 

package/tests/dark-mode-toggle.spec.ts

@@ -0,0 +1,73 @@
+import { expect, test } from '@playwright/test';
+
+/**
+ * Regression test for the navbar dark-mode toggle.
+ *
+ * Bug: `setupDarkModeToggle()` in Header.astro ran three times (immediate call +
+ * `astro:page-load` + `astro:after-swap`) with no guard, attaching multiple click
+ * listeners to the same `#dark-mode-toggle` button. Each click toggled `.dark` an
+ * even number of times, so the theme never visibly changed — switching to light
+ * mode (or back) appeared broken.
+ *
+ * These tests assert that a single click flips the theme exactly once and that the
+ * choice persists to localStorage and survives a reload.
+ */
+
+const TOGGLE = '#dark-mode-toggle';
+// A docs page that uses MainLayout, where the navbar dark-mode toggle is rendered.
+const PAGE = '/core/introduction/';
+// Matches the `dark` class as a standalone token in the <html> class list.
+const DARK_CLASS = /(^|\s)dark(\s|$)/;
+
+test.describe('navbar dark-mode toggle', () => {
+  // Force a deterministic starting point: emulate the light system preference so the
+  // page boots in light mode regardless of the runner's OS settings.
+  test.use({ colorScheme: 'light' });
+
+  test.beforeEach(async ({ page }) => {
+    // Each test runs in an isolated browser context with empty localStorage, so the
+    // `colorScheme: 'light'` emulation above is enough to boot deterministically in
+    // light mode — no manual storage reset needed (resetting here would also wipe the
+    // value on reload and break the persistence test).
+    await page.goto(PAGE);
+    // Wait for the toggle to be wired before interacting.
+    await expect(page.locator(TOGGLE)).toBeVisible();
+  });
+
+  test('starts in light mode', async ({ page }) => {
+    await expect(page.locator('html')).not.toHaveClass(DARK_CLASS);
+  });
+
+  test('a single click switches to dark mode', async ({ page }) => {
+    await page.locator(TOGGLE).click();
+
+    await expect(page.locator('html')).toHaveClass(DARK_CLASS);
+    await expect(page.locator('html')).toHaveCSS('color-scheme', 'dark');
+
+    const stored = await page.evaluate(() => window.localStorage.getItem('sds-color-scheme'));
+    expect(stored).toBe('dark');
+  });
+
+  test('clicking twice returns to light mode (the regression)', async ({ page }) => {
+    const html = page.locator('html');
+
+    await page.locator(TOGGLE).click();
+    await expect(html).toHaveClass(DARK_CLASS);
+
+    await page.locator(TOGGLE).click();
+    // With the double-bind bug this stayed dark; one listener now flips it back.
+    await expect(html).not.toHaveClass(DARK_CLASS);
+    await expect(html).toHaveCSS('color-scheme', 'light');
+
+    const stored = await page.evaluate(() => window.localStorage.getItem('sds-color-scheme'));
+    expect(stored).toBe('light');
+  });
+
+  test('the chosen theme persists across a reload', async ({ page }) => {
+    await page.locator(TOGGLE).click();
+    await expect(page.locator('html')).toHaveClass(DARK_CLASS);
+
+    await page.reload();
+    await expect(page.locator('html')).toHaveClass(DARK_CLASS);
+  });
+});