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={Test}
// {...args}
- >Test
+ >
+ Test
+
+
)
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, HTMLDivElement> {
title?: string
icon?: Icon
+ sidePadding?: boolean
children?: React.ReactNode
}
@@ -19,7 +21,7 @@ interface Props extends React.DetailedHTMLProps {
public render = () => (
-
+
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 {
className={buildClassName(css.box, this.props?.className, [css.noBottomBorder, this.props.noBottomBorder])}
>
{(this.props.rightHeader || this.props.title || this.props.icon) && (
- {this.props.rightHeader}
+ {this.props.rightHeader}
)}
{this.props.children && (