@shohojdhara/atomix 0.2.4 → 0.2.5

package/src/components/Footer/Footer.tsx

@@ -4,6 +4,10 @@ import { useFooter } from '../../lib/composables/useFooter';
 import { Button } from '../Button';
 import { Input, Form } from '../Form';
 import { FooterSocialLink } from './FooterSocialLink';
+import { Grid, GridCol } from '../../layouts/Grid';
+import { FooterSection } from './FooterSection';
+import AtomixGlass from '../AtomixGlass/AtomixGlass';
+import { AtomixGlassProps } from '../../lib/types/components';
 
 /**
  * Footer component provides a comprehensive footer section with multiple layout options,
@@ -53,6 +57,7 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
       children,
       className = '',
       disabled = false,
+      glass,
       ...props
     },
     ref
@@ -79,14 +84,80 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
       className,
     });
 
-    return (
-      <footer ref={ref} className={footerClass} {...props}>
-        <div className={containerClass}>
+    // Calculate grid column sizes based on layout
+    const getGridColumnSizes = () => {
+      switch (layout) {
+        case 'columns':
+          // For columns layout, we have 3 columns (brand, content, newsletter)
+          return {
+            brand: 4,
+            content: !showNewsletter ? 8 : 4,
+            newsletter: !showNewsletter ? 0 : 4,
+          };
+        case 'centered':
+          // For centered layout, brand takes full width, content and newsletter are centered
+          return { brand: 12, content: 12, newsletter: !showNewsletter ? 0 : 12 };
+        case 'minimal':
+          // For minimal layout, everything takes full width
+          return { brand: 12, content: 12, newsletter: !showNewsletter ? 0 : 12 };
+        case 'stacked':
+          // For stacked layout, everything takes full width but stacked vertically
+          return { brand: 12, content: 12, newsletter: !showNewsletter ? 0 : 12 };
+        case 'flexible':
+          // For flexible layout, adjust based on content
+          return { brand: 'auto', content: 'auto', newsletter: 'auto' };
+        case 'sidebar':
+          // For sidebar layout, brand on left, content and newsletter on right
+          return {
+            brand: 3,
+            content: !showNewsletter ? 9 : 9,
+            newsletter: !showNewsletter ? 0 : 9,
+          };
+        case 'wide':
+          // For wide layout, content takes more space
+          return {
+            brand: 3,
+            content: !showNewsletter ? 6 : 6,
+            newsletter: !showNewsletter ? 0 : 3,
+          };
+        default:
+          return {
+            brand: 4,
+            content: !showNewsletter ? 8 : 4,
+            newsletter: !showNewsletter ? 0 : 4,
+          };
+      }
+    };
+
+    const columnSizes = getGridColumnSizes();
+
+    // Calculate responsive column sizes
+    const getResponsiveColumnProps = (columnType: 'brand' | 'content' | 'newsletter') => {
+      const baseMd =
+        layout === 'columns' || layout === 'sidebar' || layout === 'wide'
+          ? columnSizes[columnType]
+          : 12;
+
+      // For flexible layout, we want auto-sizing
+      if (layout === 'flexible' && columnSizes[columnType] === 'auto') {
+        return { xs: 12, sm: true, md: true };
+      }
+
+      // For other layouts, we use specific sizes
+      return { xs: 12, md: baseMd };
+    };
+
+    const footerContent = (
+      <div className={containerClass}>
           {/* Main Footer Content */}
-          <div className={sectionsClass}>
+          <Grid
+            className={sectionsClass}
+            alignItems="start"
+            justifyContent={layout === 'centered' ? 'center' : undefined}
+          >
             {/* Brand Section */}
             {(brand || brandLogo || brandDescription) && (
-              <div className={brandClass}>
+              <GridCol {...(getResponsiveColumnProps('brand') as any)} className={brandClass}>
                 {brandLogo && (
                   <div className="c-footer__brand-logo">
                     {typeof brandLogo === 'string' ? (
@@ -102,12 +173,10 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
                   </div>
                 )}
                 {brandDescription && (
-                  <div className="c-footer__brand-description">
-                    {brandDescription}
-                  </div>
+                  <div className="c-footer__brand-description">{brandDescription}</div>
                 )}
                 {socialLinks.length > 0 && (
-                  <div className="c-footer__social">
+                  <div className="c-footer__social" data-testid="footer-social-links">
                     {socialLinks.map((link, index) => (
                       <FooterSocialLink
                         key={`${link.platform}-${index}`}
@@ -120,29 +189,55 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
                     ))}
                   </div>
                 )}
-              </div>
+              </GridCol>
             )}
 
             {/* Footer Sections */}
             {children && (
-              <div className="c-footer__sections">
-                {children}
-              </div>
+              <GridCol
+                {...(getResponsiveColumnProps('content') as any)}
+                className="c-footer__content"
+              >
+                <Grid
+                  className="c-footer__sections"
+                  alignItems={layout === 'centered' || layout === 'stacked' ? 'center' : undefined}
+                >
+                  {React.Children.map(children, child => {
+                    // Check if the child is a valid React element
+                    if (React.isValidElement(child)) {
+                      console.log(
+                        'Footer - passing showNewsletter:',
+                        showNewsletter,
+                        typeof showNewsletter
+                      );
+                      // Clone the element and pass the showNewsletter prop
+                      return React.cloneElement(child, { showNewsletter } as any);
+                    }
+                    return child;
+                  })}
+                </Grid>
+              </GridCol>
             )}
 
             {/* Newsletter Section */}
             {showNewsletter && (
-              <div className="c-footer__newsletter">
+              <GridCol
+                {...(getResponsiveColumnProps('newsletter') as any)}
+                className="c-footer__newsletter"
+              >
                 <h4 className="c-footer__newsletter-title">{newsletterTitle}</h4>
                 {newsletterDescription && (
                   <p className="c-footer__newsletter-description">{newsletterDescription}</p>
                 )}
-                <Form className="c-footer__newsletter-form" onSubmit={(e) => {
-                  e.preventDefault();
-                  const formData = new FormData(e.currentTarget);
-                  const email = formData.get('email') as string;
-                  if (email) handleNewsletterSubmit(email);
-                }}>
+                <Form
+                  className="c-footer__newsletter-form"
+                  onSubmit={e => {
+                    e.preventDefault();
+                    const formData = new FormData(e.currentTarget);
+                    const email = formData.get('email') as string;
+                    if (email) handleNewsletterSubmit(email);
+                  }}
+                >
                   <div className="c-footer__newsletter-input-group">
                     <Input
                       type="email"
@@ -156,22 +251,13 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
                     </Button>
                   </div>
                 </Form>
-              </div>
+              </GridCol>
             )}
-          </div>
-
-          {/* Footer Bottom */}
-          {(copyright || showBackToTop) && showDivider && (
-            <hr className="c-footer__divider" />
-          )}
+          </Grid>
 
           {(copyright || showBackToTop) && (
             <div className={bottomClass}>
-              {copyright && (
-                <div className="c-footer__copyright">
-                  {copyright}
-                </div>
-              )}
+              {copyright && <div className="c-footer__copyright">{copyright}</div>}
               {showBackToTop && (
                 <Button
                   variant="ghost"
@@ -187,9 +273,22 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
             </div>
           )}
         </div>
-      </footer>
     );
-  }
+
+    return (
+      <footer ref={ref} className={footerClass + ` c-footer ${glass ? 'c-footer--glass' : ''}`} {...props}>
+    {glass ? (
+      <AtomixGlass {...(glass as unknown as AtomixGlassProps)} elasticity={0}>
+        <div className="c-footer__glass">
+          {footerContent}
+        </div>
+      </AtomixGlass>
+    ) : (
+      footerContent
+    )}
+  </footer>
+);
+}
 );
 
 Footer.displayName = 'Footer';

package/src/components/Footer/FooterLink.tsx

@@ -69,4 +69,4 @@ export const FooterLink = forwardRef<HTMLAnchorElement, FooterLinkProps>(
 
 FooterLink.displayName = 'FooterLink';
 
-export default FooterLink;
+export default FooterLink;

package/src/components/Footer/FooterSection.tsx

@@ -1,5 +1,7 @@
 import React, { forwardRef } from 'react';
-import { FooterSectionProps } from '../../lib/types/components';
+import { FooterSectionProps } from '@/lib/types/components';
+import { GridCol } from '@/layouts';
+import { useFooter } from '@/lib/composables/useFooter';
 
 /**
  * FooterSection component provides a section within the footer for organizing links and content.
@@ -12,13 +14,17 @@ import { FooterSectionProps } from '../../lib/types/components';
  * </FooterSection>
  * ```
  */
-export const FooterSection = forwardRef<HTMLDivElement, FooterSectionProps>(
+export const FooterSection = forwardRef<
+  HTMLDivElement,
+  FooterSectionProps & { showNewsletter?: boolean }
+>(
   (
     {
       title,
       icon,
       collapsible = false,
       defaultCollapsed = false,
+      showNewsletter = false,
       children,
       className = '',
       ...props
@@ -27,6 +33,13 @@ export const FooterSection = forwardRef<HTMLDivElement, FooterSectionProps>(
   ) => {
     const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
 
+    console.log(
+      'FooterSection render - showNewsletter:',
+      showNewsletter,
+      'Type:',
+      typeof showNewsletter
+    );
+
     const handleToggle = () => {
       if (collapsible) {
         setIsCollapsed(!isCollapsed);
@@ -43,45 +56,49 @@ export const FooterSection = forwardRef<HTMLDivElement, FooterSectionProps>(
       .join(' ');
 
     return (
-      <div ref={ref} className={sectionClass} {...props}>
-        {title && (
-          <div className="c-footer__section-header">
-            {collapsible ? (
-              <button
-                type="button"
-                className="c-footer__section-toggle"
-                onClick={handleToggle}
-                aria-expanded={!isCollapsed}
-                aria-controls={`footer-section-${title.toString().toLowerCase().replace(/\s+/g, '-')}`}
-              >
-                {icon && <span className="c-footer__section-icon">{icon}</span>}
-                <h4 className="c-footer__section-title">{title}</h4>
-                <span className="c-footer__section-chevron">
-                  {isCollapsed ? '▼' : '▲'}
-                </span>
-              </button>
-            ) : (
-              <div className="c-footer__section-header-content">
-                {icon && <span className="c-footer__section-icon">{icon}</span>}
-                <h4 className="c-footer__section-title">{title}</h4>
-              </div>
-            )}
+      <GridCol xs={12} md={showNewsletter ? 6 : 3} className="c-footer__section-col">
+        <div ref={ref} className={sectionClass} {...props}>
+          {title && (
+            <div className="c-footer__section-header">
+              {collapsible ? (
+                <button
+                  type="button"
+                  className="c-footer__section-toggle"
+                  onClick={handleToggle}
+                  aria-expanded={!isCollapsed}
+                  aria-controls={`footer-section-${title.toString().toLowerCase().replace(/\s+/g, '-')}`}
+                >
+                  {icon && <span className="c-footer__section-icon">{icon}</span>}
+                  <h4 className="c-footer__section-title">{title}</h4>
+                  <span className="c-footer__section-chevron">{isCollapsed ? '▼' : '▲'}</span>
+                </button>
+              ) : (
+                <div className="c-footer__section-header-content">
+                  {icon && <span className="c-footer__section-icon">{icon}</span>}
+                  <h4 className="c-footer__section-title">{title}</h4>
+                </div>
+              )}
+            </div>
+          )}
+          <div
+            className="c-footer__section-content"
+            id={
+              title
+                ? `footer-section-${title.toString().toLowerCase().replace(/\s+/g, '-')}`
+                : undefined
+            }
+            style={{
+              display: collapsible && isCollapsed ? 'none' : 'flex',
+            }}
+          >
+            {children}
           </div>
-        )}
-        <div
-          className="c-footer__section-content"
-          id={title ? `footer-section-${title.toString().toLowerCase().replace(/\s+/g, '-')}` : undefined}
-          style={{
-            display: collapsible && isCollapsed ? 'none' : 'block',
-          }}
-        >
-          {children}
         </div>
-      </div>
+      </GridCol>
     );
   }
 );
 
 FooterSection.displayName = 'FooterSection';
 
-export default FooterSection;
+export default FooterSection;

package/src/components/Footer/FooterSocialLink.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import { Icon } from '../Icon/Icon';
 import { FooterSocialLinkProps } from '../../lib/types/components';
 
 /**
@@ -26,29 +27,35 @@ export const FooterSocialLink = forwardRef<HTMLAnchorElement, FooterSocialLinkPr
     ref
   ) => {
     const getPlatformIcon = (platform: string) => {
-      const icons: Record<string, string> = {
-        facebook: '📘',
-        twitter: '🐦',
-        instagram: '📷',
-        linkedin: '💼',
-        youtube: '📺',
-        github: '🐙',
-        discord: '🎮',
-        tiktok: '🎵',
-        pinterest: '📌',
-        snapchat: '👻',
-        whatsapp: '💬',
-        telegram: '✈️',
-        reddit: '🤖',
-        twitch: '🎮',
-        spotify: '🎵',
-        dribbble: '🏀',
-        behance: '🎨',
-        medium: '📝',
-        dev: '👨‍💻',
-        codepen: '✏️',
+      const iconMap: Record<string, string> = {
+        facebook: 'FacebookLogo',
+        twitter: 'TwitterLogo',
+        instagram: 'InstagramLogo',
+        linkedin: 'LinkedinLogo',
+        youtube: 'YoutubeLogo',
+        github: 'GithubLogo',
+        discord: 'DiscordLogo',
+        tiktok: 'TiktokLogo',
+        pinterest: 'PinterestLogo',
+        snapchat: 'SnapchatLogo',
+        whatsapp: 'WhatsappLogo',
+        telegram: 'TelegramLogo',
+        reddit: 'RedditLogo',
+        twitch: 'TwitchLogo',
+        spotify: 'SpotifyLogo',
+        dribbble: 'DribbbleLogo',
+        behance: 'BehanceLogo',
+        medium: 'MediumLogo',
+        dev: 'DevToLogo',
+        codepen: 'CodepenLogo',
       };
-      return icons[platform] || '🔗';
+
+      const iconName = iconMap[platform];
+      if (iconName) {
+        return <Icon name={iconName as any} />;
+      }
+
+      return <Icon name="Link" />;
     };
 
     const getPlatformLabel = (platform: string) => {
@@ -101,12 +108,8 @@ export const FooterSocialLink = forwardRef<HTMLAnchorElement, FooterSocialLinkPr
         aria-disabled={disabled}
         {...props}
       >
-        <span className="c-footer__social-link-icon">
-          {icon || getPlatformIcon(platform)}
-        </span>
-        <span className="c-footer__social-link-label u-visually-hidden">
-          {ariaLabel}
-        </span>
+        <span className="c-footer__social-link-icon">{icon || getPlatformIcon(platform)}</span>
+        <span className="c-footer__social-link-label u-visually-hidden">{ariaLabel}</span>
       </a>
     );
   }
@@ -114,4 +117,4 @@ export const FooterSocialLink = forwardRef<HTMLAnchorElement, FooterSocialLinkPr
 
 FooterSocialLink.displayName = 'FooterSocialLink';
 
-export default FooterSocialLink;
+export default FooterSocialLink;

package/src/components/Footer/README.md

@@ -1,10 +1,10 @@
 # Footer Component
 
-A comprehensive footer component with multiple layout options, social links, newsletter signup, and responsive design.
+The Footer component provides a comprehensive footer section with multiple layout options, social links, newsletter signup, and responsive design.
 
 ## Features
 
-- **Multiple Layouts**: Columns, centered, minimal, and stacked layouts
+- **Multiple Layouts**: Columns, centered, minimal, stacked, flexible, sidebar, and wide layouts
 - **Social Media Integration**: Built-in support for 20+ social platforms
 - **Newsletter Signup**: Optional newsletter subscription form
 - **Responsive Design**: Mobile-first with collapsible sections
@@ -74,7 +74,7 @@ import { Footer, FooterSection, FooterLink } from '@shohojdhara/atomix';
 | `brandLogo` | `string \| ReactNode` | - | Brand logo (image URL or React element) |
 | `brandDescription` | `ReactNode` | - | Brand description text |
 | `copyright` | `ReactNode` | - | Copyright text |
-| `layout` | `'columns' \| 'centered' \| 'minimal' \| 'stacked'` | `'columns'` | Footer layout variant |
+| `layout` | `'columns' \| 'centered' \| 'minimal' \| 'stacked' \| 'flexible' \| 'sidebar' \| 'wide'` | `'columns'` | Footer layout variant |
 | `variant` | `ThemeColor` | `'primary'` | Color variant |
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size variant |
 | `showNewsletter` | `boolean` | `false` | Whether to show newsletter signup |
@@ -162,6 +162,36 @@ interface SocialLink {
 </Footer>
 ```
 
+### Flexible
+```tsx
+<Footer layout="flexible">
+  {/* Flexible layout that adapts to content */}
+</Footer>
+```
+
+### Sidebar
+```tsx
+<Footer layout="sidebar">
+  {/* Brand section on left, content on right */}
+</Footer>
+```
+
+### Wide
+```tsx
+<Footer layout="wide">
+  {/* Wide layout with extended content area */}
+</Footer>
+```
+
+## Grid System Integration
+
+The Footer component uses the enhanced Grid and GridCol components for responsive layouts:
+
+- Grid supports additional props like `direction` and `wrap`
+- GridCol supports additional props like `grow`, `shrink`, `basis`, and `align`
+
+These enhancements provide better control over the footer layout for different screen sizes and design requirements.
+
 ## Styling
 
 The Footer component uses CSS custom properties for theming:
@@ -251,6 +281,55 @@ The Footer component uses CSS custom properties for theming:
 </Footer>
 ```
 
+### Sidebar Layout Example
+
+```tsx
+<Footer 
+  layout="sidebar"
+  brand="My Company"
+  brandLogo="/logo.png"
+  copyright="© 2024 My Company. All rights reserved."
+  showNewsletter
+>
+  <FooterSection title="Products">
+    <FooterLink href="/product1">Product 1</FooterLink>
+    <FooterLink href="/product2">Product 2</FooterLink>
+  </FooterSection>
+  
+  <FooterSection title="Company">
+    <FooterLink href="/about">About Us</FooterLink>
+    <FooterLink href="/careers">Careers</FooterLink>
+  </FooterSection>
+</Footer>
+```
+
+### Wide Layout with Flexible Design
+
+```tsx
+<Footer 
+  layout="wide"
+  brand="Enterprise Solution"
+  copyright="© 2024 Enterprise Solution. All rights reserved."
+  showNewsletter
+  socialLinks={[
+    { platform: 'linkedin', url: 'https://linkedin.com/company' },
+    { platform: 'twitter', url: 'https://twitter.com/company' }
+  ]}
+>
+  <FooterSection title="Solutions">
+    <FooterLink href="/cloud">Cloud Services</FooterLink>
+    <FooterLink href="/security">Security</FooterLink>
+    <FooterLink href="/analytics">Analytics</FooterLink>
+  </FooterSection>
+  
+  <FooterSection title="Resources">
+    <FooterLink href="/whitepapers">Whitepapers</FooterLink>
+    <FooterLink href="/case-studies">Case Studies</FooterLink>
+    <FooterLink href="/webinars">Webinars</FooterLink>
+  </FooterSection>
+</Footer>
+```
+
 ## Best Practices
 
 1. **Keep it organized**: Group related links in logical sections

package/src/components/Footer/index.ts

@@ -10,4 +10,4 @@ export type {
   FooterLayout,
   SocialPlatform,
   SocialLink,
-} from '../../lib/types/components';
+} from '../../lib/types/components';

package/src/components/Form/Checkbox.stories.tsx

@@ -59,7 +59,7 @@ export const Checked: Story = {
 
 // Checkbox states
 export const States: Story = {
-  render: args => (
+  render: (args: any) => (
     <div className="u-d-flex u-flex-column u-gap-3">
       <Checkbox label="Default checkbox" />
       <Checkbox label="Checked checkbox" checked />
@@ -85,7 +85,7 @@ export const Glass: Story = {
     label: 'Glass Checkbox',
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -114,10 +114,11 @@ export const GlassCustom: Story = {
       cornerRadius: 12,
     },
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
-        background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+        background:
+          'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         padding: '2rem',
@@ -159,7 +160,14 @@ export const GlassStates: Story = {
         `}
       </style>
       <div>
-        <h3 style={{ color: 'white', marginBottom: '2rem', textAlign: 'center', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+        <h3
+          style={{
+            color: 'white',
+            marginBottom: '2rem',
+            textAlign: 'center',
+            textShadow: '0 2px 4px rgba(0,0,0,0.5)',
+          }}
+        >
           Glass Checkbox States
         </h3>
         <div className="u-d-flex u-flex-column u-gap-3">

package/src/components/Form/Checkbox.tsx

@@ -11,6 +11,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   checked = false,
   onChange,
   className = '',
+  style,
   disabled = false,
   required = false,
   id,
@@ -39,7 +40,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   });
 
   const checkboxContent = (
-    <div className={checkboxClass}>
+    <div className={checkboxClass} style={style}>
       <input
         ref={checkboxRef}
         type="checkbox"
@@ -76,11 +77,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return (
-      <AtomixGlass {...glassProps}>
-        {checkboxContent}
-      </AtomixGlass>
-    );
+    return <AtomixGlass {...glassProps}>{checkboxContent}</AtomixGlass>;
   }
 
   return checkboxContent;