feat(alert): Introduce info severity type

Signed-off-by: Bartosz Bobin <bartosz.bobin@dynatrace.com>

apps/dev/src/alert/alert-demo.component.html

@@ -1 +1,4 @@
-<dt-alert severity="warning">This is an error message!</dt-alert>
+<dt-alert>This is a default severity message!</dt-alert>
+<dt-alert severity="error">This is an error message!</dt-alert>
+<dt-alert severity="warning">This is a warning message!</dt-alert>
+<dt-alert severity="info">This is an info message!</dt-alert>

apps/dev/src/alert/alert-demo.component.scss

@@ -1,3 +1,7 @@
 :host {
   display: block;
 }
+
+.dt-alert {
+  margin-bottom: 12px;
+}

libs/barista-components/alert/README.md

@@ -23,10 +23,10 @@ To use the alert component, add the `<dt-alert>` element to your page.
 
 ## Inputs
 
-| Name           | Type              | Default | Description                                                 |
-| -------------- | ----------------- | ------- | ----------------------------------------------------------- |
-| `severity`     | `error | warning` | `error` | Sets the alert severity.                                    |
-| `<ng-content>` |                   |         | The text (error/warning) message which should be displayed. |
+| Name           | Type                     | Default | Description                                                      |
+| -------------- | ------------------------ | ------- | ---------------------------------------------------------------- |
+| `severity`     | `error | warning | info` | `error` | Sets the alert severity.                                         |
+| `<ng-content>` |                          |         | The text (error/warning/info) message which should be displayed. |
 
 ## Variants
 

libs/barista-components/alert/src/_alert-theme.scss

@@ -6,6 +6,10 @@
   --dt-alert-default-color: var(--dt-warning-default-color);
 }
 
+:host.dt-alert-info {
+  --dt-alert-default-color: var(--dt-accent-default-color);
+}
+
 .dt-alert-icon-container {
   background-color: var(--dt-alert-default-color);
 }

libs/barista-components/alert/src/alert.html

@@ -1,8 +1,5 @@
 <div class="dt-alert-icon-container">
-  <dt-icon
-    class="dt-alert-icon"
-    [name]="severity === 'warning' ? 'incident' : 'criticalevent'"
-  ></dt-icon>
+  <dt-icon class="dt-alert-icon" [name]="severityIcon"></dt-icon>
 </div>
 <div class="dt-alert-text-container">
   <ng-content></ng-content>

libs/barista-components/alert/src/alert.ts

@@ -20,6 +20,13 @@ import {
   Input,
   ViewEncapsulation,
 } from '@angular/core';
+import { DtIconType } from '@dynatrace/barista-icons';
+
+const ALERT_SEVERITY_TO_ICON_MAP: Record<string, DtIconType> = {
+  error: 'criticalevent',
+  warning: 'incident',
+  info: 'information',
+};
 
 @Component({
   selector: 'dt-alert',
@@ -29,12 +36,20 @@ import {
     role: 'alert',
     class: 'dt-alert',
     '[class.dt-alert-warning]': 'severity === "warning"',
+    '[class.dt-alert-info]': 'severity === "info"',
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.Emulated,
 })
 export class DtAlert {
   /** The severity type of the alert. */
-  @Input() severity: 'error' | 'warning' = 'error';
+  @Input() severity: 'error' | 'warning' | 'info' = 'error';
+
+  get severityIcon(): DtIconType {
+    return (
+      ALERT_SEVERITY_TO_ICON_MAP[this.severity] ??
+      ALERT_SEVERITY_TO_ICON_MAP.error
+    );
+  }
 }

libs/examples/src/alert/alert-interactive-example/alert-interactive-example.html

@@ -3,3 +3,4 @@
 </div>
 <button dt-button (click)="alert1.severity = 'warning'">Set Warning</button>
 <button dt-button (click)="alert1.severity = 'error'">Set Error</button>
+<button dt-button (click)="alert1.severity = 'info'">Set Info</button>