@shohojdhara/atomix 0.3.15 → 0.4.1

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: {
@@ -277,12 +279,50 @@ export const BasicUsage: Story = {
   },
 };
 
+/**
+ * Hero using Compound Component Pattern
+ */
+export const CompoundUsage: Story = {
+  render: (args) => (
+    <Hero {...args}>
+      <Hero.Content>
+        <Hero.Title level="h1">Compound Component Pattern</Hero.Title>
+        <Hero.Subtitle>Fully Customizable Structure</Hero.Subtitle>
+        <Hero.Text>
+          This example demonstrates the new Compound Component pattern, allowing full control over the internal structure of the Hero component.
+        </Hero.Text>
+        <Hero.Actions>
+          <Button variant="primary" className="u-mr-3">
+            Get Started
+          </Button>
+          <Button variant="outline">Learn More</Button>
+        </Hero.Actions>
+      </Hero.Content>
+    </Hero>
+  ),
+  args: {
+    fullViewportHeight: true,
+    alignment: 'center',
+    backgroundImageSrc: 'https://picsum.photos/id/1015/1920/1080',
+    title: '', // Ignored but kept for types
+    showOverlay: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Using the Compound Component pattern for maximum flexibility.',
+      },
+    },
+  },
+};
+
 export const WithImage: Story = {
   args: {
     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 +341,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 +357,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 +436,6 @@ export const WithCustomGlassEffect: Story = {
       cornerRadius: 45,
       mode: 'standard',
       elasticity: 0.2,
-      showBorderEffects: true,
-      showHoverEffects: true,
       onClick: () => {
         console.log('Clicked!');
       },
@@ -870,7 +913,7 @@ export const PremiumShowcase: Story = {
       aberrationIntensity: 0.5,
       cornerRadius: 20,
       overLight: true,
-      mode: 'advanced',
+      mode: 'standard',
     },
     actions: (
       <>
@@ -923,7 +966,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 +989,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.test.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import Hero from './Hero';
+
+// Mock AtomixGlass component
+vi.mock('../AtomixGlass/AtomixGlass', () => ({
+  AtomixGlass: ({ children, className }: any) => (
+    <div data-testid="atomix-glass" className={className}>
+      {children}
+    </div>
+  ),
+}));
+
+describe('Hero Component', () => {
+  describe('Monolithic Usage', () => {
+    it('renders title and subtitle correctly', () => {
+      render(<Hero title="Test Title" subtitle="Test Subtitle" />);
+
+      expect(screen.getByText('Test Title')).toBeInTheDocument();
+      expect(screen.getByText('Test Subtitle')).toBeInTheDocument();
+    });
+
+    it('renders text content correctly', () => {
+      render(<Hero title="Title" text="Test Description" />);
+
+      expect(screen.getByText('Test Description')).toBeInTheDocument();
+    });
+
+    it('renders background image correctly', () => {
+      const bgSrc = 'test-bg.jpg';
+      render(<Hero title="Title" backgroundImageSrc={bgSrc} />);
+
+      const bgImage = screen.getByAltText('Background');
+      expect(bgImage).toBeInTheDocument();
+      expect(bgImage).toHaveAttribute('src', bgSrc);
+    });
+
+    it('renders foreground image correctly', () => {
+      const imgSrc = 'test-img.jpg';
+      render(<Hero title="Title" imageSrc={imgSrc} imageAlt="Foreground Image" />);
+
+      const image = screen.getByAltText('Foreground Image');
+      expect(image).toBeInTheDocument();
+      expect(image).toHaveAttribute('src', imgSrc);
+    });
+
+    it('renders actions correctly', () => {
+      render(
+        <Hero
+          title="Title"
+          actions={<button>Click Me</button>}
+        />
+      );
+
+      expect(screen.getByText('Click Me')).toBeInTheDocument();
+    });
+
+    it('renders children correctly', () => {
+      render(
+        <Hero title="Title">
+          <div data-testid="child-content">Child Content</div>
+        </Hero>
+      );
+
+      expect(screen.getByTestId('child-content')).toBeInTheDocument();
+    });
+  });
+
+  describe('Compound Component Usage', () => {
+    it('renders Hero.Title, Hero.Subtitle, Hero.Text correctly', () => {
+      render(
+        <Hero title="">
+          <Hero.Content>
+            <Hero.Title>Compound Title</Hero.Title>
+            <Hero.Subtitle>Compound Subtitle</Hero.Subtitle>
+            <Hero.Text>Compound Text</Hero.Text>
+          </Hero.Content>
+        </Hero>
+      );
+
+      expect(screen.getByText('Compound Title')).toBeInTheDocument();
+      expect(screen.getByText('Compound Title').tagName).toBe('H1');
+      expect(screen.getByText('Compound Subtitle')).toBeInTheDocument();
+      expect(screen.getByText('Compound Text')).toBeInTheDocument();
+    });
+
+    it('renders Hero.Actions correctly', () => {
+      render(
+        <Hero title="">
+          <Hero.Content>
+            <Hero.Actions>
+              <button>Action</button>
+            </Hero.Actions>
+          </Hero.Content>
+        </Hero>
+      );
+
+      expect(screen.getByText('Action')).toBeInTheDocument();
+    });
+
+    it('renders Hero.Image correctly', () => {
+      render(
+        <Hero title="">
+          <Hero.Image src="compound-img.jpg" alt="Compound Image" />
+        </Hero>
+      );
+
+      const img = screen.getByAltText('Compound Image');
+      expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute('src', 'compound-img.jpg');
+    });
+
+    it('renders Hero.Background via backgroundElement prop', () => {
+      render(
+        <Hero
+          title="Title"
+          backgroundElement={<Hero.Background src="bg.jpg" data-testid="custom-bg" />}
+        />
+      );
+
+      const bg = screen.getByTestId('custom-bg');
+      expect(bg).toBeInTheDocument();
+      // Verify it renders the image inside
+      const img = screen.getByAltText('Background');
+      expect(img).toHaveAttribute('src', 'bg.jpg');
+    });
+
+    it('Hero.Content supports glass prop', () => {
+      render(
+        <Hero title="">
+          <Hero.Content glass>
+             Glass Content
+          </Hero.Content>
+        </Hero>
+      );
+
+      expect(screen.getByTestId('atomix-glass')).toBeInTheDocument();
+      expect(screen.getByText('Glass Content')).toBeInTheDocument();
+    });
+  });
+});