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

Using the reusable Link component from react-shared for components with links in docs

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-19 15:45:19 +02:00
committed by fabioberger
parent d5039809de
commit 88acdaff90
8 changed files with 40 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,8 @@
import React from 'react';
import styled from 'styled-components';
import { Link } from '@0x/react-shared';
import { Icon } from 'ts/components/icon';
import { Heading, Paragraph } from 'ts/components/text';
@@ -14,7 +16,7 @@ export interface ICommunityLinkProps {
}
export const CommunityLink: React.FC<ICommunityLinkProps> = props => (
<CommunityLinkWrapper href={props.url}>
<CommunityLinkWrapper to={props.url}>
<CommunityIcon color={colors.brandLight} name={props.icon} margin={[0, 0, 24, 0]} />
<Heading size="small" marginBottom="8px">
{props.heading}
@@ -25,7 +27,7 @@ export const CommunityLink: React.FC<ICommunityLinkProps> = props => (
</CommunityLinkWrapper>
);
const CommunityLinkWrapper = styled.a`
const CommunityLinkWrapper = styled(Link)`
background-color: ${colors.backgroundLight};
border: 1px solid #dbdfdd;
padding: 50px;

2
packages/website/ts/components/docs/get_started_link.tsx
View File

@@ -14,7 +14,7 @@ export interface IGetStartedLinkProps {
export const GetStartedLink: React.FC<IGetStartedLinkProps> = props => (
<>
<GetStartedButton color={colors.brandDark} href={props.url} isWithArrow={true}>
<GetStartedButton color={colors.brandDark} to={props.url} isWithArrow={true}>
{props.heading}
</GetStartedButton>
<GetStartedParagraph color={colors.textDarkPrimary} isMuted={1}>

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

@@ -11,8 +11,10 @@ export interface INoteProps {
export const Note: React.FC<INoteProps> = props => (
<NoteWrapper>
<NoteHeading marginBottom="6px">{props.heading}</NoteHeading>
<NoteDescription>{props.description}</NoteDescription>
<Heading asElement="h4" color={colors.brandDark} size={17} marginBottom="6px">
{props.heading}
</Heading>
<Description>{props.description}</Description>
</NoteWrapper>
);
@@ -26,13 +28,8 @@ const NoteWrapper = styled.div`
margin-bottom: 30px;
`;
const NoteHeading = styled(Heading).attrs({ color: colors.brandDark, asElement: 'h4' })`
font-size: 0.944444444rem !important;
margin-bottom: 6px;
`;
const NoteDescription = styled(Paragraph)`
font-size: 0.888888889rem;
const Description = styled(Paragraph)`
font-size: 0.88rem;
margin-bottom: 0;
line-height: 1.4;
opacity: 1;

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

@@ -19,7 +19,7 @@ export interface IResourceProps {
export const Resource: React.FC<IResourceProps> = ({ heading, description, isCommunity, url, tags }) => {
return (
<Wrapper>
<ResourceWrapper>
<Heading color={colors.brandDark} size="small" marginBottom="8px">
<Link to={url}>{heading}</Link>
</Heading>
@@ -35,11 +35,11 @@ export const Resource: React.FC<IResourceProps> = ({ heading, description, isCom
</Tags>
<Level difficulty={Difficulty.Beginner} />
</Meta>
</Wrapper>
</ResourceWrapper>
);
};
const Wrapper = styled.div`
const ResourceWrapper = styled.div`
border: 1px solid #d7e3db;
padding: 25px 30px 5px;
margin-bottom: 1.1rem;

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

@@ -16,7 +16,7 @@ export const Tag: React.FC<ITagProps> = ({ children, isInverted }) => {
<TagText isInverted={isInverted}>
{isInverted && (
<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 4.5L3.5 7L9 1" stroke="white" stroke-width="1.5" />
<path d="M1 4.5L3.5 7L9 1" stroke="white" strokeWidth="1.5" />
</svg>
)}
{children}

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

@@ -4,18 +4,18 @@ import styled from 'styled-components';
import { Icon } from 'ts/components/icon';
import { Heading, Paragraph } from 'ts/components/text';
import { Link } from '@0x/react-shared';
import { colors } from 'ts/style/colors';
export interface IShortcutLinkProps {
heading: string;
icon: string;
description?: string;
url: string;
shouldOpenInNewTab?: boolean;
isHome?: boolean;
}
export const ShortcutLink: React.FC<IShortcutLinkProps> = props => (
<ShortcutLinkWrapper isHome={props.isHome} href={props.url}>
<ShortcutLinkWrapper to={props.url}>
<ShortcutIcon color={colors.brandLight} name={props.icon} />
<div>
<Heading size="small" marginBottom="8px">
@@ -28,10 +28,6 @@ export const ShortcutLink: React.FC<IShortcutLinkProps> = props => (
</ShortcutLinkWrapper>
);
ShortcutLink.defaultProps = {
isHome: false,
};
const ShortcutIcon = styled(Icon)`
margin-bottom: 1rem;
@@ -41,7 +37,7 @@ const ShortcutIcon = styled(Icon)`
}
`;
const ShortcutLinkWrapper = styled.a<{ isHome: boolean }>`
const ShortcutLinkWrapper = styled(Link)`
background-color: ${colors.backgroundLight};
border: 1px solid #dbdfdd;
padding: 50px;

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

@@ -1,16 +1,17 @@
import React from 'react';
import styled from 'styled-components';
import { Link } from '@0x/react-shared';
import { colors } from 'ts/style/colors';
export interface IStepLinkConfig {
title: string;
url: string;
shouldOpenInNewTab?: boolean;
}
export const StepLink: React.FC<IStepLinkConfig> = props => (
<StepLinkWrapper href={props.url}>
<StepLinkWrapper to={props.url}>
<StepLinkText>{props.title}</StepLinkText>
<svg height="14px" width="14px" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
@@ -23,7 +24,7 @@ export const StepLink: React.FC<IStepLinkConfig> = props => (
</StepLinkWrapper>
);
const StepLinkWrapper = styled.a`
const StepLinkWrapper = styled(Link)`
color: ${colors.brandDark};
padding: 21px 25px 19px;
display: flex;

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

@@ -12,6 +12,7 @@ import { Note } from 'ts/components/docs/note';
import { Notification } from 'ts/components/docs/notification';
import { OrderedList } from 'ts/components/docs/ordered_list';
import { Resource } from 'ts/components/docs/resource/resource';
import { Separator } from 'ts/components/docs/separator';
import { FilterGroup, Filters } from 'ts/components/docs/sidebar/filters';
import { SiteWrap } from 'ts/components/docs/siteWrap';
import { IStepLinkConfig } from 'ts/components/docs/step_link';
@@ -29,10 +30,11 @@ export const DocsPageTemplate: React.FC = () => {
<SiteWrap theme="light">
<DocumentTitle {...documentConstants.DOCS} />
<Hero title={`Page Template`} description="This a subheader for the page" />
<Section maxWidth="1030px" isPadded={false}>
<Section maxWidth="1150px" isPadded={false} overflow="visible">
<Columns>
<Filters groups={filterGroups} />
<article>
<Separator />
<ContentWrapper>
<LargeHeading>Large Heading</LargeHeading>
<LargeIntro>Larger introduction text</LargeIntro>
<Heading asElement="h2" size="default">
@@ -209,23 +211,23 @@ export const DocsPageTemplate: React.FC = () => {
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="#"
url="/"
/>
<FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="#"
url="/"
/>
<FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="#"
url="/"
/>
</div>
<NewsletterWidget />
</article>
</ContentWrapper>
</Columns>
</Section>
</SiteWrap>
@@ -234,9 +236,16 @@ export const DocsPageTemplate: React.FC = () => {
const Columns = styled.div`
display: grid;
grid-template-columns: 230px 1fr;
grid-template-columns: 65px 0 1fr;
grid-column-gap: 118px;
grid-row-gap: 30px;
@media (max-width: 900px) {
grid-template-columns: 1fr;
}
`;
const ContentWrapper = styled.article`
min-width: 0;
`;
const LargeHeading = styled(Heading).attrs({