ywana-core8 0.1.75 → 0.1.76

package/src/html/header2.js

@@ -0,0 +1,203 @@
+import React, { useCallback } from 'react'
+import PropTypes from 'prop-types'
+import { Icon } from './icon'
+import { Text } from './text'
+import './header2.css'
+
+/**
+ * Enhanced Header component with improved accessibility and robustness
+ * Maintains 100% visual compatibility with original Header
+ */
+export const Header2 = (props) => {
+    const {
+        title,
+        icon,
+        iconSrc,
+        img,
+        caption = false,
+        prominent = false,
+        dense = false,
+        primary = false,
+        secondary = false,
+        clickable = false,
+        disabled = false,
+        loading = false,
+        className,
+        children,
+        action,
+        ariaLabel,
+        role = 'banner',
+        onClick,
+        onIconClick,
+        ...restProps
+    } = props
+
+    // Validate props
+    if (!title && !icon && !iconSrc && !ariaLabel) {
+        console.warn('Header2 component: title, icon, iconSrc, or ariaLabel should be provided for accessibility')
+    }
+
+    // Handle icon click
+    const handleIconClick = useCallback((event) => {
+        if (disabled || loading) return
+        
+        if (onIconClick) {
+            onIconClick(event)
+        } else if (action) {
+            action(event)
+        }
+    }, [disabled, loading, onIconClick, action])
+
+    // Handle header click
+    const handleClick = useCallback((event) => {
+        if (disabled || loading) return
+        
+        if (onClick) {
+            onClick(event)
+        }
+    }, [disabled, loading, onClick])
+
+    // Generate CSS classes (maintaining exact same logic as original)
+    const captionClass = caption ? 'caption' : ''
+    const prominentClass = prominent ? 'prominent' : ''
+    const denseClass = dense ? 'dense' : ''
+    let themeClass = primary ? 'primary' : ''
+    themeClass = secondary ? 'secondary' : themeClass
+    
+    const safeClassName = className || ''
+    const cssClasses = [
+        'header2',
+        captionClass,
+        prominentClass,
+        denseClass,
+        themeClass,
+        disabled && 'disabled',
+        loading && 'loading',
+        safeClassName
+    ].filter(Boolean).join(' ')
+
+    // Generate icon element (maintaining exact same logic as original)
+    let iconElement = null
+    if (icon) {
+        iconElement = (
+            <Icon 
+                icon={icon} 
+                clickable={clickable && !disabled && !loading} 
+                action={handleIconClick}
+                disabled={disabled}
+                ariaLabel={`${icon} icon`}
+            />
+        )
+    } else if (iconSrc) {
+        iconElement = (
+            <img 
+                className="header2-icon" 
+                src={iconSrc} 
+                alt={ariaLabel || title || 'Header icon'}
+                onClick={clickable && !disabled && !loading ? handleIconClick : undefined}
+                style={{ 
+                    cursor: clickable && !disabled && !loading ? 'pointer' : 'default',
+                    opacity: disabled ? 0.6 : 1
+                }}
+            />
+        )
+    }
+
+    // Generate background style (maintaining exact same logic as original)
+    const backgroundStyle = img ? { backgroundImage: `url(${img})` } : {}
+
+    // Generate title element (maintaining exact same logic as original)
+    const titleElement = title ? (
+        <label className="header2-title">
+            <Text>{title}</Text>
+        </label>
+    ) : null
+
+    // Accessibility attributes
+    const ariaAttributes = {
+        'aria-label': ariaLabel || (typeof title === 'string' ? title : 'Header'),
+        'aria-disabled': disabled,
+        'aria-busy': loading,
+        role: role
+    }
+
+    return (
+        <header 
+            className={cssClasses} 
+            style={backgroundStyle}
+            onClick={onClick ? handleClick : undefined}
+            {...ariaAttributes}
+            {...restProps}
+        >
+            {iconElement}
+            {titleElement}
+            <span className="header2-actions" role="toolbar" aria-label="Header actions">
+                {loading && (
+                    <Icon 
+                        icon="hourglass_empty" 
+                        className="header2-loading"
+                        ariaLabel="Loading"
+                    />
+                )}
+                {children}
+            </span>
+        </header>
+    )
+}
+
+// PropTypes for Header2
+Header2.propTypes = {
+    /** Header title text */
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    /** Material icon name */
+    icon: PropTypes.string,
+    /** Icon image source URL */
+    iconSrc: PropTypes.string,
+    /** Background image URL */
+    img: PropTypes.string,
+    /** Whether header has caption style (4rem height) */
+    caption: PropTypes.bool,
+    /** Whether header has prominent style (12.8rem height) */
+    prominent: PropTypes.bool,
+    /** Whether header has dense style (2.4rem height) */
+    dense: PropTypes.bool,
+    /** Whether header has primary theme */
+    primary: PropTypes.bool,
+    /** Whether header has secondary theme */
+    secondary: PropTypes.bool,
+    /** Whether icon is clickable */
+    clickable: PropTypes.bool,
+    /** Whether header is disabled */
+    disabled: PropTypes.bool,
+    /** Whether header is in loading state */
+    loading: PropTypes.bool,
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Action elements (buttons, etc.) */
+    children: PropTypes.node,
+    /** Icon click handler (legacy support) */
+    action: PropTypes.func,
+    /** ARIA label for accessibility */
+    ariaLabel: PropTypes.string,
+    /** ARIA role */
+    role: PropTypes.string,
+    /** Header click handler */
+    onClick: PropTypes.func,
+    /** Icon click handler */
+    onIconClick: PropTypes.func
+}
+
+Header2.defaultProps = {
+    caption: false,
+    prominent: false,
+    dense: false,
+    primary: false,
+    secondary: false,
+    clickable: false,
+    disabled: false,
+    loading: false,
+    role: 'banner',
+    className: ''
+}
+
+export default Header2

package/src/html/header2.test.js

@@ -0,0 +1,377 @@
+import React from 'react'
+import { Header2 } from './header2'
+
+// Pruebas unitarias para el componente Header2
+describe('Header2 Component', () => {
+    // Mock de los componentes dependientes
+    const mockText = jest.fn()
+    const mockIcon = jest.fn()
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+        
+        // Mock del componente Text
+        jest.doMock('./text', () => ({
+            Text: mockText
+        }))
+        
+        // Mock del componente Icon
+        jest.doMock('./icon', () => ({
+            Icon: mockIcon
+        }))
+        
+        // Mock de console.warn para las pruebas
+        jest.spyOn(console, 'warn').mockImplementation(() => {})
+    })
+
+    afterEach(() => {
+        console.warn.mockRestore()
+    })
+
+    test('component exports correctly', () => {
+        expect(Header2).toBeDefined()
+        expect(typeof Header2).toBe('function')
+    })
+
+    test('component has correct PropTypes', () => {
+        expect(Header2.propTypes).toBeDefined()
+        expect(Header2.propTypes.title).toBeDefined()
+        expect(Header2.propTypes.icon).toBeDefined()
+        expect(Header2.propTypes.iconSrc).toBeDefined()
+        expect(Header2.propTypes.img).toBeDefined()
+        expect(Header2.propTypes.caption).toBeDefined()
+        expect(Header2.propTypes.prominent).toBeDefined()
+        expect(Header2.propTypes.dense).toBeDefined()
+        expect(Header2.propTypes.primary).toBeDefined()
+        expect(Header2.propTypes.secondary).toBeDefined()
+        expect(Header2.propTypes.clickable).toBeDefined()
+        expect(Header2.propTypes.disabled).toBeDefined()
+        expect(Header2.propTypes.loading).toBeDefined()
+        expect(Header2.propTypes.className).toBeDefined()
+        expect(Header2.propTypes.children).toBeDefined()
+        expect(Header2.propTypes.action).toBeDefined()
+        expect(Header2.propTypes.ariaLabel).toBeDefined()
+        expect(Header2.propTypes.role).toBeDefined()
+        expect(Header2.propTypes.onClick).toBeDefined()
+        expect(Header2.propTypes.onIconClick).toBeDefined()
+    })
+
+    test('component has correct defaultProps', () => {
+        expect(Header2.defaultProps).toBeDefined()
+        expect(Header2.defaultProps.caption).toBe(false)
+        expect(Header2.defaultProps.prominent).toBe(false)
+        expect(Header2.defaultProps.dense).toBe(false)
+        expect(Header2.defaultProps.primary).toBe(false)
+        expect(Header2.defaultProps.secondary).toBe(false)
+        expect(Header2.defaultProps.clickable).toBe(false)
+        expect(Header2.defaultProps.disabled).toBe(false)
+        expect(Header2.defaultProps.loading).toBe(false)
+        expect(Header2.defaultProps.role).toBe('banner')
+        expect(Header2.defaultProps.className).toBe('')
+    })
+
+    test('warns when no accessibility props are provided', () => {
+        const validateAccessibility = (title, icon, iconSrc, ariaLabel) => {
+            if (!title && !icon && !iconSrc && !ariaLabel) {
+                console.warn('Header2 component: title, icon, iconSrc, or ariaLabel should be provided for accessibility')
+            }
+        }
+        
+        validateAccessibility(null, null, null, null)
+        expect(console.warn).toHaveBeenCalledWith('Header2 component: title, icon, iconSrc, or ariaLabel should be provided for accessibility')
+
+        console.warn.mockClear()
+        validateAccessibility('Test Title', null, null, null)
+        expect(console.warn).not.toHaveBeenCalled()
+    })
+
+    test('CSS classes generation maintains original logic', () => {
+        const generateClasses = (caption, prominent, dense, primary, secondary, disabled, loading, className) => {
+            const captionClass = caption ? 'caption' : ''
+            const prominentClass = prominent ? 'prominent' : ''
+            const denseClass = dense ? 'dense' : ''
+            let themeClass = primary ? 'primary' : ''
+            themeClass = secondary ? 'secondary' : themeClass
+            
+            return [
+                'header2',
+                captionClass,
+                prominentClass,
+                denseClass,
+                themeClass,
+                disabled && 'disabled',
+                loading && 'loading',
+                className || ''
+            ].filter(Boolean).join(' ')
+        }
+
+        // Test basic header
+        expect(generateClasses(false, false, false, false, false, false, false, ''))
+            .toBe('header2')
+
+        // Test caption variant
+        expect(generateClasses(true, false, false, false, false, false, false, ''))
+            .toBe('header2 caption')
+
+        // Test prominent variant
+        expect(generateClasses(false, true, false, false, false, false, false, ''))
+            .toBe('header2 prominent')
+
+        // Test dense variant
+        expect(generateClasses(false, false, true, false, false, false, false, ''))
+            .toBe('header2 dense')
+
+        // Test primary theme
+        expect(generateClasses(false, false, false, true, false, false, false, ''))
+            .toBe('header2 primary')
+
+        // Test secondary theme (overrides primary)
+        expect(generateClasses(false, false, false, true, true, false, false, ''))
+            .toBe('header2 secondary')
+
+        // Test disabled state
+        expect(generateClasses(false, false, false, false, false, true, false, ''))
+            .toBe('header2 disabled')
+
+        // Test loading state
+        expect(generateClasses(false, false, false, false, false, false, true, ''))
+            .toBe('header2 loading')
+
+        // Test custom className
+        expect(generateClasses(false, false, false, false, false, false, false, 'custom-class'))
+            .toBe('header2 custom-class')
+
+        // Test combination
+        expect(generateClasses(true, false, false, true, false, false, false, 'custom'))
+            .toBe('header2 caption primary custom')
+    })
+
+    test('icon element generation maintains original logic', () => {
+        const generateIconElement = (icon, iconSrc, clickable, disabled, loading, handleIconClick, ariaLabel, title) => {
+            if (icon) {
+                return {
+                    type: 'Icon',
+                    props: {
+                        icon: icon,
+                        clickable: clickable && !disabled && !loading,
+                        action: handleIconClick,
+                        disabled: disabled,
+                        ariaLabel: `${icon} icon`
+                    }
+                }
+            } else if (iconSrc) {
+                return {
+                    type: 'img',
+                    props: {
+                        className: 'header2-icon',
+                        src: iconSrc,
+                        alt: ariaLabel || title || 'Header icon',
+                        onClick: clickable && !disabled && !loading ? handleIconClick : undefined,
+                        style: {
+                            cursor: clickable && !disabled && !loading ? 'pointer' : 'default',
+                            opacity: disabled ? 0.6 : 1
+                        }
+                    }
+                }
+            }
+            return null
+        }
+
+        const mockHandler = jest.fn()
+
+        // Test with icon
+        const iconResult = generateIconElement('home', null, true, false, false, mockHandler, null, null)
+        expect(iconResult.type).toBe('Icon')
+        expect(iconResult.props.icon).toBe('home')
+        expect(iconResult.props.clickable).toBe(true)
+        expect(iconResult.props.ariaLabel).toBe('home icon')
+
+        // Test with iconSrc
+        const imgResult = generateIconElement(null, '/icon.png', true, false, false, mockHandler, 'Custom label', 'Title')
+        expect(imgResult.type).toBe('img')
+        expect(imgResult.props.src).toBe('/icon.png')
+        expect(imgResult.props.alt).toBe('Custom label')
+        expect(imgResult.props.style.cursor).toBe('pointer')
+
+        // Test disabled state
+        const disabledResult = generateIconElement('home', null, true, true, false, mockHandler, null, null)
+        expect(disabledResult.props.clickable).toBe(false)
+
+        // Test loading state
+        const loadingResult = generateIconElement('home', null, true, false, true, mockHandler, null, null)
+        expect(loadingResult.props.clickable).toBe(false)
+
+        // Test no icon
+        const noIconResult = generateIconElement(null, null, true, false, false, mockHandler, null, null)
+        expect(noIconResult).toBeNull()
+    })
+
+    test('background style generation maintains original logic', () => {
+        const generateBackgroundStyle = (img) => {
+            return img ? { backgroundImage: `url(${img})` } : {}
+        }
+
+        expect(generateBackgroundStyle(null)).toEqual({})
+        expect(generateBackgroundStyle('')).toEqual({})
+        expect(generateBackgroundStyle('/bg.jpg')).toEqual({ backgroundImage: 'url(/bg.jpg)' })
+        expect(generateBackgroundStyle('https://example.com/bg.png')).toEqual({ backgroundImage: 'url(https://example.com/bg.png)' })
+    })
+
+    test('accessibility attributes generation works correctly', () => {
+        const generateAriaAttributes = (ariaLabel, title, disabled, loading, role) => {
+            return {
+                'aria-label': ariaLabel || (typeof title === 'string' ? title : 'Header'),
+                'aria-disabled': disabled,
+                'aria-busy': loading,
+                role: role
+            }
+        }
+
+        // Test with string title
+        const result1 = generateAriaAttributes(null, 'Test Title', false, false, 'banner')
+        expect(result1['aria-label']).toBe('Test Title')
+        expect(result1['aria-disabled']).toBe(false)
+        expect(result1['aria-busy']).toBe(false)
+        expect(result1.role).toBe('banner')
+
+        // Test with custom aria-label
+        const result2 = generateAriaAttributes('Custom Label', 'Test Title', false, false, 'banner')
+        expect(result2['aria-label']).toBe('Custom Label')
+
+        // Test with non-string title
+        const result3 = generateAriaAttributes(null, { type: 'span', children: 'Complex Title' }, false, false, 'banner')
+        expect(result3['aria-label']).toBe('Header')
+
+        // Test disabled state
+        const result4 = generateAriaAttributes(null, 'Test Title', true, false, 'banner')
+        expect(result4['aria-disabled']).toBe(true)
+
+        // Test loading state
+        const result5 = generateAriaAttributes(null, 'Test Title', false, true, 'banner')
+        expect(result5['aria-busy']).toBe(true)
+
+        // Test custom role
+        const result6 = generateAriaAttributes(null, 'Test Title', false, false, 'heading')
+        expect(result6.role).toBe('heading')
+    })
+
+    test('icon click handling works correctly', () => {
+        const mockOnIconClick = jest.fn()
+        const mockAction = jest.fn()
+
+        const simulateIconClick = (disabled, loading, onIconClick, action) => {
+            if (disabled || loading) return false
+            
+            if (onIconClick) {
+                onIconClick({})
+                return true
+            } else if (action) {
+                action({})
+                return true
+            }
+            return false
+        }
+
+        // Normal click with onIconClick
+        expect(simulateIconClick(false, false, mockOnIconClick, null)).toBe(true)
+        expect(mockOnIconClick).toHaveBeenCalled()
+
+        mockOnIconClick.mockClear()
+
+        // Normal click with action (fallback)
+        expect(simulateIconClick(false, false, null, mockAction)).toBe(true)
+        expect(mockAction).toHaveBeenCalled()
+
+        mockAction.mockClear()
+
+        // Disabled click
+        expect(simulateIconClick(true, false, mockOnIconClick, null)).toBe(false)
+        expect(mockOnIconClick).not.toHaveBeenCalled()
+
+        // Loading click
+        expect(simulateIconClick(false, true, mockOnIconClick, null)).toBe(false)
+        expect(mockOnIconClick).not.toHaveBeenCalled()
+
+        // No handlers
+        expect(simulateIconClick(false, false, null, null)).toBe(false)
+    })
+
+    test('header click handling works correctly', () => {
+        const mockOnClick = jest.fn()
+
+        const simulateHeaderClick = (disabled, loading, onClick) => {
+            if (disabled || loading) return false
+            
+            if (onClick) {
+                onClick({})
+                return true
+            }
+            return false
+        }
+
+        // Normal click
+        expect(simulateHeaderClick(false, false, mockOnClick)).toBe(true)
+        expect(mockOnClick).toHaveBeenCalled()
+
+        mockOnClick.mockClear()
+
+        // Disabled click
+        expect(simulateHeaderClick(true, false, mockOnClick)).toBe(false)
+        expect(mockOnClick).not.toHaveBeenCalled()
+
+        // Loading click
+        expect(simulateHeaderClick(false, true, mockOnClick)).toBe(false)
+        expect(mockOnClick).not.toHaveBeenCalled()
+
+        // No handler
+        expect(simulateHeaderClick(false, false, null)).toBe(false)
+    })
+
+    test('title element generation maintains original logic', () => {
+        const generateTitleElement = (title) => {
+            return title ? {
+                type: 'label',
+                className: 'header2-title',
+                children: { type: 'Text', children: title }
+            } : null
+        }
+
+        expect(generateTitleElement(null)).toBeNull()
+        expect(generateTitleElement('')).toBeNull()
+        
+        const result = generateTitleElement('Test Title')
+        expect(result.type).toBe('label')
+        expect(result.className).toBe('header2-title')
+        expect(result.children.children).toBe('Test Title')
+    })
+
+    test('theme class logic maintains original behavior', () => {
+        const generateThemeClass = (primary, secondary) => {
+            let themeClass = primary ? 'primary' : ''
+            themeClass = secondary ? 'secondary' : themeClass
+            return themeClass
+        }
+
+        expect(generateThemeClass(false, false)).toBe('')
+        expect(generateThemeClass(true, false)).toBe('primary')
+        expect(generateThemeClass(false, true)).toBe('secondary')
+        expect(generateThemeClass(true, true)).toBe('secondary') // secondary overrides primary
+    })
+
+    test('maintains exact same height calculations as original', () => {
+        const getHeaderHeight = (caption, prominent, dense) => {
+            if (prominent) return '12.8rem'
+            if (caption) return '4rem'
+            if (dense) return '2.4rem'
+            return '3rem' // min-height for normal
+        }
+
+        expect(getHeaderHeight(false, false, false)).toBe('3rem')
+        expect(getHeaderHeight(true, false, false)).toBe('4rem')
+        expect(getHeaderHeight(false, true, false)).toBe('12.8rem')
+        expect(getHeaderHeight(false, false, true)).toBe('2.4rem')
+        
+        // Prominent takes precedence
+        expect(getHeaderHeight(true, true, true)).toBe('12.8rem')
+    })
+})

package/src/html/icon.css

@@ -29,15 +29,33 @@
   }
 
 .icon.disabled {
-    color: var(--text-color-lighter)
+    color: var(--text-color-lighter);
+    cursor: not-allowed;
+}
+
+.icon.clickable {
+    cursor: pointer;
 }
 
 .icon.clickable:hover {
     background-color: rgba(100,100,100,.1);
-    cursor: pointer;
     border-radius: 100%;
 }
 
+.icon.clickable:focus {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+    border-radius: 100%;
+}
+
+.icon.clickable.disabled {
+    cursor: not-allowed;
+}
+
+.icon.clickable.disabled:hover {
+    background-color: transparent;
+}
+
 .icon.small {
     width: 2rem;
     height: 2rem;