spoko-design-system 1.1.17 → 1.2.0

package/.github/workflows/code-quality.yml

@@ -13,17 +13,18 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: '22'
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: '10.16.1'
+      - name: Install pnpm
+        run: npm install -g pnpm@10.17.1
+
+      - name: Verify pnpm
+        run: pnpm --version
 
       - name: Get pnpm store directory
         shell: bash
@@ -44,5 +45,8 @@ jobs:
       - name: Check Prettier formatting
         run: pnpm run format:check
 
+      - name: Run ESLint
+        run: pnpm run lint
+
       - name: Type check
         run: pnpm run check

package/.github/workflows/deploy.yml

@@ -4,7 +4,7 @@ on:
   # Trigger the workflow every time you push to the `main` branch
   # Using a different branch name? Replace `main` with your branch’s name
   push:
-    branches: [ ma ]
+    branches: [ main ]
   # Allows you to run this workflow manually from the Actions tab on GitHub.
   workflow_dispatch:
 
@@ -19,14 +19,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout your repository using git
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
       - name: Install, build, and upload your site
-        uses: withastro/action@v3
+        uses: withastro/action@v4
         with:
-            pnpm@latest
+          package-manager: pnpm@10.17.1
           # path: . # The root location of your Astro project inside the repository. (optional)
           # node-version: 18 # The specific version of Node that should be used to build your site. Defaults to 18. (optional)
-          # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
 
   deploy:
     needs: build

package/.github/workflows/release.yml

@@ -21,34 +21,22 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
           token: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          registry-url: 'https://registry.npmjs.org'
-
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 10.16.1
+          version: 10.17.1
 
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - name: Setup pnpm cache
-        uses: actions/cache@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
         with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+          node-version: 22
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

package/.github/workflows/sonarcloud.yml

@@ -11,19 +11,20 @@ jobs:
     name: SonarCloud
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
         with:
           fetch-depth: 0  # Shallow clones should be disabled for better analysis
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: '22'
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: '10.16.1'
+      - name: Install pnpm
+        run: npm install -g pnpm@10.17.1
+
+      - name: Verify pnpm
+        run: pnpm --version
 
       - name: Get pnpm store directory
         shell: bash
@@ -45,7 +46,7 @@ jobs:
         run: pnpm run build
 
       - name: SonarCloud Scan
-        uses: SonarSource/sonarqube-scan-action@master
+        uses: SonarSource/sonarcloud-github-action@master
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

package/.vscode/settings.json

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

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## [1.2.0](https://github.com/polo-blue/sds/compare/v1.1.17...v1.2.0) (2025-10-05)
+
+### Features
+
+* update icons and improve homepage layout ([d67ebc7](https://github.com/polo-blue/sds/commit/d67ebc7a0d9ab7f715f98893c9c13f3780e3e05b))
+
+### Bug Fixes
+
+* apply enhanced pnpm setup to release workflow ([f633630](https://github.com/polo-blue/sds/commit/f633630a504c9babfb26db455d49d806ec0ff208))
+* correct GitHub Actions deploy workflow YAML syntax ([4cd8e12](https://github.com/polo-blue/sds/commit/4cd8e1281a16899ca758f93c8492cce632a29110))
+* disable Jekyll processing for Astro GitHub Pages ([474f08b](https://github.com/polo-blue/sds/commit/474f08b25c0f3364136a54331ff830814fa2a4de))
+* enhance pnpm setup with fallback installation ([6266f19](https://github.com/polo-blue/sds/commit/6266f1966fdd96946012355230dcd37b5889833f))
+* improve pnpm PATH handling in release workflow ([e3c15de](https://github.com/polo-blue/sds/commit/e3c15de7df68df4fd22aa522f7247c1b8f3babaa))
+* improve Vue components formatting and fix key issues ([b971bf2](https://github.com/polo-blue/sds/commit/b971bf2541fcf572a733618ebedfe423d7d02009))
+* refine gitignore to preserve team VS Code settings ([6c98b10](https://github.com/polo-blue/sds/commit/6c98b10f031c2d11ea312bbacb5337a8cb61a61e))
+* resolve pnpm executable error in code-quality workflow ([5a43ab8](https://github.com/polo-blue/sds/commit/5a43ab818412f058ee6fcd5fbc589109fae85301))
+* resolve pnpm issues in deploy and release workflows ([464e29e](https://github.com/polo-blue/sds/commit/464e29ed728109450b70d987aac1e33d7cb4bb5b))
+* resolve SonarCloud pnpm executable error ([8569495](https://github.com/polo-blue/sds/commit/85694952b80e51a480f3b76f91c9301460613bae))
+* revert to enhanced pnpm setup in release workflow ([61d398e](https://github.com/polo-blue/sds/commit/61d398ea1736aee3bf5d734bb2a0119ae8a65ab9))
+* simplify pnpm installation across all workflows ([863c77c](https://github.com/polo-blue/sds/commit/863c77ccc22cb6924385bb22a5de7576bd400dee))
+* support badge objects from API ([d1fffc4](https://github.com/polo-blue/sds/commit/d1fffc4a04fce373ca4518dd22ebd22a11de4e4a))
+* use corepack for pnpm setup in release workflow ([e08a090](https://github.com/polo-blue/sds/commit/e08a090de316ce5040c43b0f328db9a08922fd63))
+* use direct pnpm installation in release workflow ([2e47c51](https://github.com/polo-blue/sds/commit/2e47c51e0f0b9356d92b9bca81aba4c7ad11cd7b))
+* use pnpm/action-setup for proper pnpm installation in release workflow ([3b24b69](https://github.com/polo-blue/sds/commit/3b24b69db681ac2380e93a71f2d7bdcc0d939e2a))
+
 ## [1.1.17](https://github.com/polo-blue/sds/compare/v1.1.16...v1.1.17) (2025-09-23)
 
 ## [1.1.16](https://github.com/polo-blue/sds/compare/v1.1.15...v1.1.16) (2025-09-23)

package/icon.config.ts

@@ -301,6 +301,7 @@ export const iconConfig: IconConfig = {
 
     'vscode-icons': [
       'file-type-astro',
+      'file-type-light-astro',
       'file-type-unocss',
       'file-type-vue',
       'file-type-typescript',
@@ -317,7 +318,8 @@ export const iconConfig: IconConfig = {
       'module-building-blocks',
       'layouts-array-1',
       'archive-box',
-      'donation-charity-donate-box'
+      'donation-charity-donate-box',
+      'coding-files-network-folder'
     ]
   },
   collections: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.1.17",
+  "version": "1.2.0",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -74,29 +74,29 @@
     "@iconify-json/icon-park-outline": "^1.2.4",
     "@iconify-json/la": "^1.2.1",
     "@iconify-json/lucide": "^1.2.68",
-    "@iconify-json/material-symbols-light": "^1.2.37",
+    "@iconify-json/material-symbols-light": "^1.2.38",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/noto-v1": "^1.2.5",
     "@iconify-json/octicon": "^1.2.14",
     "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.52",
+    "@iconify-json/simple-icons": "^1.2.53",
     "@iconify-json/streamline": "^1.2.5",
     "@iconify-json/streamline-emojis": "^1.2.4",
     "@iconify-json/streamline-freehand-color": "^1.2.2",
     "@iconify-json/system-uicons": "^1.2.4",
     "@iconify-json/uil": "^1.2.3",
-    "@iconify-json/vscode-icons": "^1.2.2",
-    "@iconify/json": "^2.2.386",
+    "@iconify-json/vscode-icons": "^1.2.30",
+    "@iconify/json": "^2.2.387",
     "@iconify/vue": "^5.0.0",
     "@playform/compress": "^0.2.0",
     "@playform/inline": "^0.1.2",
-    "@unocss/astro": "66.5.1",
-    "@unocss/preset-attributify": "66.5.1",
-    "@unocss/preset-typography": "66.5.1",
-    "@unocss/preset-uno": "66.5.1",
-    "@unocss/preset-web-fonts": "66.5.1",
-    "@unocss/preset-wind": "66.5.1",
-    "@unocss/reset": "66.5.1",
+    "@unocss/astro": "66.5.2",
+    "@unocss/preset-attributify": "66.5.2",
+    "@unocss/preset-typography": "66.5.2",
+    "@unocss/preset-uno": "66.5.2",
+    "@unocss/preset-web-fonts": "66.5.2",
+    "@unocss/preset-wind": "66.5.2",
+    "@unocss/reset": "66.5.2",
     "@vite-pwa/astro": "^1.1.0",
     "@vueuse/core": "^13.9.0",
     "astro-icon": "^1.1.5",
@@ -106,7 +106,7 @@
     "astro-remote": "^0.3.4",
     "dotenv": "^17.2.2",
     "swiper": "^12.0.2",
-    "unocss": "66.5.1",
+    "unocss": "66.5.2",
     "vue": "^3.5.21"
   },
   "devDependencies": {
@@ -116,12 +116,12 @@
     "@types/node": "^24.5.2",
     "@typescript-eslint/eslint-plugin": "^8.44.1",
     "@typescript-eslint/parser": "^8.44.1",
-    "@unocss/transformer-variant-group": "66.5.1",
+    "@unocss/transformer-variant-group": "66.5.2",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/compiler-sfc": "^3.5.21",
     "@vue/eslint-config-typescript": "^14.6.0",
     "astro": "^5.13.10",
-    "conventional-changelog-conventionalcommits": "^8.0.0",
+    "conventional-changelog-conventionalcommits": "^9.1.0",
     "eslint": "^9.36.0",
     "eslint-plugin-astro": "^1.3.1",
     "eslint-plugin-vue": "^10.5.0",
@@ -131,7 +131,7 @@
     "unocss": "^0.65.0",
     "vite": "^7.1.7"
   },
-  "packageManager": "pnpm@10.16.1",
+  "packageManager": "pnpm@10.17.1",
   "pnpm": {
     "default": "9.15.3",
     "overrides": {

package/sonar-project.properties

@@ -16,4 +16,7 @@ sonar.typescript.lcov.reportPaths=coverage/lcov.info
 # Additional settings
 sonar.sourceEncoding=UTF-8
 sonar.javascript.file.suffixes=.js,.jsx
-sonar.typescript.file.suffixes=.ts,.tsx,.vue,.astro
+sonar.typescript.file.suffixes=.ts,.tsx,.vue,.astro
+
+# CSS rule exclusions
+sonar.css.S4667.disabled=true

package/src/components/Badge.vue

@@ -14,7 +14,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="badge" :class="props.class">
+  <div
+    class="badge"
+    :class="props.class"
+  >
     {{ props.badge }}
   </div>
 </template>

package/src/components/Badges.vue

@@ -2,30 +2,60 @@
 import type { PropType } from 'vue';
 import Badge from './Badge.vue';
 
+interface BadgeObject {
+  slug: string;
+  label: string;
+  type?: string;
+  color?: string;
+  priority?: number;
+}
+
 const props = defineProps({
   badges: {
-    type: Array as PropType<string[]>,
+    type: Array as PropType<(string | BadgeObject)[]>,
     required: false,
     default() {
       return [];
     },
   },
 });
+
+// Helper function to get badge text (support both string and object format)
+const getBadgeText = (badge: string | BadgeObject): string => {
+  if (typeof badge === 'string') {
+    return badge;
+  }
+  return badge.label || badge.slug || '';
+};
+
+// Helper function to get badge color from API or fallback to legacy logic
+const getBadgeColor = (badge: string | BadgeObject): string => {
+  // If badge is an object with color property, use it
+  if (typeof badge === 'object' && badge.color) {
+    return badge.color;
+  }
+
+  // Otherwise, use legacy logic based on text
+  const text = getBadgeText(badge).toLowerCase();
+  if (text.includes('gti')) {
+    return 'bg-red-600';
+  } else if (text.includes('motorsport') || text.includes('wrc')) {
+    return 'bg-blue-wrc';
+  }
+  return 'bg-black';
+};
 </script>
 
 <template>
-  <div v-if="props.badges && props.badges.length > 0" class="absolute z-2">
+  <div
+    v-if="props.badges && props.badges.length > 0"
+    class="absolute z-2"
+  >
     <Badge
       v-for="(badge, index) in props.badges"
       :key="index"
-      :badge="badge"
-      :class="
-        badge.toLocaleLowerCase().includes('gti')
-          ? 'bg-red-600'
-          : badge.toLocaleLowerCase().includes('motorsport')
-            ? 'bg-blue-wrc'
-            : 'bg-black'
-      "
+      :badge="getBadgeText(badge)"
+      :class="getBadgeColor(badge)"
     />
   </div>
 </template>

package/src/components/Breadcrumbs.vue

@@ -39,9 +39,19 @@ const isLast = (index: number) => {
 <template>
   <nav>
     <ul class="breadcrumbs-base">
-      <li v-if="props.showBack" class="breadcrumb-item">
-        <button class="breadcrumb-back-btn" :title="props.textBack" onclick="history.back()">
-          <span class="block px-3" i-bx-bx-arrow-back />
+      <li
+        v-if="props.showBack"
+        class="breadcrumb-item"
+      >
+        <button
+          class="breadcrumb-back-btn"
+          :title="props.textBack"
+          onclick="history.back()"
+        >
+          <span
+            class="block px-3"
+            i-bx-bx-arrow-back
+          />
         </button>
       </li>
     </ul>
@@ -50,7 +60,10 @@ const isLast = (index: number) => {
       itemscope
       itemtype="https://schema.org/BreadcrumbList"
     >
-      <li v-if="props.showHome" class="breadcrumb-item">
+      <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"
@@ -58,7 +71,10 @@ const isLast = (index: number) => {
           itemprop="item"
           i-carbon-home
         />
-        <meta itemprop="position" content="1" />
+        <meta
+          itemprop="position"
+          content="1"
+        >
       </li>
       <li
         v-for="(crumb, index) in breadcrumbs"
@@ -68,7 +84,10 @@ const isLast = (index: number) => {
         itemscope
         itemtype="https://schema.org/ListItem"
       >
-        <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"
+        >/</span>
 
         <a
           v-if="!isLast(index)"
@@ -77,7 +96,10 @@ const isLast = (index: number) => {
           itemprop="item"
           :title="`Polo 6R ${crumb.name}`"
         >
-          <strong class="font-normal" itemprop="name">{{ crumb.name }}</strong>
+          <strong
+            class="font-normal"
+            itemprop="name"
+          >{{ crumb.name }}</strong>
         </a>
         <a
           v-else
@@ -86,15 +108,22 @@ const isLast = (index: number) => {
           :title="`Polo 6R ${crumb.name} ${productNumber}`"
           itemprop="item"
         >
-          <span class="font-normal" itemprop="name">
+          <span
+            class="font-normal"
+            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="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
+          itemprop="position"
+          :content="String(props.showHome ? index + 2 : index + 1)"
+        >
       </li>
     </ul>
   </nav>

package/src/components/ButtonCopy.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { useClipboard } from '@vueuse/core';
 import type { PropType } from 'vue';
-// import { Icon } from "@iconify/vue";
 
 const props = defineProps({
   productNumber: {
@@ -15,7 +14,7 @@ const props = defineProps({
     default: '',
   },
   texts: {
-    type: Object as PropType<{ copy: String; copied: String }>,
+    type: Object as PropType<{ copy: string; copied: string }>,
     required: true,
     default: () => ({
       copy: 'copy',
@@ -28,11 +27,18 @@ const { copy, copied } = useClipboard({ source, legacy: true });
 </script>
 
 <template>
-  <button :aria-label="texts.copy" class="btn-copy has-tooltip" @click="copy()">
+  <button
+    :aria-label="texts.copy"
+    class="btn-copy has-tooltip"
+    @click="copy()"
+  >
     <span
       :class="`tooltip rounded-full btn-copy-text ${tooltipClasses}`"
       :data-text="!copied ? texts.copy : texts.copied"
     />
-    <span i-ph-copy-simple-light class="leading-none w-full h-full" />
+    <span
+      i-ph-copy-simple-light
+      class="leading-none w-full h-full"
+    />
   </button>
 </template>

package/src/components/Category/CategoryLink.vue

@@ -1,5 +1,9 @@
 <template>
-  <a :href="href" class="category-link" :class="{ active: active }">
+  <a
+    :href="href"
+    class="category-link"
+    :class="{ active: active }"
+  >
     {{ text }}
   </a>
 </template>

package/src/components/Category/CategorySidebarToggler.vue

@@ -1,5 +1,9 @@
 <template>
-  <button class="category-toggler md:w-8" type="button" aria-label="toggle menu">
+  <button
+    class="category-toggler md:w-8"
+    type="button"
+    aria-label="toggle menu"
+  >
     <slot />
   </button>
 </template>

package/src/components/FeaturesList.vue

@@ -3,12 +3,12 @@ import { PropType } from 'vue';
 
 const props = defineProps({
   items: {
-    type: Object as PropType<String[] | null>,
+    type: Object as PropType<string[] | null>,
     default: null,
     required: true,
   },
   caption: {
-    type: String as PropType<String | null>,
+    type: String as PropType<string | null>,
     default: null,
     required: false,
   },
@@ -16,11 +16,18 @@ const props = defineProps({
 </script>
 
 <template>
-  <h2 v-if="props.caption" class="features-list-caption">
+  <h2
+    v-if="props.caption"
+    class="features-list-caption"
+  >
     {{ props.caption }}
   </h2>
   <ul class="features-list-ul">
-    <li v-for="item in props.items" :key="item" class="features-list-item">
+    <li
+      v-for="(item, index) in props.items"
+      :key="index"
+      class="features-list-item"
+    >
       {{ item }}
     </li>
   </ul>

package/src/components/FuckRussia.vue

@@ -1,20 +1,47 @@
 <template>
-  <div class="relative flex" title="FUCK PUTIN! FUCK RUZZIA!">
-    <div i-mdi:tank class="inline-block bg-ukraine mr-1 mt-0.5" />
-    <div i-mdi:tank class="inline-block bg-ukraine mr-1 mt-0.5" />
-    <div i-mdi:tank class="inline-block bg-ukraine mr-5 mt-0.5" />
+  <div
+    class="relative flex"
+    title="FUCK PUTIN! FUCK RUZZIA!"
+  >
+    <div
+      i-mdi:tank
+      class="inline-block bg-ukraine mr-1 mt-0.5"
+    />
+    <div
+      i-mdi:tank
+      class="inline-block bg-ukraine mr-1 mt-0.5"
+    />
+    <div
+      i-mdi:tank
+      class="inline-block bg-ukraine mr-5 mt-0.5"
+    />
     <div class="relative">
-      <div class="inline-block absolute" i-noto-v1:flag-for-flag-russia />
-      <div i-emojione:fire class="inline-block absolute -mt-1 animate-ping animate-pulseR" />
+      <div
+        class="inline-block absolute"
+        i-noto-v1:flag-for-flag-russia
+      />
+      <div
+        i-emojione:fire
+        class="inline-block absolute -mt-1 animate-ping animate-pulseR"
+      />
     </div>
     <div class="absolute left-0 animate-bull animate-bull--1 -mt-1">
-      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow" />
+      <div
+        i-mdi:bullet
+        class="rotate-90 inline-block bg-yellow"
+      />
     </div>
     <div class="absolute left-0 animate-bull animate-bull animate-bull--2 -mt-1">
-      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow" />
+      <div
+        i-mdi:bullet
+        class="rotate-90 inline-block bg-yellow"
+      />
     </div>
     <div class="absolute left-0 animate-bull animate-bull--3 -mt-1">
-      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow" />
+      <div
+        i-mdi:bullet
+        class="rotate-90 inline-block bg-yellow"
+      />
     </div>
   </div>
 </template>