feat: Add Google Fonts integration with FontProvider and utility functions

- Implemented FontProvider component for loading and applying Google Fonts.
- Created google-fonts utility module for managing font configurations and loading.
- Added index file for exporting font utilities and components.
- Updated timeline components to utilize new font features.
- Enhanced button styles in fullscreen and timeline controls for better UX.
- Refactored ContentDisplay component to use CSS classes for styling.
- Improved timeline scrolling behavior by disabling auto-navigation during keyboard navigation.
- Added responsive font size adjustments and utility styles for typography.
- Updated theme popover z-index for better layering.
- Introduced TypeScript configuration for development environment.
- Enhanced Vite configuration for improved development experience.

Author: gcodeprabhu

src/components/contexts/TimelineContextProvider.tsx

@@ -162,6 +162,19 @@ const TimelineContext = createContext<TimelineContextValue | null>(null);
 export interface TimelineContextProviderProps
   extends Omit<Partial<TimelinePropsModel>, 'children'> {
   children: React.ReactNode;
+  googleFonts?: {
+    fontFamily: string;
+    elements?: {
+      title?: { weight?: any; style?: any; size?: string; };
+      cardTitle?: { weight?: any; style?: any; size?: string; };
+      cardSubtitle?: { weight?: any; style?: any; size?: string; };
+      cardText?: { weight?: any; style?: any; size?: string; };
+      controls?: { weight?: any; style?: any; size?: string; };
+    };
+    weights?: any[];
+    display?: string;
+    preconnect?: boolean;
+  };
 }
 
 export const TimelineContextProvider: FunctionComponent<
@@ -361,6 +374,48 @@ export const TimelineContextProvider: FunctionComponent<
     [fontSizes],
   );
 
+  // Google Fonts integration
+  const googleFontsConfig = useMemo(() => {
+    if (!fontSizes && !props.googleFonts) return null;
+    
+    // If we have both fontSizes and googleFonts, merge them
+    if (props.googleFonts) {
+      return {
+        ...props.googleFonts,
+        elements: {
+          ...props.googleFonts.elements,
+          // Override sizes from fontSizes if provided
+          ...(memoizedFontSizes.title && {
+            title: { 
+              ...props.googleFonts.elements?.title,
+              size: memoizedFontSizes.title 
+            }
+          }),
+          ...(memoizedFontSizes.cardTitle && {
+            cardTitle: { 
+              ...props.googleFonts.elements?.cardTitle,
+              size: memoizedFontSizes.cardTitle 
+            }
+          }),
+          ...(memoizedFontSizes.cardSubtitle && {
+            cardSubtitle: { 
+              ...props.googleFonts.elements?.cardSubtitle,
+              size: memoizedFontSizes.cardSubtitle 
+            }
+          }),
+          ...(memoizedFontSizes.cardText && {
+            cardText: { 
+              ...props.googleFonts.elements?.cardText,
+              size: memoizedFontSizes.cardText 
+            }
+          }),
+        }
+      };
+    }
+    
+    return null;
+  }, [props.googleFonts, memoizedFontSizes]);
+
   const memoizedMediaSettings = useMemo(
     () => ({
       align: computedMediaAlign as 'left' | 'right' | 'center',

src/components/elements/list/list.css.ts

@@ -32,7 +32,7 @@ export const listItem = style([
     background: tokens.semantic.color.background.elevated,
     borderRadius: tokens.semantic.borderRadius.sm,
     boxShadow: tokens.semantic.shadow.card,
-    padding: tokens.semantic.spacing.sm,
+    padding: `${tokens.semantic.spacing.xs} ${tokens.semantic.spacing.sm}`, // Reduced vertical padding
     border: `1px solid ${tokens.semantic.color.border.default}`,
     transition: `all ${tokens.semantic.motion.duration.normal} ${tokens.semantic.motion.easing.standard}`,
 
@@ -42,6 +42,12 @@ export const listItem = style([
         borderColor: tokens.semantic.color.border.interactive,
         boxShadow: tokens.semantic.shadow.cardHover,
         transform: 'translateY(-1px)',
+        backgroundColor: `${tokens.semantic.color.interactive.primary}05`,
+      },
+      '&:active': {
+        transform: 'translateY(0px) scale(0.98)',
+        backgroundColor: `${tokens.semantic.color.interactive.primary}10`,
+        borderColor: tokens.semantic.color.interactive.primary,
       },
     },
   },

src/components/elements/popover/index.tsx

@@ -8,6 +8,7 @@ import React, {
   memo,
   useState,
 } from 'react';
+import ReactDOM from 'react-dom';
 import useCloseClickOutside from 'src/components/effects/useCloseClickOutside';
 import { ChevronDown, CloseIcon } from 'src/components/icons';
 import { PopOverModel } from './popover.model';
@@ -78,6 +79,11 @@ const PopOver: FunctionComponent<PopOverModel> = ({
   const [horizontalPosition, setHorizontalPosition] = useState<
     'left' | 'right' | 'center'
   >('center');
+  const [popoverPosition, setPopoverPosition] = useState({ 
+    top: 0, 
+    left: 0, 
+    width: 0 
+  });
 
   const toggleOpen = useCallback(() => {
     dispatch({ type: 'TOGGLE' });
@@ -95,40 +101,91 @@ const PopOver: FunctionComponent<PopOverModel> = ({
 
   useCloseClickOutside(ref, closePopover);
 
-  // Calculate optimal horizontal positioning
-  const calculateHorizontalPosition = useCallback(() => {
-    if (!ref.current || !popoverRef.current || $isMobile) return;
+  // Calculate optimal positioning for portal rendering
+  const calculatePopoverPosition = useCallback(() => {
+    if (!ref.current) return;
 
     const triggerRect = ref.current.getBoundingClientRect();
-    const popoverWidth = width;
     const viewportWidth = window.innerWidth;
-    const timelineContainer =
-      ref.current.closest('[data-testid="timeline"]') || document.body;
-    const containerRect = timelineContainer.getBoundingClientRect();
-
-    // Calculate space available on each side
-    const spaceLeft = triggerRect.left - containerRect.left;
-    const spaceRight = containerRect.right - triggerRect.right;
-    const spaceCenter = Math.min(spaceLeft, spaceRight);
-
-    // Choose position based on available space
-    if (popoverWidth <= spaceCenter * 2) {
-      setHorizontalPosition('center');
-    } else if (spaceLeft >= popoverWidth && spaceLeft > spaceRight) {
-      setHorizontalPosition('left');
-    } else if (spaceRight >= popoverWidth) {
-      setHorizontalPosition('right');
+    const viewportHeight = window.innerHeight;
+    const popoverWidth = $isMobile ? Math.min(320, viewportWidth * 0.9) : width;
+    
+    // Calculate horizontal position
+    let left = triggerRect.left;
+    let horizontalPos: 'left' | 'right' | 'center' = 'left';
+    
+    if ($isMobile) {
+      // Center on mobile
+      left = (viewportWidth - popoverWidth) / 2;
+      horizontalPos = 'center';
     } else {
-      setHorizontalPosition('center'); // Fallback to center with potential overflow
+      // Calculate space available on each side
+      const spaceLeft = triggerRect.left;
+      const spaceRight = viewportWidth - triggerRect.right;
+      
+      if (popoverWidth <= spaceRight) {
+        // Align with left edge of trigger
+        left = triggerRect.left;
+        horizontalPos = 'left';
+      } else if (popoverWidth <= spaceLeft) {
+        // Align with right edge of trigger
+        left = triggerRect.right - popoverWidth;
+        horizontalPos = 'right';
+      } else {
+        // Center horizontally
+        left = Math.max(16, (viewportWidth - popoverWidth) / 2);
+        horizontalPos = 'center';
+      }
+      
+      // Ensure popover doesn't go off-screen
+      left = Math.max(16, Math.min(left, viewportWidth - popoverWidth - 16));
     }
-  }, [width, $isMobile]);
+    
+    // Calculate vertical position
+    let top = triggerRect.bottom + 8; // 8px gap below trigger
+    
+    // If position === 'bottom' but there's not enough space below, try above
+    if (position === 'bottom' && top + 400 > viewportHeight) {
+      const topPosition = triggerRect.top - 408; // 400px height + 8px gap
+      if (topPosition > 16) {
+        top = topPosition;
+      }
+    } else if (position === 'top') {
+      top = Math.max(16, triggerRect.top - 408);
+    }
+    
+    // Ensure popover doesn't go above viewport
+    top = Math.max(16, top);
+    
+    setPopoverPosition({ top, left, width: popoverWidth });
+    setHorizontalPosition(horizontalPos);
+  }, [width, $isMobile, position]);
 
-  // Position calculation on layout changes
+  // Position calculation on layout changes and scroll/resize
   useLayoutEffect(() => {
     if (state.open) {
-      calculateHorizontalPosition();
+      calculatePopoverPosition();
     }
-  }, [state.open, calculateHorizontalPosition]);
+  }, [state.open, calculatePopoverPosition]);
+  
+  // Recalculate position on scroll or resize
+  useEffect(() => {
+    if (!state.open) return;
+    
+    const handlePositionUpdate = () => {
+      if (state.open) {
+        calculatePopoverPosition();
+      }
+    };
+    
+    window.addEventListener('scroll', handlePositionUpdate, { passive: true });
+    window.addEventListener('resize', handlePositionUpdate, { passive: true });
+    
+    return () => {
+      window.removeEventListener('scroll', handlePositionUpdate);
+      window.removeEventListener('resize', handlePositionUpdate);
+    };
+  }, [state.open, calculatePopoverPosition]);
 
   // Use CSS transition instead of setTimeout
   useEffect(() => {
@@ -164,40 +221,47 @@ const PopOver: FunctionComponent<PopOverModel> = ({
             {icon || <ChevronDown />}
           </span>
         </button>
-        {state.open ? (
-          <div
-            ref={popoverRef}
-            className={[
-              popoverHolder,
-              popoverHolderRecipe({
-                visible: state.isVisible,
-                position: position === 'bottom' ? 'bottom' : 'top',
-                leftMobile: !!$isMobile,
-              }),
-            ].join(' ')}
-            style={{
-              ...computeCssVarsFromTheme(theme),
-              width: $isMobile ? '90%' : `${width}px`,
-            }}
-            data-position-x={horizontalPosition}
-            role="dialog"
-            aria-modal="false"
-            aria-labelledby={placeholder ? undefined : 'popover-content'}
-          >
-            <div className={header}>
-              <button
-                className={closeButton}
-                onClick={closePopover}
-                type="button"
-                aria-label="Close menu"
-                title="Close menu"
-              >
-                <CloseIcon />
-              </button>
-            </div>
-            <MemoizedContent>{children}</MemoizedContent>
-          </div>
-        ) : null}
+        {state.open &&
+          ReactDOM.createPortal(
+            <div
+              ref={popoverRef}
+              className={[
+                popoverHolder,
+                popoverHolderRecipe({
+                  visible: state.isVisible,
+                  position: position === 'bottom' ? 'bottom' : 'top',
+                  leftMobile: !!$isMobile,
+                }),
+              ].join(' ')}
+              style={{
+                ...computeCssVarsFromTheme(theme),
+                width: `${popoverPosition.width}px`,
+                position: 'fixed',
+                zIndex: 99999,
+                left: `${popoverPosition.left}px`,
+                top: `${popoverPosition.top}px`,
+                transform: 'none',
+              }}
+              data-position-x={horizontalPosition}
+              role="dialog"
+              aria-modal="false"
+              aria-labelledby={placeholder ? undefined : 'popover-content'}
+            >
+              <div className={header}>
+                <button
+                  className={closeButton}
+                  onClick={closePopover}
+                  type="button"
+                  aria-label="Close menu"
+                  title="Close menu"
+                >
+                  <CloseIcon />
+                </button>
+              </div>
+              <MemoizedContent>{children}</MemoizedContent>
+            </div>,
+            document.body,
+          )}
       </div>
     </>
   );