spoko-design-system 1.22.0 → 1.23.1

package/.husky/pre-commit

@@ -12,13 +12,14 @@ if git diff --cached --name-only | xargs grep -n "console\\.log" 2>/dev/null; th
   echo "   Consider removing them before committing to production"
 fi
 
-# Run format check
-echo "🎨 Checking code formatting..."
-pnpm run format:check
-if [ $? -ne 0 ]; then
-  echo "❌ Format check failed! Run 'pnpm run format' to fix."
-  exit 1
-fi
+# Auto-format code
+echo "🎨 Auto-formatting code..."
+pnpm run format
+
+# Re-add formatted files to staging
+git add -u
+
+echo "✅ Code formatted successfully!"
 
 # Run linting
 echo "🔍 Running linter..."

package/.vscode/settings.json

@@ -1,22 +1,26 @@
 {
   "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "[astro]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-    "vue"
-  ]
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"]
 }

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.23.1](https://github.com/polo-blue/sds/compare/v1.23.0...v1.23.1) (2025-12-15)
+
+### Bug Fixes
+
+* **header:** correct WPHeader microdata and improve semantics ([a37a26e](https://github.com/polo-blue/sds/commit/a37a26ef62a29e3e327076d715e2989102e4d60b))
+
+## [1.23.0](https://github.com/polo-blue/sds/compare/v1.22.0...v1.23.0) (2025-12-15)
+
+### Features
+
+* **breadcrumbs:** add withMicrodata prop to control Schema.org rendering ([0ca52cc](https://github.com/polo-blue/sds/commit/0ca52cccb90a30f532cdb381e428480f59a6d433))
+
 ## [1.22.0](https://github.com/polo-blue/sds/compare/v1.21.1...v1.22.0) (2025-12-15)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.22.0",
+  "version": "1.23.1",
   "type": "module",
   "private": false,
   "main": "./index.ts",
@@ -138,7 +138,7 @@
     "prettier-plugin-astro": "^0.14.1",
     "semantic-release": "^25.0.2",
     "unocss": "^0.65.0",
-    "vite": "^7.2.7"
+    "vite": "^7.3.0"
   },
   "packageManager": "pnpm@10.17.1",
   "pnpm": {

package/src/components/Breadcrumbs.vue

@@ -5,6 +5,7 @@ export interface Breadcrumb {
 }
 
 import type { PropType } from 'vue';
+import { computed } from 'vue';
 
 const props = defineProps({
   showBack: {
@@ -29,11 +30,36 @@ const props = defineProps({
     required: false,
     default: null,
   },
+  withMicrodata: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
 });
 
 const isLast = (index: number) => {
   return index === props.breadcrumbs.length - 1;
 };
+
+// Microdata attributes - only added when withMicrodata is true
+const listMicrodata = computed(() =>
+  props.withMicrodata
+    ? {
+        itemscope: true,
+        itemtype: 'https://schema.org/BreadcrumbList',
+      }
+    : {}
+);
+
+const listItemMicrodata = computed(() =>
+  props.withMicrodata
+    ? {
+        itemprop: 'itemListElement',
+        itemscope: true,
+        itemtype: 'https://schema.org/ListItem',
+      }
+    : {}
+);
 </script>
 
 <template>
@@ -45,28 +71,22 @@ const isLast = (index: number) => {
         </button>
       </li>
     </ul>
-    <ul
-      class="breadcrumbs-base overflow-x-auto overflow-y-hidden sm:mr-12"
-      itemscope
-      itemtype="https://schema.org/BreadcrumbList"
-    >
+    <ul class="breadcrumbs-base overflow-x-auto overflow-y-hidden sm:mr-12" v-bind="listMicrodata">
       <li v-if="props.showHome" class="breadcrumb-item">
         <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"
           :title="props.textBack"
-          itemprop="item"
+          v-bind="withMicrodata ? { itemprop: 'item' } : {}"
           i-carbon-home
         />
-        <meta itemprop="position" content="1" />
+        <meta v-if="withMicrodata" itemprop="position" content="1" />
       </li>
       <li
         v-for="(crumb, index) in breadcrumbs"
         :key="index"
         class="breadcrumb-item"
-        itemprop="itemListElement"
-        itemscope
-        itemtype="https://schema.org/ListItem"
+        v-bind="listItemMicrodata"
       >
         <span v-if="index > 0 || props.showHome" class="text-gray-400 px-1 py-4.25 sm:py-1">/</span>
 
@@ -74,25 +94,31 @@ const isLast = (index: number) => {
           v-if="!isLast(index)"
           :href="crumb.path"
           class="breadcrumb-link"
-          itemprop="item"
+          v-bind="withMicrodata ? { itemprop: 'item' } : {}"
           :title="`Polo 6R ${crumb.name}`"
         >
-          <strong class="font-normal" itemprop="name">{{ crumb.name }}</strong>
+          <strong class="font-normal" v-bind="withMicrodata ? { itemprop: 'name' } : {}">
+            {{ crumb.name }}
+          </strong>
         </a>
         <a
           v-else
           :href="crumb.path"
           class="breadcrumb-link breadcrumb-link-disabled"
           :title="`Polo 6R ${crumb.name} ${productNumber}`"
-          itemprop="item"
+          v-bind="withMicrodata ? { itemprop: 'item' } : {}"
         >
-          <span class="font-normal" itemprop="name">
+          <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>
           </span>
         </a>
 
-        <meta itemprop="position" :content="String(props.showHome ? index + 2 : index + 1)" />
+        <meta
+          v-if="withMicrodata"
+          itemprop="position"
+          :content="String(props.showHome ? index + 2 : index + 1)"
+        />
       </li>
     </ul>
   </nav>

package/src/components/layout/Header.astro

@@ -18,9 +18,9 @@ const navItemsLeft = [
 ];
 ---
 
-<nav
+<header
   itemscope
-  itemtype="http://schema.org/WPHeader"
+  itemtype="https://schema.org/WPHeader"
   class:list={[
     className,
     'nav print-hidden mx-auto px-4 shadow-md relative flex items-center justify-between h-24 sm:h-14 flex-wrap sm:flex-nowrap pt-1 sm:pt-0',
@@ -30,7 +30,12 @@ const navItemsLeft = [
     <slot name="logo" />
 
     <div class="hidden sm:block sm:ml-6">
-      <div class="flex space-x-4" itemprop="hasPart">
+      <nav
+        class="flex space-x-4"
+        itemprop="hasPart"
+        itemscope
+        itemtype="https://schema.org/SiteNavigationElement"
+      >
         {
           navItemsLeft.map(({ title, description, url }) => (
             <a
@@ -43,7 +48,7 @@ const navItemsLeft = [
             </a>
           ))
         }
-      </div>
+      </nav>
     </div>
   </div>
 
@@ -51,17 +56,17 @@ const navItemsLeft = [
     <slot name="search" />
   </div>
 
-  <div
+  <nav
     class="flex items-center pr-0 sm:static sm:inset-auto ml-auto sm:ml-6 -mr-2 print:hidden order-3 sm:order-3 w-20 justify-end"
     itemprop="hasPart"
     itemscope
-    itemtype="http://schema.org/SiteNavigationElement"
+    itemtype="https://schema.org/SiteNavigationElement"
   >
     <a class="icon-btn mx-2" title="" aria-label="" href="#" itemprop="url" data-astro-reload>
       <Icon name="carbon:language" />
     </a>
-  </div>
-</nav>
+  </nav>
+</header>
 
 <style is:global>
   nav {

package/src/pages/components/breadcrumbs.mdx

@@ -102,6 +102,35 @@ https://schema.org/ListItem
 />
 ```
 
+## Props
+
+| Prop            | Type      | Default | Description                                                                 |
+| --------------- | --------- | ------- | --------------------------------------------------------------------------- |
+| `breadcrumbs`   | Array     | -       | Array of breadcrumb objects with `name` and `path` properties (required)    |
+| `showBack`      | Boolean   | `false` | Show back button                                                            |
+| `textBack`      | String    | `'Back'`| Text for back button title                                                  |
+| `showHome`      | Boolean   | `false` | Show home icon as first breadcrumb                                          |
+| `productNumber` | String    | `null`  | Product number to display after last breadcrumb (mobile hidden)             |
+| `withMicrodata` | Boolean   | `true`  | Include Schema.org BreadcrumbList microdata (set to `false` for duplicates) |
+
+## Microdata Control
+
+When rendering breadcrumbs multiple times on the same page (e.g., mobile and desktop versions), use `withMicrodata` to prevent duplicate Schema.org markup:
+
+```js
+<!-- Desktop version - WITH microdata (default) -->
+<Breadcrumbs
+  breadcrumbs={[...]}
+  class="hidden md:block"
+/>
+
+<!-- Mobile version - WITHOUT microdata -->
+<Breadcrumbs
+  breadcrumbs={[...]}
+  class="block md:hidden"
+  :withMicrodata="false"
+/>
+```
 
 ### Schema support:
 - https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=en