keystone-design-bootstrap 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",

package/src/design_system/sections/about-home.aman.tsx

@@ -5,7 +5,6 @@ import type { CompanyInformation } from '../../types/api/company-information';
 import type { WebsitePhotos } from '../../types/api/website-photos';
 
 interface AboutHomeProps {
-    config?: any;
     companyInformation?: CompanyInformation | null;
     websitePhotos?: WebsitePhotos | null;
     title?: string;
@@ -14,25 +13,13 @@ interface AboutHomeProps {
 }
 
 export const AboutHome = ({
-    config,
     companyInformation,
     websitePhotos,
-    title,
-    subtitle,
-    ctaText,
+    title = "",
+    subtitle = "",
+    ctaText = "",
 }: AboutHomeProps) => {
-    // Get section config
-    const homePageConfig = config?.pages?.find((p: any) => 
-        p.library_reference_name === 'Home' || p.slug === 'home'
-    );
-    const aboutSection = homePageConfig?.sections?.home_page_section_3_about;
-    
-    // Use config values, then props, then defaults
-    const displayTitle = title || aboutSection?.title || '*TR* About Us';
-    const displaySubtitle = subtitle || aboutSection?.subtitle || '*TR* Learn more about our company';
-    const displayCtaText = ctaText || aboutSection?.cta_text || 'Learn more';
-    
-    const description = (companyInformation as any)?.about_text_markdown || aboutSection?.description || '';
+    const description = (companyInformation as any)?.about_text_markdown || '';
     
     // Use brand photo for about section, fallback to about photo
     const aboutImage = (websitePhotos as any)?.brand || websitePhotos?.about;
@@ -51,12 +38,12 @@ export const AboutHome = ({
 
                 <div className="order-1 lg:order-2 flex flex-col justify-center">
                     <h2 className="font-display text-4xl font-normal leading-tight text-fg-primary md:text-5xl">
-                        {displayTitle}
+                        {title}
                     </h2>
                     
-                    {displaySubtitle && (
+                    {subtitle && (
                         <p className="mt-4 font-body text-md text-tertiary uppercase tracking-wide">
-                            {displaySubtitle}
+                            {subtitle}
                         </p>
                     )}
                     
@@ -66,13 +53,13 @@ export const AboutHome = ({
                         </p>
                     )}
 
-                    {displayCtaText && (
+                    {ctaText && (
                         <a
                             href="/about"
                             className="mt-8 inline-block font-body text-base underline underline-offset-4 hover:no-underline w-fit transition-colors"
                             style={{ color: 'var(--color-text-brand-accent)' }}
                         >
-                            {displayCtaText}
+                            {ctaText}
                         </a>
                     )}
                 </div>

package/src/design_system/sections/about-home.tsx

@@ -14,28 +14,22 @@ interface Value {
 }
 
 interface AboutHomeProps {
-    config: {
-        pages?: any[];
-    };
     companyInformation?: CompanyInformation | null;
+    title?: string;
+    subtitle?: string;
+    values?: Value[];
+    ctaText?: string;
 }
 
 
 export const AboutHome = ({
-    config,
     companyInformation,
+    title = "",
+    subtitle = "",
+    values = [],
+    ctaText = "",
 }: AboutHomeProps) => {
-    // Extract values from config
-    const title = '';
-    const subtitle = undefined;
     const description = (companyInformation as any)?.about_text_markdown || '';
-    const values = (undefined || []).map((v: any, index: number) => ({
-        id: index.toString(),
-        title: v.title,
-        description: v.description,
-        icon: v.icon,
-    }));
-    const ctaText = undefined;
     
     const firstValue = values && values.length > 0 ? values[0] : null;
     const FirstValueIcon = firstValue?.icon ? mapIcon(firstValue.icon) : null;

package/src/design_system/sections/blog-gallery.aman.tsx

@@ -4,19 +4,11 @@ import { PhotoWithFallback } from '../elements';
 import type { BlogPost } from '../../types/api/blog-post';
 
 interface BlogGalleryProps {
-  config: {
-    pages?: any[];
-  };
   blogPosts?: BlogPost[] | null;
-  pageName?: string;
-  sectionKey?: string;
 }
 
 export const BlogGallery = ({
-  config,
   blogPosts: postsData,
-  pageName = 'Blog',
-  sectionKey = 'blog_page_section_2_gallery',
 }: BlogGalleryProps) => {
   const posts = Array.isArray(postsData) ? postsData : [];
 

package/src/design_system/sections/blog-gallery.tsx

@@ -10,10 +10,13 @@ import { getAvatarUrl } from '../../utils/photo-helpers';
 import type { BlogPost } from '../../types/api/blog-post';
 
 interface BlogGalleryProps {
-    config: {
-        pages?: any[];
-    };
     blogPosts?: BlogPost[] | null;
+    label?: string;
+    title?: string;
+    subtitle?: string;
+    postsPerPage?: number;
+    backgroundColor?: string;
+    className?: string;
 }
 
 const defaultSortByOptions = [
@@ -23,20 +26,15 @@ const defaultSortByOptions = [
 ];
 
 export const BlogGallery = ({
-    config,
     blogPosts: postsData,
+    label = "",
+    title = "",
+    subtitle = "",
+    postsPerPage = 12,
+    backgroundColor = "bg-primary",
+    className = "",
 }: BlogGalleryProps) => {
-    const blogPage = config.pages?.find((p: any) => p.library_reference_name === 'Blog');
-    const blogPageSection = blogPage?.sections?.blog_page_section_2_blog;
-    const heroSection = blogPage?.sections?.blog_page_section_1_hero;
-
-    const label = undefined;
-    const title = 'Latest Articles';
-    const subtitle = 'Browse our collection of articles below.';
-    const postsPerPage = 12;
     const sortByOptions = defaultSortByOptions;
-    const backgroundColor = "bg-primary";
-    const className = "";
 
     const posts = Array.isArray(postsData) ? postsData : [];
     const isDesktop = useBreakpoint("lg");

package/src/design_system/sections/blog-home.aman.tsx

@@ -4,22 +4,15 @@ import { PhotoWithFallback } from '../elements';
 import type { BlogPost } from '../../types/api/blog-post';
 
 interface BlogHomeProps {
-  config: {
-    pages?: any[];
-  };
   blogPosts?: BlogPost[] | null;
-  pageName?: string;
-  sectionKey?: string;
+  title?: string;
 }
 
 export const BlogHome = ({
-  config,
   blogPosts: postsData,
-  pageName = 'Blog',
-  sectionKey = 'blog_page_section_1_posts',
+  title = "",
 }: BlogHomeProps) => {
   const posts = Array.isArray(postsData) ? postsData : [];
-  const title = 'Latest Posts';
 
   return (
     <section>

package/src/design_system/sections/blog-home.tsx

@@ -7,22 +7,24 @@ import { cx } from '../../utils/cx';
 import type { BlogPost } from '../../types/api/blog-post';
 
 interface BlogHomeProps {
-    config: {
-        pages?: any[];
-    };
     blogPosts?: BlogPost[] | null;
+    label?: string;
+    title?: string;
+    subtitle?: string;
+    maxPosts?: number;
+    viewAllHref?: string;
+    viewAllText?: string;
 }
 
 export const BlogHome = ({
-    config,
     blogPosts: postsData,
+    label = "",
+    title = "",
+    subtitle = "",
+    maxPosts = 6,
+    viewAllHref = "/blog",
+    viewAllText = "View all posts",
 }: BlogHomeProps) => {
-    const label = "Latest posts";
-    const title = "Latest posts";
-    const subtitle = "";
-    const maxPosts = 6;
-    const viewAllHref = "/blog";
-    const viewAllText = "View all posts";
     
     const posts = Array.isArray(postsData) ? postsData.slice(0, maxPosts) : [];
     

package/src/design_system/sections/blog-post.aman.tsx

@@ -5,14 +5,10 @@ import MarkdownRenderer from '../elements/markdown-renderer/MarkdownRenderer';
 import type { BlogPost } from '../../types/api/blog-post';
 
 interface BlogPostSectionProps {
-  config: {
-    pages?: any[];
-  };
   blogPost?: BlogPost | null;
 }
 
 export const BlogPostSection = ({
-  config,
   blogPost,
 }: BlogPostSectionProps) => {
   if (!blogPost) {

package/src/design_system/sections/blog-post.tsx

@@ -7,18 +7,11 @@ import { extractTableOfContents } from '../../utils/markdown-toc';
 import type { BlogPost } from '../../types/api/blog-post';
 
 interface BlogPostSectionProps {
-    // Config data - component extracts all values from it
-    config: {
-        pages?: any[];
-    };
-    // Blog post data from SSR
     blogPost?: BlogPost | null;
-    // Related posts
     relatedPosts?: BlogPost[] | null;
 }
 
 export const BlogPostSection = ({
-    config,
     blogPost,
     relatedPosts: relatedPostsData,
 }: BlogPostSectionProps) => {

package/src/design_system/sections/blog-section.aman.tsx

@@ -5,23 +5,16 @@ import { PhotoWithFallback } from '../elements';
 import type { BlogPost } from '../../types/api/blog-post';
 
 interface BlogSectionProps {
-    config: {
-        pages?: any[];
-    };
     blogPosts?: BlogPost[] | null;
-    pageName?: string;
-    sectionKey?: string;
+    title?: string;
+    maxPosts?: number;
 }
 
 export const BlogSection = ({
-    config,
     blogPosts: postsData,
-    pageName = 'Home',
-    sectionKey = 'home_page_section_5_blog',
+    title = "",
+    maxPosts = 3,
 }: BlogSectionProps) => {
-    const blogSection = pageName === 'Home' 
-    const title = "Latest posts";
-    const maxPosts = 3;
     
     const postsArray = Array.isArray(postsData) ? postsData.slice(0, maxPosts) : [];
 

package/src/design_system/sections/blog-section.tsx

@@ -10,41 +10,25 @@ import type { BlogPost } from '../../types/api/blog-post';
 
 
 interface BlogSectionProps {
-    config: {
-        pages?: any[];
-    };
     blogPosts: BlogPost[];
-    pageName?: string;
-    sectionKey?: string;
+    title?: string;
+    subtitle?: string;
+    maxPosts?: number;
+    backgroundColor?: string;
+    showViewAll?: boolean;
 }
 
 export const BlogSection = ({
-    config,
     blogPosts: postsData,
-    pageName = 'Home',
-    sectionKey = 'home_page_section_5_blog',
+    title = "",
+    subtitle = "",
+    maxPosts = 8,
+    backgroundColor = "bg-primary",
+    showViewAll = true,
 }: BlogSectionProps) => {
-    // Extract values from config
-    const blogSection = pageName === 'Home' 
-    const title = "Latest posts";
-    const subtitle = "Interviews, tips, guides, industry best practices, and news.";
-    const maxPosts = 8;
-    const backgroundColor = "bg-primary";
-    const showViewAll = undefined !== false;
     
     let postsArray = Array.isArray(postsData) ? postsData : [];
-    
-    // If this is a BlogPost page and use_related is true, filter to related posts
-    if (pageName === 'BlogPost' && undefined) {
-        const currentPath = typeof window !== 'undefined' ? window.location.pathname : '';
-        const currentSlug = currentPath.split('/').pop();
-        
-        postsArray = postsArray
-            .filter((post: BlogPost) => post.slug !== currentSlug)
-            .slice(0, maxPosts);
-    } else {
-        postsArray = postsArray.slice(0, maxPosts);
-    }
+    postsArray = postsArray.slice(0, maxPosts);
 
     const formatDate = (dateString: string) => {
         if (!dateString) return 'Recent';

package/src/design_system/sections/contact-home.tsx

@@ -4,20 +4,21 @@ import ContactSection from "./contact-section";
 
 
 interface ContactHomeProps {
-    // Config data - component extracts all values from it
-    config: {
-        pages?: any[];
-    };
+    websitePhotos?: any;
+    title?: string;
+    subtitle?: string;
 }
 
 export const ContactHome = ({
-    config,
+    websitePhotos,
+    title = "",
+    subtitle = "",
 }: ContactHomeProps) => {
-    // Extract values from config
-    
     return (
         <ContactSection
-            config={config}
+            websitePhotos={websitePhotos}
+            title={title}
+            subtitle={subtitle}
         />
     );
 };

package/src/design_system/sections/contact-section.aman.tsx

@@ -5,37 +5,20 @@ import { Form, PhotoWithFallback } from '../elements';
 import type { WebsitePhotos } from '../../types/api/website-photos';
 
 interface ContactSectionProps {
-    config?: any;
-    pageName?: string;
-    sectionKey?: string;
     websitePhotos?: WebsitePhotos | null;
     title?: string;
     subtitle?: string;
 }
 
 const ContactSection = ({ 
-    config,
-    pageName,
-    sectionKey,
     websitePhotos,
-    title,
-    subtitle,
+    title = "",
+    subtitle = "",
 }: ContactSectionProps) => {
     const [selectedCountryPhone, setSelectedCountryPhone] = useState("US");
 
-    // Get section config for custom title/subtitle
-    const pageConfig = config?.pages?.find((p: any) => 
-        p.library_reference_name === pageName || 
-        p.library_reference_name === 'Home' || 
-        p.slug === 'home'
-    );
-    const contactSection = sectionKey 
-        ? pageConfig?.sections?.[sectionKey] 
-        : pageConfig?.sections?.home_page_section_7_contact || pageConfig?.sections?.home_page_section_6_contact;
-    
-    // Use config values, then props, then defaults
-    const displayTitle = title || contactSection?.title || '*TR* Get in Touch';
-    const displaySubtitle = subtitle || contactSection?.subtitle || '*TR* We would love to hear from you';
+    const displayTitle = title;
+    const displaySubtitle = subtitle;
 
     const contactPhoto = websitePhotos?.contact;
     const contactImageUrl = contactPhoto?.url;

package/src/design_system/sections/contact-section.tsx

@@ -14,8 +14,8 @@ interface ContactSectionProps {
 
 const ContactSection = ({ 
     websitePhotos,
-    title = "Contact us",
-    subtitle = "Our friendly team would love to hear from you.",
+    title = "",
+    subtitle = "",
 }: ContactSectionProps) => {
     const [selectedCountryPhone, setSelectedCountryPhone] = useState("US");
     

package/src/design_system/sections/faq-grid.aman.tsx

@@ -4,24 +4,17 @@ import { useState } from 'react';
 import type { FaqQuestion } from '../../types/api/faq';
 
 interface FAQGridProps {
-  config: {
-    pages?: any[];
-  };
   faqs: FaqQuestion[];
-  pageName?: string;
-  sectionKey?: string;
+  title?: string;
+  maxItems?: number;
 }
 
 export const FAQGrid = ({
-  config,
   faqs: faqsData,
-  pageName = 'FAQ',
-  sectionKey = 'faq_page_section_2_faqs',
+  title = "",
+  maxItems,
 }: FAQGridProps) => {
   const faqs = Array.isArray(faqsData) ? faqsData : [];
-  
-  const title = 'Frequently Asked Questions';
-  const maxItems = undefined;
   const displayFaqs = maxItems ? faqs.slice(0, maxItems) : faqs;
   
   const [openIndex, setOpenIndex] = useState<number | null>(null);

package/src/design_system/sections/faq-grid.tsx

@@ -5,10 +5,15 @@ import { Button } from '../elements';
 import type { FaqQuestion } from '../../types/api/faq';
 
 interface FAQGridProps {
-    config: {
-        pages?: any[];
-    };
     faqs?: FaqQuestion[] | null;
+    title?: string;
+    subtitle?: string;
+    ctaTitle?: string;
+    ctaSubtitle?: string;
+    ctaButtonText?: string;
+    ctaButtonHref?: string;
+    backgroundColor?: string;
+    className?: string;
 }
 
 // Simple markdown renderer - converts basic markdown to HTML
@@ -23,20 +28,18 @@ const renderMarkdown = (content: string) => {
 };
 
 export const FAQGrid = ({
-    config,
     faqs: faqsData,
+    title = "",
+    subtitle = "",
+    ctaTitle = "",
+    ctaSubtitle = "",
+    ctaButtonText = "",
+    ctaButtonHref = "/contact",
+    backgroundColor = "bg-primary",
+    className = "",
 }: FAQGridProps) => {
     const faqs = Array.isArray(faqsData) ? faqsData : [];
     
-    const title = "Frequently asked questions";
-    const subtitle = "";
-    const ctaTitle = "Still have questions?";
-    const ctaSubtitle = "Can't find the answer you're looking for? Please chat to our friendly team.";
-    const ctaButtonText = "Get in touch";
-    const ctaButtonHref = "/contact";
-    const backgroundColor = "bg-primary";
-    const className = "";
-    
     return (
         <section className={`${backgroundColor} py-16 md:py-24 ${className}`} id="faq">
             <div className="mx-auto w-full max-w-container px-4 md:px-8">

package/src/design_system/sections/faq-home.aman.tsx

@@ -5,25 +5,17 @@ import { motion } from 'framer-motion';
 import type { FaqQuestion } from '../../types/api/faq';
 
 interface FAQHomeProps {
-  config: {
-    pages?: any[];
-  };
   faqs: FaqQuestion[];
-  pageName?: string;
-  sectionKey?: string;
+  title?: string;
+  maxItems?: number;
 }
 
 export const FAQHome = ({
-  config,
   faqs: faqsData,
-  pageName = 'Home',
-  sectionKey = 'home_page_section_4_faq',
+  title = "",
+  maxItems,
 }: FAQHomeProps) => {
   const faqs = Array.isArray(faqsData) ? faqsData : [];
-  
-  const faqSection = pageName === 'Home' 
-  const title = 'Frequently Asked Questions';
-  const maxItems = undefined;
   const displayFaqs = maxItems ? faqs.slice(0, maxItems) : faqs;
   
   const [openIndex, setOpenIndex] = useState<number | null>(null);

package/src/design_system/sections/faq-home.tsx

@@ -7,27 +7,19 @@ import type { FaqQuestion } from '../../types/api/faq';
 
 
 interface FAQHomeProps {
-    config: {
-        pages?: any[];
-    };
     faqs: FaqQuestion[];
-    pageName?: string;
-    sectionKey?: string;
+    title?: string;
+    subtitle?: string;
+    maxItems?: number;
 }
 
 export const FAQHome = ({
-    config,
     faqs: faqsData,
-    pageName = 'Home',
-    sectionKey = 'home_page_section_4_faq',
+    title = "",
+    subtitle = "",
+    maxItems,
 }: FAQHomeProps) => {
     const items = Array.isArray(faqsData) ? faqsData : [];
-    
-    // Extract values from config
-    const faqSection = pageName === 'Home' 
-    const title = "Frequently asked questions";
-    const subtitle = "";
-    const maxItems = undefined;
     const [openQuestions, setOpenQuestions] = useState<Set<number>>(new Set([0]));
 
     const handleToggle = (index: number) => {

package/src/design_system/sections/hero-faq.aman.tsx

@@ -2,20 +2,14 @@
 
 
 interface FAQHeroProps {
-  config: {
-    pages?: any[];
-  };
-  pageName?: string;
-  sectionKey?: string;
+  title?: string;
+  subtitle?: string;
 }
 
 export const FAQHero = ({
-  config,
-  pageName = 'FAQ',
-  sectionKey = 'faq_page_section_1_hero',
+  title = "",
+  subtitle = "",
 }: FAQHeroProps) => {
-  const title = 'Frequently Asked Questions';
-  const subtitle = '';
 
   return (
     <section className="py-24 md:py-32">

package/src/design_system/sections/hero-faq.tsx

@@ -4,24 +4,23 @@ import { SearchLg } from '@untitledui/icons';
 import { Input } from '../elements';
 
 interface FAQHeroProps {
-    // Config data - component extracts all values from it
-    config: {
-        pages?: any[];
-    };
+    title?: string;
+    subtitle?: string;
+    label?: string;
     // Optional search props
     searchTerm?: string;
     onSearchChange?: (value: string) => void;
 }
 
 export const FAQHero = ({
-    config,
+    title = "",
+    subtitle = "",
+    label = "",
     searchTerm,
     onSearchChange,
 }: FAQHeroProps) => {
-    // Extract values from config
-    const label = "Support";
-    const headline = "Frequently Asked Questions";
-    const subhead = "";
+    const headline = title;
+    const subhead = subtitle;
     return (
         <section className="bg-primary py-16 md:py-24">
             <div className="mx-auto max-w-container px-4 md:px-8">