Merge pull request #168 from mfeitoza/master

Refactor

src/components/UIShell/GlobalHeader/Header.svelte

@@ -5,8 +5,8 @@
   export let platformName = undefined;
   export let isSideNavOpen = undefined;
 
-  import { cx } from '../../lib';
+  import { cx } from '../../../lib';
-  import HamburgerMenu from './SideNav/HamburgerMenu.svelte';
+  import HamburgerMenu from '../SideNav/HamburgerMenu.svelte';
 
   let winWidth = undefined;
   $: isSideNavOpen = winWidth >= 1056;

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;
       }
     }
   }
@@ -20,20 +20,19 @@
 
 <svelte:window on:mouseup={mouseUp} />
 
-<div id="right-panel-action-component">
+<div>
   <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"
       class={cx('--header-panel', '--header-panel--expanded')}
       transition:slide={{ duration: 200 }}>
       <slot />

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>

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,28 @@
   };
 </script>
 
-{#if story === 'with-nav'}
+{#if story === 'header'}
-  <UIShell {...$$props}>
+  <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>
       <HeaderNavItem href="/" text="Link 1" />
       <HeaderNavItem href="/" text="Link 2" />
@@ -121,20 +141,29 @@
         <HeaderNavItem href="/" text="Link 3" />
       </HeaderNavMenu>
     </HeaderNav>
-  </UIShell>
+  </Header>
-{:else if story === 'with-actions'}
+{:else if story === 'header-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 === 'header-with-switcher'}
+  <Header {...$$props}>
+    <HeaderUtilities>
+      <HeaderAction type="Switcher" icon={iSwitcher} isOpen={true}>
         <HeaderPanelLinks>
           <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
           <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
@@ -147,27 +176,24 @@
         </HeaderPanelLinks>
       </HeaderAction>
     </HeaderUtilities>
-  </UIShell>
+  </Header>
-{:else if story === 'with-sidenav'}
+{:else if story === 'header-and-sidenav'}
-  <UIShell bind:isSideNavOpen {...$$props}>
+  <Header bind:isSideNavOpen {...$$props} />
-    <SideNav isOpen={isSideNavOpen}>
+  <SideNav bind:isOpen={isSideNavOpen}>
-      <SideNavItems>
+    <SideNavItems>
-        <SideNavMenu text="Menu 01" icon={iCatalog}>
+      <SideNavMenu text="Menu 01" icon={iCatalog}>
-          <SideNavMenuItem text="Sub 01" href="/" />
+        <SideNavMenuItem text="Sub 01" href="/" />
-          <SideNavMenuItem text="Sub 02" href="/" />
+        <SideNavMenuItem text="Sub 02" href="/" />
-          <SideNavMenuItem text="Sub 03" href="/" />
+        <SideNavMenuItem text="Sub 03" href="/" />
-          <SideNavMenuItem text="Sub 04" href="/" />
+        <SideNavMenuItem text="Sub 04" href="/" />
-        </SideNavMenu>
+      </SideNavMenu>
-        <SideNavMenu text="Menu 02" icon={iAdjust}>
+      <SideNavMenu text="Menu 02" icon={iAdjust}>
-          <SideNavMenuItem text="Sub 01" href="/" />
+        <SideNavMenuItem text="Sub 01" href="/" />
-          <SideNavMenuItem text="Sub 02" href="/" />
+        <SideNavMenuItem text="Sub 02" href="/" />
-          <SideNavMenuItem text="Sub 03" href="/" />
+        <SideNavMenuItem text="Sub 03" href="/" />
-          <SideNavMenuItem text="Sub 04" href="/" />
+        <SideNavMenuItem text="Sub 04" href="/" />
-        </SideNavMenu>
+      </SideNavMenu>
-        <SideNavLink text="Menu 03" href="/" icon={iProtection} />
+      <SideNavLink text="Menu 03" href="/" icon={iProtection} />
-      </SideNavItems>
+    </SideNavItems>
-    </SideNav>
+  </SideNav>
-  </UIShell>
-{:else}
-  <UIShell {...$$props} />
 {/if}

src/components/UIShell/UIShell.stories.js

@@ -3,30 +3,60 @@ import Component from './UIShell.Story.svelte';
 
 export default { title: 'UIShell', decorators: [withKnobs] };
 
-export const WithNav = () => ({
+export const Header = () => ({
   Component,
   props: {
-    story: 'with-nav',
+    story: 'header',
     href: text('The link href (href)', '#'),
     company: text('Company name', 'IBM'),
     platformName: text('Platform name', 'Platform Name')
   }
 });
 
-export const WithActions = () => ({
+export const Sidenav = () => ({
   Component,
   props: {
-    story: 'with-actions',
+    story: 'sidenav',
     href: text('The link href (href)', '#'),
     company: text('Company name', 'IBM'),
     platformName: text('Platform name', 'Platform Name')
   }
 });
 
-export const WithActionsAndSidenav = () => ({
+export const HeaderWithNav = () => ({
   Component,
   props: {
-    story: 'with-sidenav',
+    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/components/UIShell/index.js

@@ -1,19 +1,16 @@
-import UIShell from './UIShell.svelte';
+export { default as Header } from './GlobalHeader/Header.svelte';
-
+export { default as HeaderAction } from './GlobalHeader/HeaderAction.svelte';
-export default UIShell;
+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 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';

src/index.js

@@ -78,22 +78,23 @@ import ToggleSmall, { ToggleSmallSkeleton } from './components/ToggleSmall';
 import Tooltip from './components/Tooltip';
 import TooltipDefinition from './components/TooltipDefinition';
 import TooltipIcon from './components/TooltipIcon';
-import UIShell, {
+import {
+  Header,
+  HeaderAction,
+  HeaderActionLink,
+  HeaderActionSearch,
+  HeaderNav,
+  HeaderNavItem,
+  HeaderNavMenu,
+  HeaderPanelDivider,
+  HeaderPanelLink,
+  HeaderPanelLinks,
+  HeaderUtilities,
   SideNav,
   SideNavItems,
   SideNavLink,
   SideNavMenu,
-  SideNavMenuItem,
+  SideNavMenuItem
-  HeaderNav,
-  HeaderNavItem,
-  HeaderNavMenu,
-  HeaderUtilities,
-  HeaderAction,
-  HeaderActionLink,
-  HeaderActionSearch,
-  HeaderPanelDivider,
-  HeaderPanelLinks,
-  HeaderPanelLink
 } from './components/UIShell';
 import UnorderedList from './components/UnorderedList';
 
@@ -209,21 +210,21 @@ export {
   Tooltip,
   TooltipDefinition,
   TooltipIcon,
-  UIShell,
+  Header,
+  HeaderAction,
+  HeaderActionLink,
+  HeaderActionSearch,
+  HeaderNav,
+  HeaderNavItem,
+  HeaderNavMenu,
+  HeaderPanelDivider,
+  HeaderPanelLink,
+  HeaderPanelLinks,
+  HeaderUtilities,
   SideNav,
   SideNavItems,
   SideNavLink,
   SideNavMenu,
   SideNavMenuItem,
-  HeaderNav,
-  HeaderNavItem,
-  HeaderNavMenu,
-  HeaderUtilities,
-  HeaderAction,
-  HeaderActionLink,
-  HeaderActionSearch,
-  HeaderPanelDivider,
-  HeaderPanelLinks,
-  HeaderPanelLink,
   UnorderedList
 };