feat(breadcrumb):breacrumb estilizado

docs/Todo.md

@@ -4,7 +4,6 @@
 
 - [x] (a) inciando projeto {cm:2023-01-25}
 
-- [](b)
 
 os Requisitos cobrados serão:
 
@@ -12,7 +11,7 @@ os Requisitos cobrados serão:
 
 - HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p
 
-- FIXME [Blocos que devem ser ajustado e desenvolvidos](BreadCrumb){
+- FIXME [Blocos que devem ser ajustado e desenvolvidos](BreadCrumb){ {c}
 
       - HACK 1. BreadCrumb;
 
@@ -30,7 +29,7 @@ os Requisitos cobrados serão:
 
 {cm:2023-01-25}
 
-- FIXME Bloco de Preço com Desconto deve ser CUSTOM
+* FIXME Bloco de Preço com Desconto deve ser CUSTOM
 
 * FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX.
 

store/blocks/pdp/product.jsonc

@@ -1,14 +1,7 @@
 {
   "store.product": {
     "children": [
-      "html#breadcrumb",
-      "condition-layout.product#availability",
-      "flex-layout.row#description",
-      "flex-layout.row#specifications-title",
-      "example-component",
-      "product-specification-group#table",
-      "shelf.relatedProducts",
-      "product-questions-and-answers"
+      "html#breadcrumb"
     ]
   },
   "html#breadcrumb": {

styles/css/vtex.breadcrumb.css

@@ -7,6 +7,20 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.container {
+  padding: 0 40px 16px;
+}
+.container .term, .container .termArrow {
+  display: none;
+}
+.container .term, .container .arrow, .container .homeLink {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
 .container .homeLink::before {
   content: "HOME";
 }

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

@@ -1,10 +1,22 @@
 .container{
-  .homeLink{
-    &::before{
-      content: "HOME";
-    }
-    .homeIcon{
-      display: none;
-    }
+  padding: 0 40px 16px;
+  .term,.termArrow{
+    display: none;
   }
+    .term,.arrow,.homeLink{
+      font-family: 'Open Sans',sans-serif;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: $color-gray6;
+    }
+    .homeLink{
+      &::before{
+        content: "HOME";
+      }
+      .homeIcon{
+        display: none;
+      }
+    }
 }

styles/sass/utils/_vars.scss

@@ -7,6 +7,7 @@ $color-gray2: #7d7d7d;
 $color-gray3: #f0f0f0;
 $color-gray4: #c4c4c4;
 $color-gray5: #e5e5e5;
+$color-gray6: #929292;
 
 $color-blue: #4267b2;