fix(ui-library): #800 align checkbox props with design (#1058)

Co-authored-by: Barkley <barkley.taylor@accenture.com> Co-authored-by: Julius Walther <julius.walther@sinnerschrader.com> Co-authored-by: David Kennedy <david.a.kennedy@accenture.com>
deven-org · Apr 4, 2024 · d60fae2 · d60fae2
1 parent 5ef2624
commit d60fae2
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 64 deletions.
diff --git a/packages/js-example-app/src/index.ejs b/packages/js-example-app/src/index.ejs
@@ -58,11 +58,11 @@
           <p>Checkbox</p>
           <blr-checkbox
             theme="Light"
-            size="md"
+            size-variant="md"
             has-label="true"
             label="Label-text"
-            aria-label="check Input"
-            check-input-id="checkInputId"
+            arialabel="checkbox"
+            checkbox-id="checkboxId"
             name="checkInputId">
           </blr-checkbox>
         </div>

diff --git a/packages/ui-library/src/components/checkbox/index.stories.ts b/packages/ui-library/src/components/checkbox/index.stories.ts
@@ -25,8 +25,7 @@ export default {
   title: 'Components/Checkbox',
   argTypes: {
     // Appearance
-    size: {
-      name: 'sizeVariant',
+    sizeVariant: {
       description: 'Choose size of the component.',
       options: InputSizes,
       control: { type: 'radio' },
@@ -102,8 +101,7 @@ export default {
         category: 'Content / Settings',
       },
     },
-    hintIcon: {
-      name: 'hintMessageIcon',
+    hintMessageIcon: {
       description: 'Select an icon which is displayed in front of the hint message.',
       options: [undefined, ...PureIconKeys],
       control: { type: 'select' },
@@ -114,7 +112,6 @@ export default {
     },
     //States
     disabled: {
-      name: 'disabled',
       description:
         'Choose if component is disabled. Prevents the user to select or change the value of this component.   ',
       defaultValue: false,
@@ -123,31 +120,27 @@ export default {
       },
     },
     readonly: {
-      name: 'readonly',
       description: 'Choose if component is readonly. The user can select but not change the value of this component.',
       defaultValue: false,
       table: {
         category: 'States',
       },
     },
     hasError: {
-      name: 'hasError',
       description: 'Choose if component has an error.',
       defaultValue: false,
       table: {
         category: 'Validation',
       },
     },
     errorMessage: {
-      name: 'errorMessage',
       description: 'Enter string used used as error message.',
       table: {
         category: 'Validation',
       },
       if: { arg: 'hasError', eq: true },
     },
-    errorIcon: {
-      name: 'errorMessageIcon',
+    errorMessageIcon: {
       description: 'Select an icon which is displayed in front of the error message.',
       table: {
         category: 'Validation',
@@ -166,41 +159,33 @@ export default {
       },
     },
     //Technical attributes
-    checkInputId: {
-      name: 'checkInputId',
+    checkboxId: {
       description: 'Unique identifier for this component.',
       table: {
         category: 'Technical Attributes',
       },
     },
     name: {
-      name: 'name',
       description: 'For a < form > element, the name attribute is used as a reference when the data is submitted. ',
       table: {
         category: 'Technical Attributes',
       },
     },
     // Events
-    onChange: {
-      name: 'onChange',
+    blrCheckedChange: {
       description: 'Fires when the value changes.',
-      action: 'onChange',
       table: {
         category: 'Events',
       },
     },
-    onFocus: {
-      name: 'onFocus',
+    blrFocus: {
       description: 'Fires when the component is focused.',
-      action: 'onFocus',
       table: {
         category: 'Events',
       },
     },
-    onBlur: {
-      name: 'onBlur',
+    blrBlur: {
       description: 'Fires when the component lost focus.',
-      action: 'onBlur',
       table: {
         category: 'Events',
       },
@@ -246,7 +231,7 @@ export default {
 // Default parameters for Checkbox component
 const defaultParams: BlrCheckboxType = {
   theme: 'Light',
-  size: 'md',
+  sizeVariant: 'md',
   checked: false,
   checkedIcon: 'blrCheckmark',
   indeterminate: false,
@@ -255,14 +240,14 @@ const defaultParams: BlrCheckboxType = {
   label: 'Label-text',
   hasHint: false,
   hintMessage: 'This is a small hint message',
-  hintIcon: 'blrInfo',
+  hintMessageIcon: 'blrInfo',
   disabled: false,
   readonly: false,
   hasError: false,
   errorMessage: ' ',
-  errorIcon: undefined,
-  arialabel: 'check Input',
-  checkInputId: 'checkInputId',
+  errorMessageIcon: undefined,
+  arialabel: 'checkbox',
+  checkboxId: 'checkboxId',
   name: 'checkInputId',
 };
 
@@ -285,17 +270,17 @@ export const SizeVariant = () => {
         ${BlrCheckboxRenderFunction({
           ...defaultParams,
           label: 'Size SM',
-          size: 'sm',
+          sizeVariant: 'sm',
         })}
         ${BlrCheckboxRenderFunction({
           ...defaultParams,
           label: 'Size MD',
-          size: 'md',
+          sizeVariant: 'md',
         })}
         ${BlrCheckboxRenderFunction({
           ...defaultParams,
           label: 'Size LG',
-          size: 'lg',
+          sizeVariant: 'lg',
         })}
       </div>
     </div>
@@ -493,16 +478,16 @@ export const FormCaptionGroup = () => {
           ...defaultParams,
           label: 'Hint message',
           hasHint: true,
-          hintIcon: 'blrInfo',
+          hintMessageIcon: 'blrInfo',
         })}
         ${BlrCheckboxRenderFunction({
           ...defaultParams,
           label: 'Hint and error message',
           hasHint: true,
           hasError: true,
-          hintIcon: 'blrInfo',
+          hintMessageIcon: 'blr360',
           errorMessage: "OMG it's an error",
-          errorIcon: 'blrErrorFilled',
+          errorMessageIcon: 'blrErrorFilled',
         })}
       </div>
     </div>

diff --git a/packages/ui-library/src/components/checkbox/index.test.ts b/packages/ui-library/src/components/checkbox/index.test.ts
@@ -8,18 +8,18 @@ import type { BlrCheckboxType } from '.';
 
 const sampleParams: BlrCheckboxType = {
   label: 'Checkbox Option',
-  checkInputId: 'Checky',
+  checkboxId: 'Checky',
   disabled: false,
   checked: false,
   indeterminate: false,
   readonly: false,
   hasError: false,
-  size: 'md',
+  sizeVariant: 'md',
   errorMessage: 'This is a sample error message',
-  errorIcon: undefined,
+  errorMessageIcon: undefined,
   hasHint: false,
   hintMessage: 'This is a sample hint',
-  hintIcon: undefined,
+  hintMessageIcon: undefined,
   theme: 'Light',
   hasLabel: true,
 };
@@ -54,9 +54,9 @@ describe('blr-checkbox', () => {
       BlrCheckboxRenderFunction({
         ...sampleParams,
         hasHint: true,
-        hintIcon: 'blrInfo',
+        hintMessageIcon: 'blrInfo',
         hasError: true,
-        errorIcon: 'blrErrorFilled',
+        errorMessageIcon: 'blrErrorFilled',
       })
     );
 
@@ -82,7 +82,7 @@ describe('blr-checkbox', () => {
   });
 
   it('has a size sm when "size" is set to "sm" ', async () => {
-    const element = await fixture(BlrCheckboxRenderFunction({ ...sampleParams, size: 'sm' }));
+    const element = await fixture(BlrCheckboxRenderFunction({ ...sampleParams, sizeVariant: 'sm' }));
 
     const checkbox = querySelectorDeep('div.blr-checkbox', element.getRootNode() as HTMLElement);
     const className = checkbox?.className;

diff --git a/packages/ui-library/src/components/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts
@@ -41,7 +41,7 @@ export class BlrCheckbox extends LitElementCustom {
   protected _checkboxNode!: HTMLInputElement;
 
   @property() label!: string;
-  @property() checkInputId?: string = '';
+  @property() checkboxId?: string = '';
   @property() arialabel?: string;
 
   @property() disabled?: boolean;
@@ -50,16 +50,16 @@ export class BlrCheckbox extends LitElementCustom {
   @property() readonly?: boolean;
   @property() hasError?: boolean;
   @property() errorMessage?: string;
-  @property() errorIcon?: SizelessIconType;
+  @property() errorMessageIcon?: SizelessIconType;
   @property() hasHint?: boolean;
-  @property() hintIcon?: SizelessIconType;
+  @property() hintMessageIcon?: SizelessIconType;
   @property() hintMessage?: string;
   @property() hasLabel!: boolean;
   @property() name?: string;
   @property() checkedIcon?: SizelessIconType = 'blrCheckmark';
   @property() indeterminatedIcon?: SizelessIconType = 'blrMinus';
 
-  @property() size?: FormSizesType = 'md';
+  @property() sizeVariant?: FormSizesType = 'md';
 
   @property() theme: ThemeType = 'Light';
 
@@ -140,14 +140,14 @@ export class BlrCheckbox extends LitElementCustom {
   };
 
   protected render() {
-    if (this.size && this.checkInputId) {
+    if (this.sizeVariant && this.checkboxId) {
       const dynamicStyles = this.theme === 'Light' ? [formLight, checkboxLight] : [formDark, checkboxDark];
 
       const classes = classMap({
         'blr-semantic-action': true,
         'blr-checkbox': true,
         'error': this.hasError || false,
-        [`${this.size}`]: this.size,
+        [`${this.sizeVariant}`]: this.sizeVariant,
       });
 
       const labelWrapperClasses = classMap({
@@ -189,32 +189,32 @@ export class BlrCheckbox extends LitElementCustom {
         'Control',
         'Icon',
         'SizeVariant',
-        this.size.toUpperCase(),
+        this.sizeVariant.toUpperCase(),
       ]).toLowerCase() as FormSizesType;
 
-      const getCaptionContent = () => html`
-        ${this.hasHint && (this.hintMessage || this.hintIcon)
+      const captionContent = html`
+        ${this.hasHint && (this.hintMessage || this.hintMessageIcon)
           ? html`
               <div class="hint-wrapper">
                 ${BlrFormCaptionRenderFunction({
                   variant: 'hint',
                   theme: this.theme,
-                  sizeVariant: this.size,
+                  sizeVariant: this.sizeVariant,
                   message: this.hintMessage,
-                  icon: this.hintIcon,
+                  icon: this.hintMessageIcon,
                 })}
               </div>
             `
           : nothing}
-        ${this.hasError && (this.errorMessage || this.errorIcon)
+        ${this.hasError && (this.errorMessage || this.errorMessageIcon)
           ? html`
               <div class="error-wrapper">
                 ${BlrFormCaptionRenderFunction({
                   variant: 'error',
                   theme: this.theme,
-                  sizeVariant: this.size,
+                  sizeVariant: this.sizeVariant,
                   message: this.errorMessage,
-                  icon: this.errorIcon,
+                  icon: this.errorMessageIcon,
                 })}
               </div>
             `
@@ -259,8 +259,8 @@ export class BlrCheckbox extends LitElementCustom {
             type="checkbox"
             class="input-control"
             tabindex="-1"
-            aria-label="${this.arialabel}"
-            id=${this.checkInputId || nothing}
+            aria-label="${this.ariaLabel}"
+            id=${this.checkboxId || nothing}
             name=${this.name || nothing}
             ?disabled=${this.disabled}
             ?checked=${this.currentCheckedState}
@@ -271,7 +271,7 @@ export class BlrCheckbox extends LitElementCustom {
             aria-hidden="true"
           />
 
-          <label class="${visualCheckboxClasses}" for="${this.checkInputId}" aria-hidden="true" tabindex="-1">
+          <label class="${visualCheckboxClasses}" for="${this.checkboxId}" aria-hidden="true" tabindex="-1">
             ${this.currentIndeterminateState
               ? BlrIconRenderFunction(
                   {
@@ -299,12 +299,12 @@ export class BlrCheckbox extends LitElementCustom {
             ${this.hasLabel
               ? html`${BlrFormLabelInlineRenderFunction({
                   labelText: this.label,
-                  forValue: this.checkInputId,
-                  labelSize: this.size,
+                  forValue: this.checkboxId,
+                  labelSize: this.sizeVariant,
                 })}`
               : nothing}
-            ${(this.hasHint && this.hintMessage) || (this.hasError && this.errorMessage)
-              ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, getCaptionContent())
+            ${this.hasHint || this.hasError
+              ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, captionContent)
               : nothing}
           </div>
         </div>