@weni/unnnic-system 2.13.0 → 2.13.1

package/src/stories/TextArea.mdx

@@ -0,0 +1,68 @@
+import { Meta, Source, Story } from '@storybook/blocks';
+
+import * as TextAreaStories from './TextArea.stories';
+
+<Meta of={TextAreaStories}/>
+
+# TextArea
+
+The `TextArea` component is designed to provide a textarea field for users to enter texts.
+
+<Source
+  language='html'
+  dark
+  code={`<UnnnicTextArea
+  label="Label"
+  message="Helper text" | error="Error text"
+  :disabled="false | true"
+  v-model="value"
+  size="md"
+  type="normal"
+/>`}
+/>
+
+
+---
+
+#### **Props Options:**
+
+| Key     | Description                               | Values                  | Default     |
+|---------|-------------------------------------------|-------------------------|-------------|
+| label   | `String` of the textarea label            | `String`                | `undefined` |
+| message | `String` of the helper text, when applied | `String`                | `undefined` |
+| error   | `String` of the error text, when applied  | `String`                | `undefined` |
+| v-model | `String` of the textarea content          | `''`                    | `''`        |
+| size    | `String` of the size                      | `'md'` \| `'sm'`        | `md`        |
+| type    | `String` of the textarea type             | `'normal'` \| `'error'` | `'normal'`  |
+
+## Example
+Some examples of uses of the `UnnnicTextArea`
+
+### Default
+
+<Story of={TextAreaStories.Default} />
+
+
+### Error
+
+<Story of={TextAreaStories.Error} />
+
+
+### Disabled
+
+<Story of={TextAreaStories.Disabled} />
+
+
+### Default (small size)
+
+<Story of={TextAreaStories.DefaultSm} />
+
+
+### Error (small size)
+
+<Story of={TextAreaStories.ErrorSm} />
+
+
+### Disabled (small size)
+
+<Story of={TextAreaStories.DisabledSm} />

package/src/stories/TextArea.stories.js

@@ -1,17 +1,19 @@
+import unnnicFormElement from '../components/FormElement/FormElement.vue';
 import UnnnicTextArea from '../components/TextArea/TextArea.vue';
 
 export default {
   title: 'Form/TextArea',
   component: UnnnicTextArea,
   argTypes: {
-    size: { control: { type: 'select', options: ['md', 'sm'] } },
-    type: { control: { type: 'select', options: ['normal', 'error'] } },
+    size: { control: { type: 'select' }, options: ['md', 'sm'] },
+    type: { control: { type: 'select' }, options: ['normal', 'error'] },
   },
   render: (args) => ({
     setup() {
       return { args };
     },
     components: {
+      unnnicFormElement,
       UnnnicTextArea,
     },
     data() {
@@ -20,10 +22,7 @@ export default {
       };
     },
     template: `
-      <div>
-        <pre>v-model: {{ content }}</pre>
-        <unnnic-text-area v-bind="args" v-model="content"/>
-      </div>
+      <unnnic-text-area v-bind="args" v-model="content"/>
     `,
   }),
 };
@@ -36,5 +35,68 @@ export const Default = {
     disabled: false,
     type: 'normal',
     errors: [],
+    size: 'md',
+    message: 'Helper text',
+  },
+};
+
+export const Error = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    maxLength: 150,
+    disabled: false,
+    type: 'error',
+    error: 'Error text',
+    size: 'md',
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    maxLength: 150,
+    disabled: true,
+    type: 'normal',
+    size: 'md',
+    message: 'Helper text',
+  },
+};
+
+export const DefaultSm = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    maxLength: 150,
+    disabled: false,
+    type: 'normal',
+    errors: [],
+    size: 'sm',
+    message: 'Helper text',
+  },
+};
+
+export const ErrorSm = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    maxLength: 150,
+    disabled: false,
+    type: 'error',
+    error: 'Error text',
+    size: 'sm',
+  },
+};
+
+export const DisabledSm = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    maxLength: 150,
+    disabled: true,
+    type: 'normal',
+    size: 'sm',
+    message: 'Helper text',
   },
 };