@shohojdhara/atomix 0.3.15 → 0.4.1

package/src/components/Hero/Hero.tsx

@@ -1,10 +1,139 @@
-import React, { CSSProperties, useEffect } from 'react';
-import { HeroProps, HeroAlignment } from '../../lib/types/components';
+import React, { CSSProperties, useEffect, ReactNode } from 'react';
+import { HeroProps, HeroAlignment, AtomixGlassProps } from '../../lib/types/components';
 import { useHero } from '../../lib/composables/useHero';
 import { HERO } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Hero: React.FC<HeroProps> = ({
+// Subcomponents
+export interface HeroTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+}
+
+const HeroTitle = ({ children, className, level = 'h1', ...props }: HeroTitleProps) => {
+  const Tag = level as any;
+  return (
+    <Tag className={`${HERO.SELECTORS.TITLE.replace('.', '')} ${className || ''}`.trim()} {...props}>
+      {children}
+    </Tag>
+  );
+};
+
+const HeroSubtitle = ({ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => {
+  return (
+    <p className={`${HERO.SELECTORS.SUBTITLE.replace('.', '')} ${className || ''}`.trim()} {...props}>
+      {children}
+    </p>
+  );
+};
+
+const HeroText = ({ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => {
+  return (
+    <p className={`${HERO.SELECTORS.TEXT.replace('.', '')} ${className || ''}`.trim()} {...props}>
+      {children}
+    </p>
+  );
+};
+
+const HeroActions = ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div className={`${HERO.SELECTORS.ACTIONS.replace('.', '')} ${className || ''}`.trim()} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export interface HeroContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  glass?: AtomixGlassProps | boolean;
+}
+
+const HeroContent = ({ children, className, style, glass, ...props }: HeroContentProps) => {
+  const contentClass = `${HERO.SELECTORS.CONTENT.replace('.', '')} ${className || ''}`.trim();
+
+  if (glass) {
+    const glassProps = typeof glass === 'boolean' ? {
+      displacementScale: 60,
+      blurAmount: 3,
+      saturation: 180,
+      aberrationIntensity: 0,
+      cornerRadius: 8,
+      overLight: false,
+      mode: 'standard' as const,
+    } : glass;
+
+    return (
+      <div className={contentClass} style={style} {...props}>
+        <AtomixGlass {...glassProps}>
+          <div className="u-p-4">
+            {children}
+          </div>
+        </AtomixGlass>
+      </div>
+    );
+  }
+
+  return (
+    <div className={contentClass} style={style} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export interface HeroImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  wrapperClassName?: string;
+  wrapperStyle?: React.CSSProperties;
+}
+
+const HeroImage = ({
+  src,
+  alt = '',
+  className,
+  wrapperClassName,
+  wrapperStyle,
+  ...props
+}: HeroImageProps) => {
+  return (
+    <div
+      className={`${HERO.SELECTORS.IMAGE_WRAPPER.replace('.', '')} ${wrapperClassName || ''}`.trim()}
+      style={wrapperStyle}
+    >
+      <img
+        src={src}
+        alt={alt}
+        className={`${HERO.SELECTORS.IMAGE.replace('.', '')} ${className || ''}`.trim()}
+        {...props}
+      />
+    </div>
+  );
+};
+
+const HeroBackground = ({ className, style, src, children, ...props }: React.HTMLAttributes<HTMLDivElement> & { src?: string }) => {
+  return (
+    <div
+      className={`${HERO.SELECTORS.BG.replace('.', '')} ${className || ''}`.trim()}
+      style={style}
+      {...props}
+    >
+      {src && (
+         <img
+            src={src}
+            alt="Background"
+            className={HERO.SELECTORS.BG_IMAGE.replace('.', '')}
+          />
+      )}
+      {children}
+    </div>
+  );
+};
+
+export const Hero: React.FC<HeroProps> & {
+  Title: typeof HeroTitle;
+  Subtitle: typeof HeroSubtitle;
+  Text: typeof HeroText;
+  Actions: typeof HeroActions;
+  Content: typeof HeroContent;
+  Image: typeof HeroImage;
+  Background: typeof HeroBackground;
+} = ({
   title,
   subtitle,
   text,
@@ -16,7 +145,11 @@ export const Hero: React.FC<HeroProps> = ({
   fullViewportHeight = false,
   actions,
   imageColSize = 7,
+  imageColClassName,
+  imageColStyle,
   contentColSize = 5,
+  contentColClassName,
+  contentColStyle,
   contentWidth,
   className = '',
   style,
@@ -31,7 +164,14 @@ export const Hero: React.FC<HeroProps> = ({
     muted: true,
   },
   backgroundSlider,
-}) => {
+  headingLevel = 'h1',
+  reverseOnMobile = false,
+  parts,
+  backgroundElement,
+  ...rest
+}: HeroProps) => {
+  // Define dynamic heading tag
+  const HeadingTag = headingLevel;
   const {
     generateHeroClassNames,
     generateImageColClass,
@@ -44,6 +184,7 @@ export const Hero: React.FC<HeroProps> = ({
     backgroundSlider: sliderHook,
     hasBackgroundSlider,
   } = useHero({
+    title,
     alignment,
     imageColSize,
     contentColSize,
@@ -56,6 +197,7 @@ export const Hero: React.FC<HeroProps> = ({
     parallaxIntensity,
     videoBackground,
     backgroundSlider,
+    reverseOnMobile,
   });
 
   // Create custom style for hero element with content width if provided
@@ -95,16 +237,16 @@ export const Hero: React.FC<HeroProps> = ({
       let transitionClass = HERO.CLASSES.SLIDER_FADE;
       if (transition === 'slide') {
         transitionClass = HERO.CLASSES.SLIDER_SLIDE;
-      } else if (transition === 'custom') {
-        transitionClass = HERO.CLASSES.SLIDER_CUSTOM;
       }
 
       return (
         <div
           className={`${HERO.SELECTORS.SLIDER.replace('.', '')} ${transitionClass}`}
-          style={{
-            '--slider-transition-duration': `${transitionDuration}ms`,
-          } as React.CSSProperties}
+          style={
+            {
+              '--slider-transition-duration': `${transitionDuration}ms`,
+            } as React.CSSProperties
+          }
           onMouseEnter={() => {
             if (backgroundSlider.autoplay?.pauseOnHover) {
               sliderHook.pauseAutoplay();
@@ -116,7 +258,7 @@ export const Hero: React.FC<HeroProps> = ({
             }
           }}
         >
-          {slides.map((slide, index) => {
+          {slides.map((slide, index: number) => {
             const isActive = index === currentIndex;
             const slideRef = slideRefs[index];
             const videoRef = videoRefs[index];
@@ -125,37 +267,40 @@ export const Hero: React.FC<HeroProps> = ({
               <div
                 key={index}
                 ref={slideRef}
-                className={`${HERO.SELECTORS.SLIDER_ITEM.replace('.', '')} ${
-                  isActive ? HERO.CLASSES.SLIDER_ITEM_ACTIVE : ''
-                }`}
+                className={`${HERO.SELECTORS.SLIDER_ITEM.replace('.', '')} ${isActive ? HERO.CLASSES.SLIDER_ITEM_ACTIVE : ''}`}
+                aria-hidden={!isActive}
               >
-                {slide.type === 'image' ? (
-                  <img
-                    src={slide.src}
-                    alt={slide.alt || 'Background slide'}
-                    className={HERO.SELECTORS.BG_IMAGE.replace('.', '')}
-                  />
-                ) : (
+                {slide.type === 'video' ? (
                   <video
                     ref={videoRef as React.LegacyRef<HTMLVideoElement>}
-                    className="c-hero__video"
-                    autoPlay={slide.videoOptions?.autoplay !== false}
-                    loop={slide.videoOptions?.loop !== false}
-                    muted={slide.videoOptions?.muted !== false}
+                    className={'c-hero__bg-video'}
+                    src={slide.src}
+                    poster={slide.videoOptions?.posterUrl || slide.alt}
+                    muted={slide.videoOptions?.muted ?? true}
+                    loop={slide.videoOptions?.loop ?? true}
                     playsInline
-                    poster={slide.videoOptions?.posterUrl}
+                    aria-hidden="true"
+                    autoPlay={slide.videoOptions?.autoplay !== false}
                   >
-                    <source
-                      src={slide.src}
-                      type={`video/${slide.src.split('.').pop() || 'mp4'}`}
-                    />
+                    <source src={slide.src} type={`video/${slide.src.split('.').pop() || 'mp4'}`} />
                     Your browser does not support the video tag.
                   </video>
+                ) : (
+                  <img
+                    src={slide.src}
+                    alt={slide.alt || 'Background slide'}
+                    className={HERO.SELECTORS.BG_IMAGE.replace('.', '')}
+                  />
                 )}
               </div>
             );
           })}
-          {showOverlay && <div className={HERO.SELECTORS.OVERLAY.replace('.', '')}></div>}
+          {showOverlay && (
+            <div
+              className={`${HERO.SELECTORS.OVERLAY.replace('.', '')} ${parts?.overlay?.className || ''}`.trim()}
+              style={parts?.overlay?.style}
+            ></div>
+          )}
         </div>
       );
     }
@@ -164,7 +309,10 @@ export const Hero: React.FC<HeroProps> = ({
     if (!hasBackgroundImage && !videoBackground) return null;
 
     return (
-      <div className={HERO.SELECTORS.BG.replace('.', '')}>
+      <div
+        className={`${HERO.SELECTORS.BG.replace('.', '')} ${parts?.background?.className || ''}`.trim()}
+        style={parts?.background?.style}
+      >
         {backgroundImageSrc && (
           <img
             src={backgroundImageSrc}
@@ -173,18 +321,52 @@ export const Hero: React.FC<HeroProps> = ({
           />
         )}
         {renderVideoBackground()}
-        {showOverlay && <div className={HERO.SELECTORS.OVERLAY.replace('.', '')}></div>}
+        {showOverlay && (
+          <div
+            className={`${HERO.SELECTORS.OVERLAY.replace('.', '')} ${parts?.overlay?.className || ''}`.trim()}
+            style={parts?.overlay?.style}
+          ></div>
+        )}
       </div>
     );
   };
 
   const renderContent = () => {
     const content = (
-      <div className={HERO.SELECTORS.CONTENT.replace('.', '')}>
-        {subtitle && <p className={HERO.SELECTORS.SUBTITLE.replace('.', '')}>{subtitle}</p>}
-        <h1 className={HERO.SELECTORS.TITLE.replace('.', '')}>{title}</h1>
-        {text && <p className={HERO.SELECTORS.TEXT.replace('.', '')}>{text}</p>}
-        {actions && <div className={HERO.SELECTORS.ACTIONS.replace('.', '')}>{actions}</div>}
+      <div
+        className={`${HERO.SELECTORS.CONTENT.replace('.', '')} ${parts?.content?.className || ''}`.trim()}
+        style={parts?.content?.style}
+      >
+        {subtitle && (
+          <p
+            className={`${HERO.SELECTORS.SUBTITLE.replace('.', '')} ${parts?.subtitle?.className || ''}`.trim()}
+            style={parts?.subtitle?.style}
+          >
+            {subtitle}
+          </p>
+        )}
+        <HeadingTag
+          className={`${HERO.SELECTORS.TITLE.replace('.', '')} ${parts?.title?.className || ''}`.trim()}
+          style={parts?.title?.style}
+        >
+          {title}
+        </HeadingTag>
+        {text && (
+          <p
+            className={`${HERO.SELECTORS.TEXT.replace('.', '')} ${parts?.text?.className || ''}`.trim()}
+            style={parts?.text?.style}
+          >
+            {text}
+          </p>
+        )}
+        {actions && (
+          <div
+            className={`${HERO.SELECTORS.ACTIONS.replace('.', '')} ${parts?.actions?.className || ''}`.trim()}
+            style={parts?.actions?.style}
+          >
+            {actions}
+          </div>
+        )}
       </div>
     );
 
@@ -198,7 +380,10 @@ export const Hero: React.FC<HeroProps> = ({
       // If glass is true, use default glass props
       if (glass === true) {
         return (
-          <div className={HERO.SELECTORS.CONTENT.replace('.', '')}>
+          <div
+            className={`${HERO.SELECTORS.CONTENT.replace('.', '')} ${parts?.content?.className || ''}`.trim()}
+            style={parts?.content?.style}
+          >
             <AtomixGlass
               displacementScale={60}
               blurAmount={3}
@@ -209,11 +394,35 @@ export const Hero: React.FC<HeroProps> = ({
               mode="standard"
             >
               <div className="u-p-4">
-                {subtitle && <p className={HERO.SELECTORS.SUBTITLE.replace('.', '')}>{subtitle}</p>}
-                <h1 className={HERO.SELECTORS.TITLE.replace('.', '')}>{title}</h1>
-                {text && <p className={HERO.SELECTORS.TEXT.replace('.', '')}>{text}</p>}
+                {subtitle && (
+                  <p
+                    className={`${HERO.SELECTORS.SUBTITLE.replace('.', '')} ${parts?.subtitle?.className || ''}`.trim()}
+                    style={parts?.subtitle?.style}
+                  >
+                    {subtitle}
+                  </p>
+                )}
+                <HeadingTag
+                  className={`${HERO.SELECTORS.TITLE.replace('.', '')} ${parts?.title?.className || ''}`.trim()}
+                  style={parts?.title?.style}
+                >
+                  {title}
+                </HeadingTag>
+                {text && (
+                  <p
+                    className={`${HERO.SELECTORS.TEXT.replace('.', '')} ${parts?.text?.className || ''}`.trim()}
+                    style={parts?.text?.style}
+                  >
+                    {text}
+                  </p>
+                )}
                 {actions && (
-                  <div className={HERO.SELECTORS.ACTIONS.replace('.', '')}>{actions}</div>
+                  <div
+                    className={`${HERO.SELECTORS.ACTIONS.replace('.', '')} ${parts?.actions?.className || ''}`.trim()}
+                    style={parts?.actions?.style}
+                  >
+                    {actions}
+                  </div>
                 )}
               </div>
             </AtomixGlass>
@@ -223,13 +432,42 @@ export const Hero: React.FC<HeroProps> = ({
 
       // If glass is an object, use provided glass props
       return (
-        <div className={HERO.SELECTORS.CONTENT.replace('.', '')}>
+        <div
+          className={`${HERO.SELECTORS.CONTENT.replace('.', '')} ${parts?.content?.className || ''}`.trim()}
+          style={parts?.content?.style}
+        >
           <AtomixGlass {...glass}>
             <div className="u-p-4">
-              {subtitle && <p className={HERO.SELECTORS.SUBTITLE.replace('.', '')}>{subtitle}</p>}
-              <h1 className={HERO.SELECTORS.TITLE.replace('.', '')}>{title}</h1>
-              {text && <p className={HERO.SELECTORS.TEXT.replace('.', '')}>{text}</p>}
-              {actions && <div className={HERO.SELECTORS.ACTIONS.replace('.', '')}>{actions}</div>}
+              {subtitle && (
+                <p
+                  className={`${HERO.SELECTORS.SUBTITLE.replace('.', '')} ${parts?.subtitle?.className || ''}`.trim()}
+                  style={parts?.subtitle?.style}
+                >
+                  {subtitle}
+                </p>
+              )}
+              <HeadingTag
+                className={`${HERO.SELECTORS.TITLE.replace('.', '')} ${parts?.title?.className || ''}`.trim()}
+                style={parts?.title?.style}
+              >
+                {title}
+              </HeadingTag>
+              {text && (
+                <p
+                  className={`${HERO.SELECTORS.TEXT.replace('.', '')} ${parts?.text?.className || ''}`.trim()}
+                  style={parts?.text?.style}
+                >
+                  {text}
+                </p>
+              )}
+              {actions && (
+                <div
+                  className={`${HERO.SELECTORS.ACTIONS.replace('.', '')} ${parts?.actions?.className || ''}`.trim()}
+                  style={parts?.actions?.style}
+                >
+                  {actions}
+                </div>
+              )}
             </div>
           </AtomixGlass>
         </div>
@@ -245,15 +483,31 @@ export const Hero: React.FC<HeroProps> = ({
 
     if (alignment === 'center') {
       return (
-        <div className={HERO.SELECTORS.IMAGE_WRAPPER.replace('.', '')}>
-          <img src={imageSrc} alt={imageAlt} className={HERO.SELECTORS.IMAGE.replace('.', '')} />
+        <div
+          className={`${HERO.SELECTORS.IMAGE_WRAPPER.replace('.', '')} ${imageColClassName || ''} ${parts?.imageWrapper?.className || ''}`.trim()}
+          style={{ ...imageColStyle, ...parts?.imageWrapper?.style }}
+        >
+          <img
+            src={imageSrc}
+            alt={imageAlt}
+            className={`${HERO.SELECTORS.IMAGE.replace('.', '')} ${parts?.image?.className || ''}`.trim()}
+            style={parts?.image?.style}
+          />
         </div>
       );
     }
 
     return (
-      <div className={generateImageColClass()}>
-        <img src={imageSrc} alt={imageAlt} className={HERO.SELECTORS.IMAGE.replace('.', '')} />
+      <div
+        className={`${generateImageColClass(imageColSize, imageColClassName)} ${parts?.imageWrapper?.className || ''}`.trim()}
+        style={{ ...imageColStyle, ...parts?.imageWrapper?.style }}
+      >
+        <img
+          src={imageSrc}
+          alt={imageAlt}
+          className={`${HERO.SELECTORS.IMAGE.replace('.', '')} ${parts?.image?.className || ''}`.trim()}
+          style={parts?.image?.style}
+        />
       </div>
     );
   };
@@ -263,7 +517,12 @@ export const Hero: React.FC<HeroProps> = ({
     if (alignment === 'left') {
       return (
         <>
-          <div className={generateContentColClass()}>{renderContent()}</div>
+          <div
+            className={generateContentColClass(contentColSize, contentColClassName)}
+            style={contentColStyle}
+          >
+            {renderContent()}
+          </div>
           {renderForegroundImage()}
         </>
       );
@@ -273,7 +532,12 @@ export const Hero: React.FC<HeroProps> = ({
     return (
       <>
         {renderForegroundImage()}
-        <div className={generateContentColClass()}>{renderContent()}</div>
+        <div
+          className={generateContentColClass(contentColSize, contentColClassName)}
+          style={contentColStyle}
+        >
+          {renderContent()}
+        </div>
       </>
     );
   };
@@ -281,17 +545,30 @@ export const Hero: React.FC<HeroProps> = ({
   return (
     <div
       ref={heroRef as React.LegacyRef<HTMLDivElement>}
-      className={generateHeroClassNames(className)}
-      style={heroStyle}
+      className={`${generateHeroClassNames(className)} ${parts?.root?.className || ''}`.trim()}
+      style={{ ...heroStyle, ...parts?.root?.style }}
       data-parallax={parallax ? 'true' : undefined}
       data-parallax-intensity={parallax ? parallaxIntensity : undefined}
+      {...rest}
     >
+      {backgroundElement}
       {renderBackground()}
-      <div className={`${HERO.SELECTORS.CONTAINER.replace('.', '')} o-container`}>
+      <div
+        className={`${HERO.SELECTORS.CONTAINER.replace('.', '')} o-container ${parts?.container?.className || ''}`.trim()}
+        style={parts?.container?.style}
+      >
         {children ? (
-          <div className={HERO.SELECTORS.GRID.replace('.', '')}>{children}</div>
+          <div
+            className={`${HERO.SELECTORS.GRID.replace('.', '')} ${parts?.grid?.className || ''}`.trim()}
+            style={parts?.grid?.style}
+          >
+            {children}
+          </div>
         ) : useGridLayout ? (
-          <div className={`${HERO.SELECTORS.GRID.replace('.', '')} o-grid`}>
+          <div
+            className={`${HERO.SELECTORS.GRID.replace('.', '')} o-grid ${parts?.grid?.className || ''}`.trim()}
+            style={parts?.grid?.style}
+          >
             {renderGridContent()}
           </div>
         ) : (
@@ -305,6 +582,14 @@ export const Hero: React.FC<HeroProps> = ({
   );
 };
 
+Hero.Title = HeroTitle;
+Hero.Subtitle = HeroSubtitle;
+Hero.Text = HeroText;
+Hero.Actions = HeroActions;
+Hero.Content = HeroContent;
+Hero.Image = HeroImage;
+Hero.Background = HeroBackground;
+
 export type { HeroProps };
 
 Hero.displayName = 'Hero';

package/src/components/Icon/index.ts

@@ -1,2 +1,8 @@
-export { Icon, type IconProps, type IconSize, type IconWeight, type PhosphorIconsType } from './Icon';
+export {
+  Icon,
+  type IconProps,
+  type IconSize,
+  type IconWeight,
+  type PhosphorIconsType,
+} from './Icon';
 export { default } from './Icon';

package/src/components/List/List.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { List } from './List';
+
+describe('List Component', () => {
+  it('renders legacy items wrapped in li', () => {
+    render(
+      <List>
+        <span>Item 1</span>
+        <span>Item 2</span>
+      </List>
+    );
+
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0]).toHaveTextContent('Item 1');
+    expect(listItems[0]).toHaveClass('c-list__item');
+  });
+
+  it('renders List.Item components directly', () => {
+    render(
+      <List>
+        <List.Item>Item 1</List.Item>
+        <List.Item className="custom-class">Item 2</List.Item>
+      </List>
+    );
+
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0]).toHaveTextContent('Item 1');
+    expect(listItems[0]).toHaveClass('c-list__item');
+    expect(listItems[1]).toHaveTextContent('Item 2');
+    expect(listItems[1]).toHaveClass('c-list__item');
+    expect(listItems[1]).toHaveClass('custom-class');
+  });
+
+  it('renders mixed content correctly', () => {
+    render(
+      <List>
+        <List.Item>Compound Item</List.Item>
+        <span>Legacy Item</span>
+      </List>
+    );
+
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0]).toHaveTextContent('Compound Item');
+    expect(listItems[1]).toHaveTextContent('Legacy Item');
+  });
+
+  it('renders ordered list when variant is number', () => {
+    render(
+      <List variant="number">
+        <List.Item>Item 1</List.Item>
+      </List>
+    );
+
+    const list = screen.getByRole('list');
+    expect(list.tagName).toBe('OL');
+  });
+});