feat(GlTruncate): Add component to truncate text

Related issues #767 (closed) #72 (closed)

What does this MR do?

This MR adds a component GlTruncate which can be used to truncate long texts with ellipsis.

Screenshots

Position	Example
Start Middle End

Storybook	Truncation in GitLab
	Note - This not part of this MR, but will be implemented for gitlab#221208 (closed)

Few Notes on Implementation

1. Truncation (Ellipsizing) is done using CSS
2. Truncation in middle & start is using a special char - ‎ around the text, which is a non-printing character. This is because:

• Our entire implementation is based on the idea of using direction: rtl;. This also happens to swap the non-alphanumic characters around the text due to how bidi algorithm works which is problematic, because

Original Text	Expected Truncated Text	Actual Truncated Text
first_last$	first..._last$	first...$last_

• Alternative approach would be to use <bdi> element instead of ‎ but it's lacking browser support.

Useful links

1. Initial POC - https://codepen.io/samdbeckham/pen/JjYpNMd
2. https://stackoverflow.com/questions/20798667/why-is-a-trailing-punctuation-mark-rendered-at-the-start-with-directionrtl
3. https://www.w3.org/International/articles/inline-bidi-markup/#lrmrlm

Why not a JS Solution

We did try implementing a JS solution (Demo) as well and found out that adding too many event listeners would be an overhead, CSS wins.

Thanks to @markrian and @samdbeckham for all the help.

Does this MR meet the acceptance criteria?

Conformity

• Code review guidelines.
• GitLab UI's contributing guidlines.
• If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
• If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
• If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • GitLab: mr_url
  • Customers Portal: mr_url
  • Status Page: mr_url
• Added the ~"component:*" label(s) if applicable.