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