feat(uishell): nav

src/components/UIShell/UIShell.Story.svelte

@@ -11,6 +11,9 @@
   import SideNavMenu from './SideNav/SideNavMenu.svelte';
   import SideNavMenuItem from './SideNav/SideNavMenuItem.svelte';
   import SideNavLink from './SideNav/SideNavLink.svelte';
+  import UIShellNav from './UIShellNav/UIShellNav.svelte';
+  import UIShellNavItem from './UIShellNav/UIShellNavItem.svelte';
+  import UIShellNavSubmenu from './UIShellNav/UIShellNavSubmenu.svelte';
 
   let iCatalog = {
     class: undefined,
@@ -43,7 +46,22 @@
   };
 </script>
 
-{#if story === 'with-actions-sidenav'}
+{#if story === 'with-nav'}
+  <UIShell {...$$props}>
+    <div slot="Nav">
+      <UIShellNav>
+        <UIShellNavItem href="/" text="Link 1" />
+        <UIShellNavItem href="/" text="Link 2" />
+        <UIShellNavItem href="/" text="Link 3" />
+        <UIShellNavSubmenu text="Sub Menu">
+          <UIShellNavItem href="/" text="Link 1" />
+          <UIShellNavItem href="/" text="Link 2" />
+          <UIShellNavItem href="/" text="Link 3" />
+        </UIShellNavSubmenu>
+      </UIShellNav>
+    </div>
+  </UIShell>
+{:else if story === 'with-actions-sidenav'}
   <UIShell {...$$props}>
     <div slot="SideNav">
       <SideNav>

src/components/UIShell/UIShell.stories.js

@@ -3,6 +3,16 @@ import Component from './UIShell.Story.svelte';
 
 export default { title: 'UIShell', decorators: [withKnobs] };
 
+export const WithNav = () => ({
+  Component,
+  props: {
+    story: 'with-nav',
+    href: text('The link href (href)', '#'),
+    company: text('Company name', 'IBM'),
+    platformName: text('Platform name', 'Platform Name')
+  }
+});
+
 export const WithActionsAndSidenav = () => ({
   Component,
   props: {

src/components/UIShell/UIShell.svelte

@@ -24,5 +24,6 @@
     <span class={cx('--header__name--prefix')}>{company}</span>
     &nbsp;{platformName}
   </a>
+  <slot name="Nav" />
   <slot name="SideNav" />
 </header>

src/components/UIShell/UIShellNav/UIShellNav.svelte

@@ -0,0 +1,10 @@
+<script>
+  export let ariaLabel = undefined;
+  import { cx } from '../../../lib';
+</script>
+
+<nav aria-label={ariaLabel} class={cx('--header__nav')}>
+  <ul aria-label={ariaLabel} class={cx('--header__menu-bar')} role="menubar">
+    <slot />
+  </ul>
+</nav>

src/components/UIShell/UIShellNav/UIShellNavItem.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let href = undefined;
+  export let text = undefined;
+  import { cx } from '../../../lib';
+</script>
+
+<li>
+  <a
+    class={cx('--header__menu-item')}
+    role="menuitem"
+    tabindex="0"
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:keyup
+    on:keydown
+    on:focus
+    on:blur
+    {href}>
+    <span class={cx('--text-truncate--end')}>{text}</span>
+  </a>
+</li>

src/components/UIShell/UIShellNav/UIShellNavSubmenu.svelte

@@ -0,0 +1,54 @@
+<script>
+  export let text = undefined;
+  export let iconDescription = 'Expand/Collapse';
+  export let expanded = false;
+  import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
+  import { cx } from '../../../lib';
+
+  let listItemSubMenu = undefined;
+
+  const mouseUp = ({ target }) => {
+    if (listItemSubMenu) {
+      if (listItemSubMenu.contains(target) || target === listItemSubMenu) {
+        expanded = !expanded;
+      } else {
+        if (expanded) {
+          expanded = false;
+        }
+      }
+    }
+  };
+</script>
+
+<svelte:window on:mouseup={mouseUp} />
+
+<li class={cx('--header__submenu')} title={iconDescription}>
+  <a
+    bind:this={listItemSubMenu}
+    aria-haspopup="menu"
+    aria-expanded={expanded}
+    class={cx('--header__menu-item', '--header__menu-title')}
+    role="menuitem"
+    tabindex="0"
+    aria-label={text}
+    href="javascript:void(0)"
+    on:keydown
+    on:keydown={({ key }) => {
+      if (key === 'Enter') {
+        expanded = !expanded;
+      }
+    }}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:keyup
+    on:focus
+    on:blur>
+    {text}
+    <ChevronDown16 class={cx('--header__menu-arrow')} aria-label={iconDescription} />
+  </a>
+  <ul aria-label={text} class={cx('--header__menu')} role="menu">
+    <slot />
+  </ul>
+</li>

src/components/UIShell/index.js

@@ -7,3 +7,6 @@ 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 UIShellNav } from './UIShellShellNav/UIShellNav.svelte';
+export { default as UIShellNavItem } from './UIShellShellNav/UIShellNavItem.svelte';
+export { default as UIShellNavSubMenu } from './UIShellShellNav/UIShellNavSubMenu.svelte';

src/index.js

@@ -83,7 +83,10 @@ import UIShell, {
   SideNavItems,
   SideNavLink,
   SideNavMenu,
-  SideNavMenuItem
+  SideNavMenuItem,
+  UIShellNav,
+  UIShellNavItem,
+  UIShellNavSubMenu
 } from './components/UIShell';
 import UnorderedList from './components/UnorderedList';
 
@@ -205,5 +208,8 @@ export {
   SideNavLink,
   SideNavMenu,
   SideNavMenuItem,
+  UIShellNav,
+  UIShellNavItem,
+  UIShellNavSubMenu,
   UnorderedList
 };