Add a show more / show less button to component or pattern demos to expand or collapse the code snippet.

[DBD324]

Summary

Some code snippets are very long and if displayed in full would cause the page length to be very long. A show more / show less button would allow the snippets to be collapsed when not in use reducing the page length.

💬 Description

Explore ways of adding show more/less to component demos.
Consider a button in the toolbar, a text link in the snippet itself, or a floating action button.

💰 User value

Allows pages to be shortened avoiding lengthy page scrolls. Allows full code to be viewed upon request.

📚 User Stories

If relevant, describe the high-level functionality as user stories.

As an ICDS user:
I need to be able to expand and collapse code snippets
So that they don't cause page lengths to be unnecessarily long.

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Given that a code demo is being set up
When being configured
Then an option exists to allow the snippet to be expandable
and an option exists to set initial state of collapsed or expanded,
and an option exists to set the number of lines displayed in the collapsed state.

Given that an expandable code snippet is being set up
When specifying the code
Then an option exists to specify the collapsed code in full, and the expanded code in full.
(this is so that aspects of the code can be hidden from the start of the snippet as well as the end, such as with imports)

Given that an expandible code demo exists
When an external trigger occurs
Then an option to programmatically control the expansion can be used.

Given that an expandible code demo exists
When rendered
Then a UI control exists to expand or collapse the snippet.

Given that an expandible code demo exists
When the expand button is actioned,
Then the code snippet should expand to show the snippet in full
And page content below should be pushed to accommodate.

✏ Designs

Please see the 'Component Library - ICDS Guidance Site' Figma file for visual designs.

## 🧾 Guidance
N/A

Additional info

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

[GCHQ-Developer-847]

Just another thing to keep in mind about this - when the user clicks the "Copy code" button, we'd probably want it to copy whichever amount of code is visible, i.e. once you've expanded the code, it will change to copying the longer amount code.