feat(pdp): Adiciona test ids

react/components/Html/styles.css

@@ -37,6 +37,7 @@
 [class*="html--qtd-btn"] {
   display: flex;
   height: 49px;
+  gap: 10px;
 }
 @media screen and (max-width: 768px) {
   [class*="html--qtd-btn"] {

store/blocks/pdp/product.jsonc

@@ -1,7 +1,7 @@
 {
   "store.product": {
     "children": [
-      "breadcrumb#pdp",
+      "html#breadcontainer",
       "condition-layout.product#availability",
       "tab-layout#details",
       "list-context.product-list#prateleira",
@@ -37,7 +37,6 @@
         "phone": 2
       },
       "infinite": true,
-      /*"fullWidth": false,*/
       "blockClass": "prateleira"
     }
   },
@@ -51,12 +50,16 @@
 
   "breadcrumb#pdp": {
     "props": {
-      "testId": "breadcrumbs",
       "blockClass": "breadcrumb",
       "showOnMobile": true
     }
   },
-
+  "html#breadcontainer": {
+    "props": {
+      "testId": "breadcrumbs"
+    },
+    "children": ["breadcrumb#pdp"]
+  },
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
   },

styles/css/vtex.breadcrumb.css

@@ -22,11 +22,15 @@
     margin-right: 360px;
   }
 }
+.container--breadcrumb .caretIcon--breadcrumb {
+  color: #929292;
+}
 .container--breadcrumb .homeIcon--breadcrumb {
   display: none;
 }
 .container--breadcrumb .homeLink--breadcrumb {
   vertical-align: top;
+  padding-left: 0;
 }
 .container--breadcrumb .homeLink--breadcrumb::after {
   content: "Home";
@@ -34,15 +38,25 @@
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
+  color: #929292;
 }
 .container--breadcrumb .link--breadcrumb--1 {
+  padding-right: 0;
   font-size: 0;
+  color: #929292;
 }
 .container--breadcrumb .link--breadcrumb--1::after {
   content: "Sapatos";
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
+  color: #929292;
+}
+.container--breadcrumb .link--breadcrumb--2 {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
 }
 .container--breadcrumb .termArrow--breadcrumb,
 .container--breadcrumb .term--breadcrumb {

styles/css/vtex.product-quantity.css

@@ -18,22 +18,15 @@
 }
 
 .hideDecorators {
-  border: 1px solid red;
   border-left: none;
   border-right: none;
   height: 49px;
 }
 
 .quantitySelectorContainer--quantidade {
-  margin-right: 10px;
-  margin-bottom: 16px;
   padding: 0;
   height: 100%;
-}
+  margin: 0;
-@media screen and (max-width: 768px) {
-  .quantitySelectorContainer--quantidade {
-    margin: 0 0 10px 0;
-  }
 }
 
 :global(.vtex-numeric-stepper__input) {

styles/css/vtex.product-summary.css

@@ -11,7 +11,6 @@
   text-align: center;
   padding-top: 8px;
   padding-bottom: 8px;
-  /*min-height: 66px;*/
 }
 .nameContainer .productBrand {
   font-weight: 400;

styles/css/vtex.slider-layout.css

@@ -83,17 +83,17 @@
   }
 }
 
-.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderRightArrow) {
+.sliderLayoutContainer .sliderRightArrow--prateleira {
   visibility: hidden;
 }
-.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderRightArrow)::after {
+.sliderLayoutContainer .sliderRightArrow--prateleira::after {
   visibility: visible;
   content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-caina.png);
 }
-.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderLeftArrow) {
+.sliderLayoutContainer .sliderLeftArrow--prateleira {
   visibility: hidden;
 }
-.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderLeftArrow)::before {
+.sliderLayoutContainer .sliderLeftArrow--prateleira::before {
   visibility: visible;
   content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-left-caina.png);
 }

styles/css/vtex.store-components.css

@@ -52,18 +52,6 @@
   width: 100% !important;
 }
 
-/*
-.swiper-slide-active {
-  width: 100%;
-}*/
-/*:global(.vtex-store-components-3-x-productImageTag) {
-  width: 664px;
-  height: 664px;
-}
-
-.caretIcon {
-  display: none;
-}*/
 .productBrand--quickview {
   font-weight: 300;
   font-size: 20px;
@@ -296,6 +284,11 @@
 .shippingTableHead .shippingTableHeadDeliveryName {
   width: 110px;
 }
+@media screen and (max-width: 350px) {
+  .shippingTableHead .shippingTableHeadDeliveryName {
+    width: 90px;
+  }
+}
 .shippingTableHead .shippingTableHeadDeliveryEstimate {
   order: 3;
 }
@@ -304,6 +297,11 @@
   width: 110px;
   font-size: 0;
 }
+@media screen and (max-width: 350px) {
+  .shippingTableHead .shippingTableHeadDeliveryPrice {
+    width: 56px;
+  }
+}
 .shippingTableHead .shippingTableHeadDeliveryPrice::after {
   content: "FRETE";
   font-size: 14px;
@@ -324,12 +322,34 @@
   padding: 15px 4px 0 0;
 }
 .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
+  min-width: 112px;
   width: 110px;
 }
+@media screen and (max-width: 350px) {
+  .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
+    width: 90px;
+    min-width: 90px;
+    padding-right: 0;
+  }
+}
 .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
   width: 110px;
 }
+@media screen and (max-width: 768px) {
+  .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
+    width: 70px;
+    min-width: 72px;
+  }
+}
+@media screen and (max-width: 350px) {
+  .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
+    min-width: 56px;
+    width: 56px;
+    padding-right: 0;
+  }
+}
 .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
+  padding-right: 0;
   order: 3;
 }
 
@@ -345,6 +365,10 @@
   }
 }
 
+.productImage--description-imagem {
+  display: flex;
+}
+
 .container--descricao {
   margin: 0;
 }
@@ -374,17 +398,6 @@
   }
 }
 
-/*.content--descricao {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 22px;
-  color: $color-gray6;
-
-  @media screen and (max-width: 1024px) {
-    font-size: 14px;
-    line-height: 19px;
-  }
-}*/
 .productDescriptionText--descricao {
   font-weight: 400;
   font-size: 16px;

styles/css/vtex.tab-layout.css

@@ -40,13 +40,14 @@
 
 .listItem {
   background-color: transparent;
-  padding: 0;
+  padding: 0 14px 0 14px;
   margin: 0;
   height: 42px;
 }
 @media screen and (max-width: 1024px) {
   .listItem {
     margin: 5px 0;
+    padding: 0;
   }
 }
 .listItem :global(.vtex-button) {
@@ -79,23 +80,26 @@
 }
 
 .listItemActive {
-  /*border-bottom: 2px solid $color-black-100;*/
+  border-bottom: 2px solid #000000;
 }
-.listItemActive :global(.vtex-button__label) {
+@media screen and (min-width: 1921px) {
-  color: #000000;
+  .listItemActive {
-  margin: 0;
+    border-bottom: 3px solid #000000;
-  padding: 0;
+  }
 }
 @media screen and (max-width: 1024px) {
   .listItemActive {
     border: none;
   }
 }
+.listItemActive :global(.vtex-button__label) {
+  color: #000000;
+  margin: 0;
+  padding: 0;
+}
 
 .listItemActive--descricao {
   border-bottom: 2px solid #000000;
-  padding-left: 14px;
-  padding-right: 14px;
 }
 @media screen and (min-width: 1921px) {
   .listItemActive--descricao {

styles/sass/pages/product/vtex.add-to-cart-button.scss

@@ -1 +0,0 @@
-

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -10,6 +10,9 @@
     margin-left: 360px;
     margin-right: 360px;
   }
+  .caretIcon--breadcrumb {
+    color: $color-gray6;
+  }
 
   .homeIcon--breadcrumb {
     display: none;
@@ -17,26 +20,38 @@
 
   .homeLink--breadcrumb {
     vertical-align: top;
+    padding-left: 0;
     &::after {
       content: "Home";
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
       line-height: 19px;
+      color: $color-gray6;
     }
   }
 
   .link--breadcrumb--1 {
+    padding-right: 0;
     font-size: 0;
+    color: $color-gray6;
 
     &::after {
       content: "Sapatos";
       font-weight: 400;
       font-size: 14px;
       line-height: 19px;
+      color: $color-gray6;
     }
   }
 
+  .link--breadcrumb--2 {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: $color-gray6;
+  }
+
   .termArrow--breadcrumb,
   .term--breadcrumb {
     display: none;

styles/sass/pages/product/vtex.product-quantity.scss

@@ -9,20 +9,15 @@
 }
 
 .hideDecorators {
-  border: 1px solid red;
   border-left: none;
   border-right: none;
   height: 49px;
 }
 
 .quantitySelectorContainer--quantidade {
-  margin-right: 10px;
-  margin-bottom: 16px;
   padding: 0;
   height: 100%;
-  @media screen and (max-width: 768px) {
+  margin: 0;
-    margin: 0 0 10px 0;
-  }
 }
 
 :global(.vtex-numeric-stepper__input) {

styles/sass/pages/product/vtex.product-summary.scss

@@ -2,7 +2,6 @@
   text-align: center;
   padding-top: 8px;
   padding-bottom: 8px;
-  /*min-height: 66px;*/
 
   .productBrand {
     font-weight: 400;

styles/sass/pages/product/vtex.slider-layout.scss

@@ -67,14 +67,14 @@
 
 .sliderLayoutContainer {
   //ARROWS CUSTOM
-  :global(.vtex-slider-layout-0-x-sliderRightArrow) {
+  .sliderRightArrow--prateleira {
     visibility: hidden;
     &::after {
       visibility: visible;
       content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-caina.png);
     }
   }
-  :global(.vtex-slider-layout-0-x-sliderLeftArrow) {
+  .sliderLeftArrow--prateleira {
     visibility: hidden;
     &::before {
       visibility: visible;

styles/sass/pages/product/vtex.store-components.scss

@@ -41,19 +41,6 @@
 .productImagesGallerySlide--images-container {
   width: 100% !important;
 }
-/*
-.swiper-slide-active {
-  width: 100%;
-}*/
-
-/*:global(.vtex-store-components-3-x-productImageTag) {
-  width: 664px;
-  height: 664px;
-}
-
-.caretIcon {
-  display: none;
-}*/
 
 //NOME DO PRODUTO
 .productBrand--quickview {
@@ -326,6 +313,9 @@
 
   .shippingTableHeadDeliveryName {
     width: 110px;
+    @media screen and (max-width: 350px) {
+      width: 90px;
+    }
   }
 
   .shippingTableHeadDeliveryEstimate {
@@ -336,6 +326,9 @@
     display: flex;
     width: 110px;
     font-size: 0;
+    @media screen and (max-width: 350px) {
+      width: 56px;
+    }
     &::after {
       content: "FRETE";
       font-size: 14px;
@@ -361,14 +354,30 @@
     }
 
     .shippingTableCellDeliveryName {
+      min-width: 112px;
       width: 110px;
+      @media screen and (max-width: 350px) {
+        width: 90px;
+        min-width: 90px;
+        padding-right: 0;
+      }
     }
 
     .shippingTableCellDeliveryPrice {
       width: 110px;
+      @media screen and (max-width: 768px) {
+        width: 70px;
+        min-width: 72px;
+      }
+      @media screen and (max-width: 350px) {
+        min-width: 56px;
+        width: 56px;
+        padding-right: 0;
+      }
     }
 
     .shippingTableCellDeliveryEstimate {
+      padding-right: 0;
       order: 3;
     }
   }
@@ -387,6 +396,10 @@
   }
 }
 
+.productImage--description-imagem {
+  display: flex;
+}
+
 .container--descricao {
   margin: 0;
 }
@@ -410,17 +423,7 @@
     font-size: 20px;
   }
 }
-/*.content--descricao {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 22px;
-  color: $color-gray6;
 
-  @media screen and (max-width: 1024px) {
-    font-size: 14px;
-    line-height: 19px;
-  }
-}*/
 .productDescriptionText--descricao {
   font-weight: 400;
   font-size: 16px;

styles/sass/pages/product/vtex.tab-layout.scss

@@ -28,11 +28,12 @@
 
 .listItem {
   background-color: transparent;
-  padding: 0;
+  padding: 0 14px 0 14px;
   margin: 0;
   height: 42px;
   @media screen and (max-width: 1024px) {
     margin: 5px 0;
+    padding: 0;
   }
 
   :global(.vtex-button) {
@@ -64,22 +65,24 @@
 }
 
 .listItemActive {
-  /*border-bottom: 2px solid $color-black-100;*/
+  border-bottom: 2px solid $color-black-100;
+  @media screen and (min-width: 1921px) {
+    border-bottom: 3px solid $color-black-100;
+  }
+  @media screen and (max-width: 1024px) {
+    border: none;
+  }
 
   :global(.vtex-button__label) {
     color: $color-black-100;
     margin: 0;
     padding: 0;
   }
-  @media screen and (max-width: 1024px) {
-    border: none;
-  }
 }
 
 .listItemActive--descricao {
   border-bottom: 2px solid $color-black-100;
-  padding-left: 14px;
+
-  padding-right: 14px;
   @media screen and (min-width: 1921px) {
     border-bottom: 3px solid $color-black-100;
   }