-
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(toast): add new
<bq-toast> component (#301)
- Loading branch information
1 parent
3bf70c8
commit 5c22cc7
Showing
12 changed files
with
786 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
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
100 changes: 100 additions & 0 deletions
100
packages/bee-q/src/components/toast/__tests__/bq-toast.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,100 @@ | ||
| import { newE2EPage } from '@stencil/core/testing'; | ||
|
|
||
| import { computedStyle } from '../../../shared/test-utils/computedStyle'; | ||
|
|
||
| describe('bq-toast', () => { | ||
| it('should render', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent('<bq-toast></bq-toast>'); | ||
|
|
||
| const element = await page.find('bq-toast'); | ||
|
|
||
| expect(element).toHaveClass('hydrated'); | ||
| }); | ||
|
|
||
| it('should have shadow root', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent('<bq-toast></bq-toast>'); | ||
|
|
||
| const element = await page.find('bq-toast'); | ||
|
|
||
| expect(element.shadowRoot).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should display text', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent('<bq-toast>Text</bq-toast>'); | ||
|
|
||
| const element = await page.find('bq-toast'); | ||
|
|
||
| expect(element).toEqualText('Text'); | ||
| }); | ||
|
|
||
| it('should display info icon by default', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent('<bq-toast>Text</bq-toast>'); | ||
|
|
||
| const iconWrapper = await page.find('bq-toast >>> bq-icon'); | ||
|
|
||
| expect(iconWrapper).toEqualAttribute('name', 'info'); | ||
| }); | ||
|
|
||
| it('should display success icon', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent('<bq-toast type="success">Text</bq-toast>'); | ||
|
|
||
| const iconWrapper = await page.find('bq-toast >>> bq-icon'); | ||
|
|
||
| expect(iconWrapper).toEqualAttribute('name', 'check-circle'); | ||
| }); | ||
|
|
||
| it('should display custom icon', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent(` | ||
| <bq-toast> | ||
| Text | ||
| <bq-icon slot="icon" size="24" weight="bold" name="star"></bq-icon> | ||
| </bq-toast> | ||
| `); | ||
|
|
||
| const iconWrapperName = await page.$eval('bq-toast', (element) => { | ||
| const slotElement = element.shadowRoot.querySelector<HTMLSlotElement>('slot[name="icon"]'); | ||
|
|
||
| const assignedElements = slotElement.assignedElements({ flatten: true })[0]; | ||
|
|
||
| return assignedElements.getAttribute('name'); | ||
| }); | ||
|
|
||
| expect(iconWrapperName).toEqualText('star'); | ||
| }); | ||
|
|
||
| it('should respect design style', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent(`<bq-toast>Text</bq-toast>`); | ||
|
|
||
| const styleProps = ['padding', 'borderRadius', 'gap'] as const; | ||
|
|
||
| const style = await computedStyle(page, 'bq-toast >>> [part="wrapper"]', styleProps); | ||
|
|
||
| expect(style).toEqual({ padding: '12px 16px', borderRadius: '8px', gap: '8px' }); | ||
| }); | ||
|
|
||
| it('should call methods', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent('<bq-toast>Test</bq-toast>'); | ||
|
|
||
| const element = await page.find('bq-toast'); | ||
|
|
||
| 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'); | ||
| }); | ||
| }); |
19 changes: 19 additions & 0 deletions
19
packages/bee-q/src/components/toast/_storybook/bq-toast.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,19 @@ | ||
| import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; | ||
|
|
||
| <Title>Toast</Title> | ||
|
|
||
| The Toast Component is a UI element used to provide short, non-interruptive notifications to users. | ||
|
|
||
| <Subtitle>Usage</Subtitle> | ||
|
|
||
| Toasts are typically displayed briefly at the bottom of the screen and disappear after a short amount of time. Toasts are commonly used to provide confirmation messages, error messages, or progress updates. | ||
|
|
||
| <Subtitle>👍 When to use</Subtitle> | ||
|
|
||
| - Providing confirmation messages for actions, such as confirming the successful submission of a form or successful completion of a task. | ||
| - Displaying error messages for issues or problems, such as indicating a required field is missing or a network error has occurred. | ||
| - Presenting progress updates for long-running actions, such as indicating the status of a download or the progress of a task | ||
|
|
||
| <Title>Properties</Title> | ||
|
|
||
| <ArgTypes of="bq-toast" /> |
Oops, something went wrong.