Merge pull request #491 from Infineon/288-design-review-component-che…

…ckbox checkbox sizes added;font changed;error state fix
Infineon · Sep 11, 2023 · 6806c8d · 6806c8d
2 parents 2510663 + 4db8db3
commit 6806c8d
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 14 deletions.
diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
@@ -100,6 +100,7 @@ export const IfxCheckbox = /*@__PURE__*/ defineContainer<JSX.IfxCheckbox>('ifx-c
   'value',
   'error',
   'name',
+  'size',
   'indeterminate',
   'ifxChange'
 ]);

diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss
@@ -6,7 +6,6 @@
 }
 
 
-
 .checkbox__container {
     box-sizing: border-box;
     display: inline-flex;
@@ -29,6 +28,12 @@
         order: 0;
         flex-grow: 0;
 
+        &.checkbox-m {
+            height: tokens.$ifxSize300;
+            width: tokens.$ifxSize300;
+        }
+
+
         &.error {
             border-color: #CD002F;
         }
@@ -66,6 +71,10 @@
             flex-grow: 0;
             color: tokens.$ifxColorBaseWhite;
 
+            &.error {
+                background-color: #CD002F;
+            }
+
             &:focus-visible {
                 border: 1px solid transparent;
                 outline: 2px solid #0A8276;
@@ -106,8 +115,8 @@
     }
 
     & .label {
-        width: 25px;
         height: tokens.$ifxSize250;
+        font-family: tokens.$ifxFontFamilyBody;
         font-style: normal;
         font-weight: 400;
         font-size: tokens.$ifxFontSizeS;
@@ -117,12 +126,14 @@
         order: 1;
         flex-grow: 0;
 
-        &.disabled {
-            color: #BFBBBB;
+        &.label-m {
+            height: tokens.$ifxSize300;
+            font-size: tokens.$ifxFontSizeM;
+            line-height: tokens.$ifxLineHeightM;
         }
 
-        &.error {
-            color: #CD002F;
+        &.disabled {
+            color: #BFBBBB;
         }
     }
 

diff --git a/packages/components/src/components/checkbox/checkbox.stories.ts b/packages/components/src/components/checkbox/checkbox.stories.ts
@@ -8,10 +8,19 @@ export default {
     disabled: false,
     value: false,
     label: 'Text',
+    size: 's',
     indeterminate: false,
   },
 
-  argTypes: { onIfxChange: { action: 'checked' } },
+  argTypes: {
+    size: {
+      options: ['s', 'm'],
+      control: { type: 'radio' },
+    },
+    onIfxChange: {
+      action: 'ifxChange'
+    }
+  },
 
 };
 
@@ -21,12 +30,14 @@ const DefaultTemplate = ({
   disabled,
   value,
   indeterminate,
+  size,
   label
 }) => {
   const checkbox = document.createElement('ifx-checkbox');
   checkbox.setAttribute('error', error);
   checkbox.setAttribute('disabled', disabled);
   checkbox.setAttribute('value', value);
+  checkbox.setAttribute('size', size);
   checkbox.setAttribute('indeterminate', indeterminate);
 
   checkbox.addEventListener('ifxChange', action('ifxChange'));

diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx
@@ -14,6 +14,7 @@ export class Checkbox {
   @Prop() value: boolean = false;
   @Prop() error: boolean = false;
   @Prop() name: string = '';
+  @Prop() size: string = 'm';
   @State() internalValue: boolean;
   @Prop() indeterminate: boolean = false;
   @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;
@@ -26,7 +27,7 @@ export class Checkbox {
       } else {
         this.internalValue = !this.internalValue;
       }
-      this.ifxChange.emit(this.el);
+      this.ifxChange.emit(this.internalValue);
     }
   }
 
@@ -57,6 +58,18 @@ export class Checkbox {
     this.inputElement.indeterminate = this.indeterminate;
   }
 
+  getCheckedClassName() {
+    if (this.error) {
+      if (this.internalValue) {
+        return "checked error"
+      } else {
+        return "error"
+      }
+    } else if (this.internalValue) {
+      return "checked";
+    } else return ""
+  }
+
 
   render() {
     const slot = this.el.innerHTML;
@@ -88,14 +101,15 @@ export class Checkbox {
           aria-disabled={this.disabled}
           aria-labelledby="label"
           class={`checkbox__wrapper 
-        ${this.internalValue ? 'checked' : ""} 
+          ${this.getCheckedClassName()}
+        ${this.size === "m" ? "checkbox-m" : ""}
         ${this.indeterminate ? 'indeterminate' : ""}
-        ${this.disabled ? 'disabled' : ""}
-        ${this.error ? 'error' : ""}`}>
+        ${this.disabled ? 'disabled' : ""}`}
+        >
           {this.internalValue && <ifx-icon icon="check-12"></ifx-icon>}
         </div>
         {hasSlot &&
-          <div id="label" class={`label ${this.error ? 'error' : ""} ${this.disabled ? 'disabled' : ""} `} onClick={this.handleCheckbox.bind(this)}>
+          <div id="label" class={`label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ""} `} onClick={this.handleCheckbox.bind(this)}>
             <slot />
           </div>}
       </div>

diff --git a/packages/components/src/components/checkbox/readme.md b/packages/components/src/components/checkbox/readme.md
@@ -13,6 +13,7 @@
 | `error`         | `error`         |             | `boolean` | `false` |
 | `indeterminate` | `indeterminate` |             | `boolean` | `false` |
 | `name`          | `name`          |             | `string`  | `''`    |
+| `size`          | `size`          |             | `string`  | `'m'`   |
 | `value`         | `value`         |             | `boolean` | `false` |
 
 

diff --git a/packages/components/src/components/select/multi-select/multiselect.stories.ts b/packages/components/src/components/select/multi-select/multiselect.stories.ts
@@ -68,7 +68,9 @@ export default {
     label: { control: 'text' },
     options: {
       description: 'Takes an array of objects in the following format',
-    }
+    },
+    onIfxSelect: { action: 'ifxSelect' },
+
   }
 };
 

diff --git a/packages/components/src/components/select/single-select/select.stories.ts b/packages/components/src/components/select/single-select/select.stories.ts
@@ -73,7 +73,7 @@ export default {
       control: { type: 'radio' },
     },
     searchPlaceholderValue: { control: { type: 'text' } },
-    onChange: { action: 'change' },
+    onIfxSelect: { action: 'ifxSelect' },
     options: {
       description: 'Takes an array of objects in the following format',
     }