feat(storybook): wip

deven-org · Jul 2, 2024 · 7061cd2 · 7061cd2
1 parent 66d30ae
commit 7061cd2
Showing 1 changed file with 31 additions and 4 deletions.
diff --git a/packages/ui-library/src/components/select/index.ts b/packages/ui-library/src/components/select/index.ts
@@ -102,14 +102,21 @@ export class BlrSelect extends LitElementCustom {
     );
   }
 
+  protected openSelectDropdown() {
+    if (!this.disabled) {
+      this._selectNode.focus();
+      this._selectNode.click();
+    }
+  }
+
   protected renderIcon() {
     const classes = classMap({
       'icon-direction-indicator': true,
       [this.sizeVariant]: this.sizeVariant,
       [this.theme]: this.theme,
     });
 
-    if (this.sizeVariant) {
+    if (this.sizeVariant && this.icon) {
       const iconSizeVariant = getComponentConfigToken([
         'sem',
         'forms',
@@ -119,7 +126,7 @@ export class BlrSelect extends LitElementCustom {
         this.sizeVariant,
       ]).toLowerCase() as SizesType;
 
-      const modifiedIcon = this.icon ? this.icon : 'blrChevronDown';
+      const modifiedIcon = this.icon;
       return BlrIconRenderFunction(
         {
           icon: calculateIconName(modifiedIcon, iconSizeVariant),
@@ -133,6 +140,14 @@ export class BlrSelect extends LitElementCustom {
         }
       );
     }
+    return nothing;
+  }
+
+  protected handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.openSelectDropdown();
+    }
   }
 
   protected renderCaptionContent() {
@@ -175,7 +190,13 @@ export class BlrSelect extends LitElementCustom {
         <div class="blr-select ${this.sizeVariant} ${this.theme}">
           ${this.hasLabel
             ? html`
-                <div class="label-wrapper">
+                <div
+                  class="label-wrapper"
+                  @click=${this.openSelectDropdown}
+                  @keydown=${this.handleKeyDown}
+                  tabindex="0"
+                  role="button"
+                >
                   ${BlrFormLabelRenderFunction({
                     label: this.label,
                     labelAppendix: this.labelAppendix,
@@ -187,7 +208,13 @@ export class BlrSelect extends LitElementCustom {
                 </div>
               `
             : nothing}
-          <div class="blr-select-wrapper ${inputClasses}">
+          <div
+            class="blr-select-wrapper ${inputClasses}"
+            @click=${this.openSelectDropdown}
+            @keydown=${this.handleKeyDown}
+            tabindex="0"
+            role="button"
+          >
             <div class="blr-select-inner-container ${this.theme}">
               <select
                 aria-label=${this.ariaLabel || nothing}