Add collapseOnMobile breadcrumbs flag

[vanitabarrett]

What

Adds a collapseOnMobile flag to the breadcrumbs component. When set to true, this flag means the breadcrumb component will:

• Collapse to only showing the first and last item on tablet breakpoint and below
• Long breadcrumb text will wrap over multiple lines instead of the whole breadcrumb moving to a new line

Note: this change has been implemented on GOVUK and we wish to contribute this change back to the design system.

Why

[36degrees]

As discussed on Slack, from talking to the team we’re not 100% sure about the touch target size changes at the minute because:

• it changes the position of the breadcrumb – because it has a lot more padding, there’s more space between the header and the breadcrumb when using collapseOnMobile, compared to the ‘normal’ breadcrumb or the back link
• this change wasn't called out when it was put to the working group (which is our fault, sorry!)

We've agreed to just ship the behaviour that hides everything between the first and last breadcrumb, and create an issue to review the touch target size separately (with yourself and the designer that worked on it).

[36degrees]

Raised a separate issue to look at the breadcrumb touch target size: #1817

[vanitabarrett]

Updated PR to remove touch target change but keep:

• collapsing to first and last item only on mobile
• Long breadcrumb text will wrap over multiple lines instead of the whole breadcrumb moving to a new line

[hannalaakso]

Thanks for your work on this @vanitabarrett 👍