Merge branch 'feature/description' into desenvolvimento

react/components/Html/styles.css

@@ -1,5 +1,4 @@
 /* [class*=html--pdp-breadcrumb]{
-  background: blue;
 } */
 .html--pdp-section_descriptions{
   display: flex;
@@ -22,23 +21,13 @@
 .html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
   padding-left: 28px;
 }
-.html--pdp-departamens{
+.html--pdp-section_descriptions{
-  background: transparent;
   margin-top: 32px;
   margin-bottom: 16px;
 }
-.html--pdp-departamens ul{
+.html--pdp-section_descriptions :after{
-  display: flex;
   border-bottom: 1px solid rgba(185, 185, 185, 1);
 }
-.html--pdp-departamens div ul{
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  list-style: none;
-  margin: 0;
-}
-
 .html--pdp-departamens div ul li button{
   outline: none;
   border: none;
@@ -50,10 +39,7 @@
   font-size: 18px;
   line-height: 38px;
 }
-.html--pdp-departamens div ul li  :global(button.open){
+
-  color: #000000;
-  border-bottom: 1px solid #000000;
-}
 :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
   margin-bottom: 20px;
 }
@@ -79,6 +65,10 @@
 }
 }
 @media screen and (max-width: 1024px) {
+  .html--pdp-descriptions :global(.vtex-store-components-3-x-container){
+    border-bottom: 1px solid rgba(185, 185, 185, 1);
+    padding-bottom: 16px;
+  }
   .html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){
       min-width: 296px;
   }
@@ -100,10 +90,4 @@
   .html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
     padding-left: 0px;
   }
-  .html--pdp-departamens div ul li  :global(button.open){
-    border-bottom: none;
-  }
-  .html--pdp-departamens ul{
-    border-top: 1px solid rgba(185, 185, 185, 1);
-  }
 }

store/blocks/pdp/product.jsonc

@@ -1,11 +1,134 @@
 {
   "store.product": {
     "children": [
+      "html#breadcrumb",
       "html#departaments",
       "flex-layout.row#specifications-title",
       "html#carousel"
     ]
   },
+  "tab-layout#pdp": {
+    "children":[
+      "tab-list#pdp",
+      "tab-content#pdp",
+      "tab-content#pdp2",
+      "tab-content#pdp3",
+      "tab-content#pdp4",
+      "tab-content#pdp5"
+    ],
+    "props": {
+        "blockClass": "pdp-tabLayout",
+      "defaultActiveTabId": "descrição1"
+    }
+  },
+  "tab-list#pdp":{
+    "children": [
+      "tab-list.item#pdpsection1",
+      "tab-list.item#pdpsection2",
+      "tab-list.item#pdpsection3",
+      "tab-list.item#pdpsection4",
+      "tab-list.item#pdpsection5"
+    ],
+    "props": {
+      "blockClass": "pdp-tabSections"
+    }
+  },
+  "tab-list.item#pdpsection1": {
+    "props": {
+      "tabId": "descrição1",
+      "label": "Descrição",
+      "defaultActiveTab": true
+    }
+  },
+  "tab-list.item#pdpsection2": {
+    "props": {
+      "tabId": "descrição2",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#pdpsection3": {
+    "props": {
+      "tabId": "descrição3",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#pdpsection4": {
+    "props": {
+      "tabId": "descrição4",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#pdpsection5": {
+    "props": {
+      "tabId": "descrição5",
+      "label": "Descrição"
+    }
+  },
+  "tab-content.item#descriptionpdp":{
+    "children":[
+      "html#description"
+    ],
+    "props": {
+      "tabId": "descrição1"
+    }
+  },
+  "tab-content#pdp":{
+    "children":[
+      "tab-content.item#descriptionpdp"
+    ]
+  },
+  "tab-content.item#descriptionpdp2":{
+    "children":[
+      "html#description"
+    ],
+    "props": {
+      "tabId": "descrição2"
+    }
+  },
+  "tab-content#pdp2":{
+    "children":[
+      "tab-content.item#descriptionpdp2"
+    ]
+  },
+  "tab-content.item#descriptionpdp3":{
+    "children":[
+      "html#description"
+    ],
+    "props": {
+      "tabId": "descrição3"
+    }
+  },
+  "tab-content#pdp3":{
+    "children":[
+      "tab-content.item#descriptionpdp3"
+    ]
+  },
+  "tab-content.item#descriptionpdp4":{
+    "children":[
+      "html#description"
+    ],
+    "props": {
+      "tabId": "descrição4"
+    }
+  },
+  "tab-content#pdp4":{
+    "children":[
+      "tab-content.item#descriptionpdp4"
+    ]
+  },
+  "tab-content.item#descriptionpdp5":{
+    "children":[
+      "html#description"
+    ],
+    "props": {
+      "tabId": "descrição5"
+    }
+  },
+  "tab-content#pdp5":{
+    "children":[
+      "tab-content.item#descriptionpdp5"
+    ]
+  },
   "html#prateleira": {
     "props": {
       "testId": "vtex-product-sumary"
@@ -97,14 +220,7 @@
     },
     "children": ["breadcrumb"]
   },
-  "html#example-component": {
+
-    "props": {
-      "tag": "nav",
-      "testId": "breadcrumbs",
-      "blockClass": "pdp-exemplo"
-    },
-    "children": ["example-component"]
-  },
   "html#Sections": {
     "props": {
       "tag": "nav",
@@ -190,10 +306,10 @@
   "html#departaments": {
     "props": {
       "tag": "div",
-      "testId": "description",
+      "testId": "product-description",
       "blockClass": "pdp-section_descriptions"
     },
-    "children": ["html#Sections", "html#description"]
+    "children": ["tab-layout#pdp"]
   },
 
   "html#description": {

styles/css/vtex.flex-layout.css

@@ -149,10 +149,20 @@
   .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
     max-width: 11.2px;
     max-height: 29.6px;
-    top: 25%;
+    top: 37%;
     padding: 0;
   }
 }
+@media screen and (max-width: 1024px) {
+  .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderLeftArrow--pdp-carrousel) {
+    left: 3%;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderRightArrow--pdp-carrousel) {
+    right: 3%;
+  }
+}
 @media screen and (max-width: 1024px) {
   .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-slide--pdp-carrousel) {
     width: 4.9344% !important;
@@ -171,6 +181,7 @@
 .flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) {
   max-width: 100%;
 }
+
 .flexRow--pdp-price .flexRowContent--pdp-price {
   justify-content: center;
 }

styles/css/vtex.rich-text.css

@@ -18,3 +18,8 @@
   line-height: 38px;
   color: #575757;
 }
+@media screen and (max-width: 1024px) {
+  .container--pdp-specifications .wrapper--pdp-specifications .heading {
+    font-size: 20px;
+  }
+}

styles/css/vtex.tab-layout.css

@@ -0,0 +1,62 @@
+/*
+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 */
+.listContainer--pdp-tabSections::after {
+  content: "";
+  width: 100%;
+  border-bottom: 1px solid rgb(185, 185, 185);
+}
+@media screen and (max-width: 1024px) {
+  .listContainer--pdp-tabSections {
+    flex-direction: column;
+  }
+  .listContainer--pdp-tabSections::before {
+    content: "";
+    width: 100%;
+    border-bottom: 1px solid rgb(185, 185, 185);
+  }
+}
+
+.listContainer--pdp-tabSections {
+  margin-bottom: 32px;
+  justify-content: space-evenly;
+  align-items: end;
+}
+@media screen and (max-width: 1024px) {
+  .listContainer--pdp-tabSections {
+    align-items: start;
+  }
+}
+.listContainer--pdp-tabSections .listItem {
+  padding: 0;
+  margin: 0;
+}
+.listContainer--pdp-tabSections .listItem :global(.vtex-button) {
+  outline: none;
+  border: none;
+  background: transparent;
+  color: rgb(191, 191, 191);
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  text-transform: initial;
+}
+.listContainer--pdp-tabSections .listItemActive {
+  border-bottom: 1px solid #000000;
+}
+@media screen and (max-width: 1024px) {
+  .listContainer--pdp-tabSections .listItemActive {
+    border-bottom: none;
+  }
+}
+.listContainer--pdp-tabSections .listItemActive :global(.vtex-button) {
+  color: #000000;
+}

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

@@ -139,10 +139,20 @@
     @media screen and (max-width: 1024px){
       max-width: 11.2px;
       max-height: 29.6px;
-      top: 25%;
+      top: 37%;
       padding: 0;
     }
   }
+  :global(.vtex-slider-layout-0-x-sliderLeftArrow--pdp-carrousel){
+    @media screen and (max-width: 1024px){
+      left: 3%;
+    }
+  }
+  :global(.vtex-slider-layout-0-x-sliderRightArrow--pdp-carrousel){
+    @media screen and (max-width: 1024px){
+      right: 3%;
+    }
+  }
   :global(.vtex-slider-layout-0-x-slide--pdp-carrousel){
     @media screen and (max-width: 1024px){
       width: 4.9344% !important;
@@ -162,9 +172,6 @@
   :global(.vtex-store-components-3-x-container){
     max-width: 100%;
   }
-  @media screen and (max-width: 1024px){
-
-  }
 }
 .flexRow--pdp-price{
   .flexRowContent--pdp-price{

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

@@ -9,6 +9,9 @@
         font-size: 24px;
         line-height: 38px;
         color: #575757;
+        @media screen and (max-width: 1024px){
+          font-size: 20px;
+        }
       }
     }
   }

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

@@ -175,3 +175,4 @@
   }
 }
 
+

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

@@ -0,0 +1,48 @@
+.listContainer--pdp-tabSections{
+  &::after{
+    content: "";
+    width: 100%;
+    border-bottom: 1px solid rgba(185, 185, 185, 1);
+  };
+  @media screen and (max-width: 1024px){
+    flex-direction: column;
+    &::before{
+      content: "";
+      width: 100%;
+      border-bottom: 1px solid rgba(185, 185, 185, 1);
+    };
+  }
+};
+.listContainer--pdp-tabSections{
+  margin-bottom: 32px;
+  justify-content: space-evenly;
+  align-items: end;
+  @media screen and (max-width: 1024px){
+    align-items: start;
+  }
+  .listItem{
+    padding: 0;
+    margin: 0;
+    :global(.vtex-button){
+      outline: none;
+      border: none;
+      background: transparent;
+      color: rgba(191, 191, 191, 1);
+      font-family: 'Open Sans',sans-serif;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 38px;
+      text-transform: initial;
+    };
+  };
+  .listItemActive{
+    border-bottom: 1px solid #000000;
+    @media screen and (max-width: 1024px){
+      border-bottom: none;
+    }
+    :global(.vtex-button){
+      color: #000000;
+    }
+  }
+}