From 7335401d6c8eb72c35506364103685a88e41e1c5 Mon Sep 17 00:00:00 2001 From: WillianLomeu <willianlomeu.contato@gmail.com> Date: Thu, 28 Nov 2024 11:09:50 -0300 Subject: [PATCH 01/11] feat(breadcrumb): new component structure --- blip-ds-react/src/components.ts | 1 + src/components.d.ts | 17 +++ src/components/breadcrumb/breadcrumb.scss | 33 ++++++ src/components/breadcrumb/breadcrumb.tsx | 122 ++++++++++++++++++++++ src/components/breadcrumb/readme.md | 42 ++++++++ src/components/dropdown/readme.md | 13 +++ src/components/grid/readme.md | 6 +- src/components/icon/readme.md | 2 + src/components/typo/readme.md | 2 + src/index.html | 71 ++----------- 10 files changed, 246 insertions(+), 63 deletions(-) create mode 100644 src/components/breadcrumb/breadcrumb.scss create mode 100644 src/components/breadcrumb/breadcrumb.tsx create mode 100644 src/components/breadcrumb/readme.md diff --git a/blip-ds-react/src/components.ts b/blip-ds-react/src/components.ts index d7eb79ec6..72a38b0f4 100644 --- a/blip-ds-react/src/components.ts +++ b/blip-ds-react/src/components.ts @@ -21,6 +21,7 @@ export const BdsAvatarGroup = /*@__PURE__*/createReactComponent<JSX.BdsAvatarGro export const BdsBadge = /*@__PURE__*/createReactComponent<JSX.BdsBadge, HTMLBdsBadgeElement>('bds-badge'); export const BdsBanner = /*@__PURE__*/createReactComponent<JSX.BdsBanner, HTMLBdsBannerElement>('bds-banner'); export const BdsBannerLink = /*@__PURE__*/createReactComponent<JSX.BdsBannerLink, HTMLBdsBannerLinkElement>('bds-banner-link'); +export const BdsBreadcrumb = /*@__PURE__*/createReactComponent<JSX.BdsBreadcrumb, HTMLBdsBreadcrumbElement>('bds-breadcrumb'); export const BdsButton = /*@__PURE__*/createReactComponent<JSX.BdsButton, HTMLBdsButtonElement>('bds-button'); export const BdsButtonGroup = /*@__PURE__*/createReactComponent<JSX.BdsButtonGroup, HTMLBdsButtonGroupElement>('bds-button-group'); export const BdsButtonIcon = /*@__PURE__*/createReactComponent<JSX.BdsButtonIcon, HTMLBdsButtonIconElement>('bds-button-icon'); diff --git a/src/components.d.ts b/src/components.d.ts index 16fc0edd9..c8c39a696 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -341,6 +341,10 @@ export namespace Components { */ "target": targets; } + interface BdsBreadcrumb { + "items": string | Array<{ label: string; href?: string }>; + "maxVisible": number; + } interface BdsButton { /** * The arrow button @@ -3047,6 +3051,12 @@ declare global { prototype: HTMLBdsBannerLinkElement; new (): HTMLBdsBannerLinkElement; }; + interface HTMLBdsBreadcrumbElement extends Components.BdsBreadcrumb, HTMLStencilElement { + } + var HTMLBdsBreadcrumbElement: { + prototype: HTMLBdsBreadcrumbElement; + new (): HTMLBdsBreadcrumbElement; + }; interface HTMLBdsButtonElement extends Components.BdsButton, HTMLStencilElement { } var HTMLBdsButtonElement: { @@ -3596,6 +3606,7 @@ declare global { "bds-badge": HTMLBdsBadgeElement; "bds-banner": HTMLBdsBannerElement; "bds-banner-link": HTMLBdsBannerLinkElement; + "bds-breadcrumb": HTMLBdsBreadcrumbElement; "bds-button": HTMLBdsButtonElement; "bds-button-group": HTMLBdsButtonGroupElement; "bds-button-icon": HTMLBdsButtonIconElement; @@ -3985,6 +3996,10 @@ declare namespace LocalJSX { */ "target"?: targets; } + interface BdsBreadcrumb { + "items"?: string | Array<{ label: string; href?: string }>; + "maxVisible"?: number; + } interface BdsButton { /** * The arrow button @@ -6615,6 +6630,7 @@ declare namespace LocalJSX { "bds-badge": BdsBadge; "bds-banner": BdsBanner; "bds-banner-link": BdsBannerLink; + "bds-breadcrumb": BdsBreadcrumb; "bds-button": BdsButton; "bds-button-group": BdsButtonGroup; "bds-button-icon": BdsButtonIcon; @@ -6724,6 +6740,7 @@ declare module "@stencil/core" { "bds-badge": LocalJSX.BdsBadge & JSXBase.HTMLAttributes<HTMLBdsBadgeElement>; "bds-banner": LocalJSX.BdsBanner & JSXBase.HTMLAttributes<HTMLBdsBannerElement>; "bds-banner-link": LocalJSX.BdsBannerLink & JSXBase.HTMLAttributes<HTMLBdsBannerLinkElement>; + "bds-breadcrumb": LocalJSX.BdsBreadcrumb & JSXBase.HTMLAttributes<HTMLBdsBreadcrumbElement>; "bds-button": LocalJSX.BdsButton & JSXBase.HTMLAttributes<HTMLBdsButtonElement>; "bds-button-group": LocalJSX.BdsButtonGroup & JSXBase.HTMLAttributes<HTMLBdsButtonGroupElement>; "bds-button-icon": LocalJSX.BdsButtonIcon & JSXBase.HTMLAttributes<HTMLBdsButtonIconElement>; diff --git a/src/components/breadcrumb/breadcrumb.scss b/src/components/breadcrumb/breadcrumb.scss new file mode 100644 index 000000000..c6844cf8e --- /dev/null +++ b/src/components/breadcrumb/breadcrumb.scss @@ -0,0 +1,33 @@ +:host { + display: block; + + * { + color: $color-content-default; + } +} + +.breadcrumb__button { + &--0 { + margin-left: 0; + .button--icon { + display: none; + } + } + &--1 { + margin-left: 30px; + padding-left: 8px; + .button--icon { + transform: rotate(180deg); + } + } + &--2 { + margin-left: 60px; + .button--icon { + transform: rotate(180deg); + } + } +} + +.breadcrumb__link { + text-decoration: none; +} \ No newline at end of file diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx new file mode 100644 index 000000000..b9eec6107 --- /dev/null +++ b/src/components/breadcrumb/breadcrumb.tsx @@ -0,0 +1,122 @@ +import { Component, h, Prop, State, Watch } from '@stencil/core'; + +@Component({ + tag: 'bds-breadcrumb', + styleUrl: 'breadcrumb.scss', + shadow: true, +}) +export class Breadcrumb { + @Prop() items: string | Array<{ label: string; href?: string }> = []; + + @State() parsedItems: Array<{ label: string; href?: string }> = []; + + @Watch('items') + parseItems(newValue: string | Array<{ label: string; href?: string }>) { + if (typeof newValue === 'string') { + try { + this.parsedItems = JSON.parse(newValue); + } catch (error) { + console.error('Falha ao analisar items: Certifique-se de que é um JSON válido.', error); + this.parsedItems = []; + } + } else { + this.parsedItems = newValue; + } + } + + componentWillLoad() { + this.parseItems(this.items); + } + + @Prop() maxVisible: number = 3; + + @State() isDropdownOpen: boolean = false; + + toggleDropdown() { + this.isDropdownOpen = !this.isDropdownOpen; + } + + render() { + console.log('Itens processados:', this.parsedItems); + + if (!this.parsedItems || this.parsedItems.length === 0) { + return <p>Sem itens para exibir no Breadcrumb.</p>; + } + + const visibleItems = + this.parsedItems.length <= this.maxVisible + ? this.parsedItems + : [ + this.parsedItems[0], + { label: '...', href: null }, + this.parsedItems[this.parsedItems.length - 1], + ]; + + return ( + <nav aria-label="breadcrumb"> + <bds-grid direction="row" align-items="center"> + {visibleItems.map((item, index) => ( + <bds-grid + class={{ + breadcrumb__item: true, + 'breadcrumb__item--active': index === visibleItems.length - 1, + }} + aria-current={index === visibleItems.length - 1 ? 'page' : null} + > + {item.label === '...' ? ( + <bds-dropdown active-mode="click" position="auto"> + <div slot="dropdown-content"> + <bds-grid direction='column' padding='1' gap="half"> + {this.parsedItems.slice(1, -1).map((subItem, index) => ( + <bds-grid> + {subItem.href ? ( + <a href={subItem.href} class={`breadcrumb__button--${index} breadcrumb__link`}> + <bds-grid align-items='center'> + <bds-icon name="reply" theme='outline' class="button--icon"></bds-icon> + <bds-button variant="text" color='content'> + {subItem.label} + </bds-button> + </bds-grid> + + </a> + ) : ( + <span>{subItem.label}</span> + )} + </bds-grid> + ))} + </bds-grid> + </div> + <bds-grid slot="dropdown-activator"> + <bds-button + variant="text" + color="content" + size="short" + onClick={() => this.toggleDropdown()} + icon-left="more-options-horizontal" + ></bds-button> + </bds-grid> + </bds-dropdown> + ) : item.href ? ( + <bds-grid direction="row"> + <bds-typo variant="fs-12" margin={false}> + <a href={item.href} class="breadcrumb__link"> + {item.label} + </a> + </bds-typo> + <bds-icon name="arrow-right" size="x-small"></bds-icon> + </bds-grid> + ) : ( + <bds-grid direction="row"> + <bds-icon name="arrow-right" size="x-small"></bds-icon> + <bds-typo variant="fs-12" bold="bold" margin={false}> + {item.label} + </bds-typo> + </bds-grid> + )} + </bds-grid> + ))} + </bds-grid> + </nav> + ); + } +} diff --git a/src/components/breadcrumb/readme.md b/src/components/breadcrumb/readme.md new file mode 100644 index 000000000..e2b302c23 --- /dev/null +++ b/src/components/breadcrumb/readme.md @@ -0,0 +1,42 @@ +# bds-breadcrumb + + + +<!-- Auto Generated Below --> + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ------------ | ------------- | ----------- | ----------------------------------------------- | ------- | +| `items` | `items` | | `string \| { label: string; href?: string; }[]` | `[]` | +| `maxVisible` | `max-visible` | | `number` | `3` | + + +## Dependencies + +### Depends on + +- [bds-grid](../grid) +- [bds-dropdown](../dropdown) +- [bds-icon](../icon) +- [bds-button](../button) +- [bds-typo](../typo) + +### Graph +```mermaid +graph TD; + bds-breadcrumb --> bds-grid + bds-breadcrumb --> bds-dropdown + bds-breadcrumb --> bds-icon + bds-breadcrumb --> bds-button + bds-breadcrumb --> bds-typo + bds-button --> bds-loading-spinner + bds-button --> bds-icon + bds-button --> bds-typo + style bds-breadcrumb fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/dropdown/readme.md b/src/components/dropdown/readme.md index f4c4e5bf9..11a26ee3d 100644 --- a/src/components/dropdown/readme.md +++ b/src/components/dropdown/readme.md @@ -55,6 +55,19 @@ Type: `Promise<void>` +## Dependencies + +### Used by + + - [bds-breadcrumb](../breadcrumb) + +### Graph +```mermaid +graph TD; + bds-breadcrumb --> bds-dropdown + style bds-dropdown fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/grid/readme.md b/src/components/grid/readme.md index 012202618..7391a981a 100644 --- a/src/components/grid/readme.md +++ b/src/components/grid/readme.md @@ -20,10 +20,10 @@ | `justifyContent` | `justify-content` | | `"center" \| "flex-end" \| "flex-start" \| "space-around" \| "space-between" \| "space-evenly" \| "stretch"` | `undefined` | | `lg` | `lg` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | | `lgOffset` | `lg-offset` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | -| `margin` | `margin` | | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "none" \| "half" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` | +| `margin` | `margin` | | `"none" \| "half" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` | | `md` | `md` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | | `mdOffset` | `md-offset` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | -| `padding` | `padding` | | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "none" \| "half" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "b-12" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` | +| `padding` | `padding` | | `"none" \| "half" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "b-12" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` | | `sm` | `sm` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | | `smOffset` | `sm-offset` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | | `xg` | `xg` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | @@ -38,6 +38,7 @@ ### Used by + - [bds-breadcrumb](../breadcrumb) - [bds-button-group](../button) - [bds-card](../card) - [bds-card-body](../card/card-body) @@ -55,6 +56,7 @@ ### Graph ```mermaid graph TD; + bds-breadcrumb --> bds-grid bds-button-group --> bds-grid bds-card --> bds-grid bds-card-body --> bds-grid diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md index b2be8b00e..17733aaab 100755 --- a/src/components/icon/readme.md +++ b/src/components/icon/readme.md @@ -32,6 +32,7 @@ - [bds-avatar](../avatar) - [bds-badge](../badge) - [bds-banner](../banner) + - [bds-breadcrumb](../breadcrumb) - [bds-button](../button) - [bds-button-icon](../icon-button) - [bds-checkbox](../checkbox) @@ -73,6 +74,7 @@ graph TD; bds-avatar --> bds-icon bds-badge --> bds-icon bds-banner --> bds-icon + bds-breadcrumb --> bds-icon bds-button --> bds-icon bds-button-icon --> bds-icon bds-checkbox --> bds-icon diff --git a/src/components/typo/readme.md b/src/components/typo/readme.md index 1e9535ec9..cdb75e81e 100644 --- a/src/components/typo/readme.md +++ b/src/components/typo/readme.md @@ -37,6 +37,7 @@ - [bds-autocomplete](../autocomplete) - [bds-avatar](../avatar) - [bds-badge](../badge) + - [bds-breadcrumb](../breadcrumb) - [bds-button](../button) - [bds-card-color](../card-color) - [bds-card-subtitle](../card/card-subtitle) @@ -89,6 +90,7 @@ graph TD; bds-autocomplete --> bds-typo bds-avatar --> bds-typo bds-badge --> bds-typo + bds-breadcrumb --> bds-typo bds-button --> bds-typo bds-card-color --> bds-typo bds-card-subtitle --> bds-typo diff --git a/src/index.html b/src/index.html index 2a397d8c2..1e1c2a63f 100644 --- a/src/index.html +++ b/src/index.html @@ -24,69 +24,18 @@ <body> <bds-test-component></bds-test-component> - <h2>Exemplos do BdsDivider</h2> -<bds-grid direction="column" gap="2"> - <bds-grid xxs="12" direction="column"> - <!-- Horizontal Divider, Solid, Divider-1 --> - <bds-divider style-type="solid" orientation="horizontal" color="divider-1"></bds-divider> - - <!-- Horizontal Divider, Solid, Divider-2 --> - <bds-divider style-type="solid" orientation="horizontal" color="divider-2"></bds-divider> - - <!-- Horizontal Divider, Solid, Divider-3 --> - <bds-divider style-type="solid" orientation="horizontal" color="divider-3"></bds-divider> - - <!-- Horizontal Divider, Dotted, Divider-1 --> - <bds-divider style-type="dotted" orientation="horizontal" color="divider-1"></bds-divider> - - <!-- Horizontal Divider, Dotted, Divider-2 --> - <bds-divider style-type="dotted" orientation="horizontal" color="divider-2"></bds-divider> - - <!-- Horizontal Divider, Dotted, Divider-3 --> - <bds-divider style-type="dotted" orientation="horizontal" color="divider-3"></bds-divider> - - <!-- Horizontal Divider, Dashed, Divider-1 --> - <bds-divider style-type="dashed" orientation="horizontal" color="divider-1"></bds-divider> - - <!-- Horizontal Divider, Dashed, Divider-2 --> - <bds-divider style-type="dashed" orientation="horizontal" color="divider-2"></bds-divider> - - <!-- Horizontal Divider, Dashed, Divider-3 --> - <bds-divider style-type="dashed" orientation="horizontal" color="divider-3"></bds-divider> - + <bds-grid xxs="12" margin="auto" justify-content="center" height="500px" align-items="center"> + <bds-breadcrumb + items='[ + {"label": "Página 1", "href": "/pagina-1"}, + {"label": "Página 2", "href": "/pagina-2"}, + {"label": "Página 3", "href": "/pagina-3"}, + {"label": "Página 4", "href": "/pagina-4"}, + {"label": "Página atual"} + ]' + ></bds-breadcrumb> </bds-grid> - <bds-grid direction="row" gap="2" height="600px"> - <!-- Vertical Divider, Solid, Divider-1 --> - <bds-divider style-type="solid" orientation="vertical" color="divider-1"></bds-divider> - <!-- Vertical Divider, Solid, Divider-2 --> - <bds-divider style-type="solid" orientation="vertical" color="divider-2"></bds-divider> - - <!-- Vertical Divider, Solid, Divider-3 --> - <bds-divider style-type="solid" orientation="vertical" color="divider-3"></bds-divider> - - <!-- Vertical Divider, Dotted, Divider-1 --> - <bds-divider style-type="dotted" orientation="vertical" color="divider-1"></bds-divider> - - <!-- Vertical Divider, Dotted, Divider-2 --> - <bds-divider style-type="dotted" orientation="vertical" color="divider-2"></bds-divider> - - <!-- Vertical Divider, Dotted, Divider-3 --> - <bds-divider style-type="dotted" orientation="vertical" color="divider-3"></bds-divider> - - <!-- Vertical Divider, Dashed, Divider-1 --> - <bds-divider style-type="dashed" orientation="vertical" color="divider-1"></bds-divider> - - <!-- Vertical Divider, Dashed, Divider-2 --> - <bds-divider style-type="dashed" orientation="vertical" color="divider-2"></bds-divider> - - <!-- Vertical Divider, Dashed, Divider-3 --> - <bds-divider style-type="dashed" orientation="vertical" color="divider-3"></bds-divider> - - </bds-grid> - -</bds-grid> - </body> <script> From 7d102e1907999e0bd0887fb472c175a870ca23c5 Mon Sep 17 00:00:00 2001 From: WillianLomeu <willianlomeu.contato@gmail.com> Date: Mon, 2 Dec 2024 21:00:42 -0300 Subject: [PATCH 02/11] feat(template): new template sidebar and content --- src/components/grid/readme.md | 4 +- .../portal/sidebar+content.stories.jsx | 115 ++++++++++++++++++ 2 files changed, 117 insertions(+), 2 deletions(-) create mode 100644 src/templates/portal/sidebar+content.stories.jsx diff --git a/src/components/grid/readme.md b/src/components/grid/readme.md index 012202618..9bd41d685 100644 --- a/src/components/grid/readme.md +++ b/src/components/grid/readme.md @@ -20,10 +20,10 @@ | `justifyContent` | `justify-content` | | `"center" \| "flex-end" \| "flex-start" \| "space-around" \| "space-between" \| "space-evenly" \| "stretch"` | `undefined` | | `lg` | `lg` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | | `lgOffset` | `lg-offset` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | -| `margin` | `margin` | | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "none" \| "half" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` | +| `margin` | `margin` | | `"none" \| "half" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` | | `md` | `md` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | | `mdOffset` | `md-offset` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | -| `padding` | `padding` | | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "none" \| "half" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "b-12" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` | +| `padding` | `padding` | | `"none" \| "half" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "b-12" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` | | `sm` | `sm` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | | `smOffset` | `sm-offset` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | | `xg` | `xg` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | diff --git a/src/templates/portal/sidebar+content.stories.jsx b/src/templates/portal/sidebar+content.stories.jsx new file mode 100644 index 000000000..3c7df7640 --- /dev/null +++ b/src/templates/portal/sidebar+content.stories.jsx @@ -0,0 +1,115 @@ +import React, { useState } from 'react'; +import { + BdsTable, + BdsTableHeader, + BdsTableRow, + BdsTableTh, + BdsTableBody, + BdsTableCell, + BdsTypo, + BdsPagination, + BdsChipTag, + BdsCard, + BdsCardHeader, + BdsCardTitle, + BdsGrid, + BdsCardSubtitle, + BdsCardBody, + BdsList, + BdsListItem, + BdsSidebar, + BdsNavTree, + BdsNavTreeGroup, + BdsNavTreeItem, + BdsIcon, + BdsButton, + BdsInput, + BdsPaper, + BdsTooltip +} from '../../../blip-ds-react/dist/components'; + +export default { + title: 'Template/Portal/Sidebar + Content', +}; + +export const SidebarContent = (args) => ( + <BdsGrid direction='row' xxs='12' height='100%'> + {/* Sidebar */} + <BdsGrid> + <BdsSidebar width="310px" type='fixed' background='surface-1'> + <BdsGrid slot='body'> + <BdsNavTreeGroup collapse="single"> + <BdsNavTree text="Titulo" secondaryText="Breve descrição"></BdsNavTree> + <BdsNavTree text="Titulo" secondaryText="Breve descrição"></BdsNavTree> + <BdsNavTree text="Titulo" secondaryText="Breve descrição" icon='heart'> + <BdsNavTreeItem text="Titulo"></BdsNavTreeItem> + <BdsNavTreeItem text="Titulo"></BdsNavTreeItem> + <BdsNavTreeItem text="Titulo"> + <BdsNavTreeItem text="Titulo"> + <BdsNavTreeItem text="Titulo"></BdsNavTreeItem> + </BdsNavTreeItem> + </BdsNavTreeItem> + </BdsNavTree> + <BdsNavTree text="Titulo" secondaryText="Breve descrição"> + <BdsNavTreeItem text="Titulo"></BdsNavTreeItem> + </BdsNavTree> + </BdsNavTreeGroup> + </BdsGrid> + </BdsSidebar> + </BdsGrid> + <BdsGrid bgColor='color-surface-2' xxs='auto'> + <BdsGrid container xxs='12' direction='column'> + <BdsGrid margin='x-auto' padding='y-4' justifyContent='space-between' xxs='12'> + <BdsGrid direction='row' alignItems='center' gap="1"> + <BdsButton iconLeft='arrow-left' color='content' variant='text'></BdsButton> + <BdsTypo variant='fs-24' bold='bold' margin="false">Título da página 24px-h3, Bold</BdsTypo> + + </BdsGrid> + <BdsGrid gap='2'> + <BdsButton iconLeft='info' variant='outline' color='content'></BdsButton> + <BdsButton variant='outline' color='content'>Verbo + complemento</BdsButton> + <BdsButton>Verbo + complemento</BdsButton> + </BdsGrid> + </BdsGrid> + <BdsGrid xxs='6' margin='y-4'> + <BdsInput placeholder='Digite o nome do produto que está procurando' icon='search'></BdsInput> + </BdsGrid> + <BdsGrid margin='y-4' flexWrap='wrap'> + <BdsGrid xxs='6' height='260px'> + <BdsPaper width='100%'> + <BdsGrid padding='2' direction='column'> + <BdsGrid alignItems='center' gap='1'> + <BdsTypo variant='fs-20' bold='bold' margin='false'>Título do card 1, $fs-20-h4/Bold</BdsTypo> + <BdsTooltip tooltipText='Top Center'><BdsIcon name='info' size='x-small'></BdsIcon></BdsTooltip> + </BdsGrid> + <BdsGrid> + <BdsTypo>Subtítulo do card 1, explicando conteúdo</BdsTypo> + </BdsGrid> + </BdsGrid> + </BdsPaper> + </BdsGrid> + <BdsGrid xxs='6' height='260px'> + <BdsPaper width='100%'> + <BdsGrid padding='2' direction='column'> + <BdsGrid alignItems='center' gap='1'> + <BdsTypo variant='fs-20' bold='bold' margin='false'>Título do card 2, $fs-20-h4/Bold</BdsTypo> + </BdsGrid> + </BdsGrid> + </BdsPaper> + </BdsGrid> + <BdsGrid xxs='12' padding='t-2' height='260px'> + <BdsPaper width='100%'> + <BdsGrid padding='2' direction='column'> + <BdsGrid alignItems='center' gap='1'> + <BdsTypo variant='fs-20' bold='bold' margin='false'>Título do card 3, $fs-20-h4/Bold</BdsTypo> + </BdsGrid> + </BdsGrid> + </BdsPaper> + </BdsGrid> + </BdsGrid> + + </BdsGrid> + + </BdsGrid> + </BdsGrid> +); \ No newline at end of file From 0a341d2234c6555f0f71ec53b7cafdab640f3c52 Mon Sep 17 00:00:00 2001 From: WillianLomeu <willianlomeu.contato@gmail.com> Date: Tue, 3 Dec 2024 11:50:43 -0300 Subject: [PATCH 03/11] feat(breadcrumb): new colors and sizes --- src/components/breadcrumb/breadcrumb.scss | 31 ++++++++++++++++------- src/components/breadcrumb/breadcrumb.tsx | 14 +++++----- src/components/button/button.scss | 6 +++++ src/components/button/button.tsx | 3 +++ src/index.html | 11 -------- 5 files changed, 38 insertions(+), 27 deletions(-) diff --git a/src/components/breadcrumb/breadcrumb.scss b/src/components/breadcrumb/breadcrumb.scss index c6844cf8e..0e342f80d 100644 --- a/src/components/breadcrumb/breadcrumb.scss +++ b/src/components/breadcrumb/breadcrumb.scss @@ -6,26 +6,39 @@ } } +.button--icon { + transform: rotate(180deg); + color: $color-content-ghost; +} + .breadcrumb__button { &--0 { - margin-left: 0; + padding-left: 0; + .button--icon { display: none; } } + &--1 { - margin-left: 30px; padding-left: 8px; - .button--icon { - transform: rotate(180deg); - } } + &--2 { - margin-left: 60px; - .button--icon { - transform: rotate(180deg); - } + padding-left: 16px; + } + + &--3 { + padding-left: 24px; } + + &--4 { + padding-left: 32px; + } +} + +.breadcrumb__link--text { + color: $color-content-disable; } .breadcrumb__link { diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx index b9eec6107..9d3369c28 100644 --- a/src/components/breadcrumb/breadcrumb.tsx +++ b/src/components/breadcrumb/breadcrumb.tsx @@ -65,15 +65,15 @@ export class Breadcrumb { > {item.label === '...' ? ( <bds-dropdown active-mode="click" position="auto"> - <div slot="dropdown-content"> + <bds-grid slot="dropdown-content"> <bds-grid direction='column' padding='1' gap="half"> {this.parsedItems.slice(1, -1).map((subItem, index) => ( <bds-grid> {subItem.href ? ( <a href={subItem.href} class={`breadcrumb__button--${index} breadcrumb__link`}> - <bds-grid align-items='center'> - <bds-icon name="reply" theme='outline' class="button--icon"></bds-icon> - <bds-button variant="text" color='content'> + <bds-grid align-items='center' gap='half'> + <bds-icon name="reply" theme='outline' class="button--icon" size='x-small'></bds-icon> + <bds-button variant="text" color='content' size='short'> {subItem.label} </bds-button> </bds-grid> @@ -85,7 +85,7 @@ export class Breadcrumb { </bds-grid> ))} </bds-grid> - </div> + </bds-grid> <bds-grid slot="dropdown-activator"> <bds-button variant="text" @@ -98,7 +98,7 @@ export class Breadcrumb { </bds-dropdown> ) : item.href ? ( <bds-grid direction="row"> - <bds-typo variant="fs-12" margin={false}> + <bds-typo variant="fs-12" margin={false} class="breadcrumb__link--text"> <a href={item.href} class="breadcrumb__link"> {item.label} </a> @@ -108,7 +108,7 @@ export class Breadcrumb { ) : ( <bds-grid direction="row"> <bds-icon name="arrow-right" size="x-small"></bds-icon> - <bds-typo variant="fs-12" bold="bold" margin={false}> + <bds-typo variant="fs-12" bold="semi-bold" margin={false}> {item.label} </bds-typo> </bds-grid> diff --git a/src/components/button/button.scss b/src/components/button/button.scss index 1bbb66385..8eddfdb24 100755 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -38,6 +38,7 @@ $button-border-radius: 8px; .typo_buttom, .icon_buttom { color: $text-color; + z-index: 1; } &--disabled { @@ -157,6 +158,11 @@ $button-border-radius: 8px; gap: 0; } + &__only-icon--short { + padding: 8px; + gap: 0; + } + &--block, &--group { width: 100%; diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 7c245f406..b5c8810ca 100755 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -187,6 +187,9 @@ export class Button { if (slotText === '' && this.size === 'large') { onlyIconElement.classList.add('button__only-icon--large'); } + if (slotText === '' && this.size === 'short') { + onlyIconElement.classList.add('button__only-icon--short'); + } } } diff --git a/src/index.html b/src/index.html index 1e1c2a63f..2c5496c68 100644 --- a/src/index.html +++ b/src/index.html @@ -24,17 +24,6 @@ <body> <bds-test-component></bds-test-component> - <bds-grid xxs="12" margin="auto" justify-content="center" height="500px" align-items="center"> - <bds-breadcrumb - items='[ - {"label": "Página 1", "href": "/pagina-1"}, - {"label": "Página 2", "href": "/pagina-2"}, - {"label": "Página 3", "href": "/pagina-3"}, - {"label": "Página 4", "href": "/pagina-4"}, - {"label": "Página atual"} - ]' - ></bds-breadcrumb> - </bds-grid> </body> From 893b7f30d34d6a154b4882402709c328d21e4fe6 Mon Sep 17 00:00:00 2001 From: WillianLomeu <willianlomeu.contato@gmail.com> Date: Tue, 3 Dec 2024 11:58:24 -0300 Subject: [PATCH 04/11] feat(breadcrumb): removed console log --- src/components/breadcrumb/breadcrumb.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx index 9d3369c28..a8bb6f370 100644 --- a/src/components/breadcrumb/breadcrumb.tsx +++ b/src/components/breadcrumb/breadcrumb.tsx @@ -16,7 +16,6 @@ export class Breadcrumb { try { this.parsedItems = JSON.parse(newValue); } catch (error) { - console.error('Falha ao analisar items: Certifique-se de que é um JSON válido.', error); this.parsedItems = []; } } else { @@ -37,8 +36,6 @@ export class Breadcrumb { } render() { - console.log('Itens processados:', this.parsedItems); - if (!this.parsedItems || this.parsedItems.length === 0) { return <p>Sem itens para exibir no Breadcrumb.</p>; } From 16489488cc2631f953d83fff4b1621e5775b5466 Mon Sep 17 00:00:00 2001 From: WillianLomeu <willianlomeu.contato@gmail.com> Date: Wed, 4 Dec 2024 14:56:39 -0300 Subject: [PATCH 05/11] feat(template): removed imports --- .../portal/sidebar+content.stories.jsx | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/src/templates/portal/sidebar+content.stories.jsx b/src/templates/portal/sidebar+content.stories.jsx index 3c7df7640..e27c4404c 100644 --- a/src/templates/portal/sidebar+content.stories.jsx +++ b/src/templates/portal/sidebar+content.stories.jsx @@ -1,22 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; import { - BdsTable, - BdsTableHeader, - BdsTableRow, - BdsTableTh, - BdsTableBody, - BdsTableCell, BdsTypo, - BdsPagination, - BdsChipTag, - BdsCard, - BdsCardHeader, - BdsCardTitle, BdsGrid, - BdsCardSubtitle, - BdsCardBody, - BdsList, - BdsListItem, BdsSidebar, BdsNavTree, BdsNavTreeGroup, From e360bee13d662ce9cf5043b2308f6e346ba08e7d Mon Sep 17 00:00:00 2001 From: Lucas Murta <lucas.murta@take.net> Date: Wed, 4 Dec 2024 15:20:12 -0300 Subject: [PATCH 06/11] feat(banner): add cypress test on Banner --- cypress/component/banner.cy.tsx | 74 +++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 cypress/component/banner.cy.tsx diff --git a/cypress/component/banner.cy.tsx b/cypress/component/banner.cy.tsx new file mode 100644 index 000000000..3d1f519e9 --- /dev/null +++ b/cypress/component/banner.cy.tsx @@ -0,0 +1,74 @@ +import { BdsBanner, BdsBannerLink, BdsButton } from '../dist/blip-ds-react'; + +const Banner = () => { + const toogle = () => { + const bannerElement = document.querySelector('bds-banner'); + bannerElement.toggle(); + }; + return ( + <> + <button onClick={() => toogle()}>Botão anterior</button> + <BdsBanner + variant="system" + buttonClose="true" + context="outside" + onBdsBannerClose={cy.stub().as('bdsBannerClose')} + dtButtonClose="should-button-close" + > + Instabilidade na plataforma? Não se preocupe, já estamos resolvendo! + <BdsBannerLink onBdsBannerLink={cy.stub().as('bdsBannerLink')}>Acompanhe aqui</BdsBannerLink> + </BdsBanner> + </> + ); +}; + +describe('Teste de Renderização Banner', () => { + // Teste de Renderização + it('deve renderizar o banner com o variant correto', () => { + cy.mount(<Banner />); + cy.get('bds-banner').should('have.attr', 'variant', 'system'); + }); + it('deve renderizar o banner com o button-close correto', () => { + cy.mount(<Banner />); + cy.get('bds-banner').should('have.attr', 'button-close', 'true'); + }); + it('deve renderizar o banner com o context correto', () => { + cy.mount(<Banner />); + cy.get('bds-banner').should('have.attr', 'context', 'outside'); + }); +}); + +describe('Teste de Eventos Banner', () => { + // Teste de Evento onBdsBannerClose + it('deve chamar o evento onBdsBannerClose ao digitar', () => { + cy.mount(<Banner />); + cy.get('bds-banner') + .shadow() + .find('bds-button-icon[icon="close"]') + .shadow() + .find('[data-test="should-button-close"]') + .click(); + cy.get('@bdsBannerClose').should('have.been.called'); + }); + // Teste de Evento bdsBannerLink + it('deve chamar o evento onBdsBannerLink ao digitar', () => { + cy.mount(<Banner />); + cy.get('bds-banner').find('bds-banner-link').click(); + cy.get('@bdsBannerLink').should('have.been.called'); + }); +}); + +describe('Teste de Acessibilidade banner', () => { + // Teste de Acessibilidade método Toogle + it('Verificar se o método toggle esta sendo correspondido', () => { + cy.mount(<Banner />); + cy.get('bds-banner') + .shadow() + .find('bds-button-icon[icon="close"]') + .shadow() + .find('[data-test="should-button-close"]') + .click(); + cy.get('button').click(); + cy.get('bds-banner').should('not.have.class', 'banner--hide'); + }); +}); From 551a477a35eee287676c418fd4e988e362346395 Mon Sep 17 00:00:00 2001 From: Lucas Murta <lucas.murta@take.net> Date: Wed, 4 Dec 2024 16:19:24 -0300 Subject: [PATCH 07/11] feat(badge): add cypress test on Badge --- cypress/component/badge.cy.tsx | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 cypress/component/badge.cy.tsx diff --git a/cypress/component/badge.cy.tsx b/cypress/component/badge.cy.tsx new file mode 100644 index 000000000..dad499378 --- /dev/null +++ b/cypress/component/badge.cy.tsx @@ -0,0 +1,29 @@ +import { BdsBadge } from '../dist/blip-ds-react'; + +const Badge = () => { + return ( + <> + <BdsBadge animation={true} shape="circle" color="system" icon="info"></BdsBadge> + </> + ); +}; + +describe('Teste de Renderização Badge', () => { + // Teste de Renderização + it('deve renderizar o Badge com o shape correto', () => { + cy.mount(<Badge />); + cy.get('bds-badge').should('have.attr', 'shape', 'circle'); + }); + it('deve renderizar o Badge com o color correto', () => { + cy.mount(<Badge />); + cy.get('bds-badge').should('have.attr', 'color', 'system'); + }); + it('deve renderizar o Badge com o icon correto', () => { + cy.mount(<Badge />); + cy.get('bds-badge').should('have.attr', 'icon', 'info'); + }); + it('deve renderizar o Badge com o animation correto', () => { + cy.mount(<Badge />); + cy.get('bds-badge').should('have.attr', 'animation', 'true'); + }); +}); From 6775c4965eeb7d0b793419b8c193370686c16172 Mon Sep 17 00:00:00 2001 From: Lucas Murta <lucas.murta@take.net> Date: Wed, 4 Dec 2024 17:01:23 -0300 Subject: [PATCH 08/11] feat(button): add cypress test on Button --- cypress/component/button.cy.tsx | 144 ++++++++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 cypress/component/button.cy.tsx diff --git a/cypress/component/button.cy.tsx b/cypress/component/button.cy.tsx new file mode 100644 index 000000000..403f0de17 --- /dev/null +++ b/cypress/component/button.cy.tsx @@ -0,0 +1,144 @@ +import { BdsButton } from '../dist/blip-ds-react'; + +const Button = () => { + const isActive = () => { + const buttonElement = document.querySelector('bds-button'); + buttonElement.isActive(true); + }; + const setPositionDirection = () => { + const buttonElement = document.querySelector('bds-button'); + buttonElement.setDirection('row'); + buttonElement.setPosition('first'); + }; + const setSize = () => { + const buttonElement = document.querySelector('bds-button'); + buttonElement.setSize('short'); + }; + const setColor = () => { + const buttonElement = document.querySelector('bds-button'); + buttonElement.setColor('positive'); + }; + const setVariant = () => { + const buttonElement = document.querySelector('bds-button'); + buttonElement.setVariant('outline'); + }; + return ( + <> + <button id="isActive" onClick={() => isActive()}> + Botão anterior + </button> + <button id="setPositionDirection" onClick={() => setPositionDirection()}> + Botão anterior + </button> + <button id="setSize" onClick={() => setSize()}> + Botão anterior + </button> + <button id="setColor" onClick={() => setColor()}> + Botão anterior + </button> + <button id="setVariant" onClick={() => setVariant()}> + Botão anterior + </button> + <BdsButton + color="primary" + iconLeft="edit" + iconRight="edit" + iconTheme="outline" + size="medium" + type="button" + typeIcon="icon" + variant="solid" + onBdsClick={cy.stub().as('bdsClick')} + > + Button + </BdsButton> + </> + ); +}; + +describe('Teste de Renderização Button', () => { + // Teste de Renderização + it('deve renderizar o button com o color correto', () => { + cy.mount(<Button />); + cy.get('bds-button').should('have.attr', 'color', 'primary'); + }); + it('deve renderizar o button com o icon-left correto', () => { + cy.mount(<Button />); + cy.get('bds-button').should('have.attr', 'icon-left', 'edit'); + }); + it('deve renderizar o button com o icon-right correto', () => { + cy.mount(<Button />); + cy.get('bds-button').should('have.attr', 'icon-right', 'edit'); + }); + it('deve renderizar o button com o icon-theme correto', () => { + cy.mount(<Button />); + cy.get('bds-button').should('have.attr', 'icon-theme', 'outline'); + }); + it('deve renderizar o button com o size correto', () => { + cy.mount(<Button />); + cy.get('bds-button').should('have.attr', 'size', 'medium'); + }); + it('deve renderizar o button com o type correto', () => { + cy.mount(<Button />); + cy.get('bds-button').should('have.attr', 'type', 'button'); + }); + it('deve renderizar o button com o type-icon correto', () => { + cy.mount(<Button />); + cy.get('bds-button').should('have.attr', 'type-icon', 'icon'); + }); + it('deve renderizar o button com o variant correto', () => { + cy.mount(<Button />); + cy.get('bds-button').should('have.attr', 'variant', 'solid'); + }); +}); + +describe('Teste de Eventos Button', () => { + // Teste de Evento bdsClick + it('deve chamar o evento onBdsClick ao clicar', () => { + cy.mount(<Button />); + cy.get('bds-button').shadow().find('button').click(); + cy.get('@bdsClick').should('have.been.called'); + }); +}); + +describe('Teste de Acessibilidade button', () => { + // Teste de Acessibilidade com Tab + it('deve ser possível navegar para o button usando a tecla Tab', () => { + cy.mount(<Button />); + cy.get('button[id=setVariant]').first().focus(); + cy.wait(50); + cy.realPress('Tab'); + cy.wait(50); + cy.get('bds-button').should('have.focus'); + }); + // Teste de Acessibilidade método isActive + it('Verificar se o método isActive esta sendo correspondido', () => { + cy.mount(<Button />); + cy.get('button[id=isActive]').click(); + cy.get('bds-button').shadow().find('button').should('have.class', 'button--active'); + }); + // Teste de Acessibilidade método setPosition + it('Verificar se o método setPosition esta sendo correspondido', () => { + cy.mount(<Button />); + cy.get('button[id=setPositionDirection]').click(); + cy.get('bds-button').shadow().find('button').should('have.class', 'button__position--row--first'); + }); + // Teste de Acessibilidade método setSize + it('Verificar se o método setSize esta sendo correspondido', () => { + cy.mount(<Button />); + cy.get('button[id=setSize]').click(); + cy.get('bds-button').shadow().find('button').should('have.class', 'button__size--short'); + }); + // Teste de Acessibilidade método setColor + it('Verificar se o método setColor esta sendo correspondido', () => { + cy.mount(<Button />); + cy.get('button[id=setColor]').click(); + cy.get('bds-button').shadow().find('button').should('have.class', 'button__color--positive'); + }); + // Teste de Acessibilidade método setVariant + it('Verificar se o método setVariant esta sendo correspondido', () => { + cy.mount(<Button />); + cy.get('button[id=setVariant]').click(); + cy.get('bds-button').shadow().find('button').should('have.class', 'button__variant--outline'); + }); +}); From 26633699ce4bed2232cb7837e42b77211104976b Mon Sep 17 00:00:00 2001 From: Lucas Murta <lucas.murta@take.net> Date: Thu, 5 Dec 2024 11:12:05 -0300 Subject: [PATCH 09/11] feat(button-group): add cypress test on ButtonGroup --- cypress/component/buttonGroup.cy.tsx | 66 ++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 cypress/component/buttonGroup.cy.tsx diff --git a/cypress/component/buttonGroup.cy.tsx b/cypress/component/buttonGroup.cy.tsx new file mode 100644 index 000000000..e29b3b37d --- /dev/null +++ b/cypress/component/buttonGroup.cy.tsx @@ -0,0 +1,66 @@ +import { BdsButton, BdsButtonGroup } from '../dist/blip-ds-react'; + +const ButtonGroup = () => { + const activateButton = () => { + const buttonElement = document.querySelector('bds-button-group'); + buttonElement.activateButton(3); + }; + return ( + <> + <button id="activateButton" onClick={() => activateButton()}> + Botão anterior + </button> + <BdsButtonGroup + color="primary" + direction="column" + size="medium" + onButtonSelected={cy.stub().as('buttonSelected')} + > + <BdsButton iconLeft="builder-publish-bot" id="bot-builder-publish"></BdsButton> + <BdsButton iconLeft="search" id="bot-search"></BdsButton> + <BdsButton iconLeft="email" id="bot-email"></BdsButton> + <BdsButton iconLeft="bell" id="bot-bell"></BdsButton> + <BdsButton iconLeft="settings-general" id="bot-settings"></BdsButton> + </BdsButtonGroup> + ; + </> + ); +}; + +describe('Teste de Renderização ButtonGroup', () => { + // Teste de Renderização + it('deve renderizar o button com o color correto', () => { + cy.mount(<ButtonGroup />); + cy.get('bds-button-group').should('have.attr', 'color', 'primary'); + }); + it('deve renderizar o button com o size correto', () => { + cy.mount(<ButtonGroup />); + cy.get('bds-button-group').should('have.attr', 'size', 'medium'); + }); + it('deve renderizar o button com o direction correto', () => { + cy.mount(<ButtonGroup />); + cy.get('bds-button-group').should('have.attr', 'direction', 'column'); + }); +}); + +describe('Teste de Eventos ButtonGroup', () => { + // Teste de Evento bdsClick + it('deve chamar o evento onButtonSelected ao clicar', () => { + cy.mount(<ButtonGroup />); + cy.get('bds-button-group').find('bds-button[id="bot-search"]').shadow().find('button').click(); + cy.get('@buttonSelected').should('have.been.called'); + }); +}); + +describe('Teste de Acessibilidade button', () => { + // Teste de Acessibilidade método isActive + it('Verificar se o método isActive esta sendo correspondido', () => { + cy.mount(<ButtonGroup />); + cy.get('button[id="activateButton"]').click(); + cy.get('bds-button-group') + .find('bds-button[id="bot-bell"]') + .shadow() + .find('button') + .should('have.class', 'button--active'); + }); +}); From a71e53e5b14e5fe0c6cecd82be84b29d481e9130 Mon Sep 17 00:00:00 2001 From: Lucas Murta <lucas.murta@take.net> Date: Thu, 5 Dec 2024 11:46:51 -0300 Subject: [PATCH 10/11] feat(accordion): add cypress test on accordion --- cypress/component/accordion.cy.tsx | 106 +++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 cypress/component/accordion.cy.tsx diff --git a/cypress/component/accordion.cy.tsx b/cypress/component/accordion.cy.tsx new file mode 100644 index 000000000..5ad35ab40 --- /dev/null +++ b/cypress/component/accordion.cy.tsx @@ -0,0 +1,106 @@ +import { BdsAccordion, BdsAccordionBody, BdsAccordionHeader, BdsButton, BdsTypo } from '../dist/blip-ds-react'; + +const Accordion = () => { + const paragraph = + 'Um accordion é uma lista de cabeçalhos empilhados verticalmente que revelam ou ocultam seções de conteúdo associados.'; + const toggle = () => { + const buttonElement = document.querySelector('bds-accordion'); + buttonElement.toggle(); + }; + const open = () => { + const buttonElement = document.querySelector('bds-accordion'); + buttonElement.open(); + }; + const close = () => { + const buttonElement = document.querySelector('bds-accordion'); + buttonElement.close(); + }; + return ( + <> + <button id="toggle" onClick={() => toggle()}> + toggle + </button> + <button id="open" onClick={() => open()}> + open + </button> + <button id="close" onClick={() => close()}> + close + </button> + <BdsAccordion + onBdsToggle={cy.stub().as('bdsToggle')} + onBdsAccordionOpen={cy.stub().as('bdsAccordionOpen')} + onBdsAccordionClose={cy.stub().as('bdsAccordionClose')} + > + <BdsAccordionHeader accordionTitle="Título do accordion"></BdsAccordionHeader> + <BdsAccordionBody> + <BdsTypo variant="fs-16">{paragraph}</BdsTypo> + </BdsAccordionBody> + </BdsAccordion> + </> + ); +}; + +describe('Teste de Eventos Button', () => { + // Teste de Evento onBdsToggle + it('deve chamar o evento onBdsToggle ao clicar', () => { + cy.mount(<Accordion />); + cy.get('button[id=toggle]').click(); + cy.get('@bdsToggle').should('have.been.called'); + }); + // Teste de Evento onBdsAccordionOpen + it('deve chamar o evento onBdsAccordionOpen ao clicar', () => { + cy.mount(<Accordion />); + cy.get('button[id=open]').click(); + cy.get('@bdsAccordionOpen').should('have.been.called'); + }); + // Teste de Evento onBdsAccordionClose + it('deve chamar o evento onBdsAccordionClose ao clicar', () => { + cy.mount(<Accordion />); + cy.get('button[id=open]').click(); + cy.get('button[id=close]').click(); + cy.get('@bdsAccordionClose').should('have.been.called'); + }); +}); + +describe('Teste de Acessibilidade button', () => { + // Teste de Acessibilidade com Tab + it('deve ser possível navegar para o button usando a tecla Tab', () => { + cy.mount(<Accordion />); + cy.get('button[id=close]').first().focus(); + cy.wait(50); + cy.realPress('Tab'); + cy.wait(50); + cy.get('bds-accordion').find('bds-accordion-header').shadow().find('bds-icon.accButton').should('have.focus'); + }); + // Teste de Acessibilidade método toggle + it('Verificar se o método toggle esta sendo correspondido', () => { + cy.mount(<Accordion />); + cy.get('button[id=toggle]').click(); + cy.get('bds-accordion') + .find('bds-accordion-body') + .shadow() + .find('.accordion_body') + .should('have.class', 'accordion_body_isOpen'); + }); + // Teste de Acessibilidade método open + it('Verificar se o método open esta sendo correspondido', () => { + cy.mount(<Accordion />); + cy.get('button[id=open]').click(); + cy.get('bds-accordion') + .find('bds-accordion-body') + .shadow() + .find('.accordion_body') + .should('have.class', 'accordion_body_isOpen'); + }); + // Teste de Acessibilidade método close + it('Verificar se o método close esta sendo correspondido', () => { + cy.mount(<Accordion />); + cy.get('button[id=open]').click(); + cy.get('button[id=close]').click(); + cy.get('bds-accordion') + .find('bds-accordion-body') + .shadow() + .find('.accordion_body') + .should('not.have.class', 'accordion_body_isOpen'); + }); +}); From 5158b09783bafee3f5e730f8a47f4350107e26fe Mon Sep 17 00:00:00 2001 From: Lucas Murta <lucas.murta@take.net> Date: Thu, 5 Dec 2024 12:06:56 -0300 Subject: [PATCH 11/11] feat(accordion-group): add cypress test on accordion --- cypress/component/accordionGroup.cy.tsx | 90 +++++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 cypress/component/accordionGroup.cy.tsx diff --git a/cypress/component/accordionGroup.cy.tsx b/cypress/component/accordionGroup.cy.tsx new file mode 100644 index 000000000..2b3c1d9ae --- /dev/null +++ b/cypress/component/accordionGroup.cy.tsx @@ -0,0 +1,90 @@ +import { + BdsAccordion, + BdsAccordionBody, + BdsAccordionGroup, + BdsAccordionHeader, + BdsButton, + BdsTypo, +} from '../dist/blip-ds-react'; + +const AccordionGroup = () => { + const paragraph = + 'Um accordion é uma lista de cabeçalhos empilhados verticalmente que revelam ou ocultam seções de conteúdo associados.'; + + const openAll = () => { + const buttonElement = document.querySelector('bds-accordion-group'); + buttonElement.openAll(); + }; + const closeAll = () => { + const buttonElement = document.querySelector('bds-accordion-group'); + buttonElement.closeAll(); + }; + return ( + <> + <button id="openAll" onClick={() => openAll()}> + openAll + </button> + <button id="closeAll" onClick={() => closeAll()}> + closeAll + </button> + <BdsAccordionGroup + onBdsAccordionOpenAll={cy.stub().as('bdsAccordionOpenAll')} + onBdsAccordionCloseAll={cy.stub().as('bdsAccordionCloseAll')} + collapse="multiple" + > + <BdsAccordion> + <BdsAccordionHeader accordion-title="Título do accordion"></BdsAccordionHeader> + <BdsAccordionBody> + <BdsTypo variant="fs-16">{paragraph}</BdsTypo> + </BdsAccordionBody> + </BdsAccordion> + <BdsAccordion> + <BdsAccordionHeader accordion-title="Título do accordion"></BdsAccordionHeader> + <BdsAccordionBody> + <BdsTypo variant="fs-16">{paragraph}</BdsTypo> + </BdsAccordionBody> + </BdsAccordion> + </BdsAccordionGroup> + </> + ); +}; + +describe('Teste de Eventos Button', () => { + // Teste de Evento onBdsAccordionOpen + it('deve chamar o evento onBdsAccordionOpen ao clicar', () => { + cy.mount(<AccordionGroup />); + cy.get('button[id=openAll]').click(); + cy.get('@bdsAccordionOpenAll').should('have.been.called'); + }); + // Teste de Evento onBdsAccordionClose + it('deve chamar o evento onBdsAccordionClose ao clicar', () => { + cy.mount(<AccordionGroup />); + cy.get('button[id=openAll]').click(); + cy.get('button[id=closeAll]').click(); + cy.get('@bdsAccordionCloseAll').should('have.been.called'); + }); +}); + +describe('Teste de Acessibilidade button', () => { + // Teste de Acessibilidade método openAll + it('Verificar se o método openAll esta sendo correspondido', () => { + cy.mount(<AccordionGroup />); + cy.get('button[id=openAll]').click(); + cy.get('bds-accordion') + .find('bds-accordion-body') + .shadow() + .find('.accordion_body') + .should('have.class', 'accordion_body_isOpen'); + }); + // Teste de Acessibilidade método closeAll + it('Verificar se o método closeAll esta sendo correspondido', () => { + cy.mount(<AccordionGroup />); + cy.get('button[id=openAll]').click(); + cy.get('button[id=closeAll]').click(); + cy.get('bds-accordion') + .find('bds-accordion-body') + .shadow() + .find('.accordion_body') + .should('not.have.class', 'accordion_body_isOpen'); + }); +});