From 155009f1c2664b037e55908c042a4e1eafd28a69 Mon Sep 17 00:00:00 2001
From: RubirajAccenture <122974571+RubirajAccenture@users.noreply.github.com>
Date: Fri, 22 Mar 2024 09:48:57 +0100
Subject: [PATCH] fix(ui-library): props alignment form caption (#1023)

Co-authored-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com>
---
 .../form-caption-group/index.test.ts          |  4 ++--
 .../components/form-caption/index.stories.ts  | 22 +++++++++----------
 .../src/components/form-caption/index.ts      |  2 +-
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/ui-library/src/components/form-caption-group/index.test.ts b/packages/ui-library/src/components/form-caption-group/index.test.ts
index aa47e66c5..ae7d671c7 100644
--- a/packages/ui-library/src/components/form-caption-group/index.test.ts
+++ b/packages/ui-library/src/components/form-caption-group/index.test.ts
@@ -16,7 +16,7 @@ const hintCaption = BlrFormCaptionRenderFunction({
   message: 'This is a hint',
   variant: 'hint',
   icon: 'blrInfo',
-  size: 'md',
+  sizeVariant: 'md',
   theme: 'Light',
 });
 
@@ -24,7 +24,7 @@ const errorCaption = BlrFormCaptionRenderFunction({
   message: 'This is an error',
   variant: 'error',
   icon: 'blrInfo',
-  size: 'md',
+  sizeVariant: 'md',
   theme: 'Light',
 });
 
diff --git a/packages/ui-library/src/components/form-caption/index.stories.ts b/packages/ui-library/src/components/form-caption/index.stories.ts
index 27763e60f..f75f2ee6c 100644
--- a/packages/ui-library/src/components/form-caption/index.stories.ts
+++ b/packages/ui-library/src/components/form-caption/index.stories.ts
@@ -21,6 +21,7 @@ export default {
     sizeVariant: {
       options: FormSizes,
       control: { type: 'radio' },
+      defaultValue: 'sm',
       description: ' Choose size of the component.',
       table: {
         category: 'Appearance',
@@ -43,20 +44,20 @@ export default {
         category: 'Appearance',
       },
     },
-
     icon: {
       options: [undefined, ...PureIconKeys],
       control: { type: 'select' },
+      defaultValue: 'blr360',
       description: 'Select an icon which is displayed inside of the input.',
       table: {
-        category: 'Content / Setting',
+        category: 'Content / Settings',
       },
     },
     message: {
       options: [undefined, ...PureIconKeys],
       description: 'Enter the message the component should have.',
       table: {
-        category: 'Content / Setting',
+        category: 'Content / Settings',
       },
     },
   },
@@ -72,15 +73,12 @@ export default {
       description: {
         component: `<Markdown>
         Form Caption provides either a brief hint or error message to a related form element such as Input Field Text or Select. It is typically displayed below the form element, and it can be used to provide additional information about the type of information a user has to provide, like an example of the correct data format.
-
         - [**Appearance**](#appearance)
           - [**Variant**](#variant)
           - [**Size Variant**](#size-variant)
         - [**Dependencies**](#dependencies)
           - [**Icon**](#icon)
-        
         The Form Caption is intended to be used when creating new components. Currently, it is used like this in the following components:
-        
         - [**Form Caption Group**](?path=/docs/components-form-caption-group--docs)
         - [**Toggle Switch**](?path=/docs/components-toggle-switch--docs)
         
@@ -99,7 +97,7 @@ BlrFormCaption.storyName = 'Form Caption';
 const args: BlrFormCaptionType = {
   theme: 'Light',
   message: 'Message-text',
-  icon: 'blr360',
+  icon: 'blrInfo',
   variant: 'hint',
   sizeVariant: 'sm',
 };
@@ -121,7 +119,7 @@ export const Variant = () => {
         theme: 'Light',
         sizeVariant: 'sm',
         message: 'Hint',
-        icon: 'blr360',
+        icon: 'blrInfo',
       })}
     </div>
     <div class="wrapper">
@@ -151,7 +149,7 @@ export const SizeVariant = () => {
         theme: 'Light',
         sizeVariant: 'sm',
         message: 'Form Caption SM',
-        icon: 'blr360',
+        icon: 'blrInfo',
       })}
     </div>
     <div class="wrapper">
@@ -160,7 +158,7 @@ export const SizeVariant = () => {
         theme: 'Light',
         sizeVariant: 'md',
         message: 'Form Caption MD',
-        icon: 'blr360',
+        icon: 'blrInfo',
       })}
     </div>
 
@@ -170,7 +168,7 @@ export const SizeVariant = () => {
         theme: 'Light',
         sizeVariant: 'lg',
         message: 'Form Caption LG',
-        icon: 'blr360',
+        icon: 'blrInfo',
       })}
     </div>
   `;
@@ -193,7 +191,7 @@ export const Icon = () => {
         theme: 'Light',
         sizeVariant: 'sm',
         message: 'With icon',
-        icon: 'blr360',
+        icon: 'blrInfo',
       })}
     </div>
     <div class="wrapper">
diff --git a/packages/ui-library/src/components/form-caption/index.ts b/packages/ui-library/src/components/form-caption/index.ts
index 389cf79b6..245edc757 100644
--- a/packages/ui-library/src/components/form-caption/index.ts
+++ b/packages/ui-library/src/components/form-caption/index.ts
@@ -48,7 +48,7 @@ export class BlrFormCaption extends LitElement {
           ${dynamicStyles}
         </style>
         <div class=${classes}>
-          ${this.icon
+          ${Boolean(this.icon)
             ? BlrIconRenderFunction(
                 {
                   icon: calculateIconName(