From f29c897da71029fcd74173da99d71f66c0a828f3 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Sat, 21 Jan 2023 17:47:29 -0300
Subject: [PATCH] feat(breadcrumb): created initial styles

---
 store/blocks/pdp/product.jsonc                |  9 ++++-
 styles/css/agenciamagma.store-theme.css       |  7 ++--
 styles/css/vtex.breadcrumb.css                | 33 +++++++++++++++++++
 .../product/agenciamagma.store-theme.scss     |  8 ++---
 .../sass/pages/product/vtex.breadcrumb.scss   | 30 +++++++++++++++++
 5 files changed, 76 insertions(+), 11 deletions(-)
 create mode 100644 styles/css/vtex.breadcrumb.css
 create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 6a916dc..ebb3d11 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/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
+    }
   }
 }
diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css
index 5e37ba5..6c3aa81 100644
--- a/styles/css/agenciamagma.store-theme.css
+++ b/styles/css/agenciamagma.store-theme.css
@@ -7,10 +7,7 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.html {
-  background-color: red;
-}
-
 .html--pdp-breadcrumb {
-  background-color: green;
+  width: 271.25px;
+  padding: 0 40px;
 }
\ No newline at end of file
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
new file mode 100644
index 0000000..587d8dc
--- /dev/null
+++ b/styles/css/vtex.breadcrumb.css
@@ -0,0 +1,33 @@
+/*
+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: flex;
+  flex-wrap: wrap;
+}
+
+.homeLink::before {
+  content: "Home";
+}
+
+.arrow {
+  display: block;
+}
+
+.termArrow {
+  padding: 0;
+}
+.termArrow .caretIcon {
+  display: none;
+}
+
+.term {
+  font-size: 0;
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss
index ea7d5b9..5c11d40 100644
--- a/styles/sass/pages/product/agenciamagma.store-theme.scss
+++ b/styles/sass/pages/product/agenciamagma.store-theme.scss
@@ -1,8 +1,6 @@
-.html {
-  background-color: red;
-}
+$containers: ();
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  width: 271.25px;
+  padding: 0 40px;
 }
-
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
new file mode 100644
index 0000000..30760ad
--- /dev/null
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -0,0 +1,30 @@
+.container {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.homeLink {
+  &::before {
+    content: "Home";
+  }
+}
+
+.arrow-1 {
+}
+
+.arrow {
+  display: block;
+}
+
+.termArrow {
+  padding: 0;
+
+  .caretIcon {
+    display: none;
+  }
+}
+
+.term {
+  font-size: 0;
+}