mirror of
https://github.com/dzeiocom/components.git
synced 2025-06-17 13:09:20 +00:00
Compare commits
4 Commits
Author | SHA1 | Date | |
---|---|---|---|
48d60f60e0
|
|||
d49c194654
|
|||
6f1c366289
|
|||
8ac899b3f0
|
@ -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",
|
||||||
|
@ -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>
|
||||||
|
@ -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
|
||||||
|
Reference in New Issue
Block a user