diff --git a/projects/ion/src/lib/alert/alert.component.html b/projects/ion/src/lib/alert/alert.component.html
index 43889575a..204ed90f9 100644
--- a/projects/ion/src/lib/alert/alert.component.html
+++ b/projects/ion/src/lib/alert/alert.component.html
@@ -1,27 +1,43 @@
0,
+ 'no-radius': noRadius
+ }"
#ionAlert
>
-
- {{
- message
- }}
+
+
+ 0" class="description">
+ {{ description }}
+
diff --git a/projects/ion/src/lib/alert/alert.component.scss b/projects/ion/src/lib/alert/alert.component.scss
index eb2184a55..74ab866b2 100644
--- 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
index 07d2c8dd5..2cc573da5 100644
--- 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
index b69712c09..c765ae885 100644
--- 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
index 070ce5eaf..d05e2e2af 100644
--- 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;
+ description?: string;
type?: StatusType;
closable?: boolean;
hideBackground?: boolean;
+ noRadius?: boolean;
}
diff --git a/stories/Alert.stories.mdx b/stories/Alert.stories.mdx
index 380cbf333..20367d97a 100644
--- 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({})}
+
+