(WIP) refactoring code tabs, adding runnable code.

packages/website/ts/components/docs/code.tsx

@@ -9,10 +9,11 @@ import { zIndex } from 'ts/style/z_index';
 
 interface ICodeProps {
     children: string;
+    isRunnable?: boolean;
     lang?: 'html | typescript | solidity | python';
 }
 
-export const Code: React.FC<ICodeProps> = ({ children, lang = 'typescript' }) => {
+export const Code: React.FC<ICodeProps> = ({ children, lang = 'typescript', isRunnable = false }) => {
     const [isCopied, setIsCopied] = useState<boolean>(false);
     const copyButtonText = isCopied ? 'Copied!' : 'Copy';
 
@@ -31,43 +32,88 @@ export const Code: React.FC<ICodeProps> = ({ children, lang = 'typescript' }) =>
                 style={style}
                 showLineNumbers={false}
                 PreTag={CustomPre}
+                wrapLines={true}
             >
                 {children}
             </SyntaxHighlighter>
+
+            {!isRunnable && (
+                <RunWrapper>
+                    <ButtonsWrapper>
+                        <RunButton bgColor={colors.brandDark} color="white">
+                            Run
+                        </RunButton>
+                        <RunButton bgColor="white" color={colors.brandDark}>
+                            Reset
+                        </RunButton>
+                    </ButtonsWrapper>
+                    <Result />
+                </RunWrapper>
+            )}
         </CodeWrapper>
     );
 };
 
+const GUTTER = '10px';
+
 const customStyle = {
     overflowX: 'scroll',
     padding: '20px',
 };
 
+const RunWrapper = styled.div`
+    display: flex;
+    padding: ${GUTTER};
+`;
+
+const ButtonsWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    margin-right: ${GUTTER};
+`;
+
+const RunButton = styled(Button)`
+    width: 112px;
+    height: 40px;
+    line-height: 0;
+
+    &:first-of-type {
+        margin-bottom: 4px;
+    }
+`;
+
+const Result = styled.div`
+    background: white;
+    border: 1px solid ${colors.brandDark};
+    border-radius: 4px;
+    width: 100%;
+    min-height: 100%;
+`;
+
 const CustomPre = styled.pre`
     border-radius: 4px;
+    background-color: white;
+
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+
+    &::-webkit-scrollbar {
+        /* WebKit */
+        width: 0;
+        height: 0;
+    }
 
     code {
-        background-color: inherit !important;
-        border-radius: 0px;
-        font-family: 'Roboto Mono', sans-serif;
         border: none;
+        font-family: 'Roboto Mono', sans-serif;
         font-size: 0.875rem;
         line-height: 1.25em;
     }
-
-    /* code:last-of-type {
-        position: relative;
-        top: 10px;
-        top: 0;
-        padding-top: 0;
-        display: inline-block;
-
-    } */
 `;
 
 const StyledButton = styled(Button)`
     border-radius: 4px;
-    background: #ffffff;
+    background: white;
     border: 1px solid #eaeaea;
     color: ${colors.brandDark};
     font-size: 15px;
@@ -86,6 +132,7 @@ const ButtonWrapper = styled.div`
 const CodeWrapper = styled.div`
     position: relative;
     max-width: 702px;
+    background-color: ${colors.backgroundLight};
 `;
 
 const style = {

packages/website/ts/components/docs/tabs.tsx

@@ -1,7 +1,12 @@
 import { ReactNode } from 'react';
 import styled from 'styled-components';
 
-import { Tab as ReactTab, TabList as ReactTabList, TabPanel as ReactTabPanel, Tabs as ReactTabs } from 'react-tabs';
+import {
+    Tab as OriginalTab,
+    TabList as OriginalTabList,
+    TabPanel as OriginalTabPanel,
+    Tabs as OriginalTabs,
+} from 'react-tabs';
 
 import { colors } from 'ts/style/colors';
 
@@ -10,11 +15,9 @@ interface ITabProps {
     selectedTabClassName?: string;
 }
 
-const activeClass = {
+export const Tabs = styled(OriginalTabs).attrs({
     selectedTabClassName: 'is-active',
-};
-
-export const Tabs = styled(ReactTabs).attrs(activeClass)<ITabProps>`
+})<ITabProps>`
     margin-bottom: 1.875rem;
 
     .is-active {
@@ -23,7 +26,9 @@ export const Tabs = styled(ReactTabs).attrs(activeClass)<ITabProps>`
     }
 `;
 
-export const TabPanel = styled(ReactTabPanel).attrs(activeClass)<ITabProps>`
+export const TabPanel = styled(OriginalTabPanel).attrs({
+    selectedClassName: 'is-active',
+})<ITabProps>`
     background-color: ${colors.backgroundLight};
     border-radius: 4px;
     display: none;
@@ -33,15 +38,15 @@ export const TabPanel = styled(ReactTabPanel).attrs(activeClass)<ITabProps>`
     }
 `;
 
-export const TabList = styled(ReactTabList)<ITabProps>`
+export const TabList = styled(OriginalTabList)<ITabProps>`
     display: flex;
 `;
 
-export const Tab = styled(ReactTab)<ITabProps>`
+export const Tab = styled(OriginalTab)<ITabProps>`
     background-color: transparent;
     border-radius: 4px 4px 0 0;
     cursor: pointer;
-    padding: 12px;
+    padding: 12px 12px 13px;
     font-size: 1rem;
     color: ${colors.textDarkSecondary};
     font-weight: 300;