feat: type and refactor textarea component (#536)

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## v2.0.91
+
+- Type `Textarea` component and normalize props
+
+## v2.0.90
+
+-
+
 ## v2.0.89
 
 - Slot `helper` added `RadioButton` as alternative to `helperText`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.90",
+  "version": "2.0.91",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/components/Textarea/Textarea.mdx

@@ -3,20 +3,8 @@ import { Primary } from './Textarea.stories';
 
 # Textarea
 
-A textarea component for entering large blocks of text in a form.
-
 <Canvas of={Primary} />
 
-## How to Use
-
-You can pass in the `v-model` prop to bind the textarea to the parent component's data model.
-
-You can pass in a `@change` handler to trigger a custom function on change events. The `event` object will be emitted along with the `change` event.
-
-```html
-<textarea name="FancyTextarea" label="Fancy text" v-model="form.fancy" />
-```
-
 ## Props
 
 <ArgTypes story={PRIMARY_STORY} />

src/components/Textarea/Textarea.stories.js

@@ -1,5 +1,6 @@
 import Textarea from './Textarea.vue';
 import mdx from './Textarea.mdx';
+import { TextareaColor } from './constants';
 
 export default {
   title: 'Components/Textarea',
@@ -10,15 +11,76 @@ export default {
     }
   },
   argTypes: {
-    'v-model': {
+    color: {
+      options: Object.values(TextareaColor),
       control: {
-        type: null
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: Object.values(TextareaColor).join(' | ')
+        }
       }
     },
-    maxLength: {
+    cols: {
       control: {
         type: 'number'
       }
+    },
+    disabled: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    id: {
+      control: {
+        type: 'text'
+      }
+    },
+    label: {
+      control: {
+        type: 'text'
+      }
+    },
+    maxlength: {
+      control: {
+        type: 'number'
+      }
+    },
+    minlength: {
+      control: {
+        type: 'number'
+      }
+    },
+    name: {
+      control: {
+        type: 'text'
+      }
+    },
+    placeholder: {
+      control: {
+        type: 'text'
+      }
+    },
+    readonly: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    required: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    rows: {
+      control: {
+        type: 'number'
+      }
+    },
+    spellcheck: {
+      control: {
+        type: 'boolean'
+      }
     }
   }
 };
@@ -47,22 +109,13 @@ WithTooltip.args = {
   id: 'description',
   label: 'Description',
   placeholder: 'Add a description',
-  tooltipContent: 'Add a description for your campaign'
+  tooltip: 'Add a description for your campaign'
 };
 
 export const WithHelperText = Primary.bind({});
 WithHelperText.args = {
   id: 'description',
   label: 'Description',
   placeholder: 'Add a description',
-  helperText: 'Add a description for your campaign'
-};
-
-export const WithMaxLength = Primary.bind({});
-WithMaxLength.args = {
-  id: 'description',
-  label: 'Description',
-  placeholder: 'Add a description',
-  showCounter: true,
-  maxLength: 60
+  helper: 'Add a description for your campaign'
 };