spoko-design-system 0.5.3 → 0.5.4

package/index.ts

@@ -31,7 +31,7 @@ export { default as ProductLink } from './src/components/Product/ProductLink.vue
 export { default as LanguageSuggestion } from './src/components/LanguageSuggestion.astro';
 export { default as Input } from './src/components/Input.astro';
 
-export { default as CategoryLink } from './src/components/Category/CategoryLink.vue';
+export { default as PostCategories } from './src/components/Post/PostCategories.vue';
 export { default as CategorySidebarToggler } from './src/components/Category/CategorySidebarToggler.vue';
 export { default as SubCategoryLink } from './src/components/Category/SubCategoryLink.vue';
 

package/package.json

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

package/src/components/Button.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const props = defineProps<{
+import { useAttrs } from 'vue'
+
+interface ButtonProps {
   href?: string;
   title?: string;
   primary?: boolean;
@@ -18,7 +20,10 @@ const props = defineProps<{
   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 && 
@@ -47,10 +52,19 @@ const classes = {
   "btn-medium-hover": props.mediumHover || shouldAddDefaultMediumHover,
   "btn-dark-hover": props.darkHover
 };
+
+
+const attrs = useAttrs();
 </script>
 
 <template>
-  <component :is="tag" :class="classes" :href="props.href" :title="props.title ? props.title : null">
+ <component 
+    :is="tag" 
+    :class="classes" 
+    v-bind="attrs"
+    :href="props.href" 
+    :title="props.title ? props.title : null"
+  >
     <slot></slot>
   </component>
 </template>

package/src/components/Jumbotron/variants/Post.astro

@@ -1,7 +1,7 @@
 ---
 // variants/Post.astro
 import type { Author, Category } from '../types';
-import CategoryLink from "../../CategoryLink.astro";
+import PostCategories from "../../Post/PostCategories.astro";
 import Date from "../../Date.astro";
 
 interface Props {
@@ -34,7 +34,7 @@ const {
       
       {hasCategories && (
         <div class="order-1">
-          <CategoryLink categories={categories} />
+          <PostCategories categories={categories} />
         </div>
       )}
 

package/src/components/Jumbotron/variants/PostSplit.astro

@@ -1,6 +1,6 @@
 ---
 import type { Author, Category } from '../types';
-import CategoryLink from "../../CategoryLink.astro";
+import PostCategories from "../../Post/PostCategories.astro";
 import Date from "../../Date.astro";
 import { Image } from "astro:assets";
 
@@ -42,7 +42,7 @@ const cleanTitle = stripHtml(title);
           
           {hasCategories && (
             <div class="jumbotron-categories">
-              <CategoryLink categories={categories} />
+              <PostCategories categories={categories} />
             </div>
           )}
 

package/src/components/Post/PostCategories.astro

@@ -0,0 +1,38 @@
+---
+interface Category {
+  id: number;
+  name: string;
+  slug: string;
+  description: string;
+  count: number;
+  parent: number;
+  link: string;
+}
+
+interface Props {
+  categories: Category[];
+}
+
+const { categories } = Astro.props;
+---
+
+<div class="text-brand-secondary uppercase text-base z-3 relative w-full">
+  {
+    categories && categories.length > 0
+      ? categories.map((category, index) => (
+          <>
+            {index > 0 && (
+              <span class="w-px h-2.5 bg-gray-300 mx-2.5 inline-block relative" />
+            )}
+            <a
+              class="term-link text-sm sm:text-base hover:text-light-blue-400
+"
+              href={category.link}
+            >
+              {category.name}
+            </a>
+          </>
+        ))
+      : null
+  }
+</div>

package/src/components/Post/PostCategories.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface Category {
+  id: number;
+  name: string;
+  slug: string;
+  description: string;
+  link: string;
+}
+
+interface Props {
+  category: Category;
+  active?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  active: false
+});
+</script>
+
+<template>
+  <a
+    :href="props.category.link"
+    class="category-link"
+    :class="{ 'active': props.active }"
+    :title="props.category.description || props.category.name"
+  >
+    {{ props.category.name }}
+  </a>
+</template>
+
+<style>
+.category-link {
+  @apply text-sm sm:text-base text-accent-lightest uppercase hover:text-blue-500 transition-colors;
+}
+
+.category-link.active {
+  @apply text-blue-500;
+}
+</style>

package/src/components/PostHeader.astro

@@ -17,7 +17,7 @@ interface Props {
 }
 
 const { image, title, categories, date, author } = Astro.props;
-import CategoryLink from "./CategoryLink.astro";
+import PostCategories from "./Post/PostCategories.astro";
 import Date from "./Date.astro";
 ---
 
@@ -33,7 +33,7 @@ import Date from "./Date.astro";
       >
         {title}
       </h1>
-      <CategoryLink categories={categories} />
+      <PostCategories categories={categories} />
       <div class="order-3 flex items-center text-gray-1 00">
         {
           author && (

package/src/pages/components/jumbotron.mdx

@@ -234,8 +234,8 @@ Designed for blog posts and articles, featuring a full-width image overlay with
       title="Blog Post Title"
       image="https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=1920&ext=jpg"
       categories={[
-        { name: 'Technology', uri: '#' },
-        { name: 'Design', uri: '#' }
+        { name: 'Technology', link: '#' },
+        { name: 'Design', link: '#' }
       ]}
       author={{
         firstName: "John",
@@ -251,8 +251,8 @@ Designed for blog posts and articles, featuring a full-width image overlay with
   title="Blog Post Title"
   image="https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=1920&ext=jpg"
   categories={[
-    { name: 'Technology', uri: '#' },
-    { name: 'Design', uri: '#' }
+    { name: 'Technology', link: '#' },
+    { name: 'Design', link: '#' }
   ]}
   author={{
     firstName: "John",
@@ -271,8 +271,8 @@ A two-column layout variant for posts where image and content need equal emphasi
       title="<b>Formatted</b> Blog Post Title <small>Lorem Ipsum</small>"
       image="http://localhost:1234/_image?href=https%3A%2F%2Fimg.freepik.com%2Ffree-photo%2Fnature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg%3Fsize%3D960%26ext%3Djpg&w=1200&h=675&f=webp"
       categories={[
-        { name: 'Technology', uri: '#' },
-        { name: 'Design', uri: '#' }
+        { name: 'Technology', link: '#' },
+        { name: 'Design', link: '#' }
       ]}
       author={{
         firstName: "John",
@@ -288,8 +288,8 @@ A two-column layout variant for posts where image and content need equal emphasi
   title="<b>Formatted</b> Blog Post Title <small>Lorem Ipsum</small>"
   image="path/to/image.jpg"
   categories={[
-    { name: 'Technology', uri: '#' },
-    { name: 'Design', uri: '#' }
+    { name: 'Technology', link: '#' },
+    { name: 'Design', link: '#' }
   ]}
   author={{
     firstName: "John",

package/src/pages/index.astro

@@ -91,10 +91,10 @@ const navItems = [
       <div>
         <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Download:</Headline>
         <div class="grid grid-flow-col gap-4 auto-cols-max text-6xl mb-12">
-          <a href="https://www.npmjs.com/package/spoko-design-system" rel="noopener" title="npm page" class="hover:text-light-blue-400">
+          <a href="https://www.npmjs.com/package/spoko-design-system" rel="noopener" title="npm page" class="hover:text-accent-lightest">
             <Icon name="mdi:npm"/>
           </a>
-          <a href="https://github.com/polo-blue/sds" rel="noopener" title="Github Page" class="hover:text-light-blue-400">
+          <a href="https://github.com/polo-blue/sds" rel="noopener" title="Github Page" class="hover:text-accent-lightest">
             <Icon name="mdi:github"/>
           </a>
         </div>

package/src/components/Category/CategoryLink.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  text: {
-    type: String,
-    default: null,
-    required: true,
-  },
-  active: {
-    type: Boolean,
-    default: false,
-    required: true,
-  },
-})
-</script>
-
-<template>
-  <a
-    class="category-link"
-    :class="!props.active ? '' : 'active'"
-  >
-    {{ props.text }}
-  </a>
-</template>

package/src/components/CategoryLink.astro

@@ -1,18 +0,0 @@
----
-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>