[WIP] Refactoring complex code components

packages/website/md/new-docs/usage.mdx

@@ -2,6 +2,11 @@ export const meta = {
     title: 'Sol-coverage Usage',
 };
 
+export const codeSample = `import { TruffleArtifactAdapter } from '@0x/sol-coverage';
+const projectRoot = '.';
+const solcVersion = '0.5.0';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`;
+
 Sol-coverage uses transaction traces in order to figure out which lines of Solidity source code have been covered by your tests. In order for it to gather these traces, you must add the `CoverageSubprovider` to the [ProviderEngine](https://github.com/MetaMask/provider-engine) instance you use when running your Solidity tests. If you're unfamiliar with `ProviderEngine`, please read the [Web3 Provider explained](https://0x.org/wiki#Web3-Provider-Explained) wiki article.
 
 The CoverageSubprovider eavesdrops on the `eth_sendTransaction` and `eth_call` RPC calls and collects traces after each call using `debug_traceTransaction`. `eth_call`'s' don't generate traces - so we take a snapshot, re-submit it as a transaction, get the trace and then revert the snapshot.
@@ -40,6 +45,26 @@ const solcVersion = '0.5.0';
 const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);
 ```
 
+## Code Tabs
+
+<CodeTabs tabs={['typescript', 'python']}>
+
+```typescript canRun
+/// @param salt Arbitrary number to ensure uniqueness of transaction hash.
+/// @param signerAddress Address of transaction signer.
+import { TruffleArtifactAdapter } from '@0x/sol-coverage';
+const projectRoot = '.';
+```
+
+```python
+import { TruffleArtifactAdapter } from '@0x/sol-coverage';
+const projectRoot = '.';
+const solcVersion = '0.5.0';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);
+```
+
+</CodeTabs>
+
 Because truffle artifacts don't have all the data we need - we actually will recompile your contracts under the hood. That's why you don't need to pass an `artifactsPath`.
 
 ### Other framework/toolset

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

@@ -35,8 +35,6 @@ export const Code: React.FC<ICodeProps> = ({ children, className = 'language-typ
 
     return (
         <>
-            <Tab>{language}</Tab>
-
             <CopyToClipboard text={children} onCopy={handleCopyClick}>
                 <CopyButton>{copyButtonText}</CopyButton>
             </CopyToClipboard>

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import {
@@ -11,10 +11,30 @@ import {
 import { colors } from 'ts/style/colors';
 
 interface ITabProps {
-    children: ReactNode;
+    children: React.ReactNode;
     selectedTabClassName?: string;
 }
 
+interface ICodeTabs {
+    children: React.ReactNode;
+    tabs: string[];
+}
+
+export const CodeTabs: React.FC<ICodeTabs> = ({ children, tabs }) => {
+    return (
+        <Tabs>
+            <TabList>
+                {tabs.map((tab, index) => (
+                    <Tab key={`tab-${index}`}>{tab}</Tab>
+                ))}
+            </TabList>
+            {React.Children.map(children, (child, index) => {
+                return <TabPanel key={`tabPanel-${index}`}>{child}</TabPanel>;
+            })}
+        </Tabs>
+    );
+};
+
 export const Tabs = styled(OriginalTabs).attrs({
     selectedTabClassName: 'is-active',
 })<ITabProps>`

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

@@ -15,7 +15,7 @@ import { InlineLink } from 'ts/components/docs/inline_link';
 import { Notification } from 'ts/components/docs/notification';
 import { SiteWrap } from 'ts/components/docs/siteWrap';
 import { Table } from 'ts/components/docs/table';
-import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/tabs';
+import { CodeTabs, Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/tabs';
 import { TutorialSteps } from 'ts/components/docs/tutorial_steps';
 import { UnorderedList } from 'ts/components/docs/unordered_list';
 import { DocumentTitle } from 'ts/components/document_title';
@@ -143,6 +143,7 @@ const mdxComponents = {
     table: Table,
     ul: UnorderedList,
     Notification,
+    CodeTabs,
     Tabs,
     TabList,
     Tab,