spoko-design-system 1.21.1 → 1.23.0

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.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
+
+* **category:** add withMicrodata prop to control Schema.org rendering ([95c96cd](https://github.com/polo-blue/sds/commit/95c96cd71ec15a233432abec2d0c0f109ccd8f5d))
+
 ## [1.21.1](https://github.com/polo-blue/sds/compare/v1.21.0...v1.21.1) (2025-12-15)
 
 ### Bug Fixes

package/package.json

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

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/Category/CategoriesCarousel.astro

@@ -1,5 +1,5 @@
 ---
-const { activeCategorySlug, class: className } = Astro.props;
+const { activeCategorySlug, class: className, withMicrodata = true } = Astro.props;
 
 import { getTranslatedLink } from '@utils/text/getTranslatedLink';
 import { getMainCategoryList } from '@utils/category/getMainCategoryList';
@@ -10,6 +10,22 @@ const imgDomain = 'https://api.polo.blue/img/';
 
 const activeIndex =
   activeCategorySlug && categories ? categories.map(a => a.slug).findIndex(e => e === activeCategorySlug) : 0;
+
+// Microdata attributes - only added when withMicrodata is true
+const containerMicrodata = withMicrodata
+  ? {
+      itemscope: true,
+      itemtype: 'https://schema.org/SiteNavigationElement',
+    }
+  : {};
+
+const slideMicrodata = withMicrodata
+  ? {
+      itemprop: 'hasPart',
+      itemscope: true,
+      itemtype: 'https://schema.org/SiteNavigationElement',
+    }
+  : {};
 ---
 
 <!-- <div class={`cat-menu ${className ? className : ''}`} 
@@ -21,8 +37,7 @@ const activeIndex =
 <swiper-container
   class={`categories-carousel flex pb-1 sm:pb-0 bg-white cat-menu ${className ? className : ''}`}
   data-pagefind-ignore
-  itemscope
-  itemtype="https://schema.org/SiteNavigationElement"
+  {...containerMicrodata}
   transition:persist={`catcarousel${activeIndex}`}
   transition:animate="none"
   data-active={activeIndex}
@@ -39,13 +54,15 @@ const activeIndex =
   {
     categories.map(category => (
       <swiper-slide
-        itemprop="hasPart"
-        itemscope
-        itemtype="https://schema.org/SiteNavigationElement"
+        {...slideMicrodata}
         role="presentation"
         class={`swiper-slide cats-slide group ${category.slug === activeCategorySlug ? 'active' : ''}`}
       >
-        <a itemprop="url" href={getTranslatedLink(`/${category.slug}/`)} class="carousel-item">
+        <a
+          {...(withMicrodata ? { itemprop: 'url' } : {})}
+          href={getTranslatedLink(`/${category.slug}/`)}
+          class="carousel-item"
+        >
           <Image
             src={`${imgDomain}${category.photo}`}
             alt={category.name}
@@ -58,7 +75,7 @@ const activeIndex =
           />
           <div class="swiper-lazy-preloader" />
 
-          <div class="cat-name" itemprop="name">
+          <div class="cat-name" {...(withMicrodata ? { itemprop: 'name' } : {})}>
             {category.name}
           </div>
         </a>

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