diff --git a/src/dzeio/Box/BoxHeader.stories.tsx b/src/dzeio/Box/BoxHeader.stories.tsx new file mode 100644 index 0000000..4934686 --- /dev/null +++ b/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) => ( + +) + +export const Complete = (args: any) => ( + Test +) diff --git a/src/dzeio/Box/BoxHeader.tsx b/src/dzeio/Box/BoxHeader.tsx new file mode 100644 index 0000000..9a5f9bc --- /dev/null +++ b/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, HTMLDivElement> { + title?: string + icon?: Icon + children?: React.ReactNode +} + +export default class BoxHeader extends React.Component { + public render = () => ( +
+ + + + {this.props.icon && ( + + + + )} + {this.props.title ? this.props.title : undefined} + + + {this.props.children && ( + + {this.props.children} + + )} + +
+ ) +} diff --git a/src/dzeio/Box/index.tsx b/src/dzeio/Box/index.tsx index 712fe31..f9e7af7 100644 --- a/src/dzeio/Box/index.tsx +++ b/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, HTMLDivElement> { noPadding?: boolean @@ -20,29 +19,11 @@ interface Props extends React.DetailedHTMLProps { public render = () => (
>(this.props, 'title', 'icon', 'rightHeader', 'noPadding')} className={buildClassName(css.box, this.props?.className)} > {(this.props.rightHeader || this.props.title || this.props.icon) && ( -
- - - - {this.props.icon && ( - - - - )} - {this.props.title ? this.props.title : undefined} - - - {this.props.rightHeader && ( - - {this.props.rightHeader} - - )} - -
+ {this.props.rightHeader} )} {this.props.children && (
diff --git a/src/dzeio/Footer/index.tsx b/src/dzeio/Footer/index.tsx index fab640b..9adbd8f 100644 --- a/src/dzeio/Footer/index.tsx +++ b/src/dzeio/Footer/index.tsx @@ -26,7 +26,7 @@ export default class Footer extends React.Component { public render = () => (
- + {this.props.text ? ( {this.props.text} diff --git a/src/dzeio/Navbar/index.tsx b/src/dzeio/Navbar/index.tsx index d366007..2c4ca0e 100644 --- a/src/dzeio/Navbar/index.tsx +++ b/src/dzeio/Navbar/index.tsx @@ -225,7 +225,7 @@ export default class Navbar extends React.Component {
- + {this.props.user.menu?.informations && ( {this.props.user.menu?.informations} )} diff --git a/src/dzeio/Popup/index.tsx b/src/dzeio/Popup/index.tsx index e33d4e9..1a95ba8 100644 --- a/src/dzeio/Popup/index.tsx +++ b/src/dzeio/Popup/index.tsx @@ -15,7 +15,7 @@ interface Props { export default class Popup extends React.Component { public render = () => ( - + ) => void } @@ -28,8 +27,7 @@ export default class Row extends React.Component { [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} > diff --git a/src/index.ts b/src/index.ts index 084633f..941137f 100644 --- a/src/index.ts +++ b/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,