diff --git a/projects/ion/package.json b/projects/ion/package.json index 307e77922..0fae20fe7 100644 --- a/projects/ion/package.json +++ b/projects/ion/package.json @@ -1,6 +1,6 @@ { "name": "@brisanet/ion", - "version": "0.0.74", + "version": "0.0.75", "repository": { "type": "git", "url": "git+https://github.com/Brisanet/ion.git" 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 @@
- - {{ - message - }} +
+
+ - - - + {{ message }} - + + + +
+ + +
+ + + {{ 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({})} + + + + {Template.bind({})} + +