aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorMegan Pearson <megan.e.pearson@gmail.com>2018-10-23 22:05:28 +0800
committerAugust Skare <post@augustskare.no>2018-10-25 19:12:38 +0800
commit16b515707823f7f60f641665a3a96b3092d881ee (patch)
treef7f92b3f73d32cb026288d31cc730446c12a1bb4 /packages
parent1ae9f68db8c9768e68d1eab1f411b346e9512c1c (diff)
downloaddexon-sol-tools-16b515707823f7f60f641665a3a96b3092d881ee.tar
dexon-sol-tools-16b515707823f7f60f641665a3a96b3092d881ee.tar.gz
dexon-sol-tools-16b515707823f7f60f641665a3a96b3092d881ee.tar.bz2
dexon-sol-tools-16b515707823f7f60f641665a3a96b3092d881ee.tar.lz
dexon-sol-tools-16b515707823f7f60f641665a3a96b3092d881ee.tar.xz
dexon-sol-tools-16b515707823f7f60f641665a3a96b3092d881ee.tar.zst
dexon-sol-tools-16b515707823f7f60f641665a3a96b3092d881ee.zip
Updates Intro Component to use IntroBody and IntroAside
Diffstat (limited to 'packages')
-rw-r--r--packages/dev-tools-pages/ts/components/Intro.tsx41
-rw-r--r--packages/dev-tools-pages/ts/pages/Cov.tsx15
2 files changed, 37 insertions, 19 deletions
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 29d1d36fe..4fc1289fb 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -4,7 +4,6 @@ import { media, colors } from '../variables';
import { Alpha, Lead } from './Typography';
import Container from './Container';
-import Code from './Code';
const Main = styled.div`
background-color: ${colors.lightGray};
@@ -18,46 +17,56 @@ const Main = styled.div`
`};
`;
+const Inner = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+`;
+
const Title = styled(Alpha)`
margin-bottom: 2.5rem;
${media.small`margin-bottom: 2.25rem;`};
`;
-const Content = styled.div`
- max-width: 25.9375rem;
+const Blocks = styled.div`
display: flex;
- flex-direction: column;
+ justify-content: space-between;
- ${Lead} {
- ${media.small`margin-bottom: 2.25rem;`};
- }
+ ${media.small`display: block;`};
`;
-const StyledCode = styled(Code)`
- width: 520px;
- height: 350px;
+const IntroLead = styled(Lead)`
+ max-width: 25.9375rem;
- ${media.small`margin-bottom: 2.25rem;`};
+ ${media.small`margin-bottom: 1.5625rem;`};
+`;
+const IntroAside = styled.div`
+ max-width: 32.5rem;
+
+ ${media.small`
+ margin-left: -30px;
+ width: calc(100% + 60px);
+ `};
`;
interface IntroProps {
title: string;
- children: React.ReactNode;
+ children?: React.ReactNode;
}
function Intro(props: IntroProps) {
return (
<Container wide>
<Main>
- <Content>
+ <Inner>
<Title>{props.title}</Title>
- <Lead as="div">{props.children}</Lead>
- </Content>
- <StyledCode> Function execute transaction</StyledCode>
+ <Blocks>{props.children}</Blocks>
+ </Inner>
</Main>
</Container>
);
}
export default Intro;
+export { IntroLead, IntroAside, Intro };
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index ccaa60d5a..8fd1ace43 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -9,19 +9,28 @@ import { Tabs, TabBlock } from 'ts/components/Tabs';
import Code from 'ts/components/Code';
import InlineCode from 'ts/components/InlineCode';
import { List, ListItem } from 'ts/components/List';
-import Intro from 'ts/components/Intro';
import Breakout from 'ts/components/Breakout';
+import { Intro, IntroLead, IntroAside } from 'ts/components/Intro';
function Cov() {
return (
<Base context={context}>
<Intro title="Measure your tests">
- <p>
+ <IntroLead>
When it comes to writing smart contracts, testing is one of the most important steps of the process.
In order to quantify the robustness of your Solidity testing suite, you need to measure its code
coverage.
- </p>
+ </IntroLead>
+ <IntroAside>
+ <Code language="js">
+ {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+ </Code>
+ </IntroAside>
</Intro>
+
<Content>
<ContentBlock main title="Get started" />
<ContentBlock title="Prerequisites">