Started moving Box to a single component

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

src/dzeio/Box/Box.module.styl

@@ -1,4 +1,4 @@
-@import "../../config"
+@import "../config"
 
 .box
 	background $foregroundLight
@@ -10,3 +10,8 @@
 	border 2px solid $grayDark
 	@media (prefers-color-scheme dark)
 		border-color $grayLight
+
+
+// BODY
+.body
+	padding 0 16px 16px

src/dzeio/Box/BoxBody/BoxBody.module.styl

@@ -1,2 +0,0 @@
-.body
-	padding 0 16px 16px

src/dzeio/Box/BoxBody/index.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import css from './BoxBody.module.styl'
-import { buildClassName } from '../../Util'
-
-
-interface Props {
-	noPadding?: boolean
-}
-
-export default class BoxBody extends React.Component<Props> {
-
-	public render = () => (
-		<div className={buildClassName([css.body, !this.props.noPadding])}>
-			{this.props.children}
-		</div>
-	)
-
-}

src/dzeio/Box/BoxHeader/index.tsx

@@ -18,19 +18,25 @@ export default class BoxHeader extends React.Component<Props> {
 
 	public render = () => (
 		<>
-			<div className={buildClassName(
+			<div data-t="true" className={buildClassName(
 				css.header
 			)}>
-				<Row>
+				<Row nomargin justify="space-between">
-					<Col size={this.props.titleColSize as 1 || 8}>
-						<Text className={buildClassName(css.title, this.props.titleClassName)}>{this.props.title}</Text>
-						<Text className={css.subtitle}>{this.props.subtitle}</Text>
-					</Col>
 					<Col>
-						<Row justify="flex-end">
+						{this.props.title && (
-							{this.props.children}
+							<Text className={buildClassName(css.title, this.props.titleClassName)}>{this.props.title}</Text>
-						</Row>
+						)}
+						{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>
 		</>

src/dzeio/Box/BoxWrapper/index.tsx

@@ -1,28 +0,0 @@
-import React from 'react'
-
-import css from './BoxWrapper.module.styl'
-import { buildClassName } from '../../Util'
-
-interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-	outline?: boolean
-	className?: string
-}
-
-export default class BoxWrapper extends React.Component<Props> {
-
-	public render = () => (
-		<div {...this.props}
-			className={buildClassName(css.box, [css.outline, this.props.outline], this.props.className)}
-		>
-			{this.props.children}
-		</div>
-	)
-
-}
-
-/*
-Wrapper extends div
-
-Body
-noPadding?: boolean
-*/

src/dzeio/Box/index.tsx

@@ -1,15 +1,20 @@
 import React from 'react'
 
-import BoxWrapper from './BoxWrapper'
 import BoxHeader from './BoxHeader'
-import BoxBody from './BoxBody'
+import { buildClassName } from '../Util'
+
+import css from './Box.module.styl'
 
 interface Props {
 
 	// Wrapper
+	wrapperProps?: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'className'>
 	outline?: boolean
+	/**
+	 * @deprecated use wrapperProps.onClick
+	 */
+	onClick?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>['onClick']
 	className?: string
-	onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 
 	// Header
 	title?: string
@@ -26,7 +31,11 @@ interface Props {
 
 export default class Box extends React.Component<Props> {
 	public render = () => (
-		<BoxWrapper onClick={this.props.onClick} outline={this.props.outline} className={this.props.className}>
+		<div
+			{...this.props.wrapperProps}
+			onClick={this.props.onClick}
+			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
 					title={this.props.title}
@@ -38,17 +47,10 @@ export default class Box extends React.Component<Props> {
 				</BoxHeader>
 			)}
 			{this.props.children && (
-				<BoxBody noPadding={this.props.noPadding}>
+				<div className={buildClassName([css.body, !this.props.noPadding])}>
 					{this.props.children}
-				</BoxBody>
+				</div>	
 			)}
-		</BoxWrapper>
+		</div>
 	)
 }
-
-
-export {
-	BoxWrapper,
-	BoxHeader,
-	BoxBody
-}