Compare commits

..

4 Commits

Author SHA1 Message Date
48d60f60e0 v0.9.2 2021-05-02 23:19:54 +02:00
d49c194654 Updated Table to use Light/Dark themes
Signed-off-by: Avior <florian.bouillon@delta-wings.net>
2021-05-02 23:19:33 +02:00
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
5 changed files with 31 additions and 10 deletions

View File

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

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>

View File

@ -1,11 +1,17 @@
@import '../config'
.table .table
border-spacing 0 border-spacing 0
border 2px solid #EEE border 2px solid $grayDark
@media (prefers-color-scheme dark)
border-color $grayLight
border-radius 4px border-radius 4px
width 100% width 100%
td td
border-top 1px solid #EEE border-top 1px solid $grayDark
@media (prefers-color-scheme dark)
border-color $grayLight
th th
td td