diff --git a/packages/ui/src/Text/index.tsx b/packages/ui/src/Text/index.tsx index 8083490dd8..dd9fc8db40 100644 --- a/packages/ui/src/Text/index.tsx +++ b/packages/ui/src/Text/index.tsx @@ -19,75 +19,84 @@ import { ReactNode } from 'react'; interface StyledProps { $truncate?: boolean; $color?: (color: DefaultTheme['color']) => string; + $align?: 'left' | 'center' | 'right'; + $decoration?: 'line-through' | 'underline'; + $transform?: 'uppercase' | 'lowercase' | 'capitalize'; + $break: false | 'word' | undefined; } -const maybeTruncate = css` +const textCss = css` ${props => props.$truncate && truncate} + ${props => props.$align && `text-align: ${props.$align};`} + ${props => props.$decoration && `text-decoration: ${props.$decoration};`} + ${props => props.$transform && `text-transform: ${props.$transform};`} + ${props => props.$break === false && `white-space: nowrap;`} + ${props => props.$break === 'word' && `word-break: break-word;`} `; const H1 = styled.h1` ${h1} - ${maybeTruncate} + ${textCss} `; const H2 = styled.h2` ${h2} - ${maybeTruncate} + ${textCss} `; const H3 = styled.h3` ${h3} - ${maybeTruncate} + ${textCss} `; const H4 = styled.h4` ${h4} - ${maybeTruncate} + ${textCss} `; const Xxl = styled.span` ${xxl} - ${maybeTruncate} + ${textCss} `; const Large = styled.span` ${large} - ${maybeTruncate} + ${textCss} `; const Body = styled.span` ${body} - ${maybeTruncate} + ${textCss} `; const Strong = styled.span` ${strong} - ${maybeTruncate} + ${textCss} `; const Detail = styled.span` ${detail} - ${maybeTruncate} + ${textCss} `; const Small = styled.span` ${small} - ${maybeTruncate} + ${textCss} `; const DetailTechnical = styled.span` ${detailTechnical} - ${maybeTruncate} + ${textCss} `; const Technical = styled.span` ${technical} - ${maybeTruncate} + ${textCss} `; const P = styled.p` ${body} - ${maybeTruncate} + ${textCss} margin-bottom: ${props => props.theme.lineHeight.textBase}; @@ -250,6 +259,22 @@ export type TextProps = TextType & { * the icon with. If left undefined, will default to the `text.primary` color. */ color?: (color: DefaultTheme['color']) => string; + /** + * The text alignment + */ + align?: 'left' | 'center' | 'right'; + /** + * The text decoration + */ + decoration?: 'line-through' | 'underline'; + /** + * The text transform + */ + transform?: 'uppercase' | 'lowercase' | 'capitalize'; + /** + * Controls how the text breaks. + */ + break?: false | 'word' | undefined; }; /** @@ -293,45 +318,60 @@ const omit = >( * * ``` */ -export const Text = ({ truncate, color, ...props }: TextProps) => { +export const Text = ({ + truncate, + color, + align, + decoration, + transform, + break: breakProp, + ...props +}: TextProps) => { + const styledProps = { + $truncate: truncate, + $color: color, + $align: align, + $decoration: decoration, + $transform: transform, + $break: breakProp, + }; + if (props.h1) { - return

; + return

; } if (props.h2) { - return

; + return

; } if (props.h3) { - return

; + return

; } if (props.h4) { - return

; + return

; } if (props.xxl) { - return ; + return ; } if (props.large) { - return ; + return ; } if (props.strong) { - return ; + return ; } if (props.detail) { - return ; + return ; } if (props.small) { - return ; + return ; } if (props.detailTechnical) { - return ( - - ); + return ; } if (props.technical) { - return ; + return ; } if (props.p) { - return

; + return

; } - return ; + return ; };