Merge pull request #2008 from meandavejustice/1693-add-breadcrumbs

feat(payments): add breadcrumb navigation to contact and sub list
mozilla · Jul 31, 2019 · e30527a · e30527a
2 parents 95e98c3 + 7c65f3d
commit e30527a
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 4 deletions.
diff --git a/packages/fxa-content-server/app/scripts/templates/support.mustache b/packages/fxa-content-server/app/scripts/templates/support.mustache
@@ -3,6 +3,12 @@
     <h1 id="fxa-manage-account"><span class="fxa-account-title">{{#t}}Firefox Accounts{{/t}}</span></h1>
   </header>
 
+  <ol class="breadcrumbs">
+    <li><a href="/settings">Account Home</a></li>
+    <li><a href="/subscriptions">Subscriptions</a></li>
+    <li><a href="/support">Contact Us</a></li>
+  </ol>
+
   <div class="settings-success-wrapper">
     <div class="success settings-success"></div>
   </div>

diff --git a/packages/fxa-content-server/app/styles/modules/_settings.scss b/packages/fxa-content-server/app/styles/modules/_settings.scss
@@ -62,6 +62,7 @@ body.settings #stage .settings {
   align-items: center;
   align-self: center;
   display: flex;
+  flex-direction: column;
   width: 100%;
 
   @include respond-to('big') {
@@ -781,3 +782,26 @@ section.modal-panel {
     padding-left: 25px;
   }
 }
+
+.breadcrumbs {
+  width: 100%;
+  margin-top: 0px;
+  margin-left: 100px;
+
+  li {
+    list-style: none;
+    float: left;
+    margin: 0px;
+    padding: 0px;
+
+    &:before {
+      content: "\003E";
+      padding: 0px 10px;
+    }
+
+    &:first-child:before {
+      content: "";
+      padding: 0px;
+    }
+  }
+}
diff --git a/packages/fxa-payments-server/src/components/AppLayout/index.scss b/packages/fxa-payments-server/src/components/AppLayout/index.scss
@@ -5,8 +5,12 @@
   background-image: url('./images/firefox-logo.svg');
 }
 
-#fxa-settings-header-wrapper #fxa-manage-account {
-  background-image: url('./images/firefox-logo.svg');
+#fxa-settings-header-wrapper {
+  flex-direction: column;
+
+  #fxa-manage-account {
+    background-image: url('./images/firefox-logo.svg');
+  }
 }
 
 #about-mozilla {
@@ -25,3 +29,26 @@
     background-image: url('./images/spinnergrey.png');
   }
 }
+
+.breadcrumbs {
+  margin-left: 100px;
+  margin-top: 0;
+  width: 100%;
+
+  li {
+    float: left;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    &::before {
+      content: '\003E';
+      padding: 0 10px;
+    }
+
+    &:first-child::before {
+      content: '';
+      padding: 0;
+    }
+  }
+}
diff --git a/packages/fxa-payments-server/src/components/AppLayout/index.tsx b/packages/fxa-payments-server/src/components/AppLayout/index.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect } from 'react';
+import React, { ReactNode, useEffect, useContext } from 'react';
+import { AppContext } from '../../lib/AppContext';
 
 import './index.scss';
 
@@ -47,6 +48,15 @@ export const SettingsLayout = ({
     return () => document.body.classList.remove('settings');
   }, [ children ]);
 
+  const { config } = useContext(AppContext);
+  const homeURL = `${config.servers.content.url}/settings`;
+  let breadcrumbs = (
+      <ol className="breadcrumbs">
+        <li><a href={homeURL}>Account Home</a></li>
+        <li><a href="/subscriptions">Subscriptions</a></li>
+      </ol>
+  );
+
   return (
     <AppLayout>
       <div className="settings">
@@ -58,6 +68,7 @@ export const SettingsLayout = ({
               <button id="signout" className="settings-button secondary-button">Sign out</button>
               */}
           </header>
+          {breadcrumbs}
         </div>
 
         <div id="fxa-settings">
@@ -75,4 +86,4 @@ export const SettingsLayout = ({
   );
 };
 
-export default AppLayout;
+export default AppLayout;