[component]: Breadcrumb

[gfellerph]

Migrate the breadcrumb list component to the packages/components package.

Proposed markup structure

<post-breadcrumb home-url="/" home-text="Go home">
  <post-breadcrumb-item href="/">Link 1</post-breadcrumb-item>
  <post-breadcrumb-item>Current</post-breadcrumb-item>
</post-breadcrumb>

Alternative markup structure to make it easier to put items in the dropdown and mark the last breadcrumb item:

<post-breadcrumb>
    <post-breadcrumb-item></post-breadcrumb-item>
    <post-breadcrumb-item></post-breadcrumb-item>
    <post-breadcrumb-item></post-breadcrumb-item>
    <post-breadcrumb-item></post-breadcrumb-item>
    <post-breadcrumb-current></post-breadcrumb-current>
</post-breadcrumb>

Props

• homeURL: A valid URL to use on the home icon
• homeText: Accessible name for the home icon

Default slot

Only allowed children are <post-breadcrumb-item> elements.

Notes

• Renders a hidden section with the full length of items to check if there is enough space for all items before rendering the real items. If there is not enough space, ellipsis with a dropdown should render that lists all breadcrumb items but the last. If the last breadcrumb item does not have enough space to fully render, it should end in ellipsis. It should never overflow nor flow on two lines.

💻 Tasks

Preview Give feedback

1. [component]: Breadcrumb item #3277
   2 of 3
   📦 components +1
   
2. [component]: Menu #1242
   📦 components +1
   
3. Web component implementation
4. Documentation in Storybook
5. Visual regression tests
6. Design review