# Notification

## Visual Structure

```
ga-notification [--information|--success|--error|--warning]
  ├── ga-notification__icon (optional)
  ├── ga-notification__content
  │   ├── ga-notification__heading (optional)
  │   │   ├── ga-notification__title
  │   │   └── ga-notification__title-actions (optional)
  │   └── ga-notification__description
  └── ga-notification__progress [--indeterminate] (optional)
      └── ga-notification__progress-bar
```

## Elements Hierarchy

### Core Block

- `ga-notification` - Main container for the entire notification component

### Mandatory Elements

- `ga-notification__content` - Container for all text content within the notification
- `ga-notification__description` - The contents of the notification

### Optional Elements

- `ga-notification__icon` - Icon displayed to enhance the visual meaning of the notification
- `ga-notification__heading` - Container that groups the title and action buttons
- `ga-notification__title` - The heading text of the notification
- `ga-notification__title-actions` - Container for action buttons displayed in the title area
- `ga-notification__progress` - Container for the progress bar, indicating the status of the notification
- `ga-notification__progress-bar` - The actual progress bar element, use css `width` to control the progress percentage value
- Dismiss button - Button to close/dismiss the notification

### Modifiers

- `ga-notification--information` - Styles the notification with information colors
- `ga-notification--success` - Styles the notification with success colors
- `ga-notification--error` - Styles the notification with error colors
- `ga-notification--warning` - Styles the notification with warning colors
- `ga-notification__progress--indeterminate` - Styles the notification with indeterminate progress bar

## Examples

### Default

```html
<div class="ga-notification">
  <div class="ga-notification__content">
    <p class="ga-notification__description">
      This is an information notification message.
    </p>
  </div>
</div>
```

### With Title

```html
<div class="ga-notification">
  <div class="ga-notification__content">
    <div class="ga-notification__heading">
      <div class="ga-notification__title">Information notification</div>
    </div>
    <p class="ga-notification__description">
      Here is some important information for you.
    </p>
  </div>
</div>
```

### With Icon

```html
<div class="ga-notification">
  <!-- icon: hand-coins, size=24, class="ga-notification__icon" -->
  <div class="ga-notification__content">
    <p class="ga-notification__description">
      Here is some important information for you.
    </p>
  </div>
</div>
```

### With Icon & Title

```html
<div class="ga-notification">
  <!-- icon: hand-coins, size=24, class="ga-notification__icon" -->
  <div class="ga-notification__content">
    <div class="ga-notification__heading">
      <div class="ga-notification__title">Information notification</div>
    </div>
    <p class="ga-notification__description">
      Here is some important information for you.
    </p>
  </div>
</div>
```

### Success

```html
<div class="ga-notification ga-notification--success">
  <!-- icon: circle-check, size=24, class="ga-notification__icon" -->
  <div class="ga-notification__content">
    <div class="ga-notification__heading">
      <div class="ga-notification__title">Success notification</div>
    </div>
    <p class="ga-notification__description">
      The operation was completed successfully.
    </p>
  </div>
</div>
```

### Error

```html
<div class="ga-notification ga-notification--error">
  <!-- icon: octagon-alert, size=24, class="ga-notification__icon" -->
  <div class="ga-notification__content">
    <div class="ga-notification__heading">
      <div class="ga-notification__title">Error notification</div>
    </div>
    <p class="ga-notification__description">
      An error occurred while processing your request.
    </p>
  </div>
</div>
```

### Warning

```html
<div class="ga-notification ga-notification--warning">
  <!-- icon: triangle-alert, size=24, class="ga-notification__icon" -->
  <div class="ga-notification__content">
    <div class="ga-notification__heading">
      <div class="ga-notification__title">Warning notification</div>
    </div>
    <p class="ga-notification__description">
      Please review the following warning message.
    </p>
  </div>
</div>
```

### Information

```html
<div class="ga-notification ga-notification--information">
  <!-- icon: info, size=24, class="ga-notification__icon" -->
  <div class="ga-notification__content">
    <div class="ga-notification__heading">
      <div class="ga-notification__title">Information notification</div>
    </div>
    <p class="ga-notification__description">
      Here is some important information for you.
    </p>
  </div>
</div>
```

### With Icon & Dismiss

```html
<div class="ga-notification">
  <!-- icon: hand-coins, size=24, class="ga-notification__icon" -->
  <div class="ga-notification__content">
    <p class="ga-notification__description">
      This is an information notification message.
    </p>
  </div>
  <button type="button" class="ga-button ga-button--icon-only ga-button--ghost">
    <!-- icon: x, size=24 -->
  </button>
</div>
```

### With Content

```html
<div class="ga-notification">
  <!-- icon: hand-coins, size=24, class="ga-notification__icon" -->
  <div class="ga-notification__content">
    <div class="ga-notification__heading">
      <div class="ga-notification__title">Title of the notification</div>
    </div>
    <div class="ga-notification__description">
      <p>This is an information notification message.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <button type="button" class="ga-button ga-button--primary">
          <!-- icon: check, size=24 -->
          Approve
        </button>
        <button type="button" class="ga-button ga-button--secondary">
          <!-- icon: octagon-x, size=24 -->
          Reject
        </button>
      </div>
    </div>
  </div>
</div>
```

### With Title Actions

```html
<div class="ga-notification">
  <!-- icon: hand-coins, size=24, class="ga-notification__icon" -->
  <div class="ga-notification__content">
    <div class="ga-notification__heading">
      <div class="ga-notification__title">Title of the notification</div>
      <div class="ga-notification__title-actions">
        <button
          type="button"
          class="ga-button ga-button--icon-only ga-button--ghost"
        >
          <!-- icon: ellipsis, size=24 -->
        </button>
        <button
          type="button"
          class="ga-button ga-button--icon-only ga-button--ghost"
        >
          <!-- icon: bell-off, size=24 -->
        </button>
        <button
          type="button"
          class="ga-button ga-button--icon-only ga-button--ghost"
        >
          <!-- icon: chevrons-left-right-ellipsis, size=24 -->
        </button>
      </div>
    </div>
    <div class="ga-notification__description">
      <p>This is an information notification message.</p>
    </div>
  </div>
</div>
```

### With Progress Bar

```html
<div class="ga-notification">
  <div class="ga-notification__content">
    <p class="ga-notification__description">
      This is an information notification message.
    </p>
  </div>
  <div class="ga-notification__progress">
    <div class="ga-notification__progress-bar" style="width: 35%"></div>
  </div>
</div>
```
```html
<div class="ga-notification ga-notification--success">
  <!-- icon: circle-check, size=24, class="ga-notification__icon" -->
  <div class="ga-notification__content">
    <div class="ga-notification__heading">
      <div class="ga-notification__title">Success notification</div>
    </div>
    <p class="ga-notification__description">
      The operation was completed successfully.
    </p>
  </div>
  <div class="ga-notification__progress">
    <div class="ga-notification__progress-bar" style="width: 35%"></div>
  </div>
</div>
```
```html
<div class="ga-notification ga-notification--error">
  <!-- icon: octagon-alert, size=24, class="ga-notification__icon" -->
  <div class="ga-notification__content">
    <div class="ga-notification__heading">
      <div class="ga-notification__title">Error notification</div>
    </div>
    <p class="ga-notification__description">
      An error occurred while processing your request.
    </p>
  </div>
  <div class="ga-notification__progress">
    <div class="ga-notification__progress-bar" style="width: 35%"></div>
  </div>
</div>
```
```html
<div class="ga-notification ga-notification--warning">
  <!-- icon: triangle-alert, size=24, class="ga-notification__icon" -->
  <div class="ga-notification__content">
    <div class="ga-notification__heading">
      <div class="ga-notification__title">Warning notification</div>
    </div>
    <p class="ga-notification__description">
      Please review the following warning message.
    </p>
  </div>
  <div class="ga-notification__progress">
    <div class="ga-notification__progress-bar" style="width: 35%"></div>
  </div>
</div>
```
```html
<div class="ga-notification ga-notification--information">
  <!-- icon: info, size=24, class="ga-notification__icon" -->
  <div class="ga-notification__content">
    <div class="ga-notification__heading">
      <div class="ga-notification__title">Information notification</div>
    </div>
    <p class="ga-notification__description">
      Here is some important information for you.
    </p>
  </div>
  <div class="ga-notification__progress">
    <div class="ga-notification__progress-bar" style="width: 35%"></div>
  </div>
</div>
```
```html
<div class="ga-notification ga-notification--information">
  <!-- icon: info, size=24, class="ga-notification__icon" -->
  <div class="ga-notification__content">
    <div class="ga-notification__heading">
      <div class="ga-notification__title">Information notification</div>
    </div>
    <p class="ga-notification__description">
      Here is some important information for you.
    </p>
  </div>
  <div
    class="ga-notification__progress ga-notification__progress--indeterminate"
  >
    <div class="ga-notification__progress-bar"></div>
  </div>
</div>
```