@warp-ds/elements 2.4.0 → 2.5.0-next.2

package/dist/packages/textarea/textarea.js

@@ -1,220 +0,0 @@
-// @warp-css;
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { classNames as classnames } from '@chbphone55/classnames';
-import { i18n } from '@lingui/core';
-import { FormControlMixin } from '@open-wc/form-control';
-import { html, LitElement, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { reset } from '../styles.js';
-import { styles } from './styles.js';
-const ccInput = {
-    // input classes
-    base: 'block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current', // true
-    default: 'border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected', // !isInvalid && !isDisabled && !isReadOnly
-    disabled: 'border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none', // !isInvalid && isDisabled && !isReadOnly
-    invalid: 'border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!', // isInvalid && !isDisabled && !isReadOnly
-    readOnly: 'pl-0 bg-transparent pointer-events-none', // !isInvalid && !isDisabled && isReadOnly
-    placeholder: 'placeholder:s-text-placeholder',
-    suffix: 'pr-40',
-    prefix: 'pl-[var(--w-prefix-width,_40px)]',
-    // textarea classes
-    textArea: 'min-h-[42] sm:min-h-[45]',
-    fixed: 'resize-none',
-};
-const ccLabel = {
-    base: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text flex',
-    optional: 'pl-8 font-normal text-s s-text-subtle',
-};
-const ccHelpText = {
-    base: 'text-xs mt-4 block',
-    color: 's-text-subtle',
-    colorInvalid: 's-text-negative',
-};
-/**
- * A single line text input element.
- *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
- */
-class WarpTextarea extends FormControlMixin(LitElement) {
-    constructor() {
-        super(...arguments);
-        this.minHeight = Number.NEGATIVE_INFINITY;
-        this.maxHeight = Number.POSITIVE_INFINITY;
-        // capture the initial value using connectedCallback and #initialValue
-        this.#initialValue = null;
-    }
-    static { this.shadowRootOptions = {
-        ...LitElement.shadowRootOptions,
-        delegatesFocus: true,
-    }; }
-    // capture the initial value using connectedCallback and #initialValue
-    #initialValue;
-    updated(changedProperties) {
-        if (changedProperties.has('value')) {
-            this.setValue(this.value);
-        }
-    }
-    resetFormControl() {
-        this.value = this.#initialValue;
-    }
-    static { this.styles = [reset, styles]; }
-    /** @internal */
-    get _textareaStyles() {
-        return classnames([
-            ccInput.base,
-            ccInput.textArea,
-            !!this.placeholder && ccInput.placeholder,
-            !this.invalid && !this.disabled && !(this.readonly || this.readOnly) && ccInput.default,
-            this.invalid && !this.disabled && !(this.readonly || this.readOnly) && ccInput.invalid,
-            !this.invalid && this.disabled && !(this.readonly || this.readOnly) && ccInput.disabled,
-            !this.invalid && !this.disabled && (this.readonly || this.readOnly) && ccInput.readOnly,
-            this.maxRows && ccInput.fixed,
-        ]);
-    }
-    /** @internal */
-    get _helptextstyles() {
-        return classnames([ccHelpText.base, this.invalid ? ccHelpText.colorInvalid : ccHelpText.color]);
-    }
-    /** @internal */
-    get _helpId() {
-        if (this.helpText)
-            return `${this._id}__hint`;
-        return undefined;
-    }
-    /** @internal */
-    get _id() {
-        return 'textfield';
-    }
-    /** @internal */
-    get _error() {
-        if (this.invalid && this._helpId)
-            return this._helpId;
-        return undefined;
-    }
-    async connectedCallback() {
-        super.connectedCallback();
-        this.#initialValue = this.value;
-        this.setValue(this.value);
-        await this.updateComplete;
-        if (this.value || this.minRows) {
-            // If the component starts with a value or minHeight,
-            // resize it automatically to show all the content, or maxHeight.
-            this.#resize(this.shadowRoot.querySelector('textarea'));
-        }
-    }
-    handler(e) {
-        const target = e.currentTarget;
-        this.value = target.value;
-        this.#resize(target);
-    }
-    /** Calculate the new height for the area on input */
-    #resize(target) {
-        const style = getComputedStyle(target);
-        const borderTopWitdh = Number.parseFloat(style.getPropertyValue('border-top-width'));
-        const borderBottomWitdh = Number.parseFloat(style.getPropertyValue('border-top-width'));
-        const lineHeight = Number.parseFloat(style.getPropertyValue('line-height'));
-        const topPadding = Number.parseFloat(style.getPropertyValue('padding-top'));
-        const bottomPadding = Number.parseFloat(style.getPropertyValue('padding-bottom'));
-        const offset = topPadding + bottomPadding + borderBottomWitdh + borderTopWitdh;
-        if (this.minRows) {
-            this.minHeight = lineHeight * this.minRows + offset;
-        }
-        if (this.minRows) {
-            this.maxHeight = lineHeight * this.minRows + offset;
-        }
-        const borderBoxHeight = target.scrollHeight + borderTopWitdh + borderBottomWitdh;
-        const height = Math.min(this.maxHeight, Math.max(this.minHeight, borderBoxHeight));
-        target.style.setProperty('height', height + 'px');
-    }
-    render() {
-        return html `
-        ${this.label
-            ? html `
-                <label for="${this._id}" class=${ccLabel.base}>
-                  ${this.label}
-                  ${this.optional
-                ? html `
-                          <span class="${ccLabel.optional}">
-                            ${i18n.t({
-                    id: 'textarea.label.optional',
-                    message: '(optional)',
-                    comment: 'Shown behind label when marked as optional',
-                })}
-                          </span>
-                    `
-                : nothing}
-                </label>`
-            : nothing}
-        <textarea
-          id="${this._id}"
-          class="${this._textareaStyles}"
-          name="${ifDefined(this.name)}"
-          placeholder="${ifDefined(this.placeholder)}"
-          .value="${this.value || ''}"
-          aria-describedby="${ifDefined(this._helpId || (this.ariaDescription ? 'aria-description' : undefined))}"
-          aria-errormessage="${ifDefined(this._error)}"
-          aria-invalid="${ifDefined(this.invalid)}"
-          ?disabled="${this.disabled}"
-          ?readonly="${this.readonly || this.readOnly}"
-          ?required="${this.required}"
-          @input="${this.handler}">
-        </textarea>
-        ${this.helpText ? html `<div class="${this._helptextstyles}" id="${this._helpId}">${this.helpText}</div>` : nothing}
-    `;
-    }
-}
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpTextarea.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpTextarea.prototype, "invalid", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], WarpTextarea.prototype, "label", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'help-text' })
-], WarpTextarea.prototype, "helpText", void 0);
-__decorate([
-    property({ type: Number, reflect: true, attribute: 'maximum-rows' })
-], WarpTextarea.prototype, "maxRows", void 0);
-__decorate([
-    property({ type: Number, reflect: true, attribute: 'minimum-rows' })
-], WarpTextarea.prototype, "minRows", void 0);
-__decorate([
-    property()
-], WarpTextarea.prototype, "name", void 0);
-__decorate([
-    property()
-], WarpTextarea.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'read-only' })
-], WarpTextarea.prototype, "readOnly", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpTextarea.prototype, "readonly", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpTextarea.prototype, "required", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], WarpTextarea.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpTextarea.prototype, "optional", void 0);
-__decorate([
-    state()
-], WarpTextarea.prototype, "minHeight", void 0);
-__decorate([
-    state()
-], WarpTextarea.prototype, "maxHeight", void 0);
-if (!customElements.get('w-textarea')) {
-    customElements.define('w-textarea', WarpTextarea);
-}
-export { WarpTextarea };

package/dist/packages/textarea/textarea.react.stories.d.ts

@@ -1,33 +0,0 @@
-import React from 'react';
-import { StoryObj } from '@storybook/react';
-import { Textarea } from './react';
-declare const _default: {
-    title: string;
-    render(args: Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "label" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "disabled" | "name" | "value" | "updated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "helpText" | "optional" | "readOnly" | "readonly" | "placeholder" | "required" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
-        onBlur?: (e: Event) => void;
-        onblur?: (e: Event) => void;
-        onChange?: (e: Event) => void;
-        onchange?: (e: Event) => void;
-        onInput?: (e: Event) => void;
-        oninput?: (e: Event) => void;
-        onFocus?: (e: Event) => void;
-        onfocus?: (e: Event) => void;
-    } & Partial<Omit<import("./textarea").WarpTextarea, keyof HTMLElement>> & React.RefAttributes<import("./textarea").WarpTextarea>): React.JSX.Element;
-    component: import("@lit/react").ReactWebComponent<import("./textarea").WarpTextarea, {
-        onBlur: string;
-        onblur: string;
-        onChange: string;
-        onchange: string;
-        onInput: string;
-        oninput: string;
-        onFocus: string;
-        onfocus: string;
-    }>;
-};
-export default _default;
-export type Story = StoryObj<typeof Textarea>;
-export declare const Default: Story;
-export declare const WithPlaceholder: Story;
-export declare const WithHelpText: Story;
-export declare const Invalid: Story;
-export declare const Disabled: Story;

package/dist/packages/textarea/textarea.react.stories.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { Textarea } from './react';
-export default {
-    title: 'Forms/Textarea',
-    render(args) {
-        return React.createElement(Textarea, { ...args });
-    },
-    component: Textarea,
-};
-export const Default = {
-    args: {
-        label: 'Email',
-    },
-};
-export const WithPlaceholder = {
-    args: {
-        label: 'Email',
-        placeholder: 'user@example.com',
-    },
-};
-export const WithHelpText = {
-    args: {
-        label: 'Password',
-        helpText: 'Must be at least 8 characters',
-    },
-};
-export const Invalid = {
-    args: {
-        label: 'Email',
-        invalid: true,
-        helpText: 'Please enter a valid email address',
-        value: 'invalid-email',
-    },
-};
-export const Disabled = {
-    args: {
-        label: 'Email',
-        disabled: true,
-        value: 'user@example.com',
-    },
-};

package/dist/packages/textarea/textarea.stories.d.ts

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import type { WarpTextarea } from './index.js';
-import './index.js';
-declare const args: Partial<WarpTextarea> & {
-    [key: string]: any;
-};
-declare const meta: Meta<typeof args>;
-export default meta;
-type Story = StoryObj<typeof args>;
-export declare const Default: Story;
-export declare const WithPlaceholder: Story;
-export declare const WithHelpText: Story;
-export declare const NoVisualLabel: Story;
-export declare const Invalid: Story;
-export declare const Disabled: Story;
-export declare const ReadOnly: Story;
-export declare const Optional: Story;
-export declare const ControlledSize: Story;
-export declare const Autofocus: Story;

package/dist/packages/textarea/textarea.stories.js

@@ -1,85 +0,0 @@
-import { spread } from '@open-wc/lit-helpers';
-import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
-import { html } from 'lit';
-import { prespread } from '../../.storybook/utilities.js';
-import './index.js';
-const { events, args, argTypes } = getStorybookHelpers('w-textarea');
-const meta = {
-    title: 'Forms/Textarea',
-    render(args) {
-        return html `<w-textarea ${spread(prespread(args))}></w-textarea>`;
-    },
-    args,
-    argTypes,
-    parameters: {
-        actions: {
-            handles: events,
-        },
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        label: 'Description',
-    },
-};
-export const WithPlaceholder = {
-    args: {
-        label: 'Description',
-        placeholder: 'A Link to the Past is a distant prequel to the original The Legend of Zelda',
-    },
-};
-export const WithHelpText = {
-    args: {
-        label: 'Description',
-        'help-text': 'You can provide a help text if necessary',
-    },
-};
-export const NoVisualLabel = {
-    args: {
-        'aria-label': 'Description',
-    },
-};
-export const Invalid = {
-    args: {
-        label: 'Description',
-        invalid: true,
-        'help-text': 'A description is required',
-    },
-};
-export const Disabled = {
-    args: {
-        label: 'Description',
-        disabled: true,
-        value: 'A Link to the Past is a distant prequel to the original The Legend of Zelda, and, within the official chronology, is the first game in the "Defeated Hero" timeline that connects to an alternate reality scenario where the Hero of Time does not succeed in Ocarina of Time.',
-    },
-};
-export const ReadOnly = {
-    args: {
-        label: 'Description',
-        'read-only': true,
-        value: 'A Link to the Past is a distant prequel to the original The Legend of Zelda, and, within the official chronology, is the first game in the "Defeated Hero" timeline that connects to an alternate reality scenario where the Hero of Time does not succeed in Ocarina of Time.',
-    },
-};
-export const Optional = {
-    args: {
-        label: 'Description',
-        optional: true,
-    },
-};
-export const ControlledSize = {
-    args: {
-        label: 'Description',
-        'minimum-rows': 3,
-        'maximum-rows': 3,
-    },
-};
-export const Autofocus = {
-    args: {
-        label: 'Description',
-        'minimum-rows': 3,
-        'maximum-rows': 3,
-        placeholder: 'Refresh to see the autofocus take effect',
-        autofocus: true,
-    },
-};

package/dist/packages/textarea/textarea.test.d.ts

@@ -1 +0,0 @@
-import './index.js';

package/dist/packages/textarea/textarea.test.js

@@ -1,68 +0,0 @@
-import { userEvent } from '@vitest/browser/context';
-import { html } from 'lit';
-import { expect, test, vi } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './index.js';
-test('renders the textarea', async () => {
-    const component = html `<w-textarea label="Test label"></w-textarea>`;
-    const page = render(component);
-    await expect.element(page.getByText('Test label')).toBeVisible();
-});
-test('works as expected in forms', async () => {
-    const label = 'Test label';
-    const component = html `
-    <form data-testid="form">
-      <w-textarea label="${label}" name="message" value="Hola el Mundo"></w-textarea>
-    </form>
-  `;
-    const page = render(component);
-    await expect.element(page.getByLabelText(label)).toHaveValue('Hola el Mundo');
-    let formData = new FormData(page.getByTestId('form').element());
-    expect(formData.get('message')).toBe('Hola el Mundo');
-    const inputHandler = vi.fn();
-    const changeHandler = vi.fn();
-    page.getByLabelText(label).element().addEventListener('input', inputHandler);
-    page.getByLabelText(label).element().addEventListener('change', changeHandler);
-    await page.getByLabelText(label).fill('Hello, World');
-    expect(inputHandler).toHaveBeenCalled();
-    expect(changeHandler).not.toHaveBeenCalled();
-    await userEvent.tab(); // trigger a blur to fire the change event
-    expect(changeHandler).toHaveBeenCalled();
-    await expect.element(page.getByLabelText(label)).toHaveValue('Hello, World');
-    formData = new FormData(page.getByTestId('form').element());
-    expect(formData.get('message')).toBe('Hello, World');
-});
-test('renders help text if provided', async () => {
-    const component = html `<w-textarea label="Test label" help-text="Helpful help text"></w-textarea>`;
-    const page = render(component);
-    await expect.element(page.getByText('Helpful help text')).toBeVisible();
-});
-test('marks input field as aria-invalid if the invalid prop is true', async () => {
-    const component = html `<w-textarea label="Test label" invalid help-text="No, bad input!"></w-textarea>`;
-    const page = render(component);
-    await expect.element(page.getByLabelText('Test label')).toHaveAccessibleErrorMessage('No, bad input!');
-});
-test('marks input field as readonly if the readonly prop is true', async () => {
-    const component = html `<w-textarea label="Test label" readonly></w-textarea>`;
-    const page = render(component);
-    await expect.element(page.getByLabelText('Test label')).toHaveAttribute('readonly', '');
-});
-test('can reset textarea by resetting surrounding form', async () => {
-    render(html `
-    <form>
-      <w-textarea name="message" value="Hola el Mundo"></w-textarea>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const wTextArea = document.querySelector('w-textarea');
-    // sanity
-    expect(form).not.toBeNull();
-    expect(wTextArea).not.toBeNull();
-    expect(wTextArea.value).toBe('Hola el Mundo');
-    wTextArea.value = 'Definitely not Hola el Mundo';
-    await wTextArea.updateComplete;
-    // Reset the form
-    form.reset();
-    await wTextArea.updateComplete;
-    expect(wTextArea.value).toBe('Hola el Mundo');
-});