diff --git a/src/dzeio/Box/Box.module.styl b/src/dzeio/Box/Box.module.styl index bc09687..233d11d 100644 --- a/src/dzeio/Box/Box.module.styl +++ b/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 diff --git a/src/dzeio/Box/BoxHeader/BoxHeader.module.styl b/src/dzeio/Box/BoxHeader/BoxHeader.module.styl deleted file mode 100644 index eb493d2..0000000 --- a/src/dzeio/Box/BoxHeader/BoxHeader.module.styl +++ /dev/null @@ -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 diff --git a/src/dzeio/Box/BoxHeader/index.tsx b/src/dzeio/Box/BoxHeader/index.tsx deleted file mode 100644 index d4ac23f..0000000 --- a/src/dzeio/Box/BoxHeader/index.tsx +++ /dev/null @@ -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 { - - public render = () => ( - <> -
- - - {this.props.title && ( - {this.props.title} - )} - {this.props.subtitle && ( - {this.props.subtitle} - )} - - {this.props.children && ( - - - {this.props.children} - - - )} - -
- - ) - -} - -/* -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 -*/ diff --git a/src/dzeio/Box/index.tsx b/src/dzeio/Box/index.tsx index 01e6bdb..72660f7 100644 --- a/src/dzeio/Box/index.tsx +++ b/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 { 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) && ( - - {this.props.headerButtons} - +
+ + + {this.props.title && ( + {this.props.title} + )} + {this.props.subtitle && ( + {this.props.subtitle} + )} + + {this.props.children && ( + + + {this.props.headerButtons} + + + )} + +
)} {this.props.children && (
diff --git a/src/dzeio/Popup/index.tsx b/src/dzeio/Popup/index.tsx index 61466b5..600bb68 100644 --- a/src/dzeio/Popup/index.tsx +++ b/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 {