@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/components/Hero/Hero.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { HERO } from '../../lib/constants/components';
 import { Button } from '../Button/Button';
-import { Hero } from './Hero';
+import { Hero, HeroProps } from './Hero';
 
 // Extract class names without the leading dots
 const HERO_CLASS = HERO.SELECTORS.HERO.replace('.', '');
@@ -24,9 +24,11 @@ const LEFT_CLASS = HERO.CLASSES.LEFT;
 const FULL_VH_CLASS = HERO.CLASSES.FULL_VH;
 
 // Define missing variables
-const demoText = 'Our design system helps you build beautiful, consistent, and accessible user interfaces faster than ever before. With a carefully crafted collection of components and guidelines, you can easily create stunning UIs that stand out.';
+const demoText =
+  'Our design system helps you build beautiful, consistent, and accessible user interfaces faster than ever before. With a carefully crafted collection of components and guidelines, you can easily create stunning UIs that stand out.';
 
-const showcaseText = 'This is an example of showcase text demonstrating the capabilities of the Atomix design system. Create beautiful interfaces with ease and consistency.';
+const showcaseText =
+  'This is an example of showcase text demonstrating the capabilities of the Atomix design system. Create beautiful interfaces with ease and consistency.';
 
 const primaryActionButtons = (
   <>
@@ -50,7 +52,7 @@ const showcaseActionButtons = (
   </>
 );
 
-const meta = {
+const meta: Meta<HeroProps> = {
   title: 'Components/Hero',
   component: Hero,
   parameters: {
@@ -195,7 +197,7 @@ Hero creates prominent banner sections typically used at the top of pages. It pr
       description: 'Show background overlay',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     fullViewportHeight: {
@@ -203,7 +205,7 @@ Hero creates prominent banner sections typically used at the top of pages. It pr
       description: 'Make hero full viewport height',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     imageColSize: {
@@ -211,7 +213,7 @@ Hero creates prominent banner sections typically used at the top of pages. It pr
       description: 'Image column size (1-12)',
       table: {
         type: { summary: 'number' },
-        defaultValue: { summary: 6 },
+        defaultValue: { summary: '6' },
       },
     },
     contentColSize: {
@@ -219,7 +221,7 @@ Hero creates prominent banner sections typically used at the top of pages. It pr
       description: 'Content column size (1-12)',
       table: {
         type: { summary: 'number' },
-        defaultValue: { summary: 6 },
+        defaultValue: { summary: '6' },
       },
     },
     contentWidth: {
@@ -235,7 +237,7 @@ Hero creates prominent banner sections typically used at the top of pages. It pr
       description: 'Enable parallax effect on background image',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     parallaxIntensity: {
@@ -243,7 +245,7 @@ Hero creates prominent banner sections typically used at the top of pages. It pr
       description: 'Parallax effect intensity (0-1)',
       table: {
         type: { summary: 'number' },
-        defaultValue: { summary: 0.5 },
+        defaultValue: { summary: '0.5' },
       },
     },
     videoBackground: {
@@ -255,10 +257,10 @@ Hero creates prominent banner sections typically used at the top of pages. It pr
       },
     },
   },
-} satisfies Meta<typeof Hero>;
+} satisfies Meta<HeroProps>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<HeroProps>;
 
 export const BasicUsage: Story = {
   args: {
@@ -282,7 +284,8 @@ export const WithImage: Story = {
     title: 'Beautiful Interfaces',
     subtitle: 'Crafted with Atomix',
     text: 'Create stunning user experiences with our carefully designed components and guidelines.',
-    imageSrc: 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
+    imageSrc:
+      'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
     imageAlt: 'Laptop with design interface',
     alignment: 'left',
     fullViewportHeight: false,
@@ -301,7 +304,8 @@ export const WithBackgroundImage: Story = {
     title: 'Adventure Awaits',
     subtitle: 'Begin Your Journey',
     text: 'Explore new possibilities and create amazing products with our design system.',
-    backgroundImageSrc: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
+    backgroundImageSrc:
+      'https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
     showOverlay: true,
     alignment: 'center',
     fullViewportHeight: true,
@@ -316,11 +320,15 @@ export const WithBackgroundImage: Story = {
 };
 
 export const WithActions: Story = {
-  render: (args) => (
+  render: args => (
     <Hero {...args}>
       <div className={ACTIONS_CLASS}>
-        <Button variant="primary" size="lg" className="u-mr-3">Get Started</Button>
-        <Button variant="secondary" size="lg">Learn More</Button>
+        <Button variant="primary" size="lg" className="u-mr-3">
+          Get Started
+        </Button>
+        <Button variant="secondary" size="lg">
+          Learn More
+        </Button>
       </div>
     </Hero>
   ),
@@ -391,8 +399,6 @@ export const WithCustomGlassEffect: Story = {
       cornerRadius: 45,
       mode: 'standard',
       elasticity: 0.2,
-      showBorderEffects: true,
-      showHoverEffects: true,
       onClick: () => {
         console.log('Clicked!');
       },
@@ -870,7 +876,7 @@ export const PremiumShowcase: Story = {
       aberrationIntensity: 0.5,
       cornerRadius: 20,
       overLight: true,
-      mode: 'advanced',
+      mode: 'standard',
     },
     actions: (
       <>
@@ -923,7 +929,8 @@ export const PremiumShowcase: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Premium showcase combining multiple advanced features: glass effect, background slider with videos, full viewport height, and interactive elements.',
+        story:
+          'Premium showcase combining multiple advanced features: glass effect, background slider with videos, full viewport height, and interactive elements.',
       },
     },
   },
@@ -945,8 +952,34 @@ export const MinimalistDesign: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Minimalist design focusing on typography and content, with subtle animations and refined aesthetics.',
+        story:
+          'Minimalist design focusing on typography and content, with subtle animations and refined aesthetics.',
+      },
+    },
+  },
+};
+
+/**
+ * Hero with custom column styles
+ */
+export const WithCustomColumnStyles: Story = {
+  args: {
+    ...Default.args,
+    title: 'Customized Columns',
+    text: 'This hero uses custom classes and inline styles on its layout columns. The content column has a custom background and padding, while the image column has a custom rotation effect.',
+    imageSrc: 'https://picsum.photos/id/20/712/500',
+    contentColClassName: 'u-bg-primary-50 u-p-6 u-rounded-lg',
+    contentColStyle: { border: '2px solid var(--atomix-color-primary-500)' },
+    imageColClassName: 'u-shadow-lg',
+    imageColStyle: { transform: 'rotate(-2deg)', transition: 'transform 0.3s ease' },
+    alignment: 'left',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates the use of imageColClassName, imageColStyle, contentColClassName, and contentColStyle to individually style the layout columns.',
       },
     },
   },
-};
+};

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.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 };
 

package/src/components/Modal/Modal.stories.tsx

@@ -649,7 +649,8 @@ export const GlassModalSizes: Story = {
             The glass effect adapts to different modal sizes while maintaining its visual appeal.
           </p>
           <p>
-            The glass effect enhances the modal's appearance, making it visually appealing and  easier to read.
+            The glass effect enhances the modal's appearance, making it visually appealing and
+            easier to read.
           </p>
         </Modal>
       </div>