From e1a17815f6144cfaa6980cf47fcb62fac89086d6 Mon Sep 17 00:00:00 2001
From: Felipe Brito <felipebritor@gmail.com>
Date: Fri, 24 Mar 2023 19:48:38 -0300
Subject: [PATCH] feat: add 'size options' to CvLink

Update CvLink prop to include 'size' props and link--${size} on
component. Size options are 'sm', 'md' (default), and 'lg'.
---
 src/components/CvLink/CvLink.stories.js       | 22 +++++++++++-
 src/components/CvLink/CvLink.vue              |  1 +
 .../CvLink/__tests__/CvLink.spec.js           | 34 +++++++++++++++++++
 src/use/cvLink.js                             |  7 ++++
 4 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/src/components/CvLink/CvLink.stories.js b/src/components/CvLink/CvLink.stories.js
index 35ed92136..bad8114b0 100644
--- a/src/components/CvLink/CvLink.stories.js
+++ b/src/components/CvLink/CvLink.stories.js
@@ -5,7 +5,7 @@ import {
 } from '../../global/storybook-utils';
 
 import { CvLink } from '.';
-import { props as propsCvLink } from '../../use/cvLink';
+import { props as propsCvLink, linkSizes } from '../../use/cvLink';
 
 export default {
   title: `${sbCompPrefix}/CvLink`,
@@ -61,6 +61,26 @@ export default {
       description:
         'Specify whether you want the link to receive visited styles after the link has been clicked.',
     },
+    size: {
+      type: 'string',
+      table: {
+        type: { summary: linkSizes.join(' | ') },
+        defaultValue: { summary: 'medium (md)' },
+        category: 'props',
+      },
+      options: linkSizes,
+      control: {
+        type: 'select',
+        labels: {
+          sm: 'small (sm)',
+          md: 'medium (md)',
+          lg: 'large (lg)',
+        },
+      },
+      defaultValue: 'md',
+      description:
+        'Specify the size of the Link. Currently supports either `sm`, `md` (default) or `lg` as an option.',
+    },
     default: {
       type: 'string',
       table: {
diff --git a/src/components/CvLink/CvLink.vue b/src/components/CvLink/CvLink.vue
index bd9f9fa80..8ab332233 100644
--- a/src/components/CvLink/CvLink.vue
+++ b/src/components/CvLink/CvLink.vue
@@ -9,6 +9,7 @@
         [`${carbonPrefix}--link--disabled`]: disabled,
         [`${carbonPrefix}--link--inline`]: inline,
         [`${carbonPrefix}--link--visited`]: visited,
+        [`${carbonPrefix}--link--${size}`]: size,
       },
     ]"
   >
diff --git a/src/components/CvLink/__tests__/CvLink.spec.js b/src/components/CvLink/__tests__/CvLink.spec.js
index 6b68e2867..b1c69eaed 100644
--- a/src/components/CvLink/__tests__/CvLink.spec.js
+++ b/src/components/CvLink/__tests__/CvLink.spec.js
@@ -78,4 +78,38 @@ describe('CvLink', () => {
     const element = container.firstElementChild;
     expect(element.classList.contains('bx--link--visited')).toBe(true);
   });
+
+  it("update link size to small when 'size' is sm", () => {
+    const { container } = render(CvLink, {
+      props: { size: 'sm' },
+    });
+
+    const element = container.firstElementChild;
+    expect(element.classList.contains('bx--link--sm')).toBe(true);
+  });
+
+  it("update link size to medium when 'size' is md", () => {
+    const { container } = render(CvLink, {
+      props: { size: 'md' },
+    });
+
+    const element = container.firstElementChild;
+    expect(element.classList.contains('bx--link--md')).toBe(true);
+  });
+
+  it("update link size to large when 'size' is lg", () => {
+    const { container } = render(CvLink, {
+      props: { size: 'lg' },
+    });
+
+    const element = container.firstElementChild;
+    expect(element.classList.contains('bx--link--lg')).toBe(true);
+  });
+
+  it('sets link size to medium when no size is passed', () => {
+    const { container } = render(CvLink);
+
+    const element = container.firstElementChild;
+    expect(element.classList.contains('bx--link--md')).toBe(true);
+  });
 });
diff --git a/src/use/cvLink.js b/src/use/cvLink.js
index 9ccde618b..1cc1d1b09 100644
--- a/src/use/cvLink.js
+++ b/src/use/cvLink.js
@@ -3,10 +3,17 @@
  */
 import { computed } from 'vue';
 
+export const linkSizes = ['sm', 'md', 'lg'];
+
 export const props = {
   disabled: Boolean,
   to: { type: [String, Object] },
   href: String,
+  size: {
+    type: String,
+    validator: size => linkSizes.includes(size),
+    default: 'md',
+  },
 };
 
 export const useTagType = props => {