chore: lift components folder

src/UIShell/Content.svelte

@@ -0,0 +1,7 @@
+<script>
+  export let id = "main-content";
+</script>
+
+<main {id} class:bx--content={true} {...$$restProps}>
+  <slot />
+</main>

src/UIShell/GlobalHeader/Header.svelte

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

src/UIShell/GlobalHeader/HeaderAction.svelte

@@ -0,0 +1,66 @@
+<script>
+  export let type = undefined;
+  export let icon = undefined;
+  export let isOpen = undefined;
+  export let text = undefined;
+
+  import { Icon } from "../../Icon";
+  import { slide } from "svelte/transition";
+
+  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 > span {
+    margin-left: 0.75rem;
+    vertical-align: top;
+  }
+</style>
+
+<svelte:window
+  on:mouseup={({ target }) => {
+    if (target && refPanel) {
+      if (!refPanel.contains(target)) {
+        isOpen = false;
+      }
+    }
+  }} />
+
+<div>
+  <button
+    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;
+    }}>
+    <Icon {...icon} />
+    <slot name="text">
+      {#if text}
+        <span>{text}</span>
+      {/if}
+    </slot>
+  </button>
+  {#if isOpen}
+    <div
+      bind:this={refPanel}
+      class:bx--header-panel={true}
+      class:bx--header-panel--expanded={true}
+      transition:slide={{ duration: 200 }}>
+      <slot />
+    </div>
+  {/if}
+</div>

src/UIShell/GlobalHeader/HeaderActionLink.svelte

@@ -0,0 +1,27 @@
+<script>
+  export let href = undefined;
+  export let type = undefined;
+  export let icon = undefined;
+  export let linkIsActive = undefined;
+
+  import { Icon } from "../../Icon";
+</script>
+
+<style>
+  .action-link {
+    text-align: center;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    padding-top: 10px;
+  }
+</style>
+
+<a
+  aria-label={type}
+  class:bx--header__action={true}
+  class:bx--header__action--active={linkIsActive}
+  class:action-link={true}
+  {href}>
+  <Icon {...icon} />
+</a>

src/UIShell/GlobalHeader/HeaderActionSearch.svelte

@@ -0,0 +1,205 @@
+<script>
+  export let searchIsActive = undefined;
+
+  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";
+
+  const dispatch = createEventDispatcher();
+
+  let searchTabIndex = "0";
+  let closeTabIndex = "-1";
+  let elInput = undefined;
+  let elTypeSearch = undefined;
+  let isSearchFocus = false;
+
+  function dispatchInputs(event) {
+    const params = {
+      action: "search",
+      textInput: event.target.value
+    };
+    dispatch("inputSearch", params);
+  }
+
+  $: if (!searchIsActive) {
+    if (elInput) {
+      elInput.value = "";
+    }
+    searchStore.clear();
+  }
+  $: if (searchIsActive) {
+    searchTabIndex = "-1";
+    closeTabIndex = "0";
+  } else {
+    searchTabIndex = "0";
+    closeTabIndex = "-1";
+  }
+  $: if (isSearchFocus) {
+    elInput.focus();
+  }
+  $: showResults = $searchStore ? true : false;
+</script>
+
+<style>
+  .search-wrapper {
+    position: relative;
+    display: flex;
+    max-width: 28rem;
+    width: 100%;
+    margin-left: 0.5rem;
+    height: 3rem;
+    background-color: #393939;
+    color: #fff;
+    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%;
+    padding: 0;
+    flex-shrink: 0;
+    opacity: 1;
+    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;
+    line-height: 1.375rem;
+    letter-spacing: 0;
+    color: #fff;
+    caret-color: #fff;
+    background-color: initial;
+    border: none;
+    outline: none;
+    width: 100%;
+    height: 3rem;
+    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%;
+    padding: 0;
+    flex-shrink: 0;
+    opacity: 1;
+    display: block;
+    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;
+  }
+</style>
+
+<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}>
+  <div
+    id="right-panel-action-search"
+    class="search-wrapper-2"
+    role="combobox"
+    aria-expanded={searchIsActive}>
+    <button
+      tabindex={searchTabIndex}
+      aria-label="Search"
+      class:bx--header__action={true}
+      class:btn-search={true}
+      class:btn-search-disabled={searchIsActive}
+      on:click={() => {
+        isSearchFocus = true;
+        searchIsActive = true;
+        dispatch('focusInputSearch');
+      }}
+      type="button"
+      on:keydown={({ key }) => {
+        if (key === 'Enter') {
+          searchIsActive = !searchIsActive;
+        }
+      }}>
+      <Icon title="Search" tabindex="0" render={Search20} />
+    </button>
+    <input
+      bind:this={elInput}
+      id="input-search-field"
+      type="text"
+      autocomplete="off"
+      tabindex={closeTabIndex}
+      class="input-search"
+      class:input-hidden={!searchIsActive}
+      placeholder="Search"
+      on:focus={() => dispatch('focusInputSearch')}
+      on:focusout={() => dispatch('focusOutInputSearch')}
+      on:input={dispatchInputs} />
+    <button
+      id="right-panel-close-search"
+      tabindex={closeTabIndex}
+      class:bx--header__action={true}
+      class:btn-clear={true}
+      class:btn-clear-hidden={!searchIsActive}
+      type="button"
+      aria-label="Clear search"
+      on:click={() => {
+        isSearchFocus = false;
+        searchIsActive = false;
+        searchStore.clear();
+      }}
+      on:keydown={({ key }) => {
+        if (key === 'Enter') {
+          searchIsActive = !searchIsActive;
+        }
+      }}>
+      <Icon title="Close" tabindex="0" render={Close20} />
+    </button>
+  </div>
+</div>

src/UIShell/GlobalHeader/HeaderNav.svelte

@@ -0,0 +1,9 @@
+<script>
+  export let ariaLabel = undefined;
+</script>
+
+<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/UIShell/GlobalHeader/HeaderNavItem.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let href = undefined;
+  export let text = undefined;
+</script>
+
+<li>
+  <a
+    role="menuitem"
+    tabindex="0"
+    {href}
+    class:bx--header__menu-item={true}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:keyup
+    on:keydown
+    on:focus
+    on:blur>
+    <span class:bx--text-truncate--end={true}>{text}</span>
+  </a>
+</li>

src/UIShell/GlobalHeader/HeaderNavMenu.svelte

@@ -0,0 +1,56 @@
+<script>
+  export let expanded = false;
+  export let href = "/";
+  export let text = undefined;
+  export let iconDescription = "Expand/Collapse";
+
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+
+  let ref = null;
+</script>
+
+<svelte:window
+  on:mouseup={({ target }) => {
+    if (ref.contains(target) || target === ref) {
+      expanded = !expanded;
+    } else {
+      if (expanded) {
+        expanded = false;
+      }
+    }
+  }} />
+
+<li class:bx--header__submenu={true} title={iconDescription}>
+  <a
+    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') {
+        expanded = !expanded;
+      }
+    }}
+    on:click|preventDefault
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:keyup
+    on:focus
+    on:blur>
+    {text}
+    <ChevronDown16
+      aria-label={iconDescription}
+      class="bx--header__menu-arrow" />
+  </a>
+  <ul role="menu" aria-label={text} class:bx--header__menu={true}>
+    <slot />
+  </ul>
+</li>

src/UIShell/GlobalHeader/HeaderPanelDivider.svelte

@@ -0,0 +1,22 @@
+<style>
+  .subject-divider {
+    color: #525252;
+    padding-bottom: 4px;
+    border-bottom: 1px solid #525252;
+    margin: 32px 1rem 8px;
+  }
+
+  .subject-divider span {
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1rem;
+    letter-spacing: 0.32px;
+    color: #c6c6c6;
+  }
+</style>
+
+<li class="subject-divider">
+  <span>
+    <slot />
+  </span>
+</li>

src/UIShell/GlobalHeader/HeaderPanelLink.svelte

@@ -0,0 +1,9 @@
+<script>
+  export let href = undefined;
+</script>
+
+<li class:bx--switcher__item={true}>
+  <a {href} class:bx--switcher__item-link={true} {...$$restProps}>
+    <slot />
+  </a>
+</li>

src/UIShell/GlobalHeader/HeaderPanelLinks.svelte

@@ -0,0 +1,3 @@
+<ul class:bx--switcher__item={true}>
+  <slot />
+</ul>

src/UIShell/GlobalHeader/HeaderUtilities.svelte

@@ -0,0 +1,3 @@
+<div class:bx--header__global={true}>
+  <slot />
+</div>

src/UIShell/SideNav/HamburgerMenu.svelte

@@ -0,0 +1,25 @@
+<script>
+  export let ariaLabel = undefined;
+  export let isOpen = false;
+
+  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
+  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
+    title={isOpen ? 'Close' : 'Open Menu'}
+    render={isOpen ? Close20 : Menu20} />
+</button>

src/UIShell/SideNav/SideNav.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let ariaLabel = undefined;
+  export let isOpen = undefined;
+</script>
+
+<nav
+  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>

src/UIShell/SideNav/SideNavItems.svelte

@@ -0,0 +1,3 @@
+<ul class:bx--side-nav__items={true}>
+  <slot />
+</ul>

src/UIShell/SideNav/SideNavLink.svelte

@@ -0,0 +1,25 @@
+<script>
+  export let isSelected = false;
+  export let href = undefined;
+  export let text = undefined;
+  export let icon = undefined;
+
+  import { Icon } from "../../Icon";
+</script>
+
+<li class:bx--side-nav__item={true}>
+  <a
+    aria-current={isSelected ? 'page' : ''}
+    {href}
+    class:bx--side-nav__link={true}
+    class:bx--side-nav__link--current={isSelected}
+    {...$$restProps}
+    on:click>
+    <div class:bx--side-nav__icon={true} class:bx--side-nav__icon--small={true}>
+      {#if icon}
+        <Icon {...icon} />
+      {/if}
+    </div>
+    <span class:bx--side-nav__link-text={true}>{text}</span>
+  </a>
+</li>

src/UIShell/SideNav/SideNavMenu.svelte

@@ -0,0 +1,37 @@
+<script>
+  export let expanded = false;
+  export let text = undefined;
+  export let icon = undefined;
+
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+  import { Icon } from "../../Icon";
+</script>
+
+<li class:bx--side-nav__item={true} class:bx--side-nav__item--icon={true}>
+  <button
+    type="button"
+    aria-haspopup="true"
+    aria-expanded={expanded}
+    class:bx--side-nav__submenu={true}
+    {...$$restProps}
+    on:click
+    on:click={() => {
+      expanded = !expanded;
+    }}>
+    <div class:bx--side-nav__icon={true}>
+      {#if icon}
+        <Icon {...icon} />
+      {/if}
+    </div>
+    <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 role="menu" class:bx--side-nav__menu={true}>
+    <slot />
+  </ul>
+</li>

src/UIShell/SideNav/SideNavMenuItem.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let isSelected = undefined;
+  export let href = undefined;
+  export let text = undefined;
+</script>
+
+<li role="none" class:bx--side-nav__menu-item={true}>
+  <a
+    role="menuitem"
+    aria-current={isSelected ? 'page' : ''}
+    {href}
+    class:bx--side-nav__link={true}
+    {...$$restProps}
+    on:click>
+    <span class:bx--side-nav__link-text={true}>{text}</span>
+  </a>
+</li>

src/UIShell/SkipToContent.svelte

@@ -0,0 +1,8 @@
+<script>
+  export let href = "#main-content";
+  export let tabindex = "0";
+</script>
+
+<a {href} {tabindex} class:bx--skip-to-content={true} {...$$restProps} on:click>
+  <slot>Skip to main content</slot>
+</a>

src/UIShell/UIShell.Story.svelte

@@ -0,0 +1,206 @@
+<script>
+  export let story = undefined;
+
+  import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
+  import Help20 from "carbon-icons-svelte/lib/Help20";
+  import ChangeCatalog16 from "carbon-icons-svelte/lib/ChangeCatalog16";
+  import ManageProtection16 from "carbon-icons-svelte/lib/ManageProtection16";
+  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 SideNav from "./SideNav/SideNav.svelte";
+  import SideNavItems from "./SideNav/SideNavItems.svelte";
+  import SideNavMenu from "./SideNav/SideNavMenu.svelte";
+  import SideNavMenuItem from "./SideNav/SideNavMenuItem.svelte";
+  import SideNavLink from "./SideNav/SideNavLink.svelte";
+  import Header from "./GlobalHeader/Header.svelte";
+  import HeaderNav from "./GlobalHeader/HeaderNav.svelte";
+  import HeaderNavItem from "./GlobalHeader/HeaderNavItem.svelte";
+  import HeaderNavMenu from "./GlobalHeader/HeaderNavMenu.svelte";
+  import HeaderUtilities from "./GlobalHeader/HeaderUtilities.svelte";
+  import HeaderActionSearch from "./GlobalHeader/HeaderActionSearch.svelte";
+  import HeaderActionLink from "./GlobalHeader/HeaderActionLink.svelte";
+  import HeaderAction from "./GlobalHeader/HeaderAction.svelte";
+  import HeaderPanelDivider from "./GlobalHeader/HeaderPanelDivider.svelte";
+  import HeaderPanelLink from "./GlobalHeader/HeaderPanelLink.svelte";
+  import HeaderPanelLinks from "./GlobalHeader/HeaderPanelLinks.svelte";
+  import Content from "./Content.svelte";
+  import SkipToContent from "./SkipToContent.svelte";
+
+  let isSideNavOpen = undefined;
+
+  let iCatalog = {
+    class: undefined,
+    skeleton: false,
+    render: ChangeCatalog16,
+    title: "Catalog",
+    tabindex: "0",
+    focusable: false,
+    style: undefined
+  };
+
+  let iHelp = {
+    class: undefined,
+    skeleton: false,
+    render: Help20,
+    title: "Help",
+    tabindex: "0",
+    focusable: false,
+    style: undefined
+  };
+
+  let iAdjust = {
+    class: undefined,
+    skeleton: false,
+    render: SettingsAdjust20,
+    title: "Catalog",
+    tabindex: "0",
+    focusable: false,
+    style: undefined
+  };
+
+  let iProtection = {
+    class: undefined,
+    skeleton: false,
+    render: ManageProtection16,
+    title: "Catalog",
+    tabindex: "0",
+    focusable: false,
+    style: undefined
+  };
+
+  let iSwitcher = {
+    class: undefined,
+    skeleton: false,
+    render: AppSwitcher20,
+    title: "App Switcher",
+    tabindex: "0",
+    focusable: false,
+    style: undefined
+  };
+
+  let iAccount = {
+    class: undefined,
+    skeleton: false,
+    render: UserAvatar20,
+    title: "Account",
+    tabindex: "0",
+    focusable: false,
+    style: undefined
+  };
+
+  let iNotifications = {
+    class: undefined,
+    skeleton: false,
+    render: Notification20,
+    title: "Notifications",
+    tabindex: "0",
+    focusable: false,
+    style: undefined
+  };
+
+  let iSettings = {
+    class: undefined,
+    skeleton: false,
+    render: SettingsAdjust20,
+    title: "Settings",
+    tabindex: "0",
+    focusable: false,
+    style: undefined
+  };
+</script>
+
+{#if story === 'header'}
+  <Header {...$$props}>
+    <SkipToContent />
+  </Header>
+{:else if story === 'sidenav'}
+  <SideNav isOpen={true}>
+    <SideNavItems>
+      <SideNavMenu text="Menu 01" icon={iCatalog}>
+        <SideNavMenuItem text="Sub 01" href="/" />
+        <SideNavMenuItem text="Sub 02" href="/" />
+        <SideNavMenuItem text="Sub 03" href="/" />
+        <SideNavMenuItem text="Sub 04" href="/" />
+      </SideNavMenu>
+      <SideNavMenu text="Menu 02" icon={iAdjust}>
+        <SideNavMenuItem text="Sub 01" href="/" />
+        <SideNavMenuItem text="Sub 02" href="/" />
+        <SideNavMenuItem text="Sub 03" href="/" />
+        <SideNavMenuItem text="Sub 04" href="/" />
+      </SideNavMenu>
+      <SideNavLink text="Menu 03" href="/" icon={iProtection} />
+    </SideNavItems>
+  </SideNav>
+{:else if story === 'header-with-nav'}
+  <Header {...$$props}>
+    <HeaderNav>
+      <HeaderNavItem href="/" text="Link 1" />
+      <HeaderNavItem href="/" text="Link 2" />
+      <HeaderNavItem href="/" text="Link 3" />
+      <HeaderNavMenu text="Sub Menu">
+        <HeaderNavItem href="/" text="Link 1" />
+        <HeaderNavItem href="/" text="Link 2" />
+        <HeaderNavItem href="/" text="Link 3" />
+      </HeaderNavMenu>
+    </HeaderNav>
+  </Header>
+{:else if story === 'header-with-utilities'}
+  <Header {...$$props}>
+    <HeaderUtilities>
+      <HeaderActionSearch />
+      <HeaderAction type="Settings" icon={iSettings}>
+        <HeaderPanelLinks>
+          <HeaderPanelDivider>Settings</HeaderPanelDivider>
+        </HeaderPanelLinks>
+      </HeaderAction>
+      <HeaderActionLink type="Help" icon={iHelp} />
+      <HeaderAction type="Notifications" icon={iNotifications} isOpen={true}>
+        <HeaderPanelLinks>
+          <HeaderPanelDivider>Notifications</HeaderPanelDivider>
+        </HeaderPanelLinks>
+      </HeaderAction>
+      <HeaderActionLink type="Account" icon={iAccount} />
+    </HeaderUtilities>
+  </Header>
+{:else if story === 'header-with-switcher'}
+  <Header {...$$props}>
+    <HeaderUtilities>
+      <HeaderAction type="Switcher" icon={iSwitcher} isOpen={true}>
+        <HeaderPanelLinks>
+          <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
+          <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+          <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
+          <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+          <HeaderPanelLink>Switcher item 2</HeaderPanelLink>
+          <HeaderPanelLink>Switcher item 3</HeaderPanelLink>
+          <HeaderPanelLink>Switcher item 4</HeaderPanelLink>
+          <HeaderPanelLink>Switcher item 5</HeaderPanelLink>
+        </HeaderPanelLinks>
+      </HeaderAction>
+    </HeaderUtilities>
+  </Header>
+{:else if story === 'header-and-sidenav'}
+  <Header bind:isSideNavOpen {...$$props} />
+  <SideNav bind:isOpen={isSideNavOpen}>
+    <SideNavItems>
+      <SideNavMenu text="Menu 01" icon={iCatalog}>
+        <SideNavMenuItem text="Sub 01" href="/" />
+        <SideNavMenuItem text="Sub 02" href="/" />
+        <SideNavMenuItem text="Sub 03" href="/" />
+        <SideNavMenuItem text="Sub 04" href="/" />
+      </SideNavMenu>
+      <SideNavMenu text="Menu 02" icon={iAdjust}>
+        <SideNavMenuItem text="Sub 01" href="/" />
+        <SideNavMenuItem text="Sub 02" href="/" />
+        <SideNavMenuItem text="Sub 03" href="/" />
+        <SideNavMenuItem text="Sub 04" href="/" />
+      </SideNavMenu>
+      <SideNavLink text="Menu 03" href="/" icon={iProtection} />
+    </SideNavItems>
+  </SideNav>
+{/if}
+<Content>
+  <h2>Page Title</h2>
+</Content>

src/UIShell/UIShell.stories.js

@@ -0,0 +1,64 @@
+import { withKnobs, text } from "@storybook/addon-knobs";
+import Component from "./UIShell.Story.svelte";
+
+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"),
+  },
+});
+
+export const Sidenav = () => ({
+  Component,
+  props: {
+    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"),
+  },
+});
+
+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"),
+  },
+});
+
+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"),
+  },
+});
+
+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"),
+  },
+});

src/UIShell/index.js

@@ -0,0 +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";

src/UIShell/searchStore.js

@@ -0,0 +1,58 @@
+import { writable } from 'svelte/store';
+
+const data = [
+  {
+    href: '#',
+    title: 'Test title search 1',
+    menu: 'Test menu 1',
+    description: 'This is a description for seach #1'
+  },
+  {
+    href: '#',
+    title: 'Changing text to simulate search',
+    menu: 'Test menu 2',
+    description: 'This is a description for seach #2'
+  },
+  {
+    href: '#',
+    title: 'More testing texts',
+    menu: 'Test menu 3',
+    description: 'This is a description for seach #3'
+  },
+  {
+    href: '#',
+    title: 'We can find here another test text',
+    menu: 'Test menu 4',
+    description: 'This is a description for seach #4'
+  }
+];
+
+const globalStore = writable(undefined);
+
+const store = {
+  subscribe: globalStore.subscribe,
+  search: searchString => {
+    if (searchString.length > 1) {
+      let resultSearch = [];
+
+      data.forEach(item => {
+        if (item.title.toLowerCase().includes(searchString.toLowerCase())) {
+          resultSearch.push(item);
+        }
+      });
+
+      if (resultSearch.length > 0) {
+        globalStore.set(resultSearch);
+      } else {
+        globalStore.set(undefined);
+      }
+    } else {
+      globalStore.set(undefined);
+    }
+  },
+  clear: () => {
+    globalStore.set(undefined);
+  }
+};
+
+export default store;