@dropi/ui-components 1.0.0

package/src/components-source/dropi-text-area/droip-text-area.component.stories.ts

@@ -0,0 +1,138 @@
+/**
+ * @fileoverview Text Area component stories for Storybook
+ * @description Multi-line text input for longer text content
+ */
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { DropiTextAreaComponent } from './dropi-text-area.component';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { IconComponent } from '../icon/icon.component';
+import { CommonModule } from '@angular/common';
+
+const description = `
+Properties that control the behavior and appearance of the component.
+
+✅ **Required**
+
+**formControl: _AbstractControl_;** // Form control associated with the field
+
+**label: _string_;** // Descriptive text displayed as a label
+
+**placeholder: _string_;** // Example text inside the field
+
+**maxLength: _number_;** // Maximum characters allowed (use with Validators.maxLength)
+
+
+🆗 **Optional**
+
+**id?: _string_;** // Unique field identifier
+
+**textHelper?: _string_;** // Helper text displayed below the field
+
+**rows?: _number_;** // Number of visible rows (default: 4)
+
+**resize?: _'none' | 'both' | 'horizontal' | 'vertical'_;** // Resize behavior (default: 'vertical')
+
+---
+
+**Usage Example**
+
+\`\`\`ts
+{
+  label: 'Comment',
+  placeholder: 'Write your comment...',
+  maxLength: 200,
+  id: 'comment',
+  textHelper: 'Maximum 200 characters.',
+  rows: 5,
+  resize: 'vertical',
+  formControl: new FormControl('', [Validators.required, Validators.maxLength(200)])
+}
+\`\`\`
+
+`;
+
+const meta: Meta<DropiTextAreaComponent> = {
+  title: 'UI Dropi/Text Area',
+  component: DropiTextAreaComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ReactiveFormsModule, TranslateModule.forRoot(), IconComponent],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A multi-line text input component for longer text content.
+Ideal for comments, descriptions, messages, and other extended text input.
+
+### Key Features
+- **Form integration**: Works with Angular Reactive Forms
+- **Character limit**: Built-in maxLength support with counter
+- **Resize control**: Configurable resize behavior
+- **Validation**: Error state display
+- **Helper text**: Optional guidance text
+        `,
+      },
+    },
+  },
+  argTypes: {
+    textAreaProperties: {
+      control: false,
+      description: description,
+      table: { category: 'Data' },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Controls whether the text area is disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'State',
+      },
+    },
+    showObligatoryAsterisk: {
+      control: 'boolean',
+      description: 'Shows required field asterisk when true',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Appearance',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropiTextAreaComponent>;
+
+const formControl = new FormControl('', [Validators.required, Validators.maxLength(200)]);
+
+/**
+ * Default text area with all standard options.
+ */
+export const Default: Story = {
+  args: {
+    disabled: false,
+    showObligatoryAsterisk: false,
+    textAreaProperties: {
+      label: 'Comment',
+      placeholder: 'Write your comment...',
+      maxLength: 200,
+      id: 'comment',
+      textHelper: 'Maximum 200 characters.',
+      rows: 5,
+      resize: 'vertical',
+      formControl: formControl,
+    },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=2-395&p=f&m=dev',
+    },
+  },
+};

package/src/components-source/dropi-text-area/dropi-text-area.component.html

@@ -0,0 +1,63 @@
+<div class="textarea-wrapper">
+  <label
+    *ngIf="textAreaProperties?.label !== ''"
+    [for]="textAreaProperties.label"
+    [ngStyle]="{ color: disabled ? 'var(--Gray-Gray-500)' : 'var(--Gray-Gray-600)' }"
+    >{{ textAreaProperties.label | translate }}
+    <span
+      *ngIf="
+        isRequired() &&
+        showObligatoryAsterisk &&
+        (!disabled || !textAreaProperties.formControl.disabled)
+      "
+      >*</span
+    ></label
+  >
+
+  <div class="textarea-container">
+    <textarea
+      [id]="textAreaProperties.id ? textAreaProperties.id : textAreaProperties.label"
+      [rows]="textAreaProperties.rows ? textAreaProperties.rows : 4"
+      [formControl]="textAreaProperties.formControl"
+      [placeholder]="textAreaProperties.placeholder | translate"
+      [maxlength]="textAreaProperties?.maxLength"
+      [minlength]="textAreaProperties?.minLength ?? 0"
+      [style.resize]="textAreaProperties?.resize ? textAreaProperties.resize : 'vertical'"
+      class="form-control Body-M-Regular"
+      [ngClass]="{
+        'form-control-invalid':
+          textAreaProperties.formControl?.invalid && textAreaProperties.formControl?.touched,
+        'form-control-valid':
+          textAreaProperties.formControl?.valid && textAreaProperties.formControl?.touched
+      }"
+    >
+    {{ textAreaProperties.formControl.value }}
+    </textarea>
+    <div class="char-counter">
+      {{ textAreaProperties.formControl.value?.length }}/{{ textAreaProperties.maxLength }}
+    </div>
+  </div>
+  <div
+    *ngIf="
+      textAreaProperties.textHelper ||
+      (textAreaProperties.formControl.invalid && textAreaProperties.formControl.touched)
+    "
+    class="form-control-helper"
+  >
+    <app-icon
+      *ngIf="textAreaProperties.formControl.invalid && textAreaProperties.formControl.touched"
+      name="Warning-circle"
+      width="12px"
+      height="12px"
+      color="Error-Error-500"
+    ></app-icon>
+    <span
+      [ngStyle]="{ color: disabled ? 'var(--Gray-Gray-500)' : 'var(--Gray-Gray-600)' }"
+      [ngClass]="{
+        'invalid-color':
+          textAreaProperties.formControl.invalid && textAreaProperties.formControl.touched
+      }"
+      >{{ (getErrorMessage() | translate) || (textAreaProperties.textHelper | translate) }}</span
+    >
+  </div>
+</div>

package/src/components-source/dropi-text-area/dropi-text-area.component.scss

@@ -0,0 +1,106 @@
+.form-group {
+  position: relative;
+  width: 100%;
+}
+
+.form-control {
+  border: 1px solid var(--Gray-Gray-200);
+  border-radius: var(--Border-2);
+  font-size: var(--font-size-s);
+  transition: border-color 0.3s ease-in-out;
+}
+
+.form-control-helper {
+  display: flex;
+  gap: 4px;
+  align-items: baseline;
+  span {
+    display: block;
+    margin-top: 8px;
+    color: var(--Gray-Gray-600);
+    font-size: var(--font-size-xs);
+  }
+}
+
+.form-control:focus::placeholder {
+  color: var(--Gray-Gray-500);
+}
+
+.form-control:focus {
+  border-color: var(--Info-Info-500);
+  outline: none;
+}
+
+.form-control-valid {
+  border: 1px solid var(--Gray-Gray-400) !important;
+  color: var(--Gray-Gray-600);
+  outline: none;
+}
+
+.form-control-invalid {
+  border: 1px solid var(--Error-Error-500) !important;
+  color: var(--Gray-Gray-600);
+  outline: none;
+}
+
+.form-control:disabled {
+  border: 1px solid var(--Gray-Gray-200) !important;
+  color: var(--Gray-Gray-400);
+  background-color: var(--Gray-Gray-50);
+  outline: none;
+}
+
+.form-control:focus + label,
+.form-control:not(:placeholder-shown) + label {
+  top: -28px;
+  left: 0;
+  margin-bottom: 8px;
+  font-size: var(--font-size-xs);
+  width: unset;
+  color: var(--Gray-Gray-600);
+}
+
+.form-control:disabled + label {
+  color: var(--Gray-Gray-500);
+}
+
+.form-control:disabled + label + .form-control-helper {
+  color: var(--Gray-Gray-500);
+}
+
+.invalid-color {
+  color: var(--Error-Error-500) !important;
+}
+
+.textarea-wrapper {
+  position: relative;
+  width: 100%;
+  label {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-regular);
+    color: var(--Gray-Gray-600);
+    span {
+      color: var(--Error-Error-500);
+    }
+  }
+}
+
+.textarea-container {
+  position: relative;
+}
+
+textarea {
+  width: 100%;
+  overflow: auto;
+  padding: 12px;
+  box-sizing: border-box;
+  border-radius: var(--Border-2);
+}
+
+.char-counter {
+  position: absolute;
+  bottom: 10px;
+  right: 16px;
+  font-size: 12px;
+  color: var(--Gray-Gray-500);
+}