Updates Intro Component to use IntroBody and IntroAside
This commit is contained in:
parent
1ae9f68db8
commit
16b5157078
@ -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 };
|
||||
|
@ -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">
|
||||
|
Loading…
x
Reference in New Issue
Block a user