keystone-design-bootstrap 1.0.7 → 1.0.8

package/package.json

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

package/src/design_system/elements/carousel/carousel-section-wrapper.tsx

@@ -1,59 +1,65 @@
 "use client";
 
-import React, { ReactNode } from 'react';
-import { Carousel } from '../carousel/carousel';
+import React from 'react';
+import { Carousel } from './carousel';
 import { ChevronLeft, ChevronRight } from '@untitledui/icons';
 
 interface CarouselSectionWrapperProps {
-    title?: string;
-    children: ReactNode;
+    title: string;
+    subtitle?: string;
     hasItems: boolean;
+    children: React.ReactNode;
     emptyMessage?: string;
 }
 
 export const CarouselSectionWrapper = ({
-    title = "",
-    children,
+    title,
+    subtitle,
     hasItems,
-    emptyMessage = "No items available"
+    children,
+    emptyMessage = "No items available",
 }: CarouselSectionWrapperProps) => {
-    if (!hasItems) {
-        return (
-            <>
-                {title && (
-                    <div className="mb-12">
-                        <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
-                            {title}
-                        </h2>
-                    </div>
-                )}
-                <div className="text-center py-12">
-                    <p className="font-body text-base text-tertiary">{emptyMessage}</p>
-                </div>
-            </>
-        );
-    }
-
     return (
-        <Carousel.Root opts={{ align: "start", loop: true }}>
-            <div className="flex items-center justify-between mb-12">
-                <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
-                    {title}
-                </h2>
-                <div className="flex gap-2">
-                    <Carousel.PrevTrigger className="rounded-full p-2 border border-secondary hover:bg-primary_hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed">
-                        <ChevronLeft className="w-6 h-6 text-fg-primary" />
-                    </Carousel.PrevTrigger>
-                    <Carousel.NextTrigger className="rounded-full p-2 border border-secondary hover:bg-primary_hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed">
-                        <ChevronRight className="w-6 h-6 text-fg-primary" />
-                    </Carousel.NextTrigger>
-                </div>
+        <section>
+            <div className="mx-auto max-w-container px-4 md:px-8">
+                {hasItems ? (
+                    <Carousel.Root opts={{ align: "start", loop: true }}>
+                        <div className="flex items-center justify-between mb-12">
+                            <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
+                                {title}
+                            </h2>
+                            <div className="flex gap-2">
+                                <Carousel.PrevTrigger className="rounded-full p-2 border border-secondary hover:bg-primary_hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed">
+                                    <ChevronLeft className="w-6 h-6 text-fg-primary" />
+                                </Carousel.PrevTrigger>
+                                <Carousel.NextTrigger className="rounded-full p-2 border border-secondary hover:bg-primary_hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed">
+                                    <ChevronRight className="w-6 h-6 text-fg-primary" />
+                                </Carousel.NextTrigger>
+                            </div>
+                        </div>
+                        
+                        <Carousel.Content className="-ml-4">
+                            {children}
+                        </Carousel.Content>
+                    </Carousel.Root>
+                ) : (
+                    <>
+                        <div className="mb-12">
+                            <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
+                                {title}
+                            </h2>
+                            {subtitle && (
+                                <p className="mt-4 text-lg text-tertiary md:mt-6 md:text-xl">
+                                    {subtitle}
+                                </p>
+                            )}
+                        </div>
+                        <div className="text-center py-12">
+                            <p className="font-body text-base text-tertiary">{emptyMessage}</p>
+                        </div>
+                    </>
+                )}
             </div>
-            
-            <Carousel.Content className="-ml-4">
-                {children}
-            </Carousel.Content>
-        </Carousel.Root>
+        </section>
     );
 };
-

package/src/design_system/elements/index.tsx

@@ -157,3 +157,7 @@ export { CarouselSectionWrapper } from './carousel/carousel-section-wrapper';
 
 // Re-export combobox (still exists in select directory but not wrapped with theming)
 export { ComboBox } from './select/combobox';
+
+// Video components (no theming needed)
+export { VideoModal } from './video-modal';
+export { VideoPlayButton } from './video-play-button';

package/src/design_system/elements/video-modal.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface VideoModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  videoUrl: string;
+}
+
+export function VideoModal({ isOpen, onClose, videoUrl }: VideoModalProps) {
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div 
+      className="fixed inset-0 z-[60] flex items-center justify-center p-4 backdrop-blur-md bg-black/50"
+      onClick={onClose}
+    >
+      {/* Close button */}
+      <button
+        onClick={onClose}
+        className="absolute top-4 right-4 md:top-8 md:right-8 text-white text-4xl md:text-5xl hover:text-gray-300 z-10 transition-colors"
+        aria-label="Close video"
+      >
+        ×
+      </button>
+      
+      {/* Video container */}
+      <div 
+        className="relative w-full max-w-5xl aspect-video"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <iframe
+          src={videoUrl}
+          title="Video player"
+          className="w-full h-full rounded-lg shadow-2xl"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      </div>
+    </div>
+  );
+}
+

package/src/design_system/elements/video-play-button.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+interface VideoPlayButtonProps {
+  onClick: () => void;
+  className?: string;
+}
+
+export function VideoPlayButton({ onClick, className = '' }: VideoPlayButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={`group flex items-center justify-center w-24 h-24 md:w-32 md:h-32 rounded-full bg-black/40 backdrop-blur-sm hover:bg-black/50 transition-all hover:scale-105 ${className}`}
+      aria-label="Play video"
+    >
+      <svg
+        className="w-10 h-10 md:w-14 md:h-14 text-white group-hover:scale-110 transition-transform ml-1"
+        fill="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path d="M8 5v14l11-7z" />
+      </svg>
+    </button>
+  );
+}
+

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

@@ -1,8 +1,8 @@
 "use client";
 
-import { Fragment } from "react";
+import { Fragment, useState } from "react";
 import React from "react";
-import { PhotoWithFallback } from '../elements';
+import { PhotoWithFallback, VideoModal, VideoPlayButton } from '../elements';
 import type { WebsitePhotos } from '../../types/api/website-photos';
 
 interface HeroHomeProps {
@@ -13,6 +13,7 @@ interface HeroHomeProps {
     ctaHref?: string;
     reviews?: { rating: number; count: number };
     onEmailSubmit?: (email: string) => void;
+    videoUrl?: string;
 }
 
 export const HeroHome = ({
@@ -21,7 +22,9 @@ export const HeroHome = ({
     subhead = "",
     ctaText = "",
     ctaHref = "/contact",
+    videoUrl,
 }: HeroHomeProps) => {
+    const [showVideo, setShowVideo] = useState(false);
     
     const heroImage = {
         url: websitePhotos?.hero?.url || (websitePhotos as any)?.brand?.url || '',
@@ -54,16 +57,32 @@ export const HeroHome = ({
 
             <section>
                 <div className="mx-auto max-w-container px-4 md:px-8">
-                    <div className="w-full h-[400px] md:h-[500px] lg:h-[600px]">
+                    <div className="relative w-full h-[400px] md:h-[500px] lg:h-[600px]">
                         <PhotoWithFallback
                             photoUrl={heroImage.url}
                             photoAlt={heroImage.alt}
                             fallbackId="hero-home-brand"
                             className="w-full h-full object-cover"
                         />
+                        
+                        {/* Video play button overlay */}
+                        {videoUrl && (
+                            <div className="absolute inset-0 flex items-center justify-center">
+                                <VideoPlayButton onClick={() => setShowVideo(true)} />
+                            </div>
+                        )}
                     </div>
                 </div>
             </section>
+            
+            {/* Video modal */}
+            {videoUrl && (
+                <VideoModal 
+                    isOpen={showVideo}
+                    onClose={() => setShowVideo(false)}
+                    videoUrl={videoUrl}
+                />
+            )}
         </Fragment>
     );
 };

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

@@ -1,8 +1,8 @@
 "use client";
 
-import { Fragment, useMemo } from "react";
+import { Fragment, useMemo, useState } from "react";
 import React from "react";
-import { Button, Form, Input, PhotoWithFallback } from '../elements';
+import { Button, Form, Input, PhotoWithFallback, VideoModal, VideoPlayButton } from '../elements';
 import { cx } from '../../utils/cx';
 import { mapIcon } from '../utils/icon-mapping';
 import type { FC } from "react";
@@ -33,6 +33,7 @@ interface HeroHomeProps {
     statistics?: Statistic[];
     email_signup?: EmailSignup;
     onEmailSubmit?: (email: string) => void;
+    videoUrl?: string;
 }
 
 const AvatarsWithReview = ({ 
@@ -140,7 +141,9 @@ export const HeroHome = ({
     statistics = [],
     email_signup,
     onEmailSubmit,
+    videoUrl,
 }: HeroHomeProps) => {
+    const [showVideo, setShowVideo] = useState(false);
     
     // Get hero image from props
     const heroImage = {
@@ -241,9 +244,25 @@ export const HeroHome = ({
                             fallbackId="hero-home-image"
                             className="inset-0 h-70 w-full object-cover md:h-110 lg:absolute lg:h-full"
                         />
+                        
+                        {/* Video play button overlay */}
+                        {videoUrl && (
+                            <div className="absolute inset-0 flex items-center justify-center">
+                                <VideoPlayButton onClick={() => setShowVideo(true)} />
+                            </div>
+                        )}
                     </div>
                 </div>
             </section>
+            
+            {/* Video modal */}
+            {videoUrl && (
+                <VideoModal 
+                    isOpen={showVideo}
+                    onClose={() => setShowVideo(false)}
+                    videoUrl={videoUrl}
+                />
+            )}
         </Fragment>
     );
 };