@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/components/Accordion/Accordion.tsx

@@ -48,6 +48,11 @@ export interface AccordionProps extends BaseComponentProps {
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
    */
   glass?: AtomixGlassProps | boolean;
+
+  /**
+   * Custom style for the accordion
+   */
+  style?: React.CSSProperties;
 }
 
 export const Accordion: React.FC<AccordionProps> = ({
@@ -60,6 +65,7 @@ export const Accordion: React.FC<AccordionProps> = ({
   iconPosition = 'right',
   icon,
   className = '',
+  style,
   glass,
 }) => {
   // Generate unique IDs for accessibility
@@ -86,7 +92,7 @@ export const Accordion: React.FC<AccordionProps> = ({
 
   // Default icon
   const defaultIcon = (
-    <i className="c-accordion__icon">
+    <i className="c-accordion__icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"
@@ -97,6 +103,8 @@ export const Accordion: React.FC<AccordionProps> = ({
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
+        aria-hidden="true"
+        focusable="false"
       >
         <polyline points="6 9 12 15 18 9"></polyline>
       </svg>
@@ -104,13 +112,17 @@ export const Accordion: React.FC<AccordionProps> = ({
   );
 
   const accordionContent = (
-    <div className={generateClassNames(className) + (glass ? ' c-accordion--glass' : '')}>
+    <div
+      className={generateClassNames(className) + (glass ? ' c-accordion--glass' : '')}
+      style={style}
+    >
       <button
         id={buttonId}
         className={generateHeaderClassNames()}
         onClick={toggle}
         aria-expanded={state.isOpen}
         aria-controls={panelId}
+        aria-disabled={disabled}
         disabled={disabled}
         type="button"
       >
@@ -120,11 +132,14 @@ export const Accordion: React.FC<AccordionProps> = ({
       <div
         id={panelId}
         className={ACCORDION.SELECTORS.PANEL.replace('.', '')}
-        ref={panelRef}
+        ref={panelRef as React.RefObject<HTMLDivElement>}
         role="region"
         aria-labelledby={buttonId}
       >
-        <div className={ACCORDION.SELECTORS.BODY.replace('.', '')} ref={contentRef}>
+        <div
+          className={ACCORDION.SELECTORS.BODY.replace('.', '')}
+          ref={contentRef as React.RefObject<HTMLDivElement>}
+        >
           {children}
         </div>
       </div>
@@ -135,20 +150,12 @@ export const Accordion: React.FC<AccordionProps> = ({
     // Default glass settings for accordions
     const defaultGlassProps = {
       displacementScale: 20,
-      blurAmount: 10,
-      saturation: 140,
-      aberrationIntensity: 0.5,
-      cornerRadius: 8,
-      mode: 'shader' as const,
+      elasticity: 0,
     };
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return (
-      <AtomixGlass {...glassProps}>
-        {accordionContent}
-      </AtomixGlass>
-    );
+    return <AtomixGlass {...glassProps}>{accordionContent}</AtomixGlass>;
   }
 
   return accordionContent;

package/src/components/AtomixGlass/AtomixGlass.test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
 import AtomixGlass from './AtomixGlass';
 
 // Mock the ShaderDisplacementGenerator since it uses browser APIs
-jest.mock('./shader-utils', () => ({
+vi.mock('./shader-utils', () => ({
   ShaderDisplacementGenerator: class MockShaderDisplacementGenerator {
     updateShader() {
       return 'data:image/png;base64,mockBase64String';
@@ -12,7 +13,7 @@ jest.mock('./shader-utils', () => ({
     destroy() {}
   },
   fragmentShaders: {
-    liquidGlass: jest.fn(),
+    liquidGlass: vi.fn(),
   },
 }));
 
@@ -23,7 +24,7 @@ describe('AtomixGlass Component', () => {
         <div data-testid="test-content">Test Content</div>
       </AtomixGlass>
     );
-    
+
     expect(screen.getByTestId('test-content')).toBeInTheDocument();
     expect(screen.getByText('Test Content')).toBeInTheDocument();
   });
@@ -34,40 +35,42 @@ describe('AtomixGlass Component', () => {
         <div>Content</div>
       </AtomixGlass>
     );
-    
-    expect(container.querySelector('.c-glass-container')).toHaveClass('custom-class');
+
+    expect(container.querySelector('.c-atomix-glass__container')).toHaveClass('custom-class');
   });
 
   test('renders with showHoverEffects enabled', () => {
     render(
-      <AtomixGlass showHoverEffects={true}>
+      <AtomixGlass>
         <div>Test Content</div>
       </AtomixGlass>
     );
-    
+
     // Check that hover effects are enabled
     expect(screen.getByTestId('atomix-glass')).toHaveAttribute('data-hover-effects', 'true');
   });
 
   test('applies clickable class when onClick is provided', () => {
-    const handleClick = jest.fn();
+    const handleClick = vi.fn();
     const { container } = render(
       <AtomixGlass onClick={handleClick}>
         <div>Content</div>
       </AtomixGlass>
     );
-    
-    expect(container.querySelector('.c-glass-container')).toHaveClass('c-glass-container--clickable');
+
+    expect(container.querySelector('.c-atomix-glass__container')).toHaveClass(
+      'c-atomix-glass__container--clickable'
+    );
   });
 
   test('calls onClick when clicked', async () => {
-    const handleClick = jest.fn();
+    const handleClick = vi.fn();
     render(
       <AtomixGlass onClick={handleClick}>
         <div>Content</div>
       </AtomixGlass>
     );
-    
+
     await userEvent.click(screen.getByText('Content'));
     expect(handleClick).toHaveBeenCalledTimes(1);
   });
@@ -78,8 +81,82 @@ describe('AtomixGlass Component', () => {
         <div>Content</div>
       </AtomixGlass>
     );
-    
-    expect(container.querySelector('.c-glass-container')).toHaveClass('c-glass-container--over-light');
+
+    expect(container.querySelector('.c-atomix-glass__container')).toHaveClass(
+      'c-atomix-glass__container--over-light'
+    );
+  });
+
+  test('does not apply overLight class when overLight prop is false', () => {
+    const { container } = render(
+      <AtomixGlass overLight={false}>
+        <div>Content</div>
+      </AtomixGlass>
+    );
+
+    expect(container.querySelector('.c-atomix-glass__container')).not.toHaveClass(
+      'c-atomix-glass__container--over-light'
+    );
+  });
+
+  test('handles overLight="auto" mode', () => {
+    // Mock window.getComputedStyle to simulate a light background
+    const originalGetComputedStyle = window.getComputedStyle;
+    window.getComputedStyle = vi.fn(() => ({
+      backgroundColor: 'rgb(255, 255, 255)',
+      backgroundImage: 'none',
+    })) as any;
+
+    const { container } = render(
+      <AtomixGlass overLight="auto">
+        <div>Content</div>
+      </AtomixGlass>
+    );
+
+    // Note: Auto-detection happens asynchronously, so we can't immediately test
+    // but we can verify the component renders without errors
+    expect(container.querySelector('.c-atomix-glass__container')).toBeInTheDocument();
+
+    // Restore original
+    window.getComputedStyle = originalGetComputedStyle;
+  });
+
+  test('handles overLight object config', () => {
+    const { container } = render(
+      <AtomixGlass
+        overLight={{
+          threshold: 0.8,
+          opacity: 0.5,
+          contrast: 1.5,
+          brightness: 1.1,
+          saturationBoost: 1.8,
+        }}
+      >
+        <div>Content</div>
+      </AtomixGlass>
+    );
+
+    // Verify component renders with object config
+    expect(container.querySelector('.c-atomix-glass__container')).toBeInTheDocument();
+  });
+
+  test('handles invalid overLight object config values gracefully', () => {
+    const { container } = render(
+      <AtomixGlass
+        overLight={{
+          threshold: NaN,
+          opacity: -1,
+          contrast: Infinity,
+          brightness: -100,
+          saturationBoost: 'invalid' as any,
+        }}
+      >
+        <div>Content</div>
+      </AtomixGlass>
+    );
+
+    // Should render without errors, using default/validated values
+    expect(container.querySelector('.c-atomix-glass__container')).toBeInTheDocument();
   });
 
   test('applies custom style', () => {
@@ -89,8 +166,8 @@ describe('AtomixGlass Component', () => {
         <div>Content</div>
       </AtomixGlass>
     );
-    
-    const glassContainer = container.querySelector('.c-glass-container');
+
+    const glassContainer = container.querySelector('.c-atomix-glass__container');
     expect(glassContainer).toHaveStyle('background-color: red');
   });
 
@@ -100,17 +177,17 @@ describe('AtomixGlass Component', () => {
         <div>Content</div>
       </AtomixGlass>
     );
-    
+
     // Check if the filter element exists
     expect(container.querySelector('svg')).toBeInTheDocument();
   });
 
   test('handles mouse events correctly', async () => {
-    const handleMouseEnter = jest.fn();
-    const handleMouseLeave = jest.fn();
-    const handleMouseDown = jest.fn();
-    const handleMouseUp = jest.fn();
-    
+    const handleMouseEnter = vi.fn();
+    const handleMouseLeave = vi.fn();
+    const handleMouseDown = vi.fn();
+    const handleMouseUp = vi.fn();
+
     render(
       <AtomixGlass
         onClick={() => {
@@ -123,25 +200,26 @@ describe('AtomixGlass Component', () => {
         <div>Content</div>
       </AtomixGlass>
     );
-    
+
     const glassContent = screen.getByText('Content').parentElement;
     if (!glassContent) throw new Error('Glass content not found');
-    
+
     await userEvent.hover(glassContent);
     expect(handleMouseEnter).toHaveBeenCalledTimes(1);
-    
+
     await userEvent.unhover(glassContent);
     expect(handleMouseLeave).toHaveBeenCalledTimes(1);
-    
+
     await userEvent.pointer([{ keys: '[MouseLeft>]', target: glassContent }]);
     expect(handleMouseDown).toHaveBeenCalledTimes(1);
-    
+
     await userEvent.pointer([{ keys: '[/MouseLeft]', target: glassContent }]);
     expect(handleMouseUp).toHaveBeenCalledTimes(1);
   });
 });
 
 // Visual regression tests
+// Keep only a single smoke snapshot to detect catastrophic DOM changes.
 describe('AtomixGlass Visual Regression', () => {
   test('matches snapshot with default props', () => {
     const { container } = render(
@@ -149,51 +227,7 @@ describe('AtomixGlass Visual Regression', () => {
         <div>Default Glass</div>
       </AtomixGlass>
     );
-    
-    expect(container).toMatchSnapshot();
-  });
 
-  test('matches snapshot with custom props', () => {
-    const { container } = render(
-      <AtomixGlass
-        displacementScale={30}
-        blurAmount={15}
-        saturation={200}
-        aberrationIntensity={3}
-        cornerRadius={15}
-        overLight={true}
-        mode="polar"
-      >
-        <div>Custom Glass</div>
-      </AtomixGlass>
-    );
-    
     expect(container).toMatchSnapshot();
   });
-
-  test('matches snapshot with shader mode', () => {
-    const { container } = render(
-      <AtomixGlass
-        mode="shader"
-        displacementScale={25}
-        blurAmount={12}
-        saturation={180}
-        aberrationIntensity={2}
-      >
-        <div>Shader Glass</div>
-      </AtomixGlass>
-    );
-    
-    expect(container).toMatchSnapshot();
-  });
-
-  test('matches snapshot with showHoverEffects', () => {
-      const { container } = render(
-        <AtomixGlass showHoverEffects={true}>
-          <div>Glass with Hover Effects</div>
-        </AtomixGlass>
-      );
-      
-      expect(container).toMatchSnapshot();
-    });
-});
+});