feat(alert): add self contained close on alert (#441)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
juntossomosmais · May 23, 2024 · 8cc3f61 · 8cc3f61
1 parent 9aeda52
commit 8cc3f61
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 48 deletions.
diff --git a/packages/core/src/components/alert/alert.scss b/packages/core/src/components/alert/alert.scss
@@ -18,6 +18,10 @@
     padding-right: var(--close-size);
   }
 
+  &.is-closed {
+    display: none;
+  }
+
   @include above(medium) {
     display: flex;
     flex-wrap: wrap;

diff --git a/packages/core/src/components/alert/alert.spec.ts b/packages/core/src/components/alert/alert.spec.ts
@@ -1,4 +1,5 @@
 import { newSpecPage } from '@stencil/core/testing'
+
 import { AtomAlert } from './alert'
 
 const messageTitle = 'Alert title'
@@ -33,7 +34,7 @@ describe('AtomAlert', () => {
     await page.waitForChanges()
 
     expect(page.root).toEqualHtml(`
-      <atom-alert message-title="${messageTitle}" message-text="${messageText}"  role="alert">
+      <atom-alert aria-atomic="true" aria-live="assertive"message-title="${messageTitle}" message-text="${messageText}"  role="alert">
         ${createAlertColor('neutral')}
       </atom-alert>
     `)
@@ -48,7 +49,7 @@ describe('AtomAlert', () => {
     await page.waitForChanges()
 
     expect(page.root).toEqualHtml(`
-      <atom-alert color="info" message-text="Alert text" message-title="Alert title" role="alert">
+      <atom-alert aria-atomic="true" aria-live="assertive"color="info" message-text="Alert text" message-title="Alert title" role="alert">
         ${createAlertColor('info')}
       </atom-alert>
     `)
@@ -63,7 +64,7 @@ describe('AtomAlert', () => {
     await page.waitForChanges()
 
     expect(page.root).toEqualHtml(`
-      <atom-alert color="success" message-text="Alert text" message-title="Alert title" role="alert">
+      <atom-alert aria-atomic="true" aria-live="assertive"color="success" message-text="Alert text" message-title="Alert title" role="alert">
         ${createAlertColor('success')}
       </atom-alert>
     `)
@@ -78,7 +79,7 @@ describe('AtomAlert', () => {
     await page.waitForChanges()
 
     expect(page.root).toEqualHtml(`
-      <atom-alert color="danger" message-text="Alert text" message-title="Alert title" role="alert">
+      <atom-alert aria-atomic="true" aria-live="assertive"color="danger" message-text="Alert text" message-title="Alert title" role="alert">
         ${createAlertColor('danger')}
       </atom-alert>
     `)
@@ -93,7 +94,7 @@ describe('AtomAlert', () => {
     await page.waitForChanges()
 
     expect(page.root).toEqualHtml(`
-      <atom-alert color="warning" message-text="Alert text" message-title="Alert title" role="alert">
+      <atom-alert aria-atomic="true" aria-live="assertive"color="warning" message-text="Alert text" message-title="Alert title" role="alert">
         ${createAlertColor('warning')}
       </atom-alert>
     `)
@@ -108,7 +109,7 @@ describe('AtomAlert', () => {
     await page.waitForChanges()
 
     expect(page.root).toEqualHtml(`
-      <atom-alert icon="alert" message-title="${messageTitle}" message-text="${messageText}" role="alert">
+      <atom-alert aria-atomic="true" aria-live="assertive"icon="alert" message-title="${messageTitle}" message-text="${messageText}" role="alert">
         <mock:shadow-root>
             <div class="atom-alert atom-color--neutral">
               <div class="atom-body">
@@ -137,7 +138,7 @@ describe('AtomAlert', () => {
     await page.waitForChanges()
 
     expect(page.root).toEqualHtml(`
-      <atom-alert close="true" message-title="${messageTitle}" message-text="${messageText}" role="alert">
+      <atom-alert aria-atomic="true" aria-live="assertive"close="true" message-title="${messageTitle}" message-text="${messageText}" role="alert">
           <mock:shadow-root>
             <div class="atom-alert atom-color--neutral has-close">
               <div class="atom-body">
@@ -159,6 +160,29 @@ describe('AtomAlert', () => {
     `)
   })
 
+  it('should not render alert when click close button', async () => {
+    const page = await newSpecPage({
+      components: [AtomAlert],
+      html: `<atom-alert message-title="${messageTitle}" message-text="${messageText}" close="true"></atom-alert>`,
+    })
+
+    await page.waitForChanges()
+
+    const alertCloseEl = page.root?.shadowRoot?.querySelector(
+      '.atom-close'
+    ) as HTMLElement
+
+    alertCloseEl.click()
+
+    await page.waitForChanges()
+
+    expect(page.root).toEqualHtml(`
+      <atom-alert aria-atomic="true" aria-hidden="true" aria-live="assertive"     class="is-close" close="true" message-text="Alert text" message-title="Alert title" role="alert">
+        <mock:shadow-root></mock:shadow-root>
+      </atom-alert>
+    `)
+  })
+
   it('should add actions "action-text" prop is set', async () => {
     const page = await newSpecPage({
       components: [AtomAlert],
@@ -168,7 +192,7 @@ describe('AtomAlert', () => {
     await page.waitForChanges()
 
     expect(page.root).toEqualHtml(`
-      <atom-alert action-text="Action example" message-title="${messageTitle}" message-text="${messageText}" role="alert">
+      <atom-alert aria-atomic="true" aria-live="assertive"action-text="Action example" message-title="${messageTitle}" message-text="${messageText}" role="alert">
         <mock:shadow-root>
           <div class="atom-alert atom-color--neutral">
             <div class="atom-body">

diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx
@@ -1,4 +1,12 @@
-import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core'
+import {
+  Component,
+  Event,
+  EventEmitter,
+  Host,
+  Prop,
+  State,
+  h,
+} from '@stencil/core'
 
 import { IconProps } from '../../icons'
 
@@ -21,57 +29,70 @@ export class AtomAlert {
 
   private handleClose = () => {
     this.atomClose.emit()
+    this.isAlertOpen = false
   }
 
   private handleAction = () => {
     this.atomAction.emit()
   }
 
+  @State() isAlertOpen = true
+
   render() {
     return (
-      <Host role='alert'>
-        <div
-          class={{
-            [`atom-alert`]: true,
-            [`atom-color--${this.color}`]: true,
-            [`has-close`]: this.close,
-          }}
-        >
-          <div class='atom-body'>
-            {this.icon && (
-              <atom-icon class='atom-icon' icon={this.icon}></atom-icon>
-            )}
-            <div class='atom-content'>
-              {this.messageTitle && (
-                <div class='atom-title' innerHTML={this.messageTitle}></div>
-              )}
-              {this.messageText && (
-                <div class='atom-message' innerHTML={this.messageText}></div>
+      <Host
+        role='alert'
+        aria-live='assertive'
+        aria-atomic='true'
+        aria-hidden={!this.isAlertOpen && 'true'}
+        class={{
+          'is-close': !this.isAlertOpen,
+        }}
+      >
+        {this.isAlertOpen && (
+          <div
+            class={{
+              [`atom-alert`]: true,
+              [`atom-color--${this.color}`]: true,
+              [`has-close`]: this.close,
+            }}
+          >
+            <div class='atom-body'>
+              {this.icon && (
+                <atom-icon class='atom-icon' icon={this.icon}></atom-icon>
               )}
+              <div class='atom-content'>
+                {this.messageTitle && (
+                  <div class='atom-title' innerHTML={this.messageTitle}></div>
+                )}
+                {this.messageText && (
+                  <div class='atom-message' innerHTML={this.messageText}></div>
+                )}
+              </div>
             </div>
-          </div>
-          {this.actionText && (
-            <div class='atom-actions'>
+            {this.actionText && (
+              <div class='atom-actions'>
+                <button
+                  class='atom-actions__button'
+                  type='button'
+                  onClick={this.handleAction}
+                >
+                  {this.actionText}
+                </button>
+              </div>
+            )}
+            {this.close && (
               <button
-                class='atom-actions__button'
+                class='atom-close'
+                aria-label='Close'
+                onClick={this.handleClose}
                 type='button'
-                onClick={this.handleAction}
               >
-                {this.actionText}
+                <atom-icon icon='close'></atom-icon>
               </button>
-            </div>
-          )}
-          {this.close && (
-            <button
-              class='atom-close'
-              aria-label='Close'
-              onClick={this.handleClose}
-              type='button'
-            >
-              <atom-icon icon='close'></atom-icon>
-            </button>
-          )}
-        </div>
+            )}
+          </div>
+        )}
       </Host>
     )
   }

diff --git a/packages/core/src/components/alert/stories/alert.core.stories.tsx b/packages/core/src/components/alert/stories/alert.core.stories.tsx
@@ -65,3 +65,11 @@ export const Danger: StoryObj = {
     icon: 'account-multiple',
   },
 }
+
+export const Close: StoryObj = {
+  render: (args) => createAlert(args),
+  args: {
+    ...AlertComponentArgs,
+    close: true,
+  },
+}
diff --git a/packages/core/src/components/alert/stories/alert.react.stories.tsx b/packages/core/src/components/alert/stories/alert.react.stories.tsx
@@ -65,3 +65,11 @@ export const Danger: StoryObj = {
     icon: 'account-multiple',
   },
 }
+
+export const Close: StoryObj = {
+  render: (args) => createAlert(args),
+  args: {
+    ...AlertComponentArgs,
+    close: true,
+  },
+}
diff --git a/packages/core/src/components/alert/stories/alert.vue.stories.tsx b/packages/core/src/components/alert/stories/alert.vue.stories.tsx
@@ -16,18 +16,27 @@ const createAlert = (args) => ({
   },
   template: `
     <AtomAlert
-      messageTitle="${args.messageTitle}"
-      messageText="${args.messageText}"
+      message-title="${args.messageTitle}"
+      message-text="${args.messageText}"
       color="${args.color}"
+      close="${args.close}"
       icon="${args.icon}"
+      action-text="${args.actionText}"
+      @atom-action="handleAction"
     />
     `,
+  methods: {
+    handleAction() {
+      console.log('Action clicked')
+    },
+  },
 })
 
 export const Default: StoryObj = {
   render: (args) => createAlert(args),
   args: {
     ...AlertComponentArgs,
+    icon: '',
   },
 }
 
@@ -66,3 +75,12 @@ export const Danger: StoryObj = {
     icon: 'account-multiple',
   },
 }
+
+export const Close: StoryObj = {
+  render: (args) => createAlert(args),
+  args: {
+    ...AlertComponentArgs,
+    close: true,
+    icon: '',
+  },
+}