Merge pull request 'feature/breadcrumb' (#1) from feature/breadcrumb into develop

Reviewed-on: #1

store/blocks/pdp/product.jsonc

@@ -16,7 +16,7 @@
       "testId": "breadcrumbs",
       "blockClass": "pdp-breadcrumb"
     },
-    "children": ["breadcrumb"]
+    "children": ["breadcrumb#pdp-breadcrumb"]
   },
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
@@ -181,5 +181,12 @@
         "Pinterest": true
       }
     }
+  },
+
+  "breadcrumb#pdp-breadcrumb": {
+    "props": {
+      "homeIconSize": 0,
+      "showOnMobile": true
+    }
   }
 }

styles/css/agenciamagma.store-theme.css

@@ -7,10 +7,19 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.html {
-  background-color: red;
-}
-
 .html--pdp-breadcrumb {
-  background-color: green;
+  width: 100%;
+  padding: 0 40px;
+}
+@media screen and (min-width: 1025px) {
+  .html--pdp-breadcrumb {
+    width: 94.4444444444%;
+    padding: 0;
+    margin: 0 auto;
+  }
+}
+@media screen and (min-width: 1921px) {
+  .html--pdp-breadcrumb {
+    width: 68.75%;
+  }
 }

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,47 @@
+/*
+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 {
+  width: 100%;
+  display: inline-flex;
+  flex-wrap: wrap;
+  flex-basis: 100%;
+  align-items: baseline;
+}
+
+.termArrow {
+  padding: 0;
+}
+.termArrow .caretIcon {
+  display: none;
+}
+
+.term {
+  font-size: 0;
+}
+
+.homeLink::before {
+  content: "Home";
+  font-size: 14px;
+  line-height: 20.12px;
+}
+
+.arrow--1 .link {
+  font-size: 0;
+}
+.arrow--1 .link::before {
+  content: "Sapatos";
+  font-size: 14px;
+  line-height: 20.12px;
+}
+
+.arrow--2 .link {
+  font-size: 14px;
+  line-height: 20.12px;
+}

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

@@ -1,8 +1,14 @@
-.html {
-  background-color: red;
-}
-
 .html--pdp-breadcrumb {
-  background-color: green;
-}
+  width: 100%;
+  padding: 0 40px;
 
+  @media screen and (min-width: 1025px) {
+    width: 94.44444444444444%;
+    padding: 0;
+    margin: 0 auto;
+  }
+
+  @media screen and (min-width: 1921px) {
+    width: 68.75%;
+  }
+}

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

@@ -0,0 +1,47 @@
+.container {
+  width: 100%;
+  display: inline-flex;
+  flex-wrap: wrap;
+  flex-basis: 100%;
+  align-items: baseline;
+}
+
+.termArrow {
+  padding: 0;
+
+  .caretIcon {
+    display: none;
+  }
+}
+
+.term {
+  font-size: 0;
+}
+
+// manipulation fonts with before
+.homeLink {
+  &::before {
+    content: "Home";
+    font-size: 14px;
+    line-height: 20.12px;
+  }
+}
+
+.arrow--1 {
+  .link {
+    font-size: 0;
+
+    &::before {
+      content: "Sapatos";
+      font-size: 14px;
+      line-height: 20.12px;
+    }
+  }
+}
+
+.arrow--2 {
+  .link {
+    font-size: 14px;
+    line-height: 20.12px;
+  }
+}