fix(781):Ensure Consistency between Storybook Documentation and Codebase Property Names

RubirajAccenture · RubirajAccenture · commit c719ecee0866 · 2024-02-21T14:01:11.000+01:00
diff --git a/packages/ui-library/src/components/form-label/index.stories.ts b/packages/ui-library/src/components/form-label/index.stories.ts
@@ -19,8 +19,7 @@ const sharedStyles = html`
 export default {
   title: 'Components/Form Label',
   argTypes: {
-    labelSize: {
-      name: 'sizeVariant',
+    sizeVariant: {
       description: 'Choose size of the component.',
       options: FormSizes,
       control: { type: 'radio' },
@@ -35,8 +34,7 @@ export default {
         category: 'Appearance',
       },
     },
-    labelText: {
-      name: 'label',
+    label: {
       description: 'Enter string used as label text.',
       control: {
         type: 'text',
@@ -57,8 +55,7 @@ export default {
       },
     },
 
-    variant: {
-      name: 'has Error',
+    hasError: {
       description: 'Choose if component has an error.',
       options: LabelVariants,
       control: { type: 'select' },
@@ -132,10 +129,10 @@ BlrFormLabel.storyName = 'Form Label';
 
 const defaultParams: BlrFormLabelType = {
   theme: 'Light',
-  labelSize: 'md',
-  labelText: 'Label-text',
+  sizeVariant: 'md',
+  label: 'Label-text',
   labelAppendix: '(Appendix)',
-  variant: 'label',
+  hasError: false,
   forValue: 'Form Label',
 };
 BlrFormLabel.args = defaultParams;
@@ -150,24 +147,24 @@ export const SizeVariant = () => {
     <div class="stories-form-label">
       ${WrappedBlrFormLabelRenderFunction({
         ...defaultParams,
-        labelSize: 'sm',
-        labelText: 'Form label SM',
+        sizeVariant: 'sm',
+        label: 'Form label SM',
         labelAppendix: '(Appendix SM)',
       })}
     </div>
     <div class="stories-form-label">
       ${WrappedBlrFormLabelRenderFunction({
         ...defaultParams,
-        labelSize: 'md',
-        labelText: 'Form label MD',
+        sizeVariant: 'md',
+        label: 'Form label MD',
         labelAppendix: '(Appendix MD)',
       })}
     </div>
     <div class="stories-form-label">
       ${WrappedBlrFormLabelRenderFunction({
         ...defaultParams,
-        labelSize: 'lg',
-        labelText: 'Form label LG',
+        sizeVariant: 'lg',
+        label: 'Form label LG',
         labelAppendix: '(Appendix LG)',
       })}
     </div>`;
@@ -183,20 +180,20 @@ export const LabelAppendix = () => {
   return html`
     ${WrappedBlrFormLabelRenderFunction({
       ...defaultParams,
-      labelSize: 'lg',
-      labelText: 'Form label',
+      sizeVariant: 'lg',
+      label: 'Form label',
       labelAppendix: '(required)',
     })}
     ${WrappedBlrFormLabelRenderFunction({
       ...defaultParams,
-      labelSize: 'lg',
-      labelText: 'Form label',
+      sizeVariant: 'lg',
+      label: 'Form label',
       labelAppendix: '(optional)',
     })}
     ${WrappedBlrFormLabelRenderFunction({
       ...defaultParams,
-      labelSize: 'lg',
-      labelText: 'Form label',
+      sizeVariant: 'lg',
+      label: 'Form label',
       labelAppendix: ' ',
     })}
   `;
@@ -212,9 +209,9 @@ LabelAppendix.story = { name: ' ' };
 export const HasError = () => {
   return html` ${WrappedBlrFormLabelRenderFunction({
     ...defaultParams,
-    labelText: 'Error',
+    label: 'Error',
     labelAppendix: '(with Appendix)',
-    variant: 'error',
+    hasError: true,
   })}`;
 };
 HasError.story = { name: ' ' };
diff --git a/packages/ui-library/src/components/form-label/index.test.ts b/packages/ui-library/src/components/form-label/index.test.ts
@@ -9,10 +9,10 @@ import { LitElement } from 'lit';
 
 const sampleParams: BlrFormLabelType = {
   theme: 'Light',
-  labelText: 'Label text',
+  label: 'Label text',
   labelAppendix: 'Appendix txt',
   forValue: 'for_txt',
-  variant: 'label',
+  hasError: false,
 };
 
 // The label is not creating a shadow root itself, but errors if it is outside
@@ -49,7 +49,7 @@ describe('blr-form-label', () => {
     const element = await fixture(
       WrappedBlrFormLabelRenderFunction({
         ...sampleParams,
-        labelText: 'New label',
+        label: 'New label',
         labelAppendix: '',
       })
     );
@@ -79,7 +79,7 @@ describe('blr-form-label', () => {
     const element = await fixture(
       WrappedBlrFormLabelRenderFunction({
         ...sampleParams,
-        labelText: 'New label',
+        label: 'New label',
         labelAppendix: '',
       })
     );
@@ -102,12 +102,12 @@ describe('blr-form-label', () => {
     const element = await fixture(
       WrappedBlrFormLabelRenderFunction({
         ...sampleParams,
-        variant: 'error',
+        hasError: true,
       })
     );
     const blrLabel = querySelectorDeep('label.blr-form-label', element.getRootNode() as HTMLElement);
     const errorLabel = blrLabel?.getAttribute('class');
-    expect(errorLabel).to.contain('error');
+    expect(errorLabel).to.contain('true');
   });
 
   it('has a size md by default', async () => {
@@ -120,7 +120,7 @@ describe('blr-form-label', () => {
   });
 
   it('has a size sm when "size" is set to "sm" ', async () => {
-    const element = await fixture(WrappedBlrFormLabelRenderFunction({ ...sampleParams, labelSize: 'sm' }));
+    const element = await fixture(WrappedBlrFormLabelRenderFunction({ ...sampleParams, sizeVariant: 'sm' }));
 
     const label = querySelectorDeep('label', element.getRootNode() as HTMLElement);
     const className = label?.className;
diff --git a/packages/ui-library/src/components/form-label/index.ts b/packages/ui-library/src/components/form-label/index.ts
@@ -4,17 +4,17 @@ import { classMap } from 'lit-html/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { formLight, formDark } from '../../foundation/semantic-tokens/form.css';
-import { InputSizesType, LabelVariantType } from '../../globals/types';
+import { InputSizesType } from '../../globals/types';
 
 export class BlrFormLabel extends LitElement {
   static styles = [];
 
-  @property() labelText = '';
+  @property() label = '';
   @property() labelAppendix?: string;
-  @property() labelSize?: InputSizesType = 'md';
+  @property() sizeVariant?: InputSizesType = 'md';
   @property() forValue: string | undefined;
   @property() theme: ThemeType = 'Light';
-  @property() variant: LabelVariantType = 'label';
+  @property() hasError: boolean = false;
 
   private _error: Error | null = null;
 
@@ -42,25 +42,25 @@ export class BlrFormLabel extends LitElement {
   }
 
   protected render() {
-    if (this.labelSize && !this._error) {
+    if (this.sizeVariant && !this._error) {
       const dynamicStyles = this.theme === 'Light' ? [formLight] : [formDark];
 
       const labelClasses = classMap({
         'blr-form-label': true,
-        [`${this.labelSize}`]: this.labelSize,
-        [`${this.variant}`]: this.variant,
+        [`${this.sizeVariant}`]: this.sizeVariant,
+        [`${this.hasError}`]: this.hasError,
       });
 
       const spanClasses = classMap({
         'blr-form-label-appendix': true,
-        [`${this.labelSize}`]: this.labelSize,
+        [`${this.sizeVariant}`]: this.sizeVariant,
       });
 
       return html`<style>
           ${dynamicStyles.map((style) => style)}
         </style>
         <label class=${labelClasses} for=${this.forValue || nothing}>
-          ${this.labelText}
+          ${this.label}
           <span class=${spanClasses}>${this.labelAppendix}</span>
         </label>`;
     }
diff --git a/packages/ui-library/src/components/number-input/index.ts b/packages/ui-library/src/components/number-input/index.ts
@@ -244,12 +244,12 @@ export class BlrNumberInput extends LitElement {
             ? html`
                 <div class="label-wrapper">
                   ${BlrFormLabelRenderFunction({
-                    labelText: this.label,
-                    labelSize: this.size,
+                    label: this.label,
+                    sizeVariant: this.size,
                     labelAppendix: this.labelAppendix,
                     forValue: this.numberInputId,
                     theme: this.theme,
-                    variant: this.hasError ? 'error' : 'label',
+                    hasError: Boolean(this.label),
                   })}
                 </div>
               `
diff --git a/packages/ui-library/src/components/select/index.ts b/packages/ui-library/src/components/select/index.ts
@@ -158,12 +158,12 @@ export class BlrSelect extends LitElement {
             ? html`
                 <div class="label-wrapper">
                   ${BlrFormLabelRenderFunction({
-                    labelText: this.label,
+                    label: this.label,
                     labelAppendix: this.labelAppendix,
-                    labelSize: this.size,
+                    sizeVariant: this.size,
                     forValue: this.selectId,
                     theme: this.theme,
-                    variant: this.hasError ? 'error' : 'label',
+                    hasError: Boolean(this.label),
                   })}
                 </div>
               `
diff --git a/packages/ui-library/src/components/text-input/index.stories.ts b/packages/ui-library/src/components/text-input/index.stories.ts
@@ -388,8 +388,6 @@ const argTypesToDisable = [
 const generateDisabledArgTypes = (argTypes: string[]) => {
   const disabledArgTypes = {};
   argTypes.forEach((argType: string) => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
     disabledArgTypes[argType] = {
       table: {
         disable: true,
diff --git a/packages/ui-library/src/components/text-input/index.ts b/packages/ui-library/src/components/text-input/index.ts
@@ -168,12 +168,12 @@ export class BlrTextInput extends LitElement {
             ? html`
                 <div class="label-wrapper">
                   ${BlrFormLabelRenderFunction({
-                    labelText: this.label,
-                    labelSize: this.size,
+                    label: this.label,
+                    sizeVariant: this.size,
                     labelAppendix: this.labelAppendix,
                     forValue: this.textInputId,
                     theme: this.theme,
-                    variant: this.hasError ? 'error' : 'label',
+                    hasError: Boolean(this.label),
                   })}
                 </div>
               `
diff --git a/packages/ui-library/src/components/textarea/index.stories.ts b/packages/ui-library/src/components/textarea/index.stories.ts
@@ -50,7 +50,7 @@ const defaultParams: BlrTextareaType = {
   readonly: false,
   hasError: false,
   errorMessage: '',
-  errorIcon: '',
+  errorIcon: 'blr360',
 };
 
 //Main Showcase Storybook Textarea, main argType Table
diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts
@@ -200,12 +200,12 @@ export class BlrTextarea extends LitElement {
           ${this.hasLabel
             ? html`<div class="label-wrapper">
                 ${BlrFormLabelRenderFunction({
-                  labelText: this.label,
-                  labelSize: this.size,
+                  label: this.label,
+                  sizeVariant: this.size,
                   labelAppendix: this.labelAppendix,
                   forValue: this.textareaId,
                   theme: this.theme,
-                  variant: this.hasError ? 'error' : 'label',
+                  hasError: Boolean(this.label),
                 })}
               </div>`
             : nothing}
