diff options
4 files changed, 24 insertions, 17 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 4c8c0361e..b686b27a2 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -19,6 +19,7 @@ interface ButtonInterface { isInline?: boolean; href?: string; type?: string; + target?: string; to?: string; onClick?: () => any; theme?: ThemeInterface; @@ -26,7 +27,7 @@ interface ButtonInterface { } export const Button = (props: ButtonInterface) => { - const { children, href, isWithArrow, to, useAnchorTag } = props; + const { children, href, isWithArrow, to, useAnchorTag, target } = props; let linkElem; if (href || useAnchorTag) { @@ -37,9 +38,10 @@ export const Button = (props: ButtonInterface) => { } const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase; + const targetProp = href && target ? { target } : {}; return ( - <Component {...props}> + <Component {...props} {...targetProp}> {children} {isWithArrow && ( diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index be0973bdd..d203151b9 100644 --- a/packages/website/ts/@next/components/definition.tsx +++ b/packages/website/ts/@next/components/definition.tsx @@ -55,6 +55,7 @@ export const Definition = (props: Props) => ( isWithArrow={true} isAccentColor={true} useAnchorTag={item.useAnchorTag} + target="_blank" > {item.label} </Button> diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx index c3633987a..0976a57a8 100644 --- a/packages/website/ts/@next/components/link.tsx +++ b/packages/website/ts/@next/components/link.tsx @@ -13,19 +13,23 @@ interface LinkInterface { theme?: { textColor: string; }; + target?: string; } export const Link = (props: LinkInterface) => { - const { - children, - isNoArrow, - href, - } = props; + const { children, isNoArrow, href, target } = props; return ( <StyledLink to={href} {...props}> {children} - {!isNoArrow && <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z" fill="currentColor"/></svg>} + {!isNoArrow && ( + <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path + d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z" + fill="currentColor" + /> + </svg> + )} </StyledLink> ); }; @@ -39,7 +43,10 @@ export const LinkWrap = styled.div` } `; -const StyledLink = styled(ReactRouterLink)<LinkInterface>` +const StyledLink = + styled(ReactRouterLink) < + LinkInterface > + ` display: ${props => !props.isBlock && 'inline-flex'}; color: ${props => props.color || props.theme.linkColor}; text-align: center; diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx index 007526396..7c67e6333 100644 --- a/packages/website/ts/@next/pages/instant/configurator.tsx +++ b/packages/website/ts/@next/pages/instant/configurator.tsx @@ -30,19 +30,16 @@ export class Configurator extends React.Component { public render(): React.ReactNode { const codeToDisplay = this._generateCodeDemoCode(); return ( - <FlexWrap - isFlex={true} - > + <FlexWrap isFlex={true}> <Column width="442px" padding="0 70px 0 0"> <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} /> </Column> <Column width="100%"> <HeadingWrapper> - <Heading size="small" marginBottom="15px">Code Snippet</Heading> - <Link - href={`${WebsitePaths.Wiki}#Get-Started-With-Instant`} - isBlock={true} - > + <Heading size="small" marginBottom="15px"> + Code Snippet + </Heading> + <Link href={`${WebsitePaths.Wiki}#Get-Started-With-Instant`} isBlock={true} target="_blank"> Explore the Docs </Link> </HeadingWrapper> |