diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
index 9327a8a0..90910cd8 100644
--- 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_ => (
- Sample call-to-action link
- Another sample call-to-action link
+ List link 1
+ List link 2
)
};
@@ -67,13 +67,13 @@ export const Destructive: Story = {
name: 'Destructive links',
args: {
...DefaultArguments.args,
- children: 'Sample destructive link'
+ children: 'Destructive link'
},
render: 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 = {
)
};
+
+export const PrintLink: Story = {
+ name: 'Printed links',
+ render: () => {
+ const linkWeight = 500;
+ const urlWeight = 300;
+
+ return (
+
+ Here's the{' '}
+
+ link style
+
+ {' '}
+ (cfpb.gov/about-us/blog)
+
+ {' '}
+ when printed.
+
+ );
+ }
+};
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index 84e58872..db3d4714 100644
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -11,8 +11,8 @@ interface LinkProperties extends React.HTMLProps {
}
/**
- * 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, buttons are used to signal important actions.
+ *
* Source: https://cfpb.github.io/design-system/components/links
*/
export default function Link({