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({