feat(Link): allow nodes to be used in link body (#1950)

- add in test demonstrating extension
chanzuckerberg · May 17, 2024 · 01970a2 · 01970a2
1 parent 06cc194
commit 01970a2
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/src/components/Link/Link-v2.stories.tsx b/src/components/Link/Link-v2.stories.tsx
@@ -37,6 +37,14 @@ export const LinkWithOpenIcon: StoryObj<Args> = {
   },
 };
 
+export const LinkWithFormattedChildren: StoryObj<Args> = {
+  args: {
+    children: <em>emphasized link</em>,
+    context: 'standalone',
+    icon: 'open-in-new',
+  },
+};
+
 export const Emphasis: StoryObj<Args> = {
   args: {
     size: 'md',

diff --git a/src/components/Link/Link-v2.tsx b/src/components/Link/Link-v2.tsx
@@ -15,9 +15,9 @@ export type LinkV2Props<ExtendedElement = unknown> =
      */
     as?: string | React.ElementType;
     /**
-     * The link contents or label.
+     * The link contents or label. Using ReactNode to support customized text treatments
      */
-    children: string;
+    children: React.ReactNode;
     // Design API
     /**
      * Where `Link` sits alongside other text and content:
@@ -34,7 +34,6 @@ export type LinkV2Props<ExtendedElement = unknown> =
      * Extra or lowered colors added to a link
      */
     emphasis?: 'default' | 'high' | 'low';
-
     /**
      * Link size inherits from the surrounding text.
      */

diff --git a/src/components/Link/__snapshots__/Link-v2.test.tsx.snap b/src/components/Link/__snapshots__/Link-v2.test.tsx.snap
@@ -87,6 +87,31 @@ exports[`<Link /> LinkWithChevron story renders snapshot 1`] = `
 </a>
 `;
 
+exports[`<Link /> LinkWithFormattedChildren story renders snapshot 1`] = `
+<a
+  class="link link--context-standalone link--emphasis-default link--has-right-icon link--size-lg"
+  href="https://go.czi.team/eds"
+>
+  <em>
+    emphasized link
+  </em>
+  <svg
+    aria-hidden="true"
+    class="icon link__icon"
+    fill="currentColor"
+    height="1.5rem"
+    style="--icon-size: 1.5rem;"
+    viewBox="0 0 24 24"
+    width="1.5rem"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
+    />
+  </svg>
+</a>
+`;
+
 exports[`<Link /> LinkWithOpenIcon story renders snapshot 1`] = `
 <a
   class="link link--context-standalone link--emphasis-default link--has-right-icon link--size-lg"