feat:#1 BreadCrumb alterado

react/components/Html/index.tsx

@@ -4,37 +4,48 @@ import { useCssHandles } from "vtex.css-handles";
 const CSS_HANDLES = ["html"] as const;
 
 type HtmlProps = {
-    children?: ReactNode,
+  children?: ReactNode;
   /**
    * Qual tag Html que deseja que seja usar
    *
    * @default div
    */
-    tag?: keyof React.ReactHTML
+  tag?: keyof React.ReactHTML;
   /**
    * Classes CSS extras que deseja adicionar.
    * Feito para uso de [classes do tachyons](https://tachyons.io/)
    */
-    tachyonsClasses?: string
+  tachyonsClasses?: string;
   /**
    * Se caso quiser usar esse componente
    * para adicinar um texto simples
    */
-    text?: string
+  text?: string;
   /**
    * Tag ID para
    */
-    testId?: string
+  testId?: string;
-}
+};
 
-export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => {
+export const Html = ({
+  children = null,
+  tag = "div",
+  text = "",
+  tachyonsClasses: classes = "",
+  testId,
+}: HtmlProps) => {
   const { handles } = useCssHandles(CSS_HANDLES);
 
   const props = {
     className: `${handles.html} ${classes}`,
-      "data-testid": testId
+    "data-testid": testId,
   };
-    const Children = <>{children}{text}</>;
+  const Children = (
+    <>
+      {children}
+      {text}
+    </>
+  );
   const Element = React.createElement(tag, props, Children);
 
   return <>{Element}</>;

store/blocks/pdp/product.jsonc

@@ -101,12 +101,12 @@
     },
     "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-separator",
-      "product-identifier.product",
       "sku-selector",
       "product-quantity",
       "product-assembly-options",

styles/configs/font-face.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Open Sans", sans-serif;
+  src: url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
+}

styles/configs/style.json

@@ -253,84 +253,84 @@
         "measure": [30, 34, 20],
         "styles": {
           "heading-1": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans sans-serif",
             "fontWeight": "700",
             "fontSize": "3rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-2": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans sans-serif",
             "fontWeight": "700",
             "fontSize": "2.25rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-3": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans sans-serif",
             "fontWeight": "700",
             "fontSize": "1.75rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-4": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans sans-serif",
             "fontWeight": "normal",
             "fontSize": "1.5rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-5": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans sans-serif",
             "fontWeight": "normal",
             "fontSize": "1.25rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-6": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans sans-serif",
             "fontWeight": "normal",
             "fontSize": "1.25rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "body": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans sans-serif",
             "fontWeight": "normal",
             "fontSize": "1rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans sans-serif",
             "fontWeight": "normal",
             "fontSize": "0.875rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "mini": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans sans-serif",
             "fontWeight": "normal",
             "fontSize": "0.75rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "action": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans sans-serif",
             "fontWeight": "500",
             "fontSize": "1rem",
             "textTransform": "uppercase",
             "letterSpacing": "0"
           },
           "action--small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans sans-serif",
             "fontWeight": "500",
             "fontSize": "0.875rem",
             "textTransform": "uppercase",
             "letterSpacing": "0"
           },
           "action--large": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans sans-serif",
             "fontWeight": "500",
             "fontSize": "1.25rem",
             "textTransform": "uppercase",

styles/css/agenciamagma.store-theme.css

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

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,51 @@
+@charset "UTF-8";
+/*
+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 */
+.container {
+  font-size: 14px;
+  color: #929292;
+  margin: 0 15px;
+}
+.container .homeIcon {
+  height: 0;
+}
+.container .homeLink::after {
+  content: "Home";
+  font-family: "Open sans", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
+.container .arrow--1::after {
+  content: "Sapatos";
+  font-family: "Open sans", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  margin-left: 7px;
+}
+.container .link--1 {
+  display: none;
+}
+.container .arrow--2::after {
+  content: "Sandália";
+  font-family: "Open sans", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  margin-left: 7px;
+}
+.container .link--2 {
+  display: none;
+}
+.container .termArrow,
+.container .term {
+  display: none;
+}

styles/css/vtex.flex-layout.css

@@ -43,7 +43,7 @@
 }
 
 .flexRow--deals {
-  background-color: #0F3E99;
+  background-color: #0f3e99;
   padding: 14px 0px;
 }
 

styles/css/vtex.product-identifier.css

@@ -1,3 +1,19 @@
-.product-identifier--productReference {
+/*
-  margin-bottom: 1rem;
+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 */
+.product-identifier__label,
+.product-identifier__separator {
+  display: none;
+}
+
+.product-identifier__value {
+  display: flex;
+  justify-content: flex-end;
+  color: rgba(146, 146, 146, 0.4784313725);
 }

styles/css/vtex.products-identifier.css

@@ -0,0 +1,13 @@
+/*
+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 */
+.product-identifier__label,
+.product-identifier__separator {
+  display: none;
+}

styles/css/vtex.store-components.css

@@ -7,6 +7,20 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.newsletter {
+.container .productBrand {
-  background: red;
+  display: flex;
+  justify-content: flex-end;
+}
+.container .productBrand--quickview {
+  font-family: "Open Sans", sans-serif;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  margin-top: 0px;
+  color: #575757;
+}
+
+.product-identifier__label,
+.product-identifier__separator {
+  display: none;
 }

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

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

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

@@ -0,0 +1,48 @@
+.container {
+  font-size: 14px;
+  color: #929292;
+  margin: 0 15px;
+
+  .homeIcon {
+    height: 0;
+  }
+
+  .homeLink::after {
+    content: "Home";
+    font-family: "Open sans", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+  }
+
+  .arrow--1::after {
+    content: "Sapatos";
+    font-family: "Open sans", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    margin-left: 7px;
+  }
+
+  .link--1 {
+    display: none;
+  }
+
+  .arrow--2::after {
+    content: "Sandália";
+    font-family: "Open sans", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    margin-left: 7px;
+  }
+
+  .link--2 {
+    display: none;
+  }
+
+  .termArrow,
+  .term {
+    display: none;
+  }
+}

styles/sass/pages/product/vtex.product-identifier.scss

@@ -0,0 +1,10 @@
+.product-identifier__label,
+.product-identifier__separator {
+  display: none;
+}
+
+.product-identifier__value {
+  display: flex;
+  justify-content: flex-end;
+  color: #9292927a;
+}

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

@@ -1,3 +1,19 @@
-.newsletter{
+.container {
-    background: red;
+  .productBrand {
+    display: flex;
+    justify-content: flex-end;
+  }
+  .productBrand--quickview {
+    font-family: "Open Sans", sans-serif;
+    font-weight: 300;
+    font-size: 20px;
+    line-height: 34px;
+    margin-top: 0px;
+    color: #575757;
+  }
+}
+
+.product-identifier__label,
+.product-identifier__separator {
+  display: none;
 }