web: compound `PageHeader` component

Created by: valerybugakov

Context

A proposal for improving the PageHeader component API in response to changes required for accessibility fixes. The component API has grown and has become more coupled to components used in the internal implementation. To make the PageHeader component API more flexible and extensible, we can lean more into the composition of compounds component that would expose props of nested components (e.g., HeadingProps) automatically without polluting the top-level interface.

<PageHeader
    annotation="Hello world!"
    description="Enter the description for your section here. This is useful on list and create pages."
>
    <PageHeader.Heading as="h2" styleAs="h1">
        <PageHeader.Breadcrumb to="/level-0" icon={PuzzleOutlineIcon} />
        <PageHeader.Breadcrumb to="/level-1">Level 1</PageHeader.Breadcrumb>
        <PageHeader.Breadcrumb>Level 2</PageHeader.Breadcrumb>
    </PageHeader.Heading>
</PageHeader>

We can use this approach more frequently for components with growing complexity to make them flexible. Especially it can be helpful for components reused in multiple client applications with slightly different requirements.

Changes

• Added two subcomponents to the PageHeader component
  • PageHeader.Heading to expose Heading API.
  • PageHeader.Breadcrumb to use a more Reactish approach for defining PageHeader breadcrumbs.
• Fixed HeadingElement type export warning.

Test plan

Ensure that there're no visual changes to the PageHeader component.

App preview:

• Web
• Storybook

Check out the client app preview documentation to learn more.