Merge pull request #168 from mfeitoza/master

Refactor
2025-09-15 18:31:06 +00:00 · 2020-04-18 19:10:13 -07:00 · 2020-04-18 19:10:13 -07:00 · d91dfc73bb
commit d91dfc73bb
parent 1b7a9729de a3f9281498
7 changed files with 138 additions and 95 deletions
--- a/src/components/UIShell/GlobalHeader/Header.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;
--- 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;
      }
    }
  }
@ -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 />
--- 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>
--- 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,48 +109,77 @@
  };
 </script>

-{#if story === 'with-nav'}
-  <UIShell {...$$props}>
-    <HeaderNav>
-      <HeaderNavItem href="/" text="Link 1" />
-      <HeaderNavItem href="/" text="Link 2" />
-      <HeaderNavItem href="/" text="Link 3" />
-      <HeaderNavMenu text="Sub Menu">
-        <HeaderNavItem href="/" text="Link 1" />
-        <HeaderNavItem href="/" text="Link 2" />
-        <HeaderNavItem href="/" text="Link 3" />
-      </HeaderNavMenu>
-    </HeaderNav>
-  </UIShell>
-{:else if story === 'with-actions'}
-  <UIShell {...$$props}>
-    <HeaderUtilities>
-      <HeaderActionSearch />
-      <HeaderAction type="Settings" icon={iSettings}>
-        <p>Settings</p>
-      </HeaderAction>
-      <HeaderActionLink type="Help" icon={iHelp} />
-      <HeaderAction type="Notifications" icon={iNotifications}>
-        <p>Notifications</p>
-      </HeaderAction>
-      <HeaderActionLink type="Account" icon={iAccount} />
-      <HeaderAction type="Switcher" icon={iSwitcher}>
-        <HeaderPanelLinks>
-          <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
-          <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
-          <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
-          <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
-          <HeaderPanelLink>Switcher item 2</HeaderPanelLink>
-          <HeaderPanelLink>Switcher item 3</HeaderPanelLink>
-          <HeaderPanelLink>Switcher item 4</HeaderPanelLink>
-          <HeaderPanelLink>Switcher item 5</HeaderPanelLink>
-        </HeaderPanelLinks>
-      </HeaderAction>
-    </HeaderUtilities>
-  </UIShell>
-{:else if story === 'with-sidenav'}
-  <UIShell bind:isSideNavOpen {...$$props}>
-    <SideNav isOpen={isSideNavOpen}>
+{#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>
+      <HeaderNavItem href="/" text="Link 1" />
+      <HeaderNavItem href="/" text="Link 2" />
+      <HeaderNavItem href="/" text="Link 3" />
+      <HeaderNavMenu text="Sub Menu">
+        <HeaderNavItem href="/" text="Link 1" />
+        <HeaderNavItem href="/" text="Link 2" />
+        <HeaderNavItem href="/" text="Link 3" />
+      </HeaderNavMenu>
+    </HeaderNav>
+  </Header>
+{:else if story === 'header-with-utilities'}
+  <Header {...$$props}>
+    <HeaderUtilities>
+      <HeaderActionSearch />
+      <HeaderAction type="Settings" icon={iSettings}>
+        <HeaderPanelLinks>
+          <HeaderPanelDivider>Settings</HeaderPanelDivider>
+        </HeaderPanelLinks>
+      </HeaderAction>
+      <HeaderActionLink type="Help" icon={iHelp} />
+      <HeaderAction type="Notifications" icon={iNotifications} isOpen={true}>
+        <HeaderPanelLinks>
+          <HeaderPanelDivider>Notifications</HeaderPanelDivider>
+        </HeaderPanelLinks>
+      </HeaderAction>
+      <HeaderActionLink type="Account" icon={iAccount} />
+    </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>
+          <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
+          <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+          <HeaderPanelLink>Switcher item 2</HeaderPanelLink>
+          <HeaderPanelLink>Switcher item 3</HeaderPanelLink>
+          <HeaderPanelLink>Switcher item 4</HeaderPanelLink>
+          <HeaderPanelLink>Switcher item 5</HeaderPanelLink>
+        </HeaderPanelLinks>
+      </HeaderAction>
+    </HeaderUtilities>
+  </Header>
+{:else if story === 'header-and-sidenav'}
+  <Header bind:isSideNavOpen {...$$props} />
+  <SideNav bind:isOpen={isSideNavOpen}>
    <SideNavItems>
      <SideNavMenu text="Menu 01" icon={iCatalog}>
        <SideNavMenuItem text="Sub 01" href="/" />
@ -167,7 +196,4 @@
      <SideNavLink text="Menu 03" href="/" icon={iProtection} />
    </SideNavItems>
  </SideNav>
-  </UIShell>
-{:else}
-  <UIShell {...$$props} />
 {/if}
--- a/src/components/UIShell/UIShell.stories.js
+++ b/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')
--- a/src/components/UIShell/index.js
+++ b/src/components/UIShell/index.js
@ -1,19 +1,16 @@
-import UIShell from './UIShell.svelte';
-
-export default UIShell;
-
+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 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';
--- a/src/index.js
+++ b/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,
-  HeaderNav,
-  HeaderNavItem,
-  HeaderNavMenu,
-  HeaderUtilities,
-  HeaderAction,
-  HeaderActionLink,
-  HeaderActionSearch,
-  HeaderPanelDivider,
-  HeaderPanelLinks,
-  HeaderPanelLink
+  SideNavMenuItem
 } 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
 };