Merge pull request #70 from xsolla/PAYMENTS-18588

feat(PAYMENTS-18588): rework select and checkbox component

src/features/headless-checkout/web-components/checkbox/checkbox.component.scss

@@ -1,5 +1,68 @@
 @use 'src/styles/mixins/typo.mixin' as typo;
 
 psdk-checkbox {
+  $checkbox-size: 18px;
+  $checkbox-img-size: 14px;
+  $checkbox-offset: 1px;
   @include typo.psdk-typo;
+
+  .checkbox {
+    position: relative;
+    display: flex;
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      margin-left: 8px;
+    }
+
+    &-dummy {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: $checkbox-size;
+      height: $checkbox-size;
+      border-color: var(--psdk-checkbox-unchecked-bg);
+      border-radius: 2px;
+      background: var(--psdk-checkbox-unchecked-bg);
+
+      img {
+        position: absolute;
+        display: none;
+        width: $checkbox-img-size;
+        height: $checkbox-img-size;
+        inset: $checkbox-offset + 1 $checkbox-offset $checkbox-offset - 1
+          $checkbox-offset + 1;
+      }
+    }
+  }
+
+  input {
+    z-index: 1;
+    display: inline-block;
+    width: $checkbox-size;
+    height: $checkbox-size;
+    margin: 0;
+    border: 1px solid transparent;
+    background: transparent;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  input,
+  input:checked {
+    border: 1px solid transparent;
+    background: transparent;
+    appearance: none;
+  }
+
+  input:checked + .checkbox-dummy {
+    border-color: var(--psdk-checkbox-checked-bg);
+    background: var(--psdk-checkbox-checked-bg);
+
+    img {
+      display: block;
+    }
+  }
 }

src/features/headless-checkout/web-components/checkbox/checkbox.component.spec.ts

@@ -31,7 +31,7 @@ describe('CheckboxComponent', () => {
 
   window.customElements.define(
     WebComponentTagName.CheckboxComponent,
-    CheckboxComponent
+    CheckboxComponent,
   );
 
   beforeEach(() => {
@@ -68,7 +68,7 @@ describe('CheckboxComponent', () => {
 
     createComponent();
     expect(
-      document.querySelector(WebComponentTagName.CheckboxComponent)
+      document.querySelector(WebComponentTagName.CheckboxComponent),
     ).toBeDefined();
   });
 
@@ -90,7 +90,7 @@ describe('CheckboxComponent', () => {
 
     const spy = spyOn(
       element as unknown as { notifyOnValueChanges(): void },
-      'notifyOnValueChanges'
+      'notifyOnValueChanges',
     );
 
     setTimeout(() => {

src/features/headless-checkout/web-components/checkbox/checkbox.template.ts

@@ -1,22 +1,29 @@
 import { XpsBoolean } from '../../../../core/xps-boolean.enum';
 import { CheckboxComponentConfig } from './checkbox-component-config.interface';
+import check from '../../../../assets/icons/check.svg';
 
 export const getCheckboxComponentTemplate = (
-  config: CheckboxComponentConfig
+  config: CheckboxComponentConfig,
 ): string => {
   const isChecked = config.initValue === XpsBoolean.true;
   const placeholder = config.placeholder;
+  const error = config.error;
 
   return `
-    <label for='${config.name}' class='wrapper'>
+    <div class='checkbox'>
        <input
-        class='checkbox'
         type='checkbox'
         id='${config.name}'
         name='${config.name}'
         ${isChecked ? 'checked' : ''}
         />
-        ${placeholder ? `<span class='label'>${placeholder}</span>` : ''}
-  </label>
+        <div class='checkbox-dummy'>
+          ${isChecked ? `<img src='${check}' alt='checkbox'>` : ''}
+        </div>
+        <div class='wrapper'>
+          ${placeholder ? `<span class='label'>${placeholder}</span>` : ''}
+          ${error ? `<span class='field-error'>${error}</span>` : ''}
+        </div>
+  </div>
  `;
 };

src/features/headless-checkout/web-components/select/select-component.config.interface.ts

@@ -5,4 +5,5 @@ export interface SelectComponentConfig extends ControlComponentConfig {
   readonly?: boolean;
   options?: Array<{ label: string; value: string }>;
   tooltip?: TextConfigTooltip;
+  initValue?: string;
 }

src/features/headless-checkout/web-components/select/select-keys.enum.ts

@@ -0,0 +1,6 @@
+export enum SelectKeys {
+  enter = 'enter',
+  space = 'space',
+  arrowUp = 'arrowup',
+  arrowDown = 'arrowdown',
+}

src/features/headless-checkout/web-components/select/select.component.scss

@@ -73,9 +73,13 @@ psdk-select {
   .option {
     display: flex;
 
-    :hover {
+    :hover, &.active {
       background: var(--psdk-select-hover-bg);
-      color: var(--psdk-select-hover-color);
+    }
+
+    &.focused {
+      background: var(--psdk-select-focus-bg);
+      color: var(--psdk-select-focus-color);
     }
 
     .option-content {