spoko-design-system 0.6.6 → 0.6.7

package/package.json

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

package/src/components/Jumbotron/index.astro

@@ -16,6 +16,7 @@ interface Props {
   author?: Author;
   categories?: Category[];
   backgroundClass?: string;
+  lang?: string;
 }
 
 const {
@@ -28,7 +29,8 @@ const {
   date,
   author,
   categories = [],
-  backgroundClass = 'bg-blue-darker'
+  backgroundClass = 'bg-blue-darker',
+  lang = 'en'
 } = Astro.props;
 
 // Helper (function to check if a slot has content)
@@ -56,6 +58,7 @@ const commonProps = {
   hasMetadata,
   hasCategories,
   backgroundClass,
+  lang,
 };
 ---
 

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

@@ -12,6 +12,7 @@ interface Props {
   categories?: Category[];
   hasMetadata: boolean;
   hasCategories: boolean;
+  lang?: string;
 }
 
 const {
@@ -22,6 +23,7 @@ const {
   categories = [],
   hasMetadata,
   hasCategories,
+  lang = 'en'
 } = Astro.props;
 ---
 
@@ -34,7 +36,7 @@ const {
       
       {hasCategories && (
         <div class="order-1">
-          <PostCategories categories={categories} />
+          <PostCategories categories={categories} lang={lang} />
         </div>
       )}
 

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

@@ -12,6 +12,7 @@ interface Props {
   categories?: Category[];
   hasMetadata: boolean;
   hasCategories: boolean;
+  lang: string;
 }
 
 const {
@@ -22,6 +23,7 @@ const {
   categories = [],
   hasMetadata,
   hasCategories,
+  lang='en'
 } = Astro.props;
 
 // Helper function to remove HTML tags
@@ -42,7 +44,7 @@ const cleanTitle = stripHtml(title);
           
           {hasCategories && (
             <div class="jumbotron-categories">
-              <PostCategories categories={categories} />
+              <PostCategories categories={categories} lang={lang} />
             </div>
           )}
 

package/src/components/Post/PostCategories.astro

@@ -11,9 +11,13 @@ interface Category {
 
 interface Props {
   categories: Category[];
+  lang?: string;
 }
 
-const { categories } = Astro.props;
+const { categories, lang = 'en' } = Astro.props;
+
+// Determine the category label based on language
+const categoryLabel = lang === 'pl' ? 'Kategoria' : 'Category';
 ---
 
 <div class="text-brand-secondary uppercase text-base z-3 relative w-full">
@@ -25,8 +29,8 @@ const { categories } = Astro.props;
               <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
-"
+              class="term-link text-sm sm:text-base hover:text-light-blue-400"
+              data-pagefind-filter={`${categoryLabel}:${category.name}`}
               href={category.link}
             >
               {category.name}

package/src/components/PostHeader.astro

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

package/src/pages/components/post-header.mdx

@@ -18,6 +18,7 @@ WordPress PostHeader - post top component for WordPress Single Post template dat
   <div class="relative w-full">
     <PostHeader
       author={author}
+      lang="en"
       categories={categories}
       title="Lorem Ipsum"
       date={date}
@@ -30,6 +31,7 @@ WordPress PostHeader - post top component for WordPress Single Post template dat
   <div class="relative">
     <PostHeader
       author={ { firstName: 'Szymon', name: 'CNK' }  }
+      lang="en"
       categories={  [{"name":"Tools & garage accessories","uri":"/category/garage/tools-garage-accessories/"}, , {"name":"Lorem Ipsum","uri":"#"}] }
             title="Lorem Ipsum"
       date="2023-07-13T01:35:03"
@@ -45,6 +47,7 @@ WordPress PostHeader - post top component for WordPress Single Post template dat
   <div class="relative w-full">
     <PostHeader
       title="Lorem Ipsum"
+      lang="en"
       image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
     />
   </div>
@@ -54,6 +57,7 @@ WordPress PostHeader - post top component for WordPress Single Post template dat
   <div class="relative">
     <PostHeader
       title="Lorem Ipsum"
+      lang="en"
       image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
     />
   </div>