feat: add text-area component

packages/storybook/src/stories/text-area.stories.tsx

@@ -0,0 +1,19 @@
+import { ScoutTextArea } from "@scouterna/ui-react";
+import preview from "#.storybook/preview";
+
+const meta = preview.meta({
+  title: "Uncategorized/Text-Area",
+  component: ScoutTextArea,
+  parameters: {
+    layout: "centered",
+  },
+});
+
+export default meta;
+
+export const BasicExample = meta.story({
+  args: {
+    label: "",
+  },
+  render: (args) => <ScoutTextArea {...args} />,
+});

packages/ui-react/lib/components/stencil-generated/components.ts

@@ -24,6 +24,7 @@ import { ScoutLoader as ScoutLoaderElement, defineCustomElement as defineScoutLo
 import { ScoutSelect as ScoutSelectElement, defineCustomElement as defineScoutSelect } from "@scouterna/ui-webc/dist/components/scout-select.js";
 import { ScoutStack as ScoutStackElement, defineCustomElement as defineScoutStack } from "@scouterna/ui-webc/dist/components/scout-stack.js";
 import { ScoutSwitch as ScoutSwitchElement, defineCustomElement as defineScoutSwitch } from "@scouterna/ui-webc/dist/components/scout-switch.js";
+import { ScoutTextArea as ScoutTextAreaElement, defineCustomElement as defineScoutTextArea } from "@scouterna/ui-webc/dist/components/scout-text-area.js";
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
@@ -243,3 +244,14 @@ export const ScoutSwitch: StencilReactComponent<ScoutSwitchElement, ScoutSwitchE
     } as ScoutSwitchEvents,
     defineCustomElement: defineScoutSwitch
 });
+
+export type ScoutTextAreaEvents = NonNullable<unknown>;
+
+export const ScoutTextArea: StencilReactComponent<ScoutTextAreaElement, ScoutTextAreaEvents> = /*@__PURE__*/ createComponent<ScoutTextAreaElement, ScoutTextAreaEvents>({
+    tagName: 'scout-text-area',
+    elementClass: ScoutTextAreaElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as ScoutTextAreaEvents,
+    defineCustomElement: defineScoutTextArea
+});

packages/ui-webc/src/components.d.ts

@@ -230,6 +230,20 @@ export namespace Components {
          */
         "toggled": boolean;
     }
+    interface ScoutTextArea {
+        /**
+          * @default false
+         */
+        "autofocus": boolean;
+        "disabled"?: boolean;
+        "form": string;
+        "label"?: string;
+        "maxLength"?: number;
+        "placeholder"?: string;
+        "readOnly"?: boolean;
+        "required"?: boolean;
+        "value"?: string;
+    }
 }
 export interface ScoutBottomBarItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -480,6 +494,12 @@ declare global {
         prototype: HTMLScoutSwitchElement;
         new (): HTMLScoutSwitchElement;
     };
+    interface HTMLScoutTextAreaElement extends Components.ScoutTextArea, HTMLStencilElement {
+    }
+    var HTMLScoutTextAreaElement: {
+        prototype: HTMLScoutTextAreaElement;
+        new (): HTMLScoutTextAreaElement;
+    };
     interface HTMLElementTagNameMap {
         "scout-bottom-bar": HTMLScoutBottomBarElement;
         "scout-bottom-bar-item": HTMLScoutBottomBarItemElement;
@@ -497,6 +517,7 @@ declare global {
         "scout-select": HTMLScoutSelectElement;
         "scout-stack": HTMLScoutStackElement;
         "scout-switch": HTMLScoutSwitchElement;
+        "scout-text-area": HTMLScoutTextAreaElement;
     }
 }
 declare namespace LocalJSX {
@@ -755,6 +776,20 @@ declare namespace LocalJSX {
          */
         "toggled"?: boolean;
     }
+    interface ScoutTextArea {
+        /**
+          * @default false
+         */
+        "autofocus"?: boolean;
+        "disabled"?: boolean;
+        "form"?: string;
+        "label"?: string;
+        "maxLength"?: number;
+        "placeholder"?: string;
+        "readOnly"?: boolean;
+        "required"?: boolean;
+        "value"?: string;
+    }
     interface IntrinsicElements {
         "scout-bottom-bar": ScoutBottomBar;
         "scout-bottom-bar-item": ScoutBottomBarItem;
@@ -772,6 +807,7 @@ declare namespace LocalJSX {
         "scout-select": ScoutSelect;
         "scout-stack": ScoutStack;
         "scout-switch": ScoutSwitch;
+        "scout-text-area": ScoutTextArea;
     }
 }
 export { LocalJSX as JSX };
@@ -808,6 +844,7 @@ declare module "@stencil/core" {
             "scout-select": LocalJSX.ScoutSelect & JSXBase.HTMLAttributes<HTMLScoutSelectElement>;
             "scout-stack": LocalJSX.ScoutStack & JSXBase.HTMLAttributes<HTMLScoutStackElement>;
             "scout-switch": LocalJSX.ScoutSwitch & JSXBase.HTMLAttributes<HTMLScoutSwitchElement>;
+            "scout-text-area": LocalJSX.ScoutTextArea & JSXBase.HTMLAttributes<HTMLScoutTextAreaElement>;
         }
     }
 }

packages/ui-webc/src/components/text-area/readme.md

@@ -0,0 +1,23 @@
+# scout-text-area
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute     | Description | Type      | Default     |
+| ------------- | ------------- | ----------- | --------- | ----------- |
+| `autofocus`   | `autofocus`   |             | `boolean` | `false`     |
+| `disabled`    | `disabled`    |             | `boolean` | `undefined` |
+| `form`        | `form`        |             | `string`  | `undefined` |
+| `label`       | `label`       |             | `string`  | `undefined` |
+| `maxLength`   | `max-length`  |             | `number`  | `undefined` |
+| `placeholder` | `placeholder` |             | `string`  | `undefined` |
+| `readOnly`    | `read-only`   |             | `boolean` | `undefined` |
+| `required`    | `required`    |             | `boolean` | `undefined` |
+| `value`       | `value`       |             | `string`  | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/ui-webc/src/components/text-area/text-area.css

@@ -0,0 +1,21 @@
+:host {
+  display: inline-flex;
+}
+
+.flexbox{
+  display: inline-flex;
+  flex-direction: column;
+  padding: 0.5rem;
+}
+
+.textarea{
+  resize: none;
+  height: var(--spacing-24);
+  width: var(--spacing-50);
+  padding: var(--spacing-2);
+  font: var(--type-body-base);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--spacing-2);
+  background-color: var(--color-white);
+  color: var(--color-text-base);
+}

packages/ui-webc/src/components/text-area/text-area.tsx

@@ -0,0 +1,50 @@
+import { Component, h, Prop } from "@stencil/core";
+
+@Component({
+  tag: "scout-text-area",
+  styleUrl: "text-area.css",
+  shadow: {
+    delegatesFocus: true,
+  },
+})
+
+export class ScoutTextArea {
+  @Prop() autofocus: boolean = false;
+
+  @Prop() disabled?: boolean;
+
+  @Prop() form: string;
+
+  @Prop() maxLength?: number;
+
+  @Prop() placeholder?: string;
+
+  @Prop() readOnly?: boolean;
+
+  @Prop() required?: boolean;
+
+  @Prop() value?: string;
+
+  @Prop() label?: string;
+
+  render() {
+    return (
+      <div class="flexbox">
+        <div>
+          {this.label}
+        </div>
+        <textarea 
+          class="textarea"
+          autofocus={this.autofocus}
+          disabled={this.disabled}
+          form={this.form}
+          maxLength={this.maxLength}
+          placeholder={this.placeholder}
+          readOnly={this.readOnly}
+          required={this.required}
+          value={this.value}
+        />
+      </div>
+    );
+  }
+}