From 3579c1d8f555a7961fabb776071cb70bdd8379c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Fri, 2 Mar 2018 12:21:46 +0000
Subject: [PATCH] fix(my-joy-instances): fix breadcrumb routing to align with
 designs fixes #1294

---
 .../__snapshots__/breadcrumb.spec.js.snap     | 64 +++++++++++++++++--
 .../src/containers/navigation/breadcrumb.js   |  4 ++
 .../__snapshots__/index.spec.js.snap          |  4 +-
 packages/ui-toolkit/src/breadcrumb/index.js   |  2 +-
 4 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/packages/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap b/packages/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
index 592a7be8..b800ae64 100644
--- a/packages/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
+++ b/packages/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
@@ -73,8 +73,8 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
 }
 
 .c2 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
 }
 
 .c8 {
@@ -156,6 +156,34 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
         <div
           className="c5"
         >
+          <div
+            className="c6"
+          >
+            <h4
+              className="c7"
+              name="breadcrum-item"
+            >
+              Compute
+            </h4>
+            <svg
+              className="c8 "
+              height="6"
+              innerRef={undefined}
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
           <div
             className="c6"
           >
@@ -264,8 +292,8 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
 }
 
 .c2 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
 }
 
 .c8 {
@@ -347,6 +375,34 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
         <div
           className="c5"
         >
+          <div
+            className="c6"
+          >
+            <h4
+              className="c7"
+              name="breadcrum-item"
+            >
+              Compute
+            </h4>
+            <svg
+              className="c8 "
+              height="6"
+              innerRef={undefined}
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
           <div
             className="c6"
           >
diff --git a/packages/my-joy-instances/src/containers/navigation/breadcrumb.js b/packages/my-joy-instances/src/containers/navigation/breadcrumb.js
index 3624f374..f2f968f1 100644
--- a/packages/my-joy-instances/src/containers/navigation/breadcrumb.js
+++ b/packages/my-joy-instances/src/containers/navigation/breadcrumb.js
@@ -9,6 +9,10 @@ export default ({ match }) => {
   const instance = get(match, 'params.instance');
 
   const links = [
+    {
+      name: 'Compute',
+      pathname: '/'
+    },
     {
       name: 'Instances',
       pathname: '/'
diff --git a/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
index 0b684b7b..17caec9b 100644
--- a/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
@@ -98,8 +98,8 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
 }
 
 .c2 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
 }
 
 .c0 {
diff --git a/packages/ui-toolkit/src/breadcrumb/index.js b/packages/ui-toolkit/src/breadcrumb/index.js
index 1f16177d..e590f25d 100644
--- a/packages/ui-toolkit/src/breadcrumb/index.js
+++ b/packages/ui-toolkit/src/breadcrumb/index.js
@@ -14,7 +14,7 @@ const BreadcrumContianer = styled(Container)`
  */
 export default ({ children, ...rest }) => (
   <BreadcrumContianer {...rest} fluid>
-    <Padding top={2} bottom={2}>
+    <Padding top={1} bottom={1}>
       <Container>
         <Row name="breadcrum">
           <Col xs={12}>{children}</Col>