fix(Link): apply font weight to standalone sizes (#2015)

- fix handling of size so it isn't applied where it can't be used
- add assert for using size with context=inline
- update tests and snapshots

src/components/AppNotification/__snapshots__/AppNotification.test.ts.snap

@@ -306,7 +306,7 @@ exports[`<AppNotification /> WithLinkInSubtitle story renders snapshot 1`] = `
           Some text with a
            
           <a
-            class="link link--emphasis-default link--size-md link--variant-inverse"
+            class="link link--emphasis-default link--variant-inverse"
             href="https://example.com/"
           >
             link

src/components/Link/Link.module.css

@@ -23,11 +23,15 @@
 
   /* Sub-component spacing */
   &.link--size-xl,
-  &.link--size-lg { padding-left: calc(var(--eds-size-1) / 16 * 1rem); }
+  &.link--size-lg {
+    padding-left: calc(var(--eds-size-1) / 16 * 1rem);
+  }
 
   &.link--size-md,
-  &.link--size-sm, 
-  &.link--size-xs { padding-left: calc(var(--eds-size-half) / 16 * 1rem); }
+  &.link--size-sm,
+  &.link--size-xs {
+    padding-left: calc(var(--eds-size-half) / 16 * 1rem);
+  }
 }
 
 /**
@@ -51,22 +55,27 @@
    */
   &.link--size-xl {
     font: var(--eds-theme-typography-body-xl);
+    font-weight: 500;
   }
 
   &.link--size-lg {
     font: var(--eds-theme-typography-body-lg);
+    font-weight: 500;
   }
 
   &.link--size-md {
     font: var(--eds-theme-typography-body-md);
+    font-weight: 500;
   }
 
   &.link--size-sm {
     font: var(--eds-theme-typography-body-sm);
+    font-weight: 500;
   }
 
   &.link--size-xs {
     font: var(--eds-theme-typography-body-xs);
+    font-weight: 500;
   }
 }
 
@@ -109,6 +118,7 @@
 }
 
 .link:focus-visible {
-  outline: calc(var(--eds-size-quarter) / 16 * 1rem) solid var(--eds-theme-color-border-utility-focus);
+  outline: calc(var(--eds-size-quarter) / 16 * 1rem) solid
+    var(--eds-theme-color-border-utility-focus);
   outline-offset: calc(var(--eds-size-quarter) / 16 * 1rem);
 }

src/components/Link/Link.test.tsx

@@ -109,5 +109,17 @@ describe('<Link />', () => {
 
       expect(consoleMock).toHaveBeenCalledTimes(1);
     });
+
+    it('warns when size is used with context standalone', () => {
+      const consoleMock = jest.spyOn(console, 'warn');
+      consoleMock.mockImplementation();
+      render(
+        <Link context="inline" size="lg">
+          Click
+        </Link>,
+      );
+
+      expect(consoleMock).toHaveBeenCalledTimes(1);
+    });
   });
 });

src/components/Link/Link.tsx

@@ -24,23 +24,25 @@ export type LinkProps<ExtendedElement = unknown> =
      * Where `Link` sits alongside other text and content:
      *
      * * **inline** - Inline link inherits the text size established within the `<p>` paragraph they are embedded in.
-     * * **standalone** - Users can choose from the available sizes.
+     * * **standalone** - Users can choose from the available sizes, and add trailing icons.
      *
      * **Default is `"inline"`**.
      *
      * Note: Icons will only be visible when `"standalone"` is used
      */
     context?: 'inline' | 'standalone';
     /**
-     * (trailing) icon to use with the link
+     * (trailing) icon to use with the link (when `context` is `"standalone"`)
      */
     icon?: Extract<IconName, 'chevron-right' | 'open-in-new'>;
     /**
      * Extra or lowered colors added to a link
      */
     emphasis?: 'default' | 'high' | 'low';
     /**
-     * Link size inherits from the surrounding text.
+     * 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)
      */
     size?: Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
     /**
@@ -66,7 +68,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       context,
       emphasis = 'default',
       icon,
-      size = 'md',
+      size,
       variant = 'default',
       ...other
     },
@@ -94,6 +96,11 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       'Inline links cannot show icons',
     );
 
+    assertEdsUsage(
+      [context === 'inline' && typeof size !== 'undefined'],
+      'Size can only be used when context is "standalone"',
+    );
+
     assertEdsUsage(
       [icon === 'chevron-right' && emphasis !== 'low'],
       'Icon "chevron-right" only allowed when lowEmphasis is used',

src/components/Link/__snapshots__/Link.test.tsx.snap

@@ -238,7 +238,7 @@ exports[`<Link /> UsingExtendedLink story renders snapshot 1`] = `
 
 exports[`<Link /> passes class names down properly 1`] = `
 <a
-  class="exampleClassName link link--emphasis-default link--size-md"
+  class="exampleClassName link link--emphasis-default"
   data-testid="example-class-name"
   href="/"
 >
@@ -248,7 +248,7 @@ exports[`<Link /> passes class names down properly 1`] = `
 
 exports[`<Link /> passes test ids down properly 1`] = `
 <a
-  class="link link--emphasis-default link--size-md"
+  class="link link--emphasis-default"
   data-testid="example-test-id"
   href="/"
 >