Website - CodeBlock height toggle docs (#2845)

Co-authored-by: Andrew Gendel <[email protected]>
Co-authored-by: Jory Tindall <[email protected]>
Co-authored-by: Kristin Bradley <[email protected]>

Author: 4 people

website/docs/components/code-block/partials/code/how-to-use.md

@@ -149,12 +149,12 @@ loadInitializers(App, config.modulePrefix);"
 
 ### Limit height
 
-Code content uses `auto` height by default but you can opt to set a `maxHeight` value to save space. Vertical scrolling is enabled as part of this feature allowing users to scroll vertically to view the overflowing content.
+Code content uses `auto` height by default but you can opt to set a `maxHeight` value to save space. If the content height exceeds the set max height, vertical scrolling is enabled to view the overflowing content and a toggle button is displayed to expand the height and show the Code Block content in its entirety.
 
 ```handlebars
 <Hds::CodeBlock
   @language="javascript"
-  @maxHeight="105px"
+  @maxHeight="130px"
   @value="import Application from `@ember/application`;
 import Resolver from `ember-resolver`;
 import loadInitializers from `ember-load-initializers`;

website/docs/components/code-block/partials/guidelines/guidelines.md

@@ -69,6 +69,21 @@ Line numbers are displayed by default and can make longer blocks of code and sni
 In the Figma component, the code examples have the appropriate number of lines by default but must be manually hidden or shown to match the length of custom snippets.
 !!!
 
+## Height toggle button
+
+When displaying longer code snippets, it can be helpful to let users expand and collapse the content to save space in the UI. Setting a `maxHeight` on the Code Block limits how much is shown by default. If the content exceeds this height, a **Show more code** button will be displayed at the bottom of the block, allowing users to expand it. Interacting with the button again collapses the block back to its original height.
+
+In Figma, this is enabled by setting `hasToggleHeightButton` to true. The button is placed inside a footer element that only appears when the content overflows, keeping the layout clean when the toggle isn’t needed.
+
+![Collapsed Code Block showing limited lines and a 'Show more code' button at the bottom.](/assets/components/code-block/code-block-collapsed.png)
+
+Interacting with this button removes the height limit, expanding the Code Block to display the full code snippet. 
+
+![Expanded Code Block with all lines visible and a 'Show less code' button displayed at the bottom](/assets/components/code-block/code-block-expanded.png)
+
+Interacting with it again collapses the Code Block back to its set `maxHeight`.
+
+
 ## Line highlighting
 
 Use line highlighting to target and call attention to specific lines or multiple lines within a block of code.