fix(ui-library): props alignment form caption

packages/ui-library/src/components/checkbox/index.ts

@@ -198,7 +198,7 @@ export class BlrCheckbox extends LitElement {
                 ${BlrFormCaptionRenderFunction({
                   variant: 'hint',
                   theme: this.theme,
-                  size: this.size,
+                  sizeVariant: this.size,
                   message: this.hintMessage,
                   icon: this.hintIcon,
                 })}
@@ -211,7 +211,7 @@ export class BlrCheckbox extends LitElement {
                 ${BlrFormCaptionRenderFunction({
                   variant: 'error',
                   theme: this.theme,
-                  size: this.size,
+                  sizeVariant: this.size,
                   message: this.errorMessage,
                   icon: this.errorIcon,
                 })}

packages/ui-library/src/components/form-caption-group/index.stories.ts

@@ -54,13 +54,15 @@ It is not intended to use the Form Caption Group directly when creating new appl
 const hintCaption = BlrFormCaptionRenderFunction({
   message: 'hint',
   variant: 'hint',
+  showIcon: true,
   icon: 'blrInfo',
   theme: 'Light',
 });
 
 const errorCaption = BlrFormCaptionRenderFunction({
   message: 'error',
   variant: 'error',
+  showIcon: true,
   icon: 'blrErrorFilled',
   theme: 'Light',
 });

packages/ui-library/src/components/form-caption-group/index.test.ts

@@ -15,16 +15,18 @@ const sampleParams: BlrFormCaptionGroupType = {
 const hintCaption = BlrFormCaptionRenderFunction({
   message: 'This is a hint',
   variant: 'hint',
+  showIcon: true,
   icon: 'blrInfo',
-  size: 'md',
+  sizeVariant: 'md',
   theme: 'Light',
 });
 
 const errorCaption = BlrFormCaptionRenderFunction({
   message: 'This is an error',
   variant: 'error',
+  showIcon: true,
   icon: 'blrInfo',
-  size: 'md',
+  sizeVariant: 'md',
   theme: 'Light',
 });
 

packages/ui-library/src/components/form-caption/index.stories.ts

@@ -18,9 +18,10 @@ const sharedStyles = html`
 export default {
   title: 'Components/Form Caption',
   argTypes: {
-    size: {
+    sizeVariant: {
       options: FormSizes,
       control: { type: 'radio' },
+      defaultValue: 'sm',
       description: ' Choose size of the component.',
       table: {
         category: 'Appearance',
@@ -44,12 +45,20 @@ export default {
       },
     },
 
+    showIcon: {
+      description: 'Choose if component has an icon.',
+      defaultValue: true,
+      control: { type: 'boolean' },
+      table: { category: 'Content / Settings' },
+    },
+
     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: {
@@ -72,15 +81,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,9 +105,10 @@ BlrFormCaption.storyName = 'Form Caption';
 const args: BlrFormCaptionType = {
   theme: 'Light',
   message: 'Message-text',
+  showIcon: true,
   icon: 'blr360',
   variant: 'hint',
-  size: 'sm',
+  sizeVariant: 'sm',
 };
 
 BlrFormCaption.args = args;
@@ -119,17 +126,19 @@ export const Variant = () => {
       ${BlrFormCaptionRenderFunction({
         variant: 'hint',
         theme: 'Light',
-        size: 'sm',
+        sizeVariant: 'sm',
         message: 'Hint',
+        showIcon: true,
         icon: 'blr360',
       })}
     </div>
     <div class="wrapper">
       ${BlrFormCaptionRenderFunction({
         variant: 'error',
         theme: 'Light',
-        size: 'sm',
+        sizeVariant: 'sm',
         message: 'Error',
+        showIcon: true,
         icon: 'blrErrorFilled',
       })}
     </div>
@@ -149,17 +158,19 @@ export const SizeVariant = () => {
       ${BlrFormCaptionRenderFunction({
         variant: 'hint',
         theme: 'Light',
-        size: 'sm',
+        sizeVariant: 'sm',
         message: 'Form Caption SM',
+        showIcon: true,
         icon: 'blr360',
       })}
     </div>
     <div class="wrapper">
       ${BlrFormCaptionRenderFunction({
         variant: 'hint',
         theme: 'Light',
-        size: 'md',
+        sizeVariant: 'md',
         message: 'Form Caption MD',
+        showIcon: true,
         icon: 'blr360',
       })}
     </div>
@@ -168,8 +179,9 @@ export const SizeVariant = () => {
       ${BlrFormCaptionRenderFunction({
         variant: 'hint',
         theme: 'Light',
-        size: 'lg',
+        sizeVariant: 'lg',
         message: 'Form Caption LG',
+        showIcon: true,
         icon: 'blr360',
       })}
     </div>
@@ -191,17 +203,19 @@ export const Icon = () => {
       ${BlrFormCaptionRenderFunction({
         variant: 'hint',
         theme: 'Light',
-        size: 'sm',
+        sizeVariant: 'sm',
         message: 'With icon',
+        showIcon: true,
         icon: 'blr360',
       })}
     </div>
     <div class="wrapper">
       ${BlrFormCaptionRenderFunction({
         variant: 'hint',
         theme: 'Light',
-        size: 'sm',
+        sizeVariant: 'sm',
         message: 'Without icon',
+        showIcon: false,
       })}
     </div>
   `;

packages/ui-library/src/components/form-caption/index.test.ts

@@ -9,9 +9,10 @@ import { querySelectorDeep } from 'query-selector-shadow-dom';
 const sampleParams: BlrFormCaptionType = {
   theme: 'Light',
   message: 'hallo',
+  showIcon: true,
   icon: 'blr360',
   variant: 'hint',
-  size: 'sm',
+  sizeVariant: 'sm',
 };
 
 describe('blr-form-caption', () => {

packages/ui-library/src/components/form-caption/index.ts

@@ -14,41 +14,42 @@ export class BlrFormCaption extends LitElement {
   static styles = [];
 
   @property() message?: string;
+  @property({ type: Boolean }) showIcon: boolean = true;
   @property() icon?: SizelessIconType;
   @property() variant: CaptionVariantType = 'hint';
-  @property() size?: FormSizesType = 'md';
+  @property() sizeVariant?: FormSizesType = 'md';
   @property() childElement?: TemplateResult<1>;
   @property() theme: ThemeType = 'Light';
 
   protected render() {
-    if (this.size) {
+    if (this.sizeVariant) {
       const dynamicStyles = this.theme === 'Light' ? [captionLight] : [captionDark];
 
       const classes = classMap({
         'blr-form-caption': true,
         [`${this.variant}`]: this.variant,
-        [`${this.size}`]: this.size,
+        [`${this.sizeVariant}`]: this.sizeVariant,
       });
 
       const iconClasses = classMap({
         'blr-icon': true,
-        [this.size]: this.size,
+        [this.sizeVariant]: this.sizeVariant,
       });
 
       const iconSizeVariant = getComponentConfigToken([
         'cmp',
         'CaptionComponent',
         'Icon',
         'SizeVariant',
-        this.size.toUpperCase(),
+        this.sizeVariant.toUpperCase(),
       ]).toLowerCase() as SizesType;
 
       return html`
         <style>
           ${dynamicStyles}
         </style>
         <div class=${classes}>
-          ${this.icon
+          ${this.showIcon
             ? BlrIconRenderFunction(
                 {
                   icon: calculateIconName(

packages/ui-library/src/components/input-field-number/index.ts

@@ -275,8 +275,9 @@ export class BlrInputFieldNumber extends LitElement {
                 ${BlrFormCaptionRenderFunction({
                   variant: 'hint',
                   theme: this.theme,
-                  size: this.sizeVariant,
+                  sizeVariant: this.sizeVariant,
                   message: this.hintMessage,
+                  showIcon: Boolean(this.hintIcon),
                   icon: this.hintIcon,
                 })}
               </div>
@@ -288,8 +289,9 @@ export class BlrInputFieldNumber extends LitElement {
                 ${BlrFormCaptionRenderFunction({
                   variant: 'error',
                   theme: this.theme,
-                  size: this.sizeVariant,
+                  sizeVariant: this.sizeVariant,
                   message: this.errorMessage,
+                  showIcon: Boolean(this.errorIcon),
                   icon: this.errorIcon,
                 })}
               </div>

packages/ui-library/src/components/input-field-text/index.ts

@@ -144,17 +144,19 @@ export class BlrInputFieldText extends LitElement {
           ? BlrFormCaptionRenderFunction({
               variant: 'hint',
               theme: this.theme,
-              size: this.size,
+              sizeVariant: this.size,
               message: this.hintMessage,
+              showIcon: Boolean(this.hintIcon),
               icon: this.hintIcon,
             })
           : nothing}
         ${this.hasError && (this.errorMessage || this.errorIcon)
           ? BlrFormCaptionRenderFunction({
               variant: 'error',
               theme: this.theme,
-              size: this.size,
+              sizeVariant: this.size,
               message: this.errorMessage,
+              showIcon: Boolean(this.errorIcon),
               icon: this.errorIcon,
             })
           : nothing}

packages/ui-library/src/components/radio-group/index.ts

@@ -71,17 +71,19 @@ export class BlrRadioGroup extends LitElement {
         ? BlrFormCaptionRenderFunction({
             variant: 'hint',
             theme: this.theme,
-            size: this.size,
+            sizeVariant: this.size,
             message: this.groupHintMessage,
+            showIcon: Boolean(this.groupHintIcon),
             icon: this.groupHintIcon,
           })
         : nothing}
       ${this.hasError && (this.groupErrorMessage || this.groupErrorIcon)
         ? BlrFormCaptionRenderFunction({
             variant: 'error',
             theme: this.theme,
-            size: this.size,
+            sizeVariant: this.size,
             message: this.groupErrorMessage,
+            showIcon: Boolean(this.groupErrorIcon),
             icon: this.groupErrorIcon,
           })
         : nothing}

packages/ui-library/src/components/radio/index.ts

@@ -54,8 +54,9 @@ export class BlrRadio extends LitElement {
                 ${BlrFormCaptionRenderFunction({
                   variant: 'hint',
                   theme: this.theme,
-                  size: this.size,
+                  sizeVariant: this.size,
                   message: this.hintMessage,
+                  showIcon: Boolean(this.hintIcon),
                   icon: this.hintIcon,
                 })}
               </div>
@@ -67,8 +68,9 @@ export class BlrRadio extends LitElement {
                 ${BlrFormCaptionRenderFunction({
                   variant: 'error',
                   theme: this.theme,
-                  size: this.size,
+                  sizeVariant: this.size,
                   message: this.errorMessage,
+                  showIcon: Boolean(this.errorIcon),
                   icon: this.errorIcon,
                 })}
               </div>

packages/ui-library/src/components/select/index.ts

@@ -133,17 +133,19 @@ export class BlrSelect extends LitElement {
           ? BlrFormCaptionRenderFunction({
               variant: 'hint',
               theme: this.theme,
-              size: this.sizeVariant,
+              sizeVariant: this.sizeVariant,
               message: this.hintMessage,
+              showIcon: Boolean(this.hintMessageIcon),
               icon: this.hintMessageIcon,
             })
           : nothing}
         ${this.hasError && (this.errorMessage || this.errorMessageIcon)
           ? BlrFormCaptionRenderFunction({
               variant: 'error',
               theme: this.theme,
-              size: this.sizeVariant,
+              sizeVariant: this.sizeVariant,
               message: this.errorMessage,
+              showIcon: Boolean(this.errorMessageIcon),
               icon: this.errorMessageIcon,
             })
           : nothing}

packages/ui-library/src/components/textarea/index.ts

@@ -177,17 +177,19 @@ export class BlrTextarea extends LitElement {
           ? BlrFormCaptionRenderFunction({
               variant: 'hint',
               theme: this.theme,
-              size: this.sizeVariant,
+              sizeVariant: this.sizeVariant,
               message: this.hintMessage,
+              showIcon: Boolean(this.hintMessageIcon),
               icon: this.hintMessageIcon,
             })
           : nothing}
         ${this.hasError && (this.errorMessage || this.errorMessageIcon)
           ? BlrFormCaptionRenderFunction({
               variant: 'error',
               theme: this.theme,
-              size: this.sizeVariant,
+              sizeVariant: this.sizeVariant,
               message: this.errorMessage,
+              showIcon: Boolean(this.errorMessageIcon),
               icon: this.errorMessageIcon,
             })
           : nothing}

packages/ui-library/src/components/toggle-switch/index.ts

@@ -163,8 +163,9 @@ export class BlrToggleSwitch extends LitElement {
               ? BlrFormCaptionRenderFunction({
                   message: this.hintMessage,
                   variant: 'hint',
+                  showIcon: Boolean(this.hintIcon),
                   icon: this.hintIcon,
-                  size: this.size || 'sm',
+                  sizeVariant: this.size || 'sm',
                   theme: this.theme,
                 })
               : nothing}