spoko-design-system 0.5.3 → 0.5.5

package/src/components/Breadcrumbs.vue

@@ -1,107 +1,107 @@
-<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-3 sm:px-0 py-4.25 sm:py-1 hover:text-accent-light 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-3 sm:px-0 py-4.25 sm:py-1 hover:text-brand-secondary 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-4.25 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-4.25 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 scoped>.breadcrumbs {
-  list-style: none;
-  font-size: 0.875rem;
-}
-
-.breadcrumb-item + .breadcrumb-item::before {
-  @apply py-4.25 sm:py-1 px-1;
-  display: inline-block;
-  padding-right: .5rem;
-  color: #bdbdbd;
-  content: "/";
-}
-
-.breadcrumb-item b {
-  @apply hidden sm:inline font-normal;
-}
-
-.breadcrumb-link {
-  border: 0;
-  cursor: pointer;
-}
-
-.breadcrumb-link--disabled {
-  cursor: default;
-}
-
-.breadcrumb-link--disabled: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-3 sm:px-0 py-4.25 sm:py-1 hover:text-accent-light 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-3 sm:px-0 py-4.25 sm:py-1 hover:text-brand-secondary 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-4.25 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-4.25 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 scoped>.breadcrumbs {
+  list-style: none;
+  font-size: 0.875rem;
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  @apply py-4.25 sm:py-1 px-1;
+  display: inline-block;
+  padding-right: .5rem;
+  color: #bdbdbd;
+  content: "/";
+}
+
+.breadcrumb-item b {
+  @apply hidden sm:inline font-normal;
+}
+
+.breadcrumb-link {
+  border: 0;
+  cursor: pointer;
+}
+
+.breadcrumb-link--disabled {
+  cursor: default;
+}
+
+.breadcrumb-link--disabled:hover {
+  color: inherit;
+}
+
+</style>

package/src/components/Button.vue

@@ -1,88 +1,102 @@
-<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;
-  whiteHover?: boolean;
-  lightHover?: boolean;
-  mediumHover?: boolean;
-  darkHover?: boolean;
-  circle?: boolean;
-}>();
-
-// 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 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
-};
-</script>
-
-<template>
-  <component :is="tag" :class="classes" :href="props.href" :title="props.title ? props.title : null">
-    <slot></slot>
-  </component>
-</template>
-
-<style>
-.btn-primary,
-.btn-secondary {
-  svg {
-    color: #fff;
-  }
-}
-
-.btn-tertiary {
-  svg {
-    color: var(--primary);
-  }
-}
-
-/* Circle button styles */
-.btn-circle.btn-normal {
-  @apply w-12;
-}
-
-.btn-circle.btn-sm {
-  @apply w-9.5;
-}
-
-.btn-circle.btn-xs {
-  @apply w-7;
-}
-
-.btn-circle svg {
-  margin: 0;
-}
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+
+interface ButtonProps {
+  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;
+  whiteHover?: boolean;
+  lightHover?: boolean;
+  mediumHover?: boolean;
+  darkHover?: boolean;
+  circle?: boolean;
+  [key: string]: any; // To allow additional props
+}
+
+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 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
+};
+
+
+const attrs = useAttrs();
+</script>
+
+<template>
+ <component 
+    :is="tag" 
+    :class="classes" 
+    v-bind="attrs"
+    :href="props.href" 
+    :title="props.title ? props.title : null"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<style>
+.btn-primary,
+.btn-secondary {
+  svg {
+    color: #fff;
+  }
+}
+
+.btn-tertiary {
+  svg {
+    color: var(--primary);
+  }
+}
+
+/* Circle button styles */
+.btn-circle.btn-normal {
+  @apply w-12;
+}
+
+.btn-circle.btn-sm {
+  @apply w-9.5;
+}
+
+.btn-circle.btn-xs {
+  @apply w-7;
+}
+
+.btn-circle svg {
+  margin: 0;
+}
 </style>