feat: initial commit

src/components/TextArea/TextArea.Skeleton.svelte

@@ -0,0 +1,17 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let hideLabel = false;
+  export let props = {};
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--form-item', className);
+</script>
+
+<div {...props} class={_class}>
+  {#if !hideLabel}
+    <span class={cx('--label', '--skeleton')} />
+  {/if}
+  <div class={cx('--skeleton', '--text-area')} />
+</div>

src/components/TextArea/TextArea.Story.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let story = undefined;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  import TextArea from './TextArea.svelte';
+  import TextAreaSkeleton from './TextArea.Skeleton.svelte';
+
+  let value = '';
+</script>
+
+<Layout>
+  {#if story === 'skeleton'}
+    <TextAreaSkeleton {...$$props} />
+  {:else}
+    <TextArea {...$$props} bind:value />
+  {/if}
+</Layout>

src/components/TextArea/TextArea.stories.js

@@ -0,0 +1,23 @@
+import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
+import Component from './TextArea.Story.svelte';
+
+export default { title: 'TextArea', decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    id: 'text-area',
+    disabled: boolean('Disabled (disabled)', false),
+    light: boolean('Light variant (light)', false),
+    hideLabel: boolean('No label (hideLabel)', false),
+    labelText: text('Label text (labelText)', 'Text Area label'),
+    invalid: boolean('Show form validation UI (invalid)', false),
+    invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
+    helperText: text('Helper text (helperText)', 'Optional helper text.'),
+    placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
+    cols: number('Columns (columns)', 50),
+    rows: number('Rows (rows)', 4)
+  }
+});
+
+export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

src/components/TextArea/TextArea.svelte

@@ -0,0 +1,89 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let cols = 50;
+  export let disabled = false;
+  export let id = Math.random();
+  export let labelText = undefined;
+  export let placeholder = '';
+  export let rows = 4;
+  export let value = undefined;
+  export let invalid = false;
+  export let invalidText = undefined;
+  export let helperText = undefined;
+  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 _textAreaClass = cx(
+    '--text-area',
+    light && '--text-area--light',
+    invalid && '--text-area--invalid',
+    className
+  );
+
+  function handleClick(event) {
+    if (!disabled) {
+      dispatch('click', event);
+    }
+  }
+
+  function handleChange(event) {
+    if (!disabled) {
+      dispatch('change', event);
+    }
+  }
+
+  function handleInput(event) {
+    if (!disabled) {
+      dispatch('input', event);
+    }
+  }
+</script>
+
+<div class={cx('--form-item')}>
+  {#if labelText && !hideLabel}
+    <label for={id} class={_labelClass}>{labelText}</label>
+  {/if}
+  {#if helperText}
+    <div class={_helperTextClass}>{helperText}</div>
+  {/if}
+  <div class={cx('--text-area__wrapper')} data-invalid={invalid || undefined}>
+    {#if invalid}
+      <WarningFilled16 class={cx('--text-area__invalid-icon')} />
+    {/if}
+    <textarea
+      {...props}
+      on:click
+      on:click={handleClick}
+      on:change
+      on:change={handleChange}
+      on:input
+      on:input={handleInput}
+      class={_textAreaClass}
+      aria-invalid={invalid || undefined}
+      aria-describedby={invalid ? errorId : undefined}
+      {disabled}
+      {id}
+      {cols}
+      {rows}
+      {value}
+      {placeholder}
+      {value} />
+  </div>
+  {#if invalid}
+    <div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
+  {/if}
+</div>

src/components/TextArea/index.js

@@ -0,0 +1,4 @@
+import TextArea from './TextArea.svelte';
+
+export default TextArea;
+export { default as TextAreaSkeleton } from './TextArea.Skeleton.svelte';