-
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(dialog): add new
<bq-dialog> component (#269)
- Loading branch information
1 parent
e58e738
commit fb53b87
Showing
14 changed files
with
782 additions
and
12 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
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
41 changes: 41 additions & 0 deletions
41
packages/bee-q/src/components/dialog/__tests__/bq-dialog.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,41 @@ | ||
| import { newE2EPage } from '@stencil/core/testing'; | ||
|
|
||
| describe('bq-dialog', () => { | ||
| it('should render', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent('<bq-dialog></bq-dialog>'); | ||
|
|
||
| const element = await page.find('bq-dialog'); | ||
|
|
||
| expect(element).toHaveClass('hydrated'); | ||
| }); | ||
|
|
||
| it('should have shadow root', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent('<bq-dialog></bq-dialog>'); | ||
|
|
||
| const element = await page.find('bq-dialog'); | ||
|
|
||
| expect(element.shadowRoot).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should display title', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent('<bq-dialog><h3 slot="title">Dialog Title</h3></bq-dialog>'); | ||
|
|
||
| const element = await page.find('bq-dialog'); | ||
|
|
||
| expect(element).toEqualText('Dialog Title'); | ||
| }); | ||
|
|
||
| it('should display content', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent( | ||
| '<bq-dialog><p slot="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></bq-dialog>', | ||
| ); | ||
|
|
||
| const element = await page.find('bq-dialog'); | ||
|
|
||
| expect(element).toEqualText('Lorem Ipsum is simply dummy text of the printing and typesetting industry.'); | ||
| }); | ||
| }); |
24 changes: 24 additions & 0 deletions
24
packages/bee-q/src/components/dialog/_storybook/bq-dialog.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,24 @@ | ||
| import { ArgTypes, Stories, Title, Subtitle } from '@storybook/addon-docs'; | ||
|
|
||
| <Title>Dialog</Title> | ||
|
|
||
| Description A Dialog is a UI component used to display additional content or prompt a user for action. | ||
| It provides a way to display additional information, options, or controls in a separate, non-obstructive interface element. | ||
|
|
||
| <Subtitle>Usage</Subtitle> | ||
|
|
||
| To ensure a seamless user experience and maximize the effectiveness of the Dialog Modal component, it is recommended to follow these best practices: | ||
|
|
||
| - Keep it simple: Avoid overwhelming the user with excessive content within the Dialog Modal. Strive for simplicity and present only the essential information or options necessary to complete the intended action or convey the message. | ||
| - Use a clear and concise title: Provide a descriptive title that clearly communicates the purpose or content of the Dialog Modal. This helps users quickly understand the context and relevance of the dialog. | ||
| - Prioritize actions: If there are multiple actions within the Dialog Modal, make sure to present them in an order that helps users easily identify and choose the appropriate action. Consider using clear call-to-action buttons with descriptive labels to guide the user. | ||
|
|
||
| <Subtitle>👍 When to use</Subtitle> | ||
|
|
||
| - Displaying additional information, options, or controls that are relevant to a specific task or action. | ||
| - Prompting a user for confirmation or input, such as when performing a potentially destructive action or making changes to a critical setting. | ||
| - Providing a way for users to access related content or features without navigating away from the current interface. | ||
|
|
||
| <Title>Properties</Title> | ||
|
|
||
| <ArgTypes of="bq-dialog" /> |
Oops, something went wrong.