diff --git a/striker-ui/components/Text/BodyText.tsx b/striker-ui/components/Text/BodyText.tsx index bef61dcb..8fef39e9 100644 --- a/striker-ui/components/Text/BodyText.tsx +++ b/striker-ui/components/Text/BodyText.tsx @@ -1,4 +1,4 @@ -import { FC, ReactNode } from 'react'; +import { FC, ReactNode, useMemo } from 'react'; import { Typography as MUITypography, TypographyProps as MUITypographyProps, @@ -7,6 +7,7 @@ import { import { BLACK, TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME'; type BodyTextOptionalProps = { + inheritColour?: boolean; inverted?: boolean; monospaced?: boolean; selected?: boolean; @@ -18,6 +19,7 @@ type BodyTextProps = MUITypographyProps & BodyTextOptionalProps; const BODY_TEXT_CLASS_PREFIX = 'BodyText'; const BODY_TEXT_DEFAULT_PROPS: Required = { + inheritColour: false, inverted: false, monospaced: false, selected: true, @@ -25,6 +27,7 @@ const BODY_TEXT_DEFAULT_PROPS: Required = { }; const BODY_TEXT_CLASSES = { + inheritColour: `${BODY_TEXT_CLASS_PREFIX}-inherit-colour`, inverted: `${BODY_TEXT_CLASS_PREFIX}-inverted`, monospaced: `${BODY_TEXT_CLASS_PREFIX}-monospaced`, selected: `${BODY_TEXT_CLASS_PREFIX}-selected`, @@ -32,17 +35,21 @@ const BODY_TEXT_CLASSES = { }; const buildBodyTextClasses = ({ + isInheritColour, isInvert, isMonospace, isSelect, }: { + isInheritColour?: boolean; isInvert?: boolean; isMonospace?: boolean; isSelect?: boolean; }) => { const bodyTextClasses: string[] = []; - if (isInvert) { + if (isInheritColour) { + bodyTextClasses.push(BODY_TEXT_CLASSES.inheritColour); + } else if (isInvert) { bodyTextClasses.push(BODY_TEXT_CLASSES.inverted); } else if (isSelect) { bodyTextClasses.push(BODY_TEXT_CLASSES.selected); @@ -60,47 +67,58 @@ const buildBodyTextClasses = ({ const BodyText: FC = ({ children, className, - inverted = BODY_TEXT_DEFAULT_PROPS.inverted, - monospaced = BODY_TEXT_DEFAULT_PROPS.monospaced, - selected = BODY_TEXT_DEFAULT_PROPS.selected, + inheritColour: isInheritColour = BODY_TEXT_DEFAULT_PROPS.inheritColour, + inverted: isInvert = BODY_TEXT_DEFAULT_PROPS.inverted, + monospaced: isMonospace = BODY_TEXT_DEFAULT_PROPS.monospaced, + selected: isSelect = BODY_TEXT_DEFAULT_PROPS.selected, sx, text = BODY_TEXT_DEFAULT_PROPS.text, ...muiTypographyRestProps -}) => ( - { + const baseClassName = useMemo( + () => + buildBodyTextClasses({ + isInheritColour, + isInvert, + isMonospace, + isSelect, + }), + [isInheritColour, isInvert, isMonospace, isSelect], + ); + const content = useMemo(() => text ?? children, [children, text]); + + return ( + - {text ?? children} - -); + }} + > + {content} + + ); +}; BodyText.defaultProps = BODY_TEXT_DEFAULT_PROPS;