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

WIP components

Browse Source
This commit is contained in:
Fred Carlsen
2019-06-25 11:12:13 +02:00
committed by fabioberger
parent 926d165321
commit 49f2cef5ac
17 changed files with 534 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/website/public/css/formular.css
View File

@@ -43,3 +43,10 @@
src: url('../fonts/Formular-Regular.woff2') format('woff2'), url('../fonts/Formular-Regular.woff') format('woff');
font-display: swap;
}
@font-face {
font-family: 'Formular Mono';
src: url('../fonts/Formular-Mono.woff') format('truetype');
font-weight: 400;
font-style: normal;
}

BIN
packages/website/public/fonts/Formular-Mono.woff Normal file
View File

Binary file not shown.

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

@@ -64,7 +64,7 @@ Callout.defaultProps = {
type: 'standard',
};
const Wrapper = styled.a<WrapperProps>`
const Wrapper = styled.div<WrapperProps>`
background-color: ${props => ThemeSettings[props.type].bgColor};
color: ${colors.textDarkPrimary};
padding: 1rem 1rem 1rem 1rem;

54
packages/website/ts/components/docs/feature_link.tsx Normal file
View File

@@ -0,0 +1,54 @@
import { Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import styled, { withTheme } 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 LinkProps {
heading: string;
icon: string;
description?: string;
url: string;
shouldOpenInNewTab?: boolean;
}
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>
</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"/>
</svg>
</Wrapper>
</>
);
const Wrapper = styled.a`
background-color: ${colors.backgroundLight};
border: 1px solid #DBDFDD;
padding: 30px 30px;
display: flex;
align-items: center;
margin-bottom: 0.555555556rem;
`;
const Content = styled.div`
margin-right: auto;
padding-right: 30px;
`;

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

@@ -46,13 +46,13 @@ const navItems: NavItemProps[] = [
text: 'API Explorer',
},
{
id: 'tutorials',
url: WebsitePaths.AboutMission,
text: 'Tutorials',
id: 'guides',
url: '/docs/guides',
text: 'Guides',
},
{
id: 'tools',
url: WebsitePaths.AboutMission,
url: '/docs/tools',
text: 'Tools',
},
];

66
packages/website/ts/components/docs/helpful_cta.tsx Normal file
View File

@@ -0,0 +1,66 @@
import { Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import styled, { withTheme } 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 HelpfulCtaProps {
heading?: string;
description?: string;
url?: string;
}
export const HelpfulCta: React.FunctionComponent<HelpfulCtaProps> = (props: HelpfulCtaProps) => (
<>
<Wrapper>
<Text>Was this page helpful</Text>
<Buttons>
<CtaButton color={colors.white}>Yes</CtaButton>
<CtaButton isTransparent={true} color={colors.brandLight} borderColor={colors.brandLight}>No</CtaButton>
</Buttons>
</Wrapper>
</>
);
HelpfulCta.defaultProps = {
heading: 'Need some help?',
description: 'Get in touch here and we’ll be happy to help.',
};
const Wrapper = styled.div`
display: flex;
align-items: center;
margin-bottom: 1.875rem;
`;
const Text = styled(Paragraph)`
color: ${colors.textDarkPrimary};
font-size: 1.111111111rem;
font-weight: 400;
margin-bottom: 0;
opacity: 1;
`;
const Buttons = styled.div`
display: flex;
align-items: center;
margin-left: 40px;
`;
const CtaButton = styled(Button)`
padding: 8px 30px 6px;
font-size: 1rem;
& + & {
margin-left: 10px;
}
`;

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

@@ -44,7 +44,7 @@ const Wrapper = styled.div<Props>`
padding-bottom: 80px;
margin-bottom: 60px;
min-height: 15rem;
min-height: 21.875rem;
min-height: ${props => props.isHome ? '21.875rem' : '13.222rem'};
display: flex;
flex-direction: column;
justify-content: center;

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

@@ -31,6 +31,11 @@ export const NewsletterSignup: React.FunctionComponent<NewsletterSignupProps> =
<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>
</>
@@ -60,6 +65,7 @@ const Label = styled.label`
const InputWrapper = styled.div`
padding: 0 40px;
position: relative;
`;
const Input = styled.input`
@@ -71,4 +77,16 @@ const Input = styled.input`
font-size: 1.25rem;
font-weight: 300;
width: 100%;
outline: none;
`;
const Submit = styled.button`
background-color: transparent;
border: 0;
cursor: pointer;
appearance: none;
position: absolute;
height: 100%;
width: 50px;
right: 40px;
`;

52
packages/website/ts/components/docs/note.tsx Normal file
View File

@@ -0,0 +1,52 @@
import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
import { Heading, Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';
export interface NoteProps {
heading: string;
description?: string;
}
interface WrapperProps {
}
export const Note: React.FunctionComponent<NoteProps> = (props: NoteProps) => (
<>
<Wrapper>
<Content>
<NoteHeading marginBottom="6px">{props.heading}</NoteHeading>
<Description>{props.description}</Description>
</Content>
</Wrapper>
</>
);
const Wrapper = styled.div`
background-color: ${colors.backgroundLight};
border: 1px solid #DBDFDD;
padding: 20px 14px;
display: flex;
align-items: center;
float: right;
max-width: 300px;
margin-left: 30px;
margin-bottom: 30px;
`;
const Content = styled.div`
`;
const NoteHeading = styled(Heading).attrs({ color: colors.brandDark, asElement: 'h4' })`
font-size: 0.944444444rem !important;
margin-bottom: 6px;
`;
const Description = styled(Paragraph)`
font-size: 0.888888889rem;
margin-bottom: 0;
line-height: 1.25;
opacity: 1;
`;

52
packages/website/ts/components/docs/resource/level.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
import { colors } from 'ts/style/colors';
import { RatingBar } from 'ts/components/docs/resource/rating_bar';
export interface LevelProps {
difficulty: Difficulty;
}
export enum Difficulty {
Beginner = 'beginner',
Intermediate = 'intermediate',
Advanced = 'advanced',
}
const difficulties = {
[Difficulty.Beginner]: {
label: 'Beginner',
rating: 1
},
[Difficulty.Intermediate]: {
label: 'Intermediate',
rating: 2
},
[Difficulty.Advanced]: {
label: 'Advanced',
rating: 3
},
}
export const Level: React.FunctionComponent<LevelProps> = ({ difficulty }: LevelProps) => {
const info = difficulties[difficulty];
return (
<Wrapper>
<DifficultyLabel>{info.label}</DifficultyLabel>
<RatingBar rating={info.rating} />
</Wrapper>
)
};
const Wrapper = styled.div`
display: flex;
align-items: center;
`;
const DifficultyLabel = styled.span`
font-size: 0.777777778rem;
color: ${colors.brandDark};
margin-right: 0.611111111rem;
`;

55
packages/website/ts/components/docs/resource/rating_bar.tsx Normal file
View File

@@ -0,0 +1,55 @@
import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
import { Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';
interface LabelInterface {
[key: number]: string;
}
interface RatingBarProps {
rating: number;
}
interface RatingBulletProps {
isFilled: boolean;
}
export const RatingBar: React.StatelessComponent<RatingBarProps> = ({ rating }) => {
const id =
Math.random()
.toString(36)
.substring(2, 15) +
Math.random()
.toString(36)
.substring(2, 15);
const ratingPlaceholders = Array.from(new Array(3), (value, index) => index + 1);
const fillCheck = (currentIndex: number) => currentIndex <= rating;
// TODO convert this to use a Container component
return (
<Wrapper>
{ratingPlaceholders.map((currentIndex: number) => (
<RatingBullet key={`${id}-${currentIndex}`} isFilled={fillCheck(currentIndex)} />
))}
</Wrapper>
);
};
const Wrapper = styled.div`
display: flex;
align-items: center;
`;
const RatingBullet = styled.div<RatingBulletProps>`
background-color: ${props => (props.isFilled ? colors.brandDark : 'rgba(0, 56, 49, 0.2)')};
border-radius: 50%;
width: 10px;
height: 10px;
& + & {
margin-left: 4px;
}
`;

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

@@ -6,6 +6,7 @@ import { Heading, Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';
import { Tag } from 'ts/components/docs/resource/tag';
import { Level, Difficulty } from 'ts/components/docs/resource/level';
export interface ResourceProps {
heading?: string;
@@ -14,11 +15,9 @@ export interface ResourceProps {
tags: TagProps[];
}
interface WrapperProps {
}
interface TagProps {
label: React.ReactNode;
isInverted?: boolean;
}
export const Resource: React.FunctionComponent<ResourceProps> = ({ heading, description, url, tags }: ResourceProps) => (
@@ -27,11 +26,9 @@ export const Resource: React.FunctionComponent<ResourceProps> = ({ heading, desc
<Paragraph size="default" marginBottom="30px">{description}</Paragraph>
<Meta>
<Tags>
{tags.map((tag, index) => <Tag key={`tag-${index}`}>{tag.label}</Tag>)}
{tags.map(({label, isInverted}, index) => <Tag key={`tag-${index}`} isInverted={isInverted}>{label}</Tag>)}
</Tags>
<div>
Rating
</div>
<Level difficulty={Difficulty.Beginner} />
</Meta>
</Wrapper>
);
@@ -41,10 +38,10 @@ Resource.defaultProps = {
description: 'Get in touch here and we’ll be happy to help.',
};
const Wrapper = styled.a<WrapperProps>`
const Wrapper = styled.a`
border: 1px solid #D7E3DB;
padding: 25px 30px;
margin-bottom: 1.875rem;
margin-bottom: 1.111111111rem;
display: block;
`;

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

@@ -27,8 +27,10 @@ const Wrapper = styled.div<WrapperProps>`
background-color: ${props => props.isInverted ? colors.brandDark : 'rgba(0, 56, 49, 0.1)'};
border-radius: 4px;
color: ${props => props.isInverted ? colors.white : colors.brandDark};
font-size: 0.75rem;
padding: 6px 10px 4px;
font-size: 0.666666667rem;
font-family: 'Formular Mono';
font-weight: 400;
padding: 6px 10px 5px;
display: inline-flex;
align-items: center;
text-transform: uppercase;

47
packages/website/ts/components/docs/sidebar/filter.tsx Normal file
View File

@@ -0,0 +1,47 @@
import * as React from 'react';
import styled from 'styled-components';
import { colors } from 'ts/style/colors';
export interface FilterProps {
name: string;
value: string;
label: string;
}
export const Filter: React.FunctionComponent<FilterProps> = ({ value, name, label }: FilterProps) => (
<Wrapper>
<Checkbox name={name} />
<CheckboxBox />
<Label>{label}</Label>
</Wrapper>
);
const Wrapper = styled.label`
cursor: pointer;
display: flex;
align-items: center;
margin-bottom: 0.833333333rem;
`;
const Checkbox = styled.input.attrs({ type: 'checkbox' })`
position: absolute;
opacity: 0;
opacity: 0;
`;
const CheckboxBox = styled.div`
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;
}
`;
const Label = styled.span`
font-size: 0.833rem;
color: ${colors.textDarkPrimary};
font-weight: 300;
`;

111
packages/website/ts/components/docs/sidebar/filters.tsx Normal file
View File

@@ -0,0 +1,111 @@
import * as React from 'react';
import * as CopyToClipboard from 'react-copy-to-clipboard';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { Button } from 'ts/components/button';
import { Heading } from 'ts/components/text';
import { Container } from 'ts/components/ui/container';
import { Filter } from 'ts/components/docs/sidebar/filter';
import { colors } from 'ts/style/colors';
import { styled } from 'ts/style/theme';
import { zIndex } from 'ts/style/z_index';
export interface FiltersProps {
}
export interface FiltersState {
}
interface Group {
heading: string;
name: string;
filters: FilterProps[];
}
interface FilterProps {
value: string;
label: string;
}
const groups: Group[] = [
{
heading: 'Topic',
name: 'topic',
filters: [
{
value: 'mesh',
label: 'Mesh'
},
{
value: 'testing',
label: 'Testing'
},
{
value: 'mesh',
label: 'Mesh'
},
{
value: 'testing',
label: 'Testing'
},
]
},
{
heading: 'Level',
name: 'level',
filters: [
{
value: 'beginner',
label: 'Beginner'
},
{
value: 'intermediate',
label: 'Intermediate'
},
{
value: 'advanced',
label: 'Advanced'
},
]
},
]
export class Filters extends React.Component<FiltersProps, FiltersState> {
public static defaultProps = {
};
public state: FiltersState = {
};
public render(): React.ReactNode {
return (
<Wrapper>
{groups.map(({ heading, name, filters }: Group, index) => (
<GroupWrapper key={`filter-group-${index}`}>
<GroupHeading asElement="h3">{heading}</GroupHeading>
{filters.map(({ value, label }: FilterProps, index) => (
<Filter key={`filter-${name}-${index}`} name={name} value={value} label={label} />
))}
</GroupWrapper>
))}
</Wrapper>
);
}
/*private readonly _handleCopyClick = () => {
this.setState({ didCopyFilters: true });
};*/
}
const Wrapper = styled.div`
position: relative;
max-width: 702px;
`;
const GroupWrapper = styled.div`
margin-bottom: 2.22em;
`;
const GroupHeading = styled(Heading)`
color: ${colors.textDarkPrimary};
font-size: 1rem !important;
font-weight: 400 !important;
margin-bottom: 1em !important;
`;

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

@@ -24,8 +24,8 @@ const Wrapper = styled.table`
width: 100%;
th {
font-size: 1rem;
font-weight: 500;
font-size: 0.888888889rem;
font-weight: 400;
padding: 14px 20px 13px;
border-bottom: 1px solid #CFCFCF;
text-align: left;
@@ -34,8 +34,9 @@ const Wrapper = styled.table`
td {
padding: 14px 20px 13px;
border-bottom: 1px solid #CFCFCF;
font-size: 0.875rem;
font-size: 0.777777778rem;
opacity: 0.76;
line-height: 1.428571429;
}
td + td,
@@ -50,4 +51,14 @@ const Wrapper = styled.table`
tr:nth-child(even) td {
background-color: ${colors.backgroundLight};
}
code {
background-color: rgba(0, 56, 49, 0.1);
border-radius: 3px;
border: 0;
font-size: 1em;
padding: 2px 5px;
color: ${colors.brandDark};
font-family: inherit;
}
`;

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

@@ -5,10 +5,15 @@ import styled, { keyframes } from 'styled-components';
// import { Tabs } from 'react-tabs';
import { Callout } from 'ts/components/docs/callout';
import { Code } from 'ts/components/docs/code';
import { Filters } from 'ts/components/docs/sidebar/filters';
import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link';
import { FeatureLink } from 'ts/components/docs/feature_link';
import { HelpCallout } from 'ts/components/docs/help_callout';
import { HelpfulCta } from 'ts/components/docs/helpful_cta';
import { Hero } from 'ts/components/docs/hero';
import { NewsletterSignup } from 'ts/components/docs/newsletter_signup';
import { Note } from 'ts/components/docs/note';
import { Resource } from 'ts/components/docs/resource/resource';
import { SearchInput } from 'ts/components/docs/search_input';
import { LinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
import { SiteWrap } from 'ts/components/docs/siteWrap';
@@ -24,7 +29,6 @@ import { Heading, Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
import { documentConstants } from 'ts/utils/document_meta_constants';
import { Resource } from 'ts/components/docs/resource/resource';
interface Props {
location: Location;
@@ -63,11 +67,11 @@ export class DocsPageTemplate extends React.Component<Props> {
<Section maxWidth={'1030px'} isPadded={false} padding="0 0">
<Columns>
<aside>
<Paragraph>Sidebar</Paragraph>
<Filters />
</aside>
<article>
<LargeHeading>Large Heading</LargeHeading>
<LargeIntro>Large Heading</LargeIntro>
<LargeIntro>Larger introduction text</LargeIntro>
<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" />
@@ -97,20 +101,28 @@ export class DocsPageTemplate extends React.Component<Props> {
</thead>
<tbody>
<tr>
<td>Step1</td>
<td>Step2</td>
<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>
</tr>
<tr>
<td>Step1</td>
<td>Step2</td>
<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>
</tr>
<tr>
<td>Step1</td>
<td>Step2</td>
<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>
</tr>
<tr>
<td>Step1</td>
<td>Step2</td>
<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>
</tr>
<tr>
<td>makerAssetAmount</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>
</tr>
</tbody>
</Table>
@@ -170,6 +182,12 @@ const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsyn
<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>
<div>
<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
</Paragraph>
</div>
<UnorderedList>
<li>List items</li>
<li>List items</li>
@@ -182,7 +200,18 @@ const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsyn
<StepLinks links={usefulLinks} />
<HelpCallout />
<NewsletterSignup />
<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" } ]} />
<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' } ]} />
</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="#" />
</div>
</article>
</Columns>
</Section>