From 2491f23f49acd3b25a643ff43b205f5056894ebb Mon Sep 17 00:00:00 2001
From: Avior <florian.bouillon@delta-wings.net>
Date: Thu, 15 Apr 2021 01:24:48 +0200
Subject: [PATCH] Started moving Box to a single component

Signed-off-by: Avior <florian.bouillon@delta-wings.net>
---
 ...BoxWrapper.module.styl => Box.module.styl} |  7 ++++-
 src/dzeio/Box/BoxBody/BoxBody.module.styl     |  2 --
 src/dzeio/Box/BoxBody/index.tsx               | 18 -----------
 src/dzeio/Box/BoxHeader/index.tsx             | 24 +++++++++------
 src/dzeio/Box/BoxWrapper/index.tsx            | 28 -----------------
 src/dzeio/Box/index.tsx                       | 30 ++++++++++---------
 6 files changed, 37 insertions(+), 72 deletions(-)
 rename src/dzeio/Box/{BoxWrapper/BoxWrapper.module.styl => Box.module.styl} (79%)
 delete mode 100644 src/dzeio/Box/BoxBody/BoxBody.module.styl
 delete mode 100644 src/dzeio/Box/BoxBody/index.tsx
 delete mode 100644 src/dzeio/Box/BoxWrapper/index.tsx

diff --git a/src/dzeio/Box/BoxWrapper/BoxWrapper.module.styl b/src/dzeio/Box/Box.module.styl
similarity index 79%
rename from src/dzeio/Box/BoxWrapper/BoxWrapper.module.styl
rename to src/dzeio/Box/Box.module.styl
index 16c6267..bc09687 100644
--- a/src/dzeio/Box/BoxWrapper/BoxWrapper.module.styl
+++ b/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
diff --git a/src/dzeio/Box/BoxBody/BoxBody.module.styl b/src/dzeio/Box/BoxBody/BoxBody.module.styl
deleted file mode 100644
index a01de52..0000000
--- a/src/dzeio/Box/BoxBody/BoxBody.module.styl
+++ /dev/null
@@ -1,2 +0,0 @@
-.body
-	padding 0 16px 16px
diff --git a/src/dzeio/Box/BoxBody/index.tsx b/src/dzeio/Box/BoxBody/index.tsx
deleted file mode 100644
index d2d17ae..0000000
--- a/src/dzeio/Box/BoxBody/index.tsx
+++ /dev/null
@@ -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>
-	)
-
-}
diff --git a/src/dzeio/Box/BoxHeader/index.tsx b/src/dzeio/Box/BoxHeader/index.tsx
index 5fffffe..d4ac23f 100644
--- a/src/dzeio/Box/BoxHeader/index.tsx
+++ b/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>
-					<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>
+				<Row nomargin justify="space-between">
 					<Col>
-						<Row justify="flex-end">
-							{this.props.children}
-						</Row>
+						{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>
 		</>
diff --git a/src/dzeio/Box/BoxWrapper/index.tsx b/src/dzeio/Box/BoxWrapper/index.tsx
deleted file mode 100644
index 3573177..0000000
--- a/src/dzeio/Box/BoxWrapper/index.tsx
+++ /dev/null
@@ -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
-*/
diff --git a/src/dzeio/Box/index.tsx b/src/dzeio/Box/index.tsx
index 3e7ae0e..01e6bdb 100644
--- a/src/dzeio/Box/index.tsx
+++ b/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
-}