v0.9.2

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

package.json

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

src/dzeio/Box/Box.module.styl

@@ -12,6 +12,22 @@
 		border-color $grayLight
 
 
+.header
+	padding 16px
+
+	+ .body
+		padding-top 0
+
+.title
+	font-weight bold
+	font-size rem(18)
+	margin 0 0 8px
+
+.subtitle
+	font-size rem(16)
+	margin 0
+
+
 // BODY
 .body
-	padding 0 16px 16px
+	padding 16px

src/dzeio/Box/BoxHeader/BoxHeader.module.styl

@@ -1,13 +0,0 @@
-@import "../../config.styl"
-
-.header
-	padding 16px
-
-.title
-	font-weight bold
-	font-size rem(18)
-	margin 0 0 8px
-
-.subtitle
-	font-size rem(16)
-	margin 0

src/dzeio/Box/BoxHeader/index.tsx

@@ -1,56 +0,0 @@
-import React from 'react'
-
-import { buildClassName } from '../../Util'
-import css from './BoxHeader.module.styl'
-import Row from '../../Row'
-import Col from '../../Col'
-import Text from '../../Text'
-
-
-export interface Props {
-	title?: string
-	titleColSize?: number
-	subtitle?: string
-	titleClassName?: string
-}
-
-export default class BoxHeader extends React.Component<Props> {
-
-	public render = () => (
-		<>
-			<div data-t="true" className={buildClassName(
-				css.header
-			)}>
-				<Row nomargin justify="space-between">
-					<Col>
-						{this.props.title && (
-							<Text className={buildClassName(css.title, this.props.titleClassName)}>{this.props.title}</Text>
-						)}
-						{this.props.subtitle && (
-							<Text className={css.subtitle}>{this.props.subtitle}</Text>
-						)}
-					</Col>
-					{this.props.children && (
-						<Col nogrow>
-							<Row justify="flex-end">
-								{this.props.children}
-							</Row>
-						</Col>
-					)}
-				</Row>
-			</div>
-		</>
-	)
-
-}
-
-/*
-Header
-delimiter?: boolean
-picture?: string // url
-category?: string // subtitle but above title
-title string
-subtitle string
-center?: boolean // if Center children is not used
-children?: content
-*/

src/dzeio/Box/index.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
 
-import BoxHeader from './BoxHeader'
 import { buildClassName } from '../Util'
 
 import css from './Box.module.styl'
+import Row from '../Row'
+import Col from '../Col'
+import Text from '../Text'
 
 interface Props {
 
@@ -37,14 +39,27 @@ export default class Box extends React.Component<Props> {
 			className={buildClassName(css.box, this.props.className, [css.outline, this.props.outline])}
 		>
 			{(this.props.headerButtons || this.props.title || this.props.titleColSize || this.props.subtitle || this.props.delimiter || this.props.titleClassName) && (
-				<BoxHeader
+				<div className={buildClassName(
-					title={this.props.title}
+					css.header
-					titleColSize={this.props.titleColSize}
+				)}>
-					subtitle={this.props.subtitle}
+					<Row nomargin justify="space-between">
-					titleClassName={this.props.titleClassName}
+						<Col>
-				>
+							{this.props.title && (
-					{this.props.headerButtons}
+								<Text className={buildClassName(css.title, this.props.titleClassName)}>{this.props.title}</Text>
-				</BoxHeader>
+							)}
+							{this.props.subtitle && (
+								<Text className={css.subtitle}>{this.props.subtitle}</Text>
+							)}
+						</Col>
+						{this.props.children && (
+							<Col nogrow>
+								<Row justify="flex-end">
+								{this.props.headerButtons}
+								</Row>
+							</Col>
+						)}
+					</Row>
+				</div>
 			)}
 			{this.props.children && (
 				<div className={buildClassName([css.body, !this.props.noPadding])}>

src/dzeio/Footer/Footer.module.styl

@@ -13,6 +13,9 @@
 		li
 			display inline-block
 
+		&.socials a
+			padding 0 8px
+
 .animation
 	animation grow 1s linear infinite
 	display inline-block

src/dzeio/Footer/Footer.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, Story } from '@storybook/react/types-6-0'
 import React from 'react'
+import { Zap } from 'react-feather'
 import Component from '.'
 
 export default {
@@ -10,6 +11,9 @@ export default {
 export const Basic: Story<any> = (args: any) => <Component {...args} />
 
 let tmp = Basic.bind({})
-tmp.args = {links: [{name: 'test1', path: '/'}, {name: 'test2', path: '/'}, {name: 'test3', path: '/'}]}
+tmp.args = {
+	links: [{name: 'test1', path: '/'}, {name: 'test2', path: '/'}, {name: 'test3', path: '/'}],
+	socials: [{icon: Zap, href: '/'}, {icon: '/16-16.svg', href: '/'}, {icon: Zap, href: '/'}]
+}
 
 export const Normal = tmp

src/dzeio/Footer/index.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { FC } from 'react'
 import { Heart } from 'react-feather'
 import Link from '../Link'
-
+import { Icon } from 'react-feather'
 import Text from '../Text'
 import css from './Footer.module.styl'
+import Image from 'next/image'
 
 interface Props {
 	text?: string
@@ -12,6 +13,10 @@ interface Props {
 		path: string
 		name: string
 	}>
+	socials?: Array<{
+		href: string
+		icon: Icon | string
+	}>
 }
 
 export default class Footer extends React.Component<Props> {
@@ -27,6 +32,17 @@ export default class Footer extends React.Component<Props> {
 					<li key={l.path}><Text>{index !== 0 && (<>&nbsp;- </>)}<Link href={l.path}>{l.name}</Link></Text></li>
 				))}</ul>
 			)}
+			{this.props.socials && (
+				<ul className={css.socials}>{this.props.socials.map((l, index) => (
+					<li key={l.href}><Text><Link hideIcon noStyle href={l.href}>
+						{typeof l.icon === 'string' ? (
+							<Image width={24} height={24} src={l.icon} />
+						) : (
+							<l.icon size={24} />
+					)}
+					</Link></Text></li>
+				))}</ul>
+			)}
 		</footer>
 	)
 }

src/dzeio/Input/Input.module.styl

@@ -180,7 +180,7 @@
 				~ svg
 					color @border-color
 			&:invalid
-				border-color $errorLight
+				border-color $errorDark
 
 				~ label
 					color @border-color
@@ -188,7 +188,7 @@
 				~ svg
 					color @border-color
 				@media (prefers-color-scheme dark)
-					border-color $errorDark
+					border-color $errorLight
 
 					~ label
 						color @border-color
@@ -229,7 +229,7 @@
 						background #1c1c1c
 			&:focus
 				background rgba(gray, .3)
-				border-bottom 2px solid $default
+				border-bottom 2px solid $main
 
 				&.opaque
 					background white

src/dzeio/Link/Link.stories.tsx

@@ -7,7 +7,9 @@ export default {
 	component: Component,
 	argTypes: {
 		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
 

src/dzeio/Link/index.tsx

@@ -19,23 +19,35 @@ interface Props {
 	 * Override external detection system
 	 */
 	external?: boolean
+
+	/**
+	 * force hiding the icon
+	 */
+	hideIcon?: boolean
 }
 
 export default class Link extends React.Component<Props> {
 
 	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
 			return (
 				<a
 					{...this.props.linkProps}
 					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
 					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>
 			)
 		}
@@ -43,6 +55,7 @@ export default class Link extends React.Component<Props> {
 			<NextLink href={this.props.href}>
 				<a
 					{...this.props.linkProps}
+					{...externalProps}
 					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
 				>{this.props.children}</a>
 			</NextLink>

src/dzeio/NotificationManager/NotificationManager.module.styl

@@ -5,6 +5,7 @@
 	bottom 0
 	left 0
 	padding 0 16px
+	z-index 400
 	max-width 25%
 	@media (max-width $tablet)
 		max-width 50%

src/dzeio/Popup/index.tsx

@@ -3,14 +3,13 @@ import { X } from 'react-feather'
 import Text from '../Text'
 import Box from '../Box'
 import Row from '../Row'
-import { Props as HeaderProps } from '../Box/BoxHeader'
 
 import css from './Popup.module.styl'
 
 interface Props {
 	children: React.ReactNode
 	onClose?: () => void
-	header?: HeaderProps
+	header?: Box['props']
 }
 
 export default class Popup extends React.Component<Props> {

src/dzeio/Table/Table.module.styl

@@ -1,11 +1,17 @@
+@import '../config'
+
 .table
 	border-spacing 0
-	border 2px solid #EEE
+	border 2px solid $grayDark
+	@media (prefers-color-scheme dark)
+		border-color $grayLight
 	border-radius 4px
 	width 100%
 
 	td
-		border-top 1px solid #EEE
+		border-top 1px solid $grayDark
+		@media (prefers-color-scheme dark)
+			border-color $grayLight
 
 	th
 	td

src/dzeio/Text/Text.module.styl

@@ -1,6 +1,9 @@
 .text
 	margin 0
 
+	+ .text
+		margin-top 8px
+
 .white
 	color white
 

src/dzeio/Text/Text.stories.tsx

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