fix(ui5-textarea): enhance storybook samples (#7443)

* fix(ui5-textarea): enhance storybook samples

* fix(ui5-textarea): apply review comments

Author: niyap

packages/main/src/TextArea.ts

@@ -176,15 +176,7 @@ class TextArea extends UI5Element implements IFormElement {
 	/**
 	 * Defines the value state of the component.
 	 * <br><br>
-	 * Available options are:
-	 * <ul>
-	 * <li><code>None</code></li>
-	 * <li><code>Error</code></li>
-	 * <li><code>Warning</code></li>
-	 * <li><code>Success</code></li>
-	 * <li><code>Information</code></li>
-	 * </ul>
-	 * <br><br>
+	 *
 	 * <b>Note:</b> If <code>maxlength</code> property is set,
 	 * the component turns into "Warning" state once the characters exceeds the limit.
 	 * In this case, only the "Error" state is considered and can be applied.

packages/playground/_stories/main/TextArea/TextArea.stories.ts

@@ -1,5 +1,6 @@
 import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 import type { Meta, StoryFn } from "@storybook/web-components";
 
@@ -15,7 +16,7 @@ const component = "ui5-textarea";
 let index = 0;
 
 export default {
-    title: "Main/TextArea",
+    title: "Main/Text Area",
     component: "TextArea",
     parameters: {
         docs: {
@@ -42,35 +43,51 @@ const Template: UI5StoryArgs<TextArea, StoryArgsSlots> = (args) => html`
 	name="${ifDefined(args.name)}"
 	accessible-name="${ifDefined(args.accessibleName)}"
 	accessible-name-ref="${ifDefined(args.accessibleNameRef)}"
-></ui5-textarea>`;
+>
+	${unsafeHTML(args.valueStateMessage)}
+</ui5-textarea>`;
 
-export const BasicTextArea = Template.bind({});
-BasicTextArea.args = {
-	placeholder: 'Type as much text as you wish',
+export const Basic = Template.bind({});
+Basic.args = {
+	placeholder: 'Enter text',
 };
 
-export const TextAreaMaxLength = Template.bind({});
-TextAreaMaxLength.args = {
-	placeholder: 'Type no more than 10 symbols',
+
+export const WithMaxLength = Template.bind({});
+WithMaxLength.decorators = [
+	(story) =>  html`
+		${story()}
+		<script>
+		(() => {
+			const textAreaMaxLength = document.getElementById("textArea-${index-1}");
+
+			textAreaMaxLength.addEventListener("input", function (event) {
+				const { value, maxlength} = textAreaMaxLength;
+				textAreaMaxLength.valueState = value.length > maxlength ? "Warning" : "None";	
+			});
+		})()
+		</script>`
+];
+WithMaxLength.args = {
+	placeholder: 'Enter text',
 	maxlength: 10,
-	showExceededText: true
+	showExceededText: true,
+	valueStateMessage: `<div id="warningMessage" slot="valueStateMessage">The characters limit is exceeded</div>`
 
 };
-TextAreaMaxLength.storyName = "Text Area with Maximum Length";
 
-export const TextAreaLabel = Template.bind({});
-TextAreaLabel.decorators = [
+export const WithLabel = Template.bind({});
+WithLabel.decorators = [
 	(story) => {
 		return html`
 		<ui5-label for="textArea-${index}">Description</ui5-label>
 		${story()}
 		`;
 	}
 ]
-TextAreaLabel.args = {
+WithLabel.args = {
 	placeholder: 'Enter description',
 	required: true
-
 };