All files / src/components/common WidgetActions.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { ReactNode } from 'react';
 
interface WidgetActionsProps {
  /**
   * The action buttons or other elements
   */
  children: ReactNode;
  
  /**
   * Additional CSS classes to apply
   */
  className?: string;
  
  /**
   * Test ID for automated testing
   */
  testId?: string;
}
 
/**
 * Container for widget action buttons in widget headers
 * 
 * ## UX Perspective
 * 
 * Provides a consistent layout for widget actions, ensuring good spacing
 * and alignment between action buttons in widget headers. 🎛️
 */
const WidgetActions: React.FC<WidgetActionsProps> = ({ 
  children, 
  className = '',
  testId = 'widget-actions'
}) => {
  return (
    <div 
      className={`flex items-center space-x-2 ${className}`}
      data-testid={testId}
    >
      {children}
    </div>
  );
};
 
interface WidgetActionButtonProps {
  /**
   * Click handler for the button
   */
  onClick: () => void;
  
  /**
   * Icon to display in the button
   */
  icon: ReactNode;
  
  /**
   * Accessible label for the button
   */
  ariaLabel: string;
  
  /**
   * Additional CSS classes to apply
   */
  className?: string;
  
  /**
   * Test ID for automated testing
   */
  testId?: string;
  
  /**
   * Whether the button is disabled
   */
  disabled?: boolean;
}
 
/**
 * Standard action button for widget headers
 * 
 * ## UX Perspective
 * 
 * Provides a consistent, accessible button style for widget actions,
 * with appropriate hover and focus states for good user feedback. 🔘
 */
export const WidgetActionButton: React.FC<WidgetActionButtonProps> = ({
  onClick,
  icon,
  ariaLabel,
  className = '',
  testId,
  disabled = false
}) => {
  return (
    <button
      onClick={onClick}
      aria-label={ariaLabel}
      className={`p-1 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
      data-testid={testId}
      disabled={disabled}
    >
      {icon}
    </button>
  );
};
 
export default WidgetActions;