refactor(ui-shell): use $$restProps, remove cx

src/components/UIShell/GlobalHeader/Header.svelte

@@ -5,23 +5,23 @@
   export let platformName = undefined;
   export let isSideNavOpen = undefined;
 
-  import { cx } from '../../../lib';
-  import HamburgerMenu from '../SideNav/HamburgerMenu.svelte';
+  import HamburgerMenu from "../SideNav/HamburgerMenu.svelte";
 
   let winWidth = undefined;
-  $: isSideNavOpen = winWidth >= 1056;
 
-  $: ariaLabel = company + (uiShellAriaLabel || $$props['aria-label'] || platformName);
+  $: isSideNavOpen = winWidth >= 1056;
+  $: ariaLabel =
+    company + (uiShellAriaLabel || $$props["aria-label"] || platformName);
 </script>
 
 <svelte:window bind:innerWidth={winWidth} />
 
-<header aria-label={ariaLabel} class={cx('--header')} role="banner">
+<header role="banner" aria-label={ariaLabel} class:bx--header={true}>
   {#if winWidth < 1056}
     <HamburgerMenu bind:isOpen={isSideNavOpen} />
   {/if}
-  <a class={cx('--header__name')} {href} on:click>
-    <span class={cx('--header__name--prefix')}>{company}</span>
+  <a {href} class:bx--header__name={true} {...$$restProps} on:click>
+    <span class:bx--header__name--prefix={true}>{company}</span>
     &nbsp;{platformName}
   </a>
   <slot />

src/components/UIShell/GlobalHeader/HeaderAction.svelte

@@ -4,45 +4,46 @@
   export let isOpen = undefined;
   export let text = undefined;
 
-  let elRigthPanel = undefined;
+  import { Icon } from "../../Icon";
+  import { slide } from "svelte/transition";
 
-  import { cx } from '../../../lib';
-  import Icon from '../../Icon/Icon.svelte';
-  import { slide } from 'svelte/transition';
-
-  function mouseUp({ target }) {
-    if (target && elRigthPanel) {
-      if (!elRigthPanel.contains(target)) {
-        isOpen = false;
-      }
-    }
-  }
+  let refPanel = null;
 </script>
 
 <style>
-    .action-text {
-        font-size: 16px;
-        line-height: 20px;
-        text-decoration: none;
-        color: #fff;
-        width: 100%;
-        padding: 0 1rem;
-    }
+  .action-text {
+    font-size: 16px;
+    line-height: 20px;
+    text-decoration: none;
+    color: #fff;
+    width: 100%;
+    padding: 0 1rem;
+  }
 
-    .action-text > span {
-        margin-left: 0.75rem;
-        vertical-align: top;
-    }
+  .action-text > span {
+    margin-left: 0.75rem;
+    vertical-align: top;
+  }
 </style>
 
-<svelte:window on:mouseup={mouseUp} />
+<svelte:window
+  on:mouseup={({ target }) => {
+    if (target && refPanel) {
+      if (!refPanel.contains(target)) {
+        isOpen = false;
+      }
+    }
+  }} />
 
 <div>
   <button
-    aria-label={type}
-    class={cx('--header__action', isOpen && '--header__action--active')}
-    class:action-text={text}
     type="button"
+    aria-label={type}
+    class:bx--header__action={true}
+    class:bx--header__action--active={isOpen}
+    class:action-text={text}
+    {...$$restProps}
+    on:click
     on:click={() => {
       isOpen = true;
     }}>
@@ -55,10 +56,11 @@
   </button>
   {#if isOpen}
     <div
-      bind:this={elRigthPanel}
-      class={cx('--header-panel', '--header-panel--expanded')}
+      bind:this={refPanel}
+      class:bx--header-panel={true}
+      class:bx--header-panel--expanded={true}
       transition:slide={{ duration: 200 }}>
       <slot />
     </div>
   {/if}
-</div>
+</div>

src/components/UIShell/GlobalHeader/HeaderActionLink.svelte

@@ -3,8 +3,8 @@
   export let type = undefined;
   export let icon = undefined;
   export let linkIsActive = undefined;
-  import { cx } from '../../../lib';
-  import Icon from '../../Icon/Icon.svelte';
+
+  import { Icon } from "../../Icon";
 </script>
 
 <style>
@@ -15,18 +15,13 @@
     justify-content: center;
     padding-top: 10px;
   }
-  .subject-divider {
-    color: #525252;
-    padding-bottom: 4px;
-    border-bottom: 1px solid #525252;
-    margin: 32px 1rem 8px;
-  }
 </style>
 
 <a
   aria-label={type}
-  class={cx('--header__action', linkIsActive && '--header__action--active')}
+  class:bx--header__action={true}
+  class:bx--header__action--active={linkIsActive}
   class:action-link={true}
   {href}>
   <Icon {...icon} />
-</a>
+</a>

src/components/UIShell/GlobalHeader/HeaderActionSearch.svelte

@@ -1,48 +1,40 @@
 <script>
   export let searchIsActive = undefined;
 
-  import { createEventDispatcher } from 'svelte';
-  import { cx } from '../../../lib';
-  import Icon from '../../Icon/Icon.svelte';
-  import { closeIcon, searchIcon } from '../constants';
-  import searchStore from '../searchStore';
+  import { createEventDispatcher } from "svelte";
+  import Close20 from "carbon-icons-svelte/lib/Close20";
+  import Search20 from "carbon-icons-svelte/lib/Search20";
+  import { Icon } from "../../Icon";
+  import searchStore from "../searchStore";
 
-  let searchTabIndex = '0';
-  let closeTabIndex = '-1';
+  const dispatch = createEventDispatcher();
+
+  let searchTabIndex = "0";
+  let closeTabIndex = "-1";
   let elInput = undefined;
   let elTypeSearch = undefined;
   let isSearchFocus = false;
-  const dispatch = createEventDispatcher();
 
   function dispatchInputs(event) {
     const params = {
-      action: 'search',
+      action: "search",
       textInput: event.target.value
     };
-    dispatch('inputSearch', params);
-  }
-
-  function mouseUp({ target }) {
-    if (target && elTypeSearch) {
-      if (!elTypeSearch.contains(target)) {
-        searchIsActive = false;
-        isSearchFocus = false;
-      }
-    }
+    dispatch("inputSearch", params);
   }
 
   $: if (!searchIsActive) {
     if (elInput) {
-      elInput.value = '';
+      elInput.value = "";
     }
     searchStore.clear();
   }
   $: if (searchIsActive) {
-    searchTabIndex = '-1';
-    closeTabIndex = '0';
+    searchTabIndex = "-1";
+    closeTabIndex = "0";
   } else {
-    searchTabIndex = '0';
-    closeTabIndex = '-1';
+    searchTabIndex = "0";
+    closeTabIndex = "-1";
   }
   $: if (isSearchFocus) {
     elInput.focus();
@@ -63,19 +55,23 @@
     transition: max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
       background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
   }
+
   .search-wrapper-hidden {
     max-width: 3rem;
     background-color: #161616;
   }
+
   .search-focus {
     outline: 2px solid #fff;
     outline-offset: -2px;
   }
+
   .search-wrapper-2 {
     display: flex;
     flex-grow: 1;
     border-bottom: 1px solid #393939;
   }
+
   .btn-search {
     width: 3rem;
     height: 100%;
@@ -85,10 +81,12 @@
     transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
       opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
   }
+
   .btn-search-disabled {
     border: none;
     pointer-events: none;
   }
+
   .input-search {
     font-size: 1rem;
     font-weight: 400;
@@ -104,10 +102,12 @@
     padding: 0;
     transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
   }
+
   .input-hidden {
     opacity: 0;
     pointer-events: none;
   }
+
   .btn-clear {
     width: 3rem;
     height: 100%;
@@ -118,35 +118,33 @@
     transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
       opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
   }
+
   .btn-clear:hover {
     background-color: #4c4c4c;
   }
+
   .btn-clear-hidden {
     opacity: 0;
     display: none;
   }
-  .search-list {
-    position: absolute;
-    z-index: 10000;
-    padding: 1rem 0;
-    left: 0;
-    right: 0;
-    top: 3rem;
-    background-color: #161616;
-    border: 1px solid #393939;
-    border-top: none;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
-  }
 </style>
 
-<svelte:window on:mouseup={mouseUp} />
+<svelte:window
+  on:mouseup={({ target }) => {
+    if (target && elTypeSearch) {
+      if (!elTypeSearch.contains(target)) {
+        searchIsActive = false;
+        isSearchFocus = false;
+      }
+    }
+  }} />
 
 <div
   bind:this={elTypeSearch}
+  role="search"
   class="search-wrapper"
   class:search-wrapper-hidden={!searchIsActive}
-  class:search-focus={isSearchFocus || searchIsActive}
-  role="search">
+  class:search-focus={isSearchFocus || searchIsActive}>
   <div
     id="right-panel-action-search"
     class="search-wrapper-2"
@@ -155,7 +153,7 @@
     <button
       tabindex={searchTabIndex}
       aria-label="Search"
-      class={cx('--header__action')}
+      class:bx--header__action={true}
       class:btn-search={true}
       class:btn-search-disabled={searchIsActive}
       on:click={() => {
@@ -169,7 +167,7 @@
           searchIsActive = !searchIsActive;
         }
       }}>
-      <Icon {...searchIcon} />
+      <Icon title="Search" tabindex="0" render={Search20} />
     </button>
     <input
       bind:this={elInput}
@@ -186,7 +184,7 @@
     <button
       id="right-panel-close-search"
       tabindex={closeTabIndex}
-      class={cx('--header__action')}
+      class:bx--header__action={true}
       class:btn-clear={true}
       class:btn-clear-hidden={!searchIsActive}
       type="button"
@@ -201,7 +199,7 @@
           searchIsActive = !searchIsActive;
         }
       }}>
-      <Icon {...closeIcon} />
+      <Icon title="Close" tabindex="0" render={Close20} />
     </button>
   </div>
 </div>

src/components/UIShell/GlobalHeader/HeaderNav.svelte

@@ -1,10 +1,9 @@
 <script>
   export let ariaLabel = undefined;
-  import { cx } from '../../../lib';
 </script>
 
-<nav aria-label={ariaLabel} class={cx('--header__nav')}>
-  <ul aria-label={ariaLabel} class={cx('--header__menu-bar')} role="menubar">
+<nav aria-label={ariaLabel} class:bx--header__nav={true} {...$$restProps}>
+  <ul role="menubar" aria-label={ariaLabel} class:bx--header__menu-bar={true}>
     <slot />
   </ul>
 </nav>

src/components/UIShell/GlobalHeader/HeaderNavItem.svelte

@@ -1,14 +1,15 @@
 <script>
   export let href = undefined;
   export let text = undefined;
-  import { cx } from '../../../lib';
 </script>
 
 <li>
   <a
-    class={cx('--header__menu-item')}
     role="menuitem"
     tabindex="0"
+    {href}
+    class:bx--header__menu-item={true}
+    {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
@@ -16,8 +17,7 @@
     on:keyup
     on:keydown
     on:focus
-    on:blur
-    {href}>
-    <span class={cx('--text-truncate--end')}>{text}</span>
+    on:blur>
+    <span class:bx--text-truncate--end={true}>{text}</span>
   </a>
 </li>

src/components/UIShell/GlobalHeader/HeaderNavMenu.svelte

@@ -1,39 +1,37 @@
 <script>
-  export let text = undefined;
-  export let iconDescription = 'Expand/Collapse';
   export let expanded = false;
-  export let href = '/';
+  export let href = "/";
+  export let text = undefined;
+  export let iconDescription = "Expand/Collapse";
 
-  import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
-  import { cx } from '../../../lib';
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
 
-  let listItemSubMenu = undefined;
-
-  const mouseUp = ({ target }) => {
-    if (listItemSubMenu) {
-      if (listItemSubMenu.contains(target) || target === listItemSubMenu) {
-        expanded = !expanded;
-      } else {
-        if (expanded) {
-          expanded = false;
-        }
-      }
-    }
-  };
+  let ref = null;
 </script>
 
-<svelte:window on:mouseup={mouseUp} />
+<svelte:window
+  on:mouseup={({ target }) => {
+    if (ref.contains(target) || target === ref) {
+      expanded = !expanded;
+    } else {
+      if (expanded) {
+        expanded = false;
+      }
+    }
+  }} />
 
-<li class={cx('--header__submenu')} title={iconDescription}>
+<li class:bx--header__submenu={true} title={iconDescription}>
   <a
-    bind:this={listItemSubMenu}
-    aria-haspopup="menu"
-    aria-expanded={expanded}
-    class={cx('--header__menu-item', '--header__menu-title')}
+    bind:this={ref}
     role="menuitem"
     tabindex="0"
+    aria-haspopup="menu"
+    aria-expanded={expanded}
     aria-label={text}
     {href}
+    class:bx--header__menu-item={true}
+    class:bx--header__menu-title={true}
+    {...$$restProps}
     on:keydown
     on:keydown={({ key }) => {
       if (key === 'Enter') {
@@ -48,9 +46,11 @@
     on:focus
     on:blur>
     {text}
-    <ChevronDown16 class={cx('--header__menu-arrow')} aria-label={iconDescription} />
+    <ChevronDown16
+      aria-label={iconDescription}
+      class="bx--header__menu-arrow" />
   </a>
-  <ul aria-label={text} class={cx('--header__menu')} role="menu">
+  <ul role="menu" aria-label={text} class:bx--header__menu={true}>
     <slot />
   </ul>
 </li>

src/components/UIShell/GlobalHeader/HeaderPanelDivider.svelte

@@ -5,6 +5,7 @@
     border-bottom: 1px solid #525252;
     margin: 32px 1rem 8px;
   }
+
   .subject-divider span {
     font-size: 0.75rem;
     font-weight: 400;

src/components/UIShell/GlobalHeader/HeaderPanelLink.svelte

@@ -1,11 +1,9 @@
 <script>
-  export let href;
-
-  import { cx } from '../../../lib';
+  export let href = undefined;
 </script>
 
-<li class={cx('--switcher__item')}>
-  <a class={cx('--switcher__item-link')} {href}>
+<li class:bx--switcher__item={true}>
+  <a {href} class:bx--switcher__item-link={true} {...$$restProps}>
     <slot />
   </a>
 </li>

src/components/UIShell/GlobalHeader/HeaderPanelLinks.svelte

@@ -1,7 +1,3 @@
-<script>
-  import { cx } from '../../../lib';
-</script>
-
-<ul class={cx('--switcher__item')}>
+<ul class:bx--switcher__item={true}>
   <slot />
 </ul>

src/components/UIShell/GlobalHeader/HeaderUtilities.svelte

@@ -1,7 +1,3 @@
-<script>
-  import { cx } from '../../../lib';
-</script>
-
-<div class={cx('--header__global')}>
+<div class:bx--header__global={true}>
   <slot />
 </div>