Merge pull request #993 from takenet/developer

Developer
takenet · Feb 3, 2025 · 4fbc51c · 4fbc51c
2 parents 9c093b7 + 37dc593
commit 4fbc51c
Show file tree

Hide file tree

Showing 11 changed files with 590 additions and 166 deletions.
diff --git a/cypress/component/carousel.cy.tsx b/cypress/component/carousel.cy.tsx
@@ -2,6 +2,8 @@ import { useState } from 'react';
 import { BdsButton, BdsCarousel, BdsCarouselItem, BdsGrid, BdsIllustration, BdsTypo } from '../dist/blip-ds-react';
 
 export interface Props {
+  autoplay: boolean;
+  idComponent?: string;
   event?: boolean;
 }
 
@@ -53,36 +55,38 @@ const DATACAROUSEL = [
 ];
 
 const Carousel = (props: Props) => {
+  const autoplay = props.autoplay;
   const eventAvalible = props.event;
+  const componentId = props.idComponent;
   const [DATAITEMS, SETDATAITEMS] = useState(DATACAROUSEL);
   const eventChangeCarousel = (event) => {
     if (eventAvalible) {
       const input = document.getElementById('event-test') as HTMLInputElement;
       input.value = event.detail.value.id;
     }
   };
-  const nextSlide = async () => {
-    const carouselElement = document.querySelector('bds-carousel');
+  const nextSlide = async (id: string) => {
+    const carouselElement = document.getElementById(id) as HTMLBdsCarouselElement;
     await carouselElement.nextSlide();
   };
-  const prevSlide = async () => {
-    const carouselElement = document.querySelector('bds-carousel');
+  const prevSlide = async (id: string) => {
+    const carouselElement = document.getElementById(id) as HTMLBdsCarouselElement;
     await carouselElement.prevSlide();
   };
-  const setActivated = async (value: number) => {
-    const carouselElement = document.querySelector('bds-carousel');
+  const setActivated = async (id: string, value: number) => {
+    const carouselElement = document.getElementById(id) as HTMLBdsCarouselElement;
     await carouselElement.setActivated(value);
   };
-  const pauseAutoplay = async () => {
-    const carouselElement = document.querySelector('bds-carousel');
+  const pauseAutoplay = async (id: string) => {
+    const carouselElement = document.getElementById(id) as HTMLBdsCarouselElement;
     await carouselElement.pauseAutoplay();
   };
-  const runAutoplay = async () => {
-    const carouselElement = document.querySelector('bds-carousel');
+  const runAutoplay = async (id: string) => {
+    const carouselElement = document.getElementById(id) as HTMLBdsCarouselElement;
     await carouselElement.runAutoplay();
   };
-  const buildCarousel = async () => {
-    const carouselElement = document.querySelector('bds-carousel');
+  const buildCarousel = async (id: string) => {
+    const carouselElement = document.getElementById(id) as HTMLBdsCarouselElement;
     const NEWITEM = {
       title: `${DATAITEMS.length + 1} - Título do Slide`,
       subTitle:
@@ -99,26 +103,27 @@ const Carousel = (props: Props) => {
   };
   return (
     <>
-      <button id="nextSlide" onClick={() => nextSlide()}>
+      <button id="nextSlide" onClick={() => nextSlide(componentId)}>
         nextSlide
       </button>
-      <button id="prevSlide" onClick={() => prevSlide()}>
+      <button id="prevSlide" onClick={() => prevSlide(componentId)}>
         prevSlide
       </button>
-      <button id="setActivated" onClick={() => setActivated(2)}>
+      <button id="setActivated" onClick={() => setActivated(componentId, 2)}>
         setActivated 2
       </button>
-      <button id="pauseAutoplay" onClick={() => pauseAutoplay()}>
+      <button id="pauseAutoplay" onClick={() => pauseAutoplay(componentId)}>
         pauseAutoplay
       </button>
-      <button id="runAutoplay" onClick={() => runAutoplay()}>
+      <button id="runAutoplay" onClick={() => runAutoplay(componentId)}>
         runAutoplay
       </button>
-      <button id="buildCarousel" onClick={() => buildCarousel()}>
+      <button id="buildCarousel" onClick={() => buildCarousel(componentId)}>
         buildCarousel
       </button>
       <BdsCarousel
-        autoplay={true}
+        id={componentId}
+        autoplay={autoplay}
         arrows="inside"
         bullets="inside"
         bulletsPosition="center"
@@ -155,25 +160,25 @@ const Carousel = (props: Props) => {
 describe('Teste de Renderização Carousel', () => {
   // Teste de Renderização
   it('deve renderizar o Carousel com o bullets correto', () => {
-    cy.mount(<Carousel event={false} />);
+    cy.mount(<Carousel autoplay={false} event={false} />);
     cy.get('bds-carousel').should('have.attr', 'bullets', 'inside');
   });
   // Teste de Renderização
   it('deve renderizar o Carousel com o bullets-position correto', () => {
-    cy.mount(<Carousel event={false} />);
+    cy.mount(<Carousel autoplay={false} event={false} />);
     cy.get('bds-carousel').should('have.attr', 'bullets-position', 'center');
   });
   // Teste de Renderização
   it('deve renderizar o Carousel com o arrows correto', () => {
-    cy.mount(<Carousel event={false} />);
+    cy.mount(<Carousel autoplay={false} event={false} />);
     cy.get('bds-carousel').should('have.attr', 'arrows', 'inside');
   });
 });
 
 describe('Teste de Eventos Carousel', () => {
   // Teste de Evento bdsClick
   it('deve chamar o evento onBdsChangeCarousel ao clicar', () => {
-    cy.mount(<Carousel event={true} />);
+    cy.mount(<Carousel autoplay={false} event={true} />);
     cy.get('button[id="nextSlide"]').click();
     cy.get('input#event-test').should('have.value', '2');
   });
@@ -182,54 +187,54 @@ describe('Teste de Eventos Carousel', () => {
 describe('Teste de Acessibilidade Carousel', () => {
   // Teste de Acessibilidade com Tab
   it('deve ser possível navegar para o carousel usando a tecla Tab', () => {
-    cy.mount(<Carousel event={false} />);
+    cy.mount(<Carousel autoplay={false} event={false} idComponent="tab" />);
     cy.get('button[id=buildCarousel]').first().focus();
-    cy.wait(50);
+    cy.wait(100);
     cy.realPress('Tab');
-    cy.wait(50);
+    cy.wait(100);
     cy.get('bds-carousel').should('have.focus');
   });
   // Teste de Acessibilidade com ArrowRight
   it('deve ser possível navegar para o carousel usando a tecla ArrowRight', () => {
-    cy.mount(<Carousel event={true} />);
+    cy.mount(<Carousel autoplay={false} event={true} idComponent="arrowright" />);
     cy.get('button[id=buildCarousel]').first().focus();
-    cy.wait(50);
+    cy.wait(100);
     cy.realPress('Tab');
-    cy.wait(50);
+    cy.wait(100);
     cy.realPress('ArrowRight');
     cy.get('input#event-test').should('have.value', '2');
   });
   // Teste de Acessibilidade com ArrowLeft
   it('deve ser possível navegar para o carousel usando a tecla ArrowLeft', () => {
-    cy.mount(<Carousel event={true} />);
+    cy.mount(<Carousel autoplay={false} event={true} idComponent="arrowleft" />);
     cy.get('button[id=buildCarousel]').first().focus();
-    cy.wait(50);
+    cy.wait(100);
     cy.realPress('Tab');
-    cy.wait(50);
+    cy.wait(100);
     cy.realPress('ArrowLeft');
     cy.get('input#event-test').should('have.value', '4');
   });
   // Teste de Acessibilidade método nextSlide
   it('Verificar se o método nextSlide esta sendo correspondido', () => {
-    cy.mount(<Carousel event={true} />);
+    cy.mount(<Carousel autoplay={false} event={true} idComponent="nextslide" />);
     cy.get('button[id="nextSlide"]').click();
     cy.get('input#event-test').should('have.value', '2');
   });
   // Teste de Acessibilidade método prevSlide
   it('Verificar se o método prevSlide esta sendo correspondido', () => {
-    cy.mount(<Carousel event={true} />);
+    cy.mount(<Carousel autoplay={false} event={true} idComponent="prevslide" />);
     cy.get('button[id="prevSlide"]').click();
     cy.get('input#event-test').should('have.value', '4');
   });
   // Teste de Acessibilidade método setActivated
   it('Verificar se o método setActivated esta sendo correspondido', () => {
-    cy.mount(<Carousel event={true} />);
+    cy.mount(<Carousel autoplay={false} event={true} idComponent="setactivated" />);
     cy.get('button[id="setActivated"]').click();
     cy.get('input#event-test').should('have.value', '2');
   });
   // Teste de Acessibilidade método pauseAutoplay
   it('Verificar se o método pauseAutoplay esta sendo correspondido', () => {
-    cy.mount(<Carousel event={true} />);
+    cy.mount(<Carousel autoplay={true} event={true} idComponent="pauseautoplay" />);
     cy.get('button[id="pauseAutoplay"]').click();
     cy.get('bds-carousel')
       .shadow()
@@ -238,7 +243,7 @@ describe('Teste de Acessibilidade Carousel', () => {
   });
   // Teste de Acessibilidade método runAutoplay
   it('Verificar se o método runAutoplay esta sendo correspondido', () => {
-    cy.mount(<Carousel event={true} />);
+    cy.mount(<Carousel autoplay={true} event={true} idComponent="runautoplay" />);
     cy.get('button[id="runAutoplay"]').click();
     cy.get('bds-carousel')
       .shadow()
@@ -247,7 +252,7 @@ describe('Teste de Acessibilidade Carousel', () => {
   });
   // Teste de Acessibilidade método buildCarousel
   it('Verificar se o método buildCarousel esta sendo correspondido', () => {
-    cy.mount(<Carousel event={true} />);
+    cy.mount(<Carousel autoplay={false} event={true} idComponent="buildcarousel" />);
     cy.get('button[id="buildCarousel"]').click();
     cy.wait(1100);
     cy.get('button[id="prevSlide"]').click();

diff --git a/package.json b/package.json
@@ -16,10 +16,11 @@
   ],
   "scripts": {
     "generate": "stencil generate",
-    "clear": "rm -rf node_modules/ && rm -rf dist/ && rm -rf www/",
+    "clear": "rimraf  node_modules/ && rimraf  dist/ && rimraf  www/",
+    "clear-cypress": "rimraf cypress/assets/ && rimraf cypress/build/ && rimraf cypress/dist/ && rimraf cypress/screenshots/",
     "dev": "npm-run-all --parallel start storybook",
     "start": "stencil build --dev --watch --serve --docs",
-    "build": "npm run build:component",
+    "build": "npm run clear-cypress && npm run build:component",
     "build:component": "stencil build --docs --prod",
     "build:react": "cd ./blip-ds-react && npm install && npm run build",
     "ci": "npm run build && npm run storybook:build && npm run storybook:deploy",
@@ -29,7 +30,7 @@
     "test:watch": "stencil test --spec --watch",
     "test:coverage": "stencil test --spec --e2e --coverage",
     "cypress:open": "cypress open",
-    "cypress:test": "cypress run --component",
+    "cypress:test": "npm run build && cypress run --component",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build -s www",
     "storybook:deploy": "storybook-to-ghpages",
@@ -85,6 +86,7 @@
     "prettier": "^3.2.5",
     "puppeteer": "^14.0.0",
     "react-scripts": "^5.0.1",
+    "rimraf": "^6.0.1",
     "semantic-release": "^23.0.8",
     "storybook": "^7.0.22",
     "ts-node": "^10.7.0",

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -20,7 +20,7 @@ import { colorsVariants, LoadingSpinnerVariant } from "./components/loading-spin
 import { ButtonSize as ButtonSize1 } from "./components/button/button";
 import { alignItems, breakpoint, direction, flexWrap, gap as gap1, justifyContent as justifyContent2, margin, padding } from "./components/grid/grid-interface";
 import { ButtonIconTheme, IconButtonSize, IconButtonVariant } from "./components/icon-button/icon-button";
-import { PaperBackground, PaperElevation } from "./components/paper/paper-interface";
+import { BorderColor, PaperBackground, PaperElevation } from "./components/paper/paper-interface";
 import { justifyContent } from "./components/card/card-footer/card-footer";
 import { justifyContent as justifyContent1 } from "./components/card/card-header/card-header";
 import { arrows, bullets, bulletsPositions, gap } from "./components/carousel/carousel-interface";
@@ -463,6 +463,10 @@ export namespace Components {
           * Prop for set the background color.
          */
         "bgColor"?: PaperBackground;
+        /**
+          * Prop for set the border color.
+         */
+        "borderColor"?: BorderColor;
         /**
           * If the prop is true, the component will be clickable.
          */
@@ -475,6 +479,10 @@ export namespace Components {
           * Prop for set the height of the component.
          */
         "height"?: string;
+        /**
+          * Prop for set the background color.
+         */
+        "selectable"?: boolean;
         /**
           * Prop for set the width of the component.
          */
@@ -2003,6 +2011,10 @@ export namespace Components {
           * Prop for set the border of the component.
          */
         "border"?: boolean;
+        /**
+          * Prop for set the border color.
+         */
+        "borderColor"?: BorderColor;
         /**
           * Data test is the prop to specifically test the component action object.
          */
@@ -4151,6 +4163,10 @@ declare namespace LocalJSX {
           * Prop for set the background color.
          */
         "bgColor"?: PaperBackground;
+        /**
+          * Prop for set the border color.
+         */
+        "borderColor"?: BorderColor;
         /**
           * If the prop is true, the component will be clickable.
          */
@@ -4167,6 +4183,10 @@ declare namespace LocalJSX {
           * This event will be dispatch when click on the component.
          */
         "onBdsClick"?: (event: BdsCardCustomEvent<any>) => void;
+        /**
+          * Prop for set the background color.
+         */
+        "selectable"?: boolean;
         /**
           * Prop for set the width of the component.
          */
@@ -5858,6 +5878,10 @@ declare namespace LocalJSX {
           * Prop for set the border of the component.
          */
         "border"?: boolean;
+        /**
+          * Prop for set the border color.
+         */
+        "borderColor"?: BorderColor;
         /**
           * Data test is the prop to specifically test the component action object.
          */

diff --git a/src/components/card/card.scss b/src/components/card/card.scss
@@ -1,24 +1,32 @@
 :host {
     display: flex;
     position: relative;
-
+  
     &:focus-visible {
-        outline: none;
+      outline: none;
     }
-}
-
-.card {
+  }
+  
+  .card {
     display: flex;
     width: 100%;
-}
-
-.card_hover:hover {
+  }
+  
+  .card_hover:hover {
     transform: scale(1.02);
     transition: all .3s;
     cursor: pointer;
 }
 
-.focus:focus-visible {
+.card_hover_selectable:hover {
+  box-shadow: 0px 0px 0px 2px rgba(30, 107, 241, 0.08);
+}
+
+.card_hover_selectable:active {
+  box-shadow: 0px 0px 0px 2px rgba(30, 107, 241, 0.24);
+}
+
+  .focus:focus-visible {
     display: flex;
     position: absolute;
     border: 2px solid $color-focus;
@@ -30,4 +38,5 @@
     padding-right: 4px;
     padding-bottom: 4px;
     outline: none;
-  }
+  }
+