feat: Add sidePadding parameter to BoxHeader

Signed-off-by: Avior <github@avior.me>

src/Box/Box.module.styl

@@ -11,6 +11,9 @@
 .header
 	padding 16px
 
+	&.noSidePadding
+		padding 16px 0
+
 	+ .body
 		padding-top 0
 

src/Box/Box.stories.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import Component from '.'
 import Text from '../Text'
 import { Lightbulb } from 'lucide-react'
+import BoxHeader from './BoxHeader'
 
 export default {
 	title: 'DZEIO/Box',
@@ -22,5 +23,8 @@ export const Complete = (args: any) => (
 		icon={Lightbulb}
 		rightHeader={<Text>Test</Text>}
 		// {...args}
-	><Text>Test</Text></Component>
+	>
+		<Text>Test</Text>
+		<BoxHeader title="BoxHeader" />
+	</Component>
 )

src/Box/BoxHeader.tsx

@@ -5,10 +5,12 @@ import Row from '../Row'
 import Col from '../Col'
 import Text from '../Text'
 import { Icon } from '../interfaces'
+import { buildClassName } from '../Util'
 
 interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
 	title?: string
 	icon?: Icon
+	sidePadding?: boolean
 	children?: React.ReactNode
 }
 
@@ -19,7 +21,7 @@ interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElem
  */
 export default class BoxHeader extends React.Component<Props> {
 	public render = () => (
-		<div className={css.header}>
+		<div className={buildClassName(css.header, [css.noSidePadding, !this.props.sidePadding])}>
 			<Row justify="space-between">
 				<Col>
 					<Text className={css.title} weight="bold">

src/Box/index.tsx

@@ -30,7 +30,7 @@ export default class Box extends React.Component<Props> {
 			className={buildClassName(css.box, this.props?.className, [css.noBottomBorder, this.props.noBottomBorder])}
 		>
 			{(this.props.rightHeader || this.props.title || this.props.icon) && (
-				<BoxHeader title={this.props.title} icon={this.props.icon}>{this.props.rightHeader}</BoxHeader>
+					<BoxHeader title={this.props.title} sidePadding icon={this.props.icon}>{this.props.rightHeader}</BoxHeader>
 			)}
 			{this.props.children && (
 				<div className={buildClassName([css.body, !this.props.noPadding])}>