fix(striker-ui): add inline type SensitiveText and BodyText

striker-ui/components/Text/BodyText.tsx

@@ -8,6 +8,7 @@ import { BLACK, TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME';
 
 type BodyTextOptionalProps = {
   inheritColour?: boolean;
+  inline?: boolean;
   inverted?: boolean;
   monospaced?: boolean;
   selected?: boolean;
@@ -20,6 +21,7 @@ const BODY_TEXT_CLASS_PREFIX = 'BodyText';
 
 const BODY_TEXT_DEFAULT_PROPS: Required<BodyTextOptionalProps> = {
   inheritColour: false,
+  inline: false,
   inverted: false,
   monospaced: false,
   selected: true,
@@ -68,6 +70,7 @@ const BodyText: FC<BodyTextProps> = ({
   children,
   className,
   inheritColour: isInheritColour = BODY_TEXT_DEFAULT_PROPS.inheritColour,
+  inline: isInline = BODY_TEXT_DEFAULT_PROPS.inline,
   inverted: isInvert = BODY_TEXT_DEFAULT_PROPS.inverted,
   monospaced: isMonospace = BODY_TEXT_DEFAULT_PROPS.monospaced,
   selected: isSelect = BODY_TEXT_DEFAULT_PROPS.selected,
@@ -75,6 +78,11 @@ const BodyText: FC<BodyTextProps> = ({
   text = BODY_TEXT_DEFAULT_PROPS.text,
   ...muiTypographyRestProps
 }) => {
+  const sxDisplay = useMemo<string | undefined>(
+    () => (isInline ? 'inline' : undefined),
+    [isInline],
+  );
+
   const baseClassName = useMemo(
     () =>
       buildBodyTextClasses({
@@ -89,11 +97,12 @@ const BodyText: FC<BodyTextProps> = ({
 
   return (
     <MUITypography
-      {...{
-        className: `${baseClassName} ${className}`,
-        variant: 'subtitle1',
-        ...muiTypographyRestProps,
-        sx: {
+      className={`${baseClassName} ${className}`}
+      variant="subtitle1"
+      {...muiTypographyRestProps}
+      sx={{
+        display: sxDisplay,
+
         [`&.${BODY_TEXT_CLASSES.inverted}`]: {
           color: BLACK,
         },
@@ -112,7 +121,6 @@ const BodyText: FC<BodyTextProps> = ({
         },
 
         ...sx,
-        },
       }}
     >
       {content}

striker-ui/components/Text/SensitiveText.tsx

@@ -1,18 +1,51 @@
-import { createElement, FC, ReactNode, useMemo, useState } from 'react';
+import { Button, styled } from '@mui/material';
+import {
+  createElement,
+  FC,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+
+import { BORDER_RADIUS, EERIE_BLACK } from '../../lib/consts/DEFAULT_THEME';
 
 import BodyText from './BodyText';
 import FlexBox from '../FlexBox';
 import IconButton from '../IconButton';
 import MonoText from './MonoText';
 
+const InlineButton = styled(Button)({
+  backgroundColor: EERIE_BLACK,
+  borderRadius: BORDER_RADIUS,
+  minWidth: 'initial',
+  padding: '0 .6em',
+  textTransform: 'none',
+
+  ':hover': {
+    backgroundColor: `${EERIE_BLACK}F0`,
+  },
+});
+
 const SensitiveText: FC<SensitiveTextProps> = ({
   children,
+  inline: isInline = false,
   monospaced: isMonospaced = false,
   revealInitially: isRevealInitially = false,
   textProps,
 }) => {
   const [isReveal, setIsReveal] = useState<boolean>(isRevealInitially);
 
+  const clickEventHandler = useCallback(() => {
+    setIsReveal((previous) => !previous);
+  }, []);
+
+  const textSxLineHeight = useMemo<number | string | undefined>(
+    () => (isInline ? undefined : 2.8),
+    [isInline],
+  );
+
   const textElementType = useMemo(
     () => (isMonospaced ? MonoText : BodyText),
     [isMonospaced],
@@ -27,7 +60,7 @@ const SensitiveText: FC<SensitiveTextProps> = ({
               textElementType,
               {
                 sx: {
-                  lineHeight: 2.8,
+                  lineHeight: textSxLineHeight,
                   maxWidth: '20em',
                   overflowY: 'scroll',
                   whiteSpace: 'nowrap',
@@ -38,27 +71,43 @@ const SensitiveText: FC<SensitiveTextProps> = ({
             )
           : children;
     } else {
-      content = createElement(textElementType, textProps, '*****');
+      content = createElement(
+        textElementType,
+        {
+          sx: {
+            lineHeight: textSxLineHeight,
+          },
+          ...textProps,
+        },
+        '*****',
+      );
     }
 
     return content;
-  }, [children, isReveal, textElementType, textProps]);
-
-  return (
+  }, [children, isReveal, textElementType, textProps, textSxLineHeight]);
+  const rootElement = useMemo<ReactElement>(
+    () =>
+      isInline ? (
+        <InlineButton onClick={clickEventHandler}>
+          {contentElement}
+        </InlineButton>
+      ) : (
         <FlexBox row spacing=".5em">
           {contentElement}
           <IconButton
             edge="end"
             mapPreset="visibility"
-        onClick={() => {
-          setIsReveal((previous) => !previous);
-        }}
+            onClick={clickEventHandler}
             state={String(isReveal)}
             sx={{ marginRight: '-.2em', padding: '.2em' }}
             variant="normal"
           />
         </FlexBox>
+      ),
+    [clickEventHandler, contentElement, isInline, isReveal],
   );
+
+  return rootElement;
 };
 
 export default SensitiveText;

striker-ui/lib/consts/DEFAULT_THEME.ts

@@ -13,6 +13,7 @@ export const DIVIDER = '#888';
 export const SELECTED_ANVIL = '#00ff00';
 export const DISABLED = '#AAA';
 export const BLACK = '#343434';
+export const EERIE_BLACK = '#1F1F1F';
 // TODO: remove when old icons are completely replaced.
 export const OLD_ICON = '#9da2a7';
 

striker-ui/types/SensitiveText.d.ts

@@ -1,4 +1,5 @@
 type SensitiveTextOptionalProps = {
+  inline?: boolean;
   monospaced?: boolean;
   revealInitially?: boolean;
   textProps?: import('../components/Text').BodyTextProps;