# Design System - Feedback Components

## Overview

Feedback components communicate system status, user actions, and important information. They use the brand color palette (Orange→Pink→Blue) with semantic colors for specific states. All feedback uses consistent animation patterns and timing.

---

## Feedback Types

| Type | Purpose | Duration | Position |
|------|---------|----------|----------|
| **Toast** | Brief status messages | 4s auto-dismiss | Bottom center |
| **Alert** | Important information | Persistent | Inline |
| **Notification** | System updates | 6s auto-dismiss | Top right |
| **Snackbar** | Action confirmation | 4s auto-dismiss | Bottom center |
| **Banner** | Page-level messages | Persistent | Top of page |

---

## Color Usage

### Brand Colors (Default/Info)
| Color | Hex | Usage |
|-------|-----|-------|
| Orange | #FB923C | Primary accent, progress |
| Pink | #F472B6 | Secondary accent |
| Blue | #93C5FD | Info background tint |

### Semantic Colors
| State | Background | Border | Icon |
|-------|------------|--------|------|
| **Success** | #F0FDF4 | #22C55E | #22C55E |
| **Warning** | #FFFBEB | #F59E0B | #F59E0B |
| **Error** | #FEF2F2 | #EF4444 | #EF4444 |
| **Info** | #EFF6FF | #93C5FD | #93C5FD |

---

## Toast Component

### Anatomy

```
┌─────────────────────────────────────────────┐
│  [Icon]  Message text here          [Close] │
│          Optional action link               │
└─────────────────────────────────────────────┘
     ↑ Progress bar (brand gradient)
```

### HTML Structure

```html
<div class="toast toast-success" role="alert" aria-live="polite">
  <div class="toast-icon">
    <svg><!-- Check icon --></svg>
  </div>
  <div class="toast-content">
    <p class="toast-message">Strategy saved successfully</p>
    <a href="#" class="toast-action">View strategy</a>
  </div>
  <button class="toast-close" aria-label="Dismiss">
    <svg><!-- Close icon --></svg>
  </button>
  <div class="toast-progress"></div>
</div>
```

### Variants

```html
<!-- Success -->
<div class="toast toast-success">...</div>

<!-- Warning -->
<div class="toast toast-warning">...</div>

<!-- Error -->
<div class="toast toast-error">...</div>

<!-- Info -->
<div class="toast toast-info">...</div>
```

### Specifications

| Element | Specification |
|---------|---------------|
| **Width** | 320px min, 400px max |
| **Padding** | 16px |
| **Border Radius** | 8px |
| **Shadow** | 0 4px 12px rgba(0,0,0,0.15) |
| **Icon Size** | 20px |
| **Font Size** | 14px message, 13px action |
| **Progress Height** | 3px |
| **Duration** | 4s default |

---

## Alert Component

### Anatomy

```
┌─────────────────────────────────────────────┐
│  [Icon]  Alert Title                        │
│          Alert description text that can    │
│          wrap to multiple lines.            │
│                                             │
│          [ Action ]  [ Dismiss ]            │
└─────────────────────────────────────────────┘
```

### HTML Structure

```html
<div class="alert alert-warning" role="alert">
  <div class="alert-icon">
    <svg><!-- Warning icon --></svg>
  </div>
  <div class="alert-content">
    <h4 class="alert-title">Attention needed</h4>
    <p class="alert-description">
      Your subscription expires in 3 days. Renew now to avoid interruption.
    </p>
    <div class="alert-actions">
      <button class="btn btn-sm btn-primary">Renew now</button>
      <button class="btn btn-sm btn-ghost">Dismiss</button>
    </div>
  </div>
</div>
```

### Specifications

| Element | Specification |
|---------|---------------|
| **Padding** | 16px |
| **Border Left** | 4px solid (state color) |
| **Border Radius** | 8px |
| **Title** | 14px, font-weight 600 |
| **Description** | 14px, font-weight 400 |
| **Background** | Tinted based on state |

---

## Notification Component

### Anatomy

```
┌─────────────────────────────────────────────┐
│  [Avatar/Icon]  Title            [Time] [X] │
│                 Description text            │
└─────────────────────────────────────────────┘
```

### HTML Structure

```html
<div class="notification" role="alert" aria-live="polite">
  <div class="notification-icon">
    <img src="avatar.jpg" alt="User" />
  </div>
  <div class="notification-content">
    <div class="notification-header">
      <h4 class="notification-title">New comment</h4>
      <span class="notification-time">2m ago</span>
    </div>
    <p class="notification-description">
      Sarah commented on your strategy "Q4 Growth Plan"
    </p>
  </div>
  <button class="notification-close" aria-label="Dismiss">
    <svg><!-- Close icon --></svg>
  </button>
</div>
```

### Specifications

| Element | Specification |
|---------|---------------|
| **Width** | 360px |
| **Padding** | 16px |
| **Border Radius** | 12px |
| **Shadow** | 0 8px 24px rgba(0,0,0,0.12) |
| **Avatar** | 40px circle |
| **Title** | 14px, font-weight 600 |
| **Description** | 13px, color #9A9A9A |
| **Time** | 12px, color #9A9A9A |

---

## Snackbar Component

### Anatomy

```
┌─────────────────────────────────────────────┐
│  Message text                    [ Action ] │
└─────────────────────────────────────────────┘
```

### HTML Structure

```html
<div class="snackbar" role="status" aria-live="polite">
  <span class="snackbar-message">Strategy deleted</span>
  <button class="snackbar-action">Undo</button>
</div>
```

### Specifications

| Element | Specification |
|---------|---------------|
| **Background** | #383737 |
| **Text Color** | white |
| **Action Color** | #FB923C |
| **Padding** | 14px 16px |
| **Border Radius** | 8px |
| **Min Width** | 288px |
| **Max Width** | 568px |

---

## Banner Component

### Anatomy

```
┌─────────────────────────────────────────────────────────────┐
│  [Icon]  Banner message with important information  [Close] │
└─────────────────────────────────────────────────────────────┘
```

### HTML Structure

```html
<div class="banner banner-info" role="banner">
  <div class="banner-icon">
    <svg><!-- Info icon --></svg>
  </div>
  <p class="banner-message">
    New features available! <a href="#">Learn more</a>
  </p>
  <button class="banner-close" aria-label="Dismiss">
    <svg><!-- Close icon --></svg>
  </button>
</div>
```

### Specifications

| Element | Specification |
|---------|---------------|
| **Width** | 100% |
| **Padding** | 12px 24px |
| **Background** | Gradient (brand colors) or solid (semantic) |
| **Text** | 14px, centered |
| **Position** | Fixed top or inline |

---

## Animation System

### Entry Animation
All feedback components slide in with brand gradient accent:

```css
@keyframes toast-enter {
  0% {
    transform: translateY(100%) scale(0.95);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
```

### Progress Bar
Uses brand gradient flowing left to right:

```css
@keyframes progress-shrink {
  0% {
    width: 100%;
    background: linear-gradient(90deg, #FB923C, #F472B6, #93C5FD);
  }
  100% {
    width: 0%;
    background: linear-gradient(90deg, #FB923C, #F472B6, #93C5FD);
  }
}
```

### Exit Animation
Fade out with slight scale:

```css
@keyframes toast-exit {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-10px) scale(0.95);
    opacity: 0;
  }
}
```

### Timing

| Animation | Duration | Easing |
|-----------|----------|--------|
| Enter | 300ms | ease-out |
| Exit | 200ms | ease-in |
| Progress | 4000ms | linear |
| Hover pause | instant | - |

---

## CSS Implementation

```css
/* Toast Base */
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 320px;
  max-width: 400px;
  position: relative;
  overflow: hidden;
  animation: toast-enter 300ms ease-out;
}

/* Toast Variants */
.toast-success {
  border-left: 4px solid #22C55E;
}

.toast-warning {
  border-left: 4px solid #F59E0B;
}

.toast-error {
  border-left: 4px solid #EF4444;
}

.toast-info {
  border-left: 4px solid #93C5FD;
}

/* Progress Bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #FB923C, #F472B6, #93C5FD);
  animation: progress-shrink 4000ms linear forwards;
}

.toast:hover .toast-progress {
  animation-play-state: paused;
}

/* Alert Base */
.alert {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid;
}

.alert-success {
  background: #F0FDF4;
  border-color: #22C55E;
}

.alert-warning {
  background: #FFFBEB;
  border-color: #F59E0B;
}

.alert-error {
  background: #FEF2F2;
  border-color: #EF4444;
}

.alert-info {
  background: #EFF6FF;
  border-color: #93C5FD;
}

/* Snackbar */
.snackbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: #383737;
  color: white;
  border-radius: 8px;
  min-width: 288px;
  max-width: 568px;
}

.snackbar-action {
  color: #FB923C;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
}

/* Banner */
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 24px;
  width: 100%;
}

.banner-info {
  background: linear-gradient(90deg, #FB923C, #F472B6, #93C5FD);
  color: white;
}
```

---

## Stacking Behavior

When multiple toasts appear:
- Stack vertically with 8px gap
- Newer toasts appear at bottom
- Max 3 visible at once
- Oldest auto-dismiss first

```css
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
}
```

---

## Accessibility

- Use `role="alert"` for important messages
- Use `aria-live="polite"` for non-urgent updates
- Ensure dismiss buttons are keyboard accessible
- Progress bars should be decorative (`aria-hidden="true"`)
- Provide sufficient time to read (4s minimum)
- Allow pausing on hover/focus
- Don't rely on color alone for state

```html
<div class="toast toast-error" role="alert" aria-live="assertive">
  <div class="toast-icon" aria-hidden="true">...</div>
  <div class="toast-content">
    <p class="toast-message">Error: Could not save changes</p>
  </div>
  <button class="toast-close" aria-label="Dismiss notification">...</button>
  <div class="toast-progress" aria-hidden="true"></div>
</div>
```

---

## Usage Guidelines

### Do
- Keep messages concise (under 100 characters)
- Provide actions when relevant
- Use appropriate semantic colors
- Position consistently across the app
- Allow dismissal of persistent messages

### Don't
- Stack more than 3 toasts
- Use for critical errors requiring action
- Interrupt user flow unnecessarily
- Display duplicate messages
- Auto-dismiss error messages

---

## Prototype

`feedback-prototype/index.html`