From 624df2db242a8923f124ad0897b6718c4eb874d0 Mon Sep 17 00:00:00 2001
From: Marcus Feitoza <marcus.feitoza.filho@gmail.com>
Date: Sat, 18 Apr 2020 12:10:35 -0300
Subject: [PATCH 1/9] refactor(uishell): renaming variable

---
 .../UIShell/GlobalHeader/HeaderAction.svelte           | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/UIShell/GlobalHeader/HeaderAction.svelte b/src/components/UIShell/GlobalHeader/HeaderAction.svelte
index 737f0c08..d344aab5 100644
--- a/src/components/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/src/components/UIShell/GlobalHeader/HeaderAction.svelte
@@ -1,7 +1,7 @@
 <script>
   export let type = undefined;
   export let icon = undefined;
-  export let componentIsActive = undefined;
+  export let isOpen = undefined;
 
   let elRigthPanel = undefined;
 
@@ -12,7 +12,7 @@
   function mouseUp({ target }) {
     if (target && elRigthPanel) {
       if (!elRigthPanel.contains(target)) {
-        componentIsActive = false;
+        isOpen = false;
       }
     }
   }
@@ -23,14 +23,14 @@
 <div id="right-panel-action-component">
   <button
     aria-label={type}
-    class={cx('--header__action', componentIsActive && '--header__action--active')}
+    class={cx('--header__action', isOpen && '--header__action--active')}
     type="button"
     on:click={() => {
-      componentIsActive = true;
+      isOpen = true;
     }}>
     <Icon {...icon} />
   </button>
-  {#if componentIsActive}
+  {#if isOpen}
     <div
       bind:this={elRigthPanel}
       id="right-panel-action-component-form"

From 972bd338b19df92d43b949d2bb8cbeea4fc6476c Mon Sep 17 00:00:00 2001
From: Marcus Feitoza <marcus.feitoza.filho@gmail.com>
Date: Sat, 18 Apr 2020 12:43:58 -0300
Subject: [PATCH 2/9] refactor(uishell): add header component

---
 .../UIShell/{UIShell.svelte => GlobalHeader/Header.svelte}   | 4 ++--
 src/components/UIShell/index.js                              | 5 +----
 src/index.js                                                 | 5 +++--
 3 files changed, 6 insertions(+), 8 deletions(-)
 rename src/components/UIShell/{UIShell.svelte => GlobalHeader/Header.svelte} (87%)

diff --git a/src/components/UIShell/UIShell.svelte b/src/components/UIShell/GlobalHeader/Header.svelte
similarity index 87%
rename from src/components/UIShell/UIShell.svelte
rename to src/components/UIShell/GlobalHeader/Header.svelte
index 07ab2493..68fba607 100644
--- a/src/components/UIShell/UIShell.svelte
+++ b/src/components/UIShell/GlobalHeader/Header.svelte
@@ -5,8 +5,8 @@
   export let platformName = undefined;
   export let isSideNavOpen = undefined;
 
-  import { cx } from '../../lib';
-  import HamburgerMenu from './SideNav/HamburgerMenu.svelte';
+  import { cx } from '../../../lib';
+  import HamburgerMenu from '../SideNav/HamburgerMenu.svelte';
 
   let winWidth = undefined;
   $: isSideNavOpen = winWidth >= 1056;
diff --git a/src/components/UIShell/index.js b/src/components/UIShell/index.js
index 4288779a..ef772ce9 100644
--- a/src/components/UIShell/index.js
+++ b/src/components/UIShell/index.js
@@ -1,12 +1,9 @@
-import UIShell from './UIShell.svelte';
-
-export default UIShell;
-
 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 Header } from './GlobalHeader/Header.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';
diff --git a/src/index.js b/src/index.js
index 5b84c1c5..9814d86c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -78,12 +78,13 @@ import ToggleSmall, { ToggleSmallSkeleton } from './components/ToggleSmall';
 import Tooltip from './components/Tooltip';
 import TooltipDefinition from './components/TooltipDefinition';
 import TooltipIcon from './components/TooltipIcon';
-import UIShell, {
+import {
   SideNav,
   SideNavItems,
   SideNavLink,
   SideNavMenu,
   SideNavMenuItem,
+  Header,
   HeaderNav,
   HeaderNavItem,
   HeaderNavMenu,
@@ -206,12 +207,12 @@ export {
   Tooltip,
   TooltipDefinition,
   TooltipIcon,
-  UIShell,
   SideNav,
   SideNavItems,
   SideNavLink,
   SideNavMenu,
   SideNavMenuItem,
+  Header,
   HeaderNav,
   HeaderNavItem,
   HeaderNavMenu,

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 3/9] 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',

From 57e1dc65815ba355be14506b9eb85bd99f2f3728 Mon Sep 17 00:00:00 2001
From: Marcus Feitoza <marcus.feitoza.filho@gmail.com>
Date: Sat, 18 Apr 2020 12:46:24 -0300
Subject: [PATCH 4/9] refactor(uishell): remove unused element id

---
 src/components/UIShell/GlobalHeader/HeaderAction.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/UIShell/GlobalHeader/HeaderAction.svelte b/src/components/UIShell/GlobalHeader/HeaderAction.svelte
index d344aab5..b20e513a 100644
--- a/src/components/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/src/components/UIShell/GlobalHeader/HeaderAction.svelte
@@ -20,7 +20,7 @@
 
 <svelte:window on:mouseup={mouseUp} />
 
-<div id="right-panel-action-component">
+<div>
   <button
     aria-label={type}
     class={cx('--header__action', isOpen && '--header__action--active')}
@@ -33,7 +33,6 @@
   {#if isOpen}
     <div
       bind:this={elRigthPanel}
-      id="right-panel-action-component-form"
       class={cx('--header-panel', '--header-panel--expanded')}
       transition:slide={{ duration: 200 }}>
       <slot />

From d941f887a3c88fc93e5fc7007bd12eb844a630e5 Mon Sep 17 00:00:00 2001
From: Marcus Feitoza <marcus.feitoza.filho@gmail.com>
Date: Sat, 18 Apr 2020 12:53:19 -0300
Subject: [PATCH 5/9] refactor(uishell): organize exports

---
 src/components/UIShell/index.js | 22 +++++++++---------
 src/index.js                    | 40 +++++++++++++++++++--------------
 2 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/components/UIShell/index.js b/src/components/UIShell/index.js
index ef772ce9..039bafc7 100644
--- a/src/components/UIShell/index.js
+++ b/src/components/UIShell/index.js
@@ -1,16 +1,16 @@
+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 Header } from './GlobalHeader/Header.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 HeaderUtilities } from './GlobalHeader/HeaderUtilities.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 HeaderPanelDivider } from './GlobalHeader/HeaderPanelDivider.svelte';
-export { default as HeaderPanelLink } from './GlobalHeader/HeaderPanelLink.svelte';
-export { default as HeaderPanelLinks } from './GlobalHeader/HeaderPanelLinks.svelte';
diff --git a/src/index.js b/src/index.js
index 9814d86c..90288928 100644
--- a/src/index.js
+++ b/src/index.js
@@ -79,19 +79,22 @@ import Tooltip from './components/Tooltip';
 import TooltipDefinition from './components/TooltipDefinition';
 import TooltipIcon from './components/TooltipIcon';
 import {
+  Header,
+  HeaderAction,
+  HeaderActionLink,
+  HeaderActionSearch,
+  HeaderNav,
+  HeaderNavItem,
+  HeaderNavMenu,
+  HeaderPanelDivider,
+  HeaderPanelLink,
+  HeaderPanelLinks,
+  HeaderUtilities,
   SideNav,
   SideNavItems,
   SideNavLink,
   SideNavMenu,
-  SideNavMenuItem,
-  Header,
-  HeaderNav,
-  HeaderNavItem,
-  HeaderNavMenu,
-  HeaderUtilities,
-  HeaderAction,
-  HeaderActionLink,
-  HeaderActionSearch
+  SideNavMenuItem
 } from './components/UIShell';
 import UnorderedList from './components/UnorderedList';
 
@@ -207,18 +210,21 @@ export {
   Tooltip,
   TooltipDefinition,
   TooltipIcon,
+  Header,
+  HeaderAction,
+  HeaderActionLink,
+  HeaderActionSearch,
+  HeaderNav,
+  HeaderNavItem,
+  HeaderNavMenu,
+  HeaderPanelDivider,
+  HeaderPanelLink,
+  HeaderPanelLinks,
+  HeaderUtilities,
   SideNav,
   SideNavItems,
   SideNavLink,
   SideNavMenu,
   SideNavMenuItem,
-  Header,
-  HeaderNav,
-  HeaderNavItem,
-  HeaderNavMenu,
-  HeaderUtilities,
-  HeaderAction,
-  HeaderActionLink,
-  HeaderActionSearch,
   UnorderedList
 };

From 2424b32c87e6e788c566f17414e8d73e780ec6d5 Mon Sep 17 00:00:00 2001
From: Marcus Feitoza <marcus.feitoza.filho@gmail.com>
Date: Sat, 18 Apr 2020 13:02:02 -0300
Subject: [PATCH 6/9] docs(uishell): better descriptions

---
 src/components/UIShell/UIShell.Story.svelte | 10 +++++-----
 src/components/UIShell/UIShell.stories.js   | 20 ++++++++++----------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/UIShell/UIShell.Story.svelte b/src/components/UIShell/UIShell.Story.svelte
index 16c1245c..b190615f 100644
--- a/src/components/UIShell/UIShell.Story.svelte
+++ b/src/components/UIShell/UIShell.Story.svelte
@@ -109,9 +109,9 @@
   };
 </script>
 
-{#if story === 'base'}
+{#if story === 'header'}
   <Header {...$$props} />
-{:else if story === 'with-header-and-nav'}
+{:else if story === 'header-with-nav'}
   <Header {...$$props}>
     <HeaderNav>
       <HeaderNavItem href="/" text="Link 1" />
@@ -124,7 +124,7 @@
       </HeaderNavMenu>
     </HeaderNav>
   </Header>
-{:else if story === 'with-utilities'}
+{:else if story === 'header-with-utilities'}
   <Header {...$$props}>
     <HeaderUtilities>
       <HeaderActionSearch />
@@ -142,7 +142,7 @@
       <HeaderActionLink type="Account" icon={iAccount} />
     </HeaderUtilities>
   </Header>
-{:else if story === 'with-switcher'}
+{:else if story === 'header-with-switcher'}
   <Header {...$$props}>
     <HeaderUtilities>
       <HeaderAction type="Switcher" icon={iSwitcher} isOpen={true}>
@@ -159,7 +159,7 @@
       </HeaderAction>
     </HeaderUtilities>
   </Header>
-{:else if story === 'with-sidenav'}
+{:else if story === 'header-and-sidenav'}
   <Header bind:isSideNavOpen {...$$props} />
   <SideNav isOpen={isSideNavOpen}>
     <SideNavItems>
diff --git a/src/components/UIShell/UIShell.stories.js b/src/components/UIShell/UIShell.stories.js
index 4cf5c5a3..2a46d83c 100644
--- a/src/components/UIShell/UIShell.stories.js
+++ b/src/components/UIShell/UIShell.stories.js
@@ -3,50 +3,50 @@ import Component from './UIShell.Story.svelte';
 
 export default { title: 'UIShell', decorators: [withKnobs] };
 
-export const Base = () => ({
+export const Header = () => ({
   Component,
   props: {
-    story: 'base',
+    story: 'header',
     href: text('The link href (href)', '#'),
     company: text('Company name', 'IBM'),
     platformName: text('Platform name', 'Platform Name')
   }
 });
 
-export const WithHeaderAndNav = () => ({
+export const HeaderWithNav = () => ({
   Component,
   props: {
-    story: 'with-header-and-nav',
+    story: 'header-with-nav',
     href: text('The link href (href)', '#'),
     company: text('Company name', 'IBM'),
     platformName: text('Platform name', 'Platform Name')
   }
 });
 
-export const WithUtilities = () => ({
+export const HeaderWithUtilities = () => ({
   Component,
   props: {
-    story: 'with-utilities',
+    story: 'header-with-utilities',
     href: text('The link href (href)', '#'),
     company: text('Company name', 'IBM'),
     platformName: text('Platform name', 'Platform Name')
   }
 });
 
-export const WithSwitcher = () => ({
+export const HeaderWithSwitcher = () => ({
   Component,
   props: {
-    story: 'with-switcher',
+    story: 'header-with-switcher',
     href: text('The link href (href)', '#'),
     company: text('Company name', 'IBM'),
     platformName: text('Platform name', 'Platform Name')
   }
 });
 
-export const WithSidenav = () => ({
+export const HeaderAndSidenav = () => ({
   Component,
   props: {
-    story: 'with-sidenav',
+    story: 'header-and-sidenav',
     href: text('The link href (href)', '#'),
     company: text('Company name', 'IBM'),
     platformName: text('Platform name', 'Platform Name')

From ba459dc25deef2ba7a0c7676341f2201234d2d66 Mon Sep 17 00:00:00 2001
From: Marcus Feitoza <marcus.feitoza.filho@gmail.com>
Date: Sat, 18 Apr 2020 15:15:07 -0300
Subject: [PATCH 7/9] fix(uishell): remove navbar footer

---
 src/components/UIShell/SideNav/SideNav.svelte | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/components/UIShell/SideNav/SideNav.svelte b/src/components/UIShell/SideNav/SideNav.svelte
index 27e214d9..045b4a94 100644
--- a/src/components/UIShell/SideNav/SideNav.svelte
+++ b/src/components/UIShell/SideNav/SideNav.svelte
@@ -3,8 +3,6 @@
   export let isOpen = undefined;
 
   import { cx } from '../../../lib';
-  import Icon from '../../Icon/Icon.svelte';
-  import { closeIcon } from '../constants';
 
   $: footerSpanText = isOpen ? 'Open' : 'Close';
 </script>
@@ -13,12 +11,4 @@
   class={cx('--side-nav__navigation', '--side-nav', '--side-nav--ux', isOpen && '--side-nav--expanded')}
   aria-label={ariaLabel}>
   <slot />
-  <footer class={cx('--side-nav__footer')}>
-    <button class={cx('--side-nav__toggle')} type="button" title="Open">
-      <div class={cx('--side-nav__icon')}>
-        <Icon {...closeIcon} />
-      </div>
-      <span class={cx('--assistive-text')}>{footerSpanText}</span>
-    </button>
-  </footer>
 </nav>

From 9fd3b82dd64a07519d9569a01320c7babbc793d9 Mon Sep 17 00:00:00 2001
From: Marcus Feitoza <marcus.feitoza.filho@gmail.com>
Date: Sat, 18 Apr 2020 15:16:05 -0300
Subject: [PATCH 8/9] docs(uishell): bind variable

---
 src/components/UIShell/UIShell.Story.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UIShell/UIShell.Story.svelte b/src/components/UIShell/UIShell.Story.svelte
index b190615f..4c0c95ff 100644
--- a/src/components/UIShell/UIShell.Story.svelte
+++ b/src/components/UIShell/UIShell.Story.svelte
@@ -161,7 +161,7 @@
   </Header>
 {:else if story === 'header-and-sidenav'}
   <Header bind:isSideNavOpen {...$$props} />
-  <SideNav isOpen={isSideNavOpen}>
+  <SideNav bind:isOpen={isSideNavOpen}>
     <SideNavItems>
       <SideNavMenu text="Menu 01" icon={iCatalog}>
         <SideNavMenuItem text="Sub 01" href="/" />

From ee9f3e295c2c5f303812253160bbedb91d05d34b Mon Sep 17 00:00:00 2001
From: Marcus Feitoza <marcus.feitoza.filho@gmail.com>
Date: Sat, 18 Apr 2020 15:18:46 -0300
Subject: [PATCH 9/9] docs(uishell): add side nav story

---
 src/components/UIShell/UIShell.Story.svelte | 18 ++++++++++++++++++
 src/components/UIShell/UIShell.stories.js   | 10 ++++++++++
 2 files changed, 28 insertions(+)

diff --git a/src/components/UIShell/UIShell.Story.svelte b/src/components/UIShell/UIShell.Story.svelte
index 4c0c95ff..b1b8947d 100644
--- a/src/components/UIShell/UIShell.Story.svelte
+++ b/src/components/UIShell/UIShell.Story.svelte
@@ -111,6 +111,24 @@
 
 {#if story === 'header'}
   <Header {...$$props} />
+{: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>
diff --git a/src/components/UIShell/UIShell.stories.js b/src/components/UIShell/UIShell.stories.js
index 2a46d83c..5179d95a 100644
--- a/src/components/UIShell/UIShell.stories.js
+++ b/src/components/UIShell/UIShell.stories.js
@@ -13,6 +13,16 @@ export const Header = () => ({
   }
 });
 
+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: {