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 && ( {this.props.socials && (
<ul className={css.socials}>{this.props.socials.map((l, index) => ( <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' ? ( {typeof l.icon === 'string' ? (
<Image width={24} height={24} src={l.icon} /> <Image width={24} height={24} src={l.icon} />
) : ( ) : (

View File

@ -7,7 +7,9 @@ export default {
component: Component, component: Component,
argTypes: { argTypes: {
href: {control: 'text', defaultValue: 'https://www.dzeio.com'}, 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 } as Meta

View File

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