this.gui 1.0.15 → 1.0.16

package/src/stories/Atoms/Alert/Alert.css

@@ -1,29 +1,211 @@
+/* src/stories/Atoms/Alert/Alert.css */
 
+/* Base Alert Styles */
 .alert {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--border-radius);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  display: flex;
+  align-items: center;
+  box-shadow: var(--box-shadow);
+  margin-bottom: var(--spacing-md);
+  transition: 
+    background-color var(--transition-speed),
+    border-color var(--transition-speed),
+    color var(--transition-speed);
+  
+  /* Default Colors (Primary Variant) */
+  background-color: var(--alert-bg-color, var(--primary-color));
+  color: var(--alert-text-color, var(--text-color-inverse));
+  border: 1px solid var(--alert-border-color, var(--primary-color));
+  
+  /* Entrance Animation */
+  animation: fadeIn 0.3s ease-out;
 }
 
+/* Primary Variant */
 .alert--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+  /* Primary Variant Colors */
+  --alert-bg-color: var(--primary-color);
+  --alert-text-color: var(--text-color-inverse);
+  --alert-border-color: var(--primary-color);
+  
+  /* Hover Colors */
+  --alert-bg-hover-color: var(--primary-color-hover);
+  --alert-border-hover-color: var(--primary-color-hover);
 }
 
+.alert--primary:hover {
+  background-color: var(--alert-bg-hover-color);
+  border-color: var(--alert-border-hover-color);
+}
+
+/* Secondary Variant */
 .alert--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+  /* Secondary Variant Colors */
+  --alert-bg-color: transparent;
+  --alert-text-color: var(--secondary-color);
+  --alert-border-color: var(--secondary-color);
+  
+  /* Hover Colors */
+  --alert-bg-hover-color: var(--secondary-color-hover);
+  --alert-border-hover-color: var(--secondary-color-hover);
+  --alert-text-hover-color: var(--text-color-inverse);
+}
+
+.alert--secondary:hover {
+  background-color: var(--alert-bg-hover-color);
+  color: var(--alert-text-hover-color);
+  border-color: var(--alert-border-hover-color);
+}
+
+/* Semantic Color Modifiers for Primary Variant */
+.alert--primary.alert--info {
+  --alert-bg-color: var(--info-color);
+  --alert-border-color: var(--info-color);
+  
+  /* Hover Colors */
+  --alert-bg-hover-color: var(--info-color-hover);
+  --alert-border-hover-color: var(--info-color-hover);
+}
+
+.alert--primary.alert--warning {
+  --alert-bg-color: var(--warning-color);
+  --alert-border-color: var(--warning-color);
+  
+  /* Hover Colors */
+  --alert-bg-hover-color: var(--warning-color-hover);
+  --alert-border-hover-color: var(--warning-color-hover);
+}
+
+.alert--primary.alert--alert {
+  --alert-bg-color: var(--alert-color);
+  --alert-border-color: var(--alert-color);
+  --alert-text-color: var(--text-color); /* Dark text for readability */
+  
+  /* Hover Colors */
+  --alert-bg-hover-color: var(--alert-color-hover);
+  --alert-border-hover-color: var(--alert-color-hover);
+}
+
+.alert--primary.alert--success {
+  --alert-bg-color: var(--success-color);
+  --alert-border-color: var(--success-color);
+  
+  /* Hover Colors */
+  --alert-bg-hover-color: var(--success-color-hover);
+  --alert-border-hover-color: var(--success-color-hover);
+}
+
+.alert--primary.alert--neutral {
+  --alert-bg-color: var(--neutral-color);
+  --alert-border-color: var(--neutral-color);
+  
+  /* Hover Colors */
+  --alert-bg-hover-color: var(--neutral-color-hover);
+  --alert-border-hover-color: var(--neutral-color-hover);
+}
+
+.alert--primary.alert--dark {
+  --alert-bg-color: var(--dark-color);
+  --alert-border-color: var(--dark-color);
+  --alert-text-color: var(--text-color-inverse); /* White text on dark background */
+  
+  /* Hover Colors */
+  --alert-bg-hover-color: var(--dark-color-hover);
+  --alert-border-hover-color: var(--dark-color-hover);
 }
 
-.alert--small {
-  padding: 8px;
+/* Semantic Color Modifiers for Secondary Variant */
+.alert--secondary.alert--info {
+  --alert-text-color: var(--info-color);
+  --alert-border-color: var(--info-color);
+  
+  /* Hover Colors */
+  --alert-bg-hover-color: var(--info-color-hover);
+  --alert-border-hover-color: var(--info-color-hover);
 }
 
-.alert--medium {
-  padding: 16px;
+.alert--secondary.alert--warning {
+  --alert-text-color: var(--warning-color);
+  --alert-border-color: var(--warning-color);
+  
+  /* Hover Colors */
+  --alert-bg-hover-color: var(--warning-color-hover);
+  --alert-border-hover-color: var(--warning-color-hover);
 }
 
-.alert--large {
-  padding: 32px;
+.alert--secondary.alert--alert {
+  --alert-text-color: var(--alert-color);
+  --alert-border-color: var(--alert-color);
+  
+  /* Hover Colors */
+  --alert-bg-hover-color: var(--alert-color-hover);
+  --alert-border-hover-color: var(--alert-color-hover);
 }
+
+.alert--secondary.alert--success {
+  --alert-text-color: var(--success-color);
+  --alert-border-color: var(--success-color);
+  
+  /* Hover Colors */
+  --alert-bg-hover-color: var(--success-color-hover);
+  --alert-border-hover-color: var(--success-color-hover);
+}
+
+.alert--secondary.alert--neutral {
+  --alert-text-color: var(--neutral-color);
+  --alert-border-color: var(--neutral-color);
+  
+  /* Hover Colors */
+  --alert-bg-hover-color: var(--neutral-color-hover);
+  --alert-border-hover-color: var(--neutral-color-hover);
+}
+
+.alert--secondary.alert--dark {
+  --alert-text-color: var(--dark-color);
+  --alert-border-color: var(--dark-color);
+  
+  /* Hover Colors */
+  --alert-bg-hover-color: var(--dark-color-hover);
+  --alert-border-hover-color: var(--dark-color-hover);
+}
+
+/* Optional: Icon Styles */
+.alert__icon {
+  margin-right: var(--spacing-sm);
+  font-size: 1.2em;
+}
+
+/* Optional: Close Button Styles */
+.alert__close {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: 1.2em;
+}
+
+/* Dismissible Modifier */
+.alert--dismissible {
+  padding-right: var(--spacing-md);
+}
+
+/* Keyframes for fade-in */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Apply animation to alert */
+.alert {
+  animation: fadeIn 0.3s ease-out;
+}

package/src/stories/Atoms/Alert/Alert.jsx

@@ -1,41 +1,56 @@
-
+// src/stories/Atoms/Alert/Alert.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import './Alert.css';
+import './Alert.css'; // Import the CSS styles
+
+export const Alert = ({
+  variant = 'primary', // 'primary', 'secondary'
+  color, // 'info', 'warning', 'alert', 'success', 'neutral', 'dark'
+  children,
+  className = '',
+  style = {},
+  onClose, // Function to handle close action
+  dismissible = false, // If true, show close button
+  icon, // Optional icon element
+  ...props
+}) => {
+  const variantClass = `alert--${variant}`;
+  const colorClass = color ? `alert--${color}` : '';
+  const dismissibleClass = dismissible ? 'alert--dismissible' : '';
+
+  const combinedClassName = `alert ${variantClass} ${colorClass} ${dismissibleClass} ${className}`.trim();
 
-/**
- * Alert component for user interaction
- */
-export const Alert = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'alert--primary' : 'alert--secondary';
   return (
     <div
-      className={['alert', `alert--${size}`, mode].join(' ')}
+      className={combinedClassName}
+      style={style}
+      role="alert"
+      aria-live="assertive"
       {...props}
     >
-      {children}
+      {icon && <span className="alert__icon">{icon}</span>}
+      <span className="alert__content">{children}</span>
+      {dismissible && (
+        <button
+          className="alert__close"
+          onClick={onClose}
+          aria-label="Close Alert"
+          tabIndex="0"
+        >
+          &times;
+        </button>
+      )}
     </div>
   );
 };
 
 Alert.propTypes = {
-  /**
-   * Is this the primary style for the component?
-   */
-  primary: PropTypes.bool,
-  /**
-   * Size of the component
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Content to be rendered inside the component
-   */
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  color: PropTypes.oneOf(['info', 'warning', 'alert', 'success', 'neutral', 'dark']),
   children: PropTypes.node.isRequired,
-};
-
-Alert.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default Alert;
+  className: PropTypes.string,
+  style: PropTypes.object,
+  onClose: PropTypes.func,
+  dismissible: PropTypes.bool,
+  icon: PropTypes.node,
+};

package/src/stories/Atoms/Alert/Alert.stories.jsx

@@ -1,41 +1,167 @@
-
+// src/stories/Atoms/Alert/Alert.stories.jsx
+import React from 'react';
 import { Alert } from './Alert';
+import './Alert.css'; // Import the CSS styles
 
-// Storybook configuration for Alert component
 export default {
   title: 'Atoms/Feedback/Alert',
   component: Alert,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    variant: {
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary'],
+      },
+      description: 'Variant of the alert.',
+      table: {
+        type: { summary: 'primary | secondary' },
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    color: {
+      control: {
+        type: 'select',
+        options: ['info', 'warning', 'alert', 'success', 'neutral', 'dark'],
+      },
+      description: 'Semantic color of the alert.',
+      table: {
+        type: { summary: `'info' | 'warning' | 'alert' | 'success' | 'neutral' | 'dark'` },
+      },
+    },
+    children: {
+      control: 'text',
+      description: 'Content of the alert.',
+      table: {
+        type: { summary: 'node' },
+      },
+    },
+    dismissible: {
+      control: 'boolean',
+      description: 'If true, shows a close button to dismiss the alert.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    onClose: {
+      action: 'closed',
+      description: 'Function called when the alert is dismissed.',
+      table: {
+        type: { summary: 'function' },
+      },
+    },
+    icon: {
+      control: 'none', // Typically, icons are not controlled via Storybook controls
+      description: 'Optional icon to display in the alert.',
+      table: {
+        type: { summary: 'node' },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    style: {
+      control: 'object',
+      description: 'Inline styles.',
+      table: {
+        type: { summary: 'object' },
+      },
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Alert',
-  },
-};
+/**
+ * 
+ * Shows default primary and secondary alerts without any semantic color.
+ */
+export const DefaultAlerts = () => (
+  <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+    <Alert variant="primary">Primary Default Alert</Alert>
+    <Alert variant="secondary">Secondary Default Alert</Alert>
+  </div>
+);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Alert',
-  },
-};
+/**
+ * 
+ * Demonstrates primary alerts with all semantic colors.
+ */
+export const PrimaryAlerts = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+    <h3>Primary Alerts</h3>
+    {['info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
+      <Alert key={color} variant="primary" color={color}>
+        This is a {color} primary alert.
+      </Alert>
+    ))}
+  </div>
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Alert',
-  },
-};
+/**
+ * 
+ * Demonstrates secondary alerts with all semantic colors.
+ */
+export const SecondaryAlerts = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+    <h3>Secondary Alerts</h3>
+    {['info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
+      <Alert key={color} variant="secondary" color={color}>
+        This is a {color} secondary alert.
+      </Alert>
+    ))}
+  </div>
+);
 
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Alert',
-  },
+/**
+ * 
+ * Demonstrates primary and secondary alerts that can be dismissed.
+ */
+export const DismissibleAlerts = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+    <h3>Dismissible Primary Alerts</h3>
+    {['info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
+      <Alert
+        key={color}
+        variant="primary"
+        color={color}
+        dismissible
+        onClose={() => alert(`Closed ${color} primary alert`)}
+      >
+        This is a {color} primary alert that can be dismissed.
+      </Alert>
+    ))}
+
+    <h3>Dismissible Secondary Alerts</h3>
+    {['info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
+      <Alert
+        key={color}
+        variant="secondary"
+        color={color}
+        dismissible
+        onClose={() => alert(`Closed ${color} secondary alert`)}
+      >
+        This is a {color} secondary alert that can be dismissed.
+      </Alert>
+    ))}
+  </div>
+);
+
+
+/**
+ * ### Interactive Playground
+ * 
+ * Allows dynamic interaction with the alert props via Storybook controls.
+ */
+const Template = (args) => <Alert {...args} />;
+
+export const Playground = Template.bind({});
+Playground.args = {
+  variant: 'primary',
+  color: 'info',
+  children: 'This is an interactive alert.',
+  dismissible: false,
 };
+Playground.storyName = 'Interactive Playground';