Progress
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import Block from '../block'
|
||||
import Heading from '../heading'
|
||||
import Button from '../button'
|
||||
import Text from '../text'
|
||||
@@ -31,68 +32,70 @@ export default class PanelLayout extends PureComponent {
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<aside className={[_s.default, _s.backgroundColorPrimary, _s.overflowHidden, _s.radiusSmall, _s.marginBottom15PX, _s.borderColorSecondary, _s.border1PX].join(' ')}>
|
||||
{
|
||||
(title || subtitle) &&
|
||||
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
|
||||
<Heading size='h3'>
|
||||
{title}
|
||||
</Heading>
|
||||
<aside className={[_s.default, _s.marginBottom15PX].join(' ')}>
|
||||
<Block>
|
||||
{
|
||||
(title || subtitle) &&
|
||||
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
|
||||
<Heading size='h3'>
|
||||
{title}
|
||||
</Heading>
|
||||
{
|
||||
(!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
|
||||
<div className={[_s.default, _s.marginLeftAuto].join(' ')}>
|
||||
<Button
|
||||
text
|
||||
backgroundColor='none'
|
||||
color='brand'
|
||||
to={headerButtonTo}
|
||||
onClick={headerButtonAction}
|
||||
>
|
||||
<Text size='small' color='inherit' weight='bold'>
|
||||
{headerButtonTitle}
|
||||
</Text>
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
{
|
||||
(!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
|
||||
<div className={[_s.default, _s.marginLeftAuto].join(' ')}>
|
||||
<Button
|
||||
text
|
||||
backgroundColor='none'
|
||||
color='brand'
|
||||
to={headerButtonTo}
|
||||
onClick={headerButtonAction}
|
||||
>
|
||||
<Text size='small' color='inherit' weight='bold'>
|
||||
{headerButtonTitle}
|
||||
</Text>
|
||||
</Button>
|
||||
</div>
|
||||
subtitle &&
|
||||
<Heading size='h4'>
|
||||
{subtitle}
|
||||
</Heading>
|
||||
}
|
||||
</div>
|
||||
{
|
||||
subtitle &&
|
||||
<Heading size='h4'>
|
||||
{subtitle}
|
||||
</Heading>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
{
|
||||
!noPadding &&
|
||||
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
|
||||
{children}
|
||||
</div>
|
||||
}
|
||||
{
|
||||
!noPadding &&
|
||||
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
|
||||
{children}
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
noPadding && children
|
||||
}
|
||||
{
|
||||
noPadding && children
|
||||
}
|
||||
|
||||
{
|
||||
(!!footerButtonTitle && (!!footerButtonAction || !!footerButtonTo)) &&
|
||||
<div className={[_s.default, _s.borderColorSecondary, _s.borderTop1PX].join(' ')}>
|
||||
<Button
|
||||
text
|
||||
color='none'
|
||||
backgroundColor='none'
|
||||
to={footerButtonTo}
|
||||
onClick={footerButtonAction}
|
||||
className={[_s.paddingHorizontal15PX, _s.paddingVertical15PX, _s.backgroundSubtle_onHover].join(' ')}
|
||||
>
|
||||
<Text color='brand' align='left' size='medium'>
|
||||
{footerButtonTitle}
|
||||
</Text>
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
(!!footerButtonTitle && (!!footerButtonAction || !!footerButtonTo)) &&
|
||||
<div className={[_s.default, _s.borderColorSecondary, _s.borderTop1PX].join(' ')}>
|
||||
<Button
|
||||
text
|
||||
color='none'
|
||||
backgroundColor='none'
|
||||
to={footerButtonTo}
|
||||
onClick={footerButtonAction}
|
||||
className={[_s.paddingHorizontal15PX, _s.paddingVertical15PX, _s.backgroundSubtle_onHover].join(' ')}
|
||||
>
|
||||
<Text color='brand' align='left' size='medium'>
|
||||
{footerButtonTitle}
|
||||
</Text>
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
</Block>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user