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,47 +67,58 @@ 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
-}) => (
+}) => {
-  <MUITypography
+  const baseClassName = useMemo(
-    {...{
+    () =>
-      className: `${buildBodyTextClasses({
+      buildBodyTextClasses({
-        isInvert: inverted,
+        isInheritColour,
-        isMonospace: monospaced,
+        isInvert,
-        isSelect: selected,
+        isMonospace,
-      })} ${className}`,
+        isSelect,
-      variant: 'subtitle1',
+      }),
-      ...muiTypographyRestProps,
+    [isInheritColour, isInvert, isMonospace, isSelect],
-      sx: {
+  );
-        [`&.${BODY_TEXT_CLASSES.inverted}`]: {
+  const content = useMemo(() => text ?? children, [children, text]);
-          color: BLACK,
+
-        },
+  return (
-
+    <MUITypography
-        [`&.${BODY_TEXT_CLASSES.monospaced}`]: {
+      {...{
-          fontFamily: 'Source Code Pro',
+        className: `${baseClassName} ${className}`,
-          fontWeight: 400,
+        variant: 'subtitle1',
-        },
+        ...muiTypographyRestProps,
-
+        sx: {
-        [`&.${BODY_TEXT_CLASSES.selected}`]: {
+          [`&.${BODY_TEXT_CLASSES.inverted}`]: {
-          color: TEXT,
+            color: BLACK,
-        },
+          },
-
+
-        [`&.${BODY_TEXT_CLASSES.unselected}`]: {
+          [`&.${BODY_TEXT_CLASSES.monospaced}`]: {
-          color: UNSELECTED,
+            fontFamily: 'Source Code Pro',
+            fontWeight: 400,
+          },
+
+          [`&.${BODY_TEXT_CLASSES.selected}`]: {
+            color: TEXT,
+          },
+
+          [`&.${BODY_TEXT_CLASSES.unselected}`]: {
+            color: UNSELECTED,
+          },
+
+          ...sx,
         },
-
+      }}
-        ...sx,
+    >
-      },
+      {content}
-    }}
+    </MUITypography>
-  >
+  );
-    {text ?? children}
+};
-  </MUITypography>
-);
 
 BodyText.defaultProps = BODY_TEXT_DEFAULT_PROPS;