Feature/show more show less text

[AndreyGoranov]

Motivation and context

• Better UX some texts are way too long and should be partially hidden until user decides to view them full length.

• Fixes: Implement 'Show more / Show less' button to longer texts on About page #1091

• Uses: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp and https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

-Problem: To have the ability to truncate longer text and control how visible it should be by rows count anywhere in the app.

-How:

1. By creating a reusable component that accepts text and rows limit.
2. The component uses local state to handle visibility of the text. It uses WebkitLineClamp for smooth display of the text by rows and adding ellipsis at the last row.
3. It compares the current height of the text element with the scroll height (current height + the hidden text element height.
4. The component also listens for screen size changes in order to support responsive design.
5. The component can be used solo or could be nested inside other tags like paragraph for example and will still work as expected.

Screenshots:

| Before





| After |
| ------------------- | ------------------ |
| [before screenshot] | [after screenshot] |

Testing

1. Testing by clicking the small text and expecting the text to expand or hide
2. Resizing the screen testing if the button hides if the text content is short and doesn't require truncating
3. Toggling different states of the text then resizing the screen;
4. Passing 0 rowsLimit or null as rowsLimit
5. Passing empty string as text
6. Changing the language
7. Refreshing the page
   -Environments: Chrome , Safari , Firefox

New environment variables:

• env var : env var details

New dependencies:

• dependency : dependency details

New dev dependencies:

• dependency : dependency details

[ani-kalpachka]

Closing this PR as duplicate of #1139
Thanks again for the effort!