fix(Breadcrumb e product-images): Ajusta o breadcrumb e o tamanho das imgaens no product-images

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+coverage/
+*.snap.ts

.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": "vtex",
+  "root": true,
+  "env": {
+    "node": true
+  }
+}

.prettierrc

@@ -0,0 +1 @@
+"@vtex/prettier-config"

package.json

@@ -1,20 +1,27 @@
 {
+  "name": "store-theme",
+  "private": true,
   "license": "UNLICENSED",
-  "main": "gulpfile.js",
-  "directories": {
-    "doc": "docs"
-  },
   "scripts": {
-    "dev": "concurrently \"vtex unlink --all && vtex link\"  \"gulp storefront\"",
     "lint": "eslint ./ --fix",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
+    "dev": "concurrently \"vtex unlink --all && vtex link\"  \"gulp storefront\"",
     "scss": "gulp storefront"
   },
-  "repository": {
-    "type": "git",
-    "url": "git@gitlab.com:agenciam3/pattern/vtex-io-template.git"
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,js,tsx,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,graphql,gql}": [
+      "prettier --write"
+    ]
   },
-  "keywords": [],
-  "author": "",
   "devDependencies": {
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
@@ -37,8 +44,18 @@
     "prettier": "2.0.2",
     "typescript": "3.8.3"
   },
+  "main": "gulpfile.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab.com:agenciam3/pattern/vtex-io-template.git"
+  },
+  "keywords": [],
+  "author": "",
   "dependencies": {
     "husky": "^5.2.0",
     "react": "^17.0.2"
   }
-}
+}

react/components/Example/Example.tsx

@@ -1,9 +1,20 @@
 import React from 'react'
+import './pix.css'
+import { useProduct } from 'vtex.product-context'
 
 const Example = () => {
+  const productContext = useProduct()
+
+  console.log('productContext', productContext)
+
   return (
-    <div>Example</div>
+    <div className="pix-container">
+      <img
+        src="https://agenciamagma.vteximg.com.br/arquivos/pix-icon-sauloklein-m3academy.svg"
+        alt="pix"
+      />
+    </div>
   )
 }
 
-export default Example
+export default Example

react/components/Example/pix.css

@@ -0,0 +1,3 @@
+[class*="pix-container"] {
+  margin: 8px 0 16px 0;
+}

react/tsconfig.json

@@ -2,10 +2,16 @@
   "extends": "@vtex/tsconfig",
   "compilerOptions": {
     "noEmitOnError": false,
-    "lib": ["dom"],
+    "lib": [
+      "dom"
+    ],
     "module": "esnext",
     "moduleResolution": "node",
     "target": "es2017"
   },
-  "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
+  "include": [
+    "./typings/*.d.ts",
+    "./**/*.tsx",
+    "./**/*.ts"
+  ]
 }

store/blocks/pdp/product.jsonc

@@ -109,13 +109,14 @@
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
+      "example-component",
       // "product-separator",
       "product-identifier.product",
       "sku-selector",
       "html#quantity-wrapper",
       // "product-quantity",
       "product-assembly-options",
-      "product-gifts",
+      // "product-gifts",
       // "flex-layout.row#buy-button",
       "availability-subscriber",
       "shipping-simulator",
@@ -129,7 +130,15 @@
       "testId": "quantity",
       "blockClass": "quantity-wrapper"
     },
-    "children": ["product-quantity", "html#buy-button"]
+    "children": ["html#product-quantity", "html#buy-button"]
+  },
+
+  "html#product-quantity": {
+    "props": {
+      "testId": "product-quantity",
+      "blockClass": "quantidade"
+    },
+    "children": ["product-quantity"]
   },
 
   "html#buy-button": {

styles/css/vtex.breadcrumb.css

@@ -18,6 +18,19 @@
 .container .homeLink .homeIcon {
   display: none;
 }
+.container .arrow {
+  position: relative;
+}
+.container .arrow .link--1,
+.container .arrow .link--2 {
+  position: absolute;
+  top: -7px;
+  width: 57px;
+}
+.container .arrow .link--1:focus,
+.container .arrow .link--2:focus {
+  color: transparent;
+}
 .container .arrow--1,
 .container .arrow--2 {
   font-size: 0;
@@ -28,9 +41,11 @@
 }
 .container .arrow--1::after {
   content: "Sapatos";
+  padding-left: 8px;
 }
 .container .arrow--2::after {
   content: "Sandálias";
+  padding-left: 8px;
 }
 .container .homeLink::before,
 .container .arrow--1::after,

styles/css/vtex.store-components.css

@@ -20,9 +20,15 @@
 .container .carouselGaleryCursor {
   width: 664px;
 }
+.container .carouselGaleryThumbs {
+  margin-top: 16px;
+}
 .container .productImageTag {
   object-fit: fill !important;
 }
+.container .thumbImg {
+  border-radius: 8px;
+}
 .container .productNameContainer {
   text-align: right;
   font-weight: 300;
@@ -98,6 +104,9 @@
   line-height: 19px;
   color: rgba(185, 185, 185, 0.6);
 }
+.container .skuSelectorOptionsList {
+  margin: 0;
+}
 .container .diagonalCross {
   transform: rotate(90deg);
 }

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -2,7 +2,7 @@
   padding: 0 0 16px 40px;
   .homeLink {
     &::before {
-      content: "Home";
+      content: 'Home';
     }
 
     .homeIcon {
@@ -10,6 +10,21 @@
     }
   }
 
+  .arrow {
+    position: relative;
+
+    .link--1,
+    .link--2 {
+      position: absolute;
+      top: -7px;
+      width: 57px;
+
+      &:focus {
+        color: transparent;
+      }
+    }
+  }
+
   .arrow--1,
   .arrow--2 {
     font-size: 0;
@@ -20,11 +35,13 @@
   }
 
   .arrow--1::after {
-    content: "Sapatos";
+    content: 'Sapatos';
+    padding-left: 8px;
   }
 
   .arrow--2::after {
-    content: "Sandálias";
+    content: 'Sandálias';
+    padding-left: 8px;
   }
 
   .homeLink::before,

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

@@ -16,10 +16,18 @@
     width: 664px;
   }
 
+  .carouselGaleryThumbs {
+    margin-top: 16px;
+  }
+
   .productImageTag {
     object-fit: fill !important;
   }
 
+  .thumbImg {
+    border-radius: 8px;
+  }
+
   .productNameContainer {
     text-align: right;
     font-weight: 300;
@@ -46,7 +54,7 @@
 
       &:last-child {
         &::before {
-          content: "OUTROS TAMANHOS:";
+          content: 'OUTROS TAMANHOS:';
           font-weight: 400;
           font-size: 14px;
           line-height: 19px;
@@ -55,7 +63,7 @@
       }
 
       &::before {
-        content: "OUTRAS CORES";
+        content: 'OUTRAS CORES';
         font-weight: 400;
         font-size: 14px;
         line-height: 19px;
@@ -113,6 +121,10 @@
     color: rgba(185, 185, 185, 0.6);
   }
 
+  .skuSelectorOptionsList {
+    margin: 0;
+  }
+
   .diagonalCross {
     transform: rotate(90deg);
   }