feat(components): added ability to expand/collapse large code blocks

Side:
- updated contribution docs accordingly

Author: Kirill Bolotsky

CONTRIBUTING_FILE_FORMAT.md

@@ -324,6 +324,31 @@ See _'Then do this?'_ text line between tabs? **You can not do that**. Put nothi
 
     ```
 
+    </CodeGroup>
+
+#### State control
+
+Large code blocks (>400px) by default have a collapsed state, i.e. have a max-height prop of `400px` and user can change their behavior via toggler:
+
+![Code Block States](internal-images/code-block-states.png)
+
+If you are using `CodeGroup` wrapper you can specify the initial state of code blocks via `isInitiallyExpanded` prop which works very similarly to the other available props:
+
+    <CodeGroup labels={["Nice code!", "This one is better", "Oh my.."]} lineNumbers={[true, true, true]} isInitiallyExpanded=[true, false, false]>
+
+    ```javascript
+    // a lot of lines of important code
+    ```
+
+    ```javascript
+    // a lot of lines of not so important code
+    ```
+
+    ```javascript
+    // a lot of lines of not so important code
+    ```
+
+
     </CodeGroup>
 
 ## Table data

internal-images/code-block-states.png

@@ -2,12 +2,37 @@ import classNames from 'classnames';
 import { WithCopyButton } from 'components/shared/with-copy-button';
 import Highlight, { defaultProps } from 'prism-react-renderer';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 
 import styles from './code.module.scss';
 
-const Code = ({ children, showLineNumbers }) => {
+const Code = ({ children, showLineNumbers, isInitiallyExpanded }) => {
   if (!children) return null;
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [height, setHeight] = useState('100%');
+  const containerRef = useRef(null);
+  const toggleHandler = () => setIsExpanded((prev) => !prev);
+
+  useEffect(() => {
+    if (containerRef?.current) {
+      const computedHeight = containerRef.current.offsetHeight;
+      if (computedHeight > 420) {
+        setHeight(computedHeight);
+      }
+    }
+    if (!isInitiallyExpanded) {
+      setIsExpanded(false);
+    }
+  }, [containerRef]);
+
+  let toggler = null;
+  if (height !== '100%') {
+    toggler = (
+      <button className={styles.toggler} type="button" onClick={toggleHandler}>
+        {isExpanded ? 'Collapse' : 'Expand'}
+      </button>
+    );
+  }
 
   return (
     <WithCopyButton dataToCopy={children.props.children}>
@@ -19,6 +44,11 @@ const Code = ({ children, showLineNumbers }) => {
         {({ className, tokens, getLineProps, getTokenProps }) => (
           <pre
             className={classNames(className, styles.code, styles.codeContainer)}
+            ref={containerRef}
+            style={{
+              transition: 'max-height .2s ease',
+              maxHeight: isExpanded ? height : '400px',
+            }}
           >
             <code className={styles.code}>
               {tokens.map((line, i) => {
@@ -43,18 +73,21 @@ const Code = ({ children, showLineNumbers }) => {
           </pre>
         )}
       </Highlight>
+      {toggler}
     </WithCopyButton>
   );
 };
 
 Code.propTypes = {
   children: PropTypes.node,
   showLineNumbers: PropTypes.bool,
+  isInitiallyExpanded: PropTypes.bool,
 };
 
 Code.defaultProps = {
   children: null,
   showLineNumbers: false,
+  isInitiallyExpanded: false,
 };
 
 export default Code;

src/components/shared/code/code.js

@@ -18,6 +18,25 @@
   display: table-cell;
 }
 
+.toggler {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  padding: 3px 5px 2px 6px;
+  background-color: $color-secondary;
+  border-radius: 2px;
+  height: 20px;
+  border: none;
+  outline: none;
+  color: $color-tertiary;
+  font-weight: 600;
+  line-height: initial;
+  font-size: 10px;
+  color: $color-tertiary;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
 .code-container {
   :global {
     pre {

src/components/shared/code/code.module.scss

@@ -19,8 +19,4 @@
   color: $color-tertiary;
   text-transform: uppercase;
   cursor: pointer;
-  @include sm-down {
-    top: unset;
-    bottom: 10px;
-  }
 }

src/components/shared/with-copy-button/with-copy-button.module.scss

@@ -11,6 +11,26 @@ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 379CE192D
 echo "deb https://dl.bintray.com/loadimpact/deb stable main" | sudo tee -a /etc/apt/sources.list
 sudo apt-get update
 sudo apt-get install k6
+sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 379CE192D401AB61
+echo "deb https://dl.bintray.com/loadimpact/deb stable main" | sudo tee -a /etc/apt/sources.list
+sudo apt-get update
+sudo apt-get install k6
+sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 379CE192D401AB61
+echo "deb https://dl.bintray.com/loadimpact/deb stable main" | sudo tee -a /etc/apt/sources.list
+sudo apt-get update
+sudo apt-get install k6
+sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 379CE192D401AB61
+echo "deb https://dl.bintray.com/loadimpact/deb stable main" | sudo tee -a /etc/apt/sources.list
+sudo apt-get update
+sudo apt-get install k6
+sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 379CE192D401AB61
+echo "deb https://dl.bintray.com/loadimpact/deb stable main" | sudo tee -a /etc/apt/sources.list
+sudo apt-get update
+sudo apt-get install k6
+sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 379CE192D401AB61
+echo "deb https://dl.bintray.com/loadimpact/deb stable main" | sudo tee -a /etc/apt/sources.list
+sudo apt-get update
+sudo apt-get install k6
 ```
 
 > #### ⚠️ If you are behind a firewall or proxy