rebase upstream

package.json

@@ -23,14 +23,14 @@
     "carbon-icons-svelte": "^10.8.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.4",
+    "@babel/core": "^7.8.0",
-    "@babel/preset-env": "^7.7.4",
+    "@babel/preset-env": "^7.8.0",
-    "@commitlint/cli": "^8.2.0",
+    "@commitlint/cli": "^8.3.4",
-    "@commitlint/config-conventional": "^8.2.0",
+    "@commitlint/config-conventional": "^8.3.4",
-    "@storybook/addon-knobs": "^5.2.6",
+    "@storybook/addon-knobs": "^5.3.1",
-    "@storybook/addon-storysource": "^5.2.6",
+    "@storybook/addon-storysource": "^5.3.1",
-    "@storybook/cli": "^5.2.6",
+    "@storybook/cli": "^5.3.1",
-    "@storybook/svelte": "^5.2.6",
+    "@storybook/svelte": "^5.3.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/svelte": "^1.11.0",
     "babel-jest": "^24.9.0",
@@ -46,12 +46,12 @@
     "prettier-plugin-svelte": "^0.7.0",
     "pretty-quick": "^2.0.1",
     "regenerator-runtime": "^0.13.3",
-    "rollup": "^1.27.13",
+    "rollup": "^1.29.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-svelte": "^5.1.1",
-    "rollup-plugin-terser": "^5.1.3",
+    "rollup-plugin-terser": "^5.2.0",
-    "svelte": "^3.16.4",
+    "svelte": "^3.16.7",
     "svelte-loader": "^2.13.6"
   },
   "contributors": [

src/components/UIShell/UIShell.Story.svelte

@@ -77,7 +77,7 @@
           class: undefined,
           skeleton: false,
           render: SettingsAdjust20,
-          title: 'settings',
+          title: 'Settings',
           tabIndex: 0,
           focusable: false,
           style: undefined
@@ -193,6 +193,55 @@
     }
   ];
 
+  const sideNavMenu = [
+    {
+      href: undefined,
+      text: 'Category 1',
+      subMenu: [
+        {
+          href: '#',
+          text: 'Sub-link 1'
+        },
+        {
+          href: '#',
+          text: 'Sub-link 2'
+        },
+        {
+          href: '#',
+          text: 'Sub-link 3'
+        }
+      ]
+    },
+    {
+      href: '#',
+      text: 'Link 2',
+      subMenu: undefined
+    },
+    {
+      href: '#',
+      text: 'Link 3',
+      subMenu: undefined
+    },
+    {
+      href: undefined,
+      text: 'Link 4',
+      subMenu: [
+        {
+          href: '#',
+          text: 'Sub-link 1'
+        },
+        {
+          href: '#',
+          text: 'Sub-link 2'
+        },
+        {
+          href: '#',
+          text: 'Sub-link 3'
+        }
+      ]
+    }
+  ];
+
   function searchInStore(event) {
     if (event.detail.action === leftPanelActions.search.actionString) {
       searchStore.search(event.detail.textInput);
@@ -204,6 +253,10 @@
   <UIShell {...$$props} {navMenu} />
 {:else if story === 'with-actions'}
   <UIShell {...$$props} {rightPanel} on:inputSearch={searchInStore} />
+{:else if story === 'with-actions-nav'}
+  <UIShell {...$$props} {navMenu} {rightPanel} on:inputSearch={searchInStore} />
+{:else if story === 'with-actions-sidenav'}
+  <UIShell {...$$props} {sideNavMenu} {rightPanel} on:inputSearch={searchInStore} />
 {:else}
   <UIShell {...$$props} />
 {/if}

src/components/UIShell/UIShell.stories.js

@@ -32,3 +32,23 @@ export const WithActions = () => ({
     platformName: text('Platform name', 'Platform Name')
   }
 });
+
+export const WithActionsAndNav = () => ({
+  Component,
+  props: {
+    story: 'with-actions-nav',
+    href: text('The link href (href)', '#'),
+    company: text('Company name', 'IBM'),
+    platformName: text('Platform name', 'Platform Name')
+  }
+});
+
+export const WithActionsAndSidenav = () => ({
+  Component,
+  props: {
+    story: 'with-actions-sidenav',
+    href: text('The link href (href)', '#'),
+    company: text('Company name', 'IBM'),
+    platformName: text('Platform name', 'Platform Name')
+  }
+});

src/components/UIShell/UIShell.svelte

@@ -5,16 +5,21 @@
   export let platformName = undefined;
   export let navMenu = undefined;
   export let rightPanel = undefined;
+  export let sideNavMenu = undefined;
 
   import { cx } from '../../lib';
   import UIShellNavWrapper from './UIShellNav/UIShellNavWrapper.svelte';
   import UIShellNavItem from './UIShellNav/UIShellNavItem.svelte';
   import UIShellRightPanel from './UIShellRightPanel/UIShellRightPanel.svelte';
+  import UIShellSideNavWrapper from './UIShellSideNav/UIShellSideNavWrapper.svelte';
+  import UIShellSideNavItem from './UIShellSideNav/UIShellSideNavItem.svelte';
+  import HamburgerMenu from './UIShellSideNav/HamburgerMenu.svelte';
 
   $: ariaLabel = company + (uiShellAriaLabel || $$props['aria-label'] || platformName);
 </script>
 
 <header aria-label={ariaLabel} class={cx('--header')} role="banner">
+  <HamburgerMenu />
   <a class={cx('--header__name')} {href}>
     <span class={cx('--header__name--prefix')}>{company}</span>
     &nbsp;{platformName}
@@ -29,4 +34,9 @@
   {#if rightPanel}
     <UIShellRightPanel {rightPanel} on:inputSearch />
   {/if}
+  {#if sideNavMenu}
+    <UIShellSideNavWrapper>
+      <UIShellSideNavItem />
+    </UIShellSideNavWrapper>
+  {/if}
 </header>

src/components/UIShell/UIShellRightPanel/ActionComponent.svelte

@@ -19,8 +19,13 @@
   <button
     aria-label={type}
     class={cx('--header__action', componentIsActive && '--header__action--active')}
-    type="button">
+    type="button"
-    <Icon {...icon} render={icon[0].render} />
+    on:keydown={({ key }) => {
+      if (key === 'Enter') {
+        componentIsActive = !componentIsActive;
+      }
+    }}>
+    <Icon {...icon[0]} render={icon[0].render} />
   </button>
   {#if componentIsActive}
     <div

src/components/UIShell/UIShellRightPanel/ActionLink.svelte

@@ -41,17 +41,18 @@
   }
 
   .subject-divider {
-    color: #c6c6c6;
+    color: #525252;
     padding-bottom: 4px;
     border-bottom: 1px solid #525252;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: rgb(82, 82, 82);
     margin: 32px 1rem 8px;
+  }
+
+  .subject-divider span {
     font-size: 0.75rem;
     font-weight: 400;
     line-height: 1rem;
     letter-spacing: 0.32px;
+    color: #c6c6c6;
   }
 </style>
 
@@ -61,14 +62,19 @@
     class={cx('--header__action', linkIsActive && '--header__action--active')}
     class:action-link={true}
     {href}>
-    <Icon {...icon} render={icon.render} />
+    <Icon {...icon} />
   </a>
 {:else}
   <button
     aria-label={type}
     class={cx('--header__action', linkIsActive && '--header__action--active')}
-    type="button">
+    type="button"
-    <Icon {...icon} render={icon.render} />
+    on:keydown={({ key }) => {
+      if (key === 'Enter') {
+        linkIsActive = !linkIsActive;
+      }
+    }}>
+    <Icon {...icon} />
   </button>
   {#if linkIsActive && type === leftPanelTypes.links}
     <div
@@ -77,7 +83,7 @@
       <ul class={cx('--switcher__item')}>
         {#each content as subject}
           {#if subject.subject}
-            <li class={cx('--switcher__item')} class:subject-divider={true}>
+            <li class="subject-divider">
               <span>{subject.subject}</span>
             </li>
           {/if}

src/components/UIShell/UIShellRightPanel/ActionSearch.svelte

@@ -145,8 +145,13 @@
     class:btn-search={true}
     class:btn-search-disabled={searchIsActive}
     on:click={() => dispatch('focusInputSearch')}
-    type="button">
+    type="button"
-    <Icon {...icon} render={icon.render} />
+    on:keydown={({ key }) => {
+      if (key === 'Enter') {
+        searchIsActive = !searchIsActive;
+      }
+    }}>
+    <Icon {...icon} />
   </button>
   <input
     bind:this={inputSearchField}
@@ -168,8 +173,13 @@
     class:btn-clear-hidden={!searchIsActive}
     type="button"
     aria-label="Clear search"
-    on:click={() => searchStore.clear()}>
+    on:click={() => searchStore.clear()}
-    <Icon {...closeIcon} render={closeIcon.render} />
+    on:keydown={({ key }) => {
+      if (key === 'Enter') {
+        searchIsActive = !searchIsActive;
+      }
+    }}>
+    <Icon {...closeIcon} />
   </button>
 </div>
 {#if showResults}

src/components/UIShell/UIShellSideNav/HamburgerMenu.svelte

@@ -0,0 +1,29 @@
+<script>
+  export let ariaLabel = undefined;
+
+  import { cx } from '../../../lib';
+  import Menu20 from 'carbon-icons-svelte/lib/Menu20';
+  import Icon from '../../Icon/Icon.svelte';
+  import { closeIcon } from '../constants';
+
+  let isOpen = false;
+
+  $: iconProps = !isOpen ? {
+      class: undefined,
+      skeleton: false,
+      render: Menu20,
+      title: 'Open Menu',
+      tabIndex: 0,
+      focusable: false,
+      style: undefined
+    } : closeIcon;
+</script>
+
+<button
+  aria-label={ariaLabel}
+  class={cx('--header__action', '--header__menu-trigger', '--header__menu-toggle')}
+  title="Open menu"
+  type="button"
+  on:click={() => isOpen = !isOpen}>
+  <Icon {...iconProps} />
+</button>

src/components/UIShell/UIShellSideNav/UIShellSideNavItem.svelte

@@ -0,0 +1,185 @@
+<li class="bx--side-nav__item bx--side-nav__item--icon">
+  <button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
+    <div class="bx--side-nav__icon">
+      <svg
+        width="16"
+        height="16"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 32 32"
+        aria-hidden="true">
+        <path
+          d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
+          .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
+          0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
+          .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+      </svg>
+    </div>
+    <span class="bx--side-nav__submenu-title">Category title</span>
+    <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
+      <svg
+        focusable="false"
+        preserveAspectRatio="xMidYMid meet"
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 32 32"
+        aria-hidden="true"
+        style="will-change: transform;">
+        <path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
+      </svg>
+    </div>
+  </button>
+  <ul class="bx--side-nav__menu" role="menu">
+    <li class="bx--side-nav__menu-item" role="none">
+      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
+        <span class="bx--side-nav__link-text">Link</span>
+      </a>
+    </li>
+    <li class="bx--side-nav__menu-item" role="none">
+      <a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
+        <span class="bx--side-nav__link-text">Link</span>
+      </a>
+    </li>
+    <li class="bx--side-nav__menu-item" role="none">
+      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
+        <span class="bx--side-nav__link-text">Link</span>
+      </a>
+    </li>
+  </ul>
+</li>
+<li class="bx--side-nav__item bx--side-nav__item--icon">
+  <button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
+    <div class="bx--side-nav__icon">
+      <svg
+        width="16"
+        height="16"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 32 32"
+        aria-hidden="true">
+        <path
+          d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
+          .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
+          0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
+          .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+      </svg>
+    </div>
+    <span class="bx--side-nav__submenu-title">Category title</span>
+    <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
+      <svg
+        focusable="false"
+        preserveAspectRatio="xMidYMid meet"
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 32 32"
+        aria-hidden="true"
+        style="will-change: transform;">
+        <path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
+      </svg>
+    </div>
+  </button>
+  <ul class="bx--side-nav__menu" role="menu">
+    <li class="bx--side-nav__menu-item" role="none">
+      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
+        <span class="bx--side-nav__link-text">Link</span>
+      </a>
+    </li>
+    <li class="bx--side-nav__menu-item" role="none">
+      <a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
+        <span class="bx--side-nav__link-text">Link</span>
+      </a>
+    </li>
+    <li class="bx--side-nav__menu-item" role="none">
+      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
+        <span class="bx--side-nav__link-text">Link</span>
+      </a>
+    </li>
+  </ul>
+</li>
+<li class="bx--side-nav__item bx--side-nav__item--icon">
+  <button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
+    <div class="bx--side-nav__icon">
+      <svg
+        width="16"
+        height="16"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 32 32"
+        aria-hidden="true">
+        <path
+          d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
+          .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
+          0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
+          .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+      </svg>
+    </div>
+    <span class="bx--side-nav__submenu-title">Category title</span>
+    <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
+      <svg
+        focusable="false"
+        preserveAspectRatio="xMidYMid meet"
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 32 32"
+        aria-hidden="true"
+        style="will-change: transform;">
+        <path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
+      </svg>
+    </div>
+  </button>
+  <ul class="bx--side-nav__menu" role="menu">
+    <li class="bx--side-nav__menu-item" role="none">
+      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
+        <span class="bx--side-nav__link-text">Link</span>
+      </a>
+    </li>
+    <li class="bx--side-nav__menu-item" role="none">
+      <a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
+        <span class="bx--side-nav__link-text">Link</span>
+      </a>
+    </li>
+    <li class="bx--side-nav__menu-item" role="none">
+      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
+        <span class="bx--side-nav__link-text">Link</span>
+      </a>
+    </li>
+  </ul>
+</li>
+<li class="bx--side-nav__item">
+  <a href="javascript:void(0)" class="bx--side-nav__link">
+    <div class="bx--side-nav__icon bx--side-nav__icon--small">
+      <svg
+        width="16"
+        height="16"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 32 32"
+        aria-hidden="true">
+        <path
+          d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
+          .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
+          0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
+          .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+      </svg>
+    </div>
+    <span class="bx--side-nav__link-text">Link</span>
+  </a>
+</li>
+<li class="bx--side-nav__item">
+  <a href="javascript:void(0)" class="bx--side-nav__link">
+    <div class="bx--side-nav__icon bx--side-nav__icon--small">
+      <svg
+        width="16"
+        height="16"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 32 32"
+        aria-hidden="true">
+        <path
+          d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
+          .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
+          0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
+          .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+      </svg>
+    </div>
+    <span class="bx--side-nav__link-text">Link</span>
+  </a>
+</li>

src/components/UIShell/UIShellSideNav/UIShellSideNavWrapper.svelte

@@ -0,0 +1,29 @@
+<script>
+  export let ariaLabel = undefined;
+
+  import { cx } from '../../../lib';
+</script>
+
+<nav class={cx('--side-nav__navigation', '--side-nav', '--side-nav--ux')} aria-label={ariaLabel}>
+  <ul class={cx('--side-nav__items')}>
+    <slot />
+  </ul>
+  <footer class="bx--side-nav__footer">
+    <button class="bx--side-nav__toggle" type="button" title="Open">
+      <div class="bx--side-nav__icon">
+        <svg
+          focusable="false"
+          preserveAspectRatio="xMidYMid meet"
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 32 32"
+          aria-hidden="true"
+          style="will-change: transform;">
+          <path d="M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z" />
+        </svg>
+      </div>
+      <span class="bx--assistive-text">Open</span>
+    </button>
+  </footer>
+</nav>