Merge branch 'feature/product-description' into development

store/blocks/pdp/product.jsonc

@@ -95,31 +95,31 @@
     "props": {
       "tabId": "description1"
     },
-    "children": ["product-description"]
+    "children": ["product-images", "product-description"]
   },
   "tab-content.item#description2": {
     "props": {
       "tabId": "description2"
     },
-    "children": ["product-description"]
+    "children": ["product-images", "product-description"]
   },
   "tab-content.item#description3": {
     "props": {
       "tabId": "description3"
     },
-    "children": ["product-description"]
+    "children": ["product-images", "product-description"]
   },
   "tab-content.item#description4": {
     "props": {
       "tabId": "description4"
     },
-    "children": ["product-description"]
+    "children": ["product-images", "product-description"]
   },
   "tab-content.item#description5": {
     "props": {
       "tabId": "description5"
     },
-    "children": ["product-description"]
+    "children": ["product-images", "product-description"]
   },
 
   "flex-layout.row#specifications-title": {
@@ -267,31 +267,6 @@
     ]
   },
   
-  // "flex-layout.col#right-col": {
-  //   "props": {
-  //     "width": "50%",
-  //     "preventVerticalStretch": true,
-  //     "blockClass": "right-col"
-  //   },
-  //   "children": [
-  //     "flex-layout.row#product-name",
-  //     "product-identifier.product",
-  //     // "product-rating-summary",
-  //     "flex-layout.row#selling-price",
-  //     "product-installments",
-  //     // "flex-layout.row#list-price-savings",
-  //     "html#pix-price",
-  //     "html#sku-selector",
-  //     "product-quantity",
-  //     // "product-assembly-options",
-  //     "product-gifts",
-  //     "flex-layout.row#buy-button",
-  //     "availability-subscriber",
-  //     "shipping-simulator",
-  //     "share#default"
-  //   ]
-  // },
-
   "flex-layout.col#right-col-availability": {
     "props": {
       "width": "50%",

styles/css/vtex.store-components.css

@@ -236,3 +236,48 @@
   line-height: 25px;
   padding: 12px 0;
 }
+
+/* ----- PRODUCT-DESCRIPTION ----- */
+.productDescriptionContainer .productDescriptionTitle {
+  margin-bottom: 8px;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+}
+@media only screen and (min-width: 1920px) {
+  .productDescriptionContainer .productDescriptionTitle {
+    margin-bottom: 16px;
+    font-size: 32px;
+  }
+}
+@media only screen and (max-width: 1024px) {
+  .productDescriptionContainer .productDescriptionTitle {
+    font-size: 20px;
+  }
+}
+.productDescriptionContainer .productDescriptionText {
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+@media only screen and (min-width: 1920px) {
+  .productDescriptionContainer .productDescriptionText {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
+@media only screen and (max-width: 1024px) {
+  .productDescriptionContainer .productDescriptionText {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}
+.productDescriptionContainer .showMoreButton {
+  width: 100%;
+  margin: 0;
+  padding: 12px 0;
+  font-weight: 600;
+  font-size: 18px;
+  color: #ffffff;
+  background: black;
+}

styles/css/vtex.tab-layout.css

@@ -29,7 +29,7 @@
 @media only screen and (max-width: 1024px) {
   .container--description .listContainer {
     padding: 16px 0;
-    margin-bottom: 16px;
+    margin-bottom: 0;
     border-top: 1px solid #b9b9b9;
     flex-direction: column;
     gap: 16px;
@@ -77,3 +77,21 @@
     border: 0;
   }
 }
+.container--description .contentContainer .contentItem {
+  padding: 0 32px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 32px;
+}
+.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-carouselGaleryThumbs) {
+  display: none;
+}
+@media only screen and (max-width: 1024px) {
+  .container--description .contentContainer .contentItem {
+    padding: 16px 0;
+    border-bottom: 1px solid #bfbfbf;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+}

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

@@ -318,3 +318,56 @@
     }
   }
 }
+
+/* ----- PRODUCT-DESCRIPTION ----- */
+.productDescriptionContainer {
+  .productDescriptionTitle {
+    margin-bottom: 8px;
+    // font-family: "Open Sans";
+    // font-style: normal;
+    // font-weight: 400;
+    font-size: 24px;
+    line-height: 32px;
+    color: #575757;
+
+    @include mq(xl, min) {
+      margin-bottom: 16px;
+      font-size: 32px;
+    }
+
+    @include mq(lg, max) {
+      font-size: 20px;
+    }
+  }
+
+  .productDescriptionText {
+    // font-family: "Open Sans";
+    // font-style: normal;
+    // font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #929292;
+
+    @include mq(xl, min) {
+      font-size: 18px;
+      line-height: 25px;
+    }
+
+    @include mq(lg, max) {
+      font-size: 14px;
+      line-height: 19px;
+    }
+  }
+
+  .showMoreButton {
+    width: 100%;
+    margin: 0;
+    padding: 12px 0;
+    // font-family: "Open Sans";
+    // font-style: normal;
+    font-weight: 600;
+    font-size: 18px;
+    color: #ffffff;
+    background: black;
+  }
+}

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

@@ -17,7 +17,7 @@
 
     @include mq(lg, max) {
       padding: 16px 0;
-      margin-bottom: 16px;
+      margin-bottom: 0;
       border-top: 1px solid #b9b9b9;
       flex-direction: column;
       gap: 16px;
@@ -71,4 +71,26 @@
       }
     }
   }
+
+  .contentContainer {
+    .contentItem {
+      padding: 0 32px;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 32px;
+
+      :global(.vtex-store-components-3-x-carouselGaleryThumbs) {
+        display: none;
+      }
+
+      @include mq(lg, max) {
+        // background-color: yellow;
+        padding: 16px 0;
+        border-bottom: 1px solid #bfbfbf;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+    }
+  }
 }