diff options
Diffstat (limited to 'packages/react-shared')
| -rw-r--r-- | packages/react-shared/CHANGELOG.json | 13 | ||||
| -rw-r--r-- | packages/react-shared/CHANGELOG.md | 8 | ||||
| -rw-r--r-- | packages/react-shared/README.md | 10 | ||||
| -rw-r--r-- | packages/react-shared/package.json | 17 | ||||
| -rw-r--r-- | packages/react-shared/src/components/anchor_title.tsx | 76 | ||||
| -rw-r--r-- | packages/react-shared/src/components/link.tsx | 131 | ||||
| -rw-r--r-- | packages/react-shared/src/components/markdown_paragraph_block.tsx | 10 | ||||
| -rw-r--r-- | packages/react-shared/src/components/markdown_section.tsx | 38 | ||||
| -rw-r--r-- | packages/react-shared/src/components/nested_sidebar_menu.tsx | 180 | ||||
| -rw-r--r-- | packages/react-shared/src/components/version_drop_down.tsx | 37 | ||||
| -rw-r--r-- | packages/react-shared/src/index.ts | 3 | ||||
| -rw-r--r-- | packages/react-shared/src/types.ts | 16 | ||||
| -rw-r--r-- | packages/react-shared/src/utils/colors.ts | 10 | ||||
| -rw-r--r-- | packages/react-shared/src/utils/constants.ts | 3 | ||||
| -rw-r--r-- | packages/react-shared/tslint.json | 2 |
15 files changed, 336 insertions, 218 deletions
diff --git a/packages/react-shared/CHANGELOG.json b/packages/react-shared/CHANGELOG.json index d1907e785..8578b4603 100644 --- a/packages/react-shared/CHANGELOG.json +++ b/packages/react-shared/CHANGELOG.json @@ -1,11 +1,20 @@ [ { - "timestamp": 1538693146, - "version": "1.0.15", + "version": "1.0.17", "changes": [ { "note": "Dependencies updated" } + ], + "timestamp": 1539871071 + }, + { + "timestamp": 1538693146, + "version": "1.0.16", + "changes": [ + { + "note": "Unpublished package" + } ] }, { diff --git a/packages/react-shared/CHANGELOG.md b/packages/react-shared/CHANGELOG.md index 20d3e0bf7..fc3f7e32c 100644 --- a/packages/react-shared/CHANGELOG.md +++ b/packages/react-shared/CHANGELOG.md @@ -5,10 +5,14 @@ Edit the package's CHANGELOG.json file only. CHANGELOG -## v1.0.15 - _October 4, 2018_ +## v1.0.17 - _October 18, 2018_ * Dependencies updated +## v1.0.16 - _October 4, 2018_ + + * Unpublished package + ## v1.0.14 - _October 2, 2018_ * Dependencies updated @@ -41,7 +45,7 @@ CHANGELOG * Dependencies updated -## v1.0.6 - _August 13, 2018_ +## v1.0.6 - _August 14, 2018_ * Dependencies updated diff --git a/packages/react-shared/README.md b/packages/react-shared/README.md index 88e6f18ae..7ff9a94d9 100644 --- a/packages/react-shared/README.md +++ b/packages/react-shared/README.md @@ -1,18 +1,18 @@ -## @0xproject/react-shared +## @0x/react-shared Contains React components & frontend types/utils shared between 0x projects. ## Installation ```bash -yarn add @0xproject/react-shared +yarn add @0x/react-shared ``` If your project is in [TypeScript](https://www.typescriptlang.org/), add the following to your `tsconfig.json`: ```json "compilerOptions": { - "typeRoots": ["node_modules/@0xproject/typescript-typings/types", "node_modules/@types"], + "typeRoots": ["node_modules/@0x/typescript-typings/types", "node_modules/@types"], } ``` @@ -41,13 +41,13 @@ yarn install To build this package and all other monorepo packages that it depends on, run the following from the monorepo root directory: ```bash -PKG=@0xproject/react-shared yarn build +PKG=@0x/react-shared yarn build ``` Or continuously rebuild on change: ```bash -PKG=@0xproject/react-shared yarn watch +PKG=@0x/react-shared yarn watch ``` ### Clean diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json index afed68c42..7a150bf35 100644 --- a/packages/react-shared/package.json +++ b/packages/react-shared/package.json @@ -1,6 +1,6 @@ { - "name": "@0xproject/react-shared", - "version": "1.0.15", + "name": "@0x/react-shared", + "version": "1.0.17", "engines": { "node": ">=6.12" }, @@ -25,14 +25,15 @@ "url": "https://github.com/0xProject/0x-monorepo.git" }, "devDependencies": { - "@0xproject/dev-utils": "^1.0.12", - "@0xproject/tslint-config": "^1.0.8", + "@0x/dev-utils": "^1.0.13", + "@0x/tslint-config": "^1.0.9", "make-promises-safe": "^1.1.0", "shx": "^0.2.2", "tslint": "^5.9.1", "typescript": "3.0.1" }, "dependencies": { + "@0x/types": "^1.2.0", "@material-ui/core": "^3.0.1", "@types/is-mobile": "0.3.0", "@types/lodash": "4.14.104", @@ -40,7 +41,10 @@ "@types/node": "*", "@types/react": "*", "@types/react-dom": "*", + "@types/react-router-dom": "^4.0.4", "@types/react-scroll": "1.5.3", + "@types/styled-components": "^4.0.0", + "@types/valid-url": "^1.0.2", "basscss": "^8.0.3", "change-case": "^3.0.2", "is-mobile": "^0.2.2", @@ -50,7 +54,10 @@ "react-dom": "^16.4.2", "react-highlight": "0xproject/react-highlight#2f40a42e0a3f0ad126f9f42d505b97b603fc7162", "react-markdown": "^3.2.2", - "react-scroll": "0xproject/react-scroll#similar-to-pr-330" + "react-router-dom": "^4.1.1", + "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state", + "styled-components": "^3.3.0", + "valid-url": "^1.0.9" }, "publishConfig": { "access": "public" diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index 8f7e4af27..bd99edcab 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { Link as ScrollLink } from 'react-scroll'; +import styled from 'styled-components'; import { HeaderSizes, Styles } from '../types'; +import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; const headerSizeToScrollOffset: { [headerSize: string]: number } = { @@ -14,20 +16,14 @@ export interface AnchorTitleProps { id: string; headerSize: HeaderSizes; shouldShowAnchor: boolean; + isDisabled: boolean; } -export interface AnchorTitleState { - isHovering: boolean; -} +export interface AnchorTitleState {} const styles: Styles = { - anchor: { - fontSize: 20, - transform: 'rotate(45deg)', - cursor: 'pointer', - }, h1: { - fontSize: '1.8em', + fontSize: '1.875em', }, h2: { fontSize: '1.5em', @@ -38,18 +34,28 @@ const styles: Styles = { }, }; +interface AnchorIconProps { + shouldShowAnchor: boolean; +} + +const AnchorIcon = + styled.i < + AnchorIconProps > + ` + opacity: ${props => (props.shouldShowAnchor ? 1 : 0)}; + &:hover { + opacity: ${props => (props.shouldShowAnchor ? 0.6 : 0)}; + } + font-size: 20px; + transform: rotate(45deg); + cursor: pointer; + `; + export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleState> { - constructor(props: AnchorTitleProps) { - super(props); - this.state = { - isHovering: false, - }; - } + public static defaultProps: Partial<AnchorTitleProps> = { + isDisabled: false, + }; public render(): React.ReactNode { - let opacity = 0; - if (this.props.shouldShowAnchor) { - opacity = this.state.isHovering ? 0.6 : 1; - } return ( <div className="relative flex" @@ -63,29 +69,21 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt } as any } > - <div className="inline-block" style={{ paddingRight: 4 }}> + <div className="inline-block" style={{ paddingRight: 4, color: colors.darkestGrey }}> {this.props.title} </div> - <ScrollLink - to={this.props.id} - hashSpy={true} - offset={headerSizeToScrollOffset[this.props.headerSize]} - duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={constants.DOCS_CONTAINER_ID} - > - <i - className="zmdi zmdi-link" - style={{ ...styles.anchor, opacity }} - onMouseOver={this._setHoverState.bind(this, true)} - onMouseOut={this._setHoverState.bind(this, false)} - /> - </ScrollLink> + {!this.props.isDisabled && ( + <ScrollLink + to={this.props.id} + hashSpy={true} + offset={headerSizeToScrollOffset[this.props.headerSize]} + duration={constants.DOCS_SCROLL_DURATION_MS} + containerId={constants.SCROLL_CONTAINER_ID} + > + <AnchorIcon className="zmdi zmdi-link" shouldShowAnchor={this.props.shouldShowAnchor} /> + </ScrollLink> + )} </div> ); } - private _setHoverState(isHovering: boolean): void { - this.setState({ - isHovering, - }); - } } diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx new file mode 100644 index 000000000..5a456109b --- /dev/null +++ b/packages/react-shared/src/components/link.tsx @@ -0,0 +1,131 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { Link as ReactRounterLink } from 'react-router-dom'; +import { Link as ScrollLink } from 'react-scroll'; +import * as validUrl from 'valid-url'; + +import { LinkType } from '../types'; +import { constants } from '../utils/constants'; + +interface LinkProps { + to: string; + shouldOpenInNewTab?: boolean; + className?: string; + onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void; + onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void; + onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void; + textDecoration?: string; + fontColor?: string; +} + +export interface LinkState {} + +/** + * A generic link component which let's the developer render internal, external and scroll-to-hash links, and + * their associated behaviors with a single link component. Many times we want a menu including a combination of + * internal, external and scroll links and the abstraction of the differences of rendering each types of link + * makes it much easier to do so. + */ +export class Link extends React.Component<LinkProps, LinkState> { + public static defaultProps: Partial<LinkProps> = { + shouldOpenInNewTab: false, + className: '', + onMouseOver: _.noop.bind(_), + onMouseLeave: _.noop.bind(_), + onMouseEnter: _.noop.bind(_), + textDecoration: 'none', + fontColor: 'inherit', + }; + private _outerReactScrollSpan: HTMLSpanElement | null; + constructor(props: LinkProps) { + super(props); + this._outerReactScrollSpan = null; + } + public render(): React.ReactNode { + let type: LinkType; + const isReactRoute = _.startsWith(this.props.to, '/'); + const isExternal = validUrl.isWebUri(this.props.to) || _.startsWith(this.props.to, 'mailto:'); + if (isReactRoute) { + type = LinkType.ReactRoute; + } else if (isExternal) { + type = LinkType.External; + } else { + type = LinkType.ReactScroll; + } + + if (type === LinkType.ReactScroll && this.props.shouldOpenInNewTab) { + throw new Error(`Cannot open LinkType.ReactScroll links in new tab. link.to: ${this.props.to}`); + } + + const styleWithDefault = { + textDecoration: this.props.textDecoration, + cursor: 'pointer', + color: this.props.fontColor, + }; + + switch (type) { + case LinkType.External: + return ( + <a + target={this.props.shouldOpenInNewTab ? '_blank' : ''} + className={this.props.className} + style={styleWithDefault} + href={this.props.to} + onMouseOver={this.props.onMouseOver} + onMouseEnter={this.props.onMouseEnter} + onMouseLeave={this.props.onMouseLeave} + > + {this.props.children} + </a> + ); + case LinkType.ReactRoute: + return ( + <ReactRounterLink + to={this.props.to} + className={this.props.className} + style={styleWithDefault} + target={this.props.shouldOpenInNewTab ? '_blank' : ''} + onMouseOver={this.props.onMouseOver} + onMouseEnter={this.props.onMouseEnter} + onMouseLeave={this.props.onMouseLeave} + > + {this.props.children} + </ReactRounterLink> + ); + case LinkType.ReactScroll: + return ( + <span + ref={input => (this._outerReactScrollSpan = input)} + onMouseOver={this.props.onMouseOver} + onMouseEnter={this.props.onMouseEnter} + onMouseLeave={this.props.onMouseLeave} + > + <ScrollLink + to={this.props.to} + offset={0} + hashSpy={true} + duration={constants.DOCS_SCROLL_DURATION_MS} + containerId={constants.SCROLL_CONTAINER_ID} + className={this.props.className} + style={styleWithDefault} + > + <span onClick={this._onClickPropagateClickEventAroundScrollLink.bind(this)}> + {this.props.children} + </span> + </ScrollLink> + </span> + ); + default: + throw new Error(`Unrecognized LinkType: ${type}`); + } + } + // HACK(fabio): For some reason, the react-scroll link decided to stop the propagation of click events. + // We do however rely on these events being propagated in certain scenarios (e.g when the link + // is within a dropdown we want to close upon being clicked). Because of this, we register the + // click event of an inner span, and pass it around the react-scroll link to an outer span. + private _onClickPropagateClickEventAroundScrollLink(): void { + if (!_.isNull(this._outerReactScrollSpan)) { + this._outerReactScrollSpan.click(); + } + } +} diff --git a/packages/react-shared/src/components/markdown_paragraph_block.tsx b/packages/react-shared/src/components/markdown_paragraph_block.tsx new file mode 100644 index 000000000..eeaef8571 --- /dev/null +++ b/packages/react-shared/src/components/markdown_paragraph_block.tsx @@ -0,0 +1,10 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { colors } from '../utils/colors'; + +export interface MarkdownParagraphBlockProps {} + +export const MarkdownParagraphBlock: React.StatelessComponent<MarkdownParagraphBlockProps> = ({ children }) => { + return <span style={{ color: colors.greyTheme, lineHeight: '26px' }}>{children}</span>; +}; diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index 09b214548..42c910c11 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -8,14 +8,17 @@ import { colors } from '../utils/colors'; import { utils } from '../utils/utils'; import { AnchorTitle } from './anchor_title'; +import { Link } from './link'; import { MarkdownCodeBlock } from './markdown_code_block'; import { MarkdownLinkBlock } from './markdown_link_block'; +import { MarkdownParagraphBlock } from './markdown_paragraph_block'; export interface MarkdownSectionProps { sectionName: string; markdownContent: string; headerSize?: HeaderSizes; githubLink?: string; + alternativeSectionTitle?: string; } interface DefaultMarkdownSectionProps { @@ -42,20 +45,23 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults; const id = utils.getIdFromName(sectionName); - const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); + const formattedSectionName = utils.convertCamelCaseToSpaces(sectionName); + const title = !_.isUndefined(this.props.alternativeSectionTitle) + ? this.props.alternativeSectionTitle + : _.capitalize(formattedSectionName); return ( <div className="md-px1 sm-px2 overflow-hidden" onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > - <ScrollElement name={id}> - <div className="clearfix pt3"> + <ScrollElement name={id} style={{ paddingBottom: 20 }}> + <div className="clearfix" style={{ paddingTop: 30, paddingBottom: 20 }}> <div className="col lg-col-8 md-col-8 sm-col-12"> - <span style={{ textTransform: 'capitalize', color: colors.grey700 }}> + <span style={{ color: colors.grey700 }}> <AnchorTitle headerSize={headerSize} - title={finalSectionName} + title={title} id={id} shouldShowAnchor={this.state.shouldShowAnchor} /> @@ -63,23 +69,29 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd </div> <div className="col col-4 sm-hide xs-hide right-align pr3" style={{ height: 28 }}> {!_.isUndefined(githubLink) && ( - <a - href={githubLink} - target="_blank" - style={{ color: colors.linkBlue, textDecoration: 'none', lineHeight: 2.1 }} - > - Edit on Github - </a> + <div style={{ lineHeight: 2.1 }}> + <Link to={githubLink} shouldOpenInNewTab={true} fontColor={colors.linkBlue}> + Edit on Github + </Link> + </div> )} </div> </div> - <hr style={{ border: `1px solid ${colors.lightestGrey}` }} /> <ReactMarkdown source={markdownContent} escapeHtml={false} renderers={{ code: MarkdownCodeBlock, link: MarkdownLinkBlock, + paragraph: MarkdownParagraphBlock, + }} + /> + <div + style={{ + width: '100%', + height: 1, + backgroundColor: colors.grey300, + marginTop: 32, }} /> </ScrollElement> diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index c8bddb59a..196c91af1 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -1,149 +1,119 @@ +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link as ScrollLink } from 'react-scroll'; -import { MenuSubsectionsBySection, Styles } from '../types'; +import { ALink, Styles } from '../types'; import { colors } from '../utils/colors'; -import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; -import { VersionDropDown } from './version_drop_down'; +import { Link } from './link'; export interface NestedSidebarMenuProps { - topLevelMenu: { [topLevel: string]: string[] }; - menuSubsectionsBySection: MenuSubsectionsBySection; + sectionNameToLinks: ObjectMap<ALink[]>; sidebarHeader?: React.ReactNode; - shouldDisplaySectionHeaders?: boolean; - onMenuItemClick?: () => void; - selectedVersion?: string; - versions?: string[]; - onVersionSelected?: (semver: string) => void; + shouldReformatMenuItemNames?: boolean; } -export interface NestedSidebarMenuState {} +export interface NestedSidebarMenuState { + scrolledToId?: string; +} const styles: Styles = { - menuItemWithHeaders: { + menuItem: { minHeight: 0, + paddingLeft: 8, + borderRadius: 6, }, - menuItemWithoutHeaders: { - minHeight: 48, - }, - menuItemInnerDivWithHeaders: { + menuItemInnerDiv: { color: colors.grey800, fontSize: 14, lineHeight: 2, padding: 0, + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', }, }; export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> { public static defaultProps: Partial<NestedSidebarMenuProps> = { - shouldDisplaySectionHeaders: true, - onMenuItemClick: _.noop.bind(_), + shouldReformatMenuItemNames: true, }; + private _urlIntervalCheckId: number | undefined = undefined; + constructor(props: NestedSidebarMenuProps) { + super(props); + this.state = {}; + } + public componentDidMount(): void { + this._urlIntervalCheckId = window.setInterval(() => { + const scrollId = location.hash.slice(1); + if (scrollId !== this.state.scrolledToId) { + this.setState({ + scrolledToId: scrollId, + }); + } + }, 200); + } + public componentWillUnmount(): void { + window.clearInterval(this._urlIntervalCheckId); + } public render(): React.ReactNode { - const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => { + const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); - if (this.props.shouldDisplaySectionHeaders) { - // tslint:disable-next-line:no-unused-variable - const id = utils.getIdFromName(sectionName); - return ( - <div key={`section-${sectionName}`} className="py1" style={{ color: colors.grey800 }}> - <div style={{ fontWeight: 'bold', fontSize: 15 }} className="py1"> - {finalSectionName.toUpperCase()} - </div> - {this._renderMenuItems(menuItems)} + // tslint:disable-next-line:no-unused-variable + return ( + <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}> + <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1"> + {finalSectionName.toUpperCase()} </div> - ); - } else { - return <div key={`section-${sectionName}`}>{this._renderMenuItems(menuItems)}</div>; - } + {this._renderMenuItems(links)} + </div> + ); }); - const maxWidthWithScrollbar = 307; return ( <div> {this.props.sidebarHeader} - {!_.isUndefined(this.props.versions) && - !_.isUndefined(this.props.selectedVersion) && - !_.isUndefined(this.props.onVersionSelected) && ( - <div style={{ maxWidth: maxWidthWithScrollbar }}> - <VersionDropDown - selectedVersion={this.props.selectedVersion} - versions={this.props.versions} - onVersionSelected={this.props.onVersionSelected} - /> - </div> - )} - <div className="pl1">{navigation}</div> + <div>{navigation}</div> </div> ); } - private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] { - const menuItemStyles = this.props.shouldDisplaySectionHeaders - ? styles.menuItemWithHeaders - : styles.menuItemWithoutHeaders; - const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; - const menuItems = _.map(menuItemNames, menuItemName => { - const finalMenuItemName = utils.convertDashesToSpaces(menuItemName); - const id = utils.getIdFromName(menuItemName); + private _renderMenuItems(links: ALink[]): React.ReactNode[] { + const scrolledToId = this.state.scrolledToId; + const menuItems = _.map(links, link => { + const finalMenuItemName = this.props.shouldReformatMenuItemNames + ? utils.convertDashesToSpaces(link.title) + : link.title; + let menuItemStyle = styles.menuItem; + let menuItemInnerDivStyle = styles.menuItemInnerDiv; + const isScrolledTo = link.to === scrolledToId; + if (isScrolledTo) { + menuItemStyle = { + ...menuItemStyle, + backgroundColor: colors.lightLinkBlue, + }; + menuItemInnerDivStyle = { + ...menuItemInnerDivStyle, + color: colors.white, + fontWeight: 'bold', + }; + } return ( - <div key={menuItemName}> - <ScrollLink - key={`menuItem-${menuItemName}`} - to={id} - offset={0} - hashSpy={true} - duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={constants.DOCS_CONTAINER_ID} - > - <MenuItem style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles}> - <span style={{ textTransform: 'capitalize' }}>{finalMenuItemName}</span> + <div key={`menuItem-${finalMenuItemName}`}> + <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}> + <MenuItem style={menuItemStyle} innerDivStyle={menuItemInnerDivStyle}> + <span + style={{ + textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none', + }} + > + {finalMenuItemName} + </span> </MenuItem> - </ScrollLink> - {this._renderMenuItemSubsections(menuItemName)} + </Link> </div> ); }); return menuItems; } - private _renderMenuItemSubsections(menuItemName: string): React.ReactNode { - if (_.isUndefined(this.props.menuSubsectionsBySection[menuItemName])) { - return null; - } - return this._renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]); - } - private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode { - return ( - <ul style={{ margin: 0, listStyleType: 'none', paddingLeft: 0 }} key={menuItemName}> - {_.map(entityNames, entityName => { - const name = `${menuItemName}-${entityName}`; - const id = utils.getIdFromName(name); - return ( - <li key={`menuSubsectionItem-${name}`}> - <ScrollLink - to={id} - offset={0} - hashSpy={true} - duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={constants.DOCS_CONTAINER_ID} - > - <MenuItem - style={{ minHeight: 35 }} - innerDivStyle={{ - paddingLeft: 16, - fontSize: 14, - lineHeight: '35px', - }} - > - {entityName} - </MenuItem> - </ScrollLink> - </li> - ); - })} - </ul> - ); - } } diff --git a/packages/react-shared/src/components/version_drop_down.tsx b/packages/react-shared/src/components/version_drop_down.tsx deleted file mode 100644 index 5ff4bed54..000000000 --- a/packages/react-shared/src/components/version_drop_down.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import * as _ from 'lodash'; -import * as React from 'react'; - -export interface VersionDropDownProps { - selectedVersion: string; - versions: string[]; - onVersionSelected: (semver: string) => void; -} - -export interface VersionDropDownState {} - -export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> { - public render(): React.ReactNode { - return ( - <div className="mx-auto" style={{ width: 120 }}> - <Select value={this.props.selectedVersion} onChange={this._updateSelectedVersion.bind(this)}> - {this._renderDropDownItems()} - </Select> - </div> - ); - } - private _renderDropDownItems(): React.ReactNode[] { - const items = _.map(this.props.versions, version => { - return ( - <MenuItem key={version} value={version}> - v{version} - </MenuItem> - ); - }); - return items; - } - private _updateSelectedVersion(event: React.ChangeEvent<HTMLSelectElement>): void { - this.props.onVersionSelected(event.target.value); - } -} diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts index 3b50c0117..e33b09f19 100644 --- a/packages/react-shared/src/index.ts +++ b/packages/react-shared/src/index.ts @@ -4,8 +4,9 @@ export { MarkdownCodeBlock } from './components/markdown_code_block'; export { MarkdownSection } from './components/markdown_section'; export { NestedSidebarMenu } from './components/nested_sidebar_menu'; export { SectionHeader } from './components/section_header'; +export { Link } from './components/link'; -export { HeaderSizes, Styles, MenuSubsectionsBySection, EtherscanLinkSuffixes, Networks } from './types'; +export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types'; export { utils } from './utils/utils'; export { constants } from './utils/constants'; diff --git a/packages/react-shared/src/types.ts b/packages/react-shared/src/types.ts index 88fadcc09..9e8dcb6b6 100644 --- a/packages/react-shared/src/types.ts +++ b/packages/react-shared/src/types.ts @@ -8,10 +8,6 @@ export enum HeaderSizes { H3 = 'h3', } -export interface MenuSubsectionsBySection { - [section: string]: string[]; -} - export enum EtherscanLinkSuffixes { Address = 'address', Tx = 'tx', @@ -23,3 +19,15 @@ export enum Networks { Ropsten = 'Ropsten', Rinkeby = 'Rinkeby', } + +export enum LinkType { + External = 'EXTERNAL', + ReactScroll = 'REACT_SCROLL', + ReactRoute = 'REACT_ROUTE', +} + +export interface ALink { + title: string; + to: string; + shouldOpenInNewTab?: boolean; +} diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 7d047a50e..a4dd7fefa 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -8,13 +8,17 @@ const baseColors = { greyishPink: '#E6E5E5', grey300: '#E0E0E0', beigeWhite: '#E4E4E4', - grey350: '#cacaca', + lightBgGrey: '#EDEDED', + grey325: '#dfdfdf', + grey350: '#CACACA', grey400: '#BDBDBD', lightGrey: '#BBBBBB', grey500: '#9E9E9E', grey: '#A5A5A5', darkGrey: '#818181', landingLinkGrey: '#919191', + linkSectionGrey: '#999999', + greyTheme: '#666666', grey700: '#616161', grey750: '#515151', grey800: '#424242', @@ -22,10 +26,12 @@ const baseColors = { heroGrey: '#404040', projectsGrey: '#343333', darkestGrey: '#272727', + lightestBlue: '#E7F1FD', lightBlue: '#60A4F4', lightBlueA700: '#0091EA', - linkBlue: '#1D5CDE', + lightLinkBlue: '#3289F1', mediumBlue: '#488AEA', + linkBlue: '#1D5CDE', darkBlue: '#4D5481', lightTurquois: '#aefcdc', turquois: '#058789', diff --git a/packages/react-shared/src/utils/constants.ts b/packages/react-shared/src/utils/constants.ts index 562ab776b..2dca1a078 100644 --- a/packages/react-shared/src/utils/constants.ts +++ b/packages/react-shared/src/utils/constants.ts @@ -2,8 +2,7 @@ import { Networks } from '../types'; export const constants = { DOCS_SCROLL_DURATION_MS: 0, - DOCS_CONTAINER_ID: 'documentation', - SCROLL_CONTAINER_ID: 'documentation', + SCROLL_CONTAINER_ID: 'scroll_container', SCROLL_TOP_ID: 'pageScrollTop', NETWORK_NAME_BY_ID: { 1: Networks.Mainnet, diff --git a/packages/react-shared/tslint.json b/packages/react-shared/tslint.json index c78434416..c3f6d9cae 100644 --- a/packages/react-shared/tslint.json +++ b/packages/react-shared/tslint.json @@ -1,5 +1,5 @@ { - "extends": ["@0xproject/tslint-config"], + "extends": ["@0x/tslint-config"], "rules": { "no-object-literal-type-assertion": false, "completed-docs": false, |