Refactored runnable code snippet

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

@@ -3,9 +3,10 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
 import { Button } from 'ts/components/button';
+import { CodeRun } from 'ts/components/docs/code_run';
+
 import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
-import { zIndex } from 'ts/style/z_index';
 
 interface ICodeProps {
     children: string;
@@ -17,122 +18,82 @@ export const Code: React.FC<ICodeProps> = ({ children, lang = 'typescript', isRu
     const [isCopied, setIsCopied] = useState<boolean>(false);
     const copyButtonText = isCopied ? 'Copied!' : 'Copy';
 
-    const handleCopyClick = () => setIsCopied(true);
+    const handleCopyClick = () => {
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 500);
+    };
+
+    const customStyle = {
+        overflowX: 'scroll',
+        padding: isRunnable ? '20px' : '10px',
+        backgroundColor: isRunnable ? 'white' : 'none',
+    };
 
     return (
         <CodeWrapper>
-            <ButtonWrapper>
-                <CopyToClipboard text={children} onCopy={handleCopyClick}>
-                    <StyledButton>{copyButtonText}</StyledButton>
-                </CopyToClipboard>
-            </ButtonWrapper>
+            <CopyToClipboard text={children} onCopy={handleCopyClick}>
+                <CopyButton>{copyButtonText}</CopyButton>
+            </CopyToClipboard>
             <SyntaxHighlighter
                 language={lang}
                 customStyle={customStyle}
                 style={style}
                 showLineNumbers={false}
-                PreTag={CustomPre}
+                CodeTag={CodeTag}
+                PreTag={PreTag}
                 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>
-            )}
+            {isRunnable && <CodeRun />}
         </CodeWrapper>
     );
 };
 
 const GUTTER = '10px';
+const BORDER_RADIUS = '4px';
 
-const customStyle = {
-    overflowX: 'scroll',
-    padding: '20px',
-};
-
-const RunWrapper = styled.div`
-    display: flex;
+const CodeWrapper = styled.div`
+    position: relative;
+    max-width: 700px;
     padding: ${GUTTER};
+    background-color: ${colors.backgroundLight};
+    border-radius: 0 ${BORDER_RADIUS} ${BORDER_RADIUS};
 `;
 
-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;
+const PreTag = styled.pre`
+    border: 1px solid ${colors.backgroundLight};
+    border-radius: ${BORDER_RADIUS};
 
     scrollbar-width: none; /* Firefox */
     -ms-overflow-style: none; /* IE 10+ */
 
     &::-webkit-scrollbar {
-        /* WebKit */
         width: 0;
         height: 0;
     }
-
-    code {
-        border: none;
-        font-family: 'Roboto Mono', sans-serif;
-        font-size: 0.875rem;
-        line-height: 1.25em;
-    }
 `;
 
-const StyledButton = styled(Button)`
-    border-radius: 4px;
-    background: white;
-    border: 1px solid #eaeaea;
-    color: ${colors.brandDark};
-    font-size: 15px;
-    font-weight: 300;
-    padding: 9px 12px 7px;
+const CodeTag = styled.code`
+    border: none;
+    font-family: 'Roboto Mono', sans-serif;
+    font-size: 0.875rem;
+    line-height: 1.25em;
 `;
 
-const ButtonWrapper = styled.div`
+const CopyButton = styled(Button)`
     position: absolute;
     right: 0;
-    top: 0;
-    z-index: ${zIndex.overlay - 1};
-    transform: translateY(calc(-100% + -13px));
-`;
-
-const CodeWrapper = styled.div`
-    position: relative;
-    max-width: 702px;
-    background-color: ${colors.backgroundLight};
+    top: -48px;
+    height: 32px;
+    padding: 0 12px;
+    font-size: 14px;
+    font-weight: 300;
+    background: white;
+    border: 1px solid ${colors.beigeWhite};
+    border-radius: ${BORDER_RADIUS};
+    color: ${colors.brandDark};
 `;
 
 const style = {

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

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { Button } from 'ts/components/button';
+import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
+
+export const CodeRun: React.FC = () => {
+    // @TODO: add code running logic
+    return (
+        <RunCodeWrapper>
+            <RunCodeButtons>
+                <RunButton>Run</RunButton>
+                <ResetButton>Reset</ResetButton>
+            </RunCodeButtons>
+            <RunCodeResult />
+        </RunCodeWrapper>
+    );
+};
+
+const GUTTER = '10px';
+const BORDER_RADIUS = '4px';
+
+const RunCodeWrapper = styled.div`
+    display: flex;
+    margin-top: ${GUTTER};
+`;
+
+const RunCodeButtons = styled.div`
+    display: flex;
+    flex-direction: column;
+    margin-right: ${GUTTER};
+`;
+
+const ActionButton = styled(Button)`
+    width: 112px;
+    height: 40px;
+    line-height: 0;
+`;
+
+const RunButton = styled(ActionButton)`
+    background-color: ${colors.brandDark};
+    color: white;
+    margin-bottom: 4px;
+`;
+
+const ResetButton = styled(ActionButton)`
+    background-color: white;
+    color: ${colors.brandDark};
+`;
+
+const RunCodeResult = styled.div`
+    background: white;
+    border: 1px solid ${colors.brandDark};
+    border-radius: ${BORDER_RADIUS};
+    padding: 10px;
+    width: 100%;
+    min-height: 100%;
+`;

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

@@ -43,11 +43,10 @@ export const TabList = styled(OriginalTabList)<ITabProps>`
 `;
 
 export const Tab = styled(OriginalTab)<ITabProps>`
-    background-color: transparent;
     border-radius: 4px 4px 0 0;
     cursor: pointer;
-    padding: 12px 12px 13px;
-    font-size: 1rem;
-    color: ${colors.textDarkSecondary};
+    padding: 12px;
+    font-size: 16px;
     font-weight: 300;
+    color: ${colors.textDarkSecondary};
 `;

packages/website/ts/pages/docs/page_template.tsx

@@ -101,6 +101,14 @@ const filterGroups: FilterGroup[] = [
     },
 ];
 
+const codeSample = `import { provider, networkId, signerAddress, salt, signature, senderAddress } from '@0x/browser-examples';
+
+const exchange = new ExchangeContract(provider, networkId);
+
+const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsync(salt, signerAddress, data, signature, {
+    from: senderAddress,
+});`;
+
 export class DocsPageTemplate extends React.Component<Props> {
     public render(): React.ReactNode {
         return (
@@ -200,16 +208,7 @@ export class DocsPageTemplate extends React.Component<Props> {
                                     </tr>
                                 </tbody>
                             </Table>
-                            <H3>Code Snippet</H3>
-                            <Code>
-                                {`import { provider, networkId, signerAddress, salt, signature, senderAddress } from '@0x/browser-examples';
 
-const exchange = new ExchangeContract(provider, networkId);
-
-const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsync(salt, signerAddress, data, signature, {
-    from: senderAddress,
-});`}
-                            </Code>
                             <H3>Tabbed Code Snippet</H3>
                             <Tabs>
                                 <TabList>
@@ -219,37 +218,32 @@ const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsyn
                                 </TabList>
 
                                 <TabPanel>
-                                    <Code>
-                                        {`import { provider, networkId, signerAddress, salt, signature, senderAddress } from '@0x/browser-examples';
-
-const exchange = new ExchangeContract(provider, networkId);
-
-const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsync(salt, signerAddress, data, signature, {
-    from: senderAddress,
-});`}
-                                    </Code>
+                                    <Code>{codeSample}</Code>
                                 </TabPanel>
                                 <TabPanel>
-                                    <Code>
-                                        {`import { provider, networkId, signerAddress, salt, signature, senderAddress } from '@0x/browser-examples';
-
-const exchange = new ExchangeContract(provider, networkId);
-
-const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsync(salt, signerAddress, data, signature, {
-    from: senderAddress,
-});`}
-                                    </Code>
+                                    <Code>{codeSample}</Code>
                                 </TabPanel>
                                 <TabPanel>
-                                    <Code>
-                                        {`import { provider, networkId, signerAddress, salt, signature, senderAddress } from '@0x/browser-examples';
+                                    <Code>{codeSample}</Code>
+                                </TabPanel>
+                            </Tabs>
 
-const exchange = new ExchangeContract(provider, networkId);
+                            <H3>Runnable Code Snippet</H3>
+                            <Tabs>
+                                <TabList>
+                                    <Tab>Typescript</Tab>
+                                    <Tab>Python</Tab>
+                                    <Tab>Solidity</Tab>
+                                </TabList>
 
-const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsync(salt, signerAddress, data, signature, {
-    from: senderAddress,
-});`}
-                                    </Code>
+                                <TabPanel>
+                                    <Code isRunnable={true}>{codeSample}</Code>
+                                </TabPanel>
+                                <TabPanel>
+                                    <Code>{codeSample}</Code>
+                                </TabPanel>
+                                <TabPanel>
+                                    <Code>{codeSample}</Code>
                                 </TabPanel>
                             </Tabs>
                             <H3>Subheading</H3>
@@ -284,12 +278,6 @@ const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsyn
                                 <li>List items</li>
                                 <li>List items</li>
                             </UnorderedList>
-                            <Heading asElement="h2" size="default">
-                                Tabbed Code Snippet
-                            </Heading>
-                            <Heading asElement="h2" size="default">
-                                Run Code Snippet
-                            </Heading>
                             <Heading asElement="h2" size="default">
                                 Next Steps
                             </Heading>