feat(product): adicionando description e estilos na mesma

product

store/blocks/pdp/product.jsonc

@@ -3,7 +3,7 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
+      "tab-layout#description",
       "flex-layout.row#specifications-title",
       "product-specification-group#table",
       "shelf.relatedProducts",
@@ -32,6 +32,102 @@
     },
     "children": ["product-description"]
   },
+  "product-images#description-content": {
+    "props": {
+      "displayMode": "first-image",
+      "zoomMode": "disable",
+      "blockClass": "image-description"
+    }
+  },
+  "tab-layout#description": {
+    "children": ["tab-list#description", "tab-content#description"],
+    "props": {
+      "blockClass": "description-block",
+      "defaultActiveTabId": "firstTab"
+    }
+  },
+  "tab-list#description": {
+    "children": [
+      "tab-list.item#firstTab",
+      "tab-list.item#secondTab",
+      "tab-list.item#thirdTab",
+      "tab-list.item#fourthTab",
+      "tab-list.item#fifthTab"
+    ]
+  },
+  "tab-list.item#firstTab": {
+    "props": {
+      "tabId": "firstTab",
+      "label": "Descrição",
+      "defaultActiveTab": true
+    }
+  },
+  "tab-list.item#secondTab": {
+    "props": {
+      "tabId": "secondTab",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#thirdTab": {
+    "props": {
+      "tabId": "thirdTab",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#fourthTab": {
+    "props": {
+      "tabId": "fourthTab",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#fifthTab": {
+    "props": {
+      "tabId": "fifthTab",
+      "label": "Descrição"
+    }
+  },
+  "tab-content#description": {
+    "children": [
+      "tab-content.item#firstTab",
+      "tab-content.item#secondTab",
+      "tab-content.item#thirdTab",
+      "tab-content.item#fourthTab",
+      "tab-content.item#fifthTab"
+    ],
+    "props": {
+      "blockClass": "description-content"
+    }
+  },
+  "tab-content.item#firstTab": {
+    "children": ["product-images#description-content", "product-description"],
+    "props": {
+      "tabId": "firstTab"
+    }
+  },
+  "tab-content.item#secondTab": {
+    "children": ["product-images#description-content", "product-description"],
+    "props": {
+      "tabId": "secondTab"
+    }
+  },
+  "tab-content.item#thirdTab": {
+    "children": ["product-images#description-content", "product-description"],
+    "props": {
+      "tabId": "thirdTab"
+    }
+  },
+  "tab-content.item#fourthTab": {
+    "children": ["product-images#description-content", "product-description"],
+    "props": {
+      "tabId": "fourthTab"
+    }
+  },
+  "tab-content.item#fifthTab": {
+    "children": ["product-images#description-content", "product-description"],
+    "props": {
+      "tabId": "fifthTab"
+    }
+  },
   "condition-layout.product#availability": {
     "props": {
       "conditions": [
@@ -122,7 +218,7 @@
       // "flex-layout.row#buy-button",
       "availability-subscriber",
       "html#shipping-simulator"
-      // "share#default"
+      // "share#default" //reder social
     ]
   },
 

styles/configs/style.json

@@ -253,84 +253,84 @@
         "measure": [30, 34, 20],
         "styles": {
           "heading-1": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "700",
             "fontSize": "3rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-2": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "700",
             "fontSize": "2.25rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-3": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "700",
             "fontSize": "1.75rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-4": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1.5rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-5": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1.25rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-6": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1.25rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "body": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "normal",
             "fontSize": "0.875rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "mini": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "normal",
             "fontSize": "0.75rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "action": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "500",
             "fontSize": "1rem",
             "textTransform": "uppercase",
             "letterSpacing": "0"
           },
           "action--small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "500",
             "fontSize": "0.875rem",
             "textTransform": "uppercase",
             "letterSpacing": "0"
           },
           "action--large": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, sans-serif",
             "fontWeight": "500",
             "fontSize": "1.25rem",
             "textTransform": "uppercase",

styles/css/vtex.breadcrumb.css

@@ -17,7 +17,7 @@
   line-height: 19px;
   color: #929292;
 }
-@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
   .container {
     padding: 16px 40px;
   }

styles/css/vtex.store-components.css

@@ -13,7 +13,7 @@
   margin: 0;
   max-width: 100%;
 }
-@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
   .container {
     padding: 16px 40px;
   }
@@ -32,7 +32,7 @@
   max-height: 904px !important;
   cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default;
 }
-@media (min-width: 1025px) and (max-width: 2560px) {
+@media (min-width: 1025px) and (max-width: 1920px) {
   .productImageTag--main, .videoContainer {
     max-height: 664px !important;
   }
@@ -63,7 +63,7 @@
   border-radius: 8px;
   max-width: calc(100% - 16px);
 }
-@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
   .carouselGaleryThumbs .productImagesThumb {
     width: 90px !important;
     height: 90px !important;

styles/css/vtex.tab-layout.css

@@ -0,0 +1,176 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
+/* Grid breakpoints */
+.container--description-block {
+  padding: 16px 360px;
+  margin: 0;
+  max-width: 100%;
+}
+@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .container--description-block {
+    padding: 16px 40px;
+  }
+}
+.container--description-block .listContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #B9B9B9;
+  height: 38px;
+  margin-bottom: 32px;
+  padding: 0 64px;
+}
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .container--description-block .listContainer {
+    flex-direction: column;
+    row-gap: 16px;
+    border-top: 1px solid #B9B9B9;
+    border-bottom: 1px solid #B9B9B9;
+    height: auto;
+    padding: 16px 0;
+    align-items: flex-start;
+  }
+}
+.container--description-block .listContainer .listItem {
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+}
+.container--description-block .listContainer .listItem :global(.vtex-button__label) {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #BFBFBF;
+  padding: 0 16px !important;
+}
+@media (min-width: 1025px) and (max-width: 1920px) {
+  .container--description-block .listContainer .listItem :global(.vtex-button__label) {
+    font-size: 18px;
+  }
+}
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .container--description-block .listContainer .listItem :global(.vtex-button__label) {
+    font-size: 18px;
+    padding: 0 !important;
+  }
+}
+.container--description-block .listContainer .listItem :global(.vtex-button) {
+  background: transparent;
+  border: none;
+}
+.container--description-block .listContainer .listItemActive {
+  border-bottom: 2px solid #000;
+}
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .container--description-block .listContainer .listItemActive {
+    border: none;
+  }
+}
+.container--description-block .listContainer .listItemActive :global(.vtex-button__label) {
+  color: #000;
+}
+.container--description-block .contentContainer--description {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-evenly;
+  gap: 32px;
+}
+
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .contentContainer--description-content {
+    padding-bottom: 16px;
+    border-bottom: 1px solid #BFBFBF;
+  }
+}
+.contentContainer--description-content .contentItem {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 32px;
+}
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .contentContainer--description-content .contentItem {
+    flex-direction: column;
+    gap: 16px;
+  }
+}
+.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productImagesContainer--image-description) {
+  width: 50%;
+}
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productImagesContainer--image-description) {
+    width: 100%;
+  }
+}
+.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) {
+  width: 50%;
+}
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) {
+    width: 100%;
+  }
+}
+.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 32px;
+  line-height: 32px;
+  color: #575757;
+  margin-bottom: 8px;
+}
+@media (min-width: 1025px) and (max-width: 1920px) {
+  .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
+    font-size: 24px;
+  }
+}
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
+    font-size: 20px;
+  }
+}
+.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0;
+}
+.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-content) {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 22px;
+  color: #929292;
+}
+@media (min-width: 1025px) and (max-width: 1920px) {
+  .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-content) {
+    font-size: 16px;
+  }
+}
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-content) {
+    font-size: 14px;
+  }
+}
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-fadeBottom) {
+    background-image: none;
+  }
+}
+.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-showMoreButton) {
+  display: none;
+}

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

@@ -0,0 +1,170 @@
+.container--description-block {
+  padding:16px 360px;
+  margin: 0;
+  max-width: 100%;
+
+  @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
+    padding: 16px 40px;
+  }
+
+  .listContainer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #B9B9B9;
+    height: 38px;
+    margin-bottom: 32px;
+    padding: 0 64px;
+
+    @media #{$mq-tablet}, #{$mq-mobile}{
+      flex-direction: column;
+      row-gap: 16px;
+      border-top: 1px solid #B9B9B9;
+      border-bottom: 1px solid #B9B9B9;
+      height: auto;
+      padding: 16px 0;
+      align-items: flex-start;
+    }
+
+    .listItem {
+      height: 38px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      margin: 0;
+
+      :global(.vtex-button__label) {
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        color: #BFBFBF;
+        padding: 0 16px !important;
+
+        @media #{$mq-desktop}{
+          font-size: 18px;
+        }
+
+        @media #{$mq-tablet}, #{$mq-mobile} {
+          font-size: 18px;
+          padding: 0 !important;
+        }
+      }
+      :global(.vtex-button) {
+        background: transparent;
+        border: none;
+      }
+    }
+
+    .listItemActive {
+      border-bottom: 2px solid $color-black0;
+
+      @media #{$mq-tablet}, #{$mq-mobile} {
+        border: none;
+      }
+
+      :global(.vtex-button__label) {
+        color: $color-black0;
+      }
+    }
+  }
+
+  .contentContainer--description {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-evenly;
+    gap: 32px;
+  }
+}
+
+.contentContainer--description-content{
+
+  @media #{$mq-tablet}, #{$mq-mobile}{
+    padding-bottom: 16px;
+    border-bottom: 1px solid #BFBFBF;
+  }
+
+  .contentItem {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 32px;
+
+    @media #{$mq-tablet}, #{$mq-mobile}{
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    :global(.vtex-store-components-3-x-productImagesContainer--image-description){
+      width: 50%;
+
+      @media #{$mq-tablet}, #{$mq-mobile}{
+        width: 100%;
+      }
+    }
+
+    :global(.vtex-store-components-3-x-productDescriptionContainer){
+      width: 50%;
+
+      @media #{$mq-tablet}, #{$mq-mobile}{
+        width: 100%;
+      }
+
+      :global(.vtex-store-components-3-x-productDescriptionTitle ) {
+        font-family:$font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 32px;
+        line-height: 32px;
+        color: $color-gray7;
+        margin-bottom: 8px;
+
+        @media #{$mq-desktop} {
+          font-size: 24px;
+        }
+
+        @media #{$mq-tablet}, #{$mq-mobile}{
+          font-size: 20px;
+        }
+      }
+
+      :global(.vtex-store-components-3-x-container) {
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 16px;
+        padding: 0;
+
+        :global(.vtex-store-components-3-x-content) {
+          font-family: $font-family;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 18px;
+          line-height: 22px;
+          color: $color-gray6;
+
+          @media #{$mq-desktop} {
+            font-size: 16px;
+          }
+
+          @media #{$mq-tablet}, #{$mq-mobile}{
+            font-size: 14px;
+          }
+        }
+
+        :global(.vtex-store-components-3-x-fadeBottom ){
+          @media #{$mq-tablet}, #{$mq-mobile}{
+            background-image: none;
+          }
+        }
+
+        :global(.vtex-store-components-3-x-showMoreButton) {
+          display: none;
+        }
+      }
+    }
+  }
+
+}

styles/sass/utils/_vars.scss

@@ -41,6 +41,6 @@ $z-index: (
 ) !default;
 
 //media-queries
-$mq-desktop: "(min-width: 1025px) and (max-width: 2560px)";
+$mq-desktop: "(min-width: 1025px) and (max-width: 1920px)";
 $mq-tablet: "(min-width: 769px) and (max-width: 1024px)";
 $mq-mobile: "(min-width: 280px) and (max-width: 768px)";