@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/components/Footer/Footer.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Footer } from './Footer';
 import { FooterSection } from './FooterSection';
@@ -10,14 +11,15 @@ const meta: Meta<typeof Footer> = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component: 'A modern, comprehensive footer component with enhanced visual effects, accessibility features, responsive design, and multiple layout variants following Atomix design patterns.',
+        component:
+          'A modern, comprehensive footer component with enhanced visual effects, accessibility features, responsive design, and multiple layout variants. Features include design token integration, improved hover effects, modern gradients, and comprehensive accessibility support following Atomix design patterns.',
       },
     },
   },
   argTypes: {
     layout: {
       control: 'select',
-      options: ['columns', 'centered', 'minimal', 'stacked'],
+      options: ['columns', 'centered', 'minimal', 'stacked', 'flexible', 'sidebar', 'wide'],
       description: 'Footer layout variant',
     },
     variant: {
@@ -70,49 +72,49 @@ const SampleFooterContent = () => (
       <FooterLink href="/product3">UI/UX Design</FooterLink>
       <FooterLink href="/product4">Consulting</FooterLink>
     </FooterSection>
-    
+
     <FooterSection title="Company">
       <FooterLink href="/about">About Us</FooterLink>
       <FooterLink href="/careers">Careers</FooterLink>
       <FooterLink href="/blog">Blog</FooterLink>
       <FooterLink href="/contact">Contact</FooterLink>
     </FooterSection>
-    
-    <FooterSection title="Support">
-      <FooterLink href="/help">Help Center</FooterLink>
-      <FooterLink href="/docs">Documentation</FooterLink>
-      <FooterLink href="/community">Community</FooterLink>
-      <FooterLink href="/status">Status</FooterLink>
+
+    <FooterSection title="Company">
+      <FooterLink href="/about">About Us</FooterLink>
+      <FooterLink href="/careers">Careers</FooterLink>
+      <FooterLink href="/blog">Blog</FooterLink>
+      <FooterLink href="/contact">Contact</FooterLink>
     </FooterSection>
-    
-    <FooterSection title="Legal">
-      <FooterLink href="/privacy">Privacy Policy</FooterLink>
-      <FooterLink href="/terms">Terms of Service</FooterLink>
-      <FooterLink href="/cookies">Cookie Policy</FooterLink>
-      <FooterLink href="/licenses">Licenses</FooterLink>
+
+    <FooterSection title="Company">
+      <FooterLink href="/about">About Us</FooterLink>
+      <FooterLink href="/careers">Careers</FooterLink>
+      <FooterLink href="/blog">Blog</FooterLink>
+      <FooterLink href="/contact">Contact</FooterLink>
     </FooterSection>
   </>
 );
 
-export const Default: Story = {
+const LayoutTemplate: Story = {
   args: {
     brand: 'Atomix',
-    brandDescription: 'A modern, accessible design system and component library for building beautiful user interfaces.',
-    copyright: '© 2024 Atomix. All rights reserved.',
+    brandDescription: 'A modern design system for building accessible web applications.',
+    copyright: '© 2024 Atomix UI. All rights reserved.',
     layout: 'columns',
     variant: 'primary',
     size: 'md',
-    socialLinks: sampleSocialLinks,
     showNewsletter: false,
     showBackToTop: false,
     showDivider: true,
     sticky: false,
+    socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
-      <div style={{ flex: 1, padding: '2rem', backgroundColor: 'var(--atomix-surface)' }}>
-        <h1>Page Content</h1>
-        <p>This is sample page content to demonstrate the footer component.</p>
+      <div style={{ flex: 1, backgroundColor: 'var(--atomix-brand-bg-subtle)', padding: '2rem' }}>
+        <h1>Main Content</h1>
+        <p>This is sample page content to demonstrate the footer in context.</p>
       </div>
       <Footer {...args}>
         <SampleFooterContent />
@@ -121,12 +123,25 @@ export const Default: Story = {
   ),
 };
 
+export const Default: Story = {
+  ...LayoutTemplate,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Default footer configuration with modern styling, design tokens, and enhanced visual effects.',
+      },
+    },
+  },
+};
+
 export const WithNewsletter: Story = {
   args: {
     ...Default.args,
     showNewsletter: true,
     newsletterTitle: 'Stay in the Loop',
-    newsletterDescription: 'Get the latest updates, articles, and resources delivered to your inbox.',
+    newsletterDescription:
+      'Get the latest updates, articles, and resources delivered to your inbox.',
     onNewsletterSubmit: (email: string) => {
       console.log('Newsletter signup:', email);
       alert(`Thank you for subscribing with ${email}!`);
@@ -148,28 +163,29 @@ export const WithBackToTop: Story = {
 };
 
 export const Centered: Story = {
+  ...LayoutTemplate,
   args: {
-    ...Default.args,
+    ...LayoutTemplate.args,
     layout: 'centered',
     showNewsletter: true,
     showBackToTop: true,
   },
-  render: Default.render,
 };
 
 export const Minimal: Story = {
+  ...LayoutTemplate,
   args: {
-    brand: 'Atomix',
-    copyright: '© 2024 Atomix. All rights reserved.',
+    ...LayoutTemplate.args,
     layout: 'minimal',
     variant: 'light',
     size: 'sm',
     socialLinks: sampleSocialLinks.slice(0, 3),
     showDivider: false,
+    showNewsletter: false,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
-      <div style={{ flex: 1, padding: '2rem', backgroundColor: 'var(--atomix-surface)' }}>
+      <div style={{ flex: 1, backgroundColor: 'var(--atomix-brand-bg-subtle)' }}>
         <h1>Page Content</h1>
         <p>This is sample page content with a minimal footer.</p>
       </div>
@@ -185,13 +201,13 @@ export const Minimal: Story = {
 };
 
 export const Stacked: Story = {
+  ...LayoutTemplate,
   args: {
-    ...Default.args,
+    ...LayoutTemplate.args,
     layout: 'stacked',
     showNewsletter: true,
     showBackToTop: true,
   },
-  render: Default.render,
 };
 
 export const DarkVariant: Story = {
@@ -239,16 +255,16 @@ export const Sticky: Story = {
     size: 'sm',
     layout: 'minimal',
   },
-  render: (args) => (
+  render: (args: any) => (
     <div style={{ height: '200vh', backgroundColor: 'var(--atomix-surface)' }}>
       <div style={{ padding: '2rem' }}>
         <h1>Scroll down to see sticky footer</h1>
         <p>This page is tall enough to demonstrate the sticky footer behavior.</p>
         {Array.from({ length: 20 }, (_, i) => (
           <p key={i}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor 
-            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
-            nostrud exercitation ullamco laboris.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris.
           </p>
         ))}
       </div>
@@ -264,9 +280,9 @@ export const CollapsibleSections: Story = {
     ...Default.args,
     showNewsletter: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
-      <div style={{ flex: 1, padding: '2rem', backgroundColor: 'var(--atomix-surface)' }}>
+      <div style={{ flex: 1, backgroundColor: 'var(--atomix-brand-bg-subtle)' }}>
         <h1>Collapsible Footer Sections</h1>
         <p>Resize the window to mobile size to see collapsible sections.</p>
       </div>
@@ -276,18 +292,12 @@ export const CollapsibleSections: Story = {
           <FooterLink href="/product2">Mobile Apps</FooterLink>
           <FooterLink href="/product3">UI/UX Design</FooterLink>
         </FooterSection>
-        
+
         <FooterSection title="Company" collapsible>
           <FooterLink href="/about">About Us</FooterLink>
           <FooterLink href="/careers">Careers</FooterLink>
           <FooterLink href="/blog">Blog</FooterLink>
         </FooterSection>
-        
-        <FooterSection title="Support" collapsible>
-          <FooterLink href="/help">Help Center</FooterLink>
-          <FooterLink href="/docs">Documentation</FooterLink>
-          <FooterLink href="/community">Community</FooterLink>
-        </FooterSection>
       </Footer>
     </div>
   ),
@@ -303,24 +313,34 @@ export const WithExternalLinks: Story = {
       { platform: 'discord' as const, url: 'https://discord.gg/company' },
     ],
   },
-  render: (args) => (
+  render: (args: any) => (
     <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
-      <div style={{ flex: 1, padding: '2rem', backgroundColor: 'var(--atomix-surface)' }}>
+      <div style={{ flex: 1, backgroundColor: 'var(--atomix-brand-bg-subtle)' }}>
         <h1>Modern Social Links</h1>
         <p>Footer with enhanced social platforms and modern styling.</p>
       </div>
       <Footer {...args}>
         <FooterSection title="External Resources">
-          <FooterLink href="https://github.com" external>GitHub</FooterLink>
-          <FooterLink href="https://stackoverflow.com" external>Stack Overflow</FooterLink>
-          <FooterLink href="https://developer.mozilla.org" external>MDN Docs</FooterLink>
+          <FooterLink href="https://github.com" external>
+            GitHub
+          </FooterLink>
+          <FooterLink href="https://stackoverflow.com" external>
+            Stack Overflow
+          </FooterLink>
+          <FooterLink href="https://developer.mozilla.org" external>
+            MDN Docs
+          </FooterLink>
         </FooterSection>
-        
+
         <FooterSection title="Internal Links">
           <FooterLink href="/about">About Us</FooterLink>
           <FooterLink href="/contact">Contact</FooterLink>
-          <FooterLink href="/blog" active>Blog</FooterLink>
-          <FooterLink href="/disabled" disabled>Disabled Link</FooterLink>
+          <FooterLink href="/blog" active>
+            Blog
+          </FooterLink>
+          <FooterLink href="/disabled" disabled>
+            Disabled Link
+          </FooterLink>
         </FooterSection>
       </Footer>
     </div>
@@ -335,9 +355,15 @@ export const ModernGradients: Story = {
     showBackToTop: true,
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
-      <div style={{ flex: 1, padding: '2rem', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
+      <div
+        style={{
+          flex: 1,
+          padding: '2rem',
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        }}
+      >
         <h1 style={{ color: 'white' }}>Modern Design</h1>
         <p style={{ color: 'white' }}>Showcasing modern gradients and enhanced visual effects.</p>
       </div>
@@ -348,15 +374,68 @@ export const ModernGradients: Story = {
   ),
 };
 
+export const DesignTokensShowcase: Story = {
+  args: {
+    ...Default.args,
+    brand: 'Design Tokens',
+    brandDescription:
+      'Showcasing consistent design tokens, modern hover effects, and enhanced visual styling throughout the footer component.',
+    showNewsletter: true,
+    showBackToTop: true,
+    socialLinks: sampleSocialLinks,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates the use of design tokens for consistent styling, enhanced hover effects, modern gradients, and improved accessibility features.',
+      },
+    },
+  },
+  render: (args: any) => (
+    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ flex: 1, backgroundColor: 'var(--atomix-brand-bg-subtle)' }}>
+        <h1>Design Token Integration</h1>
+        <p>
+          This footer demonstrates consistent use of design tokens for colors, spacing, shadows, and
+          typography. Hover over elements to see enhanced visual effects.
+        </p>
+        <ul>
+          <li>✨ Global CSS variables for box shadows</li>
+          <li>🎨 Design token-based colors and opacity</li>
+          <li>📏 Consistent spacing using rem() function</li>
+          <li>🔄 Smooth transitions and hover effects</li>
+          <li>♿ Enhanced accessibility features</li>
+        </ul>
+      </div>
+      <Footer {...args}>
+        <FooterSection title="Design System">
+          <FooterLink href="/tokens">Design Tokens</FooterLink>
+          <FooterLink href="/components">Components</FooterLink>
+          <FooterLink href="/guidelines">Guidelines</FooterLink>
+          <FooterLink href="/accessibility">Accessibility</FooterLink>
+        </FooterSection>
+
+        <FooterSection title="Development">
+          <FooterLink href="/scss">SCSS Architecture</FooterLink>
+          <FooterLink href="/css-vars">CSS Variables</FooterLink>
+          <FooterLink href="/responsive">Responsive Design</FooterLink>
+          <FooterLink href="/performance">Performance</FooterLink>
+        </FooterSection>
+      </Footer>
+    </div>
+  ),
+};
+
 export const AccessibilityFocused: Story = {
   args: {
     ...Default.args,
     showNewsletter: true,
     showBackToTop: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
-      <div style={{ flex: 1, padding: '2rem', backgroundColor: 'var(--atomix-surface)' }}>
+      <div style={{ flex: 1, backgroundColor: 'var(--atomix-brand-bg-subtle)' }}>
         <h1>Accessibility Features</h1>
         <p>Tab through the footer elements to see enhanced focus states and keyboard navigation.</p>
       </div>
@@ -374,9 +453,9 @@ export const ResponsiveShowcase: Story = {
     showNewsletter: true,
     showBackToTop: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
-      <div style={{ flex: 1, padding: '2rem', backgroundColor: 'var(--atomix-surface)' }}>
+      <div style={{ flex: 1, backgroundColor: 'var(--atomix-brand-bg-subtle)' }}>
         <h1>Responsive Design</h1>
         <p>Resize the viewport to see responsive grid layouts and collapsible sections.</p>
       </div>
@@ -385,4 +464,52 @@ export const ResponsiveShowcase: Story = {
       </Footer>
     </div>
   ),
-};
+};
+
+export const Flexible: Story = {
+  ...LayoutTemplate,
+  args: {
+    ...LayoutTemplate.args,
+    layout: 'flexible',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Flexible layout that automatically adapts to content width and screen size. Perfect for dynamic content scenarios.',
+      },
+    },
+  },
+};
+
+export const Sidebar: Story = {
+  ...LayoutTemplate,
+  args: {
+    ...LayoutTemplate.args,
+    layout: 'sidebar',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Sidebar layout with brand and newsletter in a left sidebar and content sections in the main area.',
+      },
+    },
+  },
+};
+
+export const Wide: Story = {
+  ...LayoutTemplate,
+  args: {
+    ...LayoutTemplate.args,
+    layout: 'wide',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Wide layout optimized for large screens with generous spacing and extended content areas.',
+      },
+    },
+  },
+};

package/src/components/Footer/Footer.test.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Footer } from './Footer';
+import { FooterSection } from './FooterSection';
+import { FooterLink } from './FooterLink';
+
+describe('Footer', () => {
+  const defaultProps = {
+    brand: 'Atomix',
+    copyright: '© 2024 Atomix UI. All rights reserved.',
+  };
+
+  test('renders footer with brand and copyright', () => {
+    render(<Footer {...defaultProps} />);
+
+    expect(screen.getByText('Atomix')).toBeInTheDocument();
+    expect(screen.getByText('© 2024 Atomix UI. All rights reserved.')).toBeInTheDocument();
+  });
+
+  test('renders footer with columns layout by default', () => {
+    render(
+      <Footer {...defaultProps}>
+        <FooterSection title="Products">
+          <FooterLink href="#product1">Product 1</FooterLink>
+        </FooterSection>
+      </Footer>
+    );
+
+    const footer = screen.getByRole('contentinfo');
+    expect(footer).toHaveClass('c-footer--columns');
+  });
+
+  test('renders footer with centered layout', () => {
+    render(
+      <Footer {...defaultProps} layout="centered">
+        <FooterSection title="Products">
+          <FooterLink href="#product1">Product 1</FooterLink>
+        </FooterSection>
+      </Footer>
+    );
+
+    const footer = screen.getByRole('contentinfo');
+    expect(footer).toHaveClass('c-footer--centered');
+  });
+
+  test('renders footer with minimal layout', () => {
+    render(
+      <Footer {...defaultProps} layout="minimal">
+        <FooterSection title="Products">
+          <FooterLink href="#product1">Product 1</FooterLink>
+        </FooterSection>
+      </Footer>
+    );
+
+    const footer = screen.getByRole('contentinfo');
+    expect(footer).toHaveClass('c-footer--minimal');
+  });
+
+  test('renders footer with stacked layout', () => {
+    render(
+      <Footer {...defaultProps} layout="stacked">
+        <FooterSection title="Products">
+          <FooterLink href="#product1">Product 1</FooterLink>
+        </FooterSection>
+      </Footer>
+    );
+
+    const footer = screen.getByRole('contentinfo');
+    expect(footer).toHaveClass('c-footer--stacked');
+  });
+
+  test('renders footer with flexible layout', () => {
+    render(
+      <Footer {...defaultProps} layout="flexible">
+        <FooterSection title="Products">
+          <FooterLink href="#product1">Product 1</FooterLink>
+        </FooterSection>
+      </Footer>
+    );
+
+    const footer = screen.getByRole('contentinfo');
+    expect(footer).toHaveClass('c-footer--flexible');
+  });
+
+  test('renders footer with sidebar layout', () => {
+    render(
+      <Footer {...defaultProps} layout="sidebar">
+        <FooterSection title="Products">
+          <FooterLink href="#product1">Product 1</FooterLink>
+        </FooterSection>
+      </Footer>
+    );
+
+    const footer = screen.getByRole('contentinfo');
+    expect(footer).toHaveClass('c-footer--sidebar');
+  });
+
+  test('renders footer with wide layout', () => {
+    render(
+      <Footer {...defaultProps} layout="wide">
+        <FooterSection title="Products">
+          <FooterLink href="#product1">Product 1</FooterLink>
+        </FooterSection>
+      </Footer>
+    );
+
+    const footer = screen.getByRole('contentinfo');
+    expect(footer).toHaveClass('c-footer--wide');
+  });
+
+  test('renders newsletter section when showNewsletter is true', () => {
+    render(<Footer {...defaultProps} showNewsletter />);
+
+    expect(screen.getByText('Stay Updated')).toBeInTheDocument();
+  });
+
+  test('does not render newsletter section when showNewsletter is false', () => {
+    render(<Footer {...defaultProps} showNewsletter={false} />);
+
+    expect(screen.queryByText('Stay Updated')).not.toBeInTheDocument();
+  });
+
+  test('renders social links when provided', () => {
+    const socialLinks = [
+      { platform: 'twitter', url: 'https://twitter.com/example' },
+      { platform: 'github', url: 'https://github.com/example' },
+    ];
+
+    render(<Footer {...defaultProps} socialLinks={socialLinks} />);
+
+    const socialLinksContainer = screen.getByTestId('footer-social-links');
+    expect(socialLinksContainer.children).toHaveLength(2);
+  });
+});