new Fixes

- Box Header should be bold
- Buttons Hover/Active forms not correct
- Fixed one of the old Checkbox bug
- Footer Made with should be bold
- Sidebar fixes

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

.storybook/main.js

@@ -8,6 +8,7 @@ module.exports = {
 	core: {
 		builder: "webpack5"
 	},
+	staticDirs: ["./public"],
 	"addons": [
 		"@storybook/addon-essentials"
 	],

package.json

@@ -29,12 +29,12 @@
 		"webpack": "^5.55.1"
 	},
 	"peerDependencies": {
-		"next": "^11.0.0",
+		"next": ">=11.0.0",
 		"react": "^17.0.0",
 		"react-dom": "^17.0.0"
 	},
 	"scripts": {
-		"dev": "start-storybook -s ./.storybook/public -p 6006",
+		"dev": "start-storybook -p 6006",
 		"build": "rollup --config",
 		"prepublishOnly": "npm run build",
 		"postinstall": "rollup --config"

src/Box/BoxHeader.tsx

@@ -17,7 +17,7 @@ export default class BoxHeader extends React.Component<Props> {
 		<div className={css.header}>
 			<Row justify="space-between">
 				<Col>
-					<Text className={css.title}>
+					<Text className={css.title} weight="bold">
 						{this.props.icon && (
 							<span className={css.icon}>
 								<this.props.icon strokeWidth="2" fontWeight="800" size="20" color="white" />

src/Button/Button.module.styl

@@ -26,26 +26,7 @@
 	text-decoration none
 
 	&.outline
-		border 2px solid @background-color
-		padding 8px 18px // @padding - @border
-		background transparent
-		color @background-color
-
-		&:not(:disabled)
-			&:hover
-			&:active
-			&:focus
-				color $textOnMain
-
-		&:hover
-			box-shadow none
-
 	&.ghost
-		background transparent
-		color black
-		@media (prefers-color-scheme dark)
-			color white
-
 		&:hover
 			box-shadow none
 			background-color rgba($main, .25)
@@ -53,6 +34,25 @@
 		&:active
 		&:focus
 			background-color $main
+			color $textOnMain
+
+	&.outline
+		border 2px solid @background-color
+		padding 8px 18px // @padding - @border
+		background transparent
+		color @background-color
+
+		&:not(:disabled)
+			&:active
+			&:focus
+				color $textOnMain
+
+
+	&.ghost
+		background transparent
+		color black
+		@media (prefers-color-scheme dark)
+			color white
 
 	&:hover
 		background-color @background-color

src/Checkbox/Checkbox.module.styl

@@ -93,7 +93,6 @@ $backColor = #757575
 		width 24px
 		height 14px
 		border-radius 20px
-		top 50%
 		margin-right 10px
 		box-shadow none
 		background rgba($darkGrayLight, .3)

src/Checkbox/Checkbox.stories.tsx

@@ -1,10 +1,10 @@
 import { Meta } from '@storybook/react/types-6-0'
 import React from 'react'
-import Checkbox from '.'
+import CheckboxReact from '.'
 
 export default {
 	title: 'DZEIO/Checkbox',
-	component: Checkbox
+	component: CheckboxReact
 } as Meta
 
-export const Checkbox = (args: any) => <Checkbox {...args} />
+export const Checkbox = (args: any) => <CheckboxReact {...args} />

src/Footer/index.tsx

@@ -31,7 +31,7 @@ export default class Footer extends React.Component<Props> {
 						{this.props.text ? (
 							<Text>{this.props.text}</Text>
 						) : (
-							<Text>Made with <span className={css.animation}><Heart color={'#E6808A'} fill={'#E6808A'} size={16} fillOpacity={0.5} /></span> by {this.props.company || 'Dzeio'}</Text>
+							<Text weight="bold">Made with <span className={css.animation}><Heart color={'#E6808A'} fill={'#E6808A'} size={16} fillOpacity={0.5} /></span> by {this.props.company || 'Dzeio'}</Text>
 						)}
 					</Col>
 					<Col>

src/Input/Input.stories.tsx

@@ -20,7 +20,7 @@ tmp.args = {label: 'Label', helper: 'Helper', maxLength: 6, iconLeft: {
 export const Normal = tmp
 
 tmp = Basic.bind({})
-tmp.args = {label: 'Label', filled:true, helper: 'Helper', choices: [
+tmp.args = {label: 'Label', helper: 'Helper', choices: [
 	'a',
 	'a',
 	'a',

src/Sidebar/Sidebar.module.styl

@@ -42,28 +42,37 @@
 		cursor pointer
 
 	.userSpace
-		> div
+		cursor pointer
+		div, p
 			transition all $transition
 		p
 			overflow hidden
 			white-space nowrap
-		svg
+		>div:last-child p
-			cursor pointer
+			padding 8px 8px 4px
-
+			border-radius 8px
+			&:hover
+				color black
+				background $lightGrayLight
+				@media (prefers-color-scheme dark)
+					color white
+					background $darkGrayDark
+			&:active
+				color $textOnMain
+				background $main
 	&.short
 		width 88px
-		.userSpace > div:first-child
+		.userSpace > div:not(:last-child)
 		.header > div:first-child
 			width 0
 			max-width 0
+			padding-left 0
 		.header
 			margin-left -16px
 			> div:first-child
 				padding-left 0 !important
 
 		.header > div svg
-		.userSpace svg
-				margin 0 8px
 		.header .imgContainer
 		> ul
 			span
@@ -161,3 +170,16 @@
 		list-style none
 		margin 0
 		padding 0
+
+.userMenu
+	position absolute
+	bottom 16px
+	left 316px
+	z-index 200
+
+	&.short
+		left 104px
+
+	&.fullWidth
+		left 16px
+		width calc(100% - 32px)

src/Sidebar/Sidebar.stories.tsx

@@ -15,6 +15,7 @@ export const Sidebar: Story<any> = (args: any) => <Component {...args} />
 Sidebar.args = {
 	logo: {src: '/90-38.svg', width: 90, height: 38},
 	user: {
+		picture: '/16-16.svg',
 		name: 'Username',
 		menu: [{
 			path: '/logout',
@@ -41,4 +42,5 @@ Sidebar.args = {
 		name: 'Link',
 		icon: ZapOff
 	}],
+	// fullWidth: true
 }

src/Sidebar/index.tsx

@@ -1,12 +1,12 @@
 import React, { MouseEvent } from 'react'
 
 import Router from 'next/router'
-import Image, { ImageProps } from 'next/image'
 import { ChevronDown, Minus, MoreHorizontal, Plus } from 'lucide-react'
 import Text from '../Text'
 import Col from '../Col'
 import Row from '../Row'
 import Link from '../Link'
+import Image from '../Image'
 import { buildClassName } from '../Util'
 
 import css from './Sidebar.module.styl'
@@ -17,7 +17,6 @@ interface MenuItem {
 	path?: string
 	icon?: Icon
 	name: string
-		subMenu?: Array<MenuItem>
 }
 
 interface Props {
@@ -25,11 +24,12 @@ interface Props {
 	/**
 	 * Logo to display
 	 */
-	logo?: ImageProps & {height: number, width: number}
+	logo?: Image['props']['imageProps'] & {height: number, width: number}
 	/**
 	 * User Informations if loggedin
 	 */
 	user?: {
+		picture?: string
 		/**
 		 * Username
 		 */
@@ -42,7 +42,7 @@ interface Props {
 	/**
 	 * Links to display
 	 */
-	menu: Array<MenuItem>
+	menu: Array<MenuItem & {subMenu?: Array<MenuItem>}>
 
 	onClose?: () => boolean
 
@@ -141,7 +141,7 @@ export default class Navbar extends React.Component<Props, State> {
 					{this.props.logo && (
 						<Col>
 							<Link href="/">
-								<Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} />
+								<Image imageProps={{ ...this.props.logo, height: 34, width: this.props.logo.width * 34 / this.props.logo.height }} />
 							</Link>
 						</Col>
 					)}
@@ -155,14 +155,17 @@ export default class Navbar extends React.Component<Props, State> {
 				<div style={{flex: 1}}></div>
 				{/* Spacer */}
 				{this.props.user && (
-					<Row className={css.userSpace}>
+					<Row className={css.userSpace} align="center" onClick={(ev) => {ev.stopPropagation(); this.setState({userMenu: !this.state.userMenu})}}>
+						{this.props.user.picture && (
+							<Col nogrow><Image imageProps={{ src: this.props.user.picture, width: 38, height: 38 }} /></Col>
+						)}
 						<Col><Text>{this.props.user.name}</Text></Col>
-						<Col nogrow><Text><MoreHorizontal size={24} onClick={(ev) => {ev.stopPropagation(); this.setState({userMenu: !this.state.userMenu})}} /></Text></Col>
+						<Col nogrow><Text><MoreHorizontal size={24} /></Text></Col>
 					</Row>
 				)}
 			</nav>
 			{this.props.user?.menu && this.state.userMenu && (
-				<div style={{position: 'absolute', bottom: 16, left: this.props.fullWidth ? 16 : this.state.open ? 316 : 104}}>
+				<div className={buildClassName(css.userMenu, [css.fullWidth, this.props.fullWidth], [css.short, !this.state.open])}>
 					<Menu onClick={this.onMenuClick} outline items={this.props.user.menu.map((v) => ({
 						display: v.name,
 						value: v.path,
@@ -193,7 +196,7 @@ export default class Navbar extends React.Component<Props, State> {
 		}
 	}
 
-	private makeMenuItem(obj: MenuItem, isSub = false) {
+	private makeMenuItem(obj: MenuItem & {subMenu?: Array<MenuItem>}, isSub = false) {
 		const id = obj.name + obj.path
 			const content = (
 				<>