keystone-design-bootstrap 1.0.43 → 1.0.44

package/package.json

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

package/src/design_system/components/DynamicFormFields.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import React, { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { Input, InputBase, InputGroup, NativeSelect, Textarea, PrivacyCheckbox } from '../elements';
 import type { FormDefinition, FormFieldDefinition } from '../../types/api/form';
 import countries from '../../utils/countries';
@@ -10,6 +12,9 @@ export interface DynamicFormFieldsProps {
   form: FormDefinition;
   /** For job_application forms: add hidden jobSlug input. */
   jobSlug?: string;
+  /** Optional URLs for ToS/Privacy links in consent checkbox label. */
+  privacyPolicyUrl?: string;
+  termsOfServiceUrl?: string;
 }
 
 const INPUT_TYPES = ['text', 'email', 'tel'] as const;
@@ -54,15 +59,63 @@ function renderField(
   selectedCountryPhone: string,
   onCountryChange: (code: string) => void,
   phoneValues: Record<string, string>,
-  setPhoneValues: React.Dispatch<React.SetStateAction<Record<string, string>>>
+  setPhoneValues: React.Dispatch<React.SetStateAction<Record<string, string>>>,
+  companyName: string,
+  privacyPolicyUrl: string | undefined,
+  termsOfServiceUrl: string | undefined
 ): React.ReactNode {
   const name = field.name ?? `field-${index}`;
+  const type = (field.type ?? 'text').toString().toLowerCase();
 
   if (field.type === 'hidden') {
     const val = field.value ?? '';
     return <input key={name} type="hidden" name={name} value={val} />;
   }
 
+  if (type === 'checkbox') {
+    const labelRaw = field.label ?? '';
+    const companyNameClean = companyName.replace(/\*\*/g, '').trim();
+    let labelWithCompany = companyNameClean
+      ? labelRaw.replace(/\{\{company_name\}\}/gi, companyNameClean)
+      : labelRaw;
+    // Inject ToS/Privacy links as markdown so they render as links (then whole label is rendered as markdown)
+    if (name === 'tos_privacy_consent' && privacyPolicyUrl && termsOfServiceUrl) {
+      labelWithCompany = labelWithCompany
+        .replace(/\*\*Terms of Service\*\*/gi, `**[Terms of Service](${termsOfServiceUrl})**`)
+        .replace(/\*\*Privacy Policy\*\*/gi, `**[Privacy Policy](${privacyPolicyUrl})**`);
+    }
+    const id = `checkbox-${name}-${index}`;
+    return (
+      <div key={name} className="flex items-start gap-3">
+        <input
+          type="checkbox"
+          id={id}
+          name={name}
+          value="on"
+          required={Boolean(field.required)}
+          aria-describedby={id ? `${id}-desc` : undefined}
+          className="mt-1 h-4 w-4 shrink-0 rounded border-secondary focus:ring-focus-ring"
+        />
+        <label
+          id={id ? `${id}-desc` : undefined}
+          htmlFor={id}
+          className="font-body text-sm text-tertiary [&_a]:underline [&_a]:outline-focus-ring [&_strong]:font-semibold"
+        >
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            components={{
+              p: ({ children }) => <span>{children}</span>,
+              strong: (props) => <strong className="font-semibold" {...props} />,
+              a: (props) => <a {...props} className="underline outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2" />,
+            }}
+          >
+            {labelWithCompany}
+          </ReactMarkdown>
+        </label>
+      </div>
+    );
+  }
+
   if (field.type === 'tel' && showCountryCode) {
     const countryOptions = countries.map((c) => ({
       label: c.phoneCode.startsWith('+') ? c.phoneCode : `+${c.phoneCode}`,
@@ -150,11 +203,12 @@ function renderField(
   );
 }
 
-export function DynamicFormFields({ form, jobSlug }: DynamicFormFieldsProps) {
+export function DynamicFormFields({ form, jobSlug, privacyPolicyUrl, termsOfServiceUrl }: DynamicFormFieldsProps) {
   const [selectedCountryPhone, setSelectedCountryPhone] = useState('US');
   const [phoneValues, setPhoneValues] = useState<Record<string, string>>({});
   const { settings } = form;
   const fields: FormDefinition['fields'] = Array.isArray(form.fields) ? form.fields : [];
+  const companyName = form.company_name ?? '';
 
   const handleCountryChange = (newCode: string) => {
     setSelectedCountryPhone(newCode);
@@ -178,9 +232,25 @@ export function DynamicFormFields({ form, jobSlug }: DynamicFormFieldsProps) {
 
   /** Show country code selector for tel fields; default true (US +1) unless backend sets to false. */
   const showCountryCode = settings?.show_country_code !== false;
-  const showPrivacyCheckbox = settings?.show_privacy_checkbox !== false;
   const flat = allFieldsFlat(fields);
   const hasPhoneField = flat.some((f) => f.type === 'tel');
+  const hasCheckboxFields = flat.some((f) => (f.type ?? '').toString().toLowerCase() === 'checkbox');
+  const showPrivacyCheckbox =
+    settings?.show_privacy_checkbox !== false && hasPhoneField && !hasCheckboxFields;
+
+  const renderFieldWithProps = (item: FormFieldDefinition, i: number) =>
+    renderField(
+      item,
+      i,
+      showCountryCode,
+      selectedCountryPhone,
+      handleCountryChange,
+      phoneValues,
+      setPhoneValues,
+      companyName,
+      privacyPolicyUrl,
+      termsOfServiceUrl
+    );
 
   return (
     <div className="flex flex-col gap-6">
@@ -194,7 +264,7 @@ export function DynamicFormFields({ form, jobSlug }: DynamicFormFieldsProps) {
             >
               {item.map((f, i) => (
                 <div key={f.name} className="flex-1">
-                  {renderField(f, i, showCountryCode, selectedCountryPhone, handleCountryChange, phoneValues, setPhoneValues)}
+                  {renderFieldWithProps(f, i)}
                 </div>
               ))}
             </div>
@@ -202,14 +272,14 @@ export function DynamicFormFields({ form, jobSlug }: DynamicFormFieldsProps) {
         }
         return (
           <div key={item.name ?? `field-${index}`}>
-            {renderField(item, index, showCountryCode, selectedCountryPhone, handleCountryChange, phoneValues, setPhoneValues)}
+            {renderFieldWithProps(item, index)}
           </div>
         );
       })}
 
       {jobSlug ? <input type="hidden" name="jobSlug" value={jobSlug} /> : null}
 
-      {showPrivacyCheckbox && hasPhoneField && <PrivacyCheckbox />}
+      {showPrivacyCheckbox && <PrivacyCheckbox />}
     </div>
   );
 }

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

@@ -8,12 +8,13 @@ import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
 interface ContactSectionFormAmanProps {
-    /** Form fields are rendered from this definition (required). */
     formDefinition: FormDefinition | null | undefined;
     submitButtonText?: string;
     successMessage?: string;
     thankYouMessage?: string;
     onSuccess?: () => void;
+    privacyPolicyUrl?: string;
+    termsOfServiceUrl?: string;
 }
 
 export const ContactSectionForm = ({
@@ -22,6 +23,8 @@ export const ContactSectionForm = ({
     successMessage = "Thank you for contacting us! We'll get back to you soon.",
     thankYouMessage,
     onSuccess,
+    privacyPolicyUrl,
+    termsOfServiceUrl,
 }: ContactSectionFormAmanProps) => {
     const { leadFormDefinition } = useFormDefinitions();
     const resolvedFormDefinition = formDefinition ?? leadFormDefinition;
@@ -43,7 +46,8 @@ export const ContactSectionForm = ({
         const formData = new FormData(e.currentTarget);
         const data: Record<string, string> = { formType: 'lead' };
         formData.forEach((value, key) => {
-            if (key !== 'privacy' && typeof value === 'string') data[key] = value;
+            if (key.endsWith('_prefix')) return;
+            if (typeof value === 'string') data[key] = value;
         });
         try {
             const response = await fetch('/api/form/', {
@@ -74,7 +78,11 @@ export const ContactSectionForm = ({
 
     return (
         <Form ref={formRef} onSubmit={handleSubmit} className="flex flex-col gap-6">
-            <DynamicFormFields form={resolvedFormDefinition} />
+            <DynamicFormFields
+                form={resolvedFormDefinition}
+                privacyPolicyUrl={privacyPolicyUrl}
+                termsOfServiceUrl={termsOfServiceUrl}
+            />
             <Button
                 type="submit"
                 color="primary"

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

@@ -8,12 +8,13 @@ import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
 interface ContactSectionFormBalanceProps {
-    /** Form fields are rendered from this definition (required). */
     formDefinition: FormDefinition | null | undefined;
     submitButtonText?: string;
     successMessage?: string;
     thankYouMessage?: string;
     onSuccess?: () => void;
+    privacyPolicyUrl?: string;
+    termsOfServiceUrl?: string;
 }
 
 export const ContactSectionForm = ({
@@ -22,6 +23,8 @@ export const ContactSectionForm = ({
     successMessage = "Thank you for contacting us! We'll get back to you soon.",
     thankYouMessage,
     onSuccess,
+    privacyPolicyUrl,
+    termsOfServiceUrl,
 }: ContactSectionFormBalanceProps) => {
     const { leadFormDefinition } = useFormDefinitions();
     const resolvedFormDefinition = formDefinition ?? leadFormDefinition;
@@ -43,7 +46,8 @@ export const ContactSectionForm = ({
         const formData = new FormData(e.currentTarget);
         const data: Record<string, string> = { formType: 'lead' };
         formData.forEach((value, key) => {
-            if (key !== 'privacy' && typeof value === 'string') data[key] = value;
+            if (key.endsWith('_prefix')) return;
+            if (typeof value === 'string') data[key] = value;
         });
         try {
             const response = await fetch('/api/form/', {
@@ -74,7 +78,11 @@ export const ContactSectionForm = ({
 
     return (
         <Form ref={formRef} onSubmit={handleSubmit} className="flex flex-col gap-6">
-            <DynamicFormFields form={resolvedFormDefinition} />
+            <DynamicFormFields
+                form={resolvedFormDefinition}
+                privacyPolicyUrl={privacyPolicyUrl}
+                termsOfServiceUrl={termsOfServiceUrl}
+            />
             <Button
                 type="submit"
                 color="primary"

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

@@ -8,12 +8,13 @@ import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
 interface ContactSectionFormBareluxProps {
-    /** Form fields are rendered from this definition (required). */
     formDefinition: FormDefinition | null | undefined;
     submitButtonText?: string;
     successMessage?: string;
     thankYouMessage?: string;
     onSuccess?: () => void;
+    privacyPolicyUrl?: string;
+    termsOfServiceUrl?: string;
 }
 
 export const ContactSectionForm = ({
@@ -22,6 +23,8 @@ export const ContactSectionForm = ({
     successMessage = "Thank you for contacting us! We'll get back to you soon.",
     thankYouMessage,
     onSuccess,
+    privacyPolicyUrl,
+    termsOfServiceUrl,
 }: ContactSectionFormBareluxProps) => {
     const { leadFormDefinition } = useFormDefinitions();
     const resolvedFormDefinition = formDefinition ?? leadFormDefinition;
@@ -43,7 +46,8 @@ export const ContactSectionForm = ({
         const formData = new FormData(e.currentTarget);
         const data: Record<string, string> = { formType: 'lead' };
         formData.forEach((value, key) => {
-            if (key !== 'privacy' && typeof value === 'string') data[key] = value;
+            if (key.endsWith('_prefix')) return;
+            if (typeof value === 'string') data[key] = value;
         });
         try {
             const response = await fetch('/api/form/', {
@@ -74,7 +78,11 @@ export const ContactSectionForm = ({
 
     return (
         <Form ref={formRef} onSubmit={handleSubmit} className="flex flex-col gap-6">
-            <DynamicFormFields form={resolvedFormDefinition} />
+            <DynamicFormFields
+                form={resolvedFormDefinition}
+                privacyPolicyUrl={privacyPolicyUrl}
+                termsOfServiceUrl={termsOfServiceUrl}
+            />
             <Button
                 type="submit"
                 color="primary"

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

@@ -14,6 +14,9 @@ interface ContactSectionFormProps {
     successMessage?: string;
     thankYouMessage?: string;
     onSuccess?: () => void;
+    /** Optional URLs for ToS/Privacy links in consent checkbox (passed to DynamicFormFields). */
+    privacyPolicyUrl?: string;
+    termsOfServiceUrl?: string;
 }
 
 export const ContactSectionForm = ({
@@ -22,6 +25,8 @@ export const ContactSectionForm = ({
     successMessage = "Thank you for contacting us! We'll get back to you soon.",
     thankYouMessage,
     onSuccess,
+    privacyPolicyUrl,
+    termsOfServiceUrl,
 }: ContactSectionFormProps) => {
     const { leadFormDefinition } = useFormDefinitions();
     const resolvedFormDefinition = formDefinition ?? leadFormDefinition;
@@ -47,7 +52,8 @@ export const ContactSectionForm = ({
         const formData = new FormData(e.currentTarget);
         const data: Record<string, string> = { formType: 'lead' };
         formData.forEach((value, key) => {
-            if (key !== 'privacy' && typeof value === 'string') data[key] = value;
+            if (key.endsWith('_prefix')) return;
+            if (typeof value === 'string') data[key] = value;
         });
 
         try {
@@ -79,7 +85,11 @@ export const ContactSectionForm = ({
     return (
         <Form ref={formRef} onSubmit={handleSubmit} className="flex flex-col gap-8">
             <div className="flex flex-col gap-6">
-                <DynamicFormFields form={resolvedFormDefinition} />
+                <DynamicFormFields
+                    form={resolvedFormDefinition}
+                    privacyPolicyUrl={privacyPolicyUrl}
+                    termsOfServiceUrl={termsOfServiceUrl}
+                />
             </div>
             {submitStatus === 'success' && (
                 <div className="rounded-lg bg-success-50 p-4 text-success-700">

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

@@ -2,13 +2,23 @@ import React from 'react';
 import { PhotoWithFallback } from '../elements';
 import type { WebsitePhotos } from '../../types/api/website-photos';
 import type { FormDefinition } from '../../types/api/form';
+import type { SiteConfig } from '../../types/config';
 import { ContactSectionForm } from './contact-section-form.aman';
 
+function getLegalUrlsFromConfig(config: SiteConfig | null | undefined): { privacyPolicyUrl?: string; termsOfServiceUrl?: string } {
+  if (!config?.navigation?.footer) return {};
+  const flat = config.navigation.footer.flat();
+  const privacy = flat.find((l) => l.label === 'Privacy Policy')?.href;
+  const terms = flat.find((l) => l.label === 'Terms of Service')?.href;
+  return { privacyPolicyUrl: privacy, termsOfServiceUrl: terms };
+}
+
 interface ContactSectionProps {
     websitePhotos?: WebsitePhotos | null;
     title?: string;
     subtitle?: string;
     formDefinition?: FormDefinition | null;
+    config?: SiteConfig | null;
 }
 
 const ContactSection = ({
@@ -16,7 +26,9 @@ const ContactSection = ({
     title = "",
     subtitle = "",
     formDefinition,
+    config,
 }: ContactSectionProps) => {
+    const { privacyPolicyUrl, termsOfServiceUrl } = getLegalUrlsFromConfig(config);
     const contactPhoto = websitePhotos?.contact;
     const contactImageUrl = contactPhoto?.url;
     const finalContactImage = contactImageUrl && contactImageUrl.trim() !== "" ? contactImageUrl : undefined;
@@ -37,7 +49,11 @@ const ContactSection = ({
                             </p>
                         </div>
 
-                        <ContactSectionForm formDefinition={formDefinition} />
+                        <ContactSectionForm
+                            formDefinition={formDefinition}
+                            privacyPolicyUrl={privacyPolicyUrl}
+                            termsOfServiceUrl={termsOfServiceUrl}
+                        />
                     </div>
 
                     {/* Image Side - full height next to form */}

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

@@ -2,13 +2,23 @@ import React from 'react';
 import { PhotoWithFallback } from '../elements';
 import type { WebsitePhotos } from '../../types/api/website-photos';
 import type { FormDefinition } from '../../types/api/form';
+import type { SiteConfig } from '../../types/config';
 import { ContactSectionForm } from './contact-section-form.balance';
 
+function getLegalUrlsFromConfig(config: SiteConfig | null | undefined): { privacyPolicyUrl?: string; termsOfServiceUrl?: string } {
+  if (!config?.navigation?.footer) return {};
+  const flat = config.navigation.footer.flat();
+  const privacy = flat.find((l) => l.label === 'Privacy Policy')?.href;
+  const terms = flat.find((l) => l.label === 'Terms of Service')?.href;
+  return { privacyPolicyUrl: privacy, termsOfServiceUrl: terms };
+}
+
 interface ContactSectionProps {
     websitePhotos?: WebsitePhotos | null;
     title?: string;
     subtitle?: string;
     formDefinition?: FormDefinition | null;
+    config?: SiteConfig | null;
 }
 
 const ContactSection = ({
@@ -16,7 +26,9 @@ const ContactSection = ({
     title = "",
     subtitle = "",
     formDefinition,
+    config,
 }: ContactSectionProps) => {
+    const { privacyPolicyUrl, termsOfServiceUrl } = getLegalUrlsFromConfig(config);
     const contactPhoto = websitePhotos?.contact;
     const contactImageUrl = contactPhoto?.url;
     const finalContactImage = contactImageUrl && contactImageUrl.trim() !== "" ? contactImageUrl : undefined;
@@ -49,7 +61,11 @@ const ContactSection = ({
 
                 {/* Form centered */}
                 <div className="max-w-2xl mx-auto">
-                    <ContactSectionForm formDefinition={formDefinition} />
+                    <ContactSectionForm
+                        formDefinition={formDefinition}
+                        privacyPolicyUrl={privacyPolicyUrl}
+                        termsOfServiceUrl={termsOfServiceUrl}
+                    />
                 </div>
             </div>
         </section>

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

@@ -2,13 +2,23 @@ import React from "react";
 import { PhotoWithFallback } from '../elements';
 import type { WebsitePhotos } from '../../types/api/website-photos';
 import type { FormDefinition } from '../../types/api/form';
+import type { SiteConfig } from '../../types/config';
 import { ContactSectionForm } from './contact-section-form.barelux';
 
+function getLegalUrlsFromConfig(config: SiteConfig | null | undefined): { privacyPolicyUrl?: string; termsOfServiceUrl?: string } {
+  if (!config?.navigation?.footer) return {};
+  const flat = config.navigation.footer.flat();
+  const privacy = flat.find((l) => l.label === 'Privacy Policy')?.href;
+  const terms = flat.find((l) => l.label === 'Terms of Service')?.href;
+  return { privacyPolicyUrl: privacy, termsOfServiceUrl: terms };
+}
+
 interface ContactSectionProps {
     websitePhotos?: WebsitePhotos | null;
     title?: string;
     subtitle?: string;
     formDefinition?: FormDefinition | null;
+    config?: SiteConfig | null;
 }
 
 const ContactSection = ({
@@ -16,7 +26,9 @@ const ContactSection = ({
     title = "",
     subtitle = "",
     formDefinition,
+    config,
 }: ContactSectionProps) => {
+    const { privacyPolicyUrl, termsOfServiceUrl } = getLegalUrlsFromConfig(config);
     const contactPhoto = websitePhotos?.contact;
     const contactImageUrl = contactPhoto?.url;
     const finalContactImage = contactImageUrl && contactImageUrl.trim() !== "" ? contactImageUrl : undefined;
@@ -35,7 +47,11 @@ const ContactSection = ({
                             {subtitle}
                         </p>
 
-                        <ContactSectionForm formDefinition={formDefinition} />
+                        <ContactSectionForm
+                            formDefinition={formDefinition}
+                            privacyPolicyUrl={privacyPolicyUrl}
+                            termsOfServiceUrl={termsOfServiceUrl}
+                        />
                     </div>
 
                     {/* Right Column - Image (full height next to form) */}

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

@@ -2,14 +2,25 @@ import React from 'react';
 import { PhotoWithFallback } from '../elements';
 import type { WebsitePhotos } from '../../types/api/website-photos';
 import type { FormDefinition } from '../../types/api/form';
+import type { SiteConfig } from '../../types/config';
 import { ContactSectionForm } from './contact-section-form';
 
+function getLegalUrlsFromConfig(config: SiteConfig | null | undefined): { privacyPolicyUrl?: string; termsOfServiceUrl?: string } {
+  if (!config?.navigation?.footer) return {};
+  const flat = config.navigation.footer.flat();
+  const privacy = flat.find((l) => l.label === 'Privacy Policy')?.href;
+  const terms = flat.find((l) => l.label === 'Terms of Service')?.href;
+  return { privacyPolicyUrl: privacy, termsOfServiceUrl: terms };
+}
+
 interface ContactSectionProps {
     websitePhotos?: WebsitePhotos | null;
     title?: string;
     subtitle?: string;
     /** When provided, contact form fields are rendered from this definition. */
     formDefinition?: FormDefinition | null;
+    /** Optional site config; used to derive Privacy Policy / Terms of Service URLs for the consent checkbox links. */
+    config?: SiteConfig | null;
 }
 
 const ContactSection = ({
@@ -17,7 +28,9 @@ const ContactSection = ({
     title = "",
     subtitle = "",
     formDefinition,
+    config,
 }: ContactSectionProps) => {
+    const { privacyPolicyUrl, termsOfServiceUrl } = getLegalUrlsFromConfig(config);
     const contactPhoto = websitePhotos?.contact;
     const contactImageUrl = contactPhoto?.url;
     const finalContactImage = contactImageUrl && contactImageUrl.trim() !== "" ? contactImageUrl : undefined;
@@ -38,7 +51,11 @@ const ContactSection = ({
                                 </p>
                             )}
                         </div>
-                        <ContactSectionForm formDefinition={formDefinition} />
+                        <ContactSectionForm
+                            formDefinition={formDefinition}
+                            privacyPolicyUrl={privacyPolicyUrl}
+                            termsOfServiceUrl={termsOfServiceUrl}
+                        />
                     </div>
 
                     <div className="max-lg:hidden h-full min-h-0">

package/src/types/api/form.ts

@@ -22,6 +22,8 @@ export interface FormDefinition {
   /** Ordered array; each element is a field or an array of fields (inline row). */
   fields: FormFieldItem[];
   settings?: Record<string, unknown>;
+  /** Business name for consent copy (e.g. "{{company_name}}" in checkbox labels). */
+  company_name?: string;
   created_at?: string;
   updated_at?: string;
 }