0.11.3

Signed-off-by: Avior <florian.bouillon@delta-wings.net>

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.11.1",
+	"version": "0.11.3",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@dzeio/components",
-			"version": "0.11.1",
+			"version": "0.11.3",
 			"hasInstallScript": true,
 			"license": "MIT",
 			"dependencies": {

package.json

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

src/dzeio/Button/Button.stories.tsx

@@ -25,3 +25,10 @@ WithImg.args = {
 	href: '/pouet',
 	block: true
 }
+
+export const ExternalLinkButton = (args: any) => <Component {...args}>Button</Component>
+ExternalLinkButton.args = {
+	nomargintop: true,
+	href: 'https://example.com',
+	block: true
+}

src/dzeio/Button/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import Link from 'next/link'
+import Link from '../Link'
 import { ColorType, IconProps } from '../interfaces'
 import { buildClassName } from '../Util'
 import Image from '../Image'
@@ -57,8 +57,8 @@ export default class Button extends React.Component<Props> {
 
 		if (this.props.href) {
 			return (
-				<Link href={this.props.href} as={this.props.as}>
+				<Link linkProps={{onClick: this.props.onClick}} hideIcon noStyle href={this.props.href} className={buildClassName([classes], [css.disabled, this.props.disabled])}>
-					<a onClick={this.props.onClick} className={buildClassName([classes], [css.disabled, this.props.disabled])}>{inner}</a>
+					{inner}
 				</Link>
 			)
 		}

src/dzeio/GradientBackground/GradientBackground.module.styl

@@ -6,14 +6,13 @@ $percent = 15%
 	transition all $transition
 	background $mainGradient
 
-	&.fullscreen
+	&.fullscreen > :first-child
 		min-height 100vh
 
 .info
 	background linear-gradient(to right, $infoLight, lighten($infoLight, $percent))
 	@media (prefers-color-scheme dark)
 		background linear-gradient(to right, $infoDark, darken($infoDark, $percent))
-		
 
 .success
 	background linear-gradient(to right, $successLight, lighten($successLight, $percent))

src/dzeio/GradientBackground/index.tsx

@@ -13,8 +13,8 @@ interface Props {
 
 /**
  * Make the background a linear-gradient
- * 
+ *
- * @version 1.0.1
+ * @version 1.0.2
  */
 export default class GradientBackground extends React.Component<Props> {
 

src/dzeio/Input/index.tsx

@@ -97,7 +97,7 @@ export default class Input extends React.Component<Props, States> {
 			baseProps.onWheel = (ev: React.WheelEvent<HTMLInputElement>) => ev.currentTarget.blur()
 		}
 
-		if (this.props.type === 'select') {
+		if (this.props.type === 'select' && !this.props.readOnly) {
 			input = (
 				<select
 					ref={this.props.selectRef || this.inputRef}
@@ -112,6 +112,15 @@ export default class Input extends React.Component<Props, States> {
 					{this.props.children}
 				</select>
 			)
+		// select is readonly
+		} else if (this.props.type === 'select') {
+			input = (
+				<input
+					{...props}
+					{...baseProps}
+					type="text"
+				/>
+			)
 		} else if (this.props.type === 'textarea') {
 			delete baseProps.ref
 			input = (

src/dzeio/Link/index.tsx

@@ -1,65 +1,65 @@
-import React from 'react'
+import React from 'react'
-import NextLink from 'next/link'
+import NextLink from 'next/link'
-import { ExternalLink } from 'lucide-react'
+import { ExternalLink } from 'lucide-react'
-
+
-import css from './Link.module.styl'
+import css from './Link.module.styl'
-import { buildClassName } from '../Util'
+import { buildClassName } from '../Util'
-
+
-interface Props {
+interface Props {
-	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
+	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
-	href: string
+	href: string
-	children?: React.ReactNode
+	children?: React.ReactNode
-	className?: string
+	className?: string
-	/**
+	/**
-	 * Remove styling
+	 * Remove styling
-	 */
+	 */
-	noStyle?: boolean
+	noStyle?: boolean
-
+
-	/**
+	/**
-	 * Override external detection system
+	 * Override external detection system
-	 */
+	 */
-	external?: boolean
+	external?: boolean
-
+
-	/**
+	/**
-	 * force hiding the icon
+	 * force hiding the icon
-	 */
+	 */
-	hideIcon?: boolean
+	hideIcon?: boolean
-}
+}
-
+
-export default class Link extends React.Component<Props> {
+export default class Link extends React.Component<Props> {
-
+
-	public render() {
+	public render() {
-		const isExternal = this.props.href.startsWith('http')
+		const isExternal = this.props.href.startsWith('http')
-		const externalProps = this.props.external ? {
+		const externalProps = this.props.external ?? isExternal ? {
-			rel: 'noreferrer nofollow',
+			rel: 'noreferrer nofollow',
-			target: '_blank'
+			target: '_blank'
-		} : {}
+		} : {}
-		
+
-		if (isExternal) {
+		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}
-					{...externalProps}
+					{...externalProps}
-				>
+				>
-					{this.props.children}
+					{this.props.children}
-					{(this.props.external !== false && !this.props.hideIcon) && (
+					{(this.props.external !== false && !this.props.hideIcon) && (
-						<ExternalLink size={16} className={css.icon} />
+						<ExternalLink size={16} className={css.icon} />
-					)}
+					)}
-				</a>
+				</a>
-			)
+			)
-		}
+		}
-		return (
+		return (
-			<NextLink href={this.props.href}>
+			<NextLink href={this.props.href}>
-				<a
+				<a
-					{...this.props.linkProps}
+					{...this.props.linkProps}
-					{...externalProps}
+					{...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>
-		)
+		)
-	}
+	}
-
+
-}
+}

src/dzeio/config.styl

@@ -51,4 +51,5 @@ $default = $main
 // See https://github.com/stylus/stylus/issues/1872#issuecomment-86553717
 use('stylusUtils.js')
 
+// Import theme in the root folder of the project
 @import '../../../../../../theme' if file-exists('../../../../../../theme.styl')