diff options
Diffstat (limited to 'packages/website/ts/components/documentation')
6 files changed, 0 insertions, 478 deletions
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx deleted file mode 100644 index ac331db79..000000000 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Link } from '@0x/react-shared'; -import * as React from 'react'; -import { styled } from 'ts/style/theme'; -import { WebsitePaths } from 'ts/types'; - -import { Container } from '../ui/container'; - -export interface DocsLogoProps { - containerStyle?: React.CSSProperties; -} - -const Image = styled.img` - &:hover { - opacity: 0.7; - } -`; - -export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => { - return ( - <Container className="flex"> - <Container> - <Link to={WebsitePaths.Home}> - <Image src="/images/developers/logo/0x.svg" height={34} /> - </Link> - </Container> - <Container paddingTop="6px" paddingLeft="7px"> - <Link to={WebsitePaths.Docs}> - <Image src="/images/developers/logo/docs.svg" height={20} /> - </Link> - </Container> - </Container> - ); -}; - -DocsLogo.defaultProps = { - containerStyle: {}, -}; diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx deleted file mode 100644 index c4291b78f..000000000 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { ALink, colors, Link } from '@0x/react-shared'; -import * as _ from 'lodash'; -import Drawer from 'material-ui/Drawer'; -import * as React from 'react'; -import { DocsLogo } from 'ts/components/documentation/docs_logo'; -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; -import { Deco, Key, ScreenWidths } from 'ts/types'; -import { constants } from 'ts/utils/constants'; -import { Translate } from 'ts/utils/translate'; - -export interface DocsTopBarProps { - location: Location; - screenWidth: ScreenWidths; - translate: Translate; - sidebar?: React.ReactNode; -} - -interface DocsTopBarState { - isDrawerOpen: boolean; -} - -export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState> { - constructor(props: DocsTopBarProps) { - super(props); - this.state = { - isDrawerOpen: false, - }; - } - public componentWillReceiveProps(nextProps: DocsTopBarProps): void { - if (nextProps.location.pathname !== this.props.location.pathname) { - this.setState({ - isDrawerOpen: false, - }); - } - } - public render(): React.ReactNode { - return ( - <Container height={80}> - <Container - className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-justify-end md-justify-end sm-justify-start" - width="100%" - > - <Container className="sm-hide xs-hide"> - <Container className="flex items-center justify-between right" width="250px"> - {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)} - </Container> - </Container> - <Container className="lg-hide md-hide"> - <Container paddingTop="6px"> - <DocsLogo /> - </Container> - </Container> - <Container className="md-hide lg-hide absolute" right="18px" top="12px"> - <i - className="zmdi zmdi-menu" - style={{ - color: colors.grey700, - fontSize: 30, - cursor: 'pointer', - }} - onClick={this._onMenuButtonClick.bind(this)} - /> - </Container> - </Container> - <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'16px'} /> - {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()} - </Container> - ); - } - private _renderMenuItems(menuItemLinks: ALink[]): React.ReactNode { - const menuItems = _.map(menuItemLinks, menuItemInfo => { - return ( - <Link - key={`menu-item-${menuItemInfo.title}`} - to={menuItemInfo.to} - shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} - > - <Container className="flex items-center" paddingLeft="4px"> - <Text fontSize="16px" fontColor={colors.lightLinkBlue} fontWeight="bold"> - {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} - </Text> - </Container> - </Link> - ); - }); - return menuItems; - } - private _renderDrawer(): React.ReactNode { - return ( - <Drawer - open={this.state.isDrawerOpen} - docked={false} - openSecondary={true} - onRequestChange={this._onMenuButtonClick.bind(this)} - > - <Container className="clearfix pl1 pt2" onClick={this._onMenuButtonClick.bind(this)}> - {this.props.sidebar} - </Container> - </Drawer> - ); - } - private _onMenuButtonClick(): void { - this.setState({ - isDrawerOpen: !this.state.isDrawerOpen, - }); - } -} diff --git a/packages/website/ts/components/documentation/overview_content.tsx b/packages/website/ts/components/documentation/overview_content.tsx deleted file mode 100644 index caabaf874..000000000 --- a/packages/website/ts/components/documentation/overview_content.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import { colors, Link, MarkdownLinkBlock, utils as sharedUtils } from '@0x/react-shared'; -import { ObjectMap } from '@0x/types'; -import * as _ from 'lodash'; -import * as React from 'react'; -import * as ReactMarkdown from 'react-markdown'; -import { Element as ScrollElement } from 'react-scroll'; -import { TutorialButton } from 'ts/components/documentation/tutorial_button'; -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; -import { Deco, Key, Package, TutorialInfo } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; - -export interface OverviewContentProps { - translate: Translate; - tutorials: TutorialInfo[]; - categoryToPackages: ObjectMap<Package[]>; -} - -export interface OverviewContentState {} - -export class OverviewContent extends React.Component<OverviewContentProps, OverviewContentState> { - public render(): React.ReactNode { - return ( - <Container> - {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} - <Container paddingTop="12px"> - {this._renderSectionDescription(this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap))} - <Container marginTop="36px"> - {_.map(this.props.tutorials, tutorialInfo => ( - <ScrollElement - name={sharedUtils.getIdFromName( - this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap), - )} - key={`tutorial-${tutorialInfo.link.title}`} - > - <TutorialButton translate={this.props.translate} tutorialInfo={tutorialInfo} /> - </ScrollElement> - ))} - </Container> - </Container> - <Container marginTop="32px" paddingBottom="100px"> - {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))} - <Container paddingTop="12px"> - {this._renderSectionDescription( - this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), - )} - <Container marginTop="36px"> - {_.map(this.props.categoryToPackages, (pkgs, category) => - this._renderPackageCategory(category, pkgs), - )} - </Container> - </Container> - </Container> - </Container> - ); - } - private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { - return ( - <Container key={`category-${category}`}> - <Text fontSize="18px">{category}</Text> - <Container>{_.map(pkgs, pkg => this._renderPackage(pkg))}</Container> - </Container> - ); - } - private _renderPackage(pkg: Package): React.ReactNode { - const id = sharedUtils.getIdFromName(pkg.link.title); - return ( - <ScrollElement name={id} key={`package-${pkg.link.title}`}> - <Container className="pb2"> - <Container width="100%" height="1px" backgroundColor={colors.grey300} marginTop="11px" /> - <Container className="clearfix mt2 pt1"> - <Container className="md-col lg-col md-col-4 lg-col-4"> - <Link - to={pkg.link.to} - fontColor={colors.lightLinkBlue} - shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} - > - <Text Tag="div" fontColor={colors.lightLinkBlue} fontWeight="bold"> - {pkg.link.title} - </Text> - </Link> - </Container> - <Container className="md-col lg-col md-col-6 lg-col-6 sm-py2"> - <Text fontColor={colors.grey700}> - <ReactMarkdown - source={pkg.description} - renderers={{ - link: MarkdownLinkBlock, - paragraph: 'span', - }} - /> - </Text> - </Container> - <Container className="md-col lg-col md-col-2 lg-col-2 sm-pb2 relative"> - <Container position="absolute" right="0px"> - <Link - to={pkg.link.to} - fontColor={colors.lightLinkBlue} - shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} - > - <Container className="flex"> - <Container>{this.props.translate.get(Key.More, Deco.Cap)}</Container> - <Container paddingTop="1px" paddingLeft="6px"> - <i - className="zmdi zmdi-chevron-right bold" - style={{ fontSize: 18, color: colors.lightLinkBlue }} - /> - </Container> - </Container> - </Link> - </Container> - </Container> - </Container> - </Container> - </ScrollElement> - ); - } - private _renderSectionTitle(text: string): React.ReactNode { - return ( - <Container paddingTop="30px"> - <Text fontColor={colors.projectsGrey} fontSize="30px" fontWeight="bold"> - {text} - </Text> - </Container> - ); - } - private _renderSectionDescription(text: string): React.ReactNode { - return ( - <Text fontColor={colors.linkSectionGrey} fontSize="16px" fontFamily="Roboto Mono"> - {text} - </Text> - ); - } -} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx deleted file mode 100644 index d158ab926..000000000 --- a/packages/website/ts/components/documentation/sidebar_header.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { colors } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { VersionDropDown } from 'ts/components/documentation/version_drop_down'; -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; -import { ScreenWidths } from 'ts/types'; - -export interface SidebarHeaderProps { - screenWidth: ScreenWidths; - title: string; - docsVersion?: string; - availableDocVersions?: string[]; - onVersionSelected?: () => void; -} - -export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({ - screenWidth, - title, - docsVersion, - availableDocVersions, - onVersionSelected, -}) => { - return ( - <Container> - <Container className="flex justify-bottom"> - <Container className="col col-8 pl1"> - <Text - fontColor={colors.lightLinkBlue} - fontSize={screenWidth === ScreenWidths.Sm ? '20px' : '22px'} - fontWeight="bold" - lineHeight="26px" - > - {title} - </Text> - </Container> - {!_.isUndefined(docsVersion) && - !_.isUndefined(availableDocVersions) && - !_.isUndefined(onVersionSelected) && ( - <div className="col col-4 pl1" style={{ alignSelf: 'flex-end', paddingBottom: 4 }}> - <Container className="right"> - <VersionDropDown - selectedVersion={docsVersion} - versions={availableDocVersions} - onVersionSelected={onVersionSelected} - /> - </Container> - </div> - )} - </Container> - <Container - width={'100%'} - height={'1px'} - backgroundColor={colors.grey300} - marginTop="20px" - marginBottom="27px" - /> - </Container> - ); -}; diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx deleted file mode 100644 index b747ef598..000000000 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { colors, Link } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; -import { Deco, Key, TutorialInfo } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; - -import { styled } from 'ts/style/theme'; - -export interface TutorialButtonProps { - className?: string; - translate: Translate; - tutorialInfo: TutorialInfo; -} - -const PlainTutorialButton: React.StatelessComponent<TutorialButtonProps> = ({ translate, tutorialInfo, className }) => ( - <Container className={className}> - <Link to={tutorialInfo.link.to} shouldOpenInNewTab={tutorialInfo.link.shouldOpenInNewTab}> - <div className="flex relative"> - <div className="col col-1 flex items-center sm-pr3"> - <img src={tutorialInfo.iconUrl} height={40} /> - </div> - <div className="lg-pl2 md-pl2 sm-pl3 col col-10"> - <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold"> - {translate.get(tutorialInfo.link.title as Key, Deco.Cap)} - </Text> - <Text Tag="div" fontColor={colors.grey750} fontSize="16"> - {translate.get(tutorialInfo.description as Key, Deco.Cap)} - </Text> - </div> - <div className="col col-1 flex items-center justify-end"> - <div className="right"> - <i - className="zmdi zmdi-chevron-right bold" - style={{ fontSize: 26, color: colors.lightLinkBlue }} - /> - </div> - </div> - </div> - </Link> - </Container> -); - -export const TutorialButton = styled(PlainTutorialButton)` - border-radius: 4px; - border: 1px solid ${colors.grey325}; - background-color: ${colors.white}; - &:hover { - border: 1px solid ${colors.lightLinkBlue}; - background-color: ${colors.lightestBlue}; - } - padding: 20px; - margin-bottom: 15px; -`; - -TutorialButton.defaultProps = {}; - -TutorialButton.displayName = 'TutorialButton'; diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx deleted file mode 100644 index 5e77530fd..000000000 --- a/packages/website/ts/components/documentation/version_drop_down.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { colors } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { Button } from 'ts/components/ui/button'; -import { Container } from 'ts/components/ui/container'; -import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down'; -import { Text } from 'ts/components/ui/text'; -import { styled } from 'ts/style/theme'; - -interface ActiveNodeProps { - className?: string; - selectedVersion: string; -} - -const PlainActiveNode: React.StatelessComponent<ActiveNodeProps> = ({ className, selectedVersion }) => ( - <Container className={className}> - <Container className="flex justify-center"> - <Text fontColor={colors.grey700} fontSize="12px"> - v {selectedVersion} - </Text> - <Container paddingLeft="6px"> - <i className="zmdi zmdi-chevron-down" style={{ fontSize: 17, color: 'rgba(153, 153, 153, 0.8)' }} /> - </Container> - </Container> - </Container> -); - -const ActiveNode = styled(PlainActiveNode)` - cursor: pointer; - border: 1px solid ${colors.beigeWhite}; - border-radius: 4px; - padding: 4px 6px 4px 8px; -`; - -interface VersionDropDownProps { - selectedVersion: string; - versions: string[]; - onVersionSelected: (semver: string) => void; -} - -interface VersionDropDownState {} - -export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> { - public render(): React.ReactNode { - const activeNode = <ActiveNode selectedVersion={this.props.selectedVersion} />; - return ( - <DropDown - activateEvent={DropdownMouseEvent.Click} - activeNode={activeNode} - popoverContent={this._renderDropdownMenu()} - anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }} - targetOrigin={{ horizontal: 'middle', vertical: 'top' }} - popoverStyle={{ borderRadius: 4 }} - /> - ); - } - private _renderDropdownMenu(): React.ReactNode { - const items = _.map(this.props.versions, version => { - const isSelected = version === this.props.selectedVersion; - return ( - <Container key={`dropdown-items-${version}`}> - <Button - borderRadius="0px" - padding="0.8em 0em" - width="100%" - isDisabled={isSelected} - onClick={this._onClick.bind(this, version)} - > - v {version} - </Button> - </Container> - ); - }); - const dropdownMenu = <Container width="88px">{items}</Container>; - return dropdownMenu; - } - private _onClick(selectedVersion: string): void { - this.props.onVersionSelected(selectedVersion); - } -} |