Internal issue 2785 - Feature request - Create Collapsible text area for large paragraphs & also handle long single strings

h2. 💬 Feature

name: Create Collapsible text area for large paragraphs & also handle long single strings
about: Create ICDS component to expand/collapse large areas of text - see info below.
title: ''
labels: ''
assignees: ''
type: 'Feature improvement'

h2. Summary

Create ICDS component to expand/collapse large areas of text.

h2. 💬 Description

We are currently writing an application that processes a lot of data. This data can come in the form of both large paragraphs of many lines. Also, & importantly, single pieces of text; for instance a single string of hundreds of characters.
If the IcTextArea is used to display the information, the text is obviously trimmed. Using IcTypography, if there is a large single string, the text goes off the right side of the page.
We have created our own component to do this using IcTypography that trims to 3 lines, & has a 'Read more' &/or 'Read less' eventListener link under the 3rd line to expand / collapse the text.
This has been done using useState() useEffect() & useRef(), & is triggered by checking the clientHeight of the browser on render. There are some problems with this; for instance if a page is rendered quickly, the clientHeight is not set. Hence we have had to incorporate a timeout which is not ideal.
There are some npm packages available that do something similar, but none are perfect & none handle large single strings.

Hence this is a feature request for ICDS to create such a component as described above.

h2. 💰 Use value

This will be used by many teams across our organisation. It will also benefit other corporations / gvt departments that handle large amounts of data. Users will see enormous benefit as it will reduce screen real estate & allow them to get a prece of the data by quickly reading the viewable lines.

h2. 📝 Acceptance Criteria

Requirements;

* Text will be displayed in a large text area (such as IcTextField).
* Clickable link &/or chevron to expand or collapse the text.
* Chevron &/or link to be amendable (change chevron icon & the link text).
* Ability to add a header label.
* A property to define the number of lines viewable.
* Be able to handle a single large string (100's of characters) & concatenated with '...' at the end of the last line. Let this be an option also.

h2. ✏ Designs

If there's a Figma design file (or other mock-up), include it here.

## 🧾 Guidance
If there's written guidance or documentation, include a link to it here.

h2. Additional info

Tell us anything else useful to help us understand your suggestion.

Start by reviewing the existing IcTextArea, IcTextField, and IcTypography components and their surrounding documentation to understand the component conventions. The work is done when the new component supports configurable visible lines, expandable and collapsible text, customizable link or chevron controls, an optional header, and long single strings with optional ellipsis handling.

Written by the indexing model from the issue text.