property-practice-ui 0.1.4 → 0.1.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # property-practice-ui
 
+## 0.1.5
+
+### Patch Changes
+
+- 68159b7: introduction mobile responsiveness
+
 ## 0.1.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "property-practice-ui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "",
   "private": false,
   "type": "module",

package/src/atoms/Chip/Chip.tsx

@@ -0,0 +1,29 @@
+import { useMemo } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type ChipProps = {
+  text: string;
+  backgroundColor: 'gray' | 'navy' | 'transparent';
+};
+
+export const Chip = ({ text, backgroundColor }: ChipProps) => {
+  const styleMap = {
+    gray: 'bg-gray-500 text-white border-none',
+    navy: 'bg-brand-blue text-white border-none',
+    transparent: 'bg-transparent text-brand-blue border-gray-600',
+  };
+
+  const className = useMemo(
+    () => twMerge(
+      'inline-flex items-center rounded-full px-3 py-1 text-sm font-medium border',
+      styleMap[backgroundColor]
+    ),
+    [backgroundColor]
+  );
+
+  return (
+    <span className={className}>
+      {text}
+    </span>
+  );
+};

package/src/atoms/SecondaryInput/SecondaryInput.tsx

@@ -36,11 +36,12 @@ const StyledInput = styled.input<{
   $borderColor?: string;
   $focusRingColor?: Color;
 }>`
+  box-sizing: border-box;
   height: 2.75rem;
   width: 100%;
   border-radius: 6px;
   border: 1px solid ${props => props.$borderColor || '#d1d5db'};
-  background-color: ${props => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.light || '#f9fafb'};
+  background-color: ${props => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.secondary || '#f9fafb'};
   padding: 0 0.75rem;
   font-size: 15px;
   color: ${props => props.$textColor ? colors.text[props.$textColor] : colors.text.primary};
@@ -65,10 +66,11 @@ const StyledTextArea = styled.textarea<{
   $borderColor?: string;
   $focusRingColor?: Color;
 }>`
+  box-sizing: border-box;
   width: 100%;
   border-radius: 6px;
   border: 1px solid ${props => props.$borderColor || '#d1d5db'};
-  background-color: ${props => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.light || '#f9fafb'};
+  background-color: ${props => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.secondary || '#f9fafb'};
   padding: 0.75rem;
   font-size: 15px;
   color: ${props => props.$textColor ? colors.text[props.$textColor] : colors.text.primary};
@@ -92,7 +94,7 @@ export const SecondaryInput = ({
   labelColor = 'brand',
   inputTextColor = 'primary',
   placeholderColor = 'subtle',
-  backgroundColor = 'light',
+  backgroundColor = 'secondary',
   borderColor = '#d1d5db',
   focusRingColor = 'brand',
   ...rest

package/src/molecules/Address/Address.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+import { HiMinus, HiPlus } from 'react-icons/hi2';
 import styled from 'styled-components';
 import { Header, TextButton } from '../../atoms';
 import { colors } from '../../tokens/colors';
@@ -8,9 +10,81 @@ type Variant = (typeof variants)[number];
 const AddressContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 1rem;
   background-color: transparent;
   padding: 2rem;
+  
+  /* Desktop: normal spacing */
+  @media (min-width: 768px) {
+    gap: 1rem;
+  }
+  
+  /* Mobile: no gap, handled by collapse */
+  @media (max-width: 767px) {
+    padding: 1rem;
+    gap: 0;
+  }
+`;
+
+const HeaderWrapper = styled.div<{ $isClickable: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  /* Desktop: not clickable */
+  @media (min-width: 768px) {
+    cursor: default;
+  }
+  
+  /* Mobile: clickable */
+  @media (max-width: 767px) {
+    cursor: ${props => props.$isClickable ? 'pointer' : 'default'};
+    padding: 0.5rem 0;
+    user-select: none;
+  }
+`;
+
+const ToggleIcon = styled.div<{ variant: Variant }>`
+  display: none;
+  
+  /* Only show on mobile */
+  @media (max-width: 767px) {
+    display: flex;
+    align-items: center;
+    font-size: 1.5rem;
+    
+    color: ${(props) => {
+      switch (props.variant) {
+        case 'primary':
+          return colors.text.primary;
+        case 'inverse':
+          return colors.text.secondary;
+        case 'subtle':
+          return colors.text.subtle;
+        default:
+          return colors.text.primary;
+      }
+    }};
+  }
+`;
+
+const CollapseContent = styled.div<{ $isOpen: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  
+  /* Desktop: always visible */
+  @media (min-width: 768px) {
+    display: flex;
+  }
+  
+  /* Mobile: collapsible */
+  @media (max-width: 767px) {
+    max-height: ${props => props.$isOpen ? '500px' : '0'};
+    opacity: ${props => props.$isOpen ? '1' : '0'};
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    padding-top: ${props => props.$isOpen ? '1rem' : '0'};
+  }
 `;
 
 const InfoSection = styled.div`
@@ -61,6 +135,8 @@ export const Address = ({
   onDirectionsClick,
   variant = 'primary',
 }: AddressProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
   const handleDirectionsClick = () => {
     if (onDirectionsClick) {
       onDirectionsClick();
@@ -104,31 +180,42 @@ export const Address = ({
 
   return (
     <AddressContainer>
-      <Header variant="h1" color={getHeaderVariant()}>
-        {title}
-      </Header>
-      <InfoSection>
-        {phone && (
-          <InfoText variant={variant}>{phone}</InfoText>
-        )}
-        {email && (
-          <InfoText variant={variant} $bold>{email.toUpperCase()}</InfoText>
-        )}
-        {addressLines.map((line, index) => (
-          <InfoText key={index} variant={variant}>
-            {line}
-          </InfoText>
-        ))}
-      </InfoSection>
-      <ButtonWrapper>
-        <TextButton
-          text={directionsText}
-          onClick={handleDirectionsClick}
-          bgVariant={getButtonBgVariant()}
-          textVariant={getButtonTextVariant()}
-          uppercase={true}
-        />
-      </ButtonWrapper>
+      <HeaderWrapper 
+        $isClickable={true}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <Header variant="h1" color={getHeaderVariant()}>
+          {title}
+        </Header>
+        <ToggleIcon variant={variant}>
+          {isOpen ? <HiMinus /> : <HiPlus />}
+        </ToggleIcon>
+      </HeaderWrapper>
+      
+      <CollapseContent $isOpen={isOpen}>
+        <InfoSection>
+          {phone && (
+            <InfoText variant={variant}>{phone}</InfoText>
+          )}
+          {email && (
+            <InfoText variant={variant} $bold>{email.toUpperCase()}</InfoText>
+          )}
+          {addressLines.map((line, index) => (
+            <InfoText key={index} variant={variant}>
+              {line}
+            </InfoText>
+          ))}
+        </InfoSection>
+        <ButtonWrapper>
+          <TextButton
+            text={directionsText}
+            onClick={handleDirectionsClick}
+            bgVariant={getButtonBgVariant()}
+            textVariant={getButtonTextVariant()}
+            uppercase={true}
+          />
+        </ButtonWrapper>
+      </CollapseContent>
     </AddressContainer>
   );
 };

package/src/molecules/CTAContainer/CTAContainer.tsx

@@ -12,8 +12,13 @@ const Container = styled.div<{ variant: Variant }>`
   flex-direction: column;
   gap: 1.5rem;
   padding: 3rem 2rem;
-  
   max-width: 500px;
+  
+  /* Mobile adjustments */
+  @media (max-width: 767px) {
+    padding: 2rem 1rem;
+    max-width: 100%;
+  }
 `;
 
 const Header = styled.h1<{ textColor: TextColor }>`
@@ -22,6 +27,15 @@ const Header = styled.h1<{ textColor: TextColor }>`
   font-weight: 700;
   line-height: 1.2;
   color: ${(props) => colors.text[props.textColor]};
+  
+  /* Responsive font size */
+  @media (max-width: 767px) {
+    font-size: 2rem;
+  }
+  
+  @media (max-width: 480px) {
+    font-size: 1.75rem;
+  }
 `;
 
 const Description = styled.p<{ textColor: TextColor }>`
@@ -29,19 +43,31 @@ const Description = styled.p<{ textColor: TextColor }>`
   font-size: 1.125rem;
   line-height: 1.6;
   color: ${(props) => colors.text[props.textColor]};
+  
+  /* Responsive font size */
+  @media (max-width: 767px) {
+    font-size: 1rem;
+  }
 `;
 
 const ButtonGroup = styled.div`
   display: flex;
   gap: 1rem;
   align-items: center;
+  
+  /* Stack vertically on mobile */
+  @media (max-width: 767px) {
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+  }
 `;
 
 interface CTAContainerProps {
   header: string;
   description: string;
   primaryButtonText: string;
-  secondaryButtonText?: string; // Made optional
+  secondaryButtonText?: string;
   onPrimaryClick?: () => void;
   onSecondaryClick?: () => void;
   variant?: Variant;

package/src/molecules/ContentCard/ContentCard.tsx

@@ -15,6 +15,11 @@ const Container = styled.div`
   padding: 1.5rem;
   border-radius: 8px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+  
+  @media (max-width: 767px) {
+    width: 70vw;
+  }
 `;
 
 const ThumbnailWrapper = styled.div<{ thumbnailBgColor: BackgroundColor }>`

package/src/molecules/ExtendedButton/ExtendedButton.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps } from 'react';
+import { ExtendedButton as Component } from './ExtendedButton';
+
+const meta: Meta = {
+  title: 'Molecules/ExtendedButton',
+  component: Component,
+};
+
+export default meta;
+
+export const ExtendedButton: StoryObj<
+  Pick<
+    ComponentProps<typeof Component>,
+    'text' | 'onClick' | 'bgColor' | 'textColor'| 'arrowBgColor'
+  >
+> = {
+  args: {
+    text: 'Register For Free',
+    bgColor: 'bg-blue-800',
+    textColor: 'text-white',
+    arrowBgColor: 'bg-blue-400'
+  },
+  argTypes: {
+    text: {control: 'text'},
+    onClick: {action: 'clicked'},
+    bgColor: { control: 'text'},
+    textColor: { control: 'text'},
+    arrowBgColor: { control: 'text'}
+  },
+};

package/src/molecules/ExtendedButton/ExtendedButton.tsx

@@ -0,0 +1,29 @@
+import { ArrowButton } from "../../atoms";
+
+interface ExtendedButtonProps {
+  text: string;
+  onClick?: () => void;
+  bgColor?: string;
+  arrowBgColor?: string;
+  textColor?: string;
+}
+
+export const ExtendedButton = ({ 
+  text, 
+  onClick,
+  bgColor = "bg-blue-800",
+  arrowBgColor = "bg-blue-400",
+  textColor = "text-white"
+}: ExtendedButtonProps) => {
+  return (
+    <button
+      className={`flex items-center h-10 ${bgColor} hover:opacity-90 transition duration-200`}
+      onClick={onClick}
+    >
+      <ArrowButton asChild bgColor={arrowBgColor} textColor={textColor} />
+      <span className={`px-4 ${textColor} text-sm font-semibold tracking-wide uppercase`}>
+        {text}
+      </span>
+    </button>
+  );
+};

package/src/molecules/ProductInfo/ProductInfo.tsx

@@ -9,6 +9,13 @@ const Container = styled.div`
   gap: 1.5rem;
   align-items: center;
   max-width: 600px;
+  
+  /* Mobile: stack vertically */
+  @media (max-width: 767px) {
+    flex-direction: column;
+    align-items: flex-start;
+    max-width: 100%;
+  }
 `;
 
 const ImageWrapper = styled.div`
@@ -23,12 +30,23 @@ const ImageWrapper = styled.div`
     height: 100%;
     object-fit: cover;
   }
+  
+  /* Mobile: full width */
+  @media (max-width: 767px) {
+    width: 100%;
+    height: 200px;
+  }
 `;
 
 const ContentWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  
+  /* Mobile: full width */
+  @media (max-width: 767px) {
+    width: 100%;
+  }
 `;
 
 const LogoWrapper = styled.div`

package/src/molecules/SideNav/SideNav.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ComponentProps } from 'react';
+import { ComponentProps, useState } from 'react';
 import { SideNav as Component } from './SideNav';
 
 const meta: Meta = {
@@ -9,7 +9,38 @@ const meta: Meta = {
 
 export default meta;
 
-export const SideNav: StoryObj<Omit<ComponentProps<typeof Component>, 'onBackToTop'>> = {
+const SideNavWithState = (args: any) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Component
+      {...args}
+      isOpen={isOpen}
+      onClose={() => setIsOpen((prev) => !prev)}
+      onBackToTop={() => console.log('back-to-top clicked')}
+      mobileButtons={
+        args.showMobileButtons
+          ? [
+              {
+                text: 'Settings',
+                onClick: () => console.log('settings clicked'),
+              },
+              { text: 'Logout', onClick: () => console.log('logout clicked') },
+            ]
+          : []
+      }
+    />
+  );
+};
+
+export const SideNav: StoryObj<
+  Omit<
+    ComponentProps<typeof Component>,
+    'onBackToTop' | 'onClose' | 'isOpen' | 'mobileButtons'
+  > & {
+    showMobileButtons: boolean;
+  }
+> = {
   args: {
     items: [
       { label: 'Home', href: '#home' },
@@ -18,6 +49,7 @@ export const SideNav: StoryObj<Omit<ComponentProps<typeof Component>, 'onBackToT
       { label: 'Contact', href: '#contact' },
     ],
     activeItem: '#home',
+    // Desktop variants
     triangleColor: 'primary',
     dividerColor: 'primary',
     activeTextBgVariant: 'transparent',
@@ -26,39 +58,157 @@ export const SideNav: StoryObj<Omit<ComponentProps<typeof Component>, 'onBackToT
     inactiveTextVariant: 'subtle',
     backToTopBgVariant: 'transparent',
     backToTopTextVariant: 'subtle',
+    // Mobile variants
+    mobileBgVariant: 'primary',
+    borderVariant: 'primary',
+    closeButtonVariant: 'secondary',
+    showMobileButtons: false,
   },
   argTypes: {
+    // Desktop
     triangleColor: {
       control: 'select',
-      options: ['primary', 'secondary', 'hover', 'active', 'error', 'focus', 'brand'],
+      options: [
+        'primary',
+        'secondary',
+        'hover',
+        'active',
+        'error',
+        'focus',
+        'brand',
+      ],
     },
     dividerColor: {
       control: 'select',
-      options: ['primary', 'secondary', 'hover', 'active', 'error', 'focus', 'brand'],
+      options: [
+        'primary',
+        'secondary',
+        'hover',
+        'active',
+        'error',
+        'focus',
+        'brand',
+      ],
     },
     activeTextBgVariant: {
       control: 'select',
-      options: ['primary', 'secondary', 'tertiary', 'subtle', 'blue', 'brand', 'light', 'transparent'],
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'subtle',
+        'blue',
+        'brand',
+        'light',
+        'transparent',
+      ],
     },
     activeTextVariant: {
       control: 'select',
-      options: ['brand', 'primary', 'secondary', 'tertiary', 'subtle', 'light', 'error', 'blue'],
+      options: [
+        'brand',
+        'primary',
+        'secondary',
+        'tertiary',
+        'subtle',
+        'light',
+        'error',
+        'blue',
+      ],
     },
     inactiveTextBgVariant: {
       control: 'select',
-      options: ['primary', 'secondary', 'tertiary', 'subtle', 'blue', 'brand', 'light', 'transparent'],
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'subtle',
+        'blue',
+        'brand',
+        'light',
+        'transparent',
+      ],
     },
     inactiveTextVariant: {
       control: 'select',
-      options: ['brand', 'primary', 'secondary', 'tertiary', 'subtle', 'light', 'error', 'blue'],
+      options: [
+        'brand',
+        'primary',
+        'secondary',
+        'tertiary',
+        'subtle',
+        'light',
+        'error',
+        'blue',
+      ],
     },
     backToTopBgVariant: {
       control: 'select',
-      options: ['primary', 'secondary', 'tertiary', 'subtle', 'blue', 'brand', 'light', 'transparent'],
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'subtle',
+        'blue',
+        'brand',
+        'light',
+        'transparent',
+      ],
     },
     backToTopTextVariant: {
       control: 'select',
-      options: ['brand', 'primary', 'secondary', 'tertiary', 'subtle', 'light', 'error', 'blue'],
+      options: [
+        'brand',
+        'primary',
+        'secondary',
+        'tertiary',
+        'subtle',
+        'light',
+        'error',
+        'blue',
+      ],
+    },
+    // Mobile
+    mobileBgVariant: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'subtle',
+        'blue',
+        'brand',
+        'light',
+        'transparent',
+      ],
+    },
+    borderVariant: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'hover',
+        'active',
+        'error',
+        'focus',
+        'brand',
+      ],
+    },
+    closeButtonVariant: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'hover',
+        'active',
+        'error',
+        'focus',
+        'brand',
+      ],
+    },
+    showMobileButtons: {
+      control: 'boolean',
     },
   },
-};
+  render: SideNavWithState,
+};