From 2cd9de799f261d0f8f45774f57efcd2086f09f9e Mon Sep 17 00:00:00 2001
From: tejas nikam <tnikam2@gmail.com>
Date: Wed, 8 May 2024 19:38:22 +0530
Subject: [PATCH] adding new color property in Text and Link component (#2619)

Co-authored-by: Josh Wooding <12938082+joshwooding@users.noreply.github.com>
---
 packages/core/src/link/Link.tsx               |  2 ++
 packages/core/src/text/Text.css               |  4 ++++
 packages/core/src/text/Text.tsx               | 16 +++++++++++----
 .../core/stories/link/link.qa.stories.tsx     | 12 +++++------
 packages/core/stories/link/link.stories.tsx   | 10 +++++++++-
 .../core/stories/text/text.qa.stories.tsx     |  4 ++--
 packages/core/stories/text/text.stories.tsx   |  8 ++++++--
 .../contact-details/ContactPrimaryInfo.tsx    |  2 +-
 .../contact-details/ContactSecondaryInfo.tsx  |  2 +-
 .../contact-details/ContactTertiaryInfo.tsx   |  2 +-
 packages/lab/src/contact-details/types.ts     |  3 ++-
 .../stepped-tracker/StepLabel/StepLabel.tsx   |  6 +++---
 site/docs/components/link/examples.mdx        | 20 +++++++++++++++----
 site/docs/components/text/examples.mdx        | 14 ++++++++++++-
 site/src/examples/link/Color.tsx              | 17 ++++++++++++++++
 site/src/examples/link/index.ts               |  1 +
 site/src/examples/text/Color.tsx              | 10 ++++++++++
 site/src/examples/text/index.ts               |  1 +
 18 files changed, 107 insertions(+), 27 deletions(-)
 create mode 100644 site/src/examples/link/Color.tsx
 create mode 100644 site/src/examples/text/Color.tsx

diff --git a/packages/core/src/link/Link.tsx b/packages/core/src/link/Link.tsx
index 6d081074268..06bf030951b 100644
--- a/packages/core/src/link/Link.tsx
+++ b/packages/core/src/link/Link.tsx
@@ -27,6 +27,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
     className,
     children,
     variant = "primary",
+    color = "primary",
     target = "_self",
     ...rest
   },
@@ -47,6 +48,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
       ref={ref}
       target={target}
       variant={variant}
+      color={color}
       {...rest}
     >
       {children}
diff --git a/packages/core/src/text/Text.css b/packages/core/src/text/Text.css
index 1a599a39975..5f8a35440c5 100644
--- a/packages/core/src/text/Text.css
+++ b/packages/core/src/text/Text.css
@@ -1,3 +1,7 @@
+.saltText {
+  --text-color: currentColor;
+}
+
 /* Main css class. Style for body text */
 .saltText {
   color: var(--saltText-color, var(--text-color));
diff --git a/packages/core/src/text/Text.tsx b/packages/core/src/text/Text.tsx
index 15cbe5ef73f..fef7f6355b5 100644
--- a/packages/core/src/text/Text.tsx
+++ b/packages/core/src/text/Text.tsx
@@ -38,8 +38,13 @@ export type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<
       | "code";
     /**
      * Change text color palette
+     * @deprecated Use `color` instead
      */
     variant?: "primary" | "secondary";
+    /*
+     * The color of the text. Defaults to "primary".
+     */
+    color?: "inherit" | "primary" | "secondary";
   }
 >;
 
@@ -59,7 +64,8 @@ export const Text: TextComponent = forwardRef(
       maxRows,
       style,
       styleAs,
-      variant = "primary",
+      variant,
+      color: colorProp,
       ...restProps
     }: TextProps<T>,
     ref?: PolymorphicRef<T>
@@ -71,10 +77,12 @@ export const Text: TextComponent = forwardRef(
       window: targetWindow,
     });
 
-    const Component = as || "div";
+    const Component = as ?? "div";
 
     const textStyles = { "--text-max-rows": maxRows, ...style };
 
+    const color = variant ?? colorProp ?? "primary";
+
     return (
       <Component
         className={clsx(
@@ -82,8 +90,8 @@ export const Text: TextComponent = forwardRef(
           {
             [withBaseName("disabled")]: disabled,
             [withBaseName("lineClamp")]: maxRows,
-            [withBaseName(styleAs || "")]: styleAs,
-            [withBaseName(variant)]: variant,
+            [withBaseName(styleAs as string)]: styleAs,
+            [withBaseName(color)]: color !== "inherit",
           },
           className
         )}
diff --git a/packages/core/stories/link/link.qa.stories.tsx b/packages/core/stories/link/link.qa.stories.tsx
index 8438b2898a2..63951bbac29 100644
--- a/packages/core/stories/link/link.qa.stories.tsx
+++ b/packages/core/stories/link/link.qa.stories.tsx
@@ -23,14 +23,14 @@ export const AllVariantsGrid: StoryFn<QAContainerProps> = (props) => (
         <strong>Strong</strong> and <small>small</small> truncation example
       </Link>
     </div>
-    <Link href="https://www.google.com" variant="secondary">
+    <Link href="https://www.google.com" color="secondary">
       Secondary Link
     </Link>
-    <Link href="https://www.google.com" variant="secondary" target="_blank">
+    <Link href="https://www.google.com" color="secondary" target="_blank">
       Secondary Link target blank
     </Link>
     <div style={{ width: 150 }}>
-      <Link href="https://www.google.com" maxRows={1} variant="secondary">
+      <Link href="https://www.google.com" maxRows={1} color="secondary">
         <strong>Strong</strong> and <small>small</small> truncation example
       </Link>
     </div>
@@ -54,14 +54,14 @@ export const NoStyleInjectionGrid: StoryFn<QAContainerNoStyleInjectionProps> = (
         <strong>Strong</strong> and <small>small</small> truncation example
       </Link>
     </div>
-    <Link href="https://www.google.com" variant="secondary">
+    <Link href="https://www.google.com" color="secondary">
       Secondary Link
     </Link>
-    <Link href="https://www.google.com" variant="secondary" target="_blank">
+    <Link href="https://www.google.com" color="secondary" target="_blank">
       Secondary Link target blank
     </Link>
     <div style={{ width: 150 }}>
-      <Link href="https://www.google.com" maxRows={1} variant="secondary">
+      <Link href="https://www.google.com" maxRows={1} color="secondary">
         <strong>Strong</strong> and <small>small</small> truncation example
       </Link>
     </div>
diff --git a/packages/core/stories/link/link.stories.tsx b/packages/core/stories/link/link.stories.tsx
index da8e06742cc..49218d903e4 100644
--- a/packages/core/stories/link/link.stories.tsx
+++ b/packages/core/stories/link/link.stories.tsx
@@ -13,7 +13,15 @@ export const Primary: StoryFn<typeof Link> = () => {
 
 export const Secondary: StoryFn<typeof Link> = () => {
   return (
-    <Link variant="secondary" href="https://www.google.com">
+    <Link color="secondary" href="https://www.google.com">
+      Link to URL
+    </Link>
+  );
+};
+
+export const InheritColor: StoryFn<typeof Link> = () => {
+  return (
+    <Link color="inherit" href="https://www.google.com">
       Link to URL
     </Link>
   );
diff --git a/packages/core/stories/text/text.qa.stories.tsx b/packages/core/stories/text/text.qa.stories.tsx
index 9c0120513bf..1aed88db028 100644
--- a/packages/core/stories/text/text.qa.stories.tsx
+++ b/packages/core/stories/text/text.qa.stories.tsx
@@ -33,10 +33,10 @@ export const AllVariantsGrid: StoryFn<QAContainerProps> = (props) => (
     <Text disabled>
       Primary disabled <strong>strong</strong> and <small>small</small> text
     </Text>
-    <Text variant="secondary">
+    <Text color="secondary">
       Secondary <strong>strong</strong> and <small>small</small> text
     </Text>
-    <Text variant="secondary" disabled>
+    <Text color="secondary" disabled>
       Secondary disabled <strong>strong</strong> and <small>small</small> text
     </Text>
     <Display1>
diff --git a/packages/core/stories/text/text.stories.tsx b/packages/core/stories/text/text.stories.tsx
index 9a56c645dcf..9f4ff9e0162 100644
--- a/packages/core/stories/text/text.stories.tsx
+++ b/packages/core/stories/text/text.stories.tsx
@@ -31,14 +31,18 @@ export const Primary: StoryFn<typeof Text> = () => {
 };
 
 export const Secondary: StoryFn<typeof Text> = () => {
-  return <Text variant="secondary">This is a secondary text example</Text>;
+  return <Text color="secondary">This is a secondary text example</Text>;
+};
+
+export const InheritColor: StoryFn<typeof Text> = () => {
+  return <Text color="inherit">This is a secondary text example</Text>;
 };
 
 export const Disabled: StoryFn<typeof Text> = () => {
   return (
     <div>
       <Text disabled>This is a disabled primary text example</Text>
-      <Text variant="secondary" disabled>
+      <Text color="secondary" disabled>
         This is a disabled secondary text example
       </Text>
     </div>
diff --git a/packages/lab/src/contact-details/ContactPrimaryInfo.tsx b/packages/lab/src/contact-details/ContactPrimaryInfo.tsx
index b068d09d0be..49d5bf4bf47 100644
--- a/packages/lab/src/contact-details/ContactPrimaryInfo.tsx
+++ b/packages/lab/src/contact-details/ContactPrimaryInfo.tsx
@@ -6,7 +6,7 @@ import { useContactDetailsContext } from "./internal";
 const withBaseName = makePrefixer("saltContactPrimaryInfo");
 
 export interface ContactPrimaryInfoProps
-  extends HTMLAttributes<HTMLDivElement> {
+  extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
   text: string;
 }
 
diff --git a/packages/lab/src/contact-details/ContactSecondaryInfo.tsx b/packages/lab/src/contact-details/ContactSecondaryInfo.tsx
index 131c681d846..8b4027b88c8 100644
--- a/packages/lab/src/contact-details/ContactSecondaryInfo.tsx
+++ b/packages/lab/src/contact-details/ContactSecondaryInfo.tsx
@@ -8,7 +8,7 @@ import { ValueComponentProps } from "./types";
 const withBaseName = makePrefixer("saltContactSecondaryInfo");
 
 export interface ContactSecondaryInfoProps
-  extends HTMLAttributes<HTMLDivElement> {
+  extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
   icon?: ComponentType<IconProps>;
   text: string;
   ValueComponent?: ComponentType<ValueComponentProps>;
diff --git a/packages/lab/src/contact-details/ContactTertiaryInfo.tsx b/packages/lab/src/contact-details/ContactTertiaryInfo.tsx
index 33be19745a4..15393f23e54 100644
--- a/packages/lab/src/contact-details/ContactTertiaryInfo.tsx
+++ b/packages/lab/src/contact-details/ContactTertiaryInfo.tsx
@@ -7,7 +7,7 @@ import { useContactDetailsContext } from "./internal";
 const withBaseName = makePrefixer("saltContactTertiaryInfo");
 
 export interface ContactTertiaryInfoProps
-  extends HTMLAttributes<HTMLDivElement> {
+  extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
   icon?: ComponentType<IconProps>;
   text: string;
 }
diff --git a/packages/lab/src/contact-details/types.ts b/packages/lab/src/contact-details/types.ts
index 9c59707192e..3198fbb9d28 100644
--- a/packages/lab/src/contact-details/types.ts
+++ b/packages/lab/src/contact-details/types.ts
@@ -1,5 +1,6 @@
 import { HTMLAttributes } from "react";
 
-export interface ValueComponentProps extends HTMLAttributes<HTMLSpanElement> {
+export interface ValueComponentProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
   value?: string;
 }
diff --git a/packages/lab/src/stepped-tracker/StepLabel/StepLabel.tsx b/packages/lab/src/stepped-tracker/StepLabel/StepLabel.tsx
index c278edaab85..9dd7a71a291 100644
--- a/packages/lab/src/stepped-tracker/StepLabel/StepLabel.tsx
+++ b/packages/lab/src/stepped-tracker/StepLabel/StepLabel.tsx
@@ -1,6 +1,6 @@
-import { forwardRef, ComponentPropsWithoutRef, ReactNode } from "react";
+import { forwardRef, ReactNode } from "react";
 import { clsx } from "clsx";
-import { makePrefixer, Label } from "@salt-ds/core";
+import { makePrefixer, Label, TextProps } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 
@@ -8,7 +8,7 @@ import stepLabelCss from "./StepLabel.css";
 
 const withBaseName = makePrefixer("saltStepLabel");
 
-export interface StepLabelProps extends ComponentPropsWithoutRef<"label"> {
+export interface StepLabelProps extends TextProps<"label"> {
   /**
    * The content of Step Label
    */
diff --git a/site/docs/components/link/examples.mdx b/site/docs/components/link/examples.mdx
index d38d4b09b5f..810454d9437 100644
--- a/site/docs/components/link/examples.mdx
+++ b/site/docs/components/link/examples.mdx
@@ -36,13 +36,13 @@ When linking to third party content, we recommended setting `rel=”noopener”`
 
   </LivePreview>
 
-  <LivePreview componentName="link" exampleName="Variant">
+  <LivePreview componentName="link" exampleName="Color">
 
-## Variant
+## Color
 
-To help create a visual hierarchy using a link, use the `variant` prop.
+To help create a visual hierarchy using a link, use the `color` prop.
 
-The default variant is `primary`.
+The default color is `primary`.
 
   </LivePreview>
 
@@ -54,4 +54,16 @@ Links change color after a user clicks on them. This tells the user which links
 
   </LivePreview>
 
+  <LivePreview componentName="link" exampleName="Variant" displayName="Variant - Deprecated">
+
+## Variant
+
+**Note:** This prop is deprecated. Use the `color` prop instead.
+
+To help create a visual hierarchy using a link, use the `variant` prop.
+
+The default variant is `primary`.
+
+  </LivePreview>
+
 </LivePreviewControls>
diff --git a/site/docs/components/text/examples.mdx b/site/docs/components/text/examples.mdx
index ad70fbe2bbd..100eb78038d 100644
--- a/site/docs/components/text/examples.mdx
+++ b/site/docs/components/text/examples.mdx
@@ -60,10 +60,22 @@ Using the `styleAs` prop, you can maintain the correct HTML hierarchy and the ap
 
 </LivePreview>
 
-<LivePreview componentName="text" exampleName="Variant">
+<LivePreview componentName="text" exampleName="Color">
+
+## Color
+
+Use the `color` prop to adjust the foreground color of any nested text. Use the `primary` color most of the time, the `secondary` color for supporting text or to create visual hierarchy, and `inherit` to inherit text color from the parent element.
+
+Read our [guidance on how to use text color](/salt/foundations/typography#color).
+
+</LivePreview>
+
+<LivePreview componentName="text" exampleName="Variant" displayName="Variant - Deprecated">
 
 ## Variant
 
+**Note:** This prop is deprecated. Use the `color` prop instead.
+
 Use the `variant` prop to adjust the foreground color of any nested text. Use the `primary` variant most often, and the `secondary` variant for supporting text or creating a visual hierarchy.
 
 Read our [guidance on how to use text color](/salt/foundations/typography#color).
diff --git a/site/src/examples/link/Color.tsx b/site/src/examples/link/Color.tsx
new file mode 100644
index 00000000000..90e8e8d5dfc
--- /dev/null
+++ b/site/src/examples/link/Color.tsx
@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+import { Link, StackLayout } from "@salt-ds/core";
+import styles from "./index.module.css";
+
+export const Color = (): ReactElement => (
+  <StackLayout>
+    <Link href="#" color="primary" className={styles.linkExample}>
+      Primary Link color
+    </Link>
+    <Link href="#" color="secondary" className={styles.linkExample}>
+      Secondary Link color
+    </Link>
+    <Link href="#" color="inherit" className={styles.linkExample}>
+      Inherit Link color
+    </Link>
+  </StackLayout>
+);
diff --git a/site/src/examples/link/index.ts b/site/src/examples/link/index.ts
index cb0945eb1cd..8a3cedda73b 100644
--- a/site/src/examples/link/index.ts
+++ b/site/src/examples/link/index.ts
@@ -1,4 +1,5 @@
 export * from "./Default";
 export * from "./OpenInANewTab";
 export * from "./Variant";
+export * from "./Color";
 export * from "./Visited";
diff --git a/site/src/examples/text/Color.tsx b/site/src/examples/text/Color.tsx
new file mode 100644
index 00000000000..6634284edc8
--- /dev/null
+++ b/site/src/examples/text/Color.tsx
@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+import { Text, StackLayout } from "@salt-ds/core";
+
+export const Color = (): ReactElement => (
+  <StackLayout>
+    <Text color="primary">This is primary color of Text</Text>
+    <Text color="secondary">This is secondary color of Text</Text>
+    <Text color="inherit">This is inherited color of Text</Text>
+  </StackLayout>
+);
diff --git a/site/src/examples/text/index.ts b/site/src/examples/text/index.ts
index dcd0e2da48f..a924ced1780 100644
--- a/site/src/examples/text/index.ts
+++ b/site/src/examples/text/index.ts
@@ -2,3 +2,4 @@ export * from "./Styles";
 export * from "./Styling";
 export * from "./Truncation";
 export * from "./Variant";
+export * from "./Color";