From c0566f50353466e85bd6e329204558a9d63c2512 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Fri, 23 Aug 2024 12:19:10 -0500 Subject: [PATCH] fix(Link): handle inverse variant for standalone links - update documentation to explain cases - add warning for misaligned prop usages - update snapshots and tests --- src/components/Link/Link.module.css | 4 +++ src/components/Link/Link.stories.tsx | 25 +++++++++++++++---- src/components/Link/Link.test.tsx | 12 +++++++++ src/components/Link/Link.tsx | 20 ++++++++++++--- .../Link/__snapshots__/Link.test.tsx.snap | 15 +++++++++++ 5 files changed, 68 insertions(+), 8 deletions(-) diff --git a/src/components/Link/Link.module.css b/src/components/Link/Link.module.css index 4b215552a..eddcb8853 100644 --- a/src/components/Link/Link.module.css +++ b/src/components/Link/Link.module.css @@ -50,6 +50,10 @@ text-decoration: none; } + &.link--variant-inverse { + color: var(--eds-theme-color-text-utility-inverse); + } + /** * Sizes - using the presets for type ramp matching body-* */ diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx index 517074436..ba067cf51 100644 --- a/src/components/Link/Link.stories.tsx +++ b/src/components/Link/Link.stories.tsx @@ -26,7 +26,7 @@ type Story = StoryObj; export const Default: Story = {}; /** - * When using context, you can specify a trailing icon for the link. + * When using standalone context, you can specify a trailing icon for the link. * * **NOTE**: support for applying the chevron only works when `emphasis` is set to "low". */ @@ -40,7 +40,7 @@ export const LinkWithChevron: Story = { }; /** - * When using context, you can specify a trailing icon for the link. When using the open icon, make sure that a new tab/window is opened. + * When using standalone context, you can specify a trailing icon for the link. When using the open icon, make sure that a new tab/window is opened. */ export const LinkWithOpenIcon: Story = { args: { @@ -51,7 +51,7 @@ export const LinkWithOpenIcon: Story = { }; /** - * You can add formatting to the link if needed. + * You can add formatting to a link if needed. */ export const LinkWithFormattedChildren: Story = { args: { @@ -75,9 +75,11 @@ export const Emphasis: Story = { Default Emphasis +
High Emphasis +
Low Emphasis @@ -87,7 +89,20 @@ export const Emphasis: Story = { }; /** - * We also include an inverse variant, for use on dark backgrounds. + * Standalone inverse links take on a specific inverse color. + */ +export const StandaloneInverseVariant: Story = { + args: { + context: 'standalone', + variant: 'inverse', + }, + parameters: { + backgrounds: { default: 'background-utility-default-high-emphasis' }, + }, +}; + +/** + * Inline always take on the color of the container. When using an inline link, wrap the text with a proper color text token. */ export const InverseVariant: Story = { args: { @@ -129,7 +144,7 @@ export const LinkInParagraphContext: StoryObj = { }; /** - * Links will inherit the color from the surrounding text color definition (default emphasis, inline links) + * Inline links will inherit the color from the surrounding text color definition (default emphasis) */ export const InheritColor: Story = { args: { diff --git a/src/components/Link/Link.test.tsx b/src/components/Link/Link.test.tsx index ed42decc8..d0314e994 100644 --- a/src/components/Link/Link.test.tsx +++ b/src/components/Link/Link.test.tsx @@ -121,5 +121,17 @@ describe('', () => { expect(consoleMock).toHaveBeenCalledTimes(1); }); + + it('warns when variant is used with context inline', () => { + const consoleMock = jest.spyOn(console, 'warn'); + consoleMock.mockImplementation(); + render( + + Click + , + ); + + expect(consoleMock).toHaveBeenCalledTimes(1); + }); }); }); diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx index c54d3b8ac..ce751a904 100644 --- a/src/components/Link/Link.tsx +++ b/src/components/Link/Link.tsx @@ -28,7 +28,9 @@ export type LinkProps = * * **Default is `"inline"`**. * - * Note: Icons will only be visible when `"standalone"` is used + * ---- + * + * **Note**: This will only apply when `"standalone"` is used */ context?: 'inline' | 'standalone'; /** @@ -42,13 +44,19 @@ export type LinkProps = /** * The size of the link (when its context is "standalone"). * - * **NOTE**: when `context` is `"inline"`, size is ignored (and inherits from the associated text container) + * ---- + * + * **Note**: This will only apply when `"standalone"` is used */ size?: Extract; /** - * The variant treatment for links (use "inverse" on dark backgrounds). + * The variant treatment for **standalone** links (use "inverse" on dark backgrounds). * * **Default is `"default"`**. + * + * ---- + * + * **Note**: This will only apply when `"standalone"` is used */ variant?: 'default' | 'inverse'; } & ExtendedElement; @@ -58,6 +66,7 @@ export type LinkProps = * * Component for making styled anchor tags. Links allow users to navigate within or between a web page(s) or app(s). * + * Inline links inherit the color of the surrounding container, while when using `context` set to `standalone`, links have specific colors. */ export const Link = forwardRef( ( @@ -96,6 +105,11 @@ export const Link = forwardRef( 'Inline links cannot show icons', ); + assertEdsUsage( + [context === 'inline' && variant === 'inverse'], + 'Variant can only be used when context is "standalone"', + ); + assertEdsUsage( [context === 'inline' && typeof size !== 'undefined'], 'Size can only be used when context is "standalone"', diff --git a/src/components/Link/__snapshots__/Link.test.tsx.snap b/src/components/Link/__snapshots__/Link.test.tsx.snap index 1da23a755..eb4cd045f 100644 --- a/src/components/Link/__snapshots__/Link.test.tsx.snap +++ b/src/components/Link/__snapshots__/Link.test.tsx.snap @@ -24,12 +24,14 @@ exports[` Emphasis story renders snapshot 1`] = ` > Default Emphasis +
High Emphasis +
LinkWithOpenIcon story renders snapshot 1`] = ` `; +exports[` StandaloneInverseVariant story renders snapshot 1`] = ` +
+ + Link + +
+`; + exports[` UsingExtendedLink story renders snapshot 1`] = `