@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/Hero/Hero.tsx

@@ -16,7 +16,11 @@ export const Hero: React.FC<HeroProps> = ({
   fullViewportHeight = false,
   actions,
   imageColSize = 7,
+  imageColClassName,
+  imageColStyle,
   contentColSize = 5,
+  contentColClassName,
+  contentColStyle,
   contentWidth,
   className = '',
   style,
@@ -31,7 +35,13 @@ export const Hero: React.FC<HeroProps> = ({
     muted: true,
   },
   backgroundSlider,
-}) => {
+  headingLevel = 'h1',
+  reverseOnMobile = false,
+  parts,
+  ...rest
+}: HeroProps) => {
+  // Define dynamic heading tag
+  const HeadingTag = headingLevel;
   const {
     generateHeroClassNames,
     generateImageColClass,
@@ -44,6 +54,7 @@ export const Hero: React.FC<HeroProps> = ({
     backgroundSlider: sliderHook,
     hasBackgroundSlider,
   } = useHero({
+    title,
     alignment,
     imageColSize,
     contentColSize,
@@ -56,6 +67,7 @@ export const Hero: React.FC<HeroProps> = ({
     parallaxIntensity,
     videoBackground,
     backgroundSlider,
+    reverseOnMobile,
   });
 
   // Create custom style for hero element with content width if provided
@@ -95,16 +107,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 +128,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 +137,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 +179,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 +191,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 +250,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 +264,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 +302,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 +353,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 +387,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 +402,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 +415,29 @@ 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}
     >
       {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>
         ) : (

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.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import React from 'react';
 import { List } from './List';
 import { ListGroup } from './ListGroup';
@@ -10,8 +11,61 @@ const meta = {
     layout: 'centered',
     docs: {
       description: {
-        component:
-          'The List component provides a flexible way to display ordered or unordered lists of items. It supports multiple style variants including default, dashed, numbered, and text styles. Lists can be used for navigation, content organization, or any scenario requiring structured item display.',
+        component: `
+# List
+
+## Overview
+
+List provides a flexible way to display ordered or unordered lists of items. It supports multiple style variants including default, dashed, numbered, and text styles. Lists can be used for navigation, content organization, or any scenario requiring structured item display.
+
+## Features
+
+- Multiple style variants (default, dash, number, text)
+- Grouped lists with ListGroup component
+- Compact and divided options
+- Accessible design
+- Responsive behavior
+- Customizable styling
+
+## Accessibility
+
+- Screen reader: List structure and items announced properly
+- ARIA support: Proper roles and properties for list components
+- Keyboard support: Accessible via keyboard navigation
+- Focus management: Maintains focus within list items
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<List>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</List>
+\`\`\`
+
+### With Variant
+
+\`\`\`tsx
+<List variant="number">
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</List>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| variant | 'default' \\| 'dash' \\| 'number' \\| 'text' | 'default' | List style variant |
+| children | ReactNode | - | List items content |
+| className | string | - | Additional CSS class names |
+      `,
       },
     },
   },
@@ -21,14 +75,26 @@ const meta = {
       control: { type: 'select' },
       options: ['default', 'dash', 'number', 'text'],
       description: 'List style variant',
+      table: {
+        type: { summary: '"default" | "dash" | "number" | "text"' },
+        defaultValue: { summary: 'default' },
+      },
     },
     children: {
-      control: { type: 'text' },
+      control: { type: 'object' },
       description: 'List items content',
+      table: {
+        type: { summary: 'ReactNode' },
+        defaultValue: { summary: '-' },
+      },
     },
     className: {
       control: 'text',
       description: 'Additional CSS class names',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
   },
 } satisfies Meta<typeof List>;
@@ -60,6 +126,78 @@ const createListSection = (title: string, variant: string, key?: string) => (
   </div>
 );
 
+export const BasicUsage: Story = {
+  args: {
+    children: (
+      <>
+        <li>First item</li>
+        <li>Second item</li>
+        <li>Third item</li>
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic list with default styling.',
+      },
+    },
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => {
+    return (
+      <div className="u-flex u-flex-column u-gap-8">
+        {['Default', 'Dash', 'Number', 'Text'].map((title, index) => {
+          const variant = index === 0 ? 'default' : title.toLowerCase();
+          return createListSection(`${title} List`, variant, variant);
+        })}
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'List with all available style variants.',
+      },
+    },
+  },
+};
+
+export const WithListGroup: Story = {
+  render: () => {
+    const listGroupConfig = [
+      { title: 'Standard', compact: false, divided: false },
+      { title: 'Compact', compact: true, divided: false },
+      { title: 'Divided', compact: false, divided: true },
+    ];
+
+    return (
+      <div className="u-flex u-flex-column u-gap-8">
+        <div>
+          <h3 style={titleStyle}>Mixed Variants ListGroup</h3>
+          <ListGroup>
+            <List variant="dash">
+              <ListItems variant="dash" />
+            </List>
+            <List variant="number">
+              <ListItems variant="number" />
+            </List>
+          </ListGroup>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Lists grouped together using the ListGroup component.',
+      },
+    },
+  },
+};
+
 // Basic List example
 export const Basic: Story = {
   args: {

package/src/components/List/List.tsx

@@ -2,32 +2,28 @@ import React, { memo } from 'react';
 import { ListProps } from '../../lib/types/components';
 import { LIST } from '../../lib/constants/components';
 
-export const List: React.FC<ListProps> = memo(({
-  children,
-  variant = 'default',
-  className = '',
-  style,
-  ...props
-}) => {
-  // Generate CSS classes
-  const listClasses = [LIST.BASE_CLASS, variant !== 'default' && `c-list--${variant}`, className]
-    .filter(Boolean)
-    .join(' ');
+export const List: React.FC<ListProps> = memo(
+  ({ children, variant = 'default', className = '', style, ...props }) => {
+    // Generate CSS classes
+    const listClasses = [LIST.BASE_CLASS, variant !== 'default' && `c-list--${variant}`, className]
+      .filter(Boolean)
+      .join(' ');
 
-  // Determine the HTML element based on variant
-  const ListElement = ['number', 'text'].includes(variant) ? 'ol' : 'ul';
+    // Determine the HTML element based on variant
+    const ListElement = ['number', 'text'].includes(variant) ? 'ol' : 'ul';
 
-  return (
-    <ListElement className={listClasses} style={style} {...props}>
-      {React.Children.map(children, child => {
-        if (React.isValidElement(child)) {
+    return (
+      <ListElement className={listClasses} style={style} {...props}>
+        {React.Children.map(children, child => {
+          if (React.isValidElement(child)) {
+            return <li className="c-list__item">{child}</li>;
+          }
           return <li className="c-list__item">{child}</li>;
-        }
-        return <li className="c-list__item">{child}</li>;
-      })}
-    </ListElement>
-  );
-});
+        })}
+      </ListElement>
+    );
+  }
+);
 
 export type { ListProps };