From 1e5333dd64d24ce4b6fa39c3521a56f3ba79efc8 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 19 Jul 2020 06:33:06 -0700
Subject: [PATCH] refactor(ui-shell): use $$restProps, remove cx

---
 src/components/UIShell/Content.svelte         |  2 +-
 src/components/UIShell/FormTest.svelte        | 16 ----
 .../UIShell/GlobalHeader/Header.svelte        | 14 +--
 .../UIShell/GlobalHeader/HeaderAction.svelte  | 64 +++++++------
 .../GlobalHeader/HeaderActionLink.svelte      | 15 +--
 .../GlobalHeader/HeaderActionSearch.svelte    | 84 ++++++++--------
 .../UIShell/GlobalHeader/HeaderNav.svelte     |  5 +-
 .../UIShell/GlobalHeader/HeaderNavItem.svelte | 10 +-
 .../UIShell/GlobalHeader/HeaderNavMenu.svelte | 52 +++++-----
 .../GlobalHeader/HeaderPanelDivider.svelte    |  1 +
 .../GlobalHeader/HeaderPanelLink.svelte       |  8 +-
 .../GlobalHeader/HeaderPanelLinks.svelte      |  6 +-
 .../GlobalHeader/HeaderUtilities.svelte       |  6 +-
 .../UIShell/SideNav/HamburgerMenu.svelte      | 37 +++----
 src/components/UIShell/SideNav/SideNav.svelte | 12 +--
 .../UIShell/SideNav/SideNavItems.svelte       |  6 +-
 .../UIShell/SideNav/SideNavLink.svelte        | 17 ++--
 .../UIShell/SideNav/SideNavMenu.svelte        | 38 ++++----
 .../UIShell/SideNav/SideNavMenuItem.svelte    | 13 ++-
 src/components/UIShell/UIShell.stories.js     | 66 ++++++-------
 src/components/UIShell/constants.js           | 96 -------------------
 src/components/UIShell/helpers.js             | 21 ----
 src/components/UIShell/index.js               | 36 +++----
 src/lib/__tests__/cx.spec.js                  | 10 --
 src/lib/cx.js                                 | 19 ----
 src/lib/index.js                              |  1 -
 26 files changed, 230 insertions(+), 425 deletions(-)
 delete mode 100644 src/components/UIShell/FormTest.svelte
 delete mode 100644 src/components/UIShell/constants.js
 delete mode 100644 src/components/UIShell/helpers.js
 delete mode 100644 src/lib/__tests__/cx.spec.js
 delete mode 100644 src/lib/cx.js
 delete mode 100644 src/lib/index.js

diff --git a/src/components/UIShell/Content.svelte b/src/components/UIShell/Content.svelte
index 24172e31..ef98f184 100644
--- a/src/components/UIShell/Content.svelte
+++ b/src/components/UIShell/Content.svelte
@@ -2,6 +2,6 @@
   export let id = "main-content";
 </script>
 
-<main {...$$props} {id} class:bx--content={true}>
+<main {id} class:bx--content={true} {...$$restProps}>
   <slot />
 </main>
diff --git a/src/components/UIShell/FormTest.svelte b/src/components/UIShell/FormTest.svelte
deleted file mode 100644
index b5b2e5c8..00000000
--- a/src/components/UIShell/FormTest.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  import TextInput from "../TextInput/TextInput.svelte";
-  import Toggle from "../Toggle/Toggle.svelte";
-  import { Button } from "../Button/Button.svelte";
-</script>
-
-<label>Test Field</label>
-<br />
-<br />
-<TextInput />
-<br />
-<br />
-<Toggle labelText="Test toggler" />
-<br />
-<br />
-<Button>Test Button</Button>
diff --git a/src/components/UIShell/GlobalHeader/Header.svelte b/src/components/UIShell/GlobalHeader/Header.svelte
index 27773498..06ac6789 100644
--- a/src/components/UIShell/GlobalHeader/Header.svelte
+++ b/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 />
diff --git a/src/components/UIShell/GlobalHeader/HeaderAction.svelte b/src/components/UIShell/GlobalHeader/HeaderAction.svelte
index 5aa42515..9e6a6753 100644
--- a/src/components/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/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>
\ No newline at end of file
+</div>
diff --git a/src/components/UIShell/GlobalHeader/HeaderActionLink.svelte b/src/components/UIShell/GlobalHeader/HeaderActionLink.svelte
index 40c4a473..b03c4f3e 100644
--- a/src/components/UIShell/GlobalHeader/HeaderActionLink.svelte
+++ b/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>
\ No newline at end of file
+</a>
diff --git a/src/components/UIShell/GlobalHeader/HeaderActionSearch.svelte b/src/components/UIShell/GlobalHeader/HeaderActionSearch.svelte
index 4bea4a2f..a478817c 100644
--- a/src/components/UIShell/GlobalHeader/HeaderActionSearch.svelte
+++ b/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>
diff --git a/src/components/UIShell/GlobalHeader/HeaderNav.svelte b/src/components/UIShell/GlobalHeader/HeaderNav.svelte
index 1080216b..8da6ba37 100644
--- a/src/components/UIShell/GlobalHeader/HeaderNav.svelte
+++ b/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>
diff --git a/src/components/UIShell/GlobalHeader/HeaderNavItem.svelte b/src/components/UIShell/GlobalHeader/HeaderNavItem.svelte
index 611fbf0d..bcc31448 100644
--- a/src/components/UIShell/GlobalHeader/HeaderNavItem.svelte
+++ b/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>
diff --git a/src/components/UIShell/GlobalHeader/HeaderNavMenu.svelte b/src/components/UIShell/GlobalHeader/HeaderNavMenu.svelte
index c60221b9..52f51617 100644
--- a/src/components/UIShell/GlobalHeader/HeaderNavMenu.svelte
+++ b/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>
diff --git a/src/components/UIShell/GlobalHeader/HeaderPanelDivider.svelte b/src/components/UIShell/GlobalHeader/HeaderPanelDivider.svelte
index 52a550c1..90aa3cc6 100644
--- a/src/components/UIShell/GlobalHeader/HeaderPanelDivider.svelte
+++ b/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;
diff --git a/src/components/UIShell/GlobalHeader/HeaderPanelLink.svelte b/src/components/UIShell/GlobalHeader/HeaderPanelLink.svelte
index 5a13846b..428116a8 100644
--- a/src/components/UIShell/GlobalHeader/HeaderPanelLink.svelte
+++ b/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>
diff --git a/src/components/UIShell/GlobalHeader/HeaderPanelLinks.svelte b/src/components/UIShell/GlobalHeader/HeaderPanelLinks.svelte
index 1da043a0..1f10ab39 100644
--- a/src/components/UIShell/GlobalHeader/HeaderPanelLinks.svelte
+++ b/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>
diff --git a/src/components/UIShell/GlobalHeader/HeaderUtilities.svelte b/src/components/UIShell/GlobalHeader/HeaderUtilities.svelte
index 9dd6eaf2..460c8c70 100644
--- a/src/components/UIShell/GlobalHeader/HeaderUtilities.svelte
+++ b/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>
diff --git a/src/components/UIShell/SideNav/HamburgerMenu.svelte b/src/components/UIShell/SideNav/HamburgerMenu.svelte
index 678ba350..04ebd768 100644
--- a/src/components/UIShell/SideNav/HamburgerMenu.svelte
+++ b/src/components/UIShell/SideNav/HamburgerMenu.svelte
@@ -2,31 +2,24 @@
   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';
-
-  $: iconProps = !isOpen
-    ? {
-        class: undefined,
-        skeleton: false,
-        render: Menu20,
-        title: 'Open Menu',
-        tabindex: '0',
-        focusable: false,
-        style: undefined
-      }
-    : closeIcon;
+  import { fly } from "svelte/transition";
+  import Close20 from "carbon-icons-svelte/lib/Close20";
+  import Menu20 from "carbon-icons-svelte/lib/Menu20";
+  import { Icon } from "../../Icon";
 </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"
+  title="Open menu"
+  aria-label={ariaLabel}
+  class:bx--header__action={true}
+  class:bx--header__menu-trigger={true}
+  class:bx--header__menu-toggle={true}
+  {...$$restProps}
+  transition:fly={{ x: -200, delay: 50, duration: 250 }}
+  on:click
   on:click={() => (isOpen = !isOpen)}>
-  <Icon {...iconProps} />
+  <Icon
+    title={isOpen ? 'Close' : 'Open Menu'}
+    render={isOpen ? Close20 : Menu20} />
 </button>
diff --git a/src/components/UIShell/SideNav/SideNav.svelte b/src/components/UIShell/SideNav/SideNav.svelte
index 045b4a94..e664d00e 100644
--- a/src/components/UIShell/SideNav/SideNav.svelte
+++ b/src/components/UIShell/SideNav/SideNav.svelte
@@ -1,14 +1,14 @@
 <script>
   export let ariaLabel = undefined;
   export let isOpen = undefined;
-
-  import { cx } from '../../../lib';
-
-  $: footerSpanText = isOpen ? 'Open' : 'Close';
 </script>
 
 <nav
-  class={cx('--side-nav__navigation', '--side-nav', '--side-nav--ux', isOpen && '--side-nav--expanded')}
-  aria-label={ariaLabel}>
+  aria-label={ariaLabel}
+  class:bx--side-nav__navigation={true}
+  class:bx--side-nav={true}
+  class:bx--side-nav--ux={true}
+  class:bx--side-nav--expanded={isOpen}
+  {...$$restProps}>
   <slot />
 </nav>
diff --git a/src/components/UIShell/SideNav/SideNavItems.svelte b/src/components/UIShell/SideNav/SideNavItems.svelte
index 43e3d6b4..ca3804ff 100644
--- a/src/components/UIShell/SideNav/SideNavItems.svelte
+++ b/src/components/UIShell/SideNav/SideNavItems.svelte
@@ -1,7 +1,3 @@
-<script>
-  import { cx } from '../../../lib';
-</script>
-
-<ul class={cx('--side-nav__items')}>
+<ul class:bx--side-nav__items={true}>
   <slot />
 </ul>
diff --git a/src/components/UIShell/SideNav/SideNavLink.svelte b/src/components/UIShell/SideNav/SideNavLink.svelte
index be04ac09..09a3ecef 100644
--- a/src/components/UIShell/SideNav/SideNavLink.svelte
+++ b/src/components/UIShell/SideNav/SideNavLink.svelte
@@ -1,24 +1,25 @@
 <script>
+  export let isSelected = false;
   export let href = undefined;
   export let text = undefined;
   export let icon = undefined;
-  export let isSelected = false;
 
-  import { cx } from '../../../lib';
-  import Icon from '../../Icon/Icon.svelte';
+  import { Icon } from "../../Icon";
 </script>
 
-<li class={cx('--side-nav__item')}>
+<li class:bx--side-nav__item={true}>
   <a
-    {href}
-    class={cx('--side-nav__link', isSelected && '--side-nav__link--current')}
     aria-current={isSelected ? 'page' : ''}
+    {href}
+    class:bx--side-nav__link={true}
+    class:bx--side-nav__link--current={isSelected}
+    {...$$restProps}
     on:click>
-    <div class={cx('--side-nav__icon', '--side-nav__icon--small')}>
+    <div class:bx--side-nav__icon={true} class:bx--side-nav__icon--small={true}>
       {#if icon}
         <Icon {...icon} />
       {/if}
     </div>
-    <span class={cx('--side-nav__link-text')}>{text}</span>
+    <span class:bx--side-nav__link-text={true}>{text}</span>
   </a>
 </li>
diff --git a/src/components/UIShell/SideNav/SideNavMenu.svelte b/src/components/UIShell/SideNav/SideNavMenu.svelte
index cad469ab..e50281eb 100644
--- a/src/components/UIShell/SideNav/SideNavMenu.svelte
+++ b/src/components/UIShell/SideNav/SideNavMenu.svelte
@@ -1,43 +1,37 @@
 <script>
+  export let expanded = false;
   export let text = undefined;
   export let icon = undefined;
-  export let expanded = false;
 
-  import { cx } from '../../../lib';
-  import Icon from '../../Icon/Icon.svelte';
-  import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
-
-  let iconProps = {
-    class: undefined,
-    skeleton: false,
-    render: ChevronDown16,
-    title: 'Open Menu',
-    tabindex: '0',
-    focusable: false,
-    style: undefined
-  };
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+  import { Icon } from "../../Icon";
 </script>
 
-<li class={cx('--side-nav__item', '--side-nav__item--icon')}>
+<li class:bx--side-nav__item={true} class:bx--side-nav__item--icon={true}>
   <button
+    type="button"
     aria-haspopup="true"
     aria-expanded={expanded}
-    class={cx('--side-nav__submenu')}
-    type="button"
+    class:bx--side-nav__submenu={true}
+    {...$$restProps}
+    on:click
     on:click={() => {
       expanded = !expanded;
     }}>
-    <div class={cx('--side-nav__icon')}>
+    <div class:bx--side-nav__icon={true}>
       {#if icon}
         <Icon {...icon} />
       {/if}
     </div>
-    <span class={cx('--side-nav__submenu-title')}>{text}</span>
-    <div class={cx('--side-nav__icon', '--side-nav__icon--small', '--side-nav__submenu-chevron')}>
-      <Icon {...iconProps} />
+    <span class:bx--side-nav__submenu-title={true}>{text}</span>
+    <div
+      class:bx--side-nav__icon={true}
+      class:bx--side-nav__icon--small={true}
+      class:bx--side-nav__submenu-chevron={true}>
+      <Icon title="Open Menu" tabindex="0" render={ChevronDown16} />
     </div>
   </button>
-  <ul class={cx('--side-nav__menu')} role="menu">
+  <ul role="menu" class:bx--side-nav__menu={true}>
     <slot />
   </ul>
 </li>
diff --git a/src/components/UIShell/SideNav/SideNavMenuItem.svelte b/src/components/UIShell/SideNav/SideNavMenuItem.svelte
index f83f5aca..ff8023e4 100644
--- a/src/components/UIShell/SideNav/SideNavMenuItem.svelte
+++ b/src/components/UIShell/SideNav/SideNavMenuItem.svelte
@@ -1,18 +1,17 @@
 <script>
+  export let isSelected = undefined;
   export let href = undefined;
   export let text = undefined;
-  export let isSelected = undefined;
-
-  import { cx } from '../../../lib';
 </script>
 
-<li class={cx('--side-nav__menu-item')} role="none">
+<li role="none" class:bx--side-nav__menu-item={true}>
   <a
-    {href}
-    class={cx('--side-nav__link')}
     role="menuitem"
     aria-current={isSelected ? 'page' : ''}
+    {href}
+    class:bx--side-nav__link={true}
+    {...$$restProps}
     on:click>
-    <span class={cx('--side-nav__link-text')}>{text}</span>
+    <span class:bx--side-nav__link-text={true}>{text}</span>
   </a>
 </li>
diff --git a/src/components/UIShell/UIShell.stories.js b/src/components/UIShell/UIShell.stories.js
index 5179d95a..d0ccb366 100644
--- a/src/components/UIShell/UIShell.stories.js
+++ b/src/components/UIShell/UIShell.stories.js
@@ -1,64 +1,64 @@
-import { withKnobs, text } from '@storybook/addon-knobs';
-import Component from './UIShell.Story.svelte';
+import { withKnobs, text } from "@storybook/addon-knobs";
+import Component from "./UIShell.Story.svelte";
 
-export default { title: 'UIShell', decorators: [withKnobs] };
+export default { title: "UIShell", decorators: [withKnobs] };
 
 export const Header = () => ({
   Component,
   props: {
-    story: 'header',
-    href: text('The link href (href)', '#'),
-    company: text('Company name', 'IBM'),
-    platformName: text('Platform name', 'Platform Name')
-  }
+    story: "header",
+    href: text("The link href (href)", "#"),
+    company: text("Company name", "IBM"),
+    platformName: text("Platform name", "Platform Name"),
+  },
 });
 
 export const Sidenav = () => ({
   Component,
   props: {
-    story: 'sidenav',
-    href: text('The link href (href)', '#'),
-    company: text('Company name', 'IBM'),
-    platformName: text('Platform name', 'Platform Name')
-  }
+    story: "sidenav",
+    href: text("The link href (href)", "#"),
+    company: text("Company name", "IBM"),
+    platformName: text("Platform name", "Platform Name"),
+  },
 });
 
 export const HeaderWithNav = () => ({
   Component,
   props: {
-    story: 'header-with-nav',
-    href: text('The link href (href)', '#'),
-    company: text('Company name', 'IBM'),
-    platformName: text('Platform name', 'Platform Name')
-  }
+    story: "header-with-nav",
+    href: text("The link href (href)", "#"),
+    company: text("Company name", "IBM"),
+    platformName: text("Platform name", "Platform Name"),
+  },
 });
 
 export const HeaderWithUtilities = () => ({
   Component,
   props: {
-    story: 'header-with-utilities',
-    href: text('The link href (href)', '#'),
-    company: text('Company name', 'IBM'),
-    platformName: text('Platform name', 'Platform Name')
-  }
+    story: "header-with-utilities",
+    href: text("The link href (href)", "#"),
+    company: text("Company name", "IBM"),
+    platformName: text("Platform name", "Platform Name"),
+  },
 });
 
 export const HeaderWithSwitcher = () => ({
   Component,
   props: {
-    story: 'header-with-switcher',
-    href: text('The link href (href)', '#'),
-    company: text('Company name', 'IBM'),
-    platformName: text('Platform name', 'Platform Name')
-  }
+    story: "header-with-switcher",
+    href: text("The link href (href)", "#"),
+    company: text("Company name", "IBM"),
+    platformName: text("Platform name", "Platform Name"),
+  },
 });
 
 export const HeaderAndSidenav = () => ({
   Component,
   props: {
-    story: 'header-and-sidenav',
-    href: text('The link href (href)', '#'),
-    company: text('Company name', 'IBM'),
-    platformName: text('Platform name', 'Platform Name')
-  }
+    story: "header-and-sidenav",
+    href: text("The link href (href)", "#"),
+    company: text("Company name", "IBM"),
+    platformName: text("Platform name", "Platform Name"),
+  },
 });
diff --git a/src/components/UIShell/constants.js b/src/components/UIShell/constants.js
deleted file mode 100644
index 377ea7ee..00000000
--- a/src/components/UIShell/constants.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import Search20 from 'carbon-icons-svelte/lib/Search20';
-import Help20 from 'carbon-icons-svelte/lib/Help20';
-import Notification20 from 'carbon-icons-svelte/lib/Notification20';
-import UserAvatar20 from 'carbon-icons-svelte/lib/UserAvatar20';
-import AppSwitcher20 from 'carbon-icons-svelte/lib/AppSwitcher20';
-import Close20 from 'carbon-icons-svelte/lib/Close20';
-
-export const leftPanelActions = {
-  search: {
-    actionString: 'Search',
-    iconProps: {
-      class: undefined,
-      skeleton: false,
-      render: Search20,
-      title: 'Search',
-      tabindex: '0',
-      focusable: false,
-      style: undefined
-    }
-  },
-  help: {
-    actionString: 'Help',
-    iconProps: {
-      class: undefined,
-      skeleton: false,
-      render: Help20,
-      title: 'Help',
-      tabindex: '0',
-      focusable: false,
-      style: undefined
-    }
-  },
-  notifications: {
-    actionString: 'Notifications',
-    iconProps: {
-      class: undefined,
-      skeleton: false,
-      render: Notification20,
-      title: 'Notifications',
-      tabindex: '0',
-      focusable: false,
-      style: undefined
-    }
-  },
-  account: {
-    actionString: 'Account',
-    iconProps: {
-      class: undefined,
-      skeleton: false,
-      render: UserAvatar20,
-      title: 'Account',
-      tabindex: '0',
-      focusable: false,
-      style: undefined
-    }
-  },
-  switcher: {
-    actionString: 'Switcher',
-    iconProps: {
-      class: undefined,
-      skeleton: false,
-      render: AppSwitcher20,
-      title: 'App Switcher',
-      tabindex: '0',
-      focusable: false,
-      style: undefined
-    }
-  }
-};
-
-export const leftPanelTypes = {
-  search: 'Search',
-  component: 'Component',
-  link: 'Link',
-  links: 'Links'
-};
-
-export const closeIcon = {
-  class: undefined,
-  skeleton: false,
-  render: Close20,
-  title: 'Close',
-  tabindex: '0',
-  focusable: false,
-  style: undefined
-};
-
-export const searchIcon = {
-  class: undefined,
-  skeleton: false,
-  render: Search20,
-  title: 'Search',
-  tabindex: '0',
-  focusable: false,
-  style: undefined
-};
diff --git a/src/components/UIShell/helpers.js b/src/components/UIShell/helpers.js
deleted file mode 100644
index 10e9f6e5..00000000
--- a/src/components/UIShell/helpers.js
+++ /dev/null
@@ -1,21 +0,0 @@
-export function isChildOf(target, parentId) {
-  if (target.id) {
-    if (target.id == parentId) {
-      return true;
-    }
-  }
-
-  if (target.parentNode) {
-    if (target.parentNode.id) {
-      if (target.parentNode.id == parentId) {
-        return true;
-      } else {
-        return isChildOf(target.parentNode, parentId);
-      }
-    } else {
-      return isChildOf(target.parentNode, parentId);
-    }
-  } else {
-    return false;
-  }
-}
diff --git a/src/components/UIShell/index.js b/src/components/UIShell/index.js
index f8347776..43757853 100644
--- a/src/components/UIShell/index.js
+++ b/src/components/UIShell/index.js
@@ -1,18 +1,18 @@
-export { default as Header } from './GlobalHeader/Header.svelte';
-export { default as HeaderAction } from './GlobalHeader/HeaderAction.svelte';
-export { default as HeaderActionLink } from './GlobalHeader/HeaderActionLink.svelte';
-export { default as HeaderActionSearch } from './GlobalHeader/HeaderActionSearch.svelte';
-export { default as HeaderNav } from './GlobalHeader/HeaderNav.svelte';
-export { default as HeaderNavItem } from './GlobalHeader/HeaderNavItem.svelte';
-export { default as HeaderNavMenu } from './GlobalHeader/HeaderNavMenu.svelte';
-export { default as HeaderPanelDivider } from './GlobalHeader/HeaderPanelDivider.svelte';
-export { default as HeaderPanelLink } from './GlobalHeader/HeaderPanelLink.svelte';
-export { default as HeaderPanelLinks } from './GlobalHeader/HeaderPanelLinks.svelte';
-export { default as HeaderUtilities } from './GlobalHeader/HeaderUtilities.svelte';
-export { default as SideNav } from './SideNav/SideNav.svelte';
-export { default as SideNavItems } from './SideNav/SideNavItems.svelte';
-export { default as SideNavLink } from './SideNav/SideNavLink.svelte';
-export { default as SideNavMenu } from './SideNav/SideNavMenu.svelte';
-export { default as SideNavMenuItem } from './SideNav/SideNavMenuItem.svelte';
-export { default as Content } from './Content.svelte';
-export { default as SkipToContent } from './SkipToContent.svelte';
\ No newline at end of file
+export { default as Header } from "./GlobalHeader/Header.svelte";
+export { default as HeaderAction } from "./GlobalHeader/HeaderAction.svelte";
+export { default as HeaderActionLink } from "./GlobalHeader/HeaderActionLink.svelte";
+export { default as HeaderActionSearch } from "./GlobalHeader/HeaderActionSearch.svelte";
+export { default as HeaderNav } from "./GlobalHeader/HeaderNav.svelte";
+export { default as HeaderNavItem } from "./GlobalHeader/HeaderNavItem.svelte";
+export { default as HeaderNavMenu } from "./GlobalHeader/HeaderNavMenu.svelte";
+export { default as HeaderPanelDivider } from "./GlobalHeader/HeaderPanelDivider.svelte";
+export { default as HeaderPanelLink } from "./GlobalHeader/HeaderPanelLink.svelte";
+export { default as HeaderPanelLinks } from "./GlobalHeader/HeaderPanelLinks.svelte";
+export { default as HeaderUtilities } from "./GlobalHeader/HeaderUtilities.svelte";
+export { default as SideNav } from "./SideNav/SideNav.svelte";
+export { default as SideNavItems } from "./SideNav/SideNavItems.svelte";
+export { default as SideNavLink } from "./SideNav/SideNavLink.svelte";
+export { default as SideNavMenu } from "./SideNav/SideNavMenu.svelte";
+export { default as SideNavMenuItem } from "./SideNav/SideNavMenuItem.svelte";
+export { default as Content } from "./Content.svelte";
+export { default as SkipToContent } from "./SkipToContent.svelte";
diff --git a/src/lib/__tests__/cx.spec.js b/src/lib/__tests__/cx.spec.js
deleted file mode 100644
index 1127b04b..00000000
--- a/src/lib/__tests__/cx.spec.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { cx } from '../cx';
-
-test('cx', () => {
-  expect(cx(null)).toEqual('');
-  expect(cx(undefined)).toEqual('');
-  expect(cx('--')).toEqual('bx--');
-  expect(cx('--', null)).toEqual('bx--');
-  expect(cx(0, undefined, '--', null, 1)).toEqual('bx--');
-  expect(cx(1 && '1', 0 && '0')).toEqual('1');
-});
diff --git a/src/lib/cx.js b/src/lib/cx.js
deleted file mode 100644
index 6a07487f..00000000
--- a/src/lib/cx.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const prefix = 'bx';
-
-function cx(...items) {
-  const classes = [];
-
-  items.forEach(item => {
-    if (typeof item === 'string') {
-      if (item.slice(0, 2) === '--') {
-        classes.push(`${prefix}${item}`);
-      } else {
-        classes.push(item);
-      }
-    }
-  });
-
-  return classes.join(' ');
-}
-
-export { cx };
diff --git a/src/lib/index.js b/src/lib/index.js
deleted file mode 100644
index de6b6ff9..00000000
--- a/src/lib/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { cx } from "./cx";