Updated components

Signed-off-by: Avior <github@avior.me>

src/dzeio/Box/BoxHeader.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from './BoxHeader'
+import Text from '../Text'
+import { Lightbulb } from 'lucide-react'
+
+export default {
+	title: 'DZEIO/BoxHeader',
+	component: Component,
+	parameters: {
+		layout: 'fullscreen'
+	}
+} as Meta
+
+export const Basic = (args: any) => (
+	<Component titel="Test" {...args} />
+)
+
+export const Complete = (args: any) => (
+	<Component
+		title="Test"
+		icon={Lightbulb}
+	><Text>Test</Text></Component>
+)

src/dzeio/Box/BoxHeader.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import css from './Box.module.styl'
+import Row from '../Row'
+import Col from '../Col'
+import Text from '../Text'
+import { Icon } from '../interfaces'
+
+interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+	title?: string
+	icon?: Icon
+	children?: React.ReactNode
+}
+
+export default class BoxHeader extends React.Component<Props> {
+	public render = () => (
+		<div className={css.header}>
+			<Row justify="space-between">
+				<Col>
+					<Text className={css.title}>
+						{this.props.icon && (
+							<span className={css.icon}>
+								<this.props.icon strokeWidth="2" fontWeight="800" size="20" color="white" />
+							</span>
+						)}
+						{this.props.title ? this.props.title : undefined}
+					</Text>
+				</Col>
+				{this.props.children && (
+					<Col nogrow>
+						{this.props.children}
+					</Col>
+				)}
+			</Row>
+		</div>
+	)
+}

src/dzeio/Box/index.tsx

@@ -3,10 +3,9 @@ import React from 'react'
 import { buildClassName } from '../Util'
 
 import css from './Box.module.styl'
-import Row from '../Row'
-import Col from '../Col'
-import Text from '../Text'
 import { Icon } from '../interfaces'
+import { objectOmit } from '@dzeio/object-util'
+import BoxHeader from './BoxHeader'
 
 interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
 	noPadding?: boolean
@@ -20,29 +19,11 @@ interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElem
 export default class Box extends React.Component<Props> {
 	public render = () => (
 		<div
-			{...this.props}
+			{...objectOmit<Record<string, any>>(this.props, 'title', 'icon', 'rightHeader', 'noPadding')}
 			className={buildClassName(css.box, this.props?.className)}
 		>
 			{(this.props.rightHeader || this.props.title || this.props.icon) && (
-				<div className={css.header}>
-					<Row nomargin justify="space-between">
-						<Col>
-							<Text className={css.title}>
-								{this.props.icon && (
-									<span className={css.icon}>
-										<this.props.icon strokeWidth="2" fontWeight="800" size="20" color="white" />
-									</span>
-								)}
-								{this.props.title ? this.props.title : undefined}
-							</Text>
-						</Col>
-						{this.props.rightHeader && (
-							<Col nogrow>
-								{this.props.rightHeader}
-							</Col>
-						)}
-					</Row>
-				</div>
+				<BoxHeader title={this.props.title} icon={this.props.icon}>{this.props.rightHeader}</BoxHeader>
 			)}
 			{this.props.children && (
 				<div className={buildClassName([css.body, !this.props.noPadding])}>

src/dzeio/Footer/index.tsx

@@ -26,7 +26,7 @@ export default class Footer extends React.Component<Props> {
 	public render = () => (
 		<footer className={css.footer}>
 			<Container>
-				<Row nomargin>
+				<Row>
 					<Col>
 						{this.props.text ? (
 							<Text>{this.props.text}</Text>

src/dzeio/Navbar/index.tsx

@@ -225,7 +225,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>
+							<Row>
 								{this.props.user.menu?.informations && (
 									<Col>{this.props.user.menu?.informations}</Col>
 								)}

src/dzeio/Popup/index.tsx

@@ -15,7 +15,7 @@ interface Props {
 export default class Popup extends React.Component<Props> {
 
 	public render = () => (
-		<Row nomargin onClick={this.parentClose} justify="center" align="center" className={css.popup}>
+		<Row onClick={this.parentClose} justify="center" align="center" className={css.popup}>
 			<Box
 				title={this.props.title}
 				className={css.popupChild}

src/dzeio/Row/Row.module.styl

@@ -4,11 +4,6 @@
 	display flex
 	flex-wrap wrap
 	margin (0 - $gapSize) 0 0 (0 - $gapSize)
-	padding $gapSize
-
-	&.nomargin
-	.row
-		padding 0
 
 .nowrap
 	flex-wrap nowrap

src/dzeio/Row/index.tsx

@@ -12,7 +12,6 @@ interface Props {
 	nowrap?: boolean
 	nogrow?: boolean
 	className?: string
-	nomargin?: boolean
 	onClick?: (ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 }
 
@@ -28,8 +27,7 @@ export default class Row extends React.Component<Props> {
 				[css[`align-${this.props.align}`], this.props.align],
 				[css.nowrap, this.props.nowrap],
 				[css.nogrow, this.props.nogrow],
-				this.props.className,
-				[css.nomargin, this.props.nomargin]
+				this.props.className
 			)}
 			onClick={this.props.onClick}
 		>

src/index.ts

@@ -5,6 +5,7 @@
 import './dzeio/general.styl'
 
 import Box from './dzeio/Box'
+import BoxHeader from './dzeio/Box/BoxHeader'
 import Button from './dzeio/Button'
 import Checkbox from './dzeio/Checkbox'
 import Code from './dzeio/Code'
@@ -27,6 +28,7 @@ import * as Util from './dzeio/Util'
 
 export {
 	Box,
+	BoxHeader,
 	Button,
 	Checkbox,
 	Code,