Merge pull request 'feat: added styles for mobiles devices and new hover,active effects' (#4) from feature/pdp-specifications into develop

Reviewed-on: #4

store/blocks/pdp/product-assembly.jsonc

@@ -32,17 +32,13 @@
     "props": {
       "verticalAlign": "middle"
     },
-    "children": [
+    "children": ["assembly-option-item-quantity-selector"]
-      "assembly-option-item-quantity-selector"
-    ]
   },
   "flex-layout.col#product-assembly-image": {
     "props": {
       "marginRight": 4
     },
-    "children": [
+    "children": ["assembly-option-item-image"]
-      "assembly-option-item-image"
-    ]
   },
   "flex-layout.col#product-assembly-middle": {
     "props": {
@@ -96,9 +92,7 @@
       "horizontalAlign": "right",
       "verticalAlign": "middle"
     },
-    "children": [
+    "children": ["assembly-option-item-quantity-selector"]
-      "assembly-option-item-quantity-selector"
-    ]
   },
   "assembly-option-item-customize#sec-level": {
     "props": {

store/blocks/pdp/product-shelf.jsonc

@@ -1,9 +1,4 @@
 {
-  "list-context.product-list#pdp-shelf": {
-    "blocks": ["product-summary.shelf#pdp-shelf"],
-    "children": ["html#pdp-slider-shelf"]
-  },
-
   "html#pdp-slider-shelf-title": {
     "children": ["rich-text#pdp-shelf-title"]
   },
@@ -22,6 +17,11 @@
     "children": ["list-context.product-list#pdp-shelf"]
   },
 
+  "list-context.product-list#pdp-shelf": {
+    "blocks": ["product-summary.shelf#pdp-shelf"],
+    "children": ["html#pdp-slider-shelf"]
+  },
+
   "rich-text#pdp-shelf-title": {
     "props": {
       "text": "## Você também pode gostar:",

store/blocks/pdp/product-specifications-table.jsonc

@@ -1,4 +1,12 @@
 {
+  "flex-layout.row#product-specifications": {
+    "props": {
+      "blockClass": "productSpecifications"
+    },
+
+    "children": ["tab-layout#product-specification"]
+  },
+
   "tab-layout#product-specification": {
     "children": [
       "tab-list#product-specification",
@@ -15,7 +23,8 @@
       "tab-list.item#specification-1",
       "tab-list.item#specification-2",
       "tab-list.item#specification-3",
-      "tab-list.item#specification-4"
+      "tab-list.item#specification-4",
+      "tab-list.item#specification-5"
     ]
   },
 
@@ -47,12 +56,20 @@
     }
   },
 
+  "tab-list.item#specification-5": {
+    "props": {
+      "tabId": "productFAQsId",
+      "label": "FAQs"
+    }
+  },
+
   "tab-content#product-specification": {
     "children": [
       "tab-content.item#specification-1",
       "tab-content.item#specification-2",
       "tab-content.item#specification-3",
-      "tab-content.item#specification-4"
+      "tab-content.item#specification-4",
+      "tab-content.item#specification-5"
     ]
   },
   "tab-content.item#specification-1": {
@@ -82,6 +99,13 @@
     }
   },
 
+  "tab-content.item#specification-5": {
+    "children": ["flex-layout.row#product-specification-1"],
+    "props": {
+      "tabId": "productFAQsId"
+    }
+  },
+
   "flex-layout.row#product-specification-1": {
     "props": {
       "blockClass": "productSpecificationItemContainer",

store/blocks/pdp/product.jsonc

@@ -3,7 +3,7 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "tab-layout#product-specification",
+      "flex-layout.row#product-specifications",
       "html#pdp-slider-shelf-title",
       "html#list-context-pdp-shelf",
       "newsletter",

styles/css/vtex.flex-layout.css

@@ -138,7 +138,6 @@
 }
 @media screen and (min-width: 768px) {
   .flexRowContent--productActions {
-    max-height: 49px;
     flex-direction: row;
   }
 }
@@ -163,6 +162,10 @@
   width: 99%;
 }
 
-.flexRow--productSpecificationItemContainer {
+.flexRow--productSpecifications {
   padding: 0 40px;
+}
+
+.flexRow--productSpecificationItemContainer {
+  padding: 0 32px;
 }

styles/css/vtex.tab-layout.css

@@ -7,18 +7,58 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.listContainer--ProductSpecificationTabList {
+  justify-content: space-around;
+  border-bottom: 1px solid #b9b9b9;
+}
+@media screen and (max-width: 1024px) {
+  .listContainer--ProductSpecificationTabList {
+    border-top: 1px solid #b9b9b9;
+  }
+}
+.listContainer--ProductSpecificationTabList .listItem {
+  position: relative;
+  padding: 0;
+  margin: 0;
+}
+.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) {
+  border-radius: 0;
+  color: #bfbfbf;
+}
+.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) :global(.vtex-button__label) {
+  padding: 0 16px !important;
+}
+.listContainer--ProductSpecificationTabList .listItem.listItemActive :global(.vtex-button) {
+  background-color: transparent;
+  color: #000;
+  border: none;
+}
+@media screen and (min-width: 1025px) {
+  .listContainer--ProductSpecificationTabList .listItem.listItemActive::before {
+    content: "";
+    width: 100%;
+    height: 2px;
+    position: absolute;
+    left: 0;
+    bottom: -1px;
+    background-color: #000;
+  }
+}
 @media screen and (max-width: 1024px) {
   .listContainer--ProductSpecificationTabList {
     width: 100%;
-    padding: 0 40px;
     flex-direction: column;
     flex-wrap: nowrap;
+    gap: 16px;
+    padding: 16px 0;
   }
   .listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) {
     width: 100%;
+    height: 38px;
   }
   .listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) :global(.vtex-button__label) {
     justify-content: start;
+    padding: 0 !important;
   }
 }
 .listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) {

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

@@ -134,7 +134,6 @@
   flex-direction: column;
 
   @media screen and (min-width: 768px) {
-    max-height: 49px;
     flex-direction: row;
   }
 
@@ -162,6 +161,10 @@
   }
 }
 
-.flexRow--productSpecificationItemContainer {
+.flexRow--productSpecifications {
   padding: 0 40px;
 }
+
+.flexRow--productSpecificationItemContainer {
+  padding: 0 32px;
+}

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

@@ -1,16 +1,60 @@
 .listContainer--ProductSpecificationTabList {
+  justify-content: space-around;
+  border-bottom: 1px solid #b9b9b9;
+
+  @media screen and (max-width: 1024px) {
+    border-top: 1px solid #b9b9b9;
+  }
+
+  .listItem {
+    position: relative;
+    padding: 0;
+    margin: 0;
+
+    :global(.vtex-button) {
+      border-radius: 0;
+      color: #bfbfbf;
+      :global(.vtex-button__label) {
+        padding: 0 16px !important;
+      }
+    }
+
+    &.listItemActive {
+      :global(.vtex-button) {
+        background-color: transparent;
+        color: #000;
+        border: none;
+      }
+
+      @media screen and (min-width: 1025px) {
+        &::before {
+          content: "";
+          width: 100%;
+          height: 2px;
+          position: absolute;
+          left: 0;
+          bottom: -1px;
+          background-color: #000;
+        }
+      }
+    }
+  }
+
   @media screen and (max-width: 1024px) {
     width: 100%;
-    padding: 0 40px;
     flex-direction: column;
     flex-wrap: nowrap;
+    gap: 16px;
+    padding: 16px 0;
 
     .listItem {
       :global(.vtex-button) {
         width: 100%;
+        height: 38px;
 
         :global(.vtex-button__label) {
           justify-content: start;
+          padding: 0 !important;
         }
       }
     }