fix: Address PR feedback and updates

cfpb · Nov 7, 2023 · c717ae3 · c717ae3
1 parent 4281228
commit c717ae3
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 12 deletions.
diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
@@ -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_ => (
@@ -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>
+    );
+  }
+};
diff --git a/src/components/Link/Link.tsx b/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({