-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Alert): add new
bq-alert component (#675)
- Loading branch information
Showing
11 changed files
with
923 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
135 changes: 135 additions & 0 deletions
135
packages/beeq/src/components/alert/__tests__/bq-alert.e2e.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| import { newE2EPage } from '@stencil/core/testing'; | ||
|
|
||
| describe('bq-alert', () => { | ||
| it('should render', async () => { | ||
| const page = await newE2EPage({ | ||
| html: `<bq-alert></bq-alert>`, | ||
| }); | ||
|
|
||
| const element = await page.find('bq-alert'); | ||
| expect(element).toHaveClass('hydrated'); | ||
| }); | ||
|
|
||
| it('should have shadow root', async () => { | ||
| const page = await newE2EPage({ | ||
| html: `<bq-alert></bq-alert>`, | ||
| }); | ||
|
|
||
| const element = await page.find('bq-alert'); | ||
| expect(element.shadowRoot).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should render as hidden', async () => { | ||
| const page = await newE2EPage({ | ||
| html: `<bq-alert></bq-alert>`, | ||
| }); | ||
|
|
||
| const element = await page.find('bq-alert'); | ||
| expect(element).toEqualAttribute('aria-hidden', 'true'); | ||
| expect(element).toHaveClass('is-hidden'); | ||
| }); | ||
|
|
||
| it('should render as hidden with `open="false"`', async () => { | ||
| const page = await newE2EPage({ | ||
| html: `<bq-alert open="false"></bq-alert>`, | ||
| }); | ||
|
|
||
| const element = await page.find('bq-alert'); | ||
| expect(element).toEqualAttribute('aria-hidden', 'true'); | ||
| expect(element).toHaveClass('is-hidden'); | ||
| }); | ||
|
|
||
| it('should render as open', async () => { | ||
| const page = await newE2EPage({ | ||
| html: `<bq-alert open></bq-alert>`, | ||
| }); | ||
|
|
||
| const element = await page.find('bq-alert'); | ||
| expect(element).not.toEqualAttribute('aria-hidden', 'true'); | ||
| expect(element).not.toHaveClass('is-hidden'); | ||
| }); | ||
|
|
||
| it('should render as open with `open="true"`', async () => { | ||
| const page = await newE2EPage({ | ||
| html: `<bq-alert open="true"></bq-alert>`, | ||
| }); | ||
|
|
||
| const element = await page.find('bq-alert'); | ||
| expect(element).not.toEqualAttribute('aria-hidden', 'true'); | ||
| expect(element).not.toHaveClass('is-hidden'); | ||
| }); | ||
|
|
||
| it('should render basic alert', async () => { | ||
| const page = await newE2EPage({ | ||
| html: ` | ||
| <bq-alert> | ||
| Alert title | ||
| <span slot="body">You have a new alert message</span> | ||
| </bq-alert> | ||
| `, | ||
| }); | ||
|
|
||
| const description = await page.find('bq-alert >>> slot[name="body"]'); | ||
| expect(description).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should show alert with icon', async () => { | ||
| const page = await newE2EPage({ | ||
| html: `<bq-alert type="info">Alert title</bq-alert>`, | ||
| }); | ||
|
|
||
| const iconHolder = await page.find('bq-alert >>> [part="icon-outline"]'); | ||
| expect(iconHolder).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should show alert with close button', async () => { | ||
| const page = await newE2EPage({ | ||
| html: `<bq-alert type="info">Alert title</bq-alert>`, | ||
| }); | ||
|
|
||
| const iconHolder = await page.find('bq-alert >>> [part="btn-close"]'); | ||
| expect(iconHolder).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should show alert footer', async () => { | ||
| const page = await newE2EPage({ | ||
| html: ` | ||
| <bq-alert> | ||
| Alert title | ||
| <div slot="footer"> | ||
| <bq-button appearance="primary" type="button" variant="standard">Button</bq-button> | ||
| <bq-button appearance="secondary" variant="standard">Button</bq-button> | ||
| </div> | ||
| </bq-alert> | ||
| `, | ||
| }); | ||
|
|
||
| const footerSlot = await page.find('bq-alert >>> slot[name="footer"]'); | ||
| expect(footerSlot).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should call methods', async () => { | ||
| const page = await newE2EPage({ | ||
| html: ` | ||
| <bq-alert> | ||
| Alert title | ||
| <span slot="body">You have a new alert message</span> | ||
| </bq-alert> | ||
| `, | ||
| }); | ||
|
|
||
| const element = await page.find('bq-alert'); | ||
|
|
||
| await element.callMethod('show'); | ||
| await page.waitForChanges(); | ||
|
|
||
| expect(element).toEqualAttribute('aria-hidden', 'false'); | ||
| expect(element).toEqualAttribute('hidden', 'false'); | ||
|
|
||
| await element.callMethod('hide'); | ||
| await page.waitForChanges(); | ||
|
|
||
| expect(element).toEqualAttribute('aria-hidden', 'true'); | ||
| expect(element).toEqualAttribute('hidden', 'true'); | ||
| }); | ||
| }); |
29 changes: 29 additions & 0 deletions
29
packages/beeq/src/components/alert/_storybook/bq-alert.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; | ||
|
|
||
| <div className="bq-doc__wrapper" data-theme="light"> | ||
| <div className="bq-doc__container"> | ||
| <Title>Alert</Title> | ||
|
|
||
| The Alert is a user interface component used to convey important information to the user in a clear and concise manner. | ||
| It can be used to notify users of success, failure, warning, or any other type of information that needs to be brought to their attention. | ||
|
|
||
| <Subtitle>Usage</Subtitle> | ||
|
|
||
| - Use alerts to inform users about important events or actions such as successful login, account creation, and password reset. | ||
| - Use alerts to inform users about errors or warnings such as incorrect login credentials, network errors, or session timeouts. | ||
| - Use alerts to provide users with feedback about their actions such as a successful submission of a form or a message that a file has been uploaded successfully. | ||
| - Use alerts to inform users about system status such as maintenance downtime or system upgrades. | ||
|
|
||
| <Subtitle>👍 When to use</Subtitle> | ||
|
|
||
| - When to communicate critical updates such as important software patches, system maintenance, or urgent changes affecting the user experience. | ||
| - When to to provide real-time feedback on authentication status, including successful logins, failed login attempts, or session expirations. | ||
| - When to enhance user experience by utilizing the Alert component to confirm successful data submissions or to notify users about any errors encountered during the submission process. | ||
| - When to keep users informed about any changes in their permissions or access levels by leveraging the Alert component to deliver relevant and timely notifications. | ||
| - When to improve user engagement and timely actions by using the Alert component to remind users of upcoming events, deadlines, or other time-sensitive tasks. | ||
|
|
||
| <Title>Properties</Title> | ||
|
|
||
| <ArgTypes of="bq-alert" /> | ||
| </div> | ||
| </div> |
Oops, something went wrong.