fix(Card): Apply alignment as text-alignment and allow text color to be set

Author: GooBall

src/cards/Card.tsx

@@ -33,7 +33,15 @@ class Card extends React.Component<CardProps> {
   };
 
   public render() {
-    const { backgroundColor, children, headerColor, onClick, overlayContent, title } = this.props;
+    const {
+      backgroundColor,
+      children,
+      headerColor,
+      onClick,
+      overlayContent,
+      textColor,
+      title,
+    } = this.props;
 
     const actionOpen = (e: React.MouseEvent<HTMLElement>) => {
       e.stopPropagation();
@@ -72,6 +80,7 @@ class Card extends React.Component<CardProps> {
       <BaseCard
         role={onClick !== undefined ? 'button' : ''}
         backgroundColor={backgroundColor}
+        textColor={textColor}
         onClick={onClick}
       >
         {overlayContent !== undefined ? renderOverlay : null}

src/cards/docs/DocsCardPreview.tsx

@@ -50,10 +50,13 @@ const DocsCardOnClick = () => {
 
 const DocsCardHeroText = () => {
   return (
-    <Card active backgroundColor={({ theme }) => theme.color.Disabled}>
+    <Card
+      active
+      backgroundColor={({ theme }) => theme.color.Disabled}
+      textColor={({ theme }) => theme.color.DisabledText}
+    >
       <CardHeroText>
         <H2
-          textColor={({ theme }) => theme.color.DisabledText}
           size={Size.Large}
           alignment={Align.Center}
         >

src/cards/docs/DocsCardProps.tsx

@@ -14,6 +14,12 @@ export default () => {
           <TableCell>False</TableCell>
           <TableCell>Use for when a Card needs to be shown as active/selected</TableCell>
         </TableRow>
+        <TableRow>
+          <TableCell>textColor</TableCell>
+          <TableCell>string | theme</TableCell>
+          <TableCell>Undefined</TableCell>
+          <TableCell>Sets the text color of the card</TableCell>
+        </TableRow>
         <TableRow>
           <TableCell>backgroundColor</TableCell>
           <TableCell>string | theme</TableCell>

src/cards/utils/BaseCard.ts

@@ -8,7 +8,10 @@ const BaseCard = styled.div<CardProps>`
   box-shadow: ${({ onClick, theme }) =>
     onClick !== undefined ? theme.shadow.Medium : theme.shadow.Small};
   box-sizing: border-box;
-  color: ${({ backgroundColor, theme }) => {
+  color: ${({ backgroundColor, textColor, theme }) => {
+    if (textColor !== undefined) {
+      return textColor;
+    }
     if (backgroundColor === undefined) {
       return theme.color.BodyText;
     }

src/cards/utils/CardProps.ts

@@ -8,6 +8,9 @@ export default interface CardProps {
   // Sets the background color of the card
   readonly backgroundColor?: ((props: { readonly theme: ThemeProvider }) => string) | string;
 
+  // Sets the main text color of the card
+  readonly textColor?: ((props: { readonly theme: ThemeProvider }) => string) | string;
+
   // Set background color of header/title
   readonly headerColor?: ((props: { readonly theme: ThemeProvider }) => string) | string;
 

src/text/utils/textStyles.ts

@@ -1,7 +1,7 @@
 import { css } from '../../utils/mural-styled-components';
 
 import ThemeProvider from '../../themes/themeProps';
-import { Align } from '../../utils/AlignmentProps';
+import { Align, getTextAlignment } from '../../utils/AlignmentProps';
 import { getSize, Size } from '../../utils/sizes';
 
 export interface TextProps {
@@ -15,11 +15,12 @@ export interface TextProps {
 }
 
 const textStyle = css<TextProps>`
-  color: ${(props) => props.textColor !== undefined ? props.textColor : props.theme.color.BodyText};
+  color: ${(props) => props.textColor !== undefined ? props.textColor : 'inherit'};
   font-style: ${(props) => props.italic !== undefined ? 'italic' : 'normal'};
   font-weight: ${(props) => props.bold !== undefined ? '700' : '300'};
   margin: 0 0 ${(props) => getSize(props.spacing, Size.Default)};
   width: 100%;
+  ${(props) => props.alignment !== undefined ? getTextAlignment(props.alignment) : null}
 `;
 
 export default textStyle;

src/utils/AlignmentProps.tsx

@@ -7,3 +7,17 @@ export enum Align {
 export default interface AlignmentProps {
   readonly alignment?: Align;
 }
+
+export const getTextAlignment = (align: Align) => {
+  switch (align) {
+    case Align.Left:
+    default:
+      return 'text-align: left';
+
+    case Align.Center:
+      return 'text-align: center';
+
+    case Align.Right:
+      return 'text-align: right';
+  }
+};