From 9faaa83bba4d2a02bf814852b7ef7538597cae80 Mon Sep 17 00:00:00 2001
From: angsherpa456 <ang.sherpa@accenture.com>
Date: Thu, 8 Feb 2024 12:42:11 +0100
Subject: [PATCH] fix(ui): adjust naming in documentation of textarea (#485)
 (#885)

---
 packages/js-example-app/src/index.js          | 25 +++++++++++---
 .../src/components/textarea/index.stories.ts  | 34 ++++++++-----------
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/packages/js-example-app/src/index.js b/packages/js-example-app/src/index.js
index 40271329e..9ccbe9a23 100644
--- a/packages/js-example-app/src/index.js
+++ b/packages/js-example-app/src/index.js
@@ -9,6 +9,7 @@ const blrButton = document.getElementsByTagName('blr-text-button')[0];
 const blrCheckbox = document.getElementsByTagName('blr-checkbox')[0];
 const blrSelect = document.getElementsByTagName('blr-select')[0];
 const blrTextInput = document.getElementsByTagName('blr-text-input')[0];
+const blrTextArea = document.getElementsByTagName('blr-textarea')[0];
 
 const addLog = (log) => {
   logsContainer.innerHTML = logsContainer.innerHTML + log + '<br>';
@@ -64,18 +65,34 @@ blrCheckbox.addEventListener('blrBlur', () => {
   addLog('blr-checkbox blurred');
 });
 
-blrSelect.addEventListener('blrChange', (e) => {
+blrSelect.addEventListener('blrChange', () => {
   addLog('blr-select changed');
 });
 
-blrTextInput.addEventListener('blrFocus', (e) => {
+blrTextInput.addEventListener('blrFocus', () => {
   addLog('blr-text-input focused');
 });
 
-blrTextInput.addEventListener('blrBlur', (e) => {
+blrTextInput.addEventListener('blrBlur', () => {
   addLog('blr-text-input blurred');
 });
 
-blrTextInput.addEventListener('blrChange', (e) => {
+blrTextInput.addEventListener('blrChange', () => {
   addLog('blr-text-input changed');
 });
+
+blrTextArea.addEventListener('blrFocus', () => {
+  addLog('blr-textarea focused');
+});
+
+blrTextArea.addEventListener('blrBlur', () => {
+  addLog('blr-textarea blurred');
+});
+
+blrTextArea.addEventListener('blrChange', () => {
+  addLog('blr-textarea changed');
+});
+
+blrTextArea.addEventListener('blrSelect', () => {
+  addLog('blr-textarea selected',);
+});
diff --git a/packages/ui-library/src/components/textarea/index.stories.ts b/packages/ui-library/src/components/textarea/index.stories.ts
index 5f62ab58f..d31c0d668 100644
--- a/packages/ui-library/src/components/textarea/index.stories.ts
+++ b/packages/ui-library/src/components/textarea/index.stories.ts
@@ -319,34 +319,30 @@ export default {
     },
 
     // Events
-    onChange: {
-      name: 'onChange',
+    blrChange: {
       description: 'Fires when the value changes.',
-      action: 'onChange',
+      action: 'blrChange',
       table: {
         category: 'Events',
       },
     },
-    onFocus: {
-      name: 'onFocus',
-      description: 'Fires when the component is focused.',
-      action: 'onFocus',
+    blrSelect: {
+      description: 'Fires when some text is selected.',
+      action: 'blrSelect',
       table: {
         category: 'Events',
       },
     },
-    onBlur: {
-      name: 'onBlur',
-      description: 'Fires when the component lost focus.',
-      action: 'onBlur',
+    blrFocus: {
+      description: 'Fires when the component is focused.',
+      action: 'blrFocus',
       table: {
         category: 'Events',
       },
     },
-    onSelect: {
-      name: 'onSelect',
-      description: 'Fires when some text is selected.',
-      action: 'onSelect',
+    blrBlur: {
+      description: 'Fires when the component lost focus.',
+      action: 'blrBlur',
       table: {
         category: 'Events',
       },
@@ -425,10 +421,10 @@ const argTypesToDisable = [
   'arialabel',
   'textareaId',
   'name',
-  'onChange',
-  'onFocus',
-  'onBlur',
-  'onSelect',
+  'blrChange',
+  'blrSelect',
+  'blrFocus',
+  'blrBlur',
 ];
 const generateDisabledArgTypes = (argTypes: string[]) => {
   const disabledArgTypes = {};