From 4aceb6c95a0a92bd84d270a6c789df5ecf627887 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Sat, 26 Jun 2021 18:34:36 -0700
Subject: [PATCH] feat(text-input): support read-only variant

---
 COMPONENT_INDEX.md                      |  3 ++-
 docs/src/COMPONENT_API.json             | 12 +++++++++++-
 docs/src/pages/components/TextInput.svx |  6 +++++-
 src/TextInput/TextInput.svelte          | 12 +++++++++++-
 types/TextInput/TextInput.d.ts          |  8 +++++++-
 5 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 95c76edd..2515ded1 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4072,7 +4072,8 @@ None.
 | warn        | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to indicate an warning state    |
 | warnText    | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the warning state text                |
 | required    | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to mark the field as required   |
-| inline      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to use inline version           |
+| inline      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to use the inline variant       |
+| readonly    | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to use the read-only variant    |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index d145ab3b..df570d20 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -10416,7 +10416,17 @@
         {
           "name": "inline",
           "kind": "let",
-          "description": "Set to `true` to use inline version",
+          "description": "Set to `true` to use the inline variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "readonly",
+          "kind": "let",
+          "description": "Set to `true` to use the read-only variant",
           "type": "boolean",
           "value": "false",
           "isFunction": false,
diff --git a/docs/src/pages/components/TextInput.svx b/docs/src/pages/components/TextInput.svx
index 326bc1b9..8939f2b3 100644
--- a/docs/src/pages/components/TextInput.svx
+++ b/docs/src/pages/components/TextInput.svx
@@ -23,10 +23,14 @@ components: ["TextInput", "TextInputSkeleton"]
 
 <TextInput light labelText="User name" placeholder="Enter user name..." />
 
-### Inline
+### Inline variant
 
 <TextInput inline labelText="User name" placeholder="Enter user name..." />
 
+### Read-only variant
+
+<TextInput readonly labelText="User name" value="IBM" />
+
 ### Extra-large size
 
 <TextInput size="xl" labelText="User name" placeholder="Enter user name..." />
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index e41b3733..88787cf6 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -59,12 +59,16 @@
   /** Set to `true` to mark the field as required */
   export let required = false;
 
-  /** Set to `true` to use inline version */
+  /** Set to `true` to use the inline variant */
   export let inline = false;
 
+  /** Set to `true` to use the read-only variant */
+  export let readonly = false;
+
   import { getContext } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
+  import EditOff16 from "carbon-icons-svelte/lib/EditOff16/EditOff16.svelte";
 
   const ctx = getContext("Form");
 
@@ -77,6 +81,8 @@
   class:bx--form-item="{true}"
   class:bx--text-input-wrapper="{true}"
   class:bx--text-input-wrapper--inline="{inline}"
+  class:bx--text-input-wrapper--light="{light}"
+  class:bx--text-input-wrapper--readonly="{readonly}"
   on:click
   on:mouseover
   on:mouseenter
@@ -142,6 +148,9 @@
             bx--text-input__invalid-icon--warning"
         />
       {/if}
+      {#if readonly}
+        <EditOff16 class="bx--text-input__readonly-icon" />
+      {/if}
       <input
         bind:this="{ref}"
         data-invalid="{invalid || undefined}"
@@ -155,6 +164,7 @@
         type="{type}"
         value="{value}"
         required="{required}"
+        readonly="{readonly}"
         class:bx--text-input="{true}"
         class:bx--text-input--light="{light}"
         class:bx--text-input--invalid="{invalid}"
diff --git a/types/TextInput/TextInput.d.ts b/types/TextInput/TextInput.d.ts
index 158efa74..3ac1a155 100644
--- a/types/TextInput/TextInput.d.ts
+++ b/types/TextInput/TextInput.d.ts
@@ -104,10 +104,16 @@ export interface TextInputProps
   required?: boolean;
 
   /**
-   * Set to `true` to use inline version
+   * Set to `true` to use the inline variant
    * @default false
    */
   inline?: boolean;
+
+  /**
+   * Set to `true` to use the read-only variant
+   * @default false
+   */
+  readonly?: boolean;
 }
 
 export default class TextInput extends SvelteComponentTyped<