v0.8.4

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

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.8.2",
+	"version": "0.8.4",
 	"license": "MIT",
 	"main": "./index.js",
 	"types": "./types/index.d.ts",
@@ -36,7 +36,7 @@
 		"typescript": "^4.2.3"
 	},
 	"scripts": {
-		"dev": "rm -rf src/dzeio/**/*.js && start-storybook -s ./.storybook/public -p 6006",
+		"dev": "start-storybook -s ./.storybook/public -p 6006",
 		"build": "rollup --config",
 		"prepublishOnly": "yarn build",
 		"postinstall": "rollup --config"

src/dzeio/Button/Button.module.styl

@@ -172,3 +172,6 @@ btn($color, $theme)
 
 	100%
 		transform rotate(365deg)
+
+.img
+	min-width 16px

src/dzeio/Button/index.tsx

@@ -33,7 +33,7 @@ export default class Button extends React.Component<Props> {
 			inner = (
 				<>
 					{typeof Icon === 'string' ? (
-						<Image src={Icon} width={16} height={16} />
+						<Image className={css.img} src={Icon} width={16} height={16} />
 					) : (
 						<Icon size={16} />
 					)}

src/dzeio/GradientBackground/GradientBackground.module.styl

@@ -1,6 +1,6 @@
 @import "../config"
 
-$transparent = 15%
+$percent = 15%
 
 .back
 	transition all $transition
@@ -10,21 +10,22 @@ $transparent = 15%
 		min-height 100vh
 
 .info
-	$color = $info
-	background linear-gradient(to left, $color, lighten($color, $transparent))
+	background linear-gradient(to right, $infoLight, lighten($infoLight, $percent))
+	@media (prefers-color-scheme dark)
+		background linear-gradient(to right, $infoDark, darken($infoDark, $percent))
+		
 
 .success
-	$color = $success
-	background linear-gradient(to left, $color, lighten($color, $transparent))
+	background linear-gradient(to right, $successLight, lighten($successLight, $percent))
+	@media (prefers-color-scheme dark)
+		background linear-gradient(to right, $successDark, darken($successDark, $percent))
 
-.danger
-	$color = $danger
-	background linear-gradient(to left, $color, lighten($color, $transparent))
+.error
+	background linear-gradient(to right, $errorLight, lighten($errorLight, $percent))
+	@media (prefers-color-scheme dark)
+		background linear-gradient(to right, $errorDark, darken($errorDark, $percent))
 
 .warning
-	$color = $warning
-	background linear-gradient(to left, $color, lighten($color, $transparent))
-
+	background linear-gradient(to right, $warningLight, lighten($warningLight, $percent))
 	@media (prefers-color-scheme dark)
-	.back
-		background $darkBackground
+		background linear-gradient(to right, $warningDark, darken($warningDark, $percent))

src/dzeio/GradientBackground/index.tsx

@@ -14,12 +14,12 @@ interface Props {
 /**
  * Make the background a linear-gradient
  * 
- * @version 1.0.0
+ * @version 1.0.1
  */
 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, [css.fullscreen, this.props.fullscreen])}>
 			{this.props.children}
 		</div>
 	)

src/dzeio/Navbar/Navbar.module.styl

@@ -56,7 +56,6 @@
 		position fixed
 		top 70px
 		right 0
-		padding 16px
 		border-bottom-left-radius 4px
 		transform translateX(100%)
 		background inherit
@@ -216,15 +215,20 @@
 		margin 0
 		padding 0
 
-.userMenu a
-			padding 16px 0
+.userMenu
+	padding 8px 16px
+	a
+		display inline-block
+		padding-bottom 16px
 
 
 .mobileMenu
 	opacity 0
 	transition opacity $transition
+	pointer-events none
 	&.shown
 		opacity 1
+		pointer-events initial
 
 .mainGradient
 	//WIP

src/dzeio/Navbar/Navbar.stories.tsx

@@ -1,6 +1,8 @@
 import { Meta, Story } from '@storybook/react/types-6-0'
 import React from 'react'
+import { Zap, ZapOff } from 'react-feather'
 import Component from '.'
+import Text from '../Text'
 
 export default {
 	title: 'DZEIO/Navbar',
@@ -9,13 +11,10 @@ export default {
 
 export const Basic: Story<any> = (args: any) => <Component {...args} />
 Basic.args = {
-	items: [{
-		path: '/dashboard',
-		name: 'Dasboard'
-	}],
+	type: 'navbar',
+	logo: {src: '/90-38.svg', width: 90, height: 38},
 	loginUrl: '/login',
 	registerUrl: '/register',
-	type: 'navbar',
 	user: {
 		name: 'Username',
 		description: 'User Description',
@@ -23,8 +22,20 @@ Basic.args = {
 			links: [{
 				path: '/logout',
 				name: 'Logout'
-			}]
+			}, {
+				path: '/logout',
+				name: 'Logout'
+			}],
+			informations: (<Text>Testing :D</Text>)
 		}
 	},
-	logo: {src: '/90-38.svg', width: 90, height: 38}
+	items: [{
+		path: '/dashboard',
+		name: 'Dasboard',
+		icon: Zap
+	}, {
+		path: '/dashboard',
+		name: 'Dasboard',
+		icon: ZapOff
+	}],
 }

src/dzeio/Navbar/index.tsx

@@ -82,7 +82,7 @@ interface State {
 
 /**
  * Navbar/Sidebar Component
- * @version 1.0.2
+ * @version 1.0.3
  */
 export default class Navbar extends React.Component<Props, State> {
 
@@ -186,14 +186,14 @@ export default class Navbar extends React.Component<Props, State> {
 				)}
 				<ul>
 					{!this.state.isMobile && this.props.items.map((item) => (
-						<li key={item.path}><Link noStyle href={item.path}><a>
+						<li key={item.path}><Link noStyle href={item.path}>
 							<Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])}>
 								{this.getType() === 'sidebar' && item.icon && (
 									<item.icon />
 								)}
 								<span>{item.name}</span>
 							</Text>
-						</a></Link></li>
+						</Link></li>
 					))}
 				</ul>
 				<div style={{flex: 1}}></div>
@@ -224,7 +224,7 @@ export default class Navbar extends React.Component<Props, State> {
 							</div>
 						</div>
 						<div className={buildClassName(css.userMenu, [css.menuActive, !this.state.isMobile && this.state.menuActive])}>
-							<Row nomargin={this.getType() === 'navbar'}>
+							<Row nomargin>
 								{this.props.user.menu?.informations && (
 									<Col>{this.props.user.menu?.informations}</Col>
 								)}

src/dzeio/config.styl

@@ -1,17 +1,18 @@
 
 $main = #4285F4
 $textOnMain = white
+$mainGradient = linear-gradient(to right, $main, lighten($main, 20%))
 
-$infoDark = #304FFE
+$infoDark = #01579B
 $infoLight = #29B6F6
 
-$successDark = #388E3C
+$successDark = #1B5E20
 $successLight = #4CAF50
 
-$errorDark = #D32F2F
+$errorDark = #7F0000
 $errorLight = #F44336
 
-$warningDark = #F57C00
+$warningDark = #C43E00
 $warningLight = #FF9800
 
 $backgroundDark = #161616
@@ -44,14 +45,7 @@ rem($a)
 	($a / 16)rem
 
 // @deprecated colors
-$primary = $main
 $default = $main
-$secondary = $main
-$info = $infoLight
-$success = $successLight
-$danger = $errorLight
-$warning = $warningLight
-$darkBackground = $backgroundDark
 
 
 // See https://github.com/stylus/stylus/issues/1872#issuecomment-86553717