fix(striker-ui): allow BodyText to inherit colour

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<BodyTextOptionalProps> = {
+  inheritColour: false,
   inverted: false,
   monospaced: false,
   selected: true,
@@ -25,6 +27,7 @@ const BODY_TEXT_DEFAULT_PROPS: Required<BodyTextOptionalProps> = {
 };
 
 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,20 +67,30 @@ const buildBodyTextClasses = ({
 const BodyText: FC<BodyTextProps> = ({
   children,
   className,
-  inverted = BODY_TEXT_DEFAULT_PROPS.inverted,
+  inheritColour: isInheritColour = BODY_TEXT_DEFAULT_PROPS.inheritColour,
-  monospaced = BODY_TEXT_DEFAULT_PROPS.monospaced,
+  inverted: isInvert = BODY_TEXT_DEFAULT_PROPS.inverted,
-  selected = BODY_TEXT_DEFAULT_PROPS.selected,
+  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 (
     <MUITypography
       {...{
-      className: `${buildBodyTextClasses({
+        className: `${baseClassName} ${className}`,
-        isInvert: inverted,
-        isMonospace: monospaced,
-        isSelect: selected,
-      })} ${className}`,
         variant: 'subtitle1',
         ...muiTypographyRestProps,
         sx: {
@@ -98,9 +115,10 @@ const BodyText: FC<BodyTextProps> = ({
         },
       }}
     >
-    {text ?? children}
+      {content}
     </MUITypography>
   );
+};
 
 BodyText.defaultProps = BODY_TEXT_DEFAULT_PROPS;