keystone-design-bootstrap 1.0.3

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

@@ -0,0 +1,259 @@
+import Link from "next/link";
+import { getLogoUrl } from '../../utils/photo-helpers';
+import type { CompanyInformation } from '../../types/api/company-information';
+import type { WebsitePhotos } from '../../types/api/website-photos';
+import type { NavItem, SiteConfig } from '../../types/config';
+
+interface FooterHomeProps {
+    config: SiteConfig;
+    companyInformation?: CompanyInformation | null;
+    websitePhotos?: WebsitePhotos | null;
+}
+
+const FacebookIcon = () => (
+    <svg className="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+    </svg>
+);
+
+const InstagramIcon = () => (
+    <svg className="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
+    </svg>
+);
+
+const YouTubeIcon = () => (
+    <svg className="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+    </svg>
+);
+
+const GoogleIcon = () => (
+    <svg className="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+    </svg>
+);
+
+const getSocialIcon = (platform: string) => {
+    switch (platform.toLowerCase()) {
+        case 'facebook':
+            return <FacebookIcon />;
+        case 'instagram':
+            return <InstagramIcon />;
+        case 'youtube':
+            return <YouTubeIcon />;
+        case 'google':
+        case 'google_my_business':
+            return <GoogleIcon />;
+        default:
+            return null;
+    }
+};
+
+const COLUMN_TITLES = ['Home', 'Services', 'Locations', 'About Us'];
+
+export const FooterHome = ({
+    config,
+    companyInformation,
+    websitePhotos,
+}: FooterHomeProps) => {
+    const currentYear = new Date().getFullYear();
+    
+    const apiCompanyInfo = companyInformation as any;
+    
+    // Get footer navigation from config
+    const footerColumns = config?.navigation?.footer || [];
+    
+    // Build logo from props data
+    const logoImage = getLogoUrl(websitePhotos);
+    const companyName = apiCompanyInfo?.company_name || '';
+    const logoText = companyName?.charAt(0)?.toUpperCase() || '';
+    const logo = (logoText || logoImage) ? {
+        text: logoText,
+        href: '/',
+        image: logoImage,
+    } : undefined;
+    
+    // Build about text
+    const aboutText = apiCompanyInfo?.about_text_markdown || apiCompanyInfo?.description;
+    
+    // Build contact info
+    const address = [
+        apiCompanyInfo?.primary_address_line_1,
+        apiCompanyInfo?.primary_address_line_2,
+        apiCompanyInfo?.primary_city,
+        apiCompanyInfo?.primary_state,
+        apiCompanyInfo?.primary_zip_code
+    ].filter(Boolean).join(', ') || undefined;
+    
+    const contactInfo = (address || apiCompanyInfo?.primary_phone || apiCompanyInfo?.primary_email) ? {
+        address,
+        phone: apiCompanyInfo?.primary_phone,
+        email: apiCompanyInfo?.primary_email,
+    } : undefined;
+    
+    // Build social links
+    const socialLinksArray = [];
+    if (apiCompanyInfo?.facebook_url) socialLinksArray.push({ platform: 'facebook', url: apiCompanyInfo.facebook_url });
+    if (apiCompanyInfo?.twitter_url) socialLinksArray.push({ platform: 'twitter', url: apiCompanyInfo.twitter_url });
+    if (apiCompanyInfo?.linkedin_url) socialLinksArray.push({ platform: 'linkedin', url: apiCompanyInfo.linkedin_url });
+    if (apiCompanyInfo?.instagram_url) socialLinksArray.push({ platform: 'instagram', url: apiCompanyInfo.instagram_url });
+    if (apiCompanyInfo?.youtube_url) socialLinksArray.push({ platform: 'youtube', url: apiCompanyInfo.youtube_url });
+    if (apiCompanyInfo?.pinterest_url) socialLinksArray.push({ platform: 'pinterest', url: apiCompanyInfo.pinterest_url });
+    if (apiCompanyInfo?.tiktok_url) socialLinksArray.push({ platform: 'tiktok', url: apiCompanyInfo.tiktok_url });
+    if (apiCompanyInfo?.google_my_business_url) socialLinksArray.push({ platform: 'google_my_business', url: apiCompanyInfo.google_my_business_url });
+    if (apiCompanyInfo?.yelp_url) socialLinksArray.push({ platform: 'yelp', url: apiCompanyInfo.yelp_url });
+    if (apiCompanyInfo?.tripadvisor_url) socialLinksArray.push({ platform: 'tripadvisor', url: apiCompanyInfo.tripadvisor_url });
+    const socialLinks = socialLinksArray.length > 0 ? socialLinksArray : undefined;
+    
+    // Build legal links
+    const legalLinks = [
+        { label: 'Privacy Policy', href: '/privacy-policy/' },
+        { label: 'Terms of Service', href: '/terms-of-service/' },
+        { label: 'Cookie Policy', href: '/cookie-policy/' },
+        { label: 'Accessibility', href: '/accessibility/' },
+        { label: 'Sitemap', href: '/sitemap.xml' },
+    ];
+    
+    // Build copyright text
+    const copyrightText = `© ${currentYear} ${apiCompanyInfo?.company_name || 'Company Name'}. All rights reserved.`;
+
+    return (
+        <footer className="bg-gray-900 text-white py-12">
+            <div className="container mx-auto px-4 md:px-8">
+                <div className="grid lg:grid-cols-6 gap-8">
+                    {/* Company Info */}
+                    <div className="lg:col-span-2">
+                        <div className="flex items-center space-x-2 mb-6">
+                            <Link href={logo?.href || '/'} className="flex items-center space-x-2">
+                                {logo?.image ? (
+                                    <img 
+                                        src={logo.image} 
+                                        alt={companyName || 'Logo'}
+                                        className="h-10 w-10 object-contain"
+                                    />
+                                ) : (
+                                    <div className="h-10 w-10 bg-blue-600 rounded-lg flex items-center justify-center">
+                                        <span className="text-white font-bold text-lg">
+                                            {logoText}
+                                        </span>
+                                    </div>
+                                )}
+                                <span className="text-2xl font-bold text-white">{companyName}</span>
+                            </Link>
+                        </div>
+                        
+                        {aboutText && (
+                            <p className="text-gray-300 mb-6 max-w-md">
+                                {aboutText}
+                            </p>
+                        )}
+                        
+                        {/* Contact Info */}
+                        {contactInfo && (
+                            <div className="space-y-3 mb-6">
+                                {contactInfo.address && (
+                                    <div className="flex items-center space-x-3">
+                                        <svg className="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
+                                        </svg>
+                                        <span className="text-gray-300">{contactInfo.address}</span>
+                                    </div>
+                                )}
+                                
+                                {contactInfo.phone && (
+                                    <div className="flex items-center space-x-3">
+                                        <svg className="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
+                                            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
+                                        </svg>
+                                        <a href={`tel:${contactInfo.phone}`} className="text-gray-300 hover:text-white transition-colors">
+                                            {contactInfo.phone}
+                                        </a>
+                                    </div>
+                                )}
+                                
+                                {contactInfo.email && (
+                                    <div className="flex items-center space-x-3">
+                                        <svg className="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
+                                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+                                        </svg>
+                                        <a href={`mailto:${contactInfo.email}`} className="text-gray-300 hover:text-white transition-colors">
+                                            {contactInfo.email}
+                                        </a>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                        
+                        {/* Social Links */}
+                        {socialLinks && socialLinks.length > 0 && (
+                            <div className="flex space-x-4">
+                                {socialLinks.map((social, index) => (
+                                    <a
+                                        key={index}
+                                        href={social.url}
+                                        className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center text-gray-300 hover:bg-blue-600 hover:text-white transition-colors shrink-0"
+                                        aria-label={social.platform}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                    >
+                                        <span className="flex items-center justify-center">
+                                            {getSocialIcon(social.platform)}
+                                        </span>
+                                    </a>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                    
+                    {/* Navigation Columns */}
+                    {footerColumns.map((column, colIndex) => (
+                        <div key={colIndex}>
+                            <h3 className="text-white font-semibold mb-4">
+                                {COLUMN_TITLES[colIndex] || `Column ${colIndex + 1}`}
+                            </h3>
+                            <ul className="space-y-2">
+                                {column.map((link, linkIndex) => (
+                                    <li key={linkIndex}>
+                                        <Link
+                                            href={link.href}
+                                            className="text-gray-300 hover:text-white transition-colors"
+                                        >
+                                            {link.label}
+                                        </Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    ))}
+                </div>
+                
+                {/* Bottom Bar */}
+                <div className="border-t border-gray-800 py-8 mt-8">
+                    <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+                        <div className="text-gray-400 text-sm">
+                            {copyrightText}
+                        </div>
+                        {legalLinks && legalLinks.length > 0 && (
+                            <div className="flex space-x-6 text-sm">
+                                {legalLinks.map((link, index) => (
+                                    <Link 
+                                        key={index}
+                                        href={link.href} 
+                                        className="text-gray-400 hover:text-white transition-colors"
+                                    >
+                                        {link.label}
+                                    </Link>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+};

package/src/design_system/sections/generic-header-component.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { type FC, type ReactNode, isValidElement } from "react";
+import Link from "next/link";
+import { cx } from '../../utils/cx';
+import { isReactComponent } from '../../utils/is-react-component';
+
+interface GenericHeaderComponentProps {
+    items: Array<{
+        label: string;
+        href: string;
+        icon?: FC<{ className?: string }>;
+        subtitle?: string;
+    }>;
+}
+
+// Nav Menu Item Link component (consolidated)
+interface NavMenuItemLinkProps {
+    href: string;
+    icon?: FC<{ className?: string }> | ReactNode;
+    iconClassName?: string;
+    className?: string;
+    title: string;
+    subtitle?: string;
+    badge?: ReactNode;
+    actionsContent?: ReactNode;
+    onClick?: (e: React.MouseEvent) => void;
+}
+
+const NavMenuItemLink = ({ href, icon: Icon, iconClassName, title, subtitle, badge, actionsContent, className, onClick }: NavMenuItemLinkProps) => {
+    const content = (
+        <>
+            {isValidElement(Icon) && Icon}
+            {isReactComponent(Icon) && <Icon className={cx("mt-0.5 size-4 shrink-0 stroke-[2.3px] text-fg-brand-primary", iconClassName)} />}
+
+            <div className="flex min-w-0 flex-1 flex-col gap-3">
+                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                    <div className="flex items-center gap-2">
+                        <span className="text-md font-semibold text-primary">{title}</span>
+                        {badge}
+                    </div>
+
+                    {subtitle && <span className="line-clamp-2 min-w-0 text-sm text-tertiary">{subtitle}</span>}
+                </div>
+
+                {actionsContent}
+            </div>
+        </>
+    );
+
+    if (onClick) {
+        return (
+            <button
+                onClick={onClick}
+                className={cx(
+                    "inline-flex w-full gap-3 px-4 py-3 outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover focus-visible:outline-2 sm:p-3 md:rounded-lg text-left",
+                    className,
+                )}
+            >
+                {content}
+            </button>
+        );
+    }
+
+    return (
+        <Link
+            href={href}
+            className={cx(
+                "inline-flex w-full gap-3 px-4 py-3 outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover focus-visible:outline-2 sm:p-3 md:rounded-lg",
+                className,
+            )}
+        >
+            {content}
+        </Link>
+    );
+};
+
+/**
+ * Generic header dropdown menu component for navigation
+ * Based on the UntitledUI dropdown-menu-simple pattern from the design system
+ * Used in the site template header for dropdown navigation menus
+ */
+export const GenericHeaderComponent = ({ items }: GenericHeaderComponentProps) => {
+    return (
+        <div className="px-3 pb-2 md:max-w-84 md:p-0" style={{ fontFamily: 'var(--font-body, var(--font-inter, "Inter"), -apple-system, "Segoe UI", Roboto, Arial, sans-serif)' }}>
+            <nav className="overflow-hidden rounded-2xl bg-primary py-2 shadow-xs ring-1 ring-secondary_alt md:p-2 md:shadow-lg">
+                <ul className="flex flex-col gap-0.5">
+                    {items.map((item: any) => (
+                        <li key={item.label || item.href}>
+                            <NavMenuItemLink
+                                icon={item.icon}
+                                title={item.label}
+                                subtitle={item.subtitle}
+                                href={item.href}
+                            />
+                        </li>
+                    ))}
+                </ul>
+            </nav>
+        </div>
+    );
+};
+