feat: textarea

README.md

@@ -20,7 +20,7 @@ A simple set of components for prototypes and small own projects on Vue 3.
 - [x] Popper
 - [ ] Select
 - [ ] Switch
-- [ ] TextArea
+- [x] TextArea
 
 **Env:**
 - [x] Colors

src/components/FirTextArea/FirTextArea.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import FirTextArea from './FirTextArea.vue';
+import type { FirTextAreaProps } from './FirTextArea.types';
+
+const meta = {
+    title: 'Components/FirTextArea',
+    component: FirTextArea,
+    tags: ['autodocs'],
+    argTypes: {
+        value: { control: 'text', description: 'Input value', type: 'string' },
+        placeholder: { control: 'text', description: 'Placeholder value', type: 'string' },
+        error: { control: 'text', description: 'Error text', type: 'string' },
+        disabled: { control: 'boolean', description: 'Is disabled', type: 'boolean' },
+    },
+ 	args: {
+
+    },
+} satisfies Meta<FirTextAreaProps>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Description',
+        error: '',
+        disabled: false,
+        placeholder: 'Enter description',
+    }
+};

src/components/FirTextArea/FirTextArea.types.ts

@@ -0,0 +1,7 @@
+import { TextareaHTMLAttributes } from 'vue';
+
+export interface FirTextAreaProps extends /** @vue-ignore */ TextareaHTMLAttributes {
+    label?: string;
+    error?: string;
+    resize?: boolean;
+}

src/components/FirTextArea/FirTextArea.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { FirTextAreaProps } from './FirTextArea.types';
+
+const props = withDefaults(defineProps<FirTextAreaProps>(), {
+    error: '',
+    resize: false,
+});
+
+// const model = defineModel('value');
+</script>
+
+<template>
+    <label :class="{
+        'fir-textarea__wrapper': true,
+        'fir-textarea__disabled': $attrs.disabled,
+    }">
+        <span v-if="props.label" 
+              :class="{
+                  'fir-textarea__label': true,
+                  'fir-textarea__label_error': props.error,
+              }">
+            {{ props.label }}
+        </span>
+        <textarea
+            :class="{
+                'fir-textarea__root': true,
+                'fir-textarea__root_error': !!props.error,
+            }"
+            v-bind="$attrs"
+            rows="3"
+        />
+        <span v-if="props.error" class="fir-textarea__error">{{ props.error }}</span>
+    </label>
+</template>
+
+<style>
+.fir-textarea__wrapper {
+    gap: 2px;
+    display: flex;
+    flex-direction: column;
+    color: var(--fir-global-color);
+    font-family: var(--fir-global-font-family);
+}
+.fir-textarea__wrapper.fir-textarea__disabled {
+    color: var(--fir-global-text-disabled-color);
+}
+.fir-textarea__disabled .fir-textarea__root::placeholder {
+    color: var(--fir-global-text-disabled-color);
+}
+.fir-textarea__label {
+    margin-left: 4px;
+    font-size: var(--fir-input-label-font-size);
+}
+.fir-textarea__label.fir-textarea__label_error {
+    color: var(--fir-global-text-error-color);
+}
+.fir-textarea__root {
+    color: inherit;
+    resize: vertical;
+    min-height: 16px;
+    border: var(--fir-input-border);
+    padding: var(--fir-input-padding);
+    font-size: var(--fir-input-font-size);
+    transition: var(--fir-global-duration);
+    border-radius: var(--fir-global-border-radius);
+}
+.fir-textarea__root::placeholder {
+    font-size: var(--fir-input-ph-font-size);
+}
+.fir-textarea__root:hover {
+    border: var(--fir-input-border-hover);
+}
+.fir-textarea__root:disabled {
+    border: var(--fir-input-border-disabled);
+}
+.fir-textarea__root:focus-visible {
+    border: var(--fir-input-border-focus);
+    outline: none;
+}
+.fir-textarea__root.fir-textarea__root_error {
+    border: var(--fir-input-border-error);
+}
+.fir-textarea__error {
+    margin-left: 4px;
+    color: var(--fir-global-text-error-color);
+    font-size: var(--fir-input-error-font-size);
+}
+</style>

src/styles/variables.css

@@ -98,7 +98,7 @@
     --fir-icon-button-bg-color: transparent;
     --fir-icon-button-bg-color-hover: var(--fir-c-transparent-light);
 
-    /* Input */
+    /* Input, Textarea */
     --fir-input-font-size: var(--fir-global-font-size-medium);
     --fir-input-label-font-size: var(--fir-global-font-size-small);
     --fir-input-padding: 4px 8px;