@nuvia-ui/components 4.0.1

package/src/ds-alert/ds-alert.js

@@ -0,0 +1,223 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-icon/ds-icon.js';
+import '../ds-icon-button/ds-icon-button.js';
+
+/**
+ * Alert component for user feedback with different severity levels
+ *
+ * @element ds-alert
+ *
+ * @prop {string} status - Status type: 'error' | 'warning' | 'success' | 'info' (default: 'info')
+ * @prop {boolean} dismissible - Show/hide close button (default: false)
+ *
+ * @slot - Default slot for message content
+ * @slot title - Optional slot for title content
+ * @slot actions - Optional slot for action buttons
+ *
+ * @fires ds-dismiss - Dispatched when user clicks the close button
+ *
+ * @csspart alert - The main alert container
+ * @csspart icon - The status icon element
+ * @csspart content - Content area (title + message + actions)
+ * @csspart close-button - The close button
+ */
+export class DsAlert extends LitElement {
+  static properties = {
+    status: { type: String, reflect: true },
+    dismissible: { type: Boolean, reflect: true },
+    title: { type: String },
+    message: { type: String },
+    hideIcon: { type: Boolean, attribute: 'hide-icon', reflect: true },
+    _hasActions: { type: Boolean, state: true }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      box-sizing: border-box;
+    }
+
+    .alert {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--ds-space-sm); /* 8px */
+      min-height: 40px;
+      padding: 10px 8px;
+      border-radius: var(--ds-radius-container); /* 0px - sharp */
+      box-sizing: border-box;
+    }
+
+    /* Side containers for alignment */
+    .icon-container,
+    .dismiss-container {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 20px; /* Matching line-height of body text (20px) */
+    }
+
+    /* Status icon */
+    .icon {
+      color: var(--ds-color-icon-default);
+    }
+
+    /* Content area */
+    .content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0; /* Allow text wrapping */
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+    }
+
+    /* Title styling */
+    .title {
+      font: var(--ds-typo-content-body-bold);
+      margin-bottom: var(--ds-space-xs); /* 4px gap to message */
+    }
+
+    /* Title slot styling */
+    .content ::slotted([slot="title"]) {
+      font: var(--ds-typo-content-body-bold);
+      margin-bottom: var(--ds-space-xs);
+    }
+
+    /* Actions slot wrapper */
+    .actions {
+      display: flex;
+      gap: var(--ds-space-sm); /* 8px between action buttons */
+      flex-wrap: wrap;
+      margin-top: var(--ds-space-sm); /* 8px gap from message as requested */
+    }
+
+    .actions[hidden] {
+      display: none;
+    }
+
+    /* Close button */
+    .close-button {
+      /* No absolute sizing here, handled by parent flex centering */
+    }
+
+    /* Status: Error */
+    :host([status="error"]) .alert {
+      background-color: var(--ds-color-bg-error-subtle);
+    }
+
+    /* Status: Warning */
+    :host([status="warning"]) .alert {
+      background-color: var(--ds-color-bg-warning-subtle);
+    }
+
+    /* Status: Success */
+    :host([status="success"]) .alert {
+      background-color: var(--ds-color-bg-success-subtle);
+    }
+
+    /* Status: Info (default) */
+    :host([status="info"]) .alert,
+    :host(:not([status])) .alert {
+      background-color: var(--ds-color-bg-info-subtle);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.status = 'info';
+    this.dismissible = false;
+    this.title = '';
+    this.message = '';
+    this.hideIcon = false;
+    this._hasActions = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Set role for accessibility
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'alert');
+    }
+  }
+
+  /**
+   * Returns the icon name based on the status
+   * @returns {string} Icon name
+   */
+  _getIconName() {
+    const iconMap = {
+      error: 'cancel',
+      warning: 'warning',
+      success: 'check-circle',
+      info: 'info'
+    };
+    return iconMap[this.status] || iconMap.info;
+  }
+
+  /**
+   * Handles close button click
+   * @private
+   */
+  _handleDismiss() {
+    this.dispatchEvent(new CustomEvent('ds-dismiss', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  /**
+   * Handles slot change for actions to show/hide the container
+   * @private
+   */
+  _handleSlotChange(e) {
+    const assignedNodes = e.target.assignedNodes({ flatten: true });
+    this._hasActions = assignedNodes.length > 0;
+  }
+
+  render() {
+    return html`
+      <div class="alert" part="alert" role="alert">
+        ${!this.hideIcon ? html`
+          <div class="icon-container" part="icon-container">
+            <ds-icon 
+              class="icon"
+              name="${this._getIconName()}" 
+              size="sm"
+              part="icon"
+            ></ds-icon>
+          </div>
+        ` : ''}
+        
+        <div class="content" part="content">
+          ${this.title ? html`<div class="title" part="title">${this.title}</div>` : ''}
+          <slot name="title"></slot>
+
+          <div class="message" part="message">${this.message}</div>
+          <slot></slot>
+
+          <div class="actions" ?hidden="${!this._hasActions}" part="actions">
+            <slot name="actions" @slotchange="${this._handleSlotChange}"></slot>
+          </div>
+        </div>
+        
+        ${this.dismissible ? html`
+          <div class="dismiss-container" part="dismiss-container">
+            <ds-icon-button
+              class="close-button"
+              icon="close"
+              variant="action"
+              size="m"
+              aria-label="Fechar alerta"
+              part="close-button"
+              @click="${this._handleDismiss}"
+            ></ds-icon-button>
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+}
+
+customElements.define('ds-alert', DsAlert);

package/src/ds-alert/ds-alert.mdx

@@ -0,0 +1,142 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as DsAlertStories from './ds-alert.stories';
+
+<Meta of={DsAlertStories} />
+
+# Alert
+
+Alerts provide contextual feedback messages for typical user actions with different severity levels.
+
+## Playground
+Interact with the alert properties using the controls below.
+
+<Canvas of={DsAlertStories.Default} />
+<Controls of={DsAlertStories.Default} />
+
+## Usage
+
+### When to use
+- To communicate important information to users.
+- To provide feedback after an action (success, error, warning).
+- To display system-level notifications or updates.
+
+### When not to use
+- For critical errors that require immediate action—use a modal dialog instead.
+- For inline form validation—use field-level error messages.
+- For temporary notifications—consider using a toast/snackbar pattern.
+
+## Best Practices
+
+### General
+- ✅ **Clarity:** Keep messages concise and actionable.
+- ✅ **Placement:** Position alerts near the content they relate to.
+- ✅ **Persistence:** Non-dismissible alerts should only be used for critical, persistent information.
+- ✅ **Actions:** Limit to 1-2 action buttons to avoid overwhelming users.
+
+### Status Selection
+- ✅ **Error:** For critical failures or validation errors.
+- ✅ **Warning:** For cautionary information that requires attention.
+- ✅ **Success:** For positive confirmations of completed actions.
+- ✅ **Info:** For neutral, informational messages.
+
+## Status Types
+
+### Error
+Use for critical failures, errors, or validation issues that prevent users from proceeding.
+
+<Canvas of={DsAlertStories.Error} />
+
+### Warning
+Use for cautionary information that requires user attention but doesn't prevent action.
+
+<Canvas of={DsAlertStories.Warning} />
+
+### Success
+Use to confirm that an action was completed successfully.
+
+<Canvas of={DsAlertStories.Success} />
+
+### Info
+Use for neutral, informational messages that don't require immediate action.
+
+<Canvas of={DsAlertStories.Info} />
+
+## Functionality & States
+
+### Non-Dismissible
+Alerts can be made non-dismissible for critical information that must remain visible.
+
+<Canvas of={DsAlertStories.NonDismissible} />
+
+### With Title
+Use the title property for alerts that need a heading above the main message.
+
+<Canvas of={DsAlertStories.WithTitle} />
+
+## Accessibility
+
+<table style={{ width: '100%' }}>
+  <thead>
+    <tr>
+      <th>Attribute</th>
+      <th>Value</th>
+      <th>Notes</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>role</code></td>
+      <td><code>alert</code></td>
+      <td>Automatically applied for screen reader announcements</td>
+    </tr>
+    <tr>
+      <td><code>aria-label</code></td>
+      <td><code>"Fechar alerta"</code></td>
+      <td>Applied to close button for accessibility</td>
+    </tr>
+  </tbody>
+</table>
+
+### Keyboard Support
+
+<table style={{ width: '100%' }}>
+  <thead>
+    <tr>
+      <th>Key</th>
+      <th>Action</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><kbd>Tab</kbd></td>
+      <td>Moves focus to close button or action buttons</td>
+    </tr>
+    <tr>
+      <td><kbd>Enter</kbd> / <kbd>Space</kbd></td>
+      <td>Activates focused button (close or action)</td>
+    </tr>
+    <tr>
+      <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+      <td>Moves focus to previous focusable element</td>
+    </tr>
+  </tbody>
+</table>
+
+## Events
+
+<table style={{ width: '100%' }}>
+  <thead>
+    <tr>
+      <th>Event</th>
+      <th>Detail</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>ds-dismiss</code></td>
+      <td><code>{}</code></td>
+      <td>Fired when the user clicks the close button</td>
+    </tr>
+  </tbody>
+</table>

package/src/ds-alert/ds-alert.stories.js

@@ -0,0 +1,166 @@
+import { html } from 'lit';
+import './ds-alert.js';
+import '../ds-button/ds-button.js';
+
+export default {
+  title: 'Components/Alert',
+  component: 'ds-alert',
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['error', 'warning', 'success', 'info'],
+      description: 'Status type that determines background color and icon',
+      table: {
+        defaultValue: { summary: 'info' }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Optional title text'
+    },
+    message: {
+      control: 'text',
+      description: 'Message text'
+    },
+    hideIcon: {
+      control: 'boolean',
+      description: 'Hide the status icon',
+      table: {
+        defaultValue: { summary: 'false' }
+      }
+    },
+    dismissible: {
+      control: 'boolean',
+      description: 'Show/hide close button',
+      table: {
+        defaultValue: { summary: 'true' }
+      }
+    }
+  }
+};
+
+const Template = (args) => html`
+  <ds-alert 
+    .status=${args.status} 
+    .title=${args.title} 
+    .message=${args.message} 
+    ?dismissible=${args.dismissible}
+    ?hide-icon=${args.hideIcon}
+  >
+    ${args.slotContent ? html`${args.slotContent}` : ''}
+  </ds-alert>
+`;
+
+/**
+ * Default alert with info status
+ */
+export const Default = {
+  args: {
+    status: 'info',
+    title: 'Alert Title',
+    message: 'This is an informational message.',
+    dismissible: true,
+    hideIcon: false
+  },
+  render: (args) => Template(args)
+};
+
+/**
+ * Error status for critical/failed states
+ */
+export const Error = {
+  args: {
+    status: 'error',
+    message: 'An error occurred while processing your request.',
+    dismissible: true
+  },
+  render: (args) => Template(args)
+};
+
+/**
+ * Warning status for caution/attention states
+ */
+export const Warning = {
+  args: {
+    status: 'warning',
+    message: 'Please review your changes before proceeding.',
+    dismissible: true
+  },
+  render: (args) => Template(args)
+};
+
+/**
+ * Success status for completed/positive states
+ */
+export const Success = {
+  args: {
+    status: 'success',
+    message: 'Your changes have been saved successfully.',
+    dismissible: true
+  },
+  render: (args) => Template(args)
+};
+
+/**
+ * Info status for informational states
+ */
+export const Info = {
+  args: {
+    status: 'info',
+    message: 'New features are now available in your dashboard.',
+    dismissible: true
+  },
+  render: (args) => Template(args)
+};
+
+/**
+ * Alert without dismiss button
+ */
+export const NonDismissible = {
+  args: {
+    status: 'warning',
+    message: 'This alert cannot be dismissed.',
+    dismissible: false
+  },
+  render: (args) => Template(args)
+};
+
+/**
+ * Alert with title and description using properties
+ */
+export const WithTitle = {
+  args: {
+    status: 'error',
+    title: 'Payment Failed',
+    message: 'Your payment could not be processed. Please check your payment details and try again.',
+    dismissible: true
+  },
+  render: (args) => Template(args)
+};
+
+/**
+ * Alert with action buttons
+ */
+export const WithActions = {
+  args: {
+    status: 'info',
+    message: 'A new version of the application is available.',
+    dismissible: true
+  },
+  render: (args) => html`
+    <ds-alert 
+      .status=${args.status} 
+      .title=${args.title} 
+      .message=${args.message} 
+      ?dismissible=${args.dismissible}
+    >
+      <div slot="actions" style="display: flex; gap: 8px;">
+        <ds-button variant="action">Update</ds-button>
+        <ds-button variant="action">Later</ds-button>
+      </div>
+    </ds-alert>
+  `
+};
+
+