Skip to content

Commit c717ae3

Browse files
committed
fix: Address PR feedback and updates
1 parent 4281228 commit c717ae3

File tree

2 files changed

+39
-12
lines changed

2 files changed

+39
-12
lines changed

src/components/Link/Link.stories.tsx

+37-10
Original file line numberDiff line numberDiff line change
@@ -50,15 +50,15 @@ export const Inline: Story = {
5050
)
5151
};
5252

53-
export const CallToAction: Story = {
54-
name: 'Call-to-action links',
53+
export const ListLinks: Story = {
54+
name: 'List links',
5555
args: {
5656
...DefaultArguments.args
5757
},
5858
render: arguments_ => (
5959
<List isLinks>
60-
<ListLink {...arguments_}>Sample call-to-action link</ListLink>
61-
<ListLink {...arguments_}>Another sample call-to-action link</ListLink>
60+
<ListLink {...arguments_}>List link 1</ListLink>
61+
<ListLink {...arguments_}>List link 2</ListLink>
6262
</List>
6363
)
6464
};
@@ -67,13 +67,13 @@ export const Destructive: Story = {
6767
name: 'Destructive links',
6868
args: {
6969
...DefaultArguments.args,
70-
children: 'Sample destructive link'
70+
children: 'Destructive link'
7171
},
7272
render: arguments_ => <DestructiveLink {...arguments_} />
7373
};
7474

75-
export const StandardLinkWithIcon: Story = {
76-
name: 'Standard link with icon',
75+
export const LinkWithIcon: Story = {
76+
name: 'Link with icon',
7777
args: {
7878
...DefaultArguments.args,
7979
hasIcon: true
@@ -93,10 +93,10 @@ export const StandardLinkWithIcon: Story = {
9393
)
9494
};
9595

96-
export const StandardLinkWithIconNoWrapping: Story = {
97-
name: 'Non-wrapping icon links',
96+
export const LinkWithIconNoWrapping: Story = {
97+
name: 'Non-wrapping link with icon',
9898
args: {
99-
...StandardLinkWithIcon.args,
99+
...LinkWithIcon.args,
100100
noWrap: true
101101
},
102102
render: arguments_ => (
@@ -137,3 +137,30 @@ export const JumpLinkIconLeft: Story = {
137137
</Link>
138138
)
139139
};
140+
141+
export const PrintLink: Story = {
142+
name: 'Printed links',
143+
render: () => {
144+
const linkWeight = 500;
145+
const urlWeight = 300;
146+
147+
return (
148+
<p>
149+
Here&apos;s the{' '}
150+
<a
151+
href='https://consumerfinance.gov/about-us/blog'
152+
style={{ fontWeight: linkWeight }}
153+
>
154+
link style
155+
<span
156+
style={{ fontWeight: urlWeight, borderBottom: '1px solid #ffffff' }}
157+
>
158+
{' '}
159+
(cfpb.gov/about-us/blog)
160+
</span>
161+
</a>{' '}
162+
when printed.
163+
</p>
164+
);
165+
}
166+
};

src/components/Link/Link.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ interface LinkProperties extends React.HTMLProps<HTMLAnchorElement> {
1111
}
1212

1313
/**
14-
* 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.
15-
*
14+
* 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.
15+
*
1616
* Source: https://cfpb.github.io/design-system/components/links
1717
*/
1818
export default function Link({

0 commit comments

Comments
 (0)