[feat] <pf-breadcrumb> element

[markcaron]

We need a Breadcrumbs component.

Note: not sure why it's singular ("breadcrumb") and not plural ("breadcrumbs").

Design

• PF spec

Dev Notes

• Proper WAI pattern (which PF follows)

Deviations from PF 1:1

• Worth noting that PF uses SVGs for the chevron dividers, when it would be incredibly easy (as well as more efficient) to just use a pseudo-element and CSS for the chevron. There's just no need to pass an SVG through for this symbol (see following comment)

[markcaron]

CSS chevron on a pseudo-element

This should get it roughly the same size as PF's design, though modify as needed:

a::after {
    content: "";
    position: relative;
    top: 0.75em;
    right: 0;
    display: inline-block;
    margin: 0 0.5em;
    width: 1.05em;
    height: 1.05em;
    box-shadow: inset 0.25rem 0.25rem 0 0.0625rem #151515;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: translateY(-0.5em) rotate(135deg) scale(.5);
}

[markcaron]

Good first issue.

Worth looking at @adamjohnson's PR in RHDS: RedHat-UX/red-hat-design-system#1535