refactor: ajusta testes ids

react/components/Html/styles.css

@@ -38,6 +38,11 @@
   width: 100%;
 }
 
+[class*="html--product-summary"] {
+  display: flex;
+  flex-direction: column;
+}
+
 @media (min-width: 1921px) {
   [class*="html--product-quantity"] {
     width: 16.712%;

store/blocks/pdp/product-description.jsonc

@@ -2,7 +2,7 @@
   "html#productDescription": {
     "props": {
       "blockClass": "productDescription",
-      "testId": "tab-layout"
+      "testId": "product-description"
     },
     "children": ["tab-layout#productDescription"]
   },

store/blocks/pdp/product.jsonc

@@ -122,11 +122,11 @@
       "rowGap": 0
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
-      "product-identifier.product",
+      "html#codigo",
       "product-rating-summary",
-      "flex-layout.row#selling-price",
+      "html#selling-price",
-      "product-installments",
+      "html#product-installments",
       "html#pix",
       "html#sku-selector",
       "product-gifts",
@@ -138,6 +138,13 @@
     ]
   },
 
+  "html#selling-price": {
+    "props": {
+      "testId": "product-price"
+    },
+    "children": ["flex-layout.row#selling-price"]
+  },
+
   "html#pix": {
     "props": {
       "blockClass": "pix",
@@ -154,6 +161,13 @@
     "children": ["shipping-simulator"]
   },
 
+  "html#product-name": {
+    "props": {
+      "testId": "product-name"
+    },
+    "children": ["flex-layout.row#product-name"]
+  },
+
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3
@@ -161,6 +175,13 @@
     "children": ["vtex.store-components:product-name"]
   },
 
+  "html#codigo": {
+    "props": {
+      "testId": "product-code"
+    },
+    "children": ["product-identifier.product"]
+  },
+
   "product-identifier.product": {
     "props": {
       "label": "hide",
@@ -168,6 +189,13 @@
     }
   },
 
+  "html#product-installments": {
+    "props": {
+      "testId": "product-installments"
+    },
+    "children": ["product-installments"]
+  },
+
   "product-installments": {
     "props": {
       "markers": ["discount"],
@@ -311,10 +339,18 @@
     "children": [
       "product-summary-image",
       "product-summary-name",
-      "product-price"
+      "product-list-price",
+      "product-selling-price"
     ]
   },
 
+  "product-list-price": {
+    "props": {
+      "blockClass": "product-list-price",
+      "message": "de {listPriceValue} por"
+    }
+  },
+
   "html#slider-layout": {
     "props": {
       "blockClass": "shelf",

styles/css/vtex.product-price.css

@@ -113,3 +113,36 @@
   line-height: 38px;
   color: #000000;
 }
+
+.listPrice {
+  margin-top: 8px;
+}
+
+.listPrice--product-list-price {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #bababa;
+  text-decoration: line-through;
+}
+
+.listPriceValue {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #bababa;
+}
+
+.sellingPriceValue {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  color: #000000;
+}
+
+.sellingPrice--hasListPrice {
+  margin-bottom: 32px;
+}

styles/css/vtex.rich-text.css

@@ -8,7 +8,7 @@
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
 /* Grid breakpoints */
-.headingLevel1--shelfTitleText {
+.heading-level-1 {
   font-style: normal;
   font-weight: 400;
   font-size: 24px;
@@ -16,7 +16,7 @@
 }
 
 @media (max-width: 1024px) {
-  .headingLevel1--shelfTitleText {
+  .heading-level-1 {
-    margin-top: 32px;
+    margin-top: 16px;
   }
 }

styles/css/vtex.store-components.css

@@ -499,6 +499,14 @@
   margin: 0;
 }
 
+.productDescriptionTitle {
+  font-size: 24px;
+}
+
+.productDescriptionText {
+  font-size: 16px;
+}
+
 @media (min-width: 1921px) {
   .container--pageProduct {
     width: 100%;
@@ -520,6 +528,13 @@
     width: 100%;
     max-width: 100%;
   }
+  .productDescriptionTitle {
+    font-size: 20px;
+  }
+  .productDescriptionText {
+    padding-bottom: 16px;
+    font-size: 14px;
+  }
 }
 @media (max-width: 492px) {
   .shippingContainer {

styles/css/vtex.tab-layout.css

@@ -85,5 +85,6 @@
     flex-direction: column;
     margin-top: 15px;
     gap: 16px;
+    border-bottom: 1px solid #cccccc;
   }
 }

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

@@ -104,3 +104,36 @@
   line-height: 38px;
   color: $color-black;
 }
+
+.listPrice {
+  margin-top: 8px;
+}
+
+.listPrice--product-list-price {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: $color-gray14;
+  text-decoration: line-through;
+}
+
+.listPriceValue {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: $color-gray14;
+}
+
+.sellingPriceValue {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  color: $color-black;
+}
+
+.sellingPrice--hasListPrice {
+  margin-bottom: 32px;
+}

styles/sass/pages/product/vtex.rich-text.scss

@@ -1,4 +1,4 @@
-.headingLevel1--shelfTitleText {
+.heading-level-1 {
   font-style: normal;
   font-weight: 400;
   font-size: 24px;
@@ -6,7 +6,7 @@
 }
 
 @media (max-width: 1024px) {
-  .headingLevel1--shelfTitleText {
+  .heading-level-1 {
-    margin-top: 32px;
+    margin-top: 16px;
   }
 }

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

@@ -515,6 +515,14 @@
   margin: 0;
 }
 
+.productDescriptionTitle {
+  font-size: 24px;
+}
+
+.productDescriptionText {
+  font-size: 16px;
+}
+
 @media (min-width: 1921px) {
   .container--pageProduct {
     width: 100%;
@@ -542,6 +550,15 @@
       max-width: 100%;
     }
   }
+
+  .productDescriptionTitle {
+    font-size: 20px;
+  }
+
+  .productDescriptionText {
+    padding-bottom: 16px;
+    font-size: 14px;
+  }
 }
 
 @media (max-width: 492px) {

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

@@ -80,5 +80,6 @@
     flex-direction: column;
     margin-top: 15px;
     gap: 16px;
+    border-bottom: 1px solid $color-gray6;
   }
 }

styles/sass/utils/_vars.scss

@@ -17,6 +17,7 @@ $color-gray10: #bfbfbf;
 $color-gray11: #ffffff;
 $color-gray12: #868686;
 $color-gray13: #989898;
+$color-gray14: #bababa;
 
 $color-blue: #4267b2;