fix(ui-library): checkbox component fixes (#1148)

Co-authored-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com>
deven-org · Aug 26, 2024 · a7057b1 · a7057b1
1 parent d94e1a6
commit a7057b1
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 33 deletions.
diff --git a/packages/ui-library/src/components/checkbox/index.stories.ts b/packages/ui-library/src/components/checkbox/index.stories.ts
@@ -64,7 +64,7 @@ export default {
         category: 'Content / Settings',
       },
     },
-    indeterminatedIcon: {
+    indeterminateIcon: {
       description: 'Select an icon which is displayed when checkbox is indeterminate.',
       options: [undefined, ...PureIconKeys],
       control: { type: 'select' },
@@ -87,6 +87,17 @@ export default {
       },
       if: { arg: 'hasLabel', eq: true },
     },
+    labelAppendix: {
+      description:
+        ' Enter string used as an appendix to the label. Use this to inform the user if this field is required or not.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Content / Settings',
+      },
+      if: { arg: 'hasLabel', eq: true },
+    },
     hasHint: {
       description: 'Choose if component has a hint message.',
       control: { type: 'boolean' },
@@ -126,6 +137,15 @@ export default {
         category: 'States',
       },
     },
+
+    //Validation
+    required: {
+      description: 'Choose if the component must hold a value after an interaction or a submit.',
+      defaultValue: false,
+      table: {
+        category: 'Validation',
+      },
+    },
     hasError: {
       description: 'Choose if component has an error.',
       defaultValue: false,
@@ -221,6 +241,7 @@ export default {
  - [**Disabled**](#disabled) 
  - [**Readonly**](#readonly)
 - [**Validation**](#validation)
+ - [**Required**](#required) 
  - [**Has Error**](#has-error)  
 - [**Dependencies**](#dependencies)
  - [**Form-Label**](#form-label) 
@@ -238,14 +259,15 @@ const defaultParams: BlrCheckboxType = {
   checked: false,
   checkedIcon: 'blrCheckmark',
   indeterminate: false,
-  indeterminatedIcon: 'blrMinus',
+  indeterminateIcon: 'blrMinus',
   hasLabel: true,
   label: 'Label-text',
   hasHint: false,
   hintMessage: 'This is a small hint message',
   hintMessageIcon: 'blrInfo',
   disabled: false,
   readonly: false,
+  required: false,
   hasError: false,
   errorMessage: ' ',
   errorMessageIcon: undefined,
@@ -258,6 +280,42 @@ export const BlrCheckbox = (params: BlrCheckboxType) => BlrCheckboxRenderFunctio
 BlrCheckbox.storyName = 'Checkbox';
 BlrCheckbox.args = defaultParams;
 
+//disabledArgTypesTable to deactivate the controls-Panel for a story in storybook
+const argTypesToDisable = [
+  'theme',
+  'sizeVariant',
+  'checked',
+  'checkedIcon',
+  'indeterminate',
+  'indeterminateIcon',
+  'hasLabel',
+  'label',
+  'hasHint',
+  'hintMessage',
+  'hintMessageIcon',
+  'disabled',
+  'readonly',
+  'required',
+  'hasError',
+  'errorMessage',
+  'errorMessageIcon',
+  'arialabel',
+  'checkboxId',
+  'name',
+];
+const generateDisabledArgTypes = (argTypes: string[]) => {
+  const disabledArgTypes = {};
+  argTypes.forEach((argType: string) => {
+    disabledArgTypes[argType] = {
+      table: {
+        disable: true,
+      },
+    };
+  });
+  return disabledArgTypes;
+};
+const disabledArgTypes = generateDisabledArgTypes(argTypesToDisable);
+
 // All Stories
 //Appearance Size Story
 /**
@@ -392,32 +450,39 @@ export const Readonly = () => {
 Readonly.story = {
   name: ' ',
 };
-// todo will be implemented with ticket no. #673
-// /**
-//  * ## Validation
-//  *
-//  * ### Required
-//  * The Checkbox component can be set as required. If set as required, an error should be thrown, when the Checkbox component was not checked, before it was submitted. It is recommended to indicate in the label appendix, whether a component is required or not. For more information on the label and label appendix have a look at the [Form Label](/docs/components-form-label--docs) component in the dependencies section below.
-//  */
-// export const Required = () => {
-//   return html`
-//     ${sharedStyles}
-//     <div class="wrapper">
-//       <div class="stories-checkbox">
-//         ${BlrCheckboxRenderFunction({
-//           ...defaultParams,
-//           label: 'Required',
-//         })}
-//       </div>
-//     </div>
-//   `;
-// };
-// Required.story = {
-//   name: ' ',
-// };
-
 /**
  * ## Validation
+ * ### Required
+ * The Checkbox component can be set as required. If set as required, an error should be thrown, when the Text Area component was not filled, before it was submitted. It is recommended to indicate in the label appendix, whether a component is required or not. For more information on the label and label appendix have a look at the [Form Label](#form-label) component in the dependencies section below.
+ */
+export const Required = () => {
+  return html`
+    ${sharedStyles}
+    <div class="wrapper">
+      <div class="stories-checkbox">
+        ${BlrCheckboxRenderFunction({
+          ...defaultParams,
+          theme: 'Light',
+          sizeVariant: 'md',
+          label: 'Required',
+          placeholder: '',
+          hintMessage: '',
+          required: true,
+          labelAppendix: '(required)',
+          value: '',
+        })}
+      </div>
+    </div>
+  `;
+};
+Required.argTypes = {
+  ...disabledArgTypes,
+};
+Required.story = {
+  name: ' ',
+};
+
+/**
  * ### Has Error
  * The Checkbox component can be set to have an error. An error can be displayed after submitting a wrong value, after leaving/deselecting the Checkbox or in case the Checkbox was set as required and has not been checked before submitting. For more information on the error message have a look at the [Form Caption Group](#form-caption-group) in the dependencies section below.
  */

diff --git a/packages/ui-library/src/components/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts
@@ -57,11 +57,12 @@ export class BlrCheckbox extends LitElementCustom {
   @property() accessor hasLabel!: boolean;
   @property() accessor name: string | undefined;
   @property() accessor checkedIcon: SizelessIconType | undefined = 'blrCheckmark';
-  @property() accessor indeterminatedIcon: SizelessIconType | undefined = 'blrMinus';
+  @property() accessor indeterminateIcon: SizelessIconType | undefined = 'blrMinus';
 
   @property() accessor sizeVariant: FormSizesType | undefined = 'md';
 
   @property() accessor theme: ThemeType = 'Light';
+  @property({ type: Boolean }) accessor required: boolean | undefined;
 
   @state() protected accessor currentCheckedState: boolean | undefined = this.checked;
   @state() protected accessor currentIndeterminateState: boolean | undefined = this.indeterminate;
@@ -87,23 +88,23 @@ export class BlrCheckbox extends LitElementCustom {
         createBlrCheckedChangeEvent({
           originalEvent: event,
           checkedState: this.currentCheckedState,
-        })
+        }),
       );
     }
   }
 
   @state() protected accessor focused = false;
 
   protected handleFocus = (event: FocusEvent) => {
-    if (!this.disabled && !this.readonly) {
+    if (!this.disabled) {
       this.focused = true;
 
       this.dispatchEvent(createBlrFocusEvent({ originalEvent: event }));
     }
   };
 
   protected handleBlur = (event: FocusEvent) => {
-    if (!this.disabled && !this.readonly) {
+    if (!this.disabled) {
       this.focused = false;
 
       this.dispatchEvent(createBlrBlurEvent({ originalEvent: event }));
@@ -157,6 +158,7 @@ export class BlrCheckbox extends LitElementCustom {
         'hover': this.hovered || false,
         'active': this.active || false,
         'checked': this.currentCheckedState || false,
+        'required': this.required || false,
         'readonly': this.readonly || false,
         'indeterminate': this.currentIndeterminateState || false,
       });
@@ -168,6 +170,7 @@ export class BlrCheckbox extends LitElementCustom {
         'hover': this.hovered || false,
         'active': this.active || false,
         'checked': this.currentCheckedState || false,
+        'required': this.required || false,
         'readonly': this.readonly || false,
         'indeterminate': this.currentIndeterminateState || false,
         'focus': this.focused || false,
@@ -262,6 +265,7 @@ export class BlrCheckbox extends LitElementCustom {
             ?checked=${this.currentCheckedState}
             ?indeterminate=${this.currentIndeterminateState}
             ?readonly=${this.readonly}
+            ?required="${this.required}"
             ?hasError=${this.hasError}
             @change=${this.handleChange}
             aria-hidden="true"
@@ -271,12 +275,12 @@ export class BlrCheckbox extends LitElementCustom {
             ${this.currentIndeterminateState
               ? BlrIconRenderFunction(
                   {
-                    icon: calculateIconName(this.indeterminatedIcon, checkerIconSizeVariant),
+                    icon: calculateIconName(this.indeterminateIcon, checkerIconSizeVariant),
                     classMap: checkerIconClasses,
                   },
                   {
                     'aria-hidden': true,
-                  }
+                  },
                 )
               : BlrIconRenderFunction(
                   {
@@ -285,7 +289,7 @@ export class BlrCheckbox extends LitElementCustom {
                   },
                   {
                     'aria-hidden': true,
-                  }
+                  },
                 )}
 
             <div class="${focusRingClasses}"></div>