design(Link): final design review for Link component (#228)

* task: [Link] Move to Verified state

* fix: Address PR feedback and updates

Author: meissadia

src/components/Link/Link.stories.tsx

@@ -9,7 +9,7 @@ import {
 } from '~/src/index';
 
 const meta: Meta<typeof Link> = {
-  title: 'Components (Draft)/Links',
+  title: 'Components (Verified)/Links',
   component: Link
 };
 
@@ -50,15 +50,15 @@ export const Inline: Story = {
   )
 };
 
-export const CallToAction: Story = {
-  name: 'Call-to-action links',
+export const ListLinks: Story = {
+  name: 'List links',
   args: {
     ...DefaultArguments.args
   },
   render: arguments_ => (
     <List isLinks>
-      <ListLink {...arguments_}>Sample call-to-action link</ListLink>
-      <ListLink {...arguments_}>Another sample call-to-action link</ListLink>
+      <ListLink {...arguments_}>List link 1</ListLink>
+      <ListLink {...arguments_}>List link 2</ListLink>
     </List>
   )
 };
@@ -67,13 +67,13 @@ export const Destructive: Story = {
   name: 'Destructive links',
   args: {
     ...DefaultArguments.args,
-    children: 'Sample destructive link'
+    children: 'Destructive link'
   },
   render: arguments_ => <DestructiveLink {...arguments_} />
 };
 
-export const StandardLinkWithIcon: Story = {
-  name: 'Standard link with icon',
+export const LinkWithIcon: Story = {
+  name: 'Link with icon',
   args: {
     ...DefaultArguments.args,
     hasIcon: true
@@ -93,10 +93,10 @@ export const StandardLinkWithIcon: Story = {
   )
 };
 
-export const StandardLinkWithIconNoWrapping: Story = {
-  name: 'Non-wrapping icon links',
+export const LinkWithIconNoWrapping: Story = {
+  name: 'Non-wrapping link with icon',
   args: {
-    ...StandardLinkWithIcon.args,
+    ...LinkWithIcon.args,
     noWrap: true
   },
   render: arguments_ => (
@@ -118,7 +118,7 @@ export const JumpLink: Story = {
   },
   render: arguments_ => (
     <Link {...arguments_}>
-      <LinkText>Default jump link</LinkText>&nbsp;
+      <LinkText>Jump link</LinkText>&nbsp;
       <Icon name='right' />
     </Link>
   )
@@ -137,3 +137,30 @@ export const JumpLinkIconLeft: Story = {
     </Link>
   )
 };
+
+export const PrintLink: Story = {
+  name: 'Printed links',
+  render: () => {
+    const linkWeight = 500;
+    const urlWeight = 300;
+
+    return (
+      <p>
+        Here&apos;s the{' '}
+        <a
+          href='https://consumerfinance.gov/about-us/blog'
+          style={{ fontWeight: linkWeight }}
+        >
+          link style
+          <span
+            style={{ fontWeight: urlWeight, borderBottom: '1px solid #ffffff' }}
+          >
+            {' '}
+            (cfpb.gov/about-us/blog)
+          </span>
+        </a>{' '}
+        when printed.
+      </p>
+    );
+  }
+};

src/components/Link/Link.tsx

@@ -11,8 +11,8 @@ interface LinkProperties extends React.HTMLProps<HTMLAnchorElement> {
 }
 
 /**
- * Links lead users to a different page or further information. In contrast, buttons are used to signal actions. Users should be able to identify links without relying on color or styling alone.
- * 
+ * Links are navigational elements that connect users to other locations, either on the current page or to a different page or site. In contrast, <a href="https://cfpb.github.io/design-system/components/buttons">buttons</a> are used to signal important actions.
+ *
  * Source: https://cfpb.github.io/design-system/components/links
  */
 export default function Link({