@nuvia-ui/components 4.0.1

package/src/ds-textarea/ds-textarea.stories.js

@@ -0,0 +1,335 @@
+import { html, nothing } from 'lit';
+import './ds-textarea.js';
+import '../token-provider/token-provider.js';
+
+export default {
+  title: 'Components/Textarea',
+  component: 'ds-textarea',
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    info: { control: 'text' },
+    labelPosition: {
+      control: 'select',
+      options: ['top', 'inline-start']
+    },
+    labelWidth: { control: 'text' },
+    placeholder: { control: 'text' },
+    value: { control: 'text' },
+    helper: { control: 'text' },
+    validationStatus: {
+      control: 'select',
+      options: ['', 'error', 'success']
+    },
+    validationMessage: { control: 'text' },
+    disabled: { control: 'boolean' },
+    readonly: { control: 'boolean' },
+    required: { control: 'boolean' },
+    rows: { control: 'number' },
+    minlength: { control: 'number' },
+    maxlength: { control: 'number' },
+    showCounter: { control: 'boolean' },
+    resize: {
+      control: 'select',
+      options: ['none', 'vertical']
+    },
+    autoResize: { control: 'boolean' },
+    clearable: { control: 'boolean' }
+  },
+  args: {
+    label: 'Description',
+    info: '',
+    labelPosition: 'top',
+    labelWidth: '',
+    placeholder: 'Enter your text here...',
+    value: '',
+    helper: '',
+    validationStatus: '',
+    validationMessage: '',
+    disabled: false,
+    readonly: false,
+    required: false,
+    rows: 3,
+    minlength: undefined,
+    maxlength: undefined,
+    showCounter: false,
+    resize: 'vertical',
+    autoResize: false,
+    clearable: false
+  }
+};
+
+export const Default = {
+  render: (args) => html`
+    <ds-textarea
+      label="${args.label}"
+      info="${args.info || nothing}"
+      label-position="${args.labelPosition || nothing}"
+      label-width="${args.labelWidth || nothing}"
+      placeholder="${args.placeholder}"
+      value="${args.value}"
+      helper="${args.helper || nothing}"
+      validation-status="${args.validationStatus || nothing}"
+      validation-message="${args.validationMessage || nothing}"
+      ?disabled="${args.disabled}"
+      ?readonly="${args.readonly}"
+      ?required="${args.required}"
+      rows="${args.rows}"
+      minlength="${args.minlength || nothing}"
+      maxlength="${args.maxlength || nothing}"
+      ?show-counter="${args.showCounter}"
+      resize="${args.resize}"
+      ?auto-resize="${args.autoResize}"
+      ?clearable="${args.clearable}"
+    ></ds-textarea>
+  `
+};
+
+export const WithCounter = {
+  args: {
+    label: 'Bio',
+    placeholder: 'Tell us about yourself...',
+    maxlength: 200,
+    showCounter: true,
+    helper: 'Maximum 200 characters'
+  },
+  render: (args) => html`
+    <ds-textarea
+      label="${args.label}"
+      placeholder="${args.placeholder}"
+      maxlength="${args.maxlength}"
+      ?show-counter="${args.showCounter}"
+      helper="${args.helper}"
+    ></ds-textarea>
+  `
+};
+
+export const WithError = {
+  args: {
+    label: 'Comments',
+    value: 'Too short',
+    validationStatus: 'error',
+    validationMessage: 'Comment must be at least 10 characters',
+    minlength: 10,
+    maxlength: 500,
+    showCounter: true
+  },
+  render: (args) => html`
+    <ds-textarea
+      label="${args.label}"
+      value="${args.value}"
+      validation-status="${args.validationStatus}"
+      validation-message="${args.validationMessage}"
+      minlength="${args.minlength}"
+      maxlength="${args.maxlength}"
+      ?show-counter="${args.showCounter}"
+    ></ds-textarea>
+  `
+};
+
+export const AutoResize = {
+  args: {
+    label: 'Auto-growing textarea',
+    placeholder: 'Type something and watch it grow...',
+    helper: 'This textarea automatically grows with your content',
+    autoResize: true,
+    rows: 2
+  },
+  render: (args) => html`
+    <ds-textarea
+      label="${args.label}"
+      placeholder="${args.placeholder}"
+      helper="${args.helper}"
+      ?auto-resize="${args.autoResize}"
+      rows="${args.rows}"
+    ></ds-textarea>
+  `
+};
+
+export const ResizeNone = {
+  args: {
+    label: 'Fixed height textarea',
+    placeholder: 'This textarea cannot be resized manually',
+    resize: 'none',
+    rows: 5
+  },
+  render: (args) => html`
+    <ds-textarea
+      label="${args.label}"
+      placeholder="${args.placeholder}"
+      resize="${args.resize}"
+      rows="${args.rows}"
+    ></ds-textarea>
+  `
+};
+
+export const Disabled = {
+  args: {
+    label: 'Disabled textarea',
+    value: 'This content cannot be edited',
+    disabled: true,
+    rows: 4
+  },
+  render: (args) => html`
+    <ds-textarea
+      label="${args.label}"
+      value="${args.value}"
+      ?disabled="${args.disabled}"
+      rows="${args.rows}"
+    ></ds-textarea>
+  `
+};
+
+export const Readonly = {
+  args: {
+    label: 'Read-only textarea',
+    value: 'This content is read-only and can be selected but not modified.',
+    readonly: true,
+    rows: 3
+  },
+  render: (args) => html`
+    <ds-textarea
+      label="${args.label}"
+      value="${args.value}"
+      ?readonly="${args.readonly}"
+      rows="${args.rows}"
+    ></ds-textarea>
+  `
+};
+
+export const WithInfo = {
+  args: {
+    label: 'Feedback',
+    info: 'Please provide detailed feedback about your experience',
+    placeholder: 'Share your thoughts...',
+    maxlength: 1000,
+    showCounter: true,
+    rows: 5
+  },
+  render: (args) => html`
+    <ds-textarea
+      label="${args.label}"
+      info="${args.info}"
+      placeholder="${args.placeholder}"
+      maxlength="${args.maxlength}"
+      ?show-counter="${args.showCounter}"
+      rows="${args.rows}"
+    ></ds-textarea>
+  `
+};
+
+export const Clearable = {
+  args: {
+    label: 'Clearable textarea',
+    value: 'This text can be cleared',
+    clearable: true,
+    helper: 'Focus the field to see the clear button (or press Escape)',
+    rows: 3
+  },
+  render: (args) => html`
+    <ds-textarea
+      label="${args.label}"
+      value="${args.value}"
+      ?clearable="${args.clearable}"
+      helper="${args.helper}"
+      rows="${args.rows}"
+    ></ds-textarea>
+  `
+};
+
+export const AllStates = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px;">
+      <ds-textarea
+        label="Default"
+        placeholder="Enter text..."
+        rows="3"
+      ></ds-textarea>
+
+      <ds-textarea
+        label="With counter"
+        maxlength="100"
+        show-counter
+        value="Sample text"
+        rows="3"
+      ></ds-textarea>
+
+      <ds-textarea
+        label="Auto-resize"
+        placeholder="Grows automatically..."
+        auto-resize
+        rows="2"
+      ></ds-textarea>
+
+      <ds-textarea
+        label="With error"
+        value="Too short"
+        validation-status="error"
+        validation-message="Minimum 20 characters required"
+        minlength="20"
+        rows="3"
+      ></ds-textarea>
+
+      <ds-textarea
+        label="Disabled"
+        value="Disabled content"
+        disabled
+        rows="3"
+      ></ds-textarea>
+
+      <ds-textarea
+        label="Read-only"
+        value="Read-only content that can be selected"
+        readonly
+        rows="3"
+      ></ds-textarea>
+
+      <ds-textarea
+        label="Fixed height (no resize)"
+        resize="none"
+        placeholder="Cannot be resized manually"
+        rows="4"
+      ></ds-textarea>
+
+      <ds-textarea
+        label="With info button"
+        info="This is additional information about this field"
+        placeholder="Enter description..."
+        rows="3"
+      ></ds-textarea>
+
+      <ds-textarea
+        label="Clearable"
+        value="Focus me to see clear button"
+        clearable
+        helper="Press Escape or click the X button to clear"
+        rows="3"
+      ></ds-textarea>
+    </div>
+  `
+};
+
+export const InlineLabel = {
+  args: {
+    label: 'Description',
+    labelPosition: 'inline-start',
+    labelWidth: '120px',
+    placeholder: 'Enter your text...',
+    helper: 'Label is positioned inline with the field',
+    maxlength: 200,
+    showCounter: true,
+    rows: 4
+  },
+  render: (args) => html`
+    <ds-textarea
+      label="${args.label}"
+      label-position="${args.labelPosition}"
+      label-width="${args.labelWidth}"
+      placeholder="${args.placeholder}"
+      helper="${args.helper}"
+      maxlength="${args.maxlength}"
+      ?show-counter="${args.showCounter}"
+      rows="${args.rows}"
+    ></ds-textarea>
+  `
+};

package/src/ds-textarea/ds-textarea.test.js

@@ -0,0 +1,218 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './ds-textarea.js';
+
+describe('ds-textarea', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-textarea></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.label).toBe('');
+        expect(element.value).toBe('');
+        expect(element.rows).toBe(3);
+        expect(element.resize).toBe('vertical');
+        expect(element.autoResize).toBe(false);
+    });
+
+    it('renders label when provided', async () => {
+        container.innerHTML = '<ds-textarea label="Description"></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const label = element.shadowRoot.querySelector('label');
+        expect(label.textContent).toBe('Description');
+    });
+
+    it('renders textarea with correct rows', async () => {
+        container.innerHTML = '<ds-textarea rows="5"></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const textarea = element.shadowRoot.querySelector('textarea');
+        expect(textarea.getAttribute('rows')).toBe('5');
+    });
+
+    it('binds value to textarea', async () => {
+        container.innerHTML = '<ds-textarea value="Test content"></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const textarea = element.shadowRoot.querySelector('textarea');
+        expect(textarea.value).toBe('Test content');
+    });
+
+    it('updates value on input', async () => {
+        container.innerHTML = '<ds-textarea></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const textarea = element.shadowRoot.querySelector('textarea');
+        textarea.value = 'New content';
+        textarea.dispatchEvent(new Event('input'));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe('New content');
+    });
+
+    it('dispatches input event when typing', async () => {
+        container.innerHTML = '<ds-textarea></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const inputSpy = vi.fn();
+        element.addEventListener('input', inputSpy);
+
+        const textarea = element.shadowRoot.querySelector('textarea');
+        textarea.value = 'Test';
+        textarea.dispatchEvent(new Event('input'));
+
+        expect(inputSpy).toHaveBeenCalledTimes(1);
+        expect(inputSpy.mock.calls[0][0].detail.value).toBe('Test');
+    });
+
+    it('dispatches change event on blur', async () => {
+        container.innerHTML = '<ds-textarea value="Test"></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const changeSpy = vi.fn();
+        element.addEventListener('change', changeSpy);
+
+        const textarea = element.shadowRoot.querySelector('textarea');
+        textarea.dispatchEvent(new Event('change'));
+
+        expect(changeSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('shows counter when maxlength and show-counter are set', async () => {
+        container.innerHTML = '<ds-textarea maxlength="100" show-counter value="Hello"></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const counter = element.shadowRoot.querySelector('.counter');
+        expect(counter).toBeTruthy();
+        expect(counter.textContent).toBe('5/100');
+    });
+
+    it('updates counter on input', async () => {
+        container.innerHTML = '<ds-textarea maxlength="50" show-counter></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const textarea = element.shadowRoot.querySelector('textarea');
+        textarea.value = 'Test content';
+        textarea.dispatchEvent(new Event('input'));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const counter = element.shadowRoot.querySelector('.counter');
+        expect(counter.textContent).toBe('12/50');
+    });
+
+    it('marks counter as over-limit when exceeding maxlength', async () => {
+        container.innerHTML = '<ds-textarea maxlength="5" show-counter value="This is too long"></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const counter = element.shadowRoot.querySelector('.counter');
+        expect(counter.classList.contains('over-limit')).toBe(true);
+    });
+
+    it('applies resize attribute correctly', async () => {
+        container.innerHTML = '<ds-textarea resize="none"></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.getAttribute('resize')).toBe('none');
+    });
+
+    it('disables textarea when disabled', async () => {
+        container.innerHTML = '<ds-textarea disabled></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const textarea = element.shadowRoot.querySelector('textarea');
+        expect(textarea.disabled).toBe(true);
+    });
+
+    it('makes textarea readonly when readonly', async () => {
+        container.innerHTML = '<ds-textarea readonly></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const textarea = element.shadowRoot.querySelector('textarea');
+        expect(textarea.readOnly).toBe(true);
+    });
+
+    it('sets required attribute', async () => {
+        container.innerHTML = '<ds-textarea required></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const textarea = element.shadowRoot.querySelector('textarea');
+        expect(textarea.required).toBe(true);
+    });
+
+    it('applies minlength and maxlength', async () => {
+        container.innerHTML = '<ds-textarea minlength="10" maxlength="100"></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const textarea = element.shadowRoot.querySelector('textarea');
+        expect(textarea.getAttribute('minlength')).toBe('10');
+        expect(textarea.getAttribute('maxlength')).toBe('100');
+    });
+
+    it('renders helper text', async () => {
+        container.innerHTML = '<ds-textarea helper="Enter your description"></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const message = element.shadowRoot.querySelector('.field-message__text');
+        expect(message.textContent).toBe('Enter your description');
+    });
+
+    it('renders error message', async () => {
+        container.innerHTML = `
+      <ds-textarea 
+        validation-status="error"
+        validation-message="This field is required"
+      ></ds-textarea>
+    `;
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const errorMessage = element.shadowRoot.querySelector('.field-message--error');
+        expect(errorMessage).toBeTruthy();
+        const icon = element.shadowRoot.querySelector('.field-message__icon');
+        expect(icon).toBeTruthy();
+    });
+
+    it('sets aria-invalid when validation status is error', async () => {
+        container.innerHTML = '<ds-textarea validation-status="error"></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const textarea = element.shadowRoot.querySelector('textarea');
+        expect(textarea.getAttribute('aria-invalid')).toBe('true');
+    });
+
+    it('does not show counter without maxlength', async () => {
+        container.innerHTML = '<ds-textarea show-counter></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const counter = element.shadowRoot.querySelector('.counter');
+        expect(counter).toBeFalsy();
+    });
+});

package/src/ds-textarea/index.js

@@ -0,0 +1 @@
+export { DsTextarea } from './ds-textarea.js';