From 47399da4e0ec717fcd41024feeb2dca7db5fae91 Mon Sep 17 00:00:00 2001
From: Avior <github@avior.me>
Date: Tue, 5 Apr 2022 11:52:15 +0200
Subject: [PATCH] feat: Add sidePadding parameter to BoxHeader

Signed-off-by: Avior <github@avior.me>
---
 src/Box/Box.module.styl | 3 +++
 src/Box/Box.stories.tsx | 6 +++++-
 src/Box/BoxHeader.tsx   | 4 +++-
 src/Box/index.tsx       | 2 +-
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/Box/Box.module.styl b/src/Box/Box.module.styl
index fb0f670..65ca148 100644
--- a/src/Box/Box.module.styl
+++ b/src/Box/Box.module.styl
@@ -11,6 +11,9 @@
 .header
 	padding 16px
 
+	&.noSidePadding
+		padding 16px 0
+
 	+ .body
 		padding-top 0
 
diff --git a/src/Box/Box.stories.tsx b/src/Box/Box.stories.tsx
index 8b453be..5281e44 100644
--- a/src/Box/Box.stories.tsx
+++ b/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>
 )
diff --git a/src/Box/BoxHeader.tsx b/src/Box/BoxHeader.tsx
index d07a417..e86b969 100644
--- a/src/Box/BoxHeader.tsx
+++ b/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">
diff --git a/src/Box/index.tsx b/src/Box/index.tsx
index 7c57f69..b65f398 100644
--- a/src/Box/index.tsx
+++ b/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])}>