TextInput: add optional labelColor property to control label color (#463

)

src/components/Input/InputWrapper.tsx

@@ -121,9 +121,16 @@ const Wrapper = styled.div<{
   `}
 `;
 
+const StyledLabel = styled(Label)<{ $labelColor?: string }>`
+  ${({ $labelColor }) => `
+    ${$labelColor ? `color: ${$labelColor};` : ""}
+  `}
+`;
+
 export interface WrapperProps {
   id: string;
   label?: ReactNode;
+  labelColor?: string;
   error?: ReactNode;
   disabled?: boolean;
   children: ReactNode;
@@ -135,6 +142,7 @@ export interface WrapperProps {
 export const InputWrapper = ({
   id,
   label = "",
+  labelColor,
   error,
   disabled,
   children,
@@ -160,13 +168,14 @@ export const InputWrapper = ({
         {!!error && error !== true && <Error>{error}</Error>}
       </FormElementContainer>
       {label && (
-        <Label
+        <StyledLabel
           htmlFor={id}
           disabled={disabled}
           error={!!error}
+          $labelColor={labelColor}
         >
           {label}
-        </Label>
+        </StyledLabel>
       )}
     </FormRoot>
   );

src/components/Input/TextField.stories.tsx

@@ -54,3 +54,14 @@ export const Playground = {
     placeholder: "Placeholder",
   },
 };
+
+export const LabelColor = {
+  args: {
+    label: "Label",
+    labelColor: "rgb(193, 0, 0)",
+    clear: false,
+    type: "text",
+    disabled: false,
+    placeholder: "Placeholder",
+  },
+};

src/components/Input/TextField.test.tsx

@@ -0,0 +1,60 @@
+import { TextField } from "@/components/Input/TextField";
+import { renderCUI } from "@/utils/test-utils";
+import { useState } from "react";
+
+const TextFieldWrapper = ({
+  initialText = "",
+  label,
+  labelColor,
+}: {
+  initialText?: string;
+  label: string;
+  labelColor?: string;
+}) => {
+  const [text, setText] = useState<string>(initialText);
+
+  console.log(text);
+  return (
+    <TextField
+      label={label}
+      labelColor={labelColor}
+      onChange={setText}
+      value={text}
+    />
+  );
+};
+
+describe("TextField", () => {
+  describe("label color", () => {
+    it("is the default color when labelColor is not set", () => {
+      const label = "Hello there!";
+      const text = "General Kenobi";
+
+      const { getByText } = renderCUI(
+        <TextFieldWrapper
+          label={label}
+          initialText={text}
+        />
+      );
+
+      const labelElement = getByText(label);
+      expect(labelElement).toBeInTheDocument();
+      expect(labelElement).toHaveStyle("color: rgb(179, 182, 189)");
+    });
+
+    it("is the color of the passed in labelColor", () => {
+      const label = "Hello there!";
+
+      const { getByText } = renderCUI(
+        <TextFieldWrapper
+          label={label}
+          labelColor="#FF0000"
+        />
+      );
+
+      const labelElement = getByText(label);
+      expect(labelElement).toBeInTheDocument();
+      expect(labelElement).toHaveStyle("color: #FF0000");
+    });
+  });
+});

src/components/Input/TextField.tsx

@@ -11,6 +11,7 @@ export interface TextFieldProps
     > {
   type?: "text" | "email" | "tel" | "url";
   loading?: boolean;
+  labelColor?: string;
   value?: string;
   clear?: boolean;
   onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;
@@ -25,6 +26,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       type,
       disabled,
       label,
+      labelColor,
       error,
       id,
       loading,
@@ -50,6 +52,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         disabled={disabled}
         id={id ?? defaultId}
         label={label}
+        labelColor={labelColor}
         error={error}
         orientation={orientation}
         dir={dir}