property-practice-ui 0.1.4 → 0.2.0

package/src/molecules/SideNav/SideNav.tsx

@@ -1,18 +1,85 @@
 import styled from 'styled-components';
-import { TextButton } from "../../atoms";
+import { ExtendedButton, TextButton } from "../../atoms";
 import { colors } from '../../tokens/colors';
 
 type BorderColor = keyof typeof colors.border;
+type BgColor = keyof typeof colors.background;
 
-const StyledNav = styled.nav`
+const Backdrop = styled.div<{ $isOpen: boolean }>`
+  display: none;
+  
+  @media (max-width: 767px) {
+    display: ${props => props.$isOpen ? 'block' : 'none'};
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 9998;
+  }
+`;
+
+const BackToTopWrapper = styled.div`
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+
+const StyledNav = styled.nav<{ 
+  $isOpen: boolean;
+  $mobileBgVariant: BgColor;
+  $borderVariant: BorderColor;
+}>`
   width: 195px;
-  background-color: #ffffff;
-  border-right: 1px solid #e5e7eb;
   display: flex;
   flex-direction: column;
   min-height: 500px;
   height: 100vh;
   padding-bottom: 15px;
+  
+  @media (min-width: 768px) {
+    position: relative;
+    background-color: #ffffff;
+    border-right: 1px solid #e5e7eb;
+  }
+  
+  @media (max-width: 767px) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 9999;
+    background-color: ${props => colors.background[props.$mobileBgVariant]};
+    border-right: 1px solid ${props => colors.border[props.$borderVariant]};
+    transform: translateX(${props => props.$isOpen ? '0' : '-100%'});
+    transition: transform 0.3s ease-in-out;
+    box-shadow: ${props => props.$isOpen ? '2px 0 8px rgba(0, 0, 0, 0.15)' : 'none'};
+  }
+`;
+
+const CloseButton = styled.button<{ $textVariant: BorderColor }>`
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  color: ${props => colors.border[props.$textVariant]};
+  
+  &:hover {
+    opacity: 0.7;
+  }
+`;
+
+const MobileHeader = styled.div`
+  display: none;
+  
+  @media (max-width: 767px) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+  }
 `;
 
 const NavList = styled.ul`
@@ -23,6 +90,20 @@ const NavList = styled.ul`
   padding: 0;
 `;
 
+const DesktopNavList = styled(NavList)`
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+
+const MobileNavList = styled(NavList)`
+  display: none;
+  
+  @media (max-width: 767px) {
+    display: flex;
+  }
+`;
+
 const NavItem = styled.li`
   display: flex;
 `;
@@ -67,15 +148,51 @@ const Spacer = styled.div`
   flex-grow: 1;
 `;
 
-interface NavItem {
+const DesktopOnlySpacer = styled(Spacer)`
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+
+const MobileButtonsWrapper = styled.div`
+  display: none;
+  
+  @media (max-width: 767px) {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    padding: 0 1rem;
+    margin-top: auto;
+    margin-bottom: 20px;
+  }
+`;
+
+interface NavItemData {
   label: string;
   href: string;
 }
 
 interface SideNavProps {
-  items: NavItem[];
+  logo?: React.ReactNode;
+  items: NavItemData[];
   activeItem?: string;
   onBackToTop?: () => void;
+  isOpen?: boolean;
+  onClose?: () => void;
+  mobileButtons?: Array<{
+    text: string;
+    onClick: () => void;
+    bgVariant?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'blue' | 'brand' | 'light' | 'transparent';
+    textVariant?: 'brand' | 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'light' | 'error' | 'blue';
+    arrowButton?: 'blue'
+  }>;
+  mobileBgVariant?: BgColor;
+  borderVariant?: BorderColor;
+  closeButtonVariant?: BorderColor;
+  mobileActiveTextBgVariant?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'blue' | 'brand' | 'light' | 'transparent';
+  mobileActiveTextVariant?: 'brand' | 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'light' | 'error' | 'blue';
+  mobileInactiveTextBgVariant?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'blue' | 'brand' | 'light' | 'transparent';
+  mobileInactiveTextVariant?: 'brand' | 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'light' | 'error' | 'blue';
   triangleColor?: BorderColor;
   dividerColor?: BorderColor;
   activeTextBgVariant?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'blue' | 'brand' | 'light' | 'transparent';
@@ -87,11 +204,22 @@ interface SideNavProps {
 }
 
 export const SideNav = ({ 
+  logo,
   items, 
-  activeItem, 
-  onBackToTop, 
+  activeItem,
+  onBackToTop,
+  isOpen = true, 
+  onClose,
+  mobileButtons = [],
+  mobileBgVariant = 'tertiary',
+  borderVariant = 'primary',
+  closeButtonVariant = 'light',
+  mobileActiveTextBgVariant = 'transparent',
+  mobileActiveTextVariant = 'light',
+  mobileInactiveTextBgVariant = 'transparent',
+  mobileInactiveTextVariant= 'light',
   triangleColor = 'primary',
-  dividerColor = 'primary',
+  dividerColor = 'light',
   activeTextBgVariant = 'transparent',
   activeTextVariant = 'brand',
   inactiveTextBgVariant = 'transparent',
@@ -99,42 +227,89 @@ export const SideNav = ({
   backToTopBgVariant = 'transparent',
   backToTopTextVariant = 'subtle',
 }: SideNavProps) => {
+  const renderNavItems = (isMobile: boolean) => items.map((item) => {
+    const isActive = activeItem === item.href;
+    return (
+      <NavItem key={item.href}>
+        <NavLink href={item.href} $isActive={isActive}>
+          {isActive ? <ActiveTriangle triangleColor={triangleColor} /> : <InactiveSpacer />}
+          <TextButton
+            asChild
+            text={item.label}
+            bgVariant={isActive 
+              ? (isMobile && mobileActiveTextBgVariant ? mobileActiveTextBgVariant : activeTextBgVariant)
+              : (isMobile && mobileInactiveTextBgVariant ? mobileInactiveTextBgVariant : inactiveTextBgVariant)
+            }
+            textVariant={isActive
+              ? (isMobile && mobileActiveTextVariant ? mobileActiveTextVariant : activeTextVariant)
+              : (isMobile && mobileInactiveTextVariant ? mobileInactiveTextVariant : inactiveTextVariant)
+            }
+            uppercase={false}
+            bold={isActive}
+          />
+        </NavLink>
+      </NavItem>
+    );
+  });
+
   return (
-    <StyledNav>
-      <Spacer />
-      <NavList>
-        {items.map((item) => {
-          const isActive = activeItem === item.href;
-          return (
-            <NavItem key={item.href}>
-              <NavLink href={item.href} $isActive={isActive}>
-                {isActive ? <ActiveTriangle triangleColor={triangleColor} /> : <InactiveSpacer />}
-                
-                <TextButton
-                  asChild
-                  text={item.label}
-                  bgVariant={isActive ? activeTextBgVariant : inactiveTextBgVariant}
-                  textVariant={isActive ? activeTextVariant : inactiveTextVariant}
-                  uppercase={false}
-                  bold={isActive}
+    <>
+      <Backdrop $isOpen={isOpen} onClick={onClose} />
+      <StyledNav 
+        $isOpen={isOpen}
+        $mobileBgVariant={mobileBgVariant}
+        $borderVariant={borderVariant}
+      >
+        <MobileHeader>
+          {logo}
+          <CloseButton onClick={onClose} aria-label="Close menu" $textVariant={closeButtonVariant}>
+            ✕
+          </CloseButton>
+        </MobileHeader>
+        
+        <DesktopOnlySpacer />
+        
+        {/* Desktop nav */}
+        <DesktopNavList>
+          {renderNavItems(false)}
+        </DesktopNavList>
+
+        {/* Mobile nav */}
+        <MobileNavList>
+          {renderNavItems(true)}
+        </MobileNavList>
+
+        <Divider dividerColor={dividerColor} />
+        <Spacer />
+
+        {mobileButtons.length > 0 && (
+          <>
+            <Divider dividerColor={dividerColor} />
+            <MobileButtonsWrapper>
+              {mobileButtons.map((button, index) => (
+                <ExtendedButton
+                  key={index}
+                  text={button.text}
+                  onClick={button.onClick}
+                  textBgVariant={button.bgVariant || 'transparent'}
+                  textVariant={button.textVariant || 'subtle'}
+                  arrowVariant={button.arrowButton || 'blue'}
                 />
-              </NavLink>
-            </NavItem>
-          );
-        })}
-      </NavList>
-
-      <Divider dividerColor={dividerColor} />
-
-      <Spacer />
-
-      <TextButton
-        text="Back to top"
-        onClick={onBackToTop}
-        bgVariant={backToTopBgVariant}
-        textVariant={backToTopTextVariant}
-        uppercase={false}
-      />
-    </StyledNav>
+              ))}
+            </MobileButtonsWrapper>            
+          </>
+        )}
+
+        <BackToTopWrapper>
+          <TextButton
+            text="Back to top"
+            onClick={onBackToTop}
+            bgVariant={backToTopBgVariant}
+            textVariant={backToTopTextVariant}
+            uppercase={false}
+          />
+        </BackToTopWrapper>
+      </StyledNav>
+    </>
   );
 };

package/src/organism/ContactForm/ContactForm.tsx

@@ -9,17 +9,28 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${spaces[4]};
+  width: 100%;
+  
   @media (max-width: ${breakpoints.sm}) {
     gap: ${spaces[2]};
   }
 `;
+
 const NameContainer = styled.div`
   display: flex;
   gap: ${spaces[4]};
+  flex: 1;
+  min-width: 0;
+  
   @media (max-width: ${breakpoints.sm}) {
+    flex-direction: column;
     gap: ${spaces[2]};
   }
-  flex: 1;
+  
+  & > * {
+    flex: 1;
+    min-width: 0;
+  }
 `;
 
 export const ContactForm = ({}: ContactFormProps) => {
@@ -51,4 +62,4 @@ export const ContactForm = ({}: ContactFormProps) => {
       />
     </Container>
   );
-};
+};

package/src/organism/FeatureCarousel/FeatureCarousel.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { HiArrowLeft, HiArrowRight } from 'react-icons/hi2';
 import styled from 'styled-components';
 import { ContentCard } from '../../molecules';
@@ -7,26 +7,56 @@ import { colors } from '../../tokens/colors';
 type TextColor = keyof typeof colors.text;
 type BackgroundColor = keyof typeof colors.background;
 
+// REMOVE the useRef and handler functions from here - they were at module level
+
 const CarouselContainer = styled.div`
-  width: 1000px;
+  width: 100%;
   overflow: hidden;
   position: relative;
-  margin: 0 auto;
 `;
 
 const CardsWrapper = styled.div`
   display: flex;
   gap: 1.5rem;
-  overflow-x: hidden;
-  scroll-behavior: smooth;
   padding: 1rem 0;
+  
+  /* Desktop: controlled by JS */
+  @media (min-width: 768px) {
+    overflow-x: hidden;
+  }
+  
+  /* Mobile: native scroll with snap */
+  @media (max-width: 767px) {
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 `;
 
 const CardContainer = styled.div<{ $translateX: number }>`
   display: flex;
   gap: 1.5rem;
-  transform: translateX(${props => props.$translateX}px);
-  transition: transform 0.3s ease-in-out;
+  
+  /* Desktop: transform animation */
+  @media (min-width: 768px) {
+    transform: translateX(${props => props.$translateX}px);
+    transition: transform 0.3s ease-in-out;
+  }
+  
+  /* Mobile: natural flow */
+  @media (max-width: 767px) {
+    transform: none;
+    
+    & > * {
+      scroll-snap-align: center;
+      flex-shrink: 0;
+    }
+  }
 `;
 
 const NavigationWrapper = styled.div`
@@ -50,6 +80,10 @@ const NavButton = styled.button<{ $disabled?: boolean; navColor: TextColor }>`
   justify-content: center;
   transition: all 0.2s;
 
+  @media (max-width: 767px) {
+    display: none;
+  }
+
   &:hover {
     opacity: ${props => props.$disabled ? 1 : 0.8};
   }
@@ -85,7 +119,7 @@ interface CarouselProps {
   indicatorColor?: TextColor;
 }
 
-export const FeatureCarousel = ({ 
+export const FeatureCarousel = ({
   cards,
   cardTitleColor = 'brand',
   cardDescriptionVariant = 'primary',
@@ -95,25 +129,74 @@ export const FeatureCarousel = ({
   indicatorColor = 'brand',
 }: CarouselProps) => {
   const [currentIndex, setCurrentIndex] = useState(0);
-  const cardWidth = 284;
+  const [cardsToShow, setCardsToShow] = useState(3);
+  const [cardWidth, setCardWidth] = useState(284);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // ADD touch refs here, inside the component
+  const touchStartX = useRef(0);
+  const touchEndX = useRef(0);
+
   const gap = 24;
-  const cardsToShow = 3;
+
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+
+      const containerWidth = entry.contentRect.width;
+      const count = Math.floor((containerWidth + gap) / (284 + gap));
+      const clamped = Math.max(1, count);
+
+      // On mobile, card width matches container
+      if (clamped === 1) {
+        setCardWidth(containerWidth);
+      } else {
+        setCardWidth(284);
+      }
+
+      setCardsToShow(clamped);
+    });
+
+    if (containerRef.current) observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
+
+  const needsCarousel = cards.length > cardsToShow;
   const maxIndex = Math.max(0, cards.length - cardsToShow);
+  const translateX = -currentIndex * (cardsToShow === 1 ? cardWidth : (cardWidth + gap));
 
-  const handlePrev = () => {
-    setCurrentIndex(prev => Math.max(0, prev - 1));
-  };
+  const handlePrev = () => setCurrentIndex(prev => Math.max(0, prev - 1));
+  const handleNext = () => setCurrentIndex(prev => Math.min(maxIndex, prev + 1));
 
-  const handleNext = () => {
-    setCurrentIndex(prev => Math.min(maxIndex, prev + 1));
+  // ADD touch handlers here, after handlePrev/handleNext
+  const handleTouchStart = (e: React.TouchEvent) => {
+    if (!e.touches[0]) return;
+    touchStartX.current = e.touches[0].clientX;
   };
 
-  const translateX = -currentIndex * (cardWidth + gap);
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    if (!e.changedTouches[0]) return;
+    touchEndX.current = e.changedTouches[0].clientX;
+    const diff = touchStartX.current - touchEndX.current;
+
+    if (Math.abs(diff) < 50) return;
+
+    if (diff > 0) {
+      handleNext();
+    } else {
+      handlePrev();
+    }
+  };
 
   return (
-    <CarouselContainer>
+    <CarouselContainer
+      ref={containerRef}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+    >
       <CardsWrapper>
-        <CardContainer $translateX={translateX}>
+        <CardContainer $translateX={needsCarousel ? translateX : 0}>
           {cards.map((card, index) => (
             <ContentCard
               key={index}
@@ -130,33 +213,35 @@ export const FeatureCarousel = ({
         </CardContainer>
       </CardsWrapper>
 
-      <NavigationWrapper>
-        <NavButton 
-          onClick={handlePrev} 
-          $disabled={currentIndex === 0}
-          navColor={navButtonColor}
-        >
-          <HiArrowLeft size={24} />
-        </NavButton>
-        
-        <Indicators>
-          {Array.from({ length: maxIndex + 1 }).map((_, index) => (
-            <Indicator 
-              key={index} 
-              $active={index === currentIndex}
-              indicatorColor={indicatorColor}
-            />
-          ))}
-        </Indicators>
-
-        <NavButton 
-          onClick={handleNext} 
-          $disabled={currentIndex === maxIndex}
-          navColor={navButtonColor}
-        >
-          <HiArrowRight size={24} />
-        </NavButton>
-      </NavigationWrapper>
+      {needsCarousel && (
+        <NavigationWrapper>
+          <NavButton
+            onClick={handlePrev}
+            $disabled={currentIndex === 0}
+            navColor={navButtonColor}
+          >
+            <HiArrowLeft size={24} />
+          </NavButton>
+
+          <Indicators>
+            {Array.from({ length: maxIndex + 1 }).map((_, index) => (
+              <Indicator
+                key={index}
+                $active={index === currentIndex}
+                indicatorColor={indicatorColor}
+              />
+            ))}
+          </Indicators>
+
+          <NavButton
+            onClick={handleNext}
+            $disabled={currentIndex === maxIndex}
+            navColor={navButtonColor}
+          >
+            <HiArrowRight size={24} />
+          </NavButton>
+        </NavigationWrapper>
+      )}
     </CarouselContainer>
   );
 };

package/src/organism/Footer/Footer.tsx

@@ -126,7 +126,7 @@ interface SocialLink {
   ariaLabel: string;
 }
 
-interface LegalLink {
+interface LegalLinkData {
   text: string;
   url: string;
 }
@@ -139,7 +139,7 @@ interface FooterProps {
   onSecondaryClick?: () => void;
   addresses: AddressData[];
   socialLinks: SocialLink[];
-  legalLinks: LegalLink[];
+  legalLinks: LegalLinkData[];
   copyrightText: string;
   variant?: Variant;
   primaryArrowVariant?: 'brand' | 'teal' | 'blue';