aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-18 06:17:36 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-18 06:17:36 +0800
commit6e0d622a1559937d8867216d571156564c666c77 (patch)
treeb51eb39415e3cc1b69a87fb90fe3b0d03ae4c322 /packages/website/ts
parent0e8f0d1d53c5ecc4d7c88457c21ec423d86b2293 (diff)
downloaddexon-sol-tools-6e0d622a1559937d8867216d571156564c666c77.tar
dexon-sol-tools-6e0d622a1559937d8867216d571156564c666c77.tar.gz
dexon-sol-tools-6e0d622a1559937d8867216d571156564c666c77.tar.bz2
dexon-sol-tools-6e0d622a1559937d8867216d571156564c666c77.tar.lz
dexon-sol-tools-6e0d622a1559937d8867216d571156564c666c77.tar.xz
dexon-sol-tools-6e0d622a1559937d8867216d571156564c666c77.tar.zst
dexon-sol-tools-6e0d622a1559937d8867216d571156564c666c77.zip
Open all new instant links in new window
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/button.tsx6
-rw-r--r--packages/website/ts/@next/components/definition.tsx1
-rw-r--r--packages/website/ts/@next/components/link.tsx21
-rw-r--r--packages/website/ts/@next/pages/instant/configurator.tsx13
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>