diff options
Diffstat (limited to 'packages/website/ts/components')
8 files changed, 479 insertions, 122 deletions
diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx new file mode 100644 index 000000000..dede6f636 --- /dev/null +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -0,0 +1,155 @@ +import { colors } from '@0xproject/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 { Link } from 'ts/components/ui/link'; +import { Deco, Key, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +export interface DocsContentTopBarProps { + location: Location; + translate: Translate; +} + +interface DocsContentTopBarState { + isDrawerOpen: boolean; +} + +interface MenuItemInfo { + title: string; + url: string; + iconUrl: string; + textStyle: React.CSSProperties; +} + +export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, DocsContentTopBarState> { + constructor(props: DocsContentTopBarProps) { + super(props); + this.state = { + isDrawerOpen: false, + }; + } + public componentWillReceiveProps(nextProps: DocsContentTopBarProps): void { + if (nextProps.location.pathname !== this.props.location.pathname) { + this.setState({ + isDrawerOpen: false, + }); + } + } + public render(): React.ReactNode { + const menuItemInfos: MenuItemInfo[] = [ + { + title: this.props.translate.get(Key.Github, Deco.Cap), + url: constants.URL_GITHUB_ORG, + iconUrl: '/images/developers/github_icon.svg', + textStyle: { color: colors.linkSectionGrey }, + }, + { + title: this.props.translate.get(Key.Forum, Deco.Cap), + url: constants.URL_FORUM, + iconUrl: '/images/developers/forum_icon.svg', + textStyle: { color: colors.linkSectionGrey }, + }, + { + title: this.props.translate.get(Key.LiveChat, Deco.Cap), + url: constants.URL_ZEROEX_CHAT, + iconUrl: '/images/developers/chat_icon.svg', + textStyle: { color: colors.lightLinkBlue, fontWeight: 'bold' }, + }, + ]; + return ( + <Container height={75} className="pb2 mb3"> + <Container className="flex items-center lg-pt3 md-pt3 sm-pt1 relative" width="100%"> + <div className="col col-2 sm-hide xs-hide"> + <Link + to={WebsitePaths.Home} + style={{ color: colors.linkSectionGrey }} + className="flex items-center text-decoration-none" + > + <i className="zmdi zmdi-chevron-left bold" style={{ fontSize: 16 }} /> + <div className="pl1" style={{ fontSize: 16 }}> + 0xproject.com + </div> + </Link> + </div> + <div className="col col-4 md-hide sm-hide xs-hide" /> + <div className="col col-6 md-pl4 md-ml4 sm-hide xs-hide"> + <div className="flex items-center justify-between right" style={{ width: 300 }}> + {this._renderMenuItems(menuItemInfos)} + </div> + </div> + <div className="lg-hide md-hide"> + <DocsLogo height={30} containerStyle={{ paddingTop: 6, paddingLeft: 18 }} /> + </div> + <div className="md-hide lg-hide absolute" style={{ right: 18, top: 12 }}> + <div + style={{ + fontSize: 30, + color: 'black', + cursor: 'pointer', + }} + > + <i + className="zmdi zmdi-menu" + style={{ color: colors.grey700 }} + onClick={this._onMenuButtonClick.bind(this)} + /> + </div> + </div> + </Container> + <div + style={{ + width: '100%', + height: 1, + backgroundColor: colors.grey300, + marginTop: 11, + }} + /> + {this._renderDrawer()} + </Container> + ); + } + private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode { + const menuItems = _.map(menuItemInfos, menuItemInfo => { + return ( + <a + key={`menu-item-${menuItemInfo.title}`} + href={menuItemInfo.url} + target="_blank" + className="text-decoration-none" + style={{ + fontSize: 16, + }} + > + <div className="flex"> + <img src={menuItemInfo.iconUrl} width="18" /> + <div className="flex items-center" style={{ ...menuItemInfo.textStyle, paddingLeft: 4 }}> + {menuItemInfo.title} + </div> + </div> + </a> + ); + }); + return menuItems; + } + private _renderDrawer(): React.ReactNode { + return ( + <Drawer + open={this.state.isDrawerOpen} + docked={false} + openSecondary={true} + onRequestChange={this._onMenuButtonClick.bind(this)} + > + <div className="clearfix">TODO</div> + </Drawer> + ); + } + private _onMenuButtonClick(): void { + this.setState({ + isDrawerOpen: !this.state.isDrawerOpen, + }); + } +} diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx new file mode 100644 index 000000000..570a81bca --- /dev/null +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { Link } from 'react-router-dom'; +import { WebsitePaths } from 'ts/types'; + +export interface DocsLogoProps { + height: number; + containerStyle?: React.CSSProperties; +} + +export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => { + return ( + <div style={props.containerStyle}> + <Link to={`${WebsitePaths.Docs}`} className="text-decoration-none"> + <img src="/images/docs_logo.svg" height={props.height} /> + </Link> + </div> + ); +}; + +DocsLogo.defaultProps = { + containerStyle: {}, +}; diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx new file mode 100644 index 000000000..0cb7d9de5 --- /dev/null +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -0,0 +1,74 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Link } from 'react-router-dom'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, TutorialInfo } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +export interface TutorialButtonProps { + translate: Translate; + tutorialInfo: TutorialInfo; +} + +export interface TutorialButtonState { + isHovering: boolean; +} + +export class TutorialButton extends React.Component<TutorialButtonProps, TutorialButtonState> { + constructor(props: TutorialButtonProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render(): React.ReactNode { + return ( + <Link + to={this.props.tutorialInfo.location} + style={{ textDecoration: 'none' }} + onMouseEnter={this._onHover.bind(this)} + onMouseLeave={this._onHoverOff.bind(this)} + > + <div + className="flex relative" + style={{ + borderRadius: 4, + border: `1px solid ${this.state.isHovering ? colors.lightLinkBlue : '#dfdfdf'}`, + padding: 20, + marginBottom: 15, + backgroundColor: this.state.isHovering ? '#e7f1fd' : colors.white, + }} + > + <div> + <img src={this.props.tutorialInfo.iconUrl} height={40} /> + </div> + <div className="pl2"> + <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {this.props.translate.get(this.props.tutorialInfo.title as Key, Deco.Cap)} + </Text> + <Text Tag="div" fontColor="#555555" fontSize="16"> + {this.props.translate.get(this.props.tutorialInfo.description as Key, Deco.Cap)} + </Text> + </div> + <div className="absolute" style={{ top: 31, right: 31 }}> + <i + className="zmdi zmdi-chevron-right bold" + style={{ fontSize: 26, color: colors.lightLinkBlue }} + /> + </div> + </div> + </Link> + ); + } + private _onHover(_event: React.FormEvent<HTMLInputElement>): void { + this.setState({ + isHovering: true, + }); + } + private _onHoverOff(): void { + this.setState({ + isHovering: false, + }); + } +} diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx new file mode 100644 index 000000000..0af211bc1 --- /dev/null +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -0,0 +1,177 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { DropDown } from 'ts/components/ui/drop_down'; +import { Link } from 'ts/components/ui/link'; +import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +interface LinkInfo { + link: string; + shouldOpenInNewTab?: boolean; +} + +const gettingStartedKeyToLinkInfo1: ObjectMap<LinkInfo> = { + [Key.BuildARelayer]: { + link: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, + [Key.OrderBasics]: { + link: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, +}; +const gettingStartedKeyToLinkInfo2: ObjectMap<LinkInfo> = { + [Key.DevelopOnEthereum]: { + link: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, + [Key.UseSharedLiquidity]: { + link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, +}; +const popularDocsToLinkInfos: ObjectMap<LinkInfo> = { + [Key.ZeroExJs]: { + link: WebsitePaths.ZeroExJs, + }, + [Key.Connect]: { + link: WebsitePaths.Connect, + }, + [Key.SmartContract]: { + link: WebsitePaths.SmartContracts, + }, +}; +const usefulLinksToLinkInfo: ObjectMap<LinkInfo> = { + [Key.Github]: { + link: constants.URL_GITHUB_ORG, + shouldOpenInNewTab: true, + }, + [Key.Whitepaper]: { + link: WebsitePaths.Whitepaper, + shouldOpenInNewTab: true, + }, + [Key.Sandbox]: { + link: constants.URL_SANDBOX, + shouldOpenInNewTab: true, + }, +}; + +interface DevelopersDropDownProps { + translate: Translate; + menuItemStyles: React.CSSProperties; + menuIconStyle: React.CSSProperties; +} + +interface DevelopersDropDownState {} + +export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, DevelopersDropDownState> { + public render(): React.ReactNode { + const activeNode = ( + <div className="flex relative" style={{ color: this.props.menuIconStyle.color }}> + <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div> + </div> + ); + return ( + <DropDown + activeNode={activeNode} + popoverContent={this._renderDropdownMenu()} + anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'left', vertical: 'top' }} + style={this.props.menuItemStyles} + popoverStyle={{ borderRadius: 4, width: 427, height: 373, marginTop: 10 }} + /> + ); + } + private _renderDropdownMenu(): React.ReactNode { + const dropdownMenu = ( + <div> + <div style={{ padding: '1.75rem' }}> + {this._renderTitle('Getting started')} + <div className="flex"> + <div className="pr4 mr2">{this._renderLinkSection(gettingStartedKeyToLinkInfo1)}</div> + <div>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</div> + </div> + </div> + <div + style={{ + width: '100%', + height: 1, + backgroundColor: colors.grey300, + }} + /> + <div className="flex" style={{ padding: '1.75rem' }}> + <div className="pr4 mr2"> + <div>{this._renderTitle('Popular docs')}</div> + <div>{this._renderLinkSection(popularDocsToLinkInfos)}</div> + </div> + <div> + <div>{this._renderTitle('Useful links')}</div> + <div>{this._renderLinkSection(usefulLinksToLinkInfo)}</div> + </div> + </div> + <div + style={{ + padding: '1.125rem', + textAlign: 'center', + backgroundColor: colors.lightBgGrey, + borderBottomLeftRadius: 4, + borderBottomRightRadius: 4, + }} + > + <Link + to={WebsitePaths.Docs} + className="text-decoration-none" + style={{ + color: colors.lightBlueA700, + fontWeight: 'bold', + fontSize: 14, + }} + > + {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} + </Link> + </div> + </div> + ); + return dropdownMenu; + } + private _renderTitle(title: string): React.ReactNode { + return ( + <div + style={{ + color: colors.linkSectionGrey, + fontSize: 14, + paddingBottom: 12, + fontWeight: 600, + letterSpacing: 1, + }} + > + {title.toUpperCase()} + </div> + ); + } + private _renderLinkSection(keyToLinkInfo: ObjectMap<LinkInfo>): React.ReactNode { + const linkStyle: React.CSSProperties = { + color: colors.lightBlueA700, + fontFamily: 'Roboto, Roboto Mono', + }; + const numLinks = _.size(keyToLinkInfo); + let i = 0; + const links = _.map(keyToLinkInfo, (linkInfo: LinkInfo, key: string) => { + i++; + const isLast = i === numLinks; + const linkText = this.props.translate.get(key as Key, Deco.Cap); + return ( + <div className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${key}`}> + <Link + to={linkInfo.link} + isExternal={!!linkInfo.shouldOpenInNewTab} + shouldOpenInNewTab={linkInfo.shouldOpenInNewTab} + className="text-decoration-none" + style={linkStyle} + > + {linkText} + </Link> + </div> + ); + }); + return <div>{links}</div>; + } +} diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index bb61e4fb9..c2d753e31 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -8,16 +8,15 @@ import { } from '@0xproject/react-shared'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; -import Menu from 'material-ui/Menu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; +import { DevelopersDropDown } from 'ts/components/dropdowns/developers_drop_down'; import { DrawerMenu } from 'ts/components/portal/drawer_menu'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; import { Container } from 'ts/components/ui/container'; -import { DropDown } from 'ts/components/ui/drop_down'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -129,111 +128,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { ? 'flex mx-auto items-center max-width-4' : 'flex mx-auto items-center'; const height = isExpandedDisplayType ? EXPANDED_HEIGHT : DEFAULT_HEIGHT; - const developerSectionMenuItems = [ - <Link key="subMenuItem-zeroEx" to={WebsitePaths.ZeroExJs} className="text-decoration-none"> - <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x.js" /> - </Link>, - <Link key="subMenuItem-smartContracts" to={WebsitePaths.SmartContracts} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.SmartContract, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-0xconnect" to={WebsitePaths.Connect} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Connect, Deco.CapWords)} - /> - </Link>, - <a - key="subMenuItem-standard-relayer-api" - target="_blank" - className="text-decoration-none" - href={constants.URL_STANDARD_RELAYER_API_GITHUB} - > - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.StandardRelayerApi, Deco.CapWords)} - /> - </a>, - <Link key="subMenuItem-jsonSchema" to={WebsitePaths.JSONSchemas} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.JsonSchemas, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-subproviders" to={WebsitePaths.Subproviders} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Subproviders, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-web3Wrapper" to={WebsitePaths.Web3Wrapper} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Web3Wrapper, Deco.CapWords)} - /> - </Link>, - <Link - key="subMenuItem-contractWrappers" - to={WebsitePaths.ContractWrappers} - className="text-decoration-none" - > - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.ContractWrappers, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-orderUtils" to={WebsitePaths.OrderUtils} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.OrderUtils, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-orderWatcher" to={WebsitePaths.OrderWatcher} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.OrderWatcher, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-sol-compiler" to={WebsitePaths.SolCompiler} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.SolCompiler, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-sol-cov" to={WebsitePaths.SolCov} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.SolCov, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-ethereum-types" to={WebsitePaths.EthereumTypes} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.EthereumTypes, Deco.CapWords)} - /> - </Link>, - <a - key="subMenuItem-whitePaper" - target="_blank" - className="text-decoration-none" - href={`${WebsitePaths.Whitepaper}`} - > - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Whitepaper, Deco.CapWords)} - /> - </a>, - <a - key="subMenuItem-github" - target="_blank" - className="text-decoration-none" - href={constants.URL_GITHUB_ORG} - > - <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="GitHub" /> - </a>, - ]; const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {}; const fullWidthClasses = isExpandedDisplayType ? 'pr4' : ''; const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png'; @@ -245,15 +139,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { color: isNightVersion ? 'white' : 'black', cursor: 'pointer', }; - const activeNode = ( - <div className="flex relative" style={{ color: menuIconStyle.color }}> - <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div> - <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}> - <i className="zmdi zmdi-caret-right" style={{ fontSize: 22 }} /> - </div> - </div> - ); - const popoverContent = <Menu style={{ color: colors.darkGrey }}>{developerSectionMenuItems}</Menu>; return ( <div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }} @@ -273,12 +158,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { {!this._isViewingPortal() && ( <div className={menuClasses}> <div className="flex items-center justify-between"> - <DropDown - activeNode={activeNode} - popoverContent={popoverContent} - anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }} - targetOrigin={{ horizontal: 'middle', vertical: 'top' }} - style={styles.menuItem} + <DevelopersDropDown + menuItemStyles={styles.menuItem} + translate={this.props.translate} + menuIconStyle={menuIconStyle} /> <TopBarMenuItem title={this.props.translate.get(Key.Wiki, Deco.Cap)} diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index f2ae68b70..1e0bfd959 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -15,6 +15,7 @@ export interface ContainerProps { paddingRight?: StringOrNum; paddingLeft?: StringOrNum; backgroundColor?: string; + background?: string; borderRadius?: StringOrNum; maxWidth?: StringOrNum; maxHeight?: StringOrNum; diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 4d5caef08..1daaeb1c3 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -21,6 +21,7 @@ export interface DropDownProps { zDepth?: number; activateEvent?: DropdownMouseEvent; closeEvent?: DropdownMouseEvent; + popoverStyle?: React.CSSProperties; } interface DropDownState { @@ -34,6 +35,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { zDepth: 1, activateEvent: DropdownMouseEvent.Hover, closeEvent: DropdownMouseEvent.Hover, + popoverStyle: {}, }; private _isHovering: boolean; private _popoverCloseCheckIntervalId: number; @@ -77,6 +79,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click} animated={false} zDepth={this.props.zDepth} + style={this.props.popoverStyle} > <div onMouseEnter={this._onHover.bind(this)} diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx new file mode 100644 index 000000000..252199457 --- /dev/null +++ b/packages/website/ts/components/ui/link.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +import { Link as ReactRounterLink } from 'react-router-dom'; + +export interface LinkProps { + to: string; + isExternal?: boolean; + shouldOpenInNewTab?: boolean; + style?: React.CSSProperties; + className?: string; +} + +export const Link: React.StatelessComponent<LinkProps> = ({ + style, + className, + isExternal, + to, + shouldOpenInNewTab, + children, +}) => { + if (isExternal) { + return ( + <a target={shouldOpenInNewTab && '_blank'} className={className} style={style} href={to}> + {children} + </a> + ); + } else { + return ( + <ReactRounterLink to={to} className={className} style={style}> + {children} + </ReactRounterLink> + ); + } +}; + +Link.defaultProps = { + isExternal: false, + shouldOpenInNewTab: false, + style: {}, + className: '', +}; + +Link.displayName = 'Link'; |