docs(uishell): replace with header

src/components/UIShell/UIShell.Story.svelte

@@ -1,7 +1,6 @@
 <script>
   export let story = undefined;
 
-  import UIShell from './UIShell.svelte';
   import SettingsAdjust20 from 'carbon-icons-svelte/lib/SettingsAdjust20';
   import Help20 from 'carbon-icons-svelte/lib/Help20';
   import ChangeCatalog16 from 'carbon-icons-svelte/lib/ChangeCatalog16';
@@ -15,6 +14,7 @@
   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';
@@ -109,8 +109,10 @@
   };
 </script>
 
-{#if story === 'with-nav'}
+{#if story === 'base'}
-  <UIShell {...$$props}>
+  <Header {...$$props} />
+{:else if story === 'with-header-and-nav'}
+  <Header {...$$props}>
     <HeaderNav>
       <HeaderNavItem href="/" text="Link 1" />
       <HeaderNavItem href="/" text="Link 2" />
@@ -121,20 +123,29 @@
         <HeaderNavItem href="/" text="Link 3" />
       </HeaderNavMenu>
     </HeaderNav>
-  </UIShell>
+  </Header>
-{:else if story === 'with-actions'}
+{:else if story === 'with-utilities'}
-  <UIShell {...$$props}>
+  <Header {...$$props}>
     <HeaderUtilities>
       <HeaderActionSearch />
       <HeaderAction type="Settings" icon={iSettings}>
-        <p>Settings</p>
+        <HeaderPanelLinks>
+          <HeaderPanelDivider>Settings</HeaderPanelDivider>
+        </HeaderPanelLinks>
       </HeaderAction>
       <HeaderActionLink type="Help" icon={iHelp} />
-      <HeaderAction type="Notifications" icon={iNotifications}>
+      <HeaderAction type="Notifications" icon={iNotifications} isOpen={true}>
-        <p>Notifications</p>
+        <HeaderPanelLinks>
+          <HeaderPanelDivider>Notifications</HeaderPanelDivider>
+        </HeaderPanelLinks>
       </HeaderAction>
       <HeaderActionLink type="Account" icon={iAccount} />
-      <HeaderAction type="Switcher" icon={iSwitcher}>
+    </HeaderUtilities>
+  </Header>
+{:else if story === 'with-switcher'}
+  <Header {...$$props}>
+    <HeaderUtilities>
+      <HeaderAction type="Switcher" icon={iSwitcher} isOpen={true}>
         <HeaderPanelLinks>
           <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
           <HeaderPanelLink>Switecher item 1</HeaderPanelLink>
@@ -147,9 +158,9 @@
         </HeaderPanelLinks>
       </HeaderAction>
     </HeaderUtilities>
-  </UIShell>
+  </Header>
 {:else if story === 'with-sidenav'}
-  <UIShell bind:isSideNavOpen {...$$props}>
+  <Header bind:isSideNavOpen {...$$props} />
   <SideNav isOpen={isSideNavOpen}>
     <SideNavItems>
       <SideNavMenu text="Menu 01" icon={iCatalog}>
@@ -167,7 +178,4 @@
       <SideNavLink text="Menu 03" href="/" icon={iProtection} />
     </SideNavItems>
   </SideNav>
-  </UIShell>
-{:else}
-  <UIShell {...$$props} />
 {/if}

src/components/UIShell/UIShell.stories.js

@@ -3,27 +3,47 @@ import Component from './UIShell.Story.svelte';
 
 export default { title: 'UIShell', decorators: [withKnobs] };
 
-export const WithNav = () => ({
+export const Base = () => ({
   Component,
   props: {
-    story: 'with-nav',
+    story: 'base',
     href: text('The link href (href)', '#'),
     company: text('Company name', 'IBM'),
     platformName: text('Platform name', 'Platform Name')
   }
 });
 
-export const WithActions = () => ({
+export const WithHeaderAndNav = () => ({
   Component,
   props: {
-    story: 'with-actions',
+    story: 'with-header-and-nav',
     href: text('The link href (href)', '#'),
     company: text('Company name', 'IBM'),
     platformName: text('Platform name', 'Platform Name')
   }
 });
 
-export const WithActionsAndSidenav = () => ({
+export const WithUtilities = () => ({
+  Component,
+  props: {
+    story: 'with-utilities',
+    href: text('The link href (href)', '#'),
+    company: text('Company name', 'IBM'),
+    platformName: text('Platform name', 'Platform Name')
+  }
+});
+
+export const WithSwitcher = () => ({
+  Component,
+  props: {
+    story: 'with-switcher',
+    href: text('The link href (href)', '#'),
+    company: text('Company name', 'IBM'),
+    platformName: text('Platform name', 'Platform Name')
+  }
+});
+
+export const WithSidenav = () => ({
   Component,
   props: {
     story: 'with-sidenav',