| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import { colord, AnyColor } from 'colord'; |
| 3 |
import { Attributes } from '../../../types'; |
| 4 |
|
| 5 |
export const BlockLeft = ({ |
| 6 |
bgColor, |
| 7 |
textColor, |
| 8 |
seeMoreString, |
| 9 |
disablePadding, |
| 10 |
context, |
| 11 |
footerType, |
| 12 |
}: Partial<Attributes> & { context?: string }) => { |
| 13 |
const backgroundColor = colord(bgColor as AnyColor).toHex(); |
| 14 |
const textC = colord(textColor as AnyColor); |
| 15 |
const color = textC.isDark() |
| 16 |
? textC.lighten(0.05).toHex() |
| 17 |
: textC.darken(0.05).toHex(); |
| 18 |
const hasFooter = footerType !== 'none'; |
| 19 |
const inEditor = context === 'editor'; |
| 20 |
return ( |
| 21 |
<div |
| 22 |
className="cbp-see-more-container" |
| 23 |
style={{ |
| 24 |
display: context === 'front' ? 'none' : 'flex', |
| 25 |
flexDirection: 'column', |
| 26 |
alignItems: 'flex-start', |
| 27 |
width: '100%', |
| 28 |
backgroundColor: 'transparent', |
| 29 |
fontSize: '12px', |
| 30 |
lineHeight: '1', |
| 31 |
position: 'relative', |
| 32 |
marginBottom: hasFooter || inEditor ? 0 : '-16px', |
| 33 |
height: hasFooter && !inEditor ? '16px' : '32px', |
| 34 |
}}> |
| 35 |
{/* span is used to avoid theme button styling */} |
| 36 |
<span |
| 37 |
role={inEditor ? 'presentation' : 'button'} |
| 38 |
tabIndex={inEditor ? -1 : 0} |
| 39 |
className="cbp-see-more-simple-btn cbp-see-more-simple-btn-hover" |
| 40 |
style={{ |
| 41 |
color, |
| 42 |
backgroundColor, |
| 43 |
padding: disablePadding ? '10px 0 0' : '10px 16px', |
| 44 |
cursor: 'default', |
| 45 |
}}> |
| 46 |
{seeMoreString || __('Expand', 'code-block-pro')} |
| 47 |
</span> |
| 48 |
</div> |
| 49 |
); |
| 50 |
}; |
| 51 |
|
