From b79567f932d8ace51dd96f3cb4ce1aa2ba289df5 Mon Sep 17 00:00:00 2001
From: Marcus Feitoza <marcus.feitoza.filho@gmail.com>
Date: Sat, 18 Apr 2020 12:44:24 -0300
Subject: [PATCH] docs(uishell): replace with header

---
 src/components/UIShell/UIShell.Story.svelte | 72 ++++++++++++---------
 src/components/UIShell/UIShell.stories.js   | 30 +++++++--
 2 files changed, 65 insertions(+), 37 deletions(-)

diff --git a/src/components/UIShell/UIShell.Story.svelte b/src/components/UIShell/UIShell.Story.svelte
index 9dcf8573..16c1245c 100644
--- a/src/components/UIShell/UIShell.Story.svelte
+++ b/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'}
-  <UIShell {...$$props}>
+{#if story === 'base'}
+  <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>
-{:else if story === 'with-actions'}
-  <UIShell {...$$props}>
+  </Header>
+{:else if story === 'with-utilities'}
+  <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}>
-        <p>Notifications</p>
+      <HeaderAction type="Notifications" icon={iNotifications} isOpen={true}>
+        <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,27 +158,24 @@
         </HeaderPanelLinks>
       </HeaderAction>
     </HeaderUtilities>
-  </UIShell>
+  </Header>
 {:else if story === 'with-sidenav'}
-  <UIShell bind:isSideNavOpen {...$$props}>
-    <SideNav 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>
-  </UIShell>
-{:else}
-  <UIShell {...$$props} />
+  <Header bind:isSideNavOpen {...$$props} />
+  <SideNav 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}
diff --git a/src/components/UIShell/UIShell.stories.js b/src/components/UIShell/UIShell.stories.js
index e8b66ea1..4cf5c5a3 100644
--- a/src/components/UIShell/UIShell.stories.js
+++ b/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',