Updated Box to be a single component

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

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
-					title={this.props.title}
-					titleColSize={this.props.titleColSize}
-					subtitle={this.props.subtitle}
-					titleClassName={this.props.titleClassName}
-				>
-					{this.props.headerButtons}
-				</BoxHeader>
+				<div 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.headerButtons}
+								</Row>
+							</Col>
+						)}
+					</Row>
+				</div>
 			)}
 			{this.props.children && (
 				<div className={buildClassName([css.body, !this.props.noPadding])}>

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> {