Added HideExternal to links

Signed-off-by: Avior <florian.bouillon@delta-wings.net>
This commit is contained in:
Florian Bouillon 2021-05-01 23:34:45 +02:00
parent 7ddce9ec85
commit 8ac899b3f0
Signed by: Florian Bouillon
GPG Key ID: 50BD648F12C86AB6
3 changed files with 22 additions and 7 deletions

View File

@ -34,7 +34,7 @@ export default class Footer extends React.Component<Props> {
)}
{this.props.socials && (
<ul className={css.socials}>{this.props.socials.map((l, index) => (
<li key={l.href}><Text><Link noStyle href={l.href}>
<li key={l.href}><Text><Link hideIcon noStyle href={l.href}>
{typeof l.icon === 'string' ? (
<Image width={24} height={24} src={l.icon} />
) : (

View File

@ -7,7 +7,9 @@ export default {
component: Component,
argTypes: {
href: {control: 'text', defaultValue: 'https://www.dzeio.com'},
text: {control: 'text', defaultValue: 'Dzeio'}
text: {control: 'text', defaultValue: 'Dzeio'},
external: {control: 'boolean'},
hideIcon: {control: 'boolean'}
}
} as Meta

View File

@ -19,23 +19,35 @@ interface Props {
* Override external detection system
*/
external?: boolean
/**
* force hiding the icon
*/
hideIcon?: boolean
}
export default class Link extends React.Component<Props> {
public render() {
const external = this.props.external ?? this.props.href.startsWith('http')
if (external) {
const isExternal = this.props.href.startsWith('http')
const externalProps = this.props.external ? {
rel: 'noreferrer nofollow',
target: '_blank'
} : {}
if (isExternal) {
// external link
return (
<a
{...this.props.linkProps}
className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
href={this.props.href}
rel="noreferrer nofollow"
target="_blank"
{...externalProps}
>
{this.props.children}<ExternalLink size={16} className={css.icon} />
{this.props.children}
{(this.props.external !== false && !this.props.hideIcon) && (
<ExternalLink size={16} className={css.icon} />
)}
</a>
)
}
@ -43,6 +55,7 @@ export default class Link extends React.Component<Props> {
<NextLink href={this.props.href}>
<a
{...this.props.linkProps}
{...externalProps}
className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
>{this.props.children}</a>
</NextLink>