crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prettier

Browse Source
This commit is contained in:
Fred Carlsen
2019-06-25 11:37:56 +02:00
committed by fabioberger
parent 1d3d5f7e32
commit 01247319c3
33 changed files with 366 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/website/ts/components/animatedChatIcon.tsx
View File

@@ -49,15 +49,7 @@ export const AnimatedChatIcon = () => (
</Bubble>
<Dot delay={0} vectorEffect="non-scaling-stroke" cx="75" cy="75" r="4" stroke="#00AE99" strokeWidth="3" />
<Dot
delay={4.4}
vectorEffect="non-scaling-stroke"
cx="91"
cy="75"
r="4"
stroke="#00AE99"
strokeWidth="3"
/>
<Dot delay={4.4} vectorEffect="non-scaling-stroke" cx="91" cy="75" r="4" stroke="#00AE99" strokeWidth="3" />
<Dot
delay={-4.6}
vectorEffect="non-scaling-stroke"

58
packages/website/ts/components/docs/callout.tsx
View File

@@ -25,33 +25,61 @@ const ThemeSettings = {
success: {
bgColor: 'rgba(0, 174, 153, 0.1)',
icon: (
<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 27c7.18 0 13-5.82 13-13S21.18 1 14 1 1 6.82 1 14s5.82 13 13 13z" stroke="#00AE99" strokeWidth="1.054" strokeMiterlimit="10"/>
<path d="M14.002 26.977c7.167 0 12.977-5.81 12.977-12.976 0-7.166-5.81-12.976-12.976-12.976-7.167 0-12.977 5.81-12.977 12.976 0 7.167 5.81 12.976 12.976 12.976z" stroke="#003831" strokeWidth="1.5" strokeMiterlimit="10"/>
<path d="M9 14.667L12.125 18 19 10" stroke="#003831" strokeWidth="1.5"/>
</svg>
)
<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14 27c7.18 0 13-5.82 13-13S21.18 1 14 1 1 6.82 1 14s5.82 13 13 13z"
stroke="#00AE99"
strokeWidth="1.054"
strokeMiterlimit="10"
/>
<path
d="M14.002 26.977c7.167 0 12.977-5.81 12.977-12.976 0-7.166-5.81-12.976-12.976-12.976-7.167 0-12.977 5.81-12.977 12.976 0 7.167 5.81 12.976 12.976 12.976z"
stroke="#003831"
strokeWidth="1.5"
strokeMiterlimit="10"
/>
<path d="M9 14.667L12.125 18 19 10" stroke="#003831" strokeWidth="1.5" />
</svg>
),
},
standard: {
bgColor: '#F2F2F2',
icon: (
<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 27c7.18 0 13-5.82 13-13S21.18 1 14 1 1 6.82 1 14s5.82 13 13 13z" stroke="#00AE99" strokeWidth="1.054" strokeMiterlimit="10"/>
<path d="M14.002 26.977c7.167 0 12.977-5.81 12.977-12.976 0-7.166-5.81-12.976-12.976-12.976-7.167 0-12.977 5.81-12.977 12.976 0 7.167 5.81 12.976 12.976 12.976z" stroke="#003831" strokeWidth="1.5" strokeMiterlimit="10"/>
<path d="M15.298 9.494V7.641h-1.972v1.853h1.972zm-.034 1.853h-1.921V20h1.921v-8.653z" fill="#003831"/>
<path
d="M14 27c7.18 0 13-5.82 13-13S21.18 1 14 1 1 6.82 1 14s5.82 13 13 13z"
stroke="#00AE99"
strokeWidth="1.054"
strokeMiterlimit="10"
/>
<path
d="M14.002 26.977c7.167 0 12.977-5.81 12.977-12.976 0-7.166-5.81-12.976-12.976-12.976-7.167 0-12.977 5.81-12.977 12.976 0 7.167 5.81 12.976 12.976 12.976z"
stroke="#003831"
strokeWidth="1.5"
strokeMiterlimit="10"
/>
<path d="M15.298 9.494V7.641h-1.972v1.853h1.972zm-.034 1.853h-1.921V20h1.921v-8.653z" fill="#003831" />
</svg>
)
),
},
alert: {
bgColor: '#FFFAF3',
icon: (
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0025 26.9774C21.169 26.9774 26.9786 21.1678 26.9786 14.0013C26.9786 6.83476 21.169 1.02515 14.0025 1.02515C6.83598 1.02515 1.02637 6.83476 1.02637 14.0013C1.02637 21.1678 6.83598 26.9774 14.0025 26.9774Z" stroke="#EA9928" strokeWidth="1.5" strokeMiterlimit="10"/>
<path d="M12.819 7.862V12.826L13.176 16.566H14.417L14.774 12.826V7.862H12.819ZM14.893 20V17.722H12.7V20H14.893Z" fill="#EA9928"/>
<path
d="M14.0025 26.9774C21.169 26.9774 26.9786 21.1678 26.9786 14.0013C26.9786 6.83476 21.169 1.02515 14.0025 1.02515C6.83598 1.02515 1.02637 6.83476 1.02637 14.0013C1.02637 21.1678 6.83598 26.9774 14.0025 26.9774Z"
stroke="#EA9928"
strokeWidth="1.5"
strokeMiterlimit="10"
/>
<path
d="M12.819 7.862V12.826L13.176 16.566H14.417L14.774 12.826V7.862H12.819ZM14.893 20V17.722H12.7V20H14.893Z"
fill="#EA9928"
/>
</svg>
)
),
},
}
};
export const Callout: React.FunctionComponent<CalloutConfig> = ({ type, text }: CalloutConfig) => (
<Wrapper type={type}>
@@ -65,7 +93,7 @@ Callout.defaultProps = {
};
const Wrapper = styled.div<WrapperProps>`
background-color: ${props => ThemeSettings[props.type].bgColor};
background-color: ${props => ThemeSettings[props.type].bgColor};
color: ${colors.textDarkPrimary};
padding: 1rem 1rem 1rem 1rem;
display: flex;

11
packages/website/ts/components/docs/code.tsx
View File

@@ -168,7 +168,12 @@ export class Code extends React.Component<CodeProps, CodeState> {
<StyledButton>{copyButtonText}</StyledButton>
</CopyToClipboard>
</ButtonWrapper>
<SyntaxHighlighter language={this.props.language} style={customStyle} showLineNumbers={false} PreTag={CustomPre}>
<SyntaxHighlighter
language={this.props.language}
style={customStyle}
showLineNumbers={false}
PreTag={CustomPre}
>
{this.props.children}
</SyntaxHighlighter>
</Wrapper>
@@ -181,8 +186,8 @@ export class Code extends React.Component<CodeProps, CodeState> {
const StyledButton = styled(Button)`
border-radius: 4px;
background: #FFFFFF;
border: 1px solid #EAEAEA;
background: #ffffff;
border: 1px solid #eaeaea;
color: ${colors.brandDark};
font-size: 15px;
font-weight: 300;

10
packages/website/ts/components/docs/community_link.tsx
View File

@@ -31,8 +31,12 @@ export const CommunityLink: React.FunctionComponent<CommunityLinkProps> = (props
<Wrapper isHome={props.isHome} href={props.url}>
<div>
<Icon color={colors.brandLight} name={props.icon} size={100} margin={[0, 0, 24, 0]} />
<Heading size="small" marginBottom="8px">{props.heading}</Heading>
<Paragraph size="default" marginBottom="0">{props.description}</Paragraph>
<Heading size="small" marginBottom="8px">
{props.heading}
</Heading>
<Paragraph size="default" marginBottom="0">
{props.description}
</Paragraph>
</div>
</Wrapper>
</>
@@ -44,7 +48,7 @@ CommunityLink.defaultProps = {
const Wrapper = styled.a<WrapperProps>`
background-color: ${colors.backgroundLight};
border: 1px solid #DBDFDD;
border: 1px solid #dbdfdd;
padding: 50px 50px;
display: flex;
flex-direction: column;

20
packages/website/ts/components/docs/feature_link.tsx
View File

@@ -21,19 +21,27 @@ export interface LinkProps {
shouldOpenInNewTab?: boolean;
}
interface WrapperProps {
}
interface WrapperProps {}
export const FeatureLink: React.FunctionComponent<LinkProps> = (props: LinkProps) => (
<>
<Wrapper href={props.url}>
<Icon color={colors.brandLight} name={props.icon} size={60} margin={[0, 30, 0, 0]} />
<Content>
<Heading asElement="h3" size="small" marginBottom="6px">{props.heading}</Heading>
<Paragraph size="default" marginBottom="0">{props.description}</Paragraph>
<Heading asElement="h3" size="small" marginBottom="6px">
{props.heading}
</Heading>
<Paragraph size="default" marginBottom="0">
{props.description}
</Paragraph>
</Content>
<svg viewBox="0 0 14 14" width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M2 0h11.5v11H12V2.62L1.06 13.56 0 12.5l11-11H2V0z" fill="currentColor"/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2 0h11.5v11H12V2.62L1.06 13.56 0 12.5l11-11H2V0z"
fill="currentColor"
/>
</svg>
</Wrapper>
</>
@@ -41,7 +49,7 @@ export const FeatureLink: React.FunctionComponent<LinkProps> = (props: LinkProps
const Wrapper = styled.a`
background-color: ${colors.backgroundLight};
border: 1px solid #DBDFDD;
border: 1px solid #dbdfdd;
padding: 30px 30px;
display: flex;
align-items: center;

6
packages/website/ts/components/docs/header.tsx
View File

@@ -113,11 +113,7 @@ const NavItem = (props: { link: NavItemProps; key: string }) => {
) : (
<StyledNavLink to={link.url}>{link.text}</StyledNavLink>
);
return (
<LinkWrap>
{linkElement}
</LinkWrap>
);
return <LinkWrap>{linkElement}</LinkWrap>;
};
const DocsLogo = () => {

8
packages/website/ts/components/docs/help_callout.tsx
View File

@@ -28,8 +28,12 @@ export const HelpCallout: React.FunctionComponent<HelpCalloutProps> = (props: He
<Wrapper href={props.url}>
<Icon color={colors.brandLight} name="help" size={38} margin={[0, 30, 0, 0]} />
<div>
<Heading size="small" marginBottom="8px">{props.heading}</Heading>
<Paragraph size="default" marginBottom="0">{props.description}</Paragraph>
<Heading size="small" marginBottom="8px">
{props.heading}
</Heading>
<Paragraph size="default" marginBottom="0">
{props.description}
</Paragraph>
</div>
</Wrapper>
</>

4
packages/website/ts/components/docs/helpful_cta.tsx
View File

@@ -25,7 +25,9 @@ export const HelpfulCta: React.FunctionComponent<HelpfulCtaProps> = (props: Help
<Text>Was this page helpful</Text>
<Buttons>
<CtaButton color={colors.white}>Yes</CtaButton>
<CtaButton isTransparent={true} color={colors.brandLight} borderColor={colors.brandLight}>No</CtaButton>
<CtaButton isTransparent={true} color={colors.brandLight} borderColor={colors.brandLight}>
No
</CtaButton>
</Buttons>
</Wrapper>
</>

6
packages/website/ts/components/docs/hero.tsx
View File

@@ -27,7 +27,9 @@ interface LinkConfig {
export const Hero: React.FunctionComponent<Props> = (props: Props) => (
<>
<Wrapper isHome={props.isHome}>
<Heading size="large" isCentered={true} marginBottom={props.isHome || props.description ? '30px' : '0'}>{props.title}</Heading>
<Heading size="large" isCentered={true} marginBottom={props.isHome || props.description ? '30px' : '0'}>
{props.title}
</Heading>
{props.description && <Paragraph isCentered={true}>{props.description}</Paragraph>}
{props.isHome && <SearchInput isHome={true} />}
</Wrapper>
@@ -44,7 +46,7 @@ const Wrapper = styled.div<Props>`
padding-bottom: 80px;
margin-bottom: 60px;
min-height: 15rem;
min-height: ${props => props.isHome ? '21.875rem' : '13.222rem'};
min-height: ${props => (props.isHome ? '21.875rem' : '13.222rem')};
display: flex;
flex-direction: column;
justify-content: center;

8
packages/website/ts/components/docs/newsletter_signup.tsx
View File

@@ -30,10 +30,14 @@ export const NewsletterSignup: React.FunctionComponent<NewsletterSignupProps> =
<Paragraph marginBottom="25px">{props.description}</Paragraph>
<InputWrapper>
<Label htmlFor="emailSignup">Email Address</Label>
<Input id="emailSignup" type="email" placeholder="Email Address"/>
<Input id="emailSignup" type="email" placeholder="Email Address" />
<Submit>
<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity=".5" d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z" fill="#5C5C5C"/>
<path
opacity=".5"
d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z"
fill="#5C5C5C"
/>
</svg>
</Submit>
</InputWrapper>

8
packages/website/ts/components/docs/note.tsx
View File

@@ -10,8 +10,7 @@ export interface NoteProps {
description?: string;
}
interface WrapperProps {
}
interface WrapperProps {}
export const Note: React.FunctionComponent<NoteProps> = (props: NoteProps) => (
<>
@@ -26,7 +25,7 @@ export const Note: React.FunctionComponent<NoteProps> = (props: NoteProps) => (
const Wrapper = styled.div`
background-color: ${colors.backgroundLight};
border: 1px solid #DBDFDD;
border: 1px solid #dbdfdd;
padding: 20px 14px;
display: flex;
align-items: center;
@@ -36,8 +35,7 @@ const Wrapper = styled.div`
margin-bottom: 30px;
`;
const Content = styled.div`
`;
const Content = styled.div``;
const NoteHeading = styled(Heading).attrs({ color: colors.brandDark, asElement: 'h4' })`
font-size: 0.944444444rem !important;

10
packages/website/ts/components/docs/resource/level.tsx
View File

@@ -18,17 +18,17 @@ export enum Difficulty {
const difficulties = {
[Difficulty.Beginner]: {
label: 'Beginner',
rating: 1
rating: 1,
},
[Difficulty.Intermediate]: {
label: 'Intermediate',
rating: 2
rating: 2,
},
[Difficulty.Advanced]: {
label: 'Advanced',
rating: 3
rating: 3,
},
}
};
export const Level: React.FunctionComponent<LevelProps> = ({ difficulty }: LevelProps) => {
const info = difficulties[difficulty];
@@ -37,7 +37,7 @@ export const Level: React.FunctionComponent<LevelProps> = ({ difficulty }: Level
<DifficultyLabel>{info.label}</DifficultyLabel>
<RatingBar rating={info.rating} />
</Wrapper>
)
);
};
const Wrapper = styled.div`

23
packages/website/ts/components/docs/resource/resource.tsx
View File

@@ -20,13 +20,26 @@ interface TagProps {
isInverted?: boolean;
}
export const Resource: React.FunctionComponent<ResourceProps> = ({ heading, description, url, tags }: ResourceProps) => (
export const Resource: React.FunctionComponent<ResourceProps> = ({
heading,
description,
url,
tags,
}: ResourceProps) => (
<Wrapper href={url}>
<Heading color={colors.brandDark} size="small" marginBottom="8px">{heading}</Heading>
<Paragraph size="default" marginBottom="30px">{description}</Paragraph>
<Heading color={colors.brandDark} size="small" marginBottom="8px">
{heading}
</Heading>
<Paragraph size="default" marginBottom="30px">
{description}
</Paragraph>
<Meta>
<Tags>
{tags.map(({label, isInverted}, index) => <Tag key={`tag-${index}`} isInverted={isInverted}>{label}</Tag>)}
{tags.map(({ label, isInverted }, index) => (
<Tag key={`tag-${index}`} isInverted={isInverted}>
{label}
</Tag>
))}
</Tags>
<Level difficulty={Difficulty.Beginner} />
</Meta>
@@ -39,7 +52,7 @@ Resource.defaultProps = {
};
const Wrapper = styled.a`
border: 1px solid #D7E3DB;
border: 1px solid #d7e3db;
padding: 25px 30px;
margin-bottom: 1.111111111rem;
display: block;

8
packages/website/ts/components/docs/resource/tag.tsx
View File

@@ -14,9 +14,7 @@ interface WrapperProps {
}
export const Tag: React.FunctionComponent<TagProps> = ({ isInverted, children }: TagProps) => (
<Wrapper isInverted={isInverted}>
{children}
</Wrapper>
<Wrapper isInverted={isInverted}>{children}</Wrapper>
);
Tag.defaultProps = {
@@ -24,9 +22,9 @@ Tag.defaultProps = {
};
const Wrapper = styled.div<WrapperProps>`
background-color: ${props => props.isInverted ? colors.brandDark : 'rgba(0, 56, 49, 0.1)'};
background-color: ${props => (props.isInverted ? colors.brandDark : 'rgba(0, 56, 49, 0.1)')};
border-radius: 4px;
color: ${props => props.isInverted ? colors.white : colors.brandDark};
color: ${props => (props.isInverted ? colors.white : colors.brandDark)};
font-size: 0.666666667rem;
font-family: 'Formular Mono';
font-weight: 400;

14
packages/website/ts/components/docs/search_input.tsx
View File

@@ -39,7 +39,9 @@ const Wrapper = styled.div<Props>`
width: 100%;
max-width: 240px;
${props => props.isHome && `
${props =>
props.isHome &&
`
max-width: 890px;
margin: 0 auto;
`};
@@ -58,15 +60,19 @@ const LabelText = styled.span`
const Input = styled.input.attrs({
placeholder: 'Search docs...',
})<Props>`
background: transparent left center url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h24v24H0z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 10.5a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0zM10.5 3a7.5 7.5 0 1 0 4.55 13.463l4.743 4.744 1.414-1.414-4.744-4.744A7.5 7.5 0 0 0 10.5 3z' fill='%235C5C5C'/%3E%3C/svg%3E") no-repeat ;
background: transparent left center
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h24v24H0z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 10.5a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0zM10.5 3a7.5 7.5 0 1 0 4.55 13.463l4.743 4.744 1.414-1.414-4.744-4.744A7.5 7.5 0 0 0 10.5 3z' fill='%235C5C5C'/%3E%3C/svg%3E")
no-repeat;
font-size: 1.375rem;
padding: 18px 18px 21px 35px;
width: 100%;
border: 0;
border-bottom: 1px solid #B4BEBD;
border-bottom: 1px solid #b4bebd;
outline: none;
${props => !props.isHome && `
${props =>
!props.isHome &&
`
background-color: #EBEEEC;
border-bottom: 0;
padding: 13px 21px 15px 52px;

10
packages/website/ts/components/docs/shortcut_link.tsx
View File

@@ -31,8 +31,12 @@ export const ShortcutLink: React.FunctionComponent<LinkProps> = (props: LinkProp
<Wrapper isHome={props.isHome} href={props.url}>
<Icon color={colors.brandLight} name={props.icon} size={80} margin={[0, 40, 0, 0]} />
<div>
<Heading size="small" marginBottom="8px">{props.heading}</Heading>
<Paragraph size="default" marginBottom="0">{props.description}</Paragraph>
<Heading size="small" marginBottom="8px">
{props.heading}
</Heading>
<Paragraph size="default" marginBottom="0">
{props.description}
</Paragraph>
</div>
</Wrapper>
</>
@@ -44,7 +48,7 @@ ShortcutLink.defaultProps = {
const Wrapper = styled.a<WrapperProps>`
background-color: ${colors.backgroundLight};
border: 1px solid #DBDFDD;
border: 1px solid #dbdfdd;
padding: 50px 50px;
display: flex;
align-items: center;

15
packages/website/ts/components/docs/sidebar/filter.tsx
View File

@@ -30,14 +30,15 @@ const Checkbox = styled.input.attrs({ type: 'checkbox' })`
`;
const CheckboxBox = styled.div`
border: 1px solid #CBCBCB;
width: 22px;
height: 22px;
margin-right: 0.666rem;
border: 1px solid #cbcbcb;
width: 22px;
height: 22px;
margin-right: 0.666rem;
${Checkbox}:checked ~ & {
background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.983 12.522c-.21 0-.4-.07-.557-.226l-3.46-3.461a.777.777 0 0 1 0-1.113.777.777 0 0 1 1.112 0L6 10.626l6.94-6.922a.777.777 0 0 1 1.112 0c.313.313.313.8 0 1.113l-7.495 7.479a.83.83 0 0 1-.574.226z' fill='currentColor'/%3E%3C/svg%3E") no-repeat center;
}
${Checkbox}:checked ~ & {
background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.983 12.522c-.21 0-.4-.07-.557-.226l-3.46-3.461a.777.777 0 0 1 0-1.113.777.777 0 0 1 1.112 0L6 10.626l6.94-6.922a.777.777 0 0 1 1.112 0c.313.313.313.8 0 1.113l-7.495 7.479a.83.83 0 0 1-.574.226z' fill='currentColor'/%3E%3C/svg%3E")
no-repeat center;
}
`;
const Label = styled.span`

38
packages/website/ts/components/docs/sidebar/filters.tsx
View File

@@ -10,11 +10,9 @@ import { colors } from 'ts/style/colors';
import { styled } from 'ts/style/theme';
import { zIndex } from 'ts/style/z_index';
export interface FiltersProps {
}
export interface FiltersProps {}
export interface FiltersState {
}
export interface FiltersState {}
interface Group {
heading: string;
@@ -23,8 +21,8 @@ interface Group {
}
interface FilterProps {
value: string;
label: string;
value: string;
label: string;
}
const groups: Group[] = [
@@ -34,21 +32,21 @@ const groups: Group[] = [
filters: [
{
value: 'mesh',
label: 'Mesh'
label: 'Mesh',
},
{
value: 'testing',
label: 'Testing'
label: 'Testing',
},
{
value: 'mesh',
label: 'Mesh'
label: 'Mesh',
},
{
value: 'testing',
label: 'Testing'
label: 'Testing',
},
]
],
},
{
heading: 'Level',
@@ -56,25 +54,23 @@ const groups: Group[] = [
filters: [
{
value: 'beginner',
label: 'Beginner'
label: 'Beginner',
},
{
value: 'intermediate',
label: 'Intermediate'
label: 'Intermediate',
},
{
value: 'advanced',
label: 'Advanced'
label: 'Advanced',
},
]
],
},
]
];
export class Filters extends React.Component<FiltersProps, FiltersState> {
public static defaultProps = {
};
public state: FiltersState = {
};
public static defaultProps = {};
public state: FiltersState = {};
public render(): React.ReactNode {
return (
<Wrapper>
@@ -104,7 +100,7 @@ const GroupWrapper = styled.div`
`;
const GroupHeading = styled(Heading)`
color: ${colors.textDarkPrimary};
color: ${colors.textDarkPrimary};
font-size: 1rem !important;
font-weight: 400 !important;
margin-bottom: 1em !important;

12
packages/website/ts/components/docs/step_link.tsx
View File

@@ -19,15 +19,19 @@ export interface StepLinkConfig {
shouldOpenInNewTab?: boolean;
}
interface WrapperProps {
}
interface WrapperProps {}
export const StepLink: React.FunctionComponent<StepLinkConfig> = (props: StepLinkConfig) => (
<>
<Wrapper href={props.url}>
<Text>{props.title}</Text>
<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M2 0h11.5v11H12V2.62L1.06 13.56 0 12.5l11-11H2V0z" fill="currentColor"/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2 0h11.5v11H12V2.62L1.06 13.56 0 12.5l11-11H2V0z"
fill="currentColor"
/>
</svg>
</Wrapper>
</>
@@ -46,7 +50,7 @@ const Wrapper = styled.a<WrapperProps>`
}
& + & {
border-top: 1px solid #DBDFDD;
border-top: 1px solid #dbdfdd;
}
`;

6
packages/website/ts/components/docs/step_links.tsx
View File

@@ -12,7 +12,9 @@ export interface LinkProps {
export const StepLinks: React.FunctionComponent<LinkProps> = (props: LinkProps) => (
<>
<Wrapper>
{props.links.map((shortcut, index) => <StepLink key={`step-${index}`} {...shortcut} />)}
{props.links.map((shortcut, index) => (
<StepLink key={`step-${index}`} {...shortcut} />
))}
</Wrapper>
</>
);
@@ -23,6 +25,6 @@ StepLinks.defaultProps = {
const Wrapper = styled.div`
background-color: ${colors.backgroundLight};
border: 1px solid #DBDFDD;
border: 1px solid #dbdfdd;
margin-bottom: 1.875rem;
`;

15
packages/website/ts/components/docs/table.tsx
View File

@@ -9,17 +9,14 @@ export interface Props {
export const Table: React.FunctionComponent<Props> = (props: Props) => (
<>
<Wrapper>
{props.children}
</Wrapper>
<Wrapper>{props.children}</Wrapper>
</>
);
Table.defaultProps = {
};
Table.defaultProps = {};
const Wrapper = styled.table`
border: 1px solid #CFCFCF;
border: 1px solid #cfcfcf;
margin-bottom: 1.875rem;
width: 100%;
@@ -27,13 +24,13 @@ const Wrapper = styled.table`
font-size: 0.888888889rem;
font-weight: 400;
padding: 14px 20px 13px;
border-bottom: 1px solid #CFCFCF;
border-bottom: 1px solid #cfcfcf;
text-align: left;
}
td {
padding: 14px 20px 13px;
border-bottom: 1px solid #CFCFCF;
border-bottom: 1px solid #cfcfcf;
font-size: 0.777777778rem;
opacity: 0.76;
line-height: 1.428571429;
@@ -41,7 +38,7 @@ const Wrapper = styled.table`
td + td,
th + th {
border-left: 1px solid #CFCFCF;
border-left: 1px solid #cfcfcf;
}
tr {

13
packages/website/ts/components/docs/tabs.tsx
View File

@@ -1,6 +1,11 @@
import * as _ from 'lodash';
import * as React from 'react';
import { Tab as OriginalTab, TabList as OriginalTabList, TabPanel as OriginalTabPanel, Tabs as OriginalTabs } from 'react-tabs';
import {
Tab as OriginalTab,
TabList as OriginalTabList,
TabPanel as OriginalTabPanel,
Tabs as OriginalTabs,
} from 'react-tabs';
import styled, { withTheme } from 'styled-components';
import { colors } from 'ts/style/colors';
@@ -10,7 +15,7 @@ export const Tabs = styled(OriginalTabs).attrs({
margin-bottom: 1.875rem;
.is-active {
background-color: #F3F6F4;
background-color: #f3f6f4;
color: ${colors.brandDark};
}
`;
@@ -21,14 +26,14 @@ export const Tab = styled(OriginalTab)`
cursor: pointer;
padding: 12px 12px 13px;
font-size: 1rem;
color: #5C5C5C;
color: #5c5c5c;
font-weight: 300;
`;
export const TabPanel = styled(OriginalTabPanel).attrs({
selectedClassName: 'is-active',
})`
background-color: #F3F6F4;
background-color: #f3f6f4;
border-radius: 4px;
padding: 12px 12px;
display: none;

10
packages/website/ts/components/docs/tutorial_steps.tsx
View File

@@ -6,19 +6,15 @@ export interface Props {
children: React.ReactNode;
}
interface WrapperProps {
}
interface WrapperProps {}
export const TutorialSteps: React.FunctionComponent<Props> = (props: Props) => (
<>
<Wrapper>
{props.children}
</Wrapper>
<Wrapper>{props.children}</Wrapper>
</>
);
TutorialSteps.defaultProps = {
};
TutorialSteps.defaultProps = {};
const Wrapper = styled.ul<WrapperProps>`
list-style-type: none;

7
packages/website/ts/components/docs/unordered_list.tsx
View File

@@ -9,14 +9,11 @@ export interface Props {
export const UnorderedList: React.FunctionComponent<Props> = (props: Props) => (
<>
<Wrapper>
{props.children}
</Wrapper>
<Wrapper>{props.children}</Wrapper>
</>
);
UnorderedList.defaultProps = {
};
UnorderedList.defaultProps = {};
const Wrapper = styled.ul`
list-style-type: disc;

1
packages/website/ts/pages/credits.tsx
View File

@@ -115,5 +115,4 @@ export class Credits extends React.Component<CreditsProps> {
Apply Now
</Button>
);
}

35
packages/website/ts/pages/docs/guides.tsx
View File

@@ -71,11 +71,31 @@ export class DocsGuides extends React.Component<Props> {
</aside>
<article>
<div>
<Resource heading="0x Mesh - your gateway to networked liquidity" description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs" tags={[ { label: 'Relayer' } ]} />
<Resource heading="0x Mesh - your gateway to networked liquidity" description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity." tags={[ { label: 'Relayer' } ]} />
<Resource heading="0x Mesh - your gateway to networked liquidity" description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity." tags={[ { label: 'Relayer' } ]} />
<Resource heading="0x Mesh - your gateway to networked liquidity" description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity." tags={[ { label: 'Relayer' } ]} />
<Resource heading="0x Mesh - your gateway to networked liquidity" description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs" tags={[ { label: 'Community Maintained', isInverted: true }, { label: 'Relayer' } ]} />
<Resource
heading="0x Mesh - your gateway to networked liquidity"
description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
tags={[{ label: 'Relayer' }]}
/>
<Resource
heading="0x Mesh - your gateway to networked liquidity"
description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity."
tags={[{ label: 'Relayer' }]}
/>
<Resource
heading="0x Mesh - your gateway to networked liquidity"
description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity."
tags={[{ label: 'Relayer' }]}
/>
<Resource
heading="0x Mesh - your gateway to networked liquidity"
description="Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity."
tags={[{ label: 'Relayer' }]}
/>
<Resource
heading="0x Mesh - your gateway to networked liquidity"
description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
tags={[{ label: 'Community Maintained', isInverted: true }, { label: 'Relayer' }]}
/>
</div>
</article>
</Columns>
@@ -98,7 +118,7 @@ Columns.defaultProps = {
const Separator = styled.hr`
border-width: 0 0 1px;
border-color: #E4E4E4;
border-color: #e4e4e4;
height: 0;
margin-top: 60px;
margin-bottom: 60px;
@@ -112,5 +132,4 @@ const LargeHeading = styled(Heading).attrs({
const LargeIntro = styled(Paragraph).attrs({
size: 'medium',
})`
`;
})``;

20
packages/website/ts/pages/docs/home.tsx
View File

@@ -94,10 +94,8 @@ const communityShortcuts: CommunityLinkProps[] = [
];
export class DocsHome extends React.Component<Props> {
public state = {
};
public componentDidMount(): void {
}
public state = {};
public componentDidMount(): void {}
public render(): React.ReactNode {
return (
<SiteWrap theme="light">
@@ -105,9 +103,11 @@ export class DocsHome extends React.Component<Props> {
<Hero isHome={true} title="0x Docs" />
<Section maxWidth={'1150px'} isPadded={false} padding="0 0">
<ShortcutsWrapper>
{shortcuts.map((shortcut, index) => <ShortcutLink key={`shortcut-${index}`} {...shortcut} />)}
{shortcuts.map((shortcut, index) => (
<ShortcutLink key={`shortcut-${index}`} {...shortcut} />
))}
</ShortcutsWrapper>
<Separator/>
<Separator />
<Columns>
<div>
<Heading size="default">Get Started</Heading>
@@ -117,9 +117,11 @@ export class DocsHome extends React.Component<Props> {
<StepLinks links={usefulLinks} />
</div>
</Columns>
<Separator/>
<Separator />
<CommunityWrapper>
{communityShortcuts.map((shortcut, index) => <CommunityLink key={`communityLink-${index}`} {...shortcut} />)}
{communityShortcuts.map((shortcut, index) => (
<CommunityLink key={`communityLink-${index}`} {...shortcut} />
))}
</CommunityWrapper>
</Section>
</SiteWrap>
@@ -154,7 +156,7 @@ Columns.defaultProps = {
const Separator = styled.hr`
border-width: 0 0 1px;
border-color: #E4E4E4;
border-color: #e4e4e4;
height: 0;
margin-top: 60px;
margin-bottom: 60px;

154
packages/website/ts/pages/docs/page_template.tsx
View File

@@ -72,26 +72,34 @@ export class DocsPageTemplate extends React.Component<Props> {
<article>
<LargeHeading>Large Heading</LargeHeading>
<LargeIntro>Larger introduction text</LargeIntro>
<Heading asElement="h2" size="default">Notifications</Heading>
<Heading asElement="h2" size="default">
Notifications
</Heading>
<Callout text="This is' a pretty standard information callout" />
<Callout text="This is an indication that something isn’t quite right" type="alert" />
<Callout text="This is a success message" type="success" />
<Heading asElement="h2" size="default">Tutorial Steps</Heading>
<Heading asElement="h2" size="default">
Tutorial Steps
</Heading>
<TutorialSteps>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</TutorialSteps>
<Heading asElement="h2" size="default">Standard Heading</Heading>
<Heading asElement="h2" size="default">
Standard Heading
</Heading>
<Paragraph>This would be paragraph text.</Paragraph>
<Paragraph>
This would be paragraph text.
</Paragraph>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
</Paragraph>
<Paragraph>
And here is a table:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis
sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim
tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu
dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam
ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac
pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
</Paragraph>
<Paragraph>And here is a table:</Paragraph>
<Table>
<thead>
<tr>
@@ -102,31 +110,55 @@ export class DocsPageTemplate extends React.Component<Props> {
<tbody>
<tr>
<td>makerAddress</td>
<td>Address that created the order. The maker is one of the two parties that will be involved in the trade if the order gets filled.</td>
<td>
Address that created the order. The maker is one of the two parties that
will be involved in the trade if the order gets filled.
</td>
</tr>
<tr>
<td>takerAddress</td>
<td>Address that is allowed to fill the order. If set to 0, anyone is allowed to fill the order. This field allows makers to decide who can fill an order, rendering it useless to eavesdroppers or outside parties.</td>
<td>
Address that is allowed to fill the order. If set to 0, anyone is allowed to
fill the order. This field allows makers to decide who can fill an order,
rendering it useless to eavesdroppers or outside parties.
</td>
</tr>
<tr>
<td>feeRecipientAddress</td>
<td>The address that will receive the fees stipulated by the order. This is typically used to incentivize off-chain order relay.</td>
<td>
The address that will receive the fees stipulated by the order. This is
typically used to incentivize off-chain order relay.
</td>
</tr>
<tr>
<td>senderAddress</td>
<td>Is an advanced feature that can be defaulted to the 0 address. It allows the maker to enforce that the order must flow through some additional logic residing in an additional Ethereum smart contract before it can be filled (e.g a KYC whitelist contract) -- more on "extension contracts" later.</td>
<td>
Is an advanced feature that can be defaulted to the 0 address. It allows the
maker to enforce that the order must flow through some additional logic
residing in an additional Ethereum smart contract before it can be filled
(e.g a KYC whitelist contract) -- more on "extension contracts" later.
</td>
</tr>
<tr>
<td>makerAssetAmount</td>
<td>Amount of the maker'sAsset being offered by the maker. Must be greater than 0.</td>
<td>
Amount of the maker'sAsset being offered by the maker. Must be greater than
0.
</td>
</tr>
<tr>
<td>makerFee</td>
<td>The fee to be paid by the order maker to the <code>feeRecipientAddress</code> in the event of an order fill. Partial fills result in partial fees.</td>
<td>
The fee to be paid by the order maker to the{' '}
<code>feeRecipientAddress</code> in the event of an order fill. Partial
fills result in partial fees.
</td>
</tr>
</tbody>
</Table>
<Heading asElement="h3" size="default">Code Snippet</Heading>
<Heading asElement="h3" size="default">
Code Snippet
</Heading>
<Code>
{`import { provider, networkId, signerAddress, salt, signature, senderAddress } from '@0x/browser-examples';
@@ -136,7 +168,9 @@ const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsyn
from: senderAddress,
});`}
</Code>
<Heading asElement="h3" size="default">Tabbed Code Snippet</Heading>
<Heading asElement="h3" size="default">
Tabbed Code Snippet
</Heading>
<Tabs>
<TabList>
<Tab>Typescript</Tab>
@@ -178,14 +212,32 @@ const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsyn
</Code>
</TabPanel>
</Tabs>
<Heading asElement="h3" size="default">Subheading</Heading>
<Heading asElement="h3" size="default">
Subheading
</Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis
sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim
tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu
dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam
ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac
pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
</Paragraph>
<div>
<Note heading="Information" description="This is a side-info callout used to explain things a little more when needed." />
<Note
heading="Information"
description="This is a side-info callout used to explain things a little more when needed."
/>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in
nisl varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis
convallis sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero.
Vivamus eu enim tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed
tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis volutpat sem et sem
faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc euismod.
Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent
dignissim mi a maximus euismod
</Paragraph>
</div>
<UnorderedList>
@@ -194,23 +246,56 @@ 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>
<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>
<StepLinks links={usefulLinks} />
<HelpCallout />
<NewsletterSignup />
<HelpfulCta />
<div>
<Heading asElement="h2" size="default">Resources</Heading>
<Resource heading="RadarRelay SDK" description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs" tags={[ { label: 'Relayer' } ]} />
<Resource heading="RadarRelay SDK" description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs" tags={[ { label: 'Community Maintained', isInverted: true }, { label: 'Relayer' } ]} />
<Heading asElement="h2" size="default">
Resources
</Heading>
<Resource
heading="RadarRelay SDK"
description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
tags={[{ label: 'Relayer' }]}
/>
<Resource
heading="RadarRelay SDK"
description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs"
tags={[{ label: 'Community Maintained', isInverted: true }, { label: 'Relayer' }]}
/>
</div>
<div>
<Heading asElement="h2" size="default">Feature Links</Heading>
<FeatureLink heading="RadarRelay SDK" description="A description could possibly go here but could be tight." icon="flexibleIntegration" url="#" />
<FeatureLink heading="RadarRelay SDK" description="A description could possibly go here but could be tight." icon="flexibleIntegration" url="#" />
<FeatureLink heading="RadarRelay SDK" description="A description could possibly go here but could be tight." icon="flexibleIntegration" url="#" />
<Heading asElement="h2" size="default">
Feature Links
</Heading>
<FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="#"
/>
<FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="#"
/>
<FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="#"
/>
</div>
</article>
</Columns>
@@ -233,7 +318,7 @@ Columns.defaultProps = {
const Separator = styled.hr`
border-width: 0 0 1px;
border-color: #E4E4E4;
border-color: #e4e4e4;
height: 0;
margin-top: 60px;
margin-bottom: 60px;
@@ -247,5 +332,4 @@ const LargeHeading = styled(Heading).attrs({
const LargeIntro = styled(Paragraph).attrs({
size: 'medium',
})`
`;
})``;

1
packages/website/ts/pages/extensions.tsx
View File

@@ -124,7 +124,6 @@ export class Extensions extends React.Component<Props> {
window.history.replaceState(null, null, `${window.location.pathname}${window.location.search}#contact`);
this.setState({ isContactModalOpen: true });
};
}
const HeroActions = () => (

1
packages/website/ts/pages/instant.tsx
View File

@@ -172,7 +172,6 @@ export class Next0xInstant extends React.Component<Props> {
window.history.replaceState(null, null, `${window.location.pathname}${window.location.search}#contact`);
this.setState({ isContactModalOpen: true });
};
}
// scroll animation calc is simply (imageWidth * totalRepetitions) / 2

1
packages/website/ts/pages/launch_kit.tsx
View File

@@ -189,7 +189,6 @@ export class NextLaunchKit extends React.Component<Props> {
window.history.replaceState(null, null, `${window.location.pathname}${window.location.search}#contact`);
this.setState({ isContactModalOpen: true });
};
}
const HeroActions = () => (

1
packages/website/ts/pages/market_maker.tsx
View File

@@ -171,5 +171,4 @@ export class NextMarketMaker extends React.Component<NextMarketMakerProps> {
</Button>
</>
);
}

1
packages/website/ts/pages/why.tsx
View File

@@ -235,7 +235,6 @@ export class NextWhy extends React.Component<Props> {
window.history.replaceState(null, null, `${window.location.pathname}${window.location.search}#contact`);
this.setState({ isContactModalOpen: true });
};
}
interface SectionProps {