feat(TextField): add character counter

Author: hobbitronics

components/mdc/TextInput/TextField.svelte

@@ -19,6 +19,7 @@ let element = {}
 let mdcTextField = {}
 
 $: mdcTextField.value = value
+$: width = `${element.offsetWidth}px`
 
 onMount(() => {
   mdcTextField = new MDCTextField(element)
@@ -47,6 +48,10 @@ const focus = (node) => autofocus && node.focus()
 .mdc-text-field--label-floating .mdc-floating-label {
   margin-left: 0;
 }
+.mdc-text-field-helper-line {
+  float: right;
+  padding-right: 1rem;
+}
 </style>
 
 <label
@@ -83,6 +88,13 @@ const focus = (node) => autofocus && node.focus()
     <span class="mdc-notched-outline__trailing" />
   </span>
 </label>
-{#if required && !value}
-  <div class="required">*Required</div>
-{/if}
+<div style="width: {width};">
+  {#if required && !value}
+    <div class="required d-inline">*Required</div>
+  {/if}
+  {#if maxlength}
+    <div class="mdc-text-field-helper-line">
+      <div class="mdc-text-field-character-counter">0 / {maxlength}</div>
+    </div>
+  {/if}
+</div>

stories/TextField.stories.svelte

@@ -3,10 +3,7 @@ import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
 import { TextField } from '../components/mdc'
 import { copyAndModifyArgs } from './helpers.js'
 
-let title = 'TextField'
-
 const args = {
-  label: title,
   'on:keydown': (event) => console.log('TextField keydown', event),
   'on:keypress': (event) => (lastKey = event.key),
   'on:keyup': (event) => console.log('TextField keyup', event),
@@ -27,7 +24,7 @@ let lastKey = ''
 
 <Story name="Default" {args} />
 
-<Story name="Required" args={copyAndModifyArgs(args, { required: true })} />
+<Story name="label" args={copyAndModifyArgs(args, { label: 'label' })} />
 
 <Story name="Placeholder" args={copyAndModifyArgs(args, { placeholder: 'Enter text here' })} />
 
@@ -38,3 +35,5 @@ let lastKey = ''
 <Story name="maxlength" args={copyAndModifyArgs(args, { maxlength: 50 })} />
 
 <Story name="icon" args={copyAndModifyArgs(args, { icon: 'home' })} />
+
+<Story name="Required" args={copyAndModifyArgs(args, { required: true })} />