From f43f684b5cbc70fa3dd4b607d9cbe08ad4c59fb8 Mon Sep 17 00:00:00 2001
From: Marcus Feitoza <marcus.feitoza.filho@gmail.com>
Date: Sun, 5 Apr 2020 01:18:08 -0300
Subject: [PATCH] feat(uishell): nav

---
 src/components/UIShell/UIShell.Story.svelte   | 20 ++++++-
 src/components/UIShell/UIShell.stories.js     | 10 ++++
 src/components/UIShell/UIShell.svelte         |  1 +
 .../UIShell/UIShellNav/UIShellNav.svelte      | 10 ++++
 .../UIShell/UIShellNav/UIShellNavItem.svelte  | 23 ++++++++
 .../UIShellNav/UIShellNavSubmenu.svelte       | 54 +++++++++++++++++++
 src/components/UIShell/index.js               |  3 ++
 src/index.js                                  |  8 ++-
 8 files changed, 127 insertions(+), 2 deletions(-)
 create mode 100644 src/components/UIShell/UIShellNav/UIShellNav.svelte
 create mode 100644 src/components/UIShell/UIShellNav/UIShellNavItem.svelte
 create mode 100644 src/components/UIShell/UIShellNav/UIShellNavSubmenu.svelte

diff --git a/src/components/UIShell/UIShell.Story.svelte b/src/components/UIShell/UIShell.Story.svelte
index 1faeb0a7..d57734fe 100644
--- a/src/components/UIShell/UIShell.Story.svelte
+++ b/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>
diff --git a/src/components/UIShell/UIShell.stories.js b/src/components/UIShell/UIShell.stories.js
index 7ffc13fc..1e485083 100644
--- a/src/components/UIShell/UIShell.stories.js
+++ b/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: {
diff --git a/src/components/UIShell/UIShell.svelte b/src/components/UIShell/UIShell.svelte
index b77a666f..94056266 100644
--- a/src/components/UIShell/UIShell.svelte
+++ b/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>
diff --git a/src/components/UIShell/UIShellNav/UIShellNav.svelte b/src/components/UIShell/UIShellNav/UIShellNav.svelte
new file mode 100644
index 00000000..1080216b
--- /dev/null
+++ b/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>
diff --git a/src/components/UIShell/UIShellNav/UIShellNavItem.svelte b/src/components/UIShell/UIShellNav/UIShellNavItem.svelte
new file mode 100644
index 00000000..611fbf0d
--- /dev/null
+++ b/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>
diff --git a/src/components/UIShell/UIShellNav/UIShellNavSubmenu.svelte b/src/components/UIShell/UIShellNav/UIShellNavSubmenu.svelte
new file mode 100644
index 00000000..b00da895
--- /dev/null
+++ b/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>
diff --git a/src/components/UIShell/index.js b/src/components/UIShell/index.js
index 5f1c33af..3d65b23b 100644
--- a/src/components/UIShell/index.js
+++ b/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';
diff --git a/src/index.js b/src/index.js
index 3a9f6424..5bf4bd4a 100644
--- a/src/index.js
+++ b/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
 };