keystone-design-bootstrap 1.0.3

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

@@ -0,0 +1,91 @@
+"use client";
+
+import type { JobPosting } from '../../types/api/job-posting';
+
+interface JobGalleryProps {
+  config: {
+    pages?: any[];
+  };
+  jobs?: JobPosting[] | null;
+  pageName?: string;
+  sectionKey?: string;
+}
+
+export const JobGallery = ({
+  config,
+  jobs: jobsData,
+  pageName = 'Careers',
+  sectionKey = 'careers_page_section_2_jobs',
+}: JobGalleryProps) => {
+  const jobs = Array.isArray(jobsData) ? jobsData : [];
+  
+  const title = 'Open Positions';
+  const maxItems = undefined;
+  const displayJobs = maxItems ? jobs.slice(0, maxItems) : jobs;
+
+  return (
+    <section>
+      <div className="mx-auto max-w-container px-4 md:px-8">
+        <div className="mb-12 text-center">
+          <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
+            {title}
+          </h2>
+        </div>
+
+        {displayJobs.length > 0 ? (
+          <div className="space-y-6">
+            {displayJobs.map((job: any) => {
+              const description = job.description_markdown?.replace(/[#*\[\]()]/g, '').trim().substring(0, 200) || '';
+              
+              return (
+                <div key={job.id} className="border-b border-secondary pb-6">
+                  <div className="flex flex-col md:flex-row md:items-center md:justify-between">
+                    <div className="flex-grow">
+                      <h3 className="font-display text-2xl font-normal text-fg-primary mb-2">
+                        {job.title}
+                      </h3>
+                      
+                      <div className="flex gap-4 mb-4">
+                        {job.department && (
+                          <p className="text-xs font-body uppercase tracking-widest" style={{ color: 'var(--color-text-brand-secondary)' }}>
+                            {job.department}
+                          </p>
+                        )}
+                        {job.location && (
+                          <p className="text-xs font-body uppercase tracking-widest" style={{ color: 'var(--color-text-brand-secondary)' }}>
+                            {job.location}
+                          </p>
+                        )}
+                      </div>
+                      
+                      {description && (
+                        <p className="font-body text-base text-tertiary mb-4">
+                          {description}
+                        </p>
+                      )}
+                    </div>
+                    
+                    <a
+                      href={`/careers/${job.slug}`}
+                      className="font-body text-base underline underline-offset-4 hover:no-underline whitespace-nowrap md:ml-6 transition-colors"
+                      style={{ color: 'var(--color-text-brand-accent)' }}
+                    >
+                      View details
+                    </a>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <p className="font-body text-base text-tertiary">No open positions at this time</p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('job-gallery', 'aman', JobGallery);

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

@@ -0,0 +1,183 @@
+"use client";
+
+import React from 'react';
+import { Clock, CurrencyDollarCircle } from '@untitledui/icons';
+import { Badge, BadgeWithDot, Button, PhotoWithFallback } from '../elements';
+
+import type { JobPosting } from '../../types/api/job-posting';
+import type { WebsitePhotos } from '../../types/api/website-photos';
+
+// Helper to get careers page section from config
+const getCareersPageSection = (config: { pages?: any[] }, sectionKey: string) => {
+    if (!config?.pages) return null;
+    const careersPage = config.pages.find((p: any) => p.library_reference_name === 'Careers');
+    return (careersPage?.sections as any)?.[sectionKey];
+};
+
+interface JobGalleryProps {
+    // Config data - component extracts all values from it
+    config: {
+        pages?: any[];
+    };
+    jobs?: JobPosting[] | null;
+    websitePhotos?: WebsitePhotos | null;
+}
+
+export const JobGallery = ({
+    config,
+    jobs: jobsData,
+    websitePhotos,
+}: JobGalleryProps) => {
+    // Get job postings from props
+    const jobs = Array.isArray(jobsData) ? jobsData : [];
+    
+    // Get careers photo from website_photos
+    const careersPhoto = websitePhotos?.careers;
+    
+    // Extract values from config
+    const label = "Careers";
+    const title = "Join Our Team";
+    const subtitle = "";
+    const backgroundColor = "bg-primary";
+    const className = "";
+    
+    // Use careers photo from API, undefined if not available (triggers gradient fallback)
+    const finalHeaderImage = careersPhoto?.url;
+    const finalHeaderImageAlt = careersPhoto?.alt || "Team collaboration";
+    
+    // Group jobs by employment_type
+    const groupedJobs = React.useMemo(() => {
+        if (!jobs.length) return [];
+        
+        const groups: Record<string, JobPosting[]> = {};
+        jobs.forEach((job) => {
+            const category = job.employment_type || 'General';
+            if (!groups[category]) {
+                groups[category] = [];
+            }
+            groups[category].push(job);
+        });
+        
+        return Object.entries(groups);
+    }, [jobs]);
+
+    return (
+        <div className={`${backgroundColor} ${className}`}>
+            {/* Hero Section */}
+            <section className={`${backgroundColor} py-16 md:py-24`}>
+                <div className="mx-auto w-full max-w-container px-4 md:px-8">
+                    <div className="mx-auto flex w-full max-w-3xl flex-col items-center text-center">
+                        {label && (
+                            <span className="text-sm font-semibold text-brand-secondary md:text-md">{label}</span>
+                        )}
+                        <h1 className="mt-3 text-display-md font-semibold text-primary md:text-display-lg">
+                            {title}
+                        </h1>
+                        <p className="mt-4 text-lg text-tertiary md:mt-6 md:text-xl">
+                            {subtitle}
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            {/* Jobs Section */}
+            <section className={`${backgroundColor} py-16 md:py-24`}>
+                <div className="mx-auto w-full max-w-container px-4 md:px-8">
+                    <div className="mx-auto flex w-full max-w-3xl flex-col items-center text-center">
+                        <Badge className="hidden md:flex" size="lg" color="brand" type="pill-color">
+                            Careers
+                        </Badge>
+                        <Badge className="md:hidden" size="md" color="brand" type="pill-color">
+                            Careers
+                        </Badge>
+
+                        <h2 className="mt-4 text-display-sm font-semibold text-primary md:text-display-md">
+                            {title}
+                        </h2>
+                        <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">
+                            {subtitle}
+                        </p>
+                    </div>
+
+                    {/* Header Image using PhotoWithFallback */}
+                    <div className="mt-12 h-60 w-full md:mt-16 md:h-140 rounded-xl overflow-hidden">
+                        <PhotoWithFallback
+                            photoUrl={finalHeaderImage}
+                            photoAlt={finalHeaderImageAlt}
+                            fallbackId="careers-header"
+                            className="size-full object-cover"
+                        />
+                    </div>
+
+                    {groupedJobs.length > 0 ? (
+                        <div className="mx-auto mt-12 max-w-3xl md:mt-16">
+                            <ul className="flex flex-col gap-8 md:gap-16">
+                                {groupedJobs.map(([category, categoryJobs]) => (
+                                    <li key={category}>
+                                        <h2 className="text-lg font-semibold text-primary md:text-xl">{category}</h2>
+                                        <ul className="mt-5 flex flex-col gap-4 md:mt-8 md:gap-6">
+                                            {categoryJobs.map((job, index) => {
+                                                const description = job.description_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
+                                                
+                                                return (
+                                                    <li key={job.id || index}>
+                                                        <div
+                                                            className="flex flex-col rounded-2xl bg-primary p-6 ring-1 ring-secondary ring-inset"
+                                                        >
+                                                            <div className="flex flex-col items-start gap-2 md:flex-row">
+                                                                <h3 className="text-md font-semibold text-primary">{job.title}</h3>
+
+                                                                <div className="flex flex-1 gap-2 md:flex-row-reverse md:justify-between">
+                                                                    {job.location && (
+                                                                        <Badge color="gray" size="md" type="modern">
+                                                                            {job.location}
+                                                                        </Badge>
+                                                                    )}
+
+                                                                    {job.employment_type && (
+                                                                        <BadgeWithDot color="brand" size="md" type="modern">
+                                                                            {job.employment_type}
+                                                                        </BadgeWithDot>
+                                                                    )}
+                                                                </div>
+                                                            </div>
+
+                                                            <p className="mt-2 text-md text-tertiary line-clamp-2">
+                                                                {description}
+                                                            </p>
+
+                                                            <div className="mt-5 flex gap-4">
+                                                                {job.employment_type && (
+                                                                    <div className="flex items-center gap-1.5">
+                                                                        <Clock size={20} className="text-fg-quaternary" />
+                                                                        <span className="text-sm font-medium text-tertiary">{job.employment_type}</span>
+                                                                    </div>
+                                                                )}
+                                                                {job.salary_range && (
+                                                                    <div className="flex items-center gap-1.5">
+                                                                        <CurrencyDollarCircle size={20} className="text-fg-quaternary" />
+                                                                        <span className="text-sm font-medium text-tertiary">{job.salary_range}</span>
+                                                                    </div>
+                                                                )}
+                                                            </div>
+                                                        </div>
+                                                    </li>
+                                                );
+                                            })}
+                                        </ul>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    ) : (
+                        <div className="text-center mt-12">
+                            <p className="text-gray-500 mb-4">No open positions at the moment.</p>
+                            <p className="text-gray-600 mb-6">We're always looking for talented individuals to join our team.</p>
+                            <Button href="/contact">Send Us Your Resume</Button>
+                        </div>
+                    )}
+                </div>
+            </section>
+        </div>
+    );
+};

package/src/design_system/sections/location-details-section.aman.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import { PhotoWithFallback, GoogleMap } from '../elements';
+import type { Location } from '../../types/api/location';
+
+interface LocationDetailsSectionProps {
+  config: {
+    pages?: any[];
+  };
+  location?: Location | null;
+}
+
+// Parse business hours - handle both string and object formats
+const parseBusinessHours = (hours: string | Record<string, { open: string; close: string }> | undefined): Array<{ day: string; hours: string }> => {
+  if (!hours) return [];
+  
+  if (typeof hours === 'object' && !Array.isArray(hours)) {
+    const dayNames: Record<string, string> = {
+      monday: 'Monday',
+      tuesday: 'Tuesday',
+      wednesday: 'Wednesday',
+      thursday: 'Thursday',
+      friday: 'Friday',
+      saturday: 'Saturday',
+      sunday: 'Sunday',
+    };
+    
+    return Object.entries(hours)
+      .filter(([_, value]) => value && typeof value === 'object' && value.open && value.close)
+      .map(([day, value]) => ({
+        day: dayNames[day.toLowerCase()] || day.charAt(0).toUpperCase() + day.slice(1),
+        hours: `${value.open}-${value.close}`,
+      }));
+  }
+  
+  if (typeof hours === 'string') {
+    const entries = hours.split(',').map(entry => {
+      const parts = entry.trim().split(':');
+      if (parts.length === 2) {
+        return { day: parts[0].trim(), hours: parts[1].trim() };
+      }
+      return null;
+    }).filter(Boolean) as Array<{ day: string; hours: string }>;
+    
+    return entries.length > 0 ? entries : [{ day: 'Hours', hours }];
+  }
+  
+  return [];
+};
+
+export const LocationDetailsSection = ({
+  config,
+  location,
+}: LocationDetailsSectionProps) => {
+  if (!location) return null;
+
+  const description = location?.description_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
+  const fullAddress = `${location.address_line_1}${location.address_line_2 ? `, ${location.address_line_2}` : ''}, ${location.city}, ${location.state} ${location.zip_code}`.trim();
+  const businessHours = location.business_hours ? parseBusinessHours(location.business_hours) : [];
+
+  return (
+    <section>
+      <div className="mx-auto max-w-container px-4 md:px-8">
+        {/* Top Section: Description and Photo */}
+        <div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16 mb-16">
+          <div className="flex flex-col justify-center">
+            <h2 className="font-display text-4xl font-normal leading-tight text-fg-primary md:text-5xl">
+              {location.name}
+            </h2>
+            
+            {location.city && location.state && (
+              <p className="mt-4 text-xs font-body uppercase tracking-widest" style={{ color: 'var(--color-text-brand-secondary)' }}>
+                {location.city}, {location.state}
+              </p>
+            )}
+            
+            {description && (
+              <p className="mt-6 font-display text-lg leading-relaxed text-tertiary">
+                {description}
+              </p>
+            )}
+          </div>
+          
+          <div className="w-full h-64 md:h-96 overflow-hidden">
+            <PhotoWithFallback
+              item={location}
+              fallbackId={location.id}
+              className="w-full h-full object-cover"
+            />
+          </div>
+        </div>
+
+        {/* Bottom Section: Contact Info and Map */}
+        <div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
+          {/* Contact Information */}
+          <div className="space-y-8">
+            {location.address_line_1 && (
+              <div>
+                <p className="text-xs font-body uppercase tracking-widest mb-2" style={{ color: 'var(--color-text-brand-secondary)' }}>
+                  ADDRESS
+                </p>
+                <a 
+                  href={`https://maps.google.com/?q=${encodeURIComponent(fullAddress)}`}
+                  className="font-body text-base underline underline-offset-4 hover:no-underline transition-colors"
+                  style={{ color: 'var(--color-text-brand-accent)' }}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {location.address_line_1}
+                  {location.address_line_2 && <><br />{location.address_line_2}</>}
+                  <br />{location.city}, {location.state} {location.zip_code}
+                </a>
+              </div>
+            )}
+
+            {location.phone && (
+              <div>
+                <p className="text-xs font-body uppercase tracking-widest mb-2" style={{ color: 'var(--color-text-brand-secondary)' }}>
+                  PHONE
+                </p>
+                <a 
+                  href={`tel:${location.phone}`}
+                  className="font-body text-base underline underline-offset-4 hover:no-underline transition-colors"
+                  style={{ color: 'var(--color-text-brand-accent)' }}
+                >
+                  {location.phone}
+                </a>
+              </div>
+            )}
+
+            {location.email && (
+              <div>
+                <p className="text-xs font-body uppercase tracking-widest mb-2" style={{ color: 'var(--color-text-brand-secondary)' }}>
+                  EMAIL
+                </p>
+                <a 
+                  href={`mailto:${location.email}`}
+                  className="font-body text-base underline underline-offset-4 hover:no-underline transition-colors"
+                  style={{ color: 'var(--color-text-brand-accent)' }}
+                >
+                  {location.email}
+                </a>
+              </div>
+            )}
+
+            {businessHours.length > 0 && (
+              <div>
+                <p className="text-xs font-body uppercase tracking-widest mb-2" style={{ color: 'var(--color-text-brand-secondary)' }}>
+                  HOURS
+                </p>
+                <div className="font-body text-base text-tertiary space-y-1">
+                  {businessHours.map(({ day, hours }) => (
+                    <div key={day} className="flex justify-between gap-4">
+                      <span className="font-medium">{day}:</span>
+                      <span>{hours}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {fullAddress && (
+            <div className="w-full h-96 overflow-hidden">
+              <GoogleMap
+                address={fullAddress}
+                locationName={location.name}
+                className="h-full w-full"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('location-details-section', 'aman', LocationDetailsSection);

package/src/design_system/sections/location-details-section.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import React from 'react';
+import { Mail01, MarkerPin02, Phone, Clock } from '@untitledui/icons';
+import { Button } from '../elements';
+import { FeaturedIcon, GoogleMap } from '../elements';
+import type { Location } from '../../types/api/location';
+
+interface LocationDetailsSectionProps {
+    config: {
+        pages?: any[];
+    };
+    location?: Location | null;
+}
+
+// Parse business hours - handle both string and object formats
+const parseBusinessHours = (hours: string | Record<string, { open: string; close: string }> | undefined): Array<{ day: string; hours: string }> => {
+    if (!hours) return [];
+    
+    if (typeof hours === 'object' && !Array.isArray(hours)) {
+        const dayNames: Record<string, string> = {
+            monday: 'Monday',
+            tuesday: 'Tuesday',
+            wednesday: 'Wednesday',
+            thursday: 'Thursday',
+            friday: 'Friday',
+            saturday: 'Saturday',
+            sunday: 'Sunday',
+        };
+        
+        return Object.entries(hours)
+            .filter(([_, value]) => value && typeof value === 'object' && value.open && value.close)
+            .map(([day, value]) => ({
+                day: dayNames[day.toLowerCase()] || day.charAt(0).toUpperCase() + day.slice(1),
+                hours: `${value.open}-${value.close}`,
+            }));
+    }
+    
+    if (typeof hours === 'string') {
+        const entries = hours.split(',').map(entry => {
+            const parts = entry.trim().split(':');
+            if (parts.length === 2) {
+                return { day: parts[0].trim(), hours: parts[1].trim() };
+            }
+            return null;
+        }).filter(Boolean) as Array<{ day: string; hours: string }>;
+        
+        return entries.length > 0 ? entries : [{ day: 'Hours', hours }];
+    }
+    
+    return [];
+};
+
+export const LocationDetailsSection = ({
+    config,
+    location,
+}: LocationDetailsSectionProps) => {
+    if (!location) return null;
+
+    const locationDetailPage = config.pages?.find((p: any) => p.library_reference_name === 'LocationDetail');
+    const locationSectionConfig = locationDetailPage?.sections?.location_detail_page_section_2_details;
+
+    const label = "Contact us";
+    const title = locationSectionConfig?.title || "Get in touch";
+    const subtitle = locationSectionConfig?.subtitle;
+    const emailLabel = locationSectionConfig?.email_label || "Email";
+    const emailDescription = locationSectionConfig?.email_description || "Our friendly team is here to help.";
+    const officeLabel = locationSectionConfig?.office_label || "Address";
+    const officeDescription = locationSectionConfig?.office_description || "Come say hello at our office HQ.";
+    const phoneLabel = locationSectionConfig?.phone_label || "Phone";
+    const phoneDescription = locationSectionConfig?.phone_description || "Reach us on the phone.";
+    const backgroundColor = "bg-primary";
+    const className = "";
+    const showMap = true;
+    const fullAddress = `${location.address_line_1}${location.address_line_2 ? `, ${location.address_line_2}` : ''}, ${location.city}, ${location.state} ${location.zip_code}`.trim();
+    
+    const businessHours = location.business_hours ? parseBusinessHours(location.business_hours) : [];
+
+    return (
+        <section className={`${backgroundColor} py-16 md:py-24 ${className}`}>
+            <div className="mx-auto w-full max-w-container px-4 md:px-8">
+                <div className="flex w-full max-w-3xl flex-col">
+                    {label && (
+                        <span className="text-sm font-semibold text-brand-secondary md:text-md">
+                            {label}
+                        </span>
+                    )}
+                    {title && (
+                        <h2 className="mt-3 text-display-sm font-semibold text-primary md:text-display-md">
+                            {title}
+                        </h2>
+                    )}
+                    {subtitle && (
+                        <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">
+                            {subtitle}
+                        </p>
+                    )}
+                </div>
+
+                <div className="mt-12 grid grid-cols-1 items-start gap-12 md:mt-16 md:gap-16 lg:grid-cols-3">
+                    <ul className="col-span-1 grid w-full grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-2 lg:grid-cols-1 lg:gap-y-12">
+                        {location.address_line_1 && (
+                            <li className="flex max-w-sm flex-col items-start gap-4 lg:flex-row">
+                                <FeaturedIcon className="hidden md:flex" size="lg" icon={MarkerPin02} color="brand" theme="light" />
+                                <FeaturedIcon className="md:hidden" size="md" icon={MarkerPin02} color="brand" theme="light" />
+                                <div className="lg:pt-2.5">
+                                    <h3 className="text-lg font-semibold text-primary">
+                                        {officeLabel}
+                                    </h3>
+                                    <p className="mt-1 text-md text-tertiary">
+                                        {officeDescription}
+                                    </p>
+                                    <Button 
+                                        href={`https://maps.google.com/?q=${encodeURIComponent(fullAddress)}`}
+                                        color="link-color" 
+                                        size="lg" 
+                                        className="mt-4 whitespace-pre lg:mt-5"
+                                    >
+                                        {location.address_line_1}{location.address_line_2 ? `\n${location.address_line_2}` : ''}
+                                        {`\n${location.city}, ${location.state} ${location.zip_code}`}
+                                    </Button>
+                                </div>
+                            </li>
+                        )}
+                        
+                        {location.phone && (
+                            <li className="flex max-w-sm flex-col items-start gap-4 lg:flex-row">
+                                <FeaturedIcon className="hidden md:flex" size="lg" icon={Phone} color="brand" theme="light" />
+                                <FeaturedIcon className="md:hidden" size="md" icon={Phone} color="brand" theme="light" />
+                                <div className="lg:pt-2.5">
+                                    <h3 className="text-lg font-semibold text-primary">
+                                        {phoneLabel}
+                                    </h3>
+                                    <p className="mt-1 text-md text-tertiary">
+                                        {phoneDescription}
+                                    </p>
+                                    <Button href={`tel:${location.phone}`} color="link-color" size="lg" className="mt-4 lg:mt-5">
+                                        {location.phone}
+                                    </Button>
+                                </div>
+                            </li>
+                        )}
+                        
+                        {location.email && (
+                            <li className="flex max-w-sm flex-col items-start gap-4 lg:flex-row">
+                                <FeaturedIcon className="hidden md:flex" size="lg" icon={Mail01} color="brand" theme="light" />
+                                <FeaturedIcon className="md:hidden" size="md" icon={Mail01} color="brand" theme="light" />
+                                <div className="lg:pt-2.5">
+                                    <h3 className="text-lg font-semibold text-primary">
+                                        {emailLabel}
+                                    </h3>
+                                    <p className="mt-1 text-md text-tertiary">
+                                        {emailDescription}
+                                    </p>
+                                    <Button href={`mailto:${location.email}`} color="link-color" size="lg" className="mt-4 lg:mt-5">
+                                        {location.email}
+                                    </Button>
+                                </div>
+                            </li>
+                        )}
+
+                        {businessHours.length > 0 && (
+                            <li className="flex max-w-sm flex-col items-start gap-4 lg:flex-row">
+                                <FeaturedIcon className="hidden md:flex" size="lg" icon={Clock} color="brand" theme="light" />
+                                <FeaturedIcon className="md:hidden" size="md" icon={Clock} color="brand" theme="light" />
+                                <div className="lg:pt-2.5">
+                                    <h3 className="text-lg font-semibold text-primary">
+                                        Business Hours
+                                    </h3>
+                                    <div className="mt-1 flex flex-col gap-2 text-md text-tertiary">
+                                        {businessHours.map(({ day, hours }) => (
+                                            <div key={day} className="flex justify-between gap-4">
+                                                <span className="font-medium capitalize">{day}:</span>
+                                                <span>{hours}</span>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            </li>
+                        )}
+                    </ul>
+
+                    {showMap && fullAddress && (
+                        <div className="col-span-2 h-60 w-full border-none lg:h-full">
+                            <GoogleMap
+                                address={fullAddress}
+                                locationName={location.name}
+                                className="h-full"
+                            />
+                        </div>
+                    )}
+                </div>
+            </div>
+        </section>
+    );
+};