spoko-design-system 1.1.0 → 1.1.2

package/.claude/settings.local.json

@@ -15,7 +15,8 @@
       "WebFetch(domain:polo.blue)",
       "Bash(git commit:*)",
       "Bash(git push:*)",
-      "Bash(pnpm run:*)"
+      "Bash(pnpm run:*)",
+      "Bash(git stash:*)"
     ],
     "deny": [],
     "ask": []

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

@@ -42,10 +42,10 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Check Prettier formatting
-        run: pnpm exec prettier --check "src/**/*.{js,ts,jsx,tsx,vue,astro,json,css,md}"
+        run: pnpm run format:check
 
       - name: Run ESLint
-        run: pnpm exec eslint "src/**/*.{js,ts,jsx,tsx,vue,astro}"
+        run: pnpm run lint
 
       - name: Type check
-        run: pnpm exec astro check
+        run: pnpm run check

package/.github/workflows/sonarcloud.yml

@@ -45,7 +45,7 @@ jobs:
         run: pnpm run build
 
       - name: SonarCloud Scan
-        uses: SonarSource/sonarcloud-github-action@master
+        uses: SonarSource/sonarqube-scan-action@master
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

package/.prettierrc

@@ -8,6 +8,7 @@
   "bracketSpacing": true,
   "arrowParens": "avoid",
   "endOfLine": "lf",
+  "plugins": ["prettier-plugin-astro"],
   "overrides": [
     {
       "files": "*.astro",

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.1.2](https://github.com/polo-blue/sds/compare/v1.1.1...v1.1.2) (2025-09-23)
+
+### Bug Fixes
+
+* add Prettier Astro plugin and format most files ([19e776d](https://github.com/polo-blue/sds/commit/19e776df1bed0ded35ca9b287db266b653ecb1ae))
+
+## [1.1.1](https://github.com/polo-blue/sds/compare/v1.1.0...v1.1.1) (2025-09-23)
+
+### Bug Fixes
+
+* update SonarCloud workflow to use non-deprecated action ([0523ea3](https://github.com/polo-blue/sds/commit/0523ea3e4e236a4bb2d972b5bb9090df33d72c50))
+
 ## [1.1.0](https://github.com/polo-blue/sds/compare/v1.0.1...v1.1.0) (2025-09-23)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -21,7 +21,12 @@
     "build": "astro build",
     "preview": "astro preview",
     "semantic-release": "semantic-release",
-    "prepublishOnly": "pnpm run build"
+    "prepublishOnly": "pnpm run build",
+    "format": "prettier --write \"src/**/*.{js,ts,jsx,tsx,vue,astro,json,css,md}\"",
+    "format:check": "prettier --check \"src/**/*.{js,ts,jsx,tsx,vue,astro,json,css,md}\"",
+    "lint": "eslint \"src/**/*.{js,ts,jsx,tsx,vue,astro}\"",
+    "lint:fix": "eslint \"src/**/*.{js,ts,jsx,tsx,vue,astro}\" --fix",
+    "check": "astro check"
   },
   "repository": {
     "type": "git",
@@ -121,6 +126,7 @@
     "eslint-plugin-astro": "^1.3.1",
     "eslint-plugin-vue": "^10.5.0",
     "prettier": "^3.6.2",
+    "prettier-plugin-astro": "^0.14.1",
     "semantic-release": "^24.2.9",
     "unocss": "^0.65.0",
     "vite": "^7.1.7"

package/src/MyComponent.astro

@@ -1,7 +1,7 @@
 ---
 // Write your component code in this file!
 interface Props {
-	prefix?: string;
+  prefix?: string;
 }
 ---
 

package/src/components/Badge.vue

@@ -10,11 +10,11 @@ const props = defineProps({
     required: true,
     default: 'bg-gray',
   },
-})
+});
 </script>
 
 <template>
   <div class="badge" :class="props.class">
     {{ props.badge }}
   </div>
-</template>
+</template>

package/src/components/Badges.vue

@@ -1,21 +1,31 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
-import Badge from "./Badge.vue"
+import type { PropType } from 'vue';
+import Badge from './Badge.vue';
 
 const props = defineProps({
   badges: {
     type: Array as PropType<string[]>,
     required: false,
     default() {
-      return []
+      return [];
     },
   },
-})
+});
 </script>
 
 <template>
-  <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')" />
+  <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'
+      "
+    />
   </div>
 </template>

package/src/components/Breadcrumbs.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-
 export interface Breadcrumb {
-  name: string,
-  path: string
+  name: string;
+  path: string;
 }
 
-import type { PropType } from 'vue'
+import type { PropType } from 'vue';
 
 const props = defineProps({
   showBack: {
@@ -15,7 +14,7 @@ const props = defineProps({
   textBack: {
     type: String,
     required: false,
-    default: 'Back'
+    default: 'Back',
   },
   showHome: {
     type: Boolean,
@@ -23,71 +22,80 @@ const props = defineProps({
   },
   breadcrumbs: {
     type: Array as PropType<Breadcrumb[]>,
-    required: true
+    required: true,
   },
   productNumber: {
     type: String,
     required: false,
-    default: null
-  }
-})
+    default: null,
+  },
+});
 
 const isLast = (index: number) => {
-  return index === props.breadcrumbs.length - 1
-}
+  return index === props.breadcrumbs.length - 1;
+};
 </script>
 
 <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()"
-        >
+        <button class="breadcrumb-back-btn" :title="props.textBack" onclick="history.back()">
           <span class="block px-3" i-bx-bx-arrow-back />
         </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"
+      itemscope
+      itemtype="https://schema.org/BreadcrumbList"
+    >
       <li v-if="props.showHome" class="breadcrumb-item">
-        <a href="/"
+        <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" 
-          i-carbon-home>
+          :title="props.textBack"
+          itemprop="item"
+          i-carbon-home
+        >
         </a>
-        <meta itemprop="position" content="1">
+        <meta 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">
+      <li
+        v-for="(crumb, index) in breadcrumbs"
+        :key="index"
+        class="breadcrumb-item"
+        itemprop="itemListElement"
+        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>
-        
-        <a v-if="!isLast(index)" 
-           :href="crumb.path" 
-           class="breadcrumb-link" 
-           itemprop="item" 
-           :title="`Polo 6R ${crumb.name}`">
+
+        <a
+          v-if="!isLast(index)"
+          :href="crumb.path"
+          class="breadcrumb-link"
+          itemprop="item"
+          :title="`Polo 6R ${crumb.name}`"
+        >
           <strong class="font-normal" itemprop="name">{{ crumb.name }}</strong>
         </a>
-        <a v-else 
+        <a
+          v-else
           :href="crumb.path"
           class="breadcrumb-link breadcrumb-link-disabled"
           :title="`Polo 6R ${crumb.name} ${productNumber}`"
-          itemprop="item">
+          itemprop="item"
+        >
           <span class="font-normal" itemprop="name">
             <span v-html="crumb.name"></span>
-            <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/Button.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useAttrs } from 'vue'
+import { useAttrs } from 'vue';
 
 interface ButtonProps {
   href?: string;
@@ -26,43 +26,44 @@ interface ButtonProps {
 const props = defineProps<ButtonProps>();
 
 // Check if we should add a default mediumHover for tertiary
-const shouldAddDefaultMediumHover = props.tertiary || props.tertiaryOutline && 
-  !props.whiteHover && 
-  !props.lightHover && 
-  !props.mediumHover && 
-  !props.darkHover;
+const shouldAddDefaultMediumHover =
+  props.tertiary ||
+  (props.tertiaryOutline &&
+    !props.whiteHover &&
+    !props.lightHover &&
+    !props.mediumHover &&
+    !props.darkHover);
 
-const tag = props.href && props.href.length ? 'a' : 'button'
+const tag = props.href && props.href.length ? 'a' : 'button';
 const classes = {
-  "btn-primary": props.primary,
-  "btn-primary-outline": props.primaryOutline,
-  "btn-secondary": props.secondary,
-  "btn-secondary-outline": props.secondaryOutline,
-  "btn-tertiary": props.tertiary,
-  "btn-tertiary-outline": props.tertiaryOutline,
-  "btn-text": props.text,
-  "btn-tag": props.tag,
-  "btn-sm": props.medium,
-  "btn-xs": props.small,
-  "btn-normal": !props.small && !props.medium,
-  "rounded-full": props.rounded,
-  "btn-circle": props.circle,
-  "btn-white-hover": props.whiteHover,
-  "btn-light-hover": props.lightHover,
-  "btn-medium-hover": props.mediumHover || shouldAddDefaultMediumHover,
-  "btn-dark-hover": props.darkHover
+  'btn-primary': props.primary,
+  'btn-primary-outline': props.primaryOutline,
+  'btn-secondary': props.secondary,
+  'btn-secondary-outline': props.secondaryOutline,
+  'btn-tertiary': props.tertiary,
+  'btn-tertiary-outline': props.tertiaryOutline,
+  'btn-text': props.text,
+  'btn-tag': props.tag,
+  'btn-sm': props.medium,
+  'btn-xs': props.small,
+  'btn-normal': !props.small && !props.medium,
+  'rounded-full': props.rounded,
+  'btn-circle': props.circle,
+  'btn-white-hover': props.whiteHover,
+  'btn-light-hover': props.lightHover,
+  'btn-medium-hover': props.mediumHover || shouldAddDefaultMediumHover,
+  'btn-dark-hover': props.darkHover,
 };
 
-
 const attrs = useAttrs();
 </script>
 
 <template>
- <component 
-    :is="tag" 
-    :class="classes" 
+  <component
+    :is="tag"
+    :class="classes"
     v-bind="attrs"
-    :href="props.href" 
+    :href="props.href"
     :title="props.title ? props.title : null"
   >
     <slot></slot>
@@ -99,4 +100,4 @@ const attrs = useAttrs();
 .btn-circle svg {
   margin: 0;
 }
-</style>
+</style>

package/src/components/ButtonCopy.astro

@@ -8,11 +8,7 @@ interface Props {
   };
 }
 
-const { 
-  productNumber,
-  tooltipClasses = '',
-  texts 
-} = Astro.props;
+const { productNumber, tooltipClasses = '', texts } = Astro.props;
 
 // SVG icon as data URL for mask
 const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
@@ -20,18 +16,17 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
 )}")`;
 ---
 
-<button 
-  aria-label={texts.copy} 
-  class="btn-copy has-tooltip" 
+<button
+  aria-label={texts.copy}
+  class="btn-copy has-tooltip"
   data-copy-text={productNumber}
   data-category={Astro.url.pathname.split('/')[1] || ''}
 >
-  <span 
-    class:list={["tooltip rounded-full btn-copy-text", tooltipClasses]}
+  <span
+    class:list={['tooltip rounded-full btn-copy-text', tooltipClasses]}
     data-text={texts.copy}
-    data-copied-text={texts.copied}
-  />
-  <span class="copy-icon" role="img" aria-hidden="true" />
+    data-copied-text={texts.copied}></span>
+  <span class="copy-icon" role="img" aria-hidden="true"></span>
 </button>
 
 <script>
@@ -85,7 +80,7 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
         productCode: this.copyText,
         category: this.category,
         pageUrl: window.location.pathname,
-        timestamp: new Date().toISOString()
+        timestamp: new Date().toISOString(),
       });
     }
 
@@ -109,10 +104,10 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
       textArea.value = this.copyText;
       textArea.style.position = 'fixed';
       textArea.style.opacity = '0';
-      
+
       document.body.appendChild(textArea);
       textArea.select();
-      
+
       try {
         document.execCommand('copy');
       } catch (err) {
@@ -181,4 +176,4 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
     -webkit-mask-size: 100% 100%;
     mask-size: 100% 100%;
   }
-</style>
+</style>

package/src/components/ButtonCopy.vue

@@ -1,36 +1,37 @@
 <script lang="ts" setup>
-import { useClipboard } from "@vueuse/core";
+import { useClipboard } from '@vueuse/core';
 // import { Icon } from "@iconify/vue";
 
 const props = defineProps({
-    productNumber: {
-        type: String,
-        default: null,
-        required: true,
+  productNumber: {
+    type: String,
+    default: null,
+    required: true,
+  },
+  tooltipClasses: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  texts: {
+    type: Object as PropType<{ copy: String; copied: String }>,
+    required: true,
+    default: {
+      copy: 'copy',
+      copied: 'copied',
     },
-    tooltipClasses: {
-        type: String,
-        required: false,
-        default: '',
-    },
-    texts: {
-        type: Object as PropType<{ copy: String, copied: String }>,
-        required: true,
-        default: {
-            copy: 'copy',
-            copied: 'copied',
-        }
-    }
-})
+  },
+});
 const source = props.productNumber;
 const { copy, copied, isSupported } = useClipboard({ source, legacy: true });
-
 </script>
 
 <template>
-    <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" />
-    </button>
+  <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" />
+  </button>
 </template>

package/src/components/Card.astro

@@ -1,12 +1,10 @@
 ---
 const { class: className, imgSrc, imgAlt, href } = Astro.props;
 
-import Image from "../components/Image.astro";
+import Image from '../components/Image.astro';
 ---
 
-<div
-  class="bg-white border border-gray-200 rounded-lg shadow overflow-hidden"
->
+<div class="bg-white border border-gray-200 rounded-lg shadow overflow-hidden">
   <a href={href} class="aspect-ratio-video block relative">
     {
       imgSrc && (
@@ -14,8 +12,8 @@ import Image from "../components/Image.astro";
           imageObject={{
             src: imgSrc,
             alt: imgAlt,
-            height: "405",
-            width: "720",
+            height: '405',
+            width: '720',
           }}
         />
       )

package/src/components/Carousel.astro

@@ -1,10 +1,10 @@
 ---
 export const productObject = {
-  name: "Combi-instrument MFA+",
-  url: "https://google.com",
-  number: "6R0920870F",
+  name: 'Combi-instrument MFA+',
+  url: 'https://google.com',
+  number: '6R0920870F',
   photo:
-    "https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337",
+    'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
 };
 ---