spoko-design-system 1.39.3 → 1.40.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [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

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.3",
+  "version": "1.40.0",
   "type": "module",
   "private": false,
   "main": "./index.ts",
@@ -143,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/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/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' },
 ]} />