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

Cleaned up helpful_cta, hero, newsletter_signup components.

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-05 19:51:47 +02:00
committed by fabioberger
parent b94631c84a
commit 4ccb735282
3 changed files with 46 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,24 +1,17 @@
import { Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import styled, { withTheme } from 'styled-components';
import React from 'react';
import styled from 'styled-components';
import { Button } from 'ts/components/button';
import { SearchInput } from 'ts/components/docs/search_input';
import { Icon } from 'ts/components/icon';
import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
import { ThemeValuesInterface } from 'ts/components/siteWrap';
import { Heading, Paragraph } from 'ts/components/text';
import { Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
export interface HelpfulCtaProps {
export interface IHelpfulCtaProps {
heading?: string;
}
export const HelpfulCta: React.FunctionComponent<HelpfulCtaProps> = ({ heading }: HelpfulCtaProps) => (
<>
export const HelpfulCta: React.FC<IHelpfulCtaProps> = ({ heading }) => {
// @TODO: add was this helpful logic
return (
<Wrapper>
<Text>{heading}</Text>
<Buttons>
@@ -28,8 +21,8 @@ export const HelpfulCta: React.FunctionComponent<HelpfulCtaProps> = ({ heading }
</CtaButton>
</Buttons>
</Wrapper>
</>
);
);
};
HelpfulCta.defaultProps = {
heading: 'Was this page helpful?',

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

@@ -1,52 +1,38 @@
import { Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import styled, { withTheme } from 'styled-components';
import React from 'react';
import styled from 'styled-components';
import { Button } from 'ts/components/button';
import { SearchInput } from 'ts/components/docs/search_input';
import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
import { ThemeValuesInterface } from 'ts/components/siteWrap';
import { Heading, Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
interface Props {
interface IHeroProps {
isHome?: boolean;
title?: string;
description?: string;
}
interface LinkConfig {
label: string;
url: string;
shouldOpenInNewTab?: boolean;
}
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}
export const Hero: React.FC<IHeroProps> = ({ description, isHome, title }) => {
return (
<HeroWrapper isHome={isHome}>
<Heading size="large" isCentered={true} marginBottom={isHome || description ? '30px' : '0'}>
{title}
</Heading>
{props.description && <Paragraph isCentered={true}>{props.description}</Paragraph>}
{props.isHome && <SearchInput isHome={true} />}
</Wrapper>
</>
);
{description && <Paragraph isCentered={true}>{description}</Paragraph>}
{isHome && <SearchInput isHome={true} />}
</HeroWrapper>
);
};
Hero.defaultProps = {
isHome: false,
};
const Wrapper = styled.div<Props>`
const HeroWrapper = styled.div<{ isHome: boolean }>`
background-color: ${colors.backgroundLight};
padding-top: ${props => props.isHome && `63px`};
padding-bottom: 80px;
margin-bottom: 60px;
min-height: 15rem;
min-height: ${props => (props.isHome ? '21.875rem' : '13.222rem')};
min-height: ${({ isHome }) => (isHome ? '21.875rem' : '13.222rem')};
display: flex;
flex-direction: column;
justify-content: center;

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

@@ -1,48 +1,33 @@
import { Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import styled, { withTheme } from 'styled-components';
import React from 'react';
import styled from 'styled-components';
import { Button } from 'ts/components/button';
import { SearchInput } from 'ts/components/docs/search_input';
import { Icon } from 'ts/components/icon';
import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
import { ThemeValuesInterface } from 'ts/components/siteWrap';
import { Heading, Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
export interface NewsletterSignupProps {
export interface INewsletterSignupProps {
heading?: string;
description?: string;
url?: string;
}
interface WrapperProps {
isHome?: boolean;
}
export const NewsletterSignup: React.FunctionComponent<NewsletterSignupProps> = (props: NewsletterSignupProps) => (
<>
<Wrapper href={props.url}>
<Heading marginBottom="8px">{props.heading}</Heading>
<Paragraph marginBottom="25px">{props.description}</Paragraph>
<InputWrapper>
<Label htmlFor="emailSignup">Email Address</Label>
<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"
/>
</svg>
</Submit>
</InputWrapper>
</Wrapper>
</>
export const NewsletterSignup: React.FC<INewsletterSignupProps> = props => (
<NewsletterSignupWrapper href={props.url}>
<Heading marginBottom="8px">{props.heading}</Heading>
<Paragraph marginBottom="25px">{props.description}</Paragraph>
<InputWrapper>
<Label htmlFor="emailSignup">Email Address</Label>
<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"
/>
</svg>
</Submit>
</InputWrapper>
</NewsletterSignupWrapper>
);
NewsletterSignup.defaultProps = {
@@ -50,7 +35,7 @@ NewsletterSignup.defaultProps = {
description: 'Body font about the newseletter',
};
const Wrapper = styled.a<WrapperProps>`
const NewsletterSignupWrapper = styled.a`
background-color: ${colors.backgroundLight};
padding: 40px 30px 50px;
display: flex;