feat(components): add TextInput

src/components/TextInput/TextInput.svelte

@@ -0,0 +1,79 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let disabled = false;
+  export let id = Math.random();
+  export let labelText = '';
+  export let placeholder = '';
+  export let type = '';
+  export let value = '';
+  export let invalid = false;
+  export let invalidText = '';
+  export let helperText = '';
+  export let hideLabel = false;
+  export let light = false;
+  export let props = {};
+
+  import { createEventDispatcher } from 'svelte';
+  import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
+  import { cx } from '../../lib';
+
+  const dispatch = createEventDispatcher();
+  const errorId = `${id}-error`;
+  const _labelClass = cx(
+    '--label',
+    hideLabel && '--visually-hidden',
+    disabled && '--label--disabled'
+  );
+  const _helperTextClass = cx('--form__helper-text', disabled && '--form__helper-text--disabled');
+  const _textInputClass = cx(
+    '--text-input',
+    light && '--text-input--light',
+    invalid && '--text-input--invalid',
+    className
+  );
+</script>
+
+<div class={cx('--form-item', '--text-input-wrapper')}>
+  {#if labelText}
+    <label for={id} class={_labelClass}>{labelText}</label>
+  {/if}
+  {#if helperText}
+    <div class={_helperTextClass}>{helperText}</div>
+  {/if}
+  <div class={cx('--text-input__field-wrapper')} data-invalid={invalid || undefined}>
+    {#if invalid}
+      <WarningFilled16 class={cx('--text-input__invalid-icon')} />
+    {/if}
+    <input
+      {...props}
+      class={_textInputClass}
+      on:click={event => {
+        if (!disabled) {
+          dispatch('click', event);
+        }
+      }}
+      on:change={event => {
+        if (!disabled) {
+          dispatch('change', event);
+        }
+      }}
+      on:input={event => {
+        value = event.target.value;
+        if (!disabled) {
+          dispatch('input', event);
+        }
+      }}
+      data-invalid={invalid || undefined}
+      aria-invalid={invalid || undefined}
+      aria-describedby={invalid ? errorId : undefined}
+      {id}
+      {placeholder}
+      {type}
+      {value}
+      {disabled} />
+  </div>
+  {#if invalid}
+    <div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
+  {/if}
+</div>