mirror of
https://github.com/dzeiocom/components.git
synced 2025-04-23 19:32:14 +00:00
Added HideExternal to links
Signed-off-by: Avior <florian.bouillon@delta-wings.net>
This commit is contained in:
parent
7ddce9ec85
commit
8ac899b3f0
@ -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} />
|
||||||
) : (
|
) : (
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user