feat(components): added fade out overlay for expandable code blocks (#143)

Note, that this features disables previously accessible scrolling in collapsed mode.

Author: Kirill Bolotsky

src/components/shared/code/code.js

@@ -42,7 +42,8 @@ const Code = ({ children, showLineNumbers, showHeightToggler }) => {
 
   let toggler = null;
   let containerStyles = {};
-  // if `height` isn't equla default height,
+  let overlayStyles = { height: 0 };
+  // if `height` isn't equal default height,
   // code blocks fits the height requirements
   // for toggler to be shown
   if (height !== DEFAULT_HEIGHT) {
@@ -53,6 +54,10 @@ const Code = ({ children, showLineNumbers, showHeightToggler }) => {
     );
     containerStyles = {
       maxHeight: isExpanded ? height : `${MAX_HEIGHT}px`,
+      overflowY: 'hidden',
+    };
+    overlayStyles = {
+      height: isExpanded ? 0 : undefined,
     };
   }
 
@@ -92,6 +97,7 @@ const Code = ({ children, showLineNumbers, showHeightToggler }) => {
           </pre>
         )}
       </Highlight>
+      <div className={styles.overlay} style={overlayStyles} />
       {toggler}
     </WithCopyButton>
   );

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

@@ -4,6 +4,7 @@
   overflow-y: auto;
   text-align: left;
   transition: max-height 0.2s ease-in-out;
+  position: relative;
   @include no-scrollbars;
 }
 
@@ -126,3 +127,13 @@
     }
   }
 }
+
+.overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 200px;
+  transition: height 0.2s ease-in-out;
+  background: linear-gradient(to bottom, transparent, $color-primary);
+}