spoko-design-system 0.2.20 → 0.2.21

package/src/components/Breadcrumbs.vue

@@ -1,110 +1,110 @@
-<script setup lang="ts">
-
-export interface Breadcrumb {
-  name: string,
-  path: string
-}
-
-import type { PropType } from 'vue'
-
-const props = defineProps({
-  showBack: {
-    type: Boolean,
-    required: false,
-  },
-  textBack: {
-    type: String,
-    required: false,
-    default: 'Back'
-  },
-  showHome: {
-    type: Boolean,
-    required: false,
-  },
-  breadcrumbs: {
-    type: Object as PropType<Breadcrumb[]>,
-    required: true
-  },
-  productNumber: {
-    type: String,
-    required: false,
-    default: null
-  }
-})
-
-const isLast = (index: Number) => {
-  return index === props.breadcrumbs.length - 1
-}
-</script>
-
-<template>
-  <nav>
-    <ul class="breadcrumbs flex items-center p-0 leading-none	">
-      <li v-if="props.showBack" class="breadcrumb-item flex">
-        <button
-          class="breadcrumb-link flex items-center px-0 py-2 sm:py-1 hover:text-lightBlue-500 whitespace-nowrap  my-auto"
-          :title="props.textBack" onclick="history.back()">
-          <span class="block px-3" i-bx-bx-arrow-back />
-        </button>
-      </li>
-    </ul>
-    <ul class="breadcrumbs flex items-center p-0 overflow-x-auto overflow-y-hidden sm:mr-12 leading-none	" itemscope
-      itemtype="https://schema.org/BreadcrumbList">
-      <li v-if="props.showHome" class="breadcrumb-item flex">
-        <a href="/"
-          class="breadcrumb-link flex items-center px-0 py-2 sm:py-1 hover:text-lightBlue-400 whitespace-nowrap translate-y-0 text-sm my-auto px-3"
-          :title="textBack" itemprop="item" i-carbon-home>
-        </a>
-        <meta itemprop="position" content="1">
-      </li>
-      <li v-for="(crumb, index) in  breadcrumbs" :key="index" class="breadcrumb-item flex" itemprop="itemListElement"
-        itemscope itemtype="https://schema.org/ListItem">
-        <a v-if="!isLast(index)" :href="crumb.path" class="breadcrumb-link whitespace-nowrap py-2 sm:py-1 px-1"
-          itemprop="item" :title="`Polo 6R ${crumb.name}`">
-          <strong class="font-normal" itemprop="name">{{ crumb.name }}</strong>
-        </a>
-        <a v-else :href="crumb.path"
-          class="breadcrumb-link breadcrumb-link--disabled whitespace-nowrap pointer-events-none py-2 sm:py-1 px-1"
-          :title="`Polo 6R ${crumb.name} ${productNumber}`">
-          <strong class="font-normal" itemprop="name" v-html="crumb.name" /> <b>{{ productNumber }}</b>
-        </a>
-        <meta itemprop="position" :content="String(props.showHome ? index + 2 : index + 1)">
-      </li>
-    </ul>
-  </nav>
-</template>
-
-<style lang="scss" scoped>
-.breadcrumbs {
-  list-style: none;
-  font-size: 0.875rem;
-}
-
-.breadcrumb-item {
-
-  &+.breadcrumb-item:before {
-    @apply py-2 sm:py-1 px-1;
-    display: inline-block;
-    padding-right: .5rem;
-    color: #bdbdbd;
-    content: "/";
-  }
-
-  b {
-    @apply hidden sm:inline font-normal;
-  }
-}
-
-.breadcrumb-link {
-  border: 0;
-  cursor: pointer;
-
-  &--disabled {
-    cursor: default;
-
-    &:hover {
-      color: inherit;
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+
+export interface Breadcrumb {
+  name: string,
+  path: string
+}
+
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  showBack: {
+    type: Boolean,
+    required: false,
+  },
+  textBack: {
+    type: String,
+    required: false,
+    default: 'Back'
+  },
+  showHome: {
+    type: Boolean,
+    required: false,
+  },
+  breadcrumbs: {
+    type: Object as PropType<Breadcrumb[]>,
+    required: true
+  },
+  productNumber: {
+    type: String,
+    required: false,
+    default: null
+  }
+})
+
+const isLast = (index: Number) => {
+  return index === props.breadcrumbs.length - 1
+}
+</script>
+
+<template>
+  <nav>
+    <ul class="breadcrumbs flex items-center p-0 leading-none	">
+      <li v-if="props.showBack" class="breadcrumb-item flex">
+        <button
+          class="breadcrumb-link flex items-center px-0 py-2 sm:py-1 hover:text-lightBlue-500 whitespace-nowrap  my-auto"
+          :title="props.textBack" onclick="history.back()">
+          <span class="block px-3" i-bx-bx-arrow-back />
+        </button>
+      </li>
+    </ul>
+    <ul class="breadcrumbs flex items-center p-0 overflow-x-auto overflow-y-hidden sm:mr-12 leading-none	" itemscope
+      itemtype="https://schema.org/BreadcrumbList">
+      <li v-if="props.showHome" class="breadcrumb-item flex">
+        <a href="/"
+          class="breadcrumb-link flex items-center px-0 py-2 sm:py-1 hover:text-lightBlue-400 whitespace-nowrap translate-y-0 text-sm my-auto px-3"
+          :title="textBack" itemprop="item" i-carbon-home>
+        </a>
+        <meta itemprop="position" content="1">
+      </li>
+      <li v-for="(crumb, index) in  breadcrumbs" :key="index" class="breadcrumb-item flex" itemprop="itemListElement"
+        itemscope itemtype="https://schema.org/ListItem">
+        <a v-if="!isLast(index)" :href="crumb.path" class="breadcrumb-link whitespace-nowrap py-2 sm:py-1 px-1"
+          itemprop="item" :title="`Polo 6R ${crumb.name}`">
+          <strong class="font-normal" itemprop="name">{{ crumb.name }}</strong>
+        </a>
+        <a v-else :href="crumb.path"
+          class="breadcrumb-link breadcrumb-link--disabled whitespace-nowrap pointer-events-none py-2 sm:py-1 px-1"
+          :title="`Polo 6R ${crumb.name} ${productNumber}`">
+          <strong class="font-normal" itemprop="name" v-html="crumb.name" /> <b>{{ productNumber }}</b>
+        </a>
+        <meta itemprop="position" :content="String(props.showHome ? index + 2 : index + 1)">
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<style lang="scss" scoped>
+.breadcrumbs {
+  list-style: none;
+  font-size: 0.875rem;
+}
+
+.breadcrumb-item {
+
+  &+.breadcrumb-item:before {
+    @apply py-2 sm:py-1 px-1;
+    display: inline-block;
+    padding-right: .5rem;
+    color: #bdbdbd;
+    content: "/";
+  }
+
+  b {
+    @apply hidden sm:inline font-normal;
+  }
+}
+
+.breadcrumb-link {
+  border: 0;
+  cursor: pointer;
+
+  &--disabled {
+    cursor: default;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+}
+</style>

package/src/components/Button.vue

@@ -1,56 +1,56 @@
-<script setup lang="ts">
-
-const props = defineProps<{
-  href?: string;
-  title?: string;
-  primary?: boolean;
-  primaryOutline?: boolean;
-  secondary?: boolean;
-  secondaryOutline?: boolean;
-  tertiary?: boolean;
-  tertiaryOutline?: boolean;
-  text?: boolean;
-  tag?: boolean;
-  small?: boolean;
-  medium?: boolean;
-  rounded?: boolean;
-}>();
-
-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
-};
-</script>
-
-<template>
-  <component :is="tag" :class="classes" :href="props.href" :title="props.title ? props.title : null">
-    <slot></slot>
-  </component>
-</template>
-
-<style lang="scss">
-.btn-primary,
-.btn-secondary {
-  svg {
-    color: #fff;
-  }
-}
-
-.btn-tertiary {
-  svg {
-    color: var(--primary);
-  }
-}
-
+<script setup lang="ts">
+
+const props = defineProps<{
+  href?: string;
+  title?: string;
+  primary?: boolean;
+  primaryOutline?: boolean;
+  secondary?: boolean;
+  secondaryOutline?: boolean;
+  tertiary?: boolean;
+  tertiaryOutline?: boolean;
+  text?: boolean;
+  tag?: boolean;
+  small?: boolean;
+  medium?: boolean;
+  rounded?: boolean;
+}>();
+
+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
+};
+</script>
+
+<template>
+  <component :is="tag" :class="classes" :href="props.href" :title="props.title ? props.title : null">
+    <slot></slot>
+  </component>
+</template>
+
+<style lang="scss">
+.btn-primary,
+.btn-secondary {
+  svg {
+    color: #fff;
+  }
+}
+
+.btn-tertiary {
+  svg {
+    color: var(--primary);
+  }
+}
+
 </style>

package/src/components/ButtonCopy.vue

@@ -1,47 +1,47 @@
-<script lang="ts" setup>
-import { useClipboard } from "@vueuse/core";
-import { Icon } from "@iconify/vue";
-import { PropType } from "vue";
-
-const props = defineProps({
-    productNumber: {
-        type: String,
-        default: '',
-        required: true,
-    },
-    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 });
-
-</script>
-
-<template>
-    <button v-if="isSupported" :aria-label="String(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" />
-        <Icon icon="ph-copy-simple-light" class="leading-none w-full h-full" />
-    </button>
-</template>
-
-<style>
-.tooltip {
-    @apply invisible absolute;
-}
-
-.has-tooltip:hover .tooltip {
-    @apply visible z-50;
-}
-</style>
+<script lang="ts" setup>
+import { useClipboard } from "@vueuse/core";
+import { Icon } from "@iconify/vue";
+import { PropType } from "vue";
+
+const props = defineProps({
+    productNumber: {
+        type: String,
+        default: '',
+        required: true,
+    },
+    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 });
+
+</script>
+
+<template>
+    <button v-if="isSupported" :aria-label="String(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" />
+        <Icon icon="ph-copy-simple-light" class="leading-none w-full h-full" />
+    </button>
+</template>
+
+<style>
+.tooltip {
+    @apply invisible absolute;
+}
+
+.has-tooltip:hover .tooltip {
+    @apply visible z-50;
+}
+</style>

package/src/components/Card.astro

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

package/src/components/Carousel.astro

@@ -1,26 +1,26 @@
----
-export const productObject = {
-  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",
-};
----
-
-<swiper-container
-  class="max-w-full w-full flex overflow-hidden"
-  grid-rows="1"
-  mousewheel-force-to-axis="true"
-  navigation="true"
-  pagination-type="fraction"
-  scrollbar="false"
-  slides-per-view="auto"
-  space-between="0"
->
-  <swiper-slide class="bg-blue-50 p-12 border-1 min-w-full">A</swiper-slide>
-  <swiper-slide class="bg-blue-100 p-12 border-1 min-w-full">B</swiper-slide>
-  <swiper-slide class="bg-blue-200 p-12 border-1 min-w-full">C</swiper-slide>
-  <swiper-slide class="bg-blue-300 p-12 border-1 min-w-full">D</swiper-slide>
-  <swiper-slide class="bg-blue-400 p-12 border-1 min-w-full">A</swiper-slide>
-</swiper-container>
+---
+export const productObject = {
+  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",
+};
+---
+
+<swiper-container
+  class="max-w-full w-full flex overflow-hidden"
+  grid-rows="1"
+  mousewheel-force-to-axis="true"
+  navigation="true"
+  pagination-type="fraction"
+  scrollbar="false"
+  slides-per-view="auto"
+  space-between="0"
+>
+  <swiper-slide class="bg-blue-50 p-12 border-1 min-w-full">A</swiper-slide>
+  <swiper-slide class="bg-blue-100 p-12 border-1 min-w-full">B</swiper-slide>
+  <swiper-slide class="bg-blue-200 p-12 border-1 min-w-full">C</swiper-slide>
+  <swiper-slide class="bg-blue-300 p-12 border-1 min-w-full">D</swiper-slide>
+  <swiper-slide class="bg-blue-400 p-12 border-1 min-w-full">A</swiper-slide>
+</swiper-container>

package/src/components/CategoryLink.astro

@@ -1,18 +1,18 @@
----
-const { categories } = Astro.props;
----
-
-<div class="text-light-blue-400 uppercase text-base z-3 relative w-full">
-  {
-    categories
-      ? categories.map((category) => (
-          <a
-            class="term-link text-sm sm:text-base not-first:(before:content-empty) before:(w-px h-2.5 bg-gray-300 mx-2.5 inline-block relative)"
-            href={category.uri}
-          >
-            {category.name}
-          </a>
-        ))
-      : null
-  }
-</div>
+---
+const { categories } = Astro.props;
+---
+
+<div class="text-light-blue-400 uppercase text-base z-3 relative w-full">
+  {
+    categories
+      ? categories.map((category) => (
+          <a
+            class="term-link text-sm sm:text-base not-first:(before:content-empty) before:(w-px h-2.5 bg-gray-300 mx-2.5 inline-block relative)"
+            href={category.uri}
+          >
+            {category.name}
+          </a>
+        ))
+      : null
+  }
+</div>

package/src/components/Copyright.astro

@@ -1,12 +1,12 @@
----
-const { class: className } = Astro.props;
----
-
-<div
-  class="bg-vw h-11 flex items-center font-headlight justify-between px-4"
-  class:list={[className]}
->
-  <slot name="left-item" />
-  <slot name="middle-item" />
-  <slot name="right-item" />
-</div>
+---
+const { class: className } = Astro.props;
+---
+
+<div
+  class="bg-vw h-11 flex items-center font-headlight justify-between px-4"
+  class:list={[className]}
+>
+  <slot name="left-item" />
+  <slot name="middle-item" />
+  <slot name="right-item" />
+</div>

package/src/components/Date.astro

@@ -1,7 +1,7 @@
----
-const { date } = Astro.props;
----
-
-<time class="text-sm flex items-center mr-2" datetime={date}>
-  {new Date(date).toLocaleDateString()}
-</time>
+---
+const { date } = Astro.props;
+---
+
+<time class="text-sm flex items-center mr-2" datetime={date}>
+  {new Date(date).toLocaleDateString()}
+</time>