diff options
Diffstat (limited to 'packages/website/ts/@next/components/text.tsx')
| -rw-r--r-- | packages/website/ts/@next/components/text.tsx | 8 |
1 files changed, 7 insertions, 1 deletions
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 54d4764f3..c29277c16 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -10,7 +10,9 @@ interface BaseTextInterface extends PaddingInterface { interface HeadingProps extends BaseTextInterface { asElement?: 'h1'| 'h2'| 'h3'| 'h4'; maxWidth?: string; + fontWeight?: string; isCentered?: boolean; + isFlex?: boolean; isNoMargin?: boolean; isMuted?: boolean | number; marginBottom?: string; @@ -26,6 +28,9 @@ interface ParagraphProps extends BaseTextInterface { const StyledHeading = styled.h1<HeadingProps>` max-width: ${props => props.maxWidth}; color: ${props => props.color || props.theme.textColor}; + display: ${props => props.isFlex && `inline-flex`}; + align-items: center; + justify-content: ${props => props.isFlex && `space-between`}; font-size: ${props => isNaN(props.size) ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`}; line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`}; text-align: ${props => props.isCentered && 'center'}; @@ -34,7 +39,8 @@ const StyledHeading = styled.h1<HeadingProps>` margin-right: ${props => props.isCentered && 'auto'}; margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')}; opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted}; - font-weight: ${props => ['h4'].includes(props.asElement) ? 400 : 300}; + font-weight: ${props => props.fontWeight ? props.fontWeight : (['h4'].includes(props.asElement) ? 400 : 300)}; + width: ${props => props.isFlex && `100%`}; `; export const Heading: React.StatelessComponent<HeadingProps> = props => { |