Compare commits

...

2 Commits

Author SHA1 Message Date
6f1c366289 v0.9.1 2021-05-01 23:35:11 +02:00
8ac899b3f0 Added HideExternal to links
Signed-off-by: Avior <florian.bouillon@delta-wings.net>
2021-05-01 23:34:45 +02:00
4 changed files with 23 additions and 8 deletions

View File

@ -1,6 +1,6 @@
{
"name": "@dzeio/components",
"version": "0.9.0",
"version": "0.9.1",
"license": "MIT",
"main": "./index.js",
"types": "./types/index.d.ts",

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>