From e04c3a977f330822a533da8dd7c5231543a92c46 Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Fri, 14 Feb 2020 15:38:30 +0000
Subject: [PATCH] Splitting charcounter and helper text into own component.
 general tidyup

---
 .../src/Test/props.js                         |  2 +-
 .../src/Textfield/CharacterCounter.svelte     |  1 +
 .../src/Textfield/HelperText.svelte           | 24 ++++++++++++++
 .../src/Textfield/Textfield.svelte            | 31 +++++++------------
 4 files changed, 38 insertions(+), 20 deletions(-)
 create mode 100644 packages/materialdesign-components/src/Textfield/CharacterCounter.svelte
 create mode 100644 packages/materialdesign-components/src/Textfield/HelperText.svelte

diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index 0b71ceaee2..df0125f214 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -35,8 +35,8 @@ export const props = {
     label: "First",
     colour: "secondary",
     fullwidth: true,
+    maxLength: 500,
     helperText: "Add Surname",
-    useCharCounter: true,
     onChange: text => console.log("Text: ", text),
   },
   checkbox: {
diff --git a/packages/materialdesign-components/src/Textfield/CharacterCounter.svelte b/packages/materialdesign-components/src/Textfield/CharacterCounter.svelte
new file mode 100644
index 0000000000..e62573a3ac
--- /dev/null
+++ b/packages/materialdesign-components/src/Textfield/CharacterCounter.svelte
@@ -0,0 +1 @@
+<div class="mdc-text-field-character-counter" />
diff --git a/packages/materialdesign-components/src/Textfield/HelperText.svelte b/packages/materialdesign-components/src/Textfield/HelperText.svelte
new file mode 100644
index 0000000000..038fbea1a5
--- /dev/null
+++ b/packages/materialdesign-components/src/Textfield/HelperText.svelte
@@ -0,0 +1,24 @@
+<script>
+  import ClassBuilder from "../ClassBuilder.js"
+  import CharacterCounter from "./CharacterCounter.svelte"
+
+  export let persistent = false
+  export let validation = false
+  export let useCharCounter = false
+  export let errorText = ""
+  export let helperText = ""
+
+  const cb = new ClassBuilder("text-field-helper-text")
+
+  let modifiers = { persistent, validation }
+  let props = { modifiers }
+
+  let helperClasses = cb.build({ props })
+</script>
+
+<div class="mdc-text-field-helper-line">
+  <div class={helperClasses}>{!!errorText ? errorText : helperText}</div>
+  {#if useCharCounter}
+    <CharacterCounter />
+  {/if}
+</div>
diff --git a/packages/materialdesign-components/src/Textfield/Textfield.svelte b/packages/materialdesign-components/src/Textfield/Textfield.svelte
index 6ea943f94c..3ff0b00a17 100644
--- a/packages/materialdesign-components/src/Textfield/Textfield.svelte
+++ b/packages/materialdesign-components/src/Textfield/Textfield.svelte
@@ -6,6 +6,8 @@
   import ClassBuilder from "../ClassBuilder.js"
   import NotchedOutline from "../Common/NotchedOutline.svelte"
   import FloatingLabel from "../Common/FloatingLabel.svelte"
+  import HelperText from "./HelperText.svelte"
+  import CharacterCounter from "./CharacterCounter.svelte"
   import Icon from "../Icon.svelte"
 
   const cb = new ClassBuilder("text-field", ["primary", "medium"])
@@ -31,9 +33,8 @@
   export let size = "medium"
   export let type = "text" //text or password
   export let required = false
-  export let minLength = 0
-  export let maxLength = 100
-  export let useCharCounter = false
+  export let minLength = null
+  export let maxLength = null
   export let helperText = ""
   export let errorText = ""
   export let placeholder = ""
@@ -64,21 +65,16 @@
     modifiers = { ...modifiers, noLabel: "no-label" }
   }
 
-  let helperClasses = cb.debase(`${cb.block}-helper-text`, {
-    modifiers: { persistent, validation },
-  })
-
   let useLabel = !!label && (!fullwidth || (fullwidth && textarea))
   let useIcon = !!icon && (!textarea && !fullwidth)
 
-  $: useNotchedOutline = variant == "outlined" || textarea
-
   if (useIcon) {
     setContext("BBMD:icon:context", "text-field")
     let iconClass = trailingIcon ? "with-trailing-icon" : "with-leading-icon"
     modifiers = { ...modifiers, iconClass }
   }
 
+  $: useNotchedOutline = variant == "outlined" || textarea
   $: renderLeadingIcon = useIcon && !trailingIcon
   $: renderTrailingIcon = useIcon && trailingIcon
 
@@ -100,9 +96,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
 <div class="textfield-container" class:fullwidth>
   <div bind:this={tf} class={blockClasses}>
     {#if textarea}
-      {#if useCharCounter}
-        <div class="mdc-text-field-character-counter">{renderMaxLength}</div>
-      {/if}
+      <CharacterCounter />
       <textarea
         {id}
         class={inputClasses}
@@ -148,13 +142,12 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
       <FloatingLabel forInput={id} text={label} />
     {/if}
   </div>
-  <!-- TODO: Split to own component? -->
-  <div class="mdc-text-field-helper-line">
-    <div class={helperClasses}>{!!errorText ? errorText : helperText}</div>
-    {#if useCharCounter && !textarea}
-      <div class="mdc-text-field-character-counter">{renderMaxLength}</div>
-    {/if}
-  </div>
+  <HelperText
+    {persistent}
+    {validation}
+    {errorText}
+    {helperText}
+    useCharCounter={!!maxLength && !textarea} />
 </div>
 
 <style>