Merge pull request 'feature/challenge-vtex-io' (#1) from feature/challenge-vtex-io into master

Reviewed-on: #1

manifest.json

@@ -15,7 +15,7 @@
     "postreleasy": "vtex publish --verbose"
   },
   "dependencies": {
-    "agenciamagma.store-theme": "5.x",
+    "vtex.store-newsletter": "1.x",
     "vtex.store": "2.x",
     "vtex.store-header": "2.x",
     "vtex.product-summary": "2.x",

react/components/Html/index.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { useCssHandles } from "vtex.css-handles";
+import "./styles.css"
 
 const CSS_HANDLES = ["html"] as const;
 

react/components/Html/readme.md

@@ -46,7 +46,7 @@ Basicamente esse componente
     <div class="vtex-flex-layout-0-x-flexRow">
         <section class="vtex-store-components ph3 ph5-m ph2-xl mw9 center">
             <div class="vtex-flex-layout-0-x-flexRowContent pr7">
-                <div class="stretchChildrenWidth flex pr7 items-stretch" style="width: 50%;">
+                <div class="stretchChildrenWidth flex pr7 items-stretch" style="width: 44%;">
                     {children}
                 </div>
             </div>

react/components/Html/styles.css

@@ -0,0 +1,257 @@
+[class*="productImageTag--main"] {
+  max-width: 80.25%;
+  object-fit: none;
+}
+
+[class*="flexRow--button-cart"] :global(.vtex-button) {
+  background-color: black;
+  border-color: black;
+  width: 97.952%;
+  height: 49px;
+}
+
+[class*="numeric-stepper__minus-button__text"] {
+  position: absolute !important;
+  left: 50%;
+  top: 85%;
+  transform: translate(-50%, -50%);
+}
+
+[class*="numeric-stepper__plus-button__text"] {
+  position: absolute !important;
+  left: 50%;
+  top: 85%;
+  transform: translate(-50%, -50%);
+}
+
+[class*="numeric-stepper__minus-button"] {
+  height: 49px;
+  position: relative;
+}
+
+[class*="numeric-stepper__input"] {
+  height: 49px;
+  position: relative;
+}
+
+[class*="numeric-stepper__plus-button"] {
+  height: 49px;
+  position: relative;
+}
+
+[class*="skuSelectorInternalBox"] {
+  border-radius: 24px;
+  position: relative;
+  width: 40px;
+  height: 46px;
+}
+
+[class*="frameAround"] {
+  border-radius: 24px;
+  width: 48px;
+  height: 48px;
+  border-color: black;
+}
+
+[class*="skuSelectorItemTextValue"] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+[class*="installments--m3-custom-installments"] {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+[class*="productNameContainer"] {
+  text-align: end;
+}
+
+[class*="shippingContainer"] :global(.vtex-button) {
+  background-color: black;
+  color: white;
+  font-size: 0;
+  width: 49px;
+  height: 49px;
+  background-color: black;
+  color: white;
+  font-size: 0;
+  position: relative;
+  width: 49px;
+  height: 49px;
+  left: 45.5%;
+  bottom: 110px;
+}
+
+[class*="shippingContainer"] :global(.vtex-button::after) {
+  content: "OK";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 30%;
+  left: 23%;
+}
+
+[class*="shippingContainer"] :global(.vtex-input-prefix__group) {
+  width: 45.532%;
+  height: 49px;
+}
+
+[class*="vtex-address-form__postalCode-forgottenURL"] {
+  position: relative;
+  color: black;
+  bottom: 44px;
+  left: 52%;
+  margin-left: 32px;
+}
+
+[class*="productDescriptionTitle"] {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+}
+
+[class*="productDescriptionContainer"] {
+  margin-left: 32px;
+}
+
+[class*="productDescriptionContainer"]:global(.content) {
+  width: 632px;
+  height: 66px;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+[class*="listContainer"] {
+  justify-content: space-between;
+  color: black;
+  background-color: transparent;
+  border-bottom: 1px solid #bfbfbf;
+  margin-bottom: 25px;
+}
+
+[class*="listContainer"] :global(.vtex-button__label) {
+  text-transform: capitalize;
+  padding: 0;
+  margin: 0;
+}
+
+[class*="listContainer"] :global(.vtex-button__label):hover {
+  background-color: transparent;
+}
+
+[class*="listItemActive"] :global(.vtex-button) {
+  color: black !important;
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid black;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+}
+
+[class*="listItem"] :global(.vtex-button) {
+  color: #bfbfbf;
+  border-radius: 0;
+}
+
+[class*="listItem"] :global(.vtex-button):hover {
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid black;
+}
+
+[class*="listItemActive"] {
+  color: black;
+}
+
+[class*="pv2"] {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+[class*="ma2"] {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+[class*="listItemActive"] :global(.vtex-button:hover) {
+  background-color: transparent;
+  border: none;
+}
+
+[class*="listContainer"] :global(.vtex-button__label:hover) {
+  color: black;
+  background-color: transparent;
+  border: none;
+}
+
+[class*="imageNormal"] {
+  max-width: 434.4px;
+  max-height: 434.4px;
+}
+
+[class*="newsletter"] {
+  color: white;
+}
+
+[id*="newsletter-input"] {
+  color: white;
+  background: black;
+  border: none;
+}
+
+[class*="t-heading-3"] {
+  content: "Teste \n teste 2";
+  margin-bottom: 57px;
+  font-size: 0;
+}
+[class*="t-heading-3"]::after {
+  content: "Assine nossa newsletter";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  position: relative;
+  bottom: 47px;
+}
+
+[class*="textNewsletter"] {
+  color: white;
+  position: relative;
+  top: 38px;
+}
+
+[class*="newsletter"]:global(.vtex-input-prefix__group) {
+  border: none;
+  border-bottom: 1px solid white;
+  border-radius: 0;
+}
+
+[class*="buttonContainer"] :global(.vtex-button) {
+  border: none;
+  border-bottom: 2px solid white;
+  background-color: black;
+  border-radius: 0;
+  position: relative;
+  right: 12px;
+}

store/blocks/minicart.jsonc

@@ -2,7 +2,8 @@
   "add-to-cart-button": {
     "props": {
       "addToCartFeedback": "customEvent",
-      "customPixelEventId": "add-to-cart-button"
+      "customPixelEventId": "add-to-cart-button",
+      "blockClass": "button-add"
     }
   },
 

store/blocks/pdp/product.jsonc

@@ -3,13 +3,51 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
+      "tab-layout#home",
-      "flex-layout.row#specifications-title",
+      "rich-text#textproducts",
-      "product-specification-group#table",
+      "list-context.product-list#demo1",
-      "shelf.relatedProducts",
+      "rich-text#textnewsletter",
+      "newsletter",
       "product-questions-and-answers"
     ]
   },
+
+  "newsletter": {
+    "props": {
+      "text": "Você também pode gostar:"
+    }
+  },
+
+  "rich-text#textnewsletter": {
+    "props": {
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER",
+      "text": "Receba ofertas e novidades por e-mail",
+      "id": "textNewsletter",
+      "blockClass": "textNewsletter"
+    }
+  },
+
+  "rich-text#textproducts": {
+    "props": {
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER",
+      "text": "Você também pode gostar:"
+    }
+  },
+
+  "product-summary.shelf#demo1": {
+    "children": [
+      "product-summary-image",
+      "product-summary-name",
+      "product-summary-price"
+    ]
+  },
+  "list-context.product-list#demo1": {
+    "blocks": ["product-summary.shelf#demo1"],
+    "children": ["slider-layout#demo-products"]
+  },
+
   "html#breadcrumb": {
     "props": {
       "tag": "section",
@@ -30,7 +68,7 @@
     "props": {
       "marginBottom": 7
     },
-    "children": ["product-description"]
+    "children": ["image#tab", "product-description"]
   },
   "condition-layout.product#availability": {
     "props": {
@@ -45,8 +83,6 @@
   },
   "flex-layout.row#product-main": {
     "props": {
-      "colGap": 7,
-      "rowGap": 7,
       "marginTop": 4,
       "marginBottom": 7,
       "paddingTop": 7,
@@ -78,15 +114,20 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
       "rowGap": 0
     }
   },
   "flex-layout.row#product-image": {
-    "children": ["product-images"]
+    "props": {},
+    "children": ["html#product-images"]
   },
   "product-images": {
     "props": {
+      "width": "40%",
+      "contentType": "images",
+      "showNavigationArrows": false,
+      "showPaginationDots": false,
+      "thumbnailsOrientation": "horizontal",
       "aspectRatio": {
         "desktop": "auto",
         "phone": "16:9"
@@ -94,30 +135,147 @@
       "displayThumbnailsArrows": true
     }
   },
+
+  "html#product-images": {
+    "props": {
+      "thumbnailsOrientation": "horizontal",
+      "tag": "section",
+      "infinite": "true",
+      "preventHorizontalStretch": "true",
+      "verticalAlign": "bottom",
+      "testId": "product-images"
+    },
+    "children": ["product-images"]
+  },
+
   "flex-layout.col#right-col": {
     "props": {
+      "width": "60%",
       "preventVerticalStretch": true,
       "rowGap": 0
     },
     "children": [
       "flex-layout.row#product-name",
+      "product-identifier.product",
       "product-rating-summary",
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
-      "product-installments",
+      "product-installments#m3-academy",
-      "product-separator",
-      "product-identifier.product",
       "sku-selector",
-      "product-quantity",
-      "product-assembly-options",
       "product-gifts",
       "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
+      "shipping-simulator"
-      "share#default"
     ]
   },
 
+  "image#tab": {
+    "props": {
+      "src": "assets/img-sapato.png"
+    }
+  },
+
+  "tab-layout#home": {
+    "children": ["tab-list#home", "tab-content#home"],
+    "props": {
+      "blockClass": "home",
+      "defaultActiveTabId": "home1"
+    }
+  },
+  "tab-list#home": {
+    "children": [
+      "tab-list.item#home1",
+      "tab-list.item#home2",
+      "tab-list.item#home3",
+      "tab-list.item#home4",
+      "tab-list.item#home5"
+    ]
+  },
+  "tab-list.item#home1": {
+    "props": {
+      "tabId": "home1",
+      "label": "Descrição",
+      "defaultActiveTab": true
+    }
+  },
+  "tab-list.item#home2": {
+    "props": {
+      "tabId": "home2",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#home3": {
+    "props": {
+      "tabId": "home3",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-list.item#home4": {
+    "props": {
+      "tabId": "home4",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-list.item#home5": {
+    "props": {
+      "tabId": "home5",
+      "label": "Descrição"
+    }
+  },
+  "tab-content#home": {
+    "children": [
+      "tab-content.item#home1",
+      "tab-content.item#home2",
+      "tab-content.item#home3",
+      "tab-content.item#home4",
+      "tab-content.item#home5"
+    ]
+  },
+  "tab-content.item#home1": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "home1"
+    }
+  },
+  "tab-content.item#home2": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "home2"
+    }
+  },
+
+  "tab-content.item#home3": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "home3"
+    }
+  },
+
+  "tab-content.item#home4": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "home4"
+    }
+  },
+
+  "tab-content.item#home5": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "home5"
+    }
+  },
+
+  "product-installments#m3-academy": {
+    "props": {
+      "installmentsCriteria": "max-quantity-without-interest",
+      "markers": ["discount", "vezes"],
+      "blockClass": "m3-custom-installments",
+      "message": "{installmentsNumber}<vezes>x</vezes> de {installmentValue} <discount>sem juros</discount>"
+    }
+  },
+
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3
@@ -134,8 +292,21 @@
 
   "flex-layout.row#buy-button": {
     "props": {
+      "paddingTop": 0,
       "marginTop": 4,
-      "marginBottom": 7
+      "marginBottom": 7,
+      "blockClass": "button-cart"
+    },
+    "children": ["product-quantity", "html#add-to-cart-button"]
+  },
+
+  "product-quantity": {
+    "props": { "width": "25%" }
+  },
+
+  "html#add-to-cart-button": {
+    "props": {
+      "testId": "add-to-cart-button"
     },
     "children": ["add-to-cart-button"]
   },

styles/css/agenciamagma.store-theme.css

@@ -7,10 +7,9 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.html {
+/*.html {
   background-color: red;
-}
+}*/
-
+/*.html--pdp-breadcrumb {
-.html--pdp-breadcrumb {
   background-color: green;
-}
+}*/

styles/css/vtex.add-to-cart-button.css

@@ -0,0 +1,9 @@
+/*
+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 */

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,52 @@
+.homeIcon {
+  visibility: hidden;
+}
+
+.arrow--1 {
+  visibility: hidden;
+  content: "";
+}
+
+.arrow--1::after {
+  visibility: visible;
+  content: "Home";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+.link--2 {
+  visibility: hidden;
+  content: "";
+}
+
+.link--2::after {
+  visibility: visible;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  content: "Sapatos";
+}
+
+.term {
+  visibility: hidden;
+}
+
+.term::after {
+  visibility: visible;
+  content: "Sandálias";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  position: relative;
+  right: 230px;
+}

styles/css/vtex.flex-layout.css

@@ -43,7 +43,7 @@
 }
 
 .flexRow--deals {
-  background-color: #0F3E99;
+  background-color: #0f3e99;
   padding: 14px 0px;
 }
 
@@ -70,6 +70,10 @@
   align-items: flex-end;
 }
 
+.pr7.items-stretch.vtex-flex-layout-0-x-stretchChildrenWidth.flex {
+  width: 40%;
+}
+
 .flexCol--orderByMobileCol {
   width: 42%;
 }

styles/css/vtex.product-identifier.css

@@ -1,3 +1,29 @@
 .product-identifier--productReference {
   margin-bottom: 1rem;
 }
+
+.product-identifier__label,
+.product-identifier__separator {
+  display: none;
+}
+
+.product-identifier__value {
+  text-align: right;
+  position: absolute;
+  right: 0;
+  margin-right: 40px;
+}
+
+.product-identifier--productReference {
+  position: relative;
+  font-family: "Open Sans";
+  text-align: right;
+  display: flex;
+  align-self: flex-end;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: right;
+  color: rgba(146, 146, 146, 0.48);
+}

styles/css/vtex.product-price.css

@@ -1,6 +1,6 @@
 .listPrice {
   color: #727273;
-  margin-bottom: .25rem;
+  margin-bottom: 0.25rem;
   font-size: 1rem;
 }
 
@@ -10,8 +10,12 @@
 }
 
 .sellingPriceValue {
-  font-size: 2.25rem;
+  font-family: "Open Sans";
+  font-style: normal;
   font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
 }
 
 .installments {
@@ -20,18 +24,19 @@
 }
 
 .savings {
+  display: none;
   font-weight: 500;
-  color: #79B03A;
+  color: #79b03a;
 }
 
 .sellingPriceValue--summary {
   font-size: 1.25rem;
   font-weight: 600;
-  color: #2E2E2E;
+  color: #2e2e2e;
 }
 
 .savings--summary {
-  background: #8BC34A;
+  background: #8bc34a;
   border-radius: 1000px;
   align-items: center;
   display: flex;
@@ -41,21 +46,24 @@
   font-size: 0.875rem;
   font-weight: 600;
   vertical-align: baseline;
-  color: #FFFFFF;
+  color: #ffffff;
+}
+.listPrice {
+  display: none;
 }
 
 .savings-discount--summary {
   font-size: 0.875rem;
   font-weight: 600;
   vertical-align: baseline;
-  color: #FFFFFF;
+  color: #ffffff;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
 
 .listPrice--summary {
   margin-bottom: 0.25rem;
-  font-size: .875rem;
+  font-size: 0.875rem;
 }
 
 .installments--summary {
@@ -74,6 +82,6 @@
   font-size: 0.875rem;
   font-weight: 600;
   vertical-align: baseline;
-  color: #FFFFFF;
+  color: #ffffff;
   padding: 0.25rem 0.5rem 0.25rem 0.5rem;
 }

styles/css/vtex.product-quantity.css

@@ -0,0 +1,4 @@
+.quantitySelectorTitle {
+  display: none;
+}
+

styles/css/vtex.store-components.css

@@ -8,5 +8,5 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .newsletter {
-  background: red;
+  background: black;
 }

styles/css/vtex.styleguide.css

@@ -0,0 +1,4 @@
+.hideDecorators {
+  border-left: none;
+  border-right: none;
+}

styles/sass/pages/product/agenciamagma.store-theme.scss

@@ -1,8 +1,7 @@
-.html {
+/*.html {
   background-color: red;
-}
+}*/
 
-.html--pdp-breadcrumb {
+/*.html--pdp-breadcrumb {
   background-color: green;
-}
+}*/
-

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

@@ -1,3 +1,3 @@
-.newsletter{
+.newsletter {
-    background: red;
+  background: black;
 }