diff --git a/src/components/Link/Link-v2.stories.tsx b/src/components/Link/Link-v2.stories.tsx index 664139c2c..754b6dabd 100644 --- a/src/components/Link/Link-v2.stories.tsx +++ b/src/components/Link/Link-v2.stories.tsx @@ -37,6 +37,14 @@ export const LinkWithOpenIcon: StoryObj = { }, }; +export const LinkWithFormattedChildren: StoryObj = { + args: { + children: emphasized link, + context: 'standalone', + icon: 'open-in-new', + }, +}; + export const Emphasis: StoryObj = { args: { size: 'md', diff --git a/src/components/Link/Link-v2.tsx b/src/components/Link/Link-v2.tsx index 4d39e81cb..480123f9d 100644 --- a/src/components/Link/Link-v2.tsx +++ b/src/components/Link/Link-v2.tsx @@ -15,9 +15,9 @@ export type LinkV2Props = */ 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 = * 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 index ff6007f53..32a1e4bf5 100644 --- 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[` LinkWithChevron story renders snapshot 1`] = ` `; +exports[` LinkWithFormattedChildren story renders snapshot 1`] = ` + + + emphasized link + + + +`; + exports[` LinkWithOpenIcon story renders snapshot 1`] = `