From a3fe17c8be9807540358a07334a409cfcbb74867 Mon Sep 17 00:00:00 2001
From: "Taushanova-Atanasova, Inna" <inna.taushanova-atanasova@sap.com>
Date: Thu, 27 Dec 2018 16:29:15 -0500
Subject: [PATCH] Adds a button that shows/hides the example code snippets

---
 src/documentation/DocsTile/DocsTile.js | 66 +++++++++++++++++++++-----
 1 file changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/documentation/DocsTile/DocsTile.js b/src/documentation/DocsTile/DocsTile.js
index 89825eaaf..e2b0268a6 100644
--- a/src/documentation/DocsTile/DocsTile.js
+++ b/src/documentation/DocsTile/DocsTile.js
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { Component } from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { googlecode } from 'react-syntax-highlighter/styles/hljs';
+import { Button } from '../../Button/Button';
 
 export const DocsTile = props => {
     const docsTileStyle = {
@@ -29,22 +30,63 @@ export const DocsTile = props => {
     );
 };
 
-export const DocsText = props => {
-    const docsTextStyle = {
+export class DocsText extends Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+          showCode: false
+      };
+    }
+    handleBtnClick = () => {
+        this.setState(prevState => ({
+            showCode: !prevState.showCode
+        }));
+        console.log(this.state.showCode);
+    }
+    docsTextStyle = {
         padding: '15px',
         fontSize: '13px',
         border: '1px solid #ccc',
+        borderTop: 'none',
         borderRadius: '0 0 4px 4px',
         backgroundColor: '#fff !important',
         margin: '0'
     };
-    const { children } = props;
+    docsBtnStyle = {
+        padding: '5px',
+        fontSize: '13px',
+        border: '1px solid #ccc',
+        backgroundColor: '#fff !important',
+        margin: '0',
+        textAlign: 'center'
+    };
+    docsBtnStyleHiddenCode = {
+        padding: '5px',
+        fontSize: '13px',
+        border: '1px solid #ccc',
+        borderRadius: '0 0 4px 4px',
+        backgroundColor: '#fff !important',
+        margin: '0',
+        textAlign: 'center'
+    };
+    render() {
+        const { children } = this.props;
+        return (
+            <React.Fragment>
+                <div style={this.state.showCode ? (this.docsBtnStyle) : (this.docsBtnStyleHiddenCode)}>
+                    <Button option='light' onclick={() => this.handleBtnClick()}>
+                        {
+                            this.state.showCode ? ('Hide Code') : ('Show Code')
+                        }
+                    </Button>
+                </div>
+                {this.state.showCode && <pre style={this.docsTextStyle}>
+                    <SyntaxHighlighter language='html' style={googlecode}>
+                        {children}
+                    </SyntaxHighlighter>
+                </pre>}
+            </React.Fragment>
+        );
+    }
+}
 
-    return (
-        <pre style={docsTextStyle}>
-            <SyntaxHighlighter language='html' style={googlecode}>
-                {children}
-            </SyntaxHighlighter>
-        </pre>
-    );
-};