-
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(Tag): add new
bq-tag component (#695)
Co-authored-by: Dabiel González Ramos <[email protected]>
- Loading branch information
1 parent
3b298b9
commit bc67079
Showing
12 changed files
with
1,058 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
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
116 changes: 116 additions & 0 deletions
116
packages/beeq/src/components/tag/__tests__/bq-tag.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,116 @@ | ||
| import { newE2EPage } from '@stencil/core/testing'; | ||
|
|
||
| import { computedStyle } from '../../../shared/test-utils'; | ||
|
|
||
| describe('bq-tag', () => { | ||
| it('should render', async () => { | ||
| const page = await newE2EPage({ | ||
| html: '<bq-tag></bq-tag>', | ||
| }); | ||
| const element = await page.find('bq-tag'); | ||
|
|
||
| expect(element).toHaveClass('hydrated'); | ||
| }); | ||
|
|
||
| it('should have shadow root', async () => { | ||
| const page = await newE2EPage({ | ||
| html: '<bq-tag></bq-tag>', | ||
| }); | ||
| const element = await page.find('bq-tag'); | ||
|
|
||
| expect(element.shadowRoot).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should render as hidden', async () => { | ||
| const page = await newE2EPage({ | ||
| html: `<bq-tag removable hidden></bq-tag>`, | ||
| }); | ||
|
|
||
| const element = await page.find('bq-tag'); | ||
| expect(element).toEqualAttribute('aria-hidden', 'true'); | ||
| }); | ||
|
|
||
| it('should render as hidden with `hidden="true"`', async () => { | ||
| const page = await newE2EPage({ | ||
| html: `<bq-tag removable hidden="true"></bq-tag>`, | ||
| }); | ||
|
|
||
| const element = await page.find('bq-tag'); | ||
| expect(element).toEqualAttribute('aria-hidden', 'true'); | ||
| }); | ||
|
|
||
| it('should render as open', async () => { | ||
| const page = await newE2EPage({ | ||
| html: `<bq-tag></bq-tag>`, | ||
| }); | ||
|
|
||
| const element = await page.find('bq-tag'); | ||
| expect(element).toEqualAttribute('aria-hidden', 'false'); | ||
| expect(element).not.toHaveClass('is-hidden'); | ||
| }); | ||
|
|
||
| it('should render as open with `hidden="false"`', async () => { | ||
| const page = await newE2EPage({ | ||
| html: `<bq-tag hidden="false"></bq-tag>`, | ||
| }); | ||
|
|
||
| const element = await page.find('bq-tag'); | ||
| expect(element).toEqualAttribute('aria-hidden', 'false'); | ||
| expect(element).not.toHaveClass('is-hidden'); | ||
| }); | ||
|
|
||
| it('should render a removable tag component', async () => { | ||
| const page = await newE2EPage({ | ||
| html: `<bq-tag removable>Tag</bq-tag>`, | ||
| }); | ||
|
|
||
| const element = await page.find('bq-tag >>> bq-icon[name="x-circle"]'); | ||
| expect(element).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should render a basic tag without icon', async () => { | ||
| const page = await newE2EPage({ | ||
| html: `<bq-tag>Tag</bq-tag>`, | ||
| }); | ||
|
|
||
| const element = await page.find('bq-tag >>> slot'); | ||
|
|
||
| expect(element).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should render a tag with a prefix (icon)', async () => { | ||
| const page = await newE2EPage({ | ||
| html: ` | ||
| <bq-tag> | ||
| <span slot="prefix"> | ||
| <bq-icon name="star"></bq-icon> | ||
| </span> | ||
| Tag | ||
| </bq-tag> | ||
| `, | ||
| }); | ||
|
|
||
| const prefixSlot = await page.find('bq-tag >>> slot[name="prefix"]'); | ||
| expect(prefixSlot).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should respect design style', async () => { | ||
| const page = await newE2EPage({ | ||
| html: ` | ||
| <bq-tag size="xsmall">Tag</tag> | ||
| <bq-tag size="small">Tag</tag> | ||
| <bq-tag size="medium">Tag</tag> | ||
| `, | ||
| }); | ||
|
|
||
| const styleProps = ['padding'] as const; | ||
|
|
||
| const extra_smallStyle = await computedStyle(page, 'bq-tag[size="xsmall"] >>> [part="wrapper"]', styleProps); | ||
| const smallStyle = await computedStyle(page, 'bq-tag[size="small"] >>> [part="wrapper"]', styleProps); | ||
| const mediumStyle = await computedStyle(page, 'bq-tag[size="medium"] >>> [part="wrapper"]', styleProps); | ||
|
|
||
| expect(extra_smallStyle).toEqual({ padding: '2px 8px' }); | ||
| expect(smallStyle).toEqual({ padding: '2px 8px' }); | ||
| expect(mediumStyle).toEqual({ padding: '4px 12px' }); | ||
| }); | ||
| }); |
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,27 @@ | ||
| import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; | ||
|
|
||
| <div className="bq-doc__wrapper" data-theme="light"> | ||
| <div className="bq-doc__container"> | ||
| <Title>Tag</Title> | ||
|
|
||
| The Tag Component is a UI element used to label and categorize content within an application. | ||
| Tags are commonly used to label items with keywords or categories, making it easier to find and organize content. | ||
|
|
||
| <Subtitle>Usage</Subtitle> | ||
|
|
||
| - Use tags for labeling and categorizing items or content, such as tagging articles with keywords or categorizing items in a shopping cart. | ||
| - Use tags for representing metadata about an item or content, such as the author, date, or source of an article. | ||
| - Use tags for filtering and organizing content based on tags, such as allowing users to filter articles based on keywords or categories. | ||
| - Use clear and concise labels for tags, avoiding complex sentences and technical jargon. | ||
|
|
||
| <Subtitle>👍 When to use</Subtitle> | ||
|
|
||
| - When using tags, ensure that you position them in a location that is easily visible and accessible, without obstructing important content or interactions. | ||
| - When using tags, ensure the use of visually distinct styles and colors to differentiate between different types of tags, allowing users to easily recognize the meaning of each tag. | ||
| - Ensure that tags are easy to interact with, allowing users to click on a tag to view related content or to remove a tag if desired. | ||
|
|
||
| <Title>Properties</Title> | ||
|
|
||
| <ArgTypes of="bq-tag" /> | ||
| </div> | ||
| </div> |
Oops, something went wrong.