feat: Add friendly-wrap component

This MR is a follow up for https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/27600 The component was initially created in gitlab-ce but it was decided to move it into gitlab-ui.

What does this MR do?

This adds a FriendlyWrap component which can be used to wrap text in a predictable way by appending <wbr> elements to specific symbols in a string.

Internet Explorer 11

Since IE11 doesn't support the <wbr> element, we'll need to add a CSS fix to Gitlab CE/EE to make sure it works as expected.

wbr {
  display: inline-block;
}

This fix is also documented in the component's readme.

Usage

Default

<friendly-wrap text="/some/file/path" />

The code above renders to the following HTML:

<span class="text-break">/<wbr>some/<wbr>file/<wbr>path</span>

Custom symbols

FriendlyWrap wraps text on slashes by default but this can be customized with the symbols prop:

<friendly-wrap
  :symbols="[';', '-', '.']"
  text="some;text-that.needs;to-be.wrapped"
/>

Which renders to:

<span class="text-break">some;<wbr>text-<wbr>that.<wbr>needs;<wbr>to-<wbr>be.<wbr>wrapped</span>

Stop words

Symbols can also be words, eg:

<friendly-wrap
  :symbols="['and']"
  text="it goes on and on and on and on"
/>

Which renders to:

<span class="text-break">it goes on and<wbr> on and<wbr> on and<wbr> on</span>

Why is this needed?

This component is needed to address https://gitlab.com/gitlab-org/gitlab-ee/issues/10450 because some long file paths tend to overflow out of their container: