[WB-1814.6] Refactor Link to use semantic colors (#2464)

jandrade · web-flow · commit 5bd2a95c5b1f · 2025-02-20T13:19:16.000-05:00
Next step is to refactor the `Link` component to use semantic colors. Besides the migration, this PR also includes the following changes: - Reworked the theme structure to make it closer to the semanticColor structure. - Updated stories to use the new semantic colors. ### Implementation plan: 1. #2439 2. #2440 3. #2441 4. #2446 5. #2449 6. Link (current PR) 7. Modal 8. Popover, Tooltip 9. Pill 10. Clickable, Toolbar Issue: WB-1814 ## Test plan: Verify that the Chromatic snapshots are unchanged. URL: `/?path=/story/packages-link-link-all-variants--default` Author: jandrade Reviewers: jandrade, beaesguerra Required Reviewers: Approved By: beaesguerra Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️ dependabot, ✅ gerald Pull Request URL: #2464
diff --git a/.changeset/mighty-goats-look.md b/.changeset/mighty-goats-look.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/wonder-blocks-banner": patch
+"@khanacademy/wonder-blocks-link": patch
+---
+
+Internal `Link` refactor to use `semanticColor` tokens intead of `color`. Also moved the link colors to an object to prepare this for an upcoming theme integration"
diff --git a/__docs__/wonder-blocks-link/link-variants.stories.tsx b/__docs__/wonder-blocks-link/link-variants.stories.tsx
@@ -12,6 +12,8 @@ import {
 import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
 
 import {AllVariants} from "../components/all-variants";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 
 const rows = [
     {name: "Default", props: {}},
@@ -26,13 +28,36 @@ const columns = [
         name: "Primary",
         props: {},
     },
+    {
+        name: "startIcon",
+        props: {
+            children: "With startIcon",
+            startIcon: <PhosphorIcon icon={IconMappings.plusCircleBold} />,
+        },
+    },
+    {
+        name: "endIcon",
+        props: {
+            children: "With endIcon",
+            endIcon: <PhosphorIcon icon={IconMappings.magnifyingGlassBold} />,
+            target: "_blank",
+        },
+    },
+    {
+        name: "External",
+        props: {
+            children: "External link",
+            href: "https://www.khanacademy.org",
+            target: "_blank",
+        },
+    },
     {
         name: "Visitable",
         props: {visitable: true},
     },
 ];
 
-const themes: Array<string> = ["default", "dark"];
+const themes: Array<string> = ["default", "dark", "rtl"];
 
 type Story = StoryObj<typeof Link>;
 
@@ -50,17 +75,16 @@ const meta = {
                     <AllVariants rows={rows} columns={columns}>
                         {(props) => (
                             <>
-                                {theme === "dark" &&
-                                props.kind === "secondary" ? null : (
-                                    <Link
-                                        {...args}
-                                        {...props}
-                                        light={theme === "dark"}
-                                        href="https://www.khanacademy.org"
-                                    >
-                                        This is a Link
-                                    </Link>
-                                )}
+                                <Link
+                                    {...args}
+                                    {...props}
+                                    light={theme === "dark"}
+                                    href="https://www.khanacademy.org"
+                                >
+                                    {theme === "rtl"
+                                        ? "هذا الرابط مكتوب باللغة العربية"
+                                        : "This is a Link"}
+                                </Link>
                             </>
                         )}
                     </AllVariants>
@@ -113,7 +137,7 @@ export const PressVisited: Story = {
 
 const styles = StyleSheet.create({
     container: {
-        maxWidth: 700,
+        maxWidth: 1000,
         gap: spacing.medium_16,
     },
     theme: {
@@ -125,6 +149,9 @@ const styles = StyleSheet.create({
         backgroundColor: semanticColor.surface.inverse,
         color: semanticColor.text.inverse,
     },
+    rtl: {
+        direction: "rtl",
+    },
     title: {
         textTransform: "capitalize",
     },
diff --git a/__docs__/wonder-blocks-link/link.stories.tsx b/__docs__/wonder-blocks-link/link.stories.tsx
@@ -6,7 +6,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {
     Body,
     HeadingSmall,
@@ -202,7 +202,7 @@ export const StartAndEndIcons: StoryComponentType = {
             {/* Light */}
             <View
                 style={{
-                    backgroundColor: color.darkBlue,
+                    backgroundColor: semanticColor.surface.inverse,
                     padding: spacing.large_24,
                 }}
             >
@@ -262,7 +262,7 @@ export const StartAndEndIcons: StoryComponentType = {
                 >
                     This is a multi-line link with start and end icons
                 </Link>
-                <Body style={{color: color.white}}>
+                <Body style={{color: semanticColor.text.inverse}}>
                     This is an inline{" "}
                     <Link
                         href="#link"
@@ -300,7 +300,7 @@ export const StartAndEndIcons: StoryComponentType = {
  */
 export const Inline: StoryComponentType = {
     render: () => (
-        <Body>
+        <Body style={{width: 530}}>
             This is an inline{" "}
             <Link href="#link" inline={true}>
                 regular link
@@ -329,6 +329,14 @@ export const Inline: StoryComponentType = {
             .
         </Body>
     ),
+    parameters: {
+        chromatic: {
+            // Re-enable snapshots for this story since it shows the links in
+            // the context of paragraphs.
+            disableSnapshot: false,
+        },
+        pseudo: {visited: true},
+    },
 };
 
 /**
@@ -340,7 +348,7 @@ export const Inline: StoryComponentType = {
  */
 export const InlineLight: StoryComponentType = {
     render: () => (
-        <Body style={{color: color.white}}>
+        <Body style={{color: semanticColor.text.inverse, width: 530}}>
             This is an inline{" "}
             <Link href="#link" inline={true} light={true}>
                 regular link
@@ -356,7 +364,7 @@ export const InlineLight: StoryComponentType = {
             </Link>
             , whereas this is an inline{" "}
             <Link href="#link" visitable={true} inline={true} light={true}>
-                Visitable link (Primary only)
+                Visitable link
             </Link>{" "}
             and an{" "}
             <Link
@@ -366,15 +374,21 @@ export const InlineLight: StoryComponentType = {
                 light={true}
                 target="_blank"
             >
-                external Visitable link (Primary only)
+                external Visitable link
             </Link>
-            . Secondary light links are not supported.
+            .
         </Body>
     ),
     parameters: {
         backgrounds: {
             default: "darkBlue",
         },
+        chromatic: {
+            // Re-enable snapshots for this story since it shows the links in
+            // the context of paragraphs.
+            disableSnapshot: false,
+        },
+        pseudo: {visited: true},
     },
 };
 
@@ -391,56 +405,34 @@ export const WithTypography: StoryComponentType = {
             </Link>
         </HeadingSmall>
     ),
+    parameters: {
+        chromatic: {
+            // Re-enable snapshots for this story since it's verifying that
+            // the styles on typography elements are applied
+            disableSnapshot: false,
+        },
+    },
 };
 
 /**
  * Link can take a `style` prop. Here, the Link has been given a style in which
- * the `color` field has been set to `color.red`.
+ * the `color` field has been set to `semanticColor.status.critical.foreground`.
  */
 export const WithStyle: StoryComponentType = {
     render: () => (
         <Link href="#link" style={styles.customLink}>
             This link has a style.
         </Link>
     ),
+    parameters: {
+        chromatic: {
+            // Re-enable snapshots for this story since it's verifying that
+            // custom styles are applied (one-off)
+            disableSnapshot: false,
+        },
+    },
 };
 
-export const Navigation: StoryComponentType = () => (
-    <MemoryRouter>
-        <View>
-            <View style={styles.row}>
-                <Link
-                    href="/foo"
-                    style={styles.heading}
-                    onClick={() => {
-                        // eslint-disable-next-line no-console
-                        console.log("I'm still on the same page!");
-                    }}
-                >
-                    <LabelLarge>Uses Client-side Nav</LabelLarge>
-                </Link>
-                <Link
-                    href="/iframe.html?id=link--default&viewMode=story"
-                    style={styles.heading}
-                    skipClientNav
-                >
-                    <LabelLarge>Avoids Client-side Nav</LabelLarge>
-                </Link>
-            </View>
-            <View style={styles.navigation}>
-                <Switch>
-                    <Route path="/foo">
-                        <View id="foo">
-                            The first link does client-side navigation here.
-                        </View>
-                    </Route>
-                    <Route path="*">See navigation changes here</Route>
-                </Switch>
-            </View>
-        </View>
-    </MemoryRouter>
-);
-
 /**
  * If you want to navigate to an external URL and/or reload the window, make
  * sure to use `href` and `skipClientNav={true}`, as shown in this example.
@@ -450,12 +442,42 @@ export const Navigation: StoryComponentType = () => (
  * documentation](/story/button-navigation-callbacks--before-nav-callbacks&viewMode=docs)
  * for details.
  */
-Navigation.parameters = {
-    docs: {
-        description: {
-            story: ``,
-        },
-    },
+export const Navigation: StoryComponentType = {
+    render: () => (
+        <MemoryRouter>
+            <View>
+                <View style={styles.row}>
+                    <Link
+                        href="/foo"
+                        style={styles.heading}
+                        onClick={() => {
+                            // eslint-disable-next-line no-console
+                            console.log("I'm still on the same page!");
+                        }}
+                    >
+                        <LabelLarge>Uses Client-side Nav</LabelLarge>
+                    </Link>
+                    <Link
+                        href="/iframe.html?id=link--default&viewMode=story"
+                        style={styles.heading}
+                        skipClientNav
+                    >
+                        <LabelLarge>Avoids Client-side Nav</LabelLarge>
+                    </Link>
+                </View>
+                <View style={styles.navigation}>
+                    <Switch>
+                        <Route path="/foo">
+                            <View id="foo">
+                                The first link does client-side navigation here.
+                            </View>
+                        </Route>
+                        <Route path="*">See navigation changes here</Route>
+                    </Switch>
+                </View>
+            </View>
+        </MemoryRouter>
+    ),
 };
 
 /**
@@ -517,21 +539,16 @@ export const RightToLeftWithIcons: StoryComponentType = {
 };
 
 const styles = StyleSheet.create({
-    darkBackground: {
-        backgroundColor: color.darkBlue,
-        color: color.white,
-        padding: 10,
-    },
     heading: {
         marginRight: spacing.large_24,
     },
     navigation: {
-        border: `1px dashed ${color.purple}`,
+        border: `1px dashed ${semanticColor.border.primary}`,
         marginTop: spacing.large_24,
         padding: spacing.large_24,
     },
     customLink: {
-        color: color.red,
+        color: semanticColor.status.critical.foreground,
     },
     row: {
         flexDirection: "row",
diff --git a/packages/wonder-blocks-link/src/components/link-core.tsx b/packages/wonder-blocks-link/src/components/link-core.tsx
