spoko-design-system 1.5.1 → 1.5.2

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.5.2](https://github.com/polo-blue/sds/compare/v1.5.1...v1.5.2) (2025-10-28)
+
+### Bug Fixes
+
+* improve combined PR code display and color handling ([e9bb13d](https://github.com/polo-blue/sds/commit/e9bb13d5500ba5ef0be527bf79b75e14fc49e6fe))
+
 ## [1.5.1](https://github.com/polo-blue/sds/compare/v1.5.0...v1.5.1) (2025-10-27)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",

package/src/components/ProductCodes.vue

@@ -22,6 +22,37 @@ const props = defineProps({
     required: false,
   },
 });
+
+// Static mapping of PR codes to variant categories
+// Based on database migration from PR_CODE_REFACTORING_2025_10_27.md
+const variantCategoryMap: Record<string, string> = {
+  // GTI
+  '2JD': 'GTI',
+  '1ZD': 'GTI',
+  '1KV': 'GTI',
+  '0NH': 'GTI',
+  '1ZR': 'GTI',
+  // WRC
+  'E5M': 'WRC',
+  '1KD': 'WRC',
+  '1ZP': 'WRC',
+  '2JQ': 'WRC',
+  'TA2': 'WRC',
+  // CROSS
+  '2JK': 'CROSS',
+  // BLUEGT
+  '2JE': 'BLUEGT',
+  // BLUEMOTION
+  '2JZ': 'BLUEMOTION',
+  '7L6': 'BLUEMOTION',
+  // R_LINE
+  '2JP': 'R_LINE',
+};
+
+// Get variant category for a code (check map, fallback to passed value)
+const getVariantCategory = (code: string, fallback?: string): string | undefined => {
+  return variantCategoryMap[code] || fallback;
+};
 </script>
 
 <template>
@@ -30,28 +61,29 @@ const props = defineProps({
     :key="prcode?.id || index"
     class="not-last:mr-1"
   >
-    <!-- Skip invalid entries -->
     <template v-if="prcode?.code">
-      <!-- Handle normal PR codes -->
       <PrCode
         v-if="!prcode.code.includes('+')"
         :prcode="prcode"
         :isPdp="isPdp"
       />
-
-      <!-- Handle combined PR codes like "1KD+2JP" -->
-      <span v-else>
-        <PrCode
-          v-for="(code, idx) in prcode.code.split('+')"
-          :key="idx"
-          :prcode="{
-            code: code.trim(),
-            group: prcode.group,
-            description: null,
-            variant_category: prcode.variant_category
-          }"
-          :isPdp="isPdp"
-        />
+      <span v-else class="inline-flex items-center gap-1">
+        <template v-for="(code, idx) in prcode.code.split('+')" :key="idx">
+          <span v-if="idx > 0" class="text-sm opacity-75 font-bold">+</span>
+          <span class="inline-flex items-center">
+            <span class="opacity-75">[</span>
+            <PrCode
+              :prcode="{
+                code: code.trim(),
+                group: prcode.group,
+                description: null,
+                variant_category: getVariantCategory(code.trim(), prcode.variant_category)
+              }"
+              :isPdp="isPdp"
+            />
+            <span class="opacity-75">]</span>
+          </span>
+        </template>
       </span>
     </template>
   </span>

package/src/pages/components/pr-code.mdx

@@ -198,12 +198,15 @@ When using data from the API, pass the `pr_codes` array directly:
 - ✅ **Dark Mode**: Supports dark mode with appropriate color adjustments
 - ✅ **Accessible**: Uses semantic HTML and proper ARIA attributes
 - ✅ **Search Friendly**: Includes `data-pagefind-filter` for search indexing
-- ✅ **Combination Support**: Handles combined PR codes like "1KD+2JP"
+- ✅ **Combination Support**: Handles combined PR codes like "1AT+1ZR" with format `[1AT]+[1ZR]`
+- ✅ **Individual Colors**: Each code in a combination gets its own color based on variant category
 - ✅ **Defensive**: Gracefully handles invalid or malformed data
 
 ## Notes
 
 - Hover over any PR code to see its full description
 - Colors are based on semantic variant categories, not hardcoded per code
+- Combined codes are displayed as `[CODE]+[CODE]` with each code colored independently
+- The component uses a static mapping for variant categories to ensure consistent coloring
 - The tooltip design matches the ProductEngine component style
 - All 14,000+ PR codes in the database have English descriptions