feat: add alert variation with description (#839) ✨

* feat: add property description and noRadius * fix: add test * fix: pr suggestions * fix: pr suggestions --------- Co-authored-by: Madalena Campos <[email protected]> Co-authored-by: Iury Nogueira <[email protected]>
Brisanet · Sep 29, 2023 · 60bd35f · 60bd35f
1 parent 63024a6
commit 60bd35f
Show file tree

Hide file tree

Showing 6 changed files with 106 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,43 @@
 <div
   data-testid="ion-alert"
   [class]="'ion-alert ' + type + ' closable-' + closable"
-  [ngClass]="{ 'without-background': hideBackground }"
+  [ngClass]="{
+    'without-background': hideBackground,
+    'with-description': description?.length > 0,
+    '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"
+        class="message-text"
+        >{{ 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>
+
+  <span *ngIf="description?.length > 0" class="description">
+    {{ description }}
+  </span>
 </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);
 }
@@ -47,11 +58,31 @@
   @include alert-style($negative-1, $negative-6);
 }
 
+.with-description {
+  border: none !important;
+  background-color: $neutral-2;
+  padding: spacing(2) spacing(3) !important;
+  color: $neutral-7;
+  gap: 4px;
+
+  .message-text {
+    font-weight: 600;
+  }
+
+  .description {
+    width: 100%;
+  }
+}
+
 .without-background {
   background-color: transparent;
   border: none !important;
 }
 
+.no-radius {
+  border-radius: 0;
+}
+
 .closable-true {
   padding: spacing(1) spacing(2);
 }

diff --git a/projects/ion/src/lib/alert/alert.component.spec.ts b/projects/ion/src/lib/alert/alert.component.spec.ts
@@ -103,6 +103,22 @@ describe('AlertComponent', () => {
     expect(element).toHaveClass('without-background');
   });
 
+  it('should render with description', async () => {
+    const description = 'Testing description';
+    const element = await sut({ ...defaultValue, description });
+    expect(element).toHaveTextContent(description);
+  });
+
+  it('should render with radius', async () => {
+    const element = await sut(defaultValue);
+    expect(element).not.toHaveClass('no-radius');
+  });
+
+  it('should render without radius', async () => {
+    const element = await sut({ ...defaultValue, noRadius: true });
+    expect(element).toHaveClass('no-radius');
+  });
+
   describe('With a string provided', () => {
     it('Should have an alert message', async () => {
       expect(await sut()).toHaveTextContent(defaultValue.message as string);

diff --git a/projects/ion/src/lib/alert/alert.component.ts b/projects/ion/src/lib/alert/alert.component.ts
@@ -28,6 +28,8 @@ 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;
 

diff --git a/projects/ion/src/lib/core/types/alert.ts b/projects/ion/src/lib/core/types/alert.ts
@@ -3,7 +3,9 @@ import { StatusType } from './status';
 
 export interface IonAlertProps {
   message: string | TemplateRef<void>;
+  description?: string;
   type?: StatusType;
   closable?: boolean;
   hideBackground?: boolean;
+  noRadius?: boolean;
 }
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>