v0.7.5

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

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.7.1",
+	"version": "0.7.5",
 	"license": "MIT",
-	"main": "./index.mjs",
+	"main": "./index.js",
 	"types": "./types/index.d.ts",
 	"devDependencies": {
 		"@babel/core": "^7.12.16",

rollup.config.js

@@ -12,14 +12,16 @@ export default [
 				url: false,
 				autoModules: true,
 				mode: 'extract',
-
+				modules: {
+					generateScopedName: '[local][hash:5]'
+				}
 			}),
 			typescript({useTsconfigDeclarationDir: true}), // so Rollup can convert TypeScript to JavaScript
 		],
 		output: [
 			{
 				file: pkg.main,
-				format: 'es',
+				format: 'cjs',
 				assetFileNames: 'style.css'
 			}
 		]

src/dzeio/GradientBackground/GradientBackground.module.styl

@@ -1,34 +1,29 @@
 @import "../config"
 
-$transparent = 75%
+$transparent = 15%
 
 .back
 	transition all $transition
-	background linear-gradient(to left, $default, transparentify($default, $transparent))
+	background $mainGradient
 
-.primary
-	$color = $primary
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
-
-.secondary
-	$color = $secondary
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
+	&.fullscreen
+		min-height 100vh
 
 .info
 	$color = $info
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
+	background linear-gradient(to left, $color, lighten($color, $transparent))
 
 .success
 	$color = $success
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
+	background linear-gradient(to left, $color, lighten($color, $transparent))
 
 .danger
 	$color = $danger
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
+	background linear-gradient(to left, $color, lighten($color, $transparent))
 
 .warning
 	$color = $warning
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
+	background linear-gradient(to left, $color, lighten($color, $transparent))
 
 @media (prefers-color-scheme dark)
 	.back

src/dzeio/GradientBackground/index.tsx

@@ -8,12 +8,18 @@ interface Props {
 	color?: ColorType
 	className?: string
 	children: React.ReactNode
+	fullscreen?: boolean
 }
 
+/**
+ * Make the background a linear-gradient
+ * 
+ * @version 1.0.0
+ */
 export default class GradientBackground extends React.Component<Props> {
 
 	public render = () => (
-		<div className={buildClassName([css.back], [css[this.props.color as string], this.props.color], [this.props.className])}>
+		<div className={buildClassName(css.back, [css[this.props.color as string], this.props.color], this.props.className)}>
 			{this.props.children}
 		</div>
 	)

src/dzeio/Link/index.tsx

@@ -24,7 +24,7 @@ interface Props {
 export default class Link extends React.Component<Props> {
 
 	public render() {
-		const external = this.props.external ?? !this.props.href.startsWith('/')
+		const external = this.props.external ?? this.props.href.startsWith('http')
 		if (external) {
 			// external link
 			return (

src/dzeio/Text/index.tsx

@@ -12,7 +12,6 @@ interface Props {
 
 export default class Text extends React.Component<Props> {
 
-
 	public render() {
 		const classes = buildClassName(
 			css.text,
@@ -23,16 +22,10 @@ export default class Text extends React.Component<Props> {
 			this.props.className
 		)
 
-		switch (this.props.type || 'p') {
-		case 'h1': return (<h1 className={classes}>{this.props.children}</h1>)
-		case 'h2': return (<h2 className={classes}>{this.props.children}</h2>)
-		case 'h3': return (<h3 className={classes}>{this.props.children}</h3>)
-		case 'h4': return (<h4 className={classes}>{this.props.children}</h4>)
-		case 'h5': return (<h5 className={classes}>{this.props.children}</h5>)
-		case 'h6': return (<h6 className={classes}>{this.props.children}</h6>)
-		case 'em': return (<p className={classes}><em>{this.props.children}</em></p>)
-		case 'span': return (<span className={classes}>{this.props.children}</span>)
-		default: return (<p className={classes}>{this.props.children}</p>)
+		if (this.props.type === 'em') {
+			return (<p className={classes}><em>{this.props.children}</em></p>)
 		}
+
+		return React.createElement(this.props.type || 'p', {className: classes})
 	}
 }

src/dzeio/interfaces.ts

@@ -1,6 +1,6 @@
 import { SVGAttributes } from 'react'
 
-export type ColorType = 'primary' | 'info' | 'success' | 'error' | 'warning'
+export type ColorType = 'info' | 'success' | 'error' | 'warning'
 
 export interface IconProps extends SVGAttributes<SVGElement> {
 	color?: string

src/index.ts

@@ -4,6 +4,8 @@
  * @summary DZEIO Component Library
  */
 
+import './dzeio/general.styl'
+
 import Box from './dzeio/Box'
 import Button from './dzeio/Button'
 import Checkbox from './dzeio/Checkbox'