From 6dd363c2a920a2d9350a5ae411f6e9e1efa7d5c0 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 29 Oct 2020 13:10:42 -0700
Subject: [PATCH] feat(link): support "sm", "lg" size variants

---
 COMPONENT_INDEX.md                 |  1 +
 docs/src/PUBLIC_API.json           | 56 +++++++++++++++++-------------
 docs/src/pages/components/Link.svx |  8 +++++
 src/Link/Link.svelte               |  8 +++++
 types/index.d.ts                   |  5 +++
 5 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 31e3050a..b74b6190 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2243,6 +2243,7 @@ import { Link } from "carbon-components-svelte";
 
 | Prop name | Type                                                                   | Default value | Description                                       |
 | :-------- | :--------------------------------------------------------------------- | :------------ | :------------------------------------------------ |
+| size      | <code>"sm" &#124; "lg"</code>                                          | --            | Specify the size of the link.                     |
 | href      | <code>string</code>                                                    | --            | Specify the href value.                           |
 | inline    | <code>boolean</code>                                                   | `false`       | Set to `true` to use the inline variant.          |
 | disabled  | <code>boolean</code>                                                   | `false`       | Set to `true` to disable the checkbox.            |
diff --git a/docs/src/PUBLIC_API.json b/docs/src/PUBLIC_API.json
index 42c557b5..a14cf22d 100644
--- a/docs/src/PUBLIC_API.json
+++ b/docs/src/PUBLIC_API.json
@@ -6602,6 +6602,14 @@
     "Link": {
       "moduleName": "Link",
       "props": [
+        [
+          "size",
+          {
+            "kind": "let",
+            "type": "\"sm\" | \"lg\"",
+            "description": "Specify the size of the link"
+          }
+        ],
         [
           "href",
           {
@@ -6662,8 +6670,8 @@
         [
           "click",
           {
-            "start": 1308,
-            "end": 1316,
+            "start": 1500,
+            "end": 1508,
             "type": "EventHandler",
             "name": "click",
             "modifiers": [],
@@ -6673,8 +6681,8 @@
         [
           "mouseover",
           {
-            "start": 1321,
-            "end": 1333,
+            "start": 1513,
+            "end": 1525,
             "type": "EventHandler",
             "name": "mouseover",
             "modifiers": [],
@@ -6684,8 +6692,8 @@
         [
           "mouseenter",
           {
-            "start": 1338,
-            "end": 1351,
+            "start": 1530,
+            "end": 1543,
             "type": "EventHandler",
             "name": "mouseenter",
             "modifiers": [],
@@ -6695,8 +6703,8 @@
         [
           "mouseleave",
           {
-            "start": 1356,
-            "end": 1369,
+            "start": 1548,
+            "end": 1561,
             "type": "EventHandler",
             "name": "mouseleave",
             "modifiers": [],
@@ -14729,8 +14737,8 @@
         [
           "click",
           {
-            "start": 1965,
-            "end": 1973,
+            "start": 1964,
+            "end": 1972,
             "type": "EventHandler",
             "name": "click",
             "modifiers": [],
@@ -14740,8 +14748,8 @@
         [
           "mouseover",
           {
-            "start": 1976,
-            "end": 1988,
+            "start": 1975,
+            "end": 1987,
             "type": "EventHandler",
             "name": "mouseover",
             "modifiers": [],
@@ -14751,8 +14759,8 @@
         [
           "mouseenter",
           {
-            "start": 1991,
-            "end": 2004,
+            "start": 1990,
+            "end": 2003,
             "type": "EventHandler",
             "name": "mouseenter",
             "modifiers": [],
@@ -14762,8 +14770,8 @@
         [
           "mouseleave",
           {
-            "start": 2007,
-            "end": 2020,
+            "start": 2006,
+            "end": 2019,
             "type": "EventHandler",
             "name": "mouseleave",
             "modifiers": [],
@@ -14773,8 +14781,8 @@
         [
           "change",
           {
-            "start": 3036,
-            "end": 3045,
+            "start": 3037,
+            "end": 3046,
             "type": "EventHandler",
             "name": "change",
             "modifiers": [],
@@ -14784,8 +14792,8 @@
         [
           "input",
           {
-            "start": 3054,
-            "end": 3062,
+            "start": 3055,
+            "end": 3063,
             "type": "EventHandler",
             "name": "input",
             "modifiers": [],
@@ -14795,8 +14803,8 @@
         [
           "focus",
           {
-            "start": 3152,
-            "end": 3160,
+            "start": 3153,
+            "end": 3161,
             "type": "EventHandler",
             "name": "focus",
             "modifiers": [],
@@ -14806,8 +14814,8 @@
         [
           "blur",
           {
-            "start": 3169,
-            "end": 3176,
+            "start": 3170,
+            "end": 3177,
             "type": "EventHandler",
             "name": "blur",
             "modifiers": [],
diff --git a/docs/src/pages/components/Link.svx b/docs/src/pages/components/Link.svx
index 0241f069..8d25d605 100644
--- a/docs/src/pages/components/Link.svx
+++ b/docs/src/pages/components/Link.svx
@@ -24,6 +24,14 @@ You can override the `rel` attribute with a custom value.
   <Link inline href="https://www.carbondesignsystem.com/">Carbon Design System</Link>.
 </div>
 
+### Large size
+
+<Link size="lg" href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
+
+### Small size
+
+<Link size="sm" href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
+
 ### Disabled
 
 <Link disabled href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte
index 8b1a644d..6869cf66 100644
--- a/src/Link/Link.svelte
+++ b/src/Link/Link.svelte
@@ -1,4 +1,10 @@
 <script>
+  /**
+   * Specify the size of the link
+   * @type {"sm" | "lg"} [size]
+   */
+  export let size = undefined;
+
   /**
    * Specify the href value
    * @type {string} [href]
@@ -53,6 +59,8 @@
     class:bx--link--disabled="{disabled}"
     class:bx--link--inline="{inline}"
     class:bx--link--visited="{visited}"
+    class:bx--link--sm="{size === 'sm'}"
+    class:bx--link--lg="{size === 'lg'}"
     rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
     href="{href}"
     {...$$restProps}
diff --git a/types/index.d.ts b/types/index.d.ts
index a0a8dd91..48bb3cc8 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -2014,6 +2014,11 @@ export class InlineNotification extends CarbonSvelteComponent {
 
 export class Link extends CarbonSvelteComponent {
   $$prop_def: {
+    /**
+     * Specify the size of the link
+     */
+    size?: "sm" | "lg";
+
     /**
      * Specify the href value
      */