add breadcrumb to Page

packages/components/src/Page/Page.mdx

@@ -25,6 +25,7 @@ import { Page } from "@jobber/components/Page";
 
 <Playground>
   <Page
+    breadcrumb="Settings"
     title="Notifications"
     intro="Improve job completion rates, stop chasing payments, and boost your customer service by automatically communicating with your clients at key points before, during, and after a job. Read more about Notifications by visiting our [Help Center](https://help.getjobber.com/hc/en-us/articles/115009737128)."
   >
@@ -38,6 +39,12 @@ Using Page is pretty straightforward - after any navigational elements, Page
 should contain the content the user will be engaging with. If there is any sort
 of footer, it should exist after Page.
 
+The breadcrumb jumps up one level in the application's directory hierarchy, so
+the label should reflect the destination.
+
+- **Do:** use the breadcrumb's destination page title as the breadcrumb label
+- **Don't:** use "Back" or "Back to {destination}" as the breadcrumb label.
+
 ## Props
 
 <Props of={Page} />
@@ -48,6 +55,7 @@ of footer, it should exist after Page.
 
 <Playground>
   <Page
+    breadcrumb="Settings"
     title="Notification Settings"
     intro="This isn't just talk. Get into action with some buttons and menus."
     primaryAction={{ label: "Send Food Alert", onClick: () => alert("🥨") }}
@@ -99,6 +107,7 @@ Use a subtitle when you need to supplement a page title.
 
 <Playground>
   <Page
+    breadcrumb="Settings"
     title="Notifications"
     subtitle="Notify me of all the work"
     intro="Improve job completion rates, stop chasing payments, and boost your customer service by automatically communicating with your clients at key points before, during, and after a job. Read more about Notifications by visiting our [Help Center](https://help.getjobber.com/hc/en-us/articles/115009737128)."

packages/components/src/Page/Page.tsx

@@ -19,6 +19,12 @@ export interface PageProps {
    */
   readonly intro?: string;
 
+  /**
+   * Label for the "back" button when Page is nested.
+   * The breadcrumb button follows a relative URL to jump up one level.
+   */
+  readonly breadcrumb?: string;
+
   /**
    * Title of the page.
    */
@@ -61,6 +67,7 @@ export interface PageProps {
 
 // eslint-disable-next-line max-statements
 export function Page({
+  breadcrumb,
   title,
   intro,
   subtitle,
@@ -107,6 +114,15 @@ export function Page({
     <div className={pageStyles}>
       <Content>
         <Content>
+          {breadcrumb && (
+            <Button
+              icon="backArrow"
+              url="../"
+              label={breadcrumb}
+              type="tertiary"
+              size="small"
+            ></Button>
+          )}
           <div className={titleBarClasses} ref={titleBarRef}>
             <div>
               <Heading level={1}>{title}</Heading>