@shohojdhara/atomix 0.4.4 → 0.4.6

package/src/components/AtomixGlass/stories/shared-components.tsx

@@ -75,16 +75,18 @@ export const BackgroundWrapper: React.FC<BackgroundWrapperProps> = ({
 
   const bgStyle = {
     backgroundImage: bgImage ? `url(${bgImage})` : undefined,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
     height,
     width,
     borderRadius,
-    padding,
     ...style,
   };
 
   return (
     <div
-      className={`u-relative u-overflow-hidden ${className}`}
+      className={`u-relative u-overflow-hidden u-flex u-items-center u-justify-center ${className}`}
       style={bgStyle}
       aria-hidden={ariaHidden}
     >
@@ -94,10 +96,16 @@ export const BackgroundWrapper: React.FC<BackgroundWrapperProps> = ({
           style={{
             backgroundColor: overlayColor,
             opacity: overlayOpacity,
+            padding,
           }}
         />
       )}
-      <div className="u-relative u-z-10">{children}</div>
+      <div
+        className="u-relative u-z-10 u-w-100 u-h-100 u-flex u-items-center u-justify-center"
+        style={{ padding }}
+      >
+        {children}
+      </div>
     </div>
   );
 };

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -78,7 +78,7 @@ export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement>
   linkAs?: React.ElementType<any>;
 
   /**
-   * Link props to pass to the underlying anchor or LinkComponent
+   * Link props to pass to the underlying anchor or linkComponent
    */
   linkProps?: Record<string, any>;
 }
@@ -169,7 +169,7 @@ export interface BreadcrumbProps {
   /**
    * Optional custom link component
    */
-  LinkComponent?: React.ElementType;
+  linkComponent?: React.ElementType;
 
   /**
    * Custom style for the breadcrumb
@@ -187,7 +187,7 @@ const BreadcrumbComponent: React.FC<BreadcrumbProps> = memo(function BreadcrumbB
   divider,
   className = '',
   'aria-label': ariaLabel = 'Breadcrumb',
-  LinkComponent,
+  linkComponent,
   style,
   children,
 }: BreadcrumbProps) {
@@ -209,7 +209,7 @@ const BreadcrumbComponent: React.FC<BreadcrumbProps> = memo(function BreadcrumbB
           onClick={item.onClick as any}
           className={item.className}
           style={item.style}
-          linkAs={LinkComponent}
+          linkAs={linkComponent}
         >
           {item.label}
         </BreadcrumbItem>
@@ -228,7 +228,7 @@ const BreadcrumbComponent: React.FC<BreadcrumbProps> = memo(function BreadcrumbB
 
         const newProps = {
           active: active ?? (isLast ? true : undefined),
-          linkAs: linkAs ?? LinkComponent,
+          linkAs: linkAs ?? linkComponent,
         };
 
         return cloneElement(child, newProps as any);

package/src/components/Breadcrumb/BreadcrumbCompound.test.tsx

@@ -46,7 +46,7 @@ describe('Breadcrumb Component', () => {
     expect(handleClick).toHaveBeenCalledTimes(1);
   });
 
-  it('supports custom LinkComponent in compound components', () => {
+  it('supports custom linkComponent in compound components', () => {
     const CustomLink = ({ href, children, ...props }: any) => (
       <a href={href} data-testid="custom-link" {...props}>
         {children} (Custom)
@@ -54,7 +54,7 @@ describe('Breadcrumb Component', () => {
     );
 
     render(
-      <Breadcrumb LinkComponent={CustomLink}>
+      <Breadcrumb linkComponent={CustomLink}>
         <Breadcrumb.Item href="/custom">Link</Breadcrumb.Item>
         <Breadcrumb.Item>Current</Breadcrumb.Item>
       </Breadcrumb>

package/src/components/Button/Button.tsx

@@ -10,7 +10,7 @@ export type ButtonAsProp = {
   as?: ElementType;
   to?: string;
   href?: string;
-  LinkComponent?: React.ElementType;
+  linkComponent?: React.ElementType;
   [key: string]: any;
 };
 
@@ -51,7 +51,7 @@ export const Button = React.memo(
         'aria-controls': ariaControls,
         tabIndex,
         style,
-        LinkComponent,
+        linkComponent,
         ...props
       },
       ref
@@ -220,12 +220,12 @@ export const Button = React.memo(
 
       // Render as anchor if href is provided
       if (shouldRenderAsLink) {
-        // Use custom LinkComponent if provided (e.g., Next.js Link)
-        if (LinkComponent) {
-          const LinkComp = LinkComponent as React.ComponentType<any>;
+        // Use custom linkComponent if provided (e.g., Next.js Link)
+        if (linkComponent) {
+          const LinkComp = linkComponent as React.ComponentType<any>;
           const linkProps = {
             ...buttonProps,
-            ref: ref as any, // LinkComponent usually forwards ref to anchor
+            ref: ref as any, // linkComponent usually forwards ref to anchor
             href,
             to: href,
             target,

package/src/components/Card/Card.tsx

@@ -40,7 +40,7 @@ export const Card = React.memo(
         href,
         target,
         // Custom Link
-        LinkComponent,
+        linkComponent,
         // Glass
         glass,
         // Accessibility
@@ -246,8 +246,8 @@ export const Card = React.memo(
       if (href && !isDisabled) {
         let anchorElement: React.ReactElement;
 
-        if (LinkComponent) {
-          const LinkComp = LinkComponent as React.ComponentType<any>;
+        if (linkComponent) {
+          const LinkComp = linkComponent as React.ComponentType<any>;
           anchorElement = (
             <LinkComp
               {...commonProps}

package/src/components/Dropdown/Dropdown.tsx

@@ -90,12 +90,13 @@ export const DropdownItem: React.FC<DropdownItemProps> = memo(
   ({
     children,
     href,
+    target,
     active = false,
     disabled = false,
     icon,
     onClick,
     className = '',
-    LinkComponent,
+    linkComponent,
     ...props
   }) => {
     const { close } = useContext(DropdownContext);
@@ -126,6 +127,7 @@ export const DropdownItem: React.FC<DropdownItemProps> = memo(
     const linkProps = {
       href,
       to: href,
+      target,
       className: itemClasses,
       onClick: handleClick,
       role: 'menuitem',
@@ -136,9 +138,9 @@ export const DropdownItem: React.FC<DropdownItemProps> = memo(
     if (href && !disabled) {
       return (
         <li>
-          {LinkComponent ? (
+          {linkComponent ? (
             (() => {
-              const Component = LinkComponent as React.ComponentType<any>;
+              const Component = linkComponent as React.ComponentType<any>;
               return (
                 <Component {...linkProps}>
                   {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}

package/src/components/Footer/Footer.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { FooterProps } from '../../lib/types/components';
+import { FooterProps, AtomixGlassProps } from '../../lib/types/components';
 import { useFooter } from '../../lib/composables/useFooter';
 import { Button } from '../Button';
 import { Input, Form } from '../Form';
@@ -7,7 +7,6 @@ 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,
@@ -68,9 +67,9 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
       brandClass,
       sectionsClass,
       bottomClass,
+      getResponsiveColumnProps,
       handleNewsletterSubmit,
       handleBackToTop,
-      socialLinks: footerSocialLinks,
     } = useFooter({
       layout,
       variant,
@@ -78,179 +77,118 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
       sticky,
       showNewsletter,
       showBackToTop,
+      showDivider,
       socialLinks,
       onNewsletterSubmit,
       onBackToTop,
+      glass: Boolean(glass),
       className,
     });
 
-    // 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,
-          };
-      }
-    };
+    // ──────────────────────────────────────────
+    // Render helpers
+    // ──────────────────────────────────────────
 
-    const columnSizes = getGridColumnSizes();
+    const renderBrandSection = () => {
+      if (!brand && !brandLogo && !brandDescription) return null;
 
-    // Calculate responsive column sizes
-    const getResponsiveColumnProps = (columnType: 'brand' | 'content' | 'newsletter') => {
-      const baseMd =
-        layout === 'columns' || layout === 'sidebar' || layout === 'wide'
-          ? columnSizes[columnType]
-          : 12;
+      return (
+        <GridCol {...(getResponsiveColumnProps('brand') as any)} className={brandClass}>
+          {brandLogo && (
+            <div className="c-footer__brand-logo">
+              {typeof brandLogo === 'string' ? <img src={brandLogo} alt="Brand Logo" /> : brandLogo}
+            </div>
+          )}
+          {brand && (
+            <div className="c-footer__brand-name">
+              {typeof brand === 'string' ? <h3>{brand}</h3> : brand}
+            </div>
+          )}
+          {brandDescription && (
+            <div className="c-footer__brand-description">{brandDescription}</div>
+          )}
+          {socialLinks.length > 0 && (
+            <div className="c-footer__social" data-testid="footer-social-links">
+              {socialLinks.map((link, index) => (
+                <FooterSocialLink
+                  key={`${link.platform}-${index}`}
+                  platform={link.platform}
+                  url={link.url}
+                  icon={link.icon}
+                  label={link.label}
+                  size={size}
+                />
+              ))}
+            </div>
+          )}
+        </GridCol>
+      );
+    };
 
-      // For flexible layout, we want auto-sizing
-      if (layout === 'flexible' && columnSizes[columnType] === 'auto') {
-        return { xs: 12, sm: true, md: true };
-      }
+    const renderSections = () => {
+      if (!children) return null;
 
-      // For other layouts, we use specific sizes
-      return { xs: 12, md: baseMd };
+      return (
+        <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 => {
+              if (React.isValidElement(child)) {
+                return React.cloneElement(child, { showNewsletter } as any);
+              }
+              return child;
+            })}
+          </Grid>
+        </GridCol>
+      );
     };
 
-    const footerContent = (
-      <div className={containerClass}>
-        {/* Main Footer Content */}
-        <Grid
-          className={sectionsClass}
-          alignItems="start"
-          justifyContent={layout === 'centered' ? 'center' : undefined}
+    const renderNewsletter = () => {
+      if (!showNewsletter) return null;
+
+      return (
+        <GridCol
+          {...(getResponsiveColumnProps('newsletter') as any)}
+          className="c-footer__newsletter"
         >
-          {/* Brand Section */}
-          {(brand || brandLogo || brandDescription) && (
-            <GridCol {...(getResponsiveColumnProps('brand') as any)} className={brandClass}>
-              {brandLogo && (
-                <div className="c-footer__brand-logo">
-                  {typeof brandLogo === 'string' ? (
-                    <img src={brandLogo} alt={'Brand Logo'} />
-                  ) : (
-                    brandLogo
-                  )}
-                </div>
-              )}
-              {brand && (
-                <div className="c-footer__brand-name">
-                  {typeof brand === 'string' ? <h3>{brand}</h3> : brand}
-                </div>
-              )}
-              {brandDescription && (
-                <div className="c-footer__brand-description">{brandDescription}</div>
-              )}
-              {socialLinks.length > 0 && (
-                <div className="c-footer__social" data-testid="footer-social-links">
-                  {socialLinks.map((link, index) => (
-                    <FooterSocialLink
-                      key={`${link.platform}-${index}`}
-                      platform={link.platform}
-                      url={link.url}
-                      icon={link.icon}
-                      label={link.label}
-                      size={size}
-                    />
-                  ))}
-                </div>
-              )}
-            </GridCol>
+          <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);
+            }}
+          >
+            <div className="c-footer__newsletter-input-group">
+              <Input
+                type="email"
+                name="email"
+                className="c-footer__newsletter-input"
+                placeholder={newsletterPlaceholder}
+                required
+              />
+              <Button type="submit" className="c-footer__newsletter-button">
+                {newsletterButtonText}
+              </Button>
+            </div>
+          </Form>
+        </GridCol>
+      );
+    };
 
-          {/* Footer Sections */}
-          {children && (
-            <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)) {
-                    // Clone the element and pass the showNewsletter prop
-                    return React.cloneElement(child, { showNewsletter } as any);
-                  }
-                  return child;
-                })}
-              </Grid>
-            </GridCol>
-          )}
+    const renderBottom = () => {
+      if (!copyright && !showBackToTop) return null;
 
-          {/* Newsletter Section */}
-          {showNewsletter && (
-            <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);
-                }}
-              >
-                <div className="c-footer__newsletter-input-group">
-                  <Input
-                    type="email"
-                    name="email"
-                    className="c-footer__newsletter-input"
-                    placeholder={newsletterPlaceholder}
-                    required
-                  />
-                  <Button type="submit" className="c-footer__newsletter-button">
-                    {newsletterButtonText}
-                  </Button>
-                </div>
-              </Form>
-            </GridCol>
-          )}
-        </Grid>
-
-        {(copyright || showBackToTop) && (
+      return (
+        <>
+          {showDivider && <hr className="c-footer__divider" />}
           <div className={bottomClass}>
             {copyright && <div className="c-footer__copyright">{copyright}</div>}
             {showBackToTop && (
@@ -266,16 +204,36 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
               </Button>
             )}
           </div>
-        )}
+        </>
+      );
+    };
+
+    // ──────────────────────────────────────────
+    // Main content
+    // ──────────────────────────────────────────
+
+    const footerContent = (
+      <div className={containerClass}>
+        <Grid
+          className={sectionsClass}
+          alignItems="start"
+          justifyContent={layout === 'centered' ? 'center' : undefined}
+        >
+          {renderBrandSection()}
+          {renderSections()}
+          {renderNewsletter()}
+        </Grid>
+
+        {renderBottom()}
       </div>
     );
 
+    // ──────────────────────────────────────────
+    // Root element
+    // ──────────────────────────────────────────
+
     return (
-      <footer
-        ref={ref}
-        className={footerClass + ` c-footer ${glass ? 'c-footer--glass' : ''}`}
-        {...props}
-      >
+      <footer ref={ref} className={footerClass} {...props}>
         {glass ? (
           <AtomixGlass {...(glass as unknown as AtomixGlassProps)} elasticity={0}>
             <div className="c-footer__glass">{footerContent}</div>

package/src/components/Footer/FooterLink.tsx

@@ -22,7 +22,7 @@ export const FooterLink = forwardRef<HTMLAnchorElement, FooterLinkProps>(
       onClick,
       children,
       className = '',
-      LinkComponent,
+      linkComponent,
       ...props
     },
     ref
@@ -36,40 +36,37 @@ export const FooterLink = forwardRef<HTMLAnchorElement, FooterLinkProps>(
       .filter(Boolean)
       .join(' ');
 
-    const linkProps = {
+    const sharedProps = {
       className: linkClass,
       onClick: disabled ? undefined : onClick,
       'aria-disabled': disabled,
       ...(external && {
-        target: '_blank',
+        target: '_blank' as const,
         rel: 'noopener noreferrer',
       }),
       ...props,
     };
 
-    if (LinkComponent) {
-      const Component = LinkComponent as React.ComponentType<any>;
-      // Only pass href/to if the link is not disabled and href exists
-      const componentProps = {
-        ref,
-        ...(href && !disabled ? { href, to: href } : {}),
-        ...linkProps,
-      };
+    const linkContent = (
+      <>
+        {icon && <span className="c-footer__link-icon">{icon}</span>}
+        <span className="c-footer__link-text">{children}</span>
+        {external && <span className="c-footer__link-external">↗</span>}
+      </>
+    );
 
+    if (linkComponent) {
+      const Component = linkComponent as React.ComponentType<any>;
       return (
-        <Component {...componentProps}>
-          {icon && <span className="c-footer__link-icon">{icon}</span>}
-          <span className="c-footer__link-text">{children}</span>
-          {external && <span className="c-footer__link-external">↗</span>}
+        <Component ref={ref} {...(href && !disabled ? { href, to: href } : {})} {...sharedProps}>
+          {linkContent}
         </Component>
       );
     }
 
     return (
-      <a ref={ref} href={disabled ? undefined : href} {...linkProps}>
-        {icon && <span className="c-footer__link-icon">{icon}</span>}
-        <span className="c-footer__link-text">{children}</span>
-        {external && <span className="c-footer__link-external">↗</span>}
+      <a ref={ref} href={disabled ? undefined : href} {...sharedProps}>
+        {linkContent}
       </a>
     );
   }