Merge pull request 'feature/product-page' (#2) from feature/product-page into master

Reviewed-on: #2

react/components/Pix/Pix.module.css

@@ -3,6 +3,7 @@
   gap: 26px;
   align-items: center;
   margin-top: 8px;
+  width: 197px;
 }
 
 .image {

store/blocks/pdp/product-tablayout.jsonc

@@ -1,4 +1,9 @@
 {
+  "html#tab-layout": {
+    "props": { "testId": "product-description" },
+    "children": ["tab-layout#details"]
+  },
+
   "tab-layout#details": {
     "children": ["tab-list#details", "tab-content#details"],
     "props": {

store/blocks/pdp/product.jsonc

@@ -3,7 +3,7 @@
     "children": [
       "html#breadcontainer",
       "condition-layout.product#availability",
-      "tab-layout#details",
+      "html#tab-layout",
       "list-context.product-list#prateleira",
       "newsletter"
     ]
@@ -60,6 +60,7 @@
     },
     "children": ["breadcrumb#pdp"]
   },
+
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
   },
@@ -68,6 +69,7 @@
       "text": "##### Product Specifications"
     }
   },
+
   "product-description": {
     "props": {
       "marginBottom": 7,
@@ -151,19 +153,33 @@
       "rowGap": 0
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
       "html#codigo",
       "product-rating-summary",
-      "flex-layout.row#selling-price",
+      "html#selling-price",
-      "product-installments",
+      "html#installments",
       "html#pix",
       "html#skus",
       "html#qtd-btn",
       "availability-subscriber",
-      "shipping-simulator"
+      "html#shipping-simulator"
     ]
   },
 
+  "html#installments": {
+    "props": {
+      "testId": "product-installments"
+    },
+    "children": ["product-installments"]
+  },
+
+  "html#selling-price": {
+    "props": {
+      "testId": "product-price"
+    },
+    "children": ["flex-layout.row#selling-price"]
+  },
+
   "product-installments": {
     "props": {
       "installmentsCriteria": "max-quantity-without-interest",
@@ -172,6 +188,13 @@
     }
   },
 
+  "html#product-name": {
+    "props": {
+      "testId": "product-name"
+    },
+    "children": ["flex-layout.row#product-name"]
+  },
+
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3,
@@ -182,6 +205,7 @@
 
   "html#codigo": {
     "props": {
+      "testId": "product-code",
       "blockClass": "codigo"
     },
     "children": ["product-identifier.product"]
@@ -291,5 +315,11 @@
     "props": {
       "blockClass": "frete"
     }
+  },
+  "html#shipping-simulator": {
+    "props": {
+      "testId": "shipping-simulator"
+    },
+    "children": ["shipping-simulator"]
   }
 }

styles/css/vtex.product-summary.css

@@ -28,3 +28,7 @@
 .spacer {
   display: none;
 }
+
+.element {
+  padding: 0;
+}

styles/css/vtex.rich-text.css

@@ -9,7 +9,17 @@
 /* Grid breakpoints */
 .container--title-prateleira {
   margin-top: 16px;
-  margin-bottom: 12px;
+  margin-bottom: 32px;
+}
+@media screen and (max-width: 1024px) {
+  .container--title-prateleira {
+    margin-bottom: 24px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .container--title-prateleira {
+    margin-bottom: 16px;
+  }
 }
 .container--title-prateleira .paragraph--title-prateleira {
   margin: 0;

styles/css/vtex.store-components.css

@@ -63,6 +63,11 @@
   display: flex;
   flex-direction: column-reverse;
   margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.skuSelectorNameContainer {
+  margin: 0;
 }
 
 .frameAround--skus {
@@ -70,9 +75,14 @@
 }
 
 .skuSelectorOptionsList {
-  margin-left: -5px;
+  display: flex;
+  margin-left: 0;
+  gap: 16px;
 }
 
+.skuSelectorSubcontainer--tamanho {
+  margin-bottom: 10px;
+}
 .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
   font-size: 0;
 }
@@ -85,6 +95,10 @@
   color: color-gray6;
 }
 
+.skuSelectorItem {
+  margin: 0;
+}
+
 .skuSelectorItemTextValue--skus {
   font-weight: 400;
   font-size: 14px;
@@ -111,6 +125,9 @@
   justify-content: center;
   display: flex;
 }
+.skuSelectorItem--skus--selected .skuSelectorInternalBox--skus .diagonalCross--skus {
+  background-image: linear-gradient(to top right, transparent 44%, #000 48%, transparent 52%);
+}
 .skuSelectorItem--skus--selected .skuSelectorItemTextValue--skus {
   font-weight: 400;
   font-size: 14px;
@@ -118,6 +135,9 @@
   color: #000000;
 }
 
+.skuSelectorSubcontainer--cor {
+  margin: 0;
+}
 .skuSelectorSubcontainer--cor .skuSelectorName {
   font-size: 0;
 }
@@ -146,6 +166,10 @@
   height: 48px;
 }
 
+.skuSelectorItem--skus--selected .skuSelectorInternalBox--skus .diagonalCross--skus {
+  background-image: linear-gradient(to top right, transparent 44%, #000 48%, transparent 52%);
+}
+
 .diagonalCross--skus {
   transform: rotate(80deg);
   background-image: linear-gradient(to top right, transparent 44%, #d5d5d5 48%, transparent 52%);

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

@@ -18,3 +18,7 @@
 .spacer {
   display: none;
 }
+
+.element {
+  padding: 0;
+}

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

@@ -1,6 +1,12 @@
 .container--title-prateleira {
   margin-top: 16px;
-  margin-bottom: 12px;
+  margin-bottom: 32px;
+  @media screen and (max-width: 1024px) {
+    margin-bottom: 24px;
+  }
+  @media screen and (max-width: 768px) {
+    margin-bottom: 16px;
+  }
 
   .paragraph--title-prateleira {
     margin: 0;

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

@@ -55,6 +55,11 @@
   display: flex;
   flex-direction: column-reverse;
   margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.skuSelectorNameContainer {
+  margin: 0;
 }
 
 .frameAround--skus {
@@ -62,10 +67,14 @@
 }
 
 .skuSelectorOptionsList {
-  margin-left: -5px;
+  display: flex;
+  margin-left: 0;
+  gap: 16px;
 }
 
 .skuSelectorSubcontainer--tamanho {
+  margin-bottom: 10px;
+
   .skuSelectorNameContainer {
     .skuSelectorTextContainer {
       .skuSelectorName {
@@ -84,6 +93,10 @@
   }
 }
 
+.skuSelectorItem {
+  margin: 0;
+}
+
 .skuSelectorItemTextValue--skus {
   font-weight: 400;
   font-size: 14px;
@@ -101,6 +114,7 @@
   display: flex;
 }
 
+//SKU INDISPONIVEL SELECIONADO
 .skuSelectorItem--skus--selected {
   .skuSelectorInternalBox--skus {
     border: 2px solid $color-black-100;
@@ -110,6 +124,15 @@
     align-items: center;
     justify-content: center;
     display: flex;
+
+    .diagonalCross--skus {
+      background-image: linear-gradient(
+        to top right,
+        transparent 44%,
+        #000 48%,
+        transparent 52%
+      );
+    }
   }
 
   .skuSelectorItemTextValue--skus {
@@ -121,6 +144,8 @@
 }
 
 .skuSelectorSubcontainer--cor {
+  margin: 0;
+
   .skuSelectorName {
     font-size: 0;
 
@@ -159,6 +184,20 @@
   }
 }
 
+//SKU INDISPONIVEL SELECIONADO
+.skuSelectorItem--skus--selected {
+  .skuSelectorInternalBox--skus {
+    .diagonalCross--skus {
+      background-image: linear-gradient(
+        to top right,
+        transparent 44%,
+        #000 48%,
+        transparent 52%
+      );
+    }
+  }
+}
+
 .diagonalCross--skus {
   transform: rotate(80deg);
   background-image: linear-gradient(
@@ -178,7 +217,6 @@
 }
 
 //FRETE
-
 .shippingContainer {
   display: flex;
   align-items: end;