Define pattern for breadcrumbs/history in `Page`

[chris-at-jobber]

A few one-off instances of "back button" breadcrumbs have been used alongside Page - a good indicator that it's time to incorporate this mechanism into the component itself, so end users can just use the pattern without having to solve it themselves.

An initial idea explored in a since-closed exploratory PR was to add a single small tertiary button that would simply jump the user up one level in the hierarchy of the application. For example, if you were looking at something like...

settings/notifications

the Back button would return you to

settings.

Outstanding Questions

Some other considerations that we would want to resolve (thanks @joelwarrington-jobber!) are:

Multi-level breadcrumbs

If multi-level breadcrumbs were to be a possibility, we could make it so that the breadcrumb type is an array, if the length is 1, use the button style and then some other type of style for multiple?

Additional properties

For added flexibility, would we be able to have 2 additional properties of a breadcrumb?

interface breadcrumb {
  label: string;
  /* Default = "../" */
  url?: string;
  onClick?(): void;
}

If the onClick property is passed, the url is ignored

History vs hierarchy

Do we need to account for the user's X recently-visited views in the breadcrumbs, rather than the application hierarchy? Is that the responsibility of a breadcrumb? E.g. in the above use case of being on a specific settings view...

History could look something like:

home / schedule / invoices ➡️ Notifications Settings (maybe there's a prompt on that view to adjust your invoicing notifications)

Hierarchy would look like:

settings ➡️ Notifications Settings

Does this need to be something that Page is even responsible for? (Could/should end-users configure Page to their needs?)