@postnord/web-components/collection/components/input/pn-textarea/pn-textarea.stories.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-textarea-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
/**
 * The pn-textarea component contains most of the standard <a target="_blank" rel="noopener noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea">textarea HTML attributes</a> you would expect, such as rows, autocomplete, required, etc...
 *
 * We have also included a few neat functionalities to make it even easier for you to implement the component.
 * Such as built in label, helper texts, error states props, max length rules and more!
 */
const meta = {
    title: 'Components/Input/Textarea',
    parameters: {
        actions: {
            handles: ['input'],
        },
        design: {
            type: 'figma',
            url: getFigmaUrl(import.meta.url),
        },
    },
    args: {
        label: 'Describe your issue',
        value: 'I need help with your web-components.',
        helpertext: '',
        textareaid: '',
        name: '',
        form: '',
        required: false,
        autocomplete: '',
        spellcheck: false,
        placeholder: '',
        rows: 2,
        cols: 20,
        resize: false,
        wrap: '',
        maxlength: null,
        valid: false,
        invalid: false,
        error: '',
        disabled: false,
        readonly: false,
    },
    argTypes,
};
meta.argTypes.maxlength.type = 'number';
export default meta;
export const PnTextarea = {
    name: 'pn-textarea',
    parameters: {
        docs: {
            description: {
                story: textContent,
            },
        },
    },
    render: args => createComponent('pn-textarea', args),
};
/**
 * You can allow the user to resize the textarea vertically with the `resize` property.
 * It is disabled by default, as we rather see the layout of your app deciding the width and the `rows` property to set the height.
 */
export const PnTextareaHelpertext = {
    name: 'pn-textarea (helper text)',
    render: PnTextarea.render,
    args: {
        helpertext: 'Please include a link to a codepen.',
    },
};
/**
 * We set the rows of the `pn-textarea` to 2 and cols to 20 by default, same as the default browser behaviour. You can change this to any number really, just dont make it 100 rows please.
 * This example is using 8 rows and 40 cols.
 *
 * While you can do this, it is recommended to deal with the
 * width of the textarea with CSS. As settings cols is not responsive.
 */
export const PnTextareaRows = {
    name: 'pn-textarea (layout)',
    render: PnTextarea.render,
    args: {
        label: 'A big textarea',
        value: '',
        rows: 8,
        cols: 40,
    },
};
/**
 * You can allow the user to resize the textarea vertically with the `resize` property.
 * It is disabled by default, as we rather see the layout of your app deciding the width and the `rows` property to set the height.
 */
export const PnTextareaResize = {
    name: 'pn-textarea (resize)',
    render: PnTextarea.render,
    args: {
        label: 'You can resize this textarea',
        resize: true,
    },
};
/**
 * Tell the user how many characters they are allowed to type in this field.
 * The textarea will not accept any content exceeding the maxlength, regardless if you type or paste text into the field.
 */
export const PnTextareaMaxlength = {
    name: 'pn-textarea (max length)',
    render: PnTextarea.render,
    args: {
        maxlength: 150,
    },
};
/**
 * There are two ways for you to set the error state on `pn-textarea`.
 *
 * First, is to set the `invalid` prop to `true`. This will color the label and border of the textarea red.
 *
 * Second, is to provide an error message in the `error` prop.
 * This will apply the same styles as `invalid` but also display the text underneath the textarea.
 */
export const PnTextareaError = {
    name: 'pn-textarea (error)',
    render: PnTextarea.render,
    args: {
        helpertext: 'The text must include a URL.',
        error: 'No URL included.',
    },
};
/**
 * Disable the textarea.
 */
export const PnTextareaDisabled = {
    name: 'pn-textarea (disabled)',
    render: PnTextarea.render,
    args: {
        label: 'This is a disabled textarea',
        value: 'You cannot edit me.',
        disabled: true,
    },
};
/**
 * Readonly is an accesible way of preventing users to edit the content, but still let them view/interact with it.
 * You can copy the text and screen readers can still view it. Unlike the disabled state, which will block interactions and screen readers readablity.
 *
 * This is also very useful if you wish to preview this field for the user without the ability to change the content!
 *
 * Or maybe, you retrive information from an API and if the information is complete, set `readonly`, instead of `disable`.
 * If the API returns no content, simply remove the `readonly` prop and let the user fill in the blank.
 */
export const PnTextareaReadonly = {
    name: 'pn-textarea (readonly)',
    render: PnTextarea.render,
    args: {
        readonly: true,
    },
};
//# sourceMappingURL=pn-textarea.stories.js.map