Merge pull request #115 from Heydan83/master

UIShell code been left last time

src/components/UIShell/UIShell.Story.svelte

@@ -4,8 +4,13 @@
   import UIShell from './UIShell.svelte';
   import FormTest from './FormTest.svelte';
   import SettingsAdjust20 from 'carbon-icons-svelte/lib/SettingsAdjust20';
+  import ChangeCatalog16 from 'carbon-icons-svelte/lib/ChangeCatalog16';
+  import ManageProtection16 from 'carbon-icons-svelte/lib/ManageProtection16';
+  import Recommend16 from 'carbon-icons-svelte/lib/Recommend16';
+  import Settings16 from 'carbon-icons-svelte/lib/Settings16';
   import { leftPanelActions, leftPanelTypes } from './constants';
   import searchStore from './searchStore';
+  import isNavItemSelectedStore from './UIShellSideNav/isNavItemSelectedStore';
 
   const navMenu = [
     {
@@ -78,7 +83,7 @@
           skeleton: false,
           render: SettingsAdjust20,
           title: 'Settings',
-          tabIndex: 0,
+          tabindex: '0',
           focusable: false,
           style: undefined
         }
@@ -200,48 +205,94 @@
       subMenu: [
         {
           href: '#',
-          text: 'Sub-link 1'
+          text: 'Cat 1 Sub-link 1'
         },
         {
           href: '#',
-          text: 'Sub-link 2'
+          text: 'Cat 1 Sub-link 2'
         },
         {
           href: '#',
-          text: 'Sub-link 3'
+          text: 'Cat 1 Sub-link 3'
+        }
+      ],
+      icon: [
+        {
+          class: undefined,
+          skeleton: false,
+          render: ChangeCatalog16,
+          title: 'Catalog',
+          tabindex: '0',
+          focusable: false,
+          style: undefined
         }
       ]
     },
     {
       href: '#',
       text: 'Link 2',
-      subMenu: undefined
+      subMenu: undefined,
+      icon: [
+        {
+          class: undefined,
+          skeleton: false,
+          render: ManageProtection16,
+          title: 'Protection',
+          tabindex: '0',
+          focusable: false,
+          style: undefined
+        }
+      ]
     },
     {
       href: '#',
       text: 'Link 3',
-      subMenu: undefined
+      subMenu: undefined,
+      icon: [
+        {
+          class: undefined,
+          skeleton: false,
+          render: Recommend16,
+          title: 'Recommend',
+          tabindex: '0',
+          focusable: false,
+          style: undefined
+        }
+      ]
     },
     {
       href: undefined,
-      text: 'Link 4',
+      text: 'Category 2',
       subMenu: [
         {
           href: '#',
-          text: 'Sub-link 1'
+          text: 'Cat 2 Sub-link 1'
         },
         {
           href: '#',
-          text: 'Sub-link 2'
+          text: 'Cat 2 Sub-link 2'
         },
         {
           href: '#',
-          text: 'Sub-link 3'
+          text: 'Cat 2 Sub-link 3'
+        }
+      ],
+      icon: [
+        {
+          class: undefined,
+          skeleton: false,
+          render: Settings16,
+          title: 'Settings',
+          tabindex: '0',
+          focusable: false,
+          style: undefined
         }
       ]
     }
   ];
 
+  isNavItemSelectedStore.setStoreValues(sideNavMenu);
+
   function searchInStore(event) {
     if (event.detail.action === leftPanelActions.search.actionString) {
       searchStore.search(event.detail.textInput);

src/components/UIShell/UIShell.svelte

@@ -15,11 +15,26 @@
   import UIShellSideNavItem from './UIShellSideNav/UIShellSideNavItem.svelte';
   import HamburgerMenu from './UIShellSideNav/HamburgerMenu.svelte';
 
+  let isSideNavOpen = undefined;
+  let winWidth = window.innerWidth;
+
+  window.addEventListener('resize', () => {
+    winWidth = window.innerWidth;
+
+    if (winWidth >= 1056) {
+      isSideNavOpen = true;
+    } else {
+      isSideNavOpen = false;
+    }
+  });
+
   $: ariaLabel = company + (uiShellAriaLabel || $$props['aria-label'] || platformName);
 </script>
 
 <header aria-label={ariaLabel} class={cx('--header')} role="banner">
-  <HamburgerMenu />
+  {#if winWidth < 1056}
+    <HamburgerMenu bind:isOpen={isSideNavOpen} />
+  {/if}
   <a class={cx('--header__name')} {href}>
     <span class={cx('--header__name--prefix')}>{company}</span>
     &nbsp;{platformName}
@@ -35,8 +50,10 @@
     <UIShellRightPanel {rightPanel} on:inputSearch />
   {/if}
   {#if sideNavMenu}
-    <UIShellSideNavWrapper>
+    <UIShellSideNavWrapper bind:isOpen={isSideNavOpen} bind:winWidth>
-      <UIShellSideNavItem />
+      {#each sideNavMenu as itemSideMenu}
+        <UIShellSideNavItem {...itemSideMenu} />
+      {/each}
     </UIShellSideNavWrapper>
   {/if}
 </header>

src/components/UIShell/UIShellRightPanel/ActionSearch.svelte

@@ -10,8 +10,8 @@
   import searchStore from '../searchStore';
   import ActionSearchResult from './ActionSearchResult.svelte';
 
-  let searchTabIndex = 0;
+  let searchTabIndex = '0';
-  let closeTabIndex = -1;
+  let closeTabIndex = '-1';
   let inputSearchField = undefined;
   const dispatch = createEventDispatcher();
 
@@ -46,11 +46,11 @@
   }
 
   $: if (searchIsActive) {
-    searchTabIndex = -1;
+    searchTabIndex = '-1';
-    closeTabIndex = 0;
+    closeTabIndex = '0';
   } else {
-    searchTabIndex = 0;
+    searchTabIndex = '0';
-    closeTabIndex = -1;
+    closeTabIndex = '-1';
   }
 
   $: showResults = $searchStore ? true : false;

src/components/UIShell/UIShellSideNav/HamburgerMenu.svelte

@@ -1,29 +1,32 @@
 <script>
   export let ariaLabel = undefined;
+  export let isOpen = false;
 
   import { cx } from '../../../lib';
   import Menu20 from 'carbon-icons-svelte/lib/Menu20';
   import Icon from '../../Icon/Icon.svelte';
+  import { fly } from 'svelte/transition';
   import { closeIcon } from '../constants';
 
-  let isOpen = false;
+  $: iconProps = !isOpen
-
+    ? {
-  $: iconProps = !isOpen ? {
         class: undefined,
         skeleton: false,
         render: Menu20,
         title: 'Open Menu',
-      tabIndex: 0,
+        tabindex: '0',
         focusable: false,
         style: undefined
-    } : closeIcon;
+      }
+    : closeIcon;
 </script>
 
 <button
+  transition:fly={{ x: -200, delay: 50, duration: 250 }}
   aria-label={ariaLabel}
   class={cx('--header__action', '--header__menu-trigger', '--header__menu-toggle')}
   title="Open menu"
   type="button"
-  on:click={() => isOpen = !isOpen}>
+  on:click={() => (isOpen = !isOpen)}>
   <Icon {...iconProps} />
 </button>

src/components/UIShell/UIShellSideNav/UIShellSideNavItem.svelte

@@ -1,185 +1,81 @@
-<li class="bx--side-nav__item bx--side-nav__item--icon">
+<script>
-  <button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
+  export let href = undefined;
-    <div class="bx--side-nav__icon">
+  export let text = undefined;
-      <svg
+  export let subMenu = undefined;
-        width="16"
+  export let icon = undefined;
-        height="16"
+  export let expanded = false;
-        xmlns="http://www.w3.org/2000/svg"
+
-        viewBox="0 0 32 32"
+  import { cx } from '../../../lib';
-        aria-hidden="true">
+  import { onDestroy } from 'svelte';
-        <path
+  import Icon from '../../Icon/Icon.svelte';
-          d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
+  import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
-          .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
+  import isNavItemSelectedStore from './isNavItemSelectedStore';
-          0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
+  import UIShellSideNavSubMenu from './UIShellSideNavSubMenu.svelte';
-          .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+
-      </svg>
+  let isSelected = undefined;
+
+  const unsubscribe = isNavItemSelectedStore.subscribe(values => {
+    values.forEach(item => {
+      if (item.id === text) {
+        isSelected = item.isSelected;
+      }
+    });
+  });
+
+  let iconProps = {
+    class: undefined,
+    skeleton: false,
+    render: ChevronDown16,
+    title: 'Open Menu',
+    tabindex: '0',
+    focusable: false,
+    style: undefined
+  };
+
+  onDestroy(() => {
+    unsubscribe();
+  });
+</script>
+
+{#if href}
+  <li class={cx('--side-nav__item')}>
+    <a
+      {href}
+      class={cx('--side-nav__link', isSelected && '--side-nav__link--current')}
+      aria-current={isSelected ? 'page' : ''}
+      on:click={() => isNavItemSelectedStore.setSelected(text)}>
+      <div class={cx('--side-nav__icon', '--side-nav__icon--small')}>
+        {#if icon}
+          <Icon {...icon[0]} />
+        {/if}
       </div>
-    <span class="bx--side-nav__submenu-title">Category title</span>
+      <span class={cx('--side-nav__link-text')}>{text}</span>
-    <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
+    </a>
-      <svg
+  </li>
-        focusable="false"
+{:else}
-        preserveAspectRatio="xMidYMid meet"
+  <li class={cx('--side-nav__item', '--side-nav__item--icon')}>
-        xmlns="http://www.w3.org/2000/svg"
+    <button
-        width="20"
+      aria-haspopup="true"
-        height="20"
+      aria-expanded={expanded}
-        viewBox="0 0 32 32"
+      class={cx('--side-nav__submenu')}
-        aria-hidden="true"
+      type="button"
-        style="will-change: transform;">
+      on:click={() => {
-        <path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
+        expanded = !expanded;
-      </svg>
+      }}>
+      <div class={cx('--side-nav__icon')}>
+        <Icon {...icon[0]} />
+      </div>
+      <span class={cx('--side-nav__submenu-title')}>{text}</span>
+      <div class={cx('--side-nav__icon', '--side-nav__icon--small', '--side-nav__submenu-chevron')}>
+        {#if icon}
+          <Icon {...iconProps} />
+        {/if}
       </div>
     </button>
-  <ul class="bx--side-nav__menu" role="menu">
+    <ul class={cx('--side-nav__menu')} role="menu">
-    <li class="bx--side-nav__menu-item" role="none">
+      {#each subMenu as menuItem}
-      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
+        <UIShellSideNavSubMenu {...menuItem} />
-        <span class="bx--side-nav__link-text">Link</span>
+      {/each}
-      </a>
-    </li>
-    <li class="bx--side-nav__menu-item" role="none">
-      <a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
-    <li class="bx--side-nav__menu-item" role="none">
-      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
     </ul>
   </li>
-<li class="bx--side-nav__item bx--side-nav__item--icon">
+{/if}
-  <button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
-    <div class="bx--side-nav__icon">
-      <svg
-        width="16"
-        height="16"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 32 32"
-        aria-hidden="true">
-        <path
-          d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
-          .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
-          0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
-          .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-      </svg>
-    </div>
-    <span class="bx--side-nav__submenu-title">Category title</span>
-    <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
-      <svg
-        focusable="false"
-        preserveAspectRatio="xMidYMid meet"
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 32 32"
-        aria-hidden="true"
-        style="will-change: transform;">
-        <path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
-      </svg>
-    </div>
-  </button>
-  <ul class="bx--side-nav__menu" role="menu">
-    <li class="bx--side-nav__menu-item" role="none">
-      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
-    <li class="bx--side-nav__menu-item" role="none">
-      <a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
-    <li class="bx--side-nav__menu-item" role="none">
-      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
-  </ul>
-</li>
-<li class="bx--side-nav__item bx--side-nav__item--icon">
-  <button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
-    <div class="bx--side-nav__icon">
-      <svg
-        width="16"
-        height="16"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 32 32"
-        aria-hidden="true">
-        <path
-          d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
-          .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
-          0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
-          .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-      </svg>
-    </div>
-    <span class="bx--side-nav__submenu-title">Category title</span>
-    <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
-      <svg
-        focusable="false"
-        preserveAspectRatio="xMidYMid meet"
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 32 32"
-        aria-hidden="true"
-        style="will-change: transform;">
-        <path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
-      </svg>
-    </div>
-  </button>
-  <ul class="bx--side-nav__menu" role="menu">
-    <li class="bx--side-nav__menu-item" role="none">
-      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
-    <li class="bx--side-nav__menu-item" role="none">
-      <a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
-    <li class="bx--side-nav__menu-item" role="none">
-      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
-  </ul>
-</li>
-<li class="bx--side-nav__item">
-  <a href="javascript:void(0)" class="bx--side-nav__link">
-    <div class="bx--side-nav__icon bx--side-nav__icon--small">
-      <svg
-        width="16"
-        height="16"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 32 32"
-        aria-hidden="true">
-        <path
-          d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
-          .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
-          0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
-          .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-      </svg>
-    </div>
-    <span class="bx--side-nav__link-text">Link</span>
-  </a>
-</li>
-<li class="bx--side-nav__item">
-  <a href="javascript:void(0)" class="bx--side-nav__link">
-    <div class="bx--side-nav__icon bx--side-nav__icon--small">
-      <svg
-        width="16"
-        height="16"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 32 32"
-        aria-hidden="true">
-        <path
-          d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
-          .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
-          0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
-          .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-      </svg>
-    </div>
-    <span class="bx--side-nav__link-text">Link</span>
-  </a>
-</li>

src/components/UIShell/UIShellSideNav/UIShellSideNavSubMenu.svelte

@@ -0,0 +1,33 @@
+<script>
+  export let href = undefined;
+  export let text = undefined;
+
+  import { cx } from '../../../lib';
+  import { onDestroy } from 'svelte';
+  import isNavItemSelectedStore from './isNavItemSelectedStore';
+
+  let isSelected = undefined;
+
+  const unsubscribe = isNavItemSelectedStore.subscribe(values => {
+    values.forEach(item => {
+      if (item.id === text) {
+        isSelected = item.isSelected;
+      }
+    });
+  });
+
+  onDestroy(() => {
+    unsubscribe();
+  });
+</script>
+
+<li class={cx('--side-nav__menu-item')} role="none">
+  <a
+    {href}
+    class={cx('--side-nav__link')}
+    role="menuitem"
+    aria-current={isSelected ? 'page' : ''}
+    on:click={() => isNavItemSelectedStore.setSelected(text)}>
+    <span class={cx('--side-nav__link-text')}>{text}</span>
+  </a>
+</li>

src/components/UIShell/UIShellSideNav/UIShellSideNavWrapper.svelte

@@ -1,29 +1,26 @@
 <script>
   export let ariaLabel = undefined;
+  export let isOpen = undefined;
 
   import { cx } from '../../../lib';
+  import Icon from '../../Icon/Icon.svelte';
+  import { closeIcon } from '../constants';
+
+  $: footerSpanText = isOpen ? 'Open' : 'Close';
 </script>
 
-<nav class={cx('--side-nav__navigation', '--side-nav', '--side-nav--ux')} aria-label={ariaLabel}>
+<nav
+  class={cx('--side-nav__navigation', '--side-nav', '--side-nav--ux', isOpen && '--side-nav--expanded')}
+  aria-label={ariaLabel}>
   <ul class={cx('--side-nav__items')}>
     <slot />
   </ul>
-  <footer class="bx--side-nav__footer">
+  <footer class={cx('--side-nav__footer')}>
-    <button class="bx--side-nav__toggle" type="button" title="Open">
+    <button class={cx('--side-nav__toggle')} type="button" title="Open">
-      <div class="bx--side-nav__icon">
+      <div class={cx('--side-nav__icon')}>
-        <svg
+        <Icon {...closeIcon} />
-          focusable="false"
-          preserveAspectRatio="xMidYMid meet"
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 32 32"
-          aria-hidden="true"
-          style="will-change: transform;">
-          <path d="M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z" />
-        </svg>
       </div>
-      <span class="bx--assistive-text">Open</span>
+      <span class={cx('--assistive-text')}>{footerSpanText}</span>
     </button>
   </footer>
 </nav>

src/components/UIShell/UIShellSideNav/isNavItemSelectedStore.js

@@ -0,0 +1,60 @@
+import { writable } from 'svelte/store';
+
+const isSelectedStore = writable([undefined]);
+
+const store = {
+  subscribe: isSelectedStore.subscribe,
+  setStoreValues: arrayOfObjs => {
+    let storeNewData = [];
+    arrayOfObjs.forEach(element => {
+      let newItem = {};
+      if (element.href) {
+        newItem = {
+          id: element.text,
+          isSelected: false
+        };
+
+        storeNewData.push(newItem);
+      } else {
+        element.subMenu.forEach(subelement => {
+          newItem = {
+            id: subelement.text,
+            isSelected: false
+          };
+
+          storeNewData.push(newItem);
+        });
+      }
+    });
+
+    isSelectedStore.set(storeNewData);
+  },
+  setSelected: id => {
+    isSelectedStore.update(values => {
+      const newValues = values.map(item => {
+        if (item.id === id) {
+          item.isSelected = true;
+          return item;
+        } else {
+          item.isSelected = false;
+          return item;
+        }
+      });
+
+      return newValues;
+    });
+  },
+  deselectAll: () => {
+    isSelectedStore.update(values => {
+      values.forEach(item => {
+        item.isSelected = false;
+        return item;
+      });
+    });
+  },
+  clear: () => {
+    isSelectedStore.set(undefined);
+  }
+};
+
+export default store;

src/components/UIShell/constants.js

@@ -13,7 +13,7 @@ export const leftPanelActions = {
       skeleton: false,
       render: Search20,
       title: 'Search',
-      tabIndex: 0,
+      tabindex: '0',
       focusable: false,
       style: undefined
     }
@@ -25,7 +25,7 @@ export const leftPanelActions = {
       skeleton: false,
       render: Help20,
       title: 'Help',
-      tabIndex: 0,
+      tabindex: '0',
       focusable: false,
       style: undefined
     }
@@ -37,7 +37,7 @@ export const leftPanelActions = {
       skeleton: false,
       render: Notification20,
       title: 'Notifications',
-      tabIndex: 0,
+      tabindex: '0',
       focusable: false,
       style: undefined
     }
@@ -49,7 +49,7 @@ export const leftPanelActions = {
       skeleton: false,
       render: UserAvatar20,
       title: 'Account',
-      tabIndex: 0,
+      tabindex: '0',
       focusable: false,
       style: undefined
     }
@@ -61,7 +61,7 @@ export const leftPanelActions = {
       skeleton: false,
       render: AppSwitcher20,
       title: 'App Switcher',
-      tabIndex: 0,
+      tabindex: '0',
       focusable: false,
       style: undefined
     }
@@ -80,7 +80,7 @@ export const closeIcon = {
   skeleton: false,
   render: Close20,
   title: 'Close',
-  tabIndex: 0,
+  tabindex: '0',
   focusable: false,
   style: undefined
 };