diff --git a/src/components/CvLink/CvLink.stories.js b/src/components/CvLink/CvLink.stories.js index 39b152491..35ed92136 100644 --- a/src/components/CvLink/CvLink.stories.js +++ b/src/components/CvLink/CvLink.stories.js @@ -51,6 +51,16 @@ export default { description: "Replace `` node for vue-router's `router-link`, providing `to` property to it. Cannot be used with href.", }, + visited: { + type: 'boolean', + table: { + type: { summary: 'boolean' }, + category: 'props', + }, + defaultValue: false, + description: + 'Specify whether you want the link to receive visited styles after the link has been clicked.', + }, default: { type: 'string', table: { diff --git a/src/components/CvLink/CvLink.vue b/src/components/CvLink/CvLink.vue index f1e96110b..bd9f9fa80 100644 --- a/src/components/CvLink/CvLink.vue +++ b/src/components/CvLink/CvLink.vue @@ -8,6 +8,7 @@ { [`${carbonPrefix}--link--disabled`]: disabled, [`${carbonPrefix}--link--inline`]: inline, + [`${carbonPrefix}--link--visited`]: visited, }, ]" > @@ -25,6 +26,7 @@ import { const props = defineProps({ inline: Boolean, + visited: Boolean, ...linkPropsDefinition, }); const linkProps = useLinkProps(props); diff --git a/src/components/CvLink/__tests__/CvLink.spec.js b/src/components/CvLink/__tests__/CvLink.spec.js index 70c0e59f3..6b68e2867 100644 --- a/src/components/CvLink/__tests__/CvLink.spec.js +++ b/src/components/CvLink/__tests__/CvLink.spec.js @@ -69,4 +69,13 @@ describe('CvLink', () => { const element = container.firstElementChild; expect(element.classList.contains('bx--link--inline')).toBe(true); }); + + it("sets link in visited state when 'visited' is true", () => { + const { container } = render(CvLink, { + props: { visited: true }, + }); + + const element = container.firstElementChild; + expect(element.classList.contains('bx--link--visited')).toBe(true); + }); });