Open all new instant links in new window

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>