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

Added constants for new docs

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-31 17:14:28 +02:00
committed by fabioberger
parent 70898be894
commit 99ffe6bb2d
14 changed files with 44 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/website/ts/components/docs/mdx/code.tsx
View File

@@ -6,6 +6,7 @@ import { Button } from 'ts/components/button';
import { CodeRun } from 'ts/components/docs/mdx/code_run';
import { colors } from 'ts/style/colors';
import { docs} from 'ts/style/docs';
import { styled } from 'ts/style/theme';
interface ICodeProps {
@@ -63,7 +64,7 @@ const BORDER_RADIUS = '4px';
const CodeWrapper = styled.div`
clear: both;
max-width: 100%;
margin-bottom: 1.875rem;
margin-bottom: ${docs.marginBottom};
padding: ${GUTTER};
background-color: ${colors.backgroundLight};
border-radius: 0 ${BORDER_RADIUS} ${BORDER_RADIUS};

3
packages/website/ts/components/docs/mdx/code_tabs.tsx
View File

@@ -9,6 +9,7 @@ import {
} from 'react-tabs';
import { colors } from 'ts/style/colors';
import { docs } from 'ts/style/docs';
interface ITabProps {
children: React.ReactNode;
@@ -38,7 +39,7 @@ export const CodeTabs: React.FC<ICodeTabsProps> = ({ children, tabs }) => {
export const Tabs = styled(OriginalTabs).attrs({
selectedTabClassName: 'is-active',
})<ITabProps>`
margin-bottom: 1.875rem;
margin-bottom: ${docs.marginBottom};
position: relative;
`;

4
packages/website/ts/components/docs/mdx/headings.tsx
View File

@@ -1,9 +1,11 @@
import styled from 'styled-components';
import { Heading } from 'ts/components/text';
import { docs} from 'ts/style/docs';
const H1 = styled(Heading).attrs({
size: 'large',
marginBottom: '1.875rem',
marginBottom: docs.marginBottom,
})``;
const H2 = styled(Heading).attrs({

3
packages/website/ts/components/docs/mdx/help_callout.tsx
View File

@@ -6,6 +6,7 @@ import { Link } from '@0x/react-shared';
import { Icon } from 'ts/components/icon';
import { Heading, Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';
import { docs} from 'ts/style/docs';
export interface IHelpCalloutProps {
heading?: string;
@@ -40,6 +41,6 @@ const HelpCalloutWrapper = styled.div`
display: flex;
align-items: center;
padding: 25px 30px;
margin-bottom: 1.875rem;
margin-bottom: ${docs.marginBottom};
background-color: ${colors.backgroundLight};
`;

5
packages/website/ts/components/docs/mdx/helpful_cta.tsx
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import styled, { keyframes } from 'styled-components';
import styled from 'styled-components';
import { analytics } from 'ts/utils/analytics';
@@ -7,6 +7,7 @@ import { Button } from 'ts/components/button';
import { Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';
import { docs} from 'ts/style/docs';
import { fadeIn } from 'ts/style/keyframes';
interface IHelpfulCtaProps {
@@ -61,7 +62,7 @@ HelpfulCta.defaultProps = {
const HelpfulCtaWrapper = styled.div`
display: flex;
align-items: center;
margin-bottom: 1.875rem;
margin-bottom: ${docs.marginBottom};
@media (max-width: 500px) {
flex-direction: column;

3
packages/website/ts/components/docs/mdx/newsletter_widget.tsx
View File

@@ -5,6 +5,7 @@ import { NewsletterForm } from 'ts/components/newsletter_form';
import { Heading, Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';
import { docs} from 'ts/style/docs';
export interface INewsletterWidgetProps {
heading?: string;
@@ -34,7 +35,7 @@ const NewsletterSignupWrapper = styled.a`
justify-content: center;
flex-direction: column;
text-align: center;
margin-bottom: 1.875rem;
margin-bottom: ${docs.marginBottom};
@media (max-width: 768px) {
padding: 40px 80px 50px;

3
packages/website/ts/components/docs/mdx/notification.tsx
View File

@@ -2,6 +2,7 @@ import * as React from 'react';
import styled from 'styled-components';
import { colors } from 'ts/style/colors';
import { docs} from 'ts/style/docs';
interface INotificationWrapperProps {
type?: 'standard' | 'alert' | 'success';
@@ -22,7 +23,7 @@ const NotificationWrapper = styled.div<INotificationWrapperProps>`
display: flex;
align-items: center;
padding: 1rem;
margin-bottom: 1.875rem;
margin-bottom: ${docs.marginBottom};
color: ${colors.textDarkPrimary};
background-color: ${({ type }) => themeSettings[type].bgColor};

4
packages/website/ts/components/docs/mdx/ordered_list.tsx
View File

@@ -1,9 +1,11 @@
import styled from 'styled-components';
import { docs} from 'ts/style/docs';
export const OrderedList = styled.ol`
list-style-type: none;
counter-reset: tutorialSteps;
margin-bottom: 1.875rem;
margin-bottom: ${docs.marginBottom};
li {
display: flex;

3
packages/website/ts/components/docs/mdx/table.tsx
View File

@@ -1,10 +1,11 @@
import styled from 'styled-components';
import { colors } from 'ts/style/colors';
import { docs} from 'ts/style/docs';
export const Table = styled.table`
border: 1px solid #cfcfcf;
margin-bottom: 1.875rem;
margin-bottom: ${docs.marginBottom};
width: 100%;
th {

4
packages/website/ts/components/docs/mdx/unordered_list.tsx
View File

@@ -1,8 +1,10 @@
import styled from 'styled-components';
import { docs } from 'ts/style/docs';
export const UnorderedList = styled.ul`
list-style-type: disc;
margin-bottom: 1.875rem;
margin-bottom: ${docs.marginBottom};
padding-left: 1rem;
li {

4
packages/website/ts/components/docs/sidebar/sidebar_wrapper.tsx
View File

@@ -4,6 +4,8 @@ import styled from 'styled-components';
import { Collapse } from 'ts/components/docs/sidebar/collapse';
import { docs } from 'ts/style/docs';
interface ISidebarWrapperProps {
children: React.ReactNode;
}
@@ -28,5 +30,5 @@ const SidebarAside = styled.aside`
const SidebarContent = styled.div`
position: sticky;
top: 116px; /* To make space for the header (react-headroom) when clicking on links */
top: ${docs.headerOffset}px; /* To make space for the header (react-headroom) when clicking on links */
`;

9
packages/website/ts/components/docs/sidebar/table_of_contents.tsx
View File

@@ -4,6 +4,7 @@ import styled from 'styled-components';
import { Link } from '@0x/react-shared';
import { colors } from 'ts/style/colors';
import { docs } from 'ts/style/docs';
import { SidebarWrapper } from 'ts/components/docs/sidebar/sidebar_wrapper';
@@ -34,7 +35,13 @@ const Contents: React.FC<ITableOfContentsProps> = ({ contents }) => {
return (
<li key={id}>
{/* containerId is set to an empty string to make body element the scroll container */}
<ContentLink containerId="" offset={-116} level={level} to={id}>
<ContentLink
containerId=""
duration={docs.scrollDuration}
offset={-docs.headerOffset}
level={level}
to={id}
>
{title}
</ContentLink>
{children.length > 0 && <Contents contents={children} />}

6
packages/website/ts/components/documentation/shared/link.tsx
View File

@@ -20,6 +20,7 @@ export interface BaseLinkProps {
export interface ScrollLinkProps extends BaseLinkProps {
containerId?: string;
duration: number;
offset?: number;
onActivityChanged?: (isActive: boolean) => void;
}
@@ -48,6 +49,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
textDecoration: 'none',
fontColor: 'inherit',
containerId: constants.SCROLL_CONTAINER_ID,
duration: constants.DOCS_SCROLL_DURATION_MS,
};
private _outerReactScrollSpan: HTMLSpanElement | null;
constructor(props: LinkProps) {
@@ -119,8 +121,8 @@ export class Link extends React.Component<LinkProps, LinkState> {
offset={this.props.offset}
spy={true}
hashSpy={true}
duration={constants.DOCS_SCROLL_DURATION_MS}
smooth={constants.DOCS_SCROLL_DURATION_MS > 0}
duration={this.props.duration}
smooth={this.props.duration > 0}
containerId={this.props.containerId}
className={this.props.className}
style={styleWithDefault}

5
packages/website/ts/style/docs.ts Normal file
View File

@@ -0,0 +1,5 @@
export const docs = {
scrollDuration: 500,
headerOffset: 116,
marginBottom: '1.875rem',
};