feat: add property description and noRadius

Brisanet · Sep 26, 2023 · 947366b · 947366b
1 parent 38d8fb8
commit 947366b
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 21 deletions.
diff --git a/projects/ion/src/lib/alert/alert.component.html b/projects/ion/src/lib/alert/alert.component.html
@@ -1,27 +1,40 @@
 <div
   data-testid="ion-alert"
   [class]="'ion-alert ' + type + ' closable-' + closable"
-  [ngClass]="{ 'without-background': hideBackground }"
+  [ngClass]="{
+    'without-background': hideBackground,
+    'with-description': description,
+    'no-radius': noRadius
+  }"
   #ionAlert
 >
-  <ion-icon
-    data-testid="status-icon"
-    class="alert-icon"
-    [type]="iconType"
-  ></ion-icon>
-  <span *ngIf="hasPlainText; else customBody" data-testid="ion-alert-message">{{
-    message
-  }}</span>
+  <div class="header">
+    <div class="message">
+      <ion-icon
+        data-testid="status-icon"
+        class="alert-icon"
+        [type]="iconType"
+      ></ion-icon>
 
-  <ng-template #customBody>
-    <ng-container [ngTemplateOutlet]="message"></ng-container>
-  </ng-template>
+      <span
+        *ngIf="hasPlainText; else customBody"
+        data-testid="ion-alert-message"
+        >{{ message }}</span
+      >
 
-  <ion-icon
-    class="close-icon"
-    data-testid="close-icon"
-    type="close"
-    *ngIf="closable"
-    (click)="closeEvent()"
-  ></ion-icon>
+      <ng-template #customBody>
+        <ng-container [ngTemplateOutlet]="message"></ng-container>
+      </ng-template>
+    </div>
+
+    <ion-icon
+      class="close-icon"
+      data-testid="close-icon"
+      type="close"
+      *ngIf="closable"
+      (click)="closeEvent()"
+    ></ion-icon>
+  </div>
+
+  <div *ngIf="description" class="description">{{ description }}</div>
 </div>
diff --git a/projects/ion/src/lib/alert/alert.component.scss b/projects/ion/src/lib/alert/alert.component.scss
@@ -16,8 +16,7 @@
 
 .ion-alert {
   display: flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: column;
   gap: 8px;
   border: 1px solid;
   border-radius: 8px;
@@ -31,6 +30,18 @@
   }
 }
 
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.message {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .success {
   @include alert-style($positive-1, $positive-6);
 }
@@ -52,6 +63,15 @@
   border: none !important;
 }
 
+.with-description {
+  border: none !important;
+  background-color: #f2f3f5;
+}
+
+.no-radius {
+  border-radius: 0;
+}
+
 .closable-true {
   padding: spacing(1) spacing(2);
 }

diff --git a/projects/ion/src/lib/alert/alert.component.ts b/projects/ion/src/lib/alert/alert.component.ts
@@ -28,12 +28,15 @@ export class IonAlertComponent implements OnInit, OnChanges {
   @Input() type?: StatusType = 'success';
   @Input() closable? = false;
   @Input() hideBackground? = false;
+  @Input() noRadius? = false;
+  @Input() description?: string;
 
   @ViewChild('ionAlert', { static: false }) private ionAlert: ElementRef;
 
   iconType: IconType;
 
   hasPlainText: boolean;
+  hasDescription: boolean;
 
   closeEvent(): void {
     this.ionAlert.nativeElement.remove();
@@ -44,6 +47,14 @@ export class IonAlertComponent implements OnInit, OnChanges {
   }
 
   ngOnInit(): void {
+    if (this.description) {
+      this.hasDescription = true;
+    }
+
+    if (this.noRadius) {
+      this.noRadius = true;
+    }
+
     if (this.hideBackground) {
       this.closable = false;
     }

diff --git a/stories/Alert.stories.mdx b/stories/Alert.stories.mdx
@@ -170,3 +170,21 @@ A partir do paramêtro `hideBackground` pode ser definido se o usuário quer mos
     {Template.bind({})}
   </Story>
 </Canvas>
+
+<Canvas>
+  <Story
+    name="type: with description"
+    args={{
+      type: 'info',
+      message: 'Example of alert message',
+      description: 'Example of description.',
+    }}
+    decorators={[
+      moduleMetadata({
+        imports: [CommonModule, IonSharedModule],
+      }),
+    ]}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>