From d0f6ee9b517bd1757c46dba74a60bb4d3fa18f5a Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Thu, 22 Jul 2021 16:44:52 -0700
Subject: [PATCH] feat(date-picker): add helperText prop

Ref: https://github.com/carbon-design-system/carbon/commit/4b5b5fdf8
---
 COMPONENT_INDEX.md                       |  1 +
 docs/src/COMPONENT_API.json              | 11 +++++++++++
 docs/src/pages/components/DatePicker.svx |  6 ++++++
 src/DatePicker/DatePickerInput.svelte    | 13 ++++++++++++-
 tests/DatePicker.test.svelte             |  6 +++++-
 types/DatePicker/DatePickerInput.d.ts    |  6 ++++++
 6 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 3f939bca..c06be76c 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1090,6 +1090,7 @@ None.
 | placeholder     | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the input placeholder text                 |
 | pattern         | <code>let</code> | No       | <code>string</code>                       | <code>"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"</code>      | Specify the Regular Expression for the input value |
 | disabled        | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the input                 |
+| helperText      | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the helper text                            |
 | iconDescription | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the ARIA label for the calendar icon       |
 | id              | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                    |
 | labelText       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                             |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 2d4834cb..e2bd1683 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -2734,6 +2734,17 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "helperText",
+          "kind": "let",
+          "description": "Specify the helper text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "iconDescription",
           "kind": "let",
diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index 6ea1ea8c..a6cae4af 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -13,6 +13,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
   <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
+### With helper text
+
+<DatePicker>
+  <DatePickerInput labelText="Date of birth" helperText="Example: 01/12/1990" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
 ### Hidden label
 
 <DatePicker>
diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index 92668423..71beefad 100644
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@@ -17,6 +17,9 @@
   /** Set to `true` to disable the input */
   export let disabled = false;
 
+  /** Specify the helper text */
+  export let helperText = "";
+
   /** Specify the ARIA label for the calendar icon */
   export let iconDescription = "";
 
@@ -50,7 +53,7 @@
   /** Obtain a reference to the input HTML element */
   export let ref = null;
 
-  import { getContext, onMount } from "svelte";
+  import { getContext } from "svelte";
   import Calendar16 from "carbon-icons-svelte/lib/Calendar16/Calendar16.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
@@ -161,4 +164,12 @@
   {#if !invalid && warn}
     <div class:bx--form-requirement="{true}">{warnText}</div>
   {/if}
+  {#if helperText}
+    <div
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}"
+    >
+      {helperText}
+    </div>
+  {/if}
 </div>
diff --git a/tests/DatePicker.test.svelte b/tests/DatePicker.test.svelte
index 79a7cb24..ec0d4473 100644
--- a/tests/DatePicker.test.svelte
+++ b/tests/DatePicker.test.svelte
@@ -7,7 +7,11 @@
     console.log(e.detail);
   }}"
 >
-  <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
+  <DatePickerInput
+    labelText="Date of birth"
+    helperText="Example: 01/12/1990"
+    placeholder="mm/dd/yyyy"
+  />
 </DatePicker>
 
 <DatePicker>
diff --git a/types/DatePicker/DatePickerInput.d.ts b/types/DatePicker/DatePickerInput.d.ts
index 6f085a3a..0e9c4a48 100644
--- a/types/DatePicker/DatePickerInput.d.ts
+++ b/types/DatePicker/DatePickerInput.d.ts
@@ -32,6 +32,12 @@ export interface DatePickerInputProps
    */
   disabled?: boolean;
 
+  /**
+   * Specify the helper text
+   * @default ""
+   */
+  helperText?: string;
+
   /**
    * Specify the ARIA label for the calendar icon
    * @default ""