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

@@ -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: {

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,
       },
     ]"
   >

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);
+  });
 });

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