feat: cria e estiliza os blocos da descrição do produto

react/components/Html/styles.css

@@ -13,8 +13,8 @@
 @media screen and (min-width: 1920px) {
   [class*="html--product-main"],
   [class*="html--product-availability"] {
-    width: 71.2%;
+    width: 71.875%;
-    grid-template-columns: 50.5% 49.5%;
+    grid-template-columns: 50% 50%;
   }
 }
 @media screen and (max-width: 1024px) {
@@ -165,6 +165,45 @@
 }
 
 [class*="html--description"] {
-  position: relative;
+  width: 100%;
-  top: 9px;
+  margin-left: 32px;
+}
+
+[class*="html--product-description"] {
+  display: flex;
+}
+
+[class*="html--product-description"] .contentItem{
+  display: flex;
+  flex-direction: row;
+}
+
+[class*="html--product-description"] button {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  background-color: transparent;
+  border: transparent;
+  color: #BFBFBF;
+  height: 38px;
+}
+[class*="html--product-description"] button:hover {
+  border: transparent;
+  background-color: transparent;
+  color: #929292;
+
+  transform: translateY(1px);
+}
+
+[class*="html--description2"] h2::after {
+  content: " 2";
+}
+[class*="html--description3"] h2::after {
+  content: " 3";
+}
+[class*="html--description4"] h2::after {
+  content: " 4";
+}
+[class*="html--description5"] h2::after {
+  content: " 5";
 }

store/blocks/pdp/product.jsonc

@@ -3,7 +3,7 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "html#description",
+      "html#product-description",
       //"html#specifications-title",
       //"product-specification-group#table",
       "shelf.relatedProducts",
@@ -20,17 +20,25 @@
     "children": ["breadcrumb"]
   },
 
-  "html#specifications-title": {
+  //"html#specifications-title": {
-    "props": {
+  //  "props": {
-      "tag": "div",
+  //    "tag": "div",
-      "blockClass": "specifications-title"
+  //    "blockClass": "specifications-title"
-    },
+  //  },
-    "children": ["rich-text#specifications"]
+  //  "children": ["rich-text#specifications"]
-  },
+  //},
 
-  "rich-text#specifications": {
+  //"rich-text#specifications": {
+  //  "props": {
+  //    "text": "##### Product Specifications"
+  //  }
+  //},
+
+  "product-images#description": {
     "props": {
-      "text": "##### Product Specifications"
+      "blockClass": "image-description",
+      "aspectRatio": "1:1",
+      "displayMode": "first-image"
     }
   },
 
@@ -41,6 +49,34 @@
     },
     "children": ["product-description"]
   },
+  "html#description2": {
+    "props": {
+      "tag": "div",
+      "blockClass": "description2"
+    },
+    "children": ["product-description"]
+  },
+  "html#description3": {
+    "props": {
+      "tag": "div",
+      "blockClass": "description3"
+    },
+    "children": ["product-description"]
+  },
+  "html#description4": {
+    "props": {
+      "tag": "div",
+      "blockClass": "description4"
+    },
+    "children": ["product-description"]
+  },
+  "html#description5": {
+    "props": {
+      "tag": "div",
+      "blockClass": "description5"
+    },
+    "children": ["product-description"]
+  },
 
   "condition-layout.product#availability": {
     "props": {
@@ -269,5 +305,112 @@
         "Pinterest": true
       }
     }
+  },
+
+  "html#product-description": {
+    "props": {
+      "blockClass": "product-description",
+      "tag": "section",
+      "testId": "product-description"
+    },
+    "children": ["tab-layout#product"]
+  },
+
+  "tab-layout#product": {
+    "props": {
+      "defaultActiveTabId": "product1",
+      "blockClass": "product"
+    },
+    "children": ["tab-list#product", "tab-content#product"]
+  },
+
+  "tab-list#product": {
+    "props": {
+      "blockClass": "list-product"
+    },
+    "children": [
+      "tab-list.item#product1",
+      "tab-list.item#product2",
+      "tab-list.item#product3",
+      "tab-list.item#product4",
+      "tab-list.item#product5"
+    ]
+  },
+
+  "tab-list.item#product1": {
+    "props": {
+      "tabId": "product1",
+      "label": "Descrição",
+      "defaultActiveTab": true
+    }
+  },
+  "tab-list.item#product2": {
+    "props": {
+      "tabId": "product2",
+      "label": "Descrição 2"
+    }
+  },
+  "tab-list.item#product3": {
+    "props": {
+      "tabId": "product3",
+      "label": "Descrição 3"
+    }
+  },
+  "tab-list.item#product4": {
+    "props": {
+      "tabId": "product4",
+      "label": "Descrição 4"
+    }
+  },
+  "tab-list.item#product5": {
+    "props": {
+      "tabId": "product5",
+      "label": "Descrição 5"
+    }
+  },
+
+  "tab-content#product": {
+    "props": {
+      "blockClass": "content-product"
+    },
+    "children": [
+      "tab-content.item#product1",
+      "tab-content.item#product2",
+      "tab-content.item#product3",
+      "tab-content.item#product4",
+      "tab-content.item#product5"
+    ]
+  },
+
+  "tab-content.item#product1": {
+    "props": {
+      "tabId": "product1"
+    },
+    "children": ["product-images#description", "html#description"]
+  },
+  "tab-content.item#product2": {
+    "props": {
+      "tabId": "product2"
+    },
+    "children": ["product-images#description", "html#description2"]
+  },
+  "tab-content.item#product3": {
+    "props": {
+      "tabId": "product3"
+    },
+    "children": ["product-images#description", "html#description3"]
+  },
+  "tab-content.item#product4": {
+    "props": {
+      "tabId": "product4"
+    },
+    "children": ["product-images#description", "html#description4"]
+  },
+  "tab-content.item#product5": {
+    "props": {
+      "tabId": "product5"
+    },
+    "children": ["product-images#description", "html#description5"]
   }
+
 }

styles/css/vtex.breadcrumb.css

@@ -14,7 +14,7 @@
 }
 @media screen and (min-width: 1920px) {
   .container {
-    width: 71.2%;
+    width: 71.875%;
   }
 }
 @media screen and ((min-width: 769) and (max-width: 1024px)) {

styles/css/vtex.store-components.css

@@ -64,21 +64,6 @@
   }
 }
 
-/*
-.productDescriptionTitle {
-  font-weight: 400;
-  font-size: 24px;
-  line-height: 32px;
-  color: #575757;
-}
-
-.productDescriptionText {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 22px;
-  color: #929292;
-}
-*/
 .skuSelectorNameContainer {
   margin: 0;
 }
@@ -423,4 +408,31 @@
 
 .subscriberContainer {
   width: 60.07%;
+}
+
+.productDescriptionTitle {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+  height: 40px;
+  margin-bottom: 8px;
+}
+
+.productDescriptionText {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+.listContainer--list-product {
+  display: flex;
+  justify-content: space-between;
+}
+
+.productImageTag--image-description--main {
+  width: 100% !important;
+  margin: 0;
+  display: inline-block;
 }

styles/css/vtex.tab-layout.css

@@ -0,0 +1,80 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.contentItem {
+  display: flex;
+}
+
+.listContainer--list-product {
+  width: 94.4444%;
+  justify-content: space-around;
+  margin-left: auto;
+  margin-right: auto;
+  border-bottom: 1px solid #BFBFBF;
+}
+@media screen and (min-width: 1920px) {
+  .listContainer--list-product {
+    width: 71.875%;
+  }
+}
+@media screen and ((min-width: 769) and (max-width: 1024px)) {
+  .listContainer--list-product {
+    width: 92.1875%;
+  }
+}
+@media screen and (max-width: 768px) {
+  .listContainer--list-product {
+    width: 79%;
+  }
+}
+
+.contentContainer--content-product {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 32px;
+}
+@media screen and (min-width: 1920px) {
+  .contentContainer--content-product {
+    width: 69.375%;
+  }
+}
+@media screen and ((min-width: 769) and (max-width: 1024px)) {
+  .contentContainer--content-product {
+    width: 92.1875%;
+  }
+}
+@media screen and (max-width: 768px) {
+  .contentContainer--content-product {
+    width: 79%;
+  }
+}
+
+.listItem {
+  margin: 0;
+  padding: 0;
+}
+
+.listItemActive {
+  border-bottom: 2px solid #000000;
+}
+.listItemActive :last-child {
+  background-color: transparent;
+  color: #000000;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+.listItemActive :last-child:hover {
+  border-bottom: none;
+  color: #000000;
+  transform: none;
+}

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

@@ -4,7 +4,7 @@
   padding: 0 0 16px 0;
 
   @media screen and (min-width: 1920px) {
-    width: 71.2%;
+    width: 71.875%;
   }
   @media screen and ((min-width: 769) and (max-width: 1024px)) {
     width: 92.1875%;

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

@@ -52,22 +52,6 @@
   }
 }
 
-/*
-.productDescriptionTitle {
-  font-weight: 400;
-  font-size: 24px;
-  line-height: 32px;
-  color: #575757;
-}
-
-.productDescriptionText {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 22px;
-  color: #929292;
-}
-*/
-
 .skuSelectorNameContainer {
   margin: 0;
 }
@@ -444,3 +428,31 @@
 .subscriberContainer {
   width: 60.07%;
 }
+
+.productDescriptionTitle {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+  height: 40px;
+  margin-bottom: 8px;
+}
+
+.productDescriptionText {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+
+  .listContainer--list-product {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .productImageTag--image-description--main {
+    width: 100% !important;
+    margin: 0;
+    display: inline-block;
+  }

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

@@ -0,0 +1,69 @@
+.contentItem {
+  display: flex;
+}
+
+.listContainer--list-product{
+  width: 94.4444%;
+  justify-content: space-around;
+  margin-left: auto;
+  margin-right: auto;
+
+  border-bottom: 1px solid #BFBFBF;
+
+  @media screen and (min-width: 1920px) {
+    width: 71.875%;
+  }
+
+  @media screen and ((min-width: 769) and (max-width: 1024px)) {
+    width: 92.1875%;
+  }
+
+  @media screen and (max-width: 768px) {
+    width: 79%;
+  }
+}
+
+.contentContainer--content-product {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+
+  padding-top: 32px;
+
+  @media screen and (min-width: 1920px) {
+    width: 69.375%;
+  }
+
+  @media screen and ((min-width: 769) and (max-width: 1024px)) {
+    width: 92.1875%;
+  }
+
+  @media screen and (max-width: 768px) {
+    width: 79%;
+  }
+}
+
+.listItem {
+  margin: 0;
+  padding: 0;
+}
+
+.listItemActive {
+  border-bottom: 2px solid #000000;
+
+  :last-child {
+    background-color: transparent;
+    color: #000000;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 38px;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+
+    &:hover {
+      border-bottom: none;
+      color: #000000;
+      transform: none;
+    }
+  }
+}