From 7b3c111b5fd72bf14f98718a75857b2e0533e11a Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 5 Sep 2020 15:28:10 -0700
Subject: [PATCH] feat(ui-shell): add HeaderGlobalAction component

---
 COMPONENT_INDEX.md                    | 33 ++++++++++++++++++++++++++-
 src/UIShell/HeaderGlobalAction.svelte | 33 +++++++++++++++++++++++++++
 src/UIShell/UIShell.Story.svelte      | 10 ++++++++
 src/UIShell/UIShell.stories.js        | 10 ++++++++
 src/UIShell/index.js                  |  1 +
 src/index.js                          |  1 +
 types/index.d.ts                      | 23 +++++++++++++++++++
 7 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 src/UIShell/HeaderGlobalAction.svelte

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index dbd3c295..8aaef320 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1,6 +1,6 @@
 # Component Index
 
-> 143 components exported from carbon-components-svelte 0.10.0
+> 144 components exported from carbon-components-svelte 0.10.0
 
 - Accordion
   - [AccordionSkeleton](#accordionskeleton)
@@ -171,6 +171,7 @@
   - [HeaderPanelLink](#headerpanellink)
   - [HeaderPanelLinks](#headerpanellinks)
   - [HeaderUtilities](#headerutilities)
+  - [HeaderGlobalAction](#headerglobalaction)
   - [SideNav](#sidenav)
   - [SideNavItems](#sidenavitems)
   - [SideNavLink](#sidenavlink)
@@ -1693,6 +1694,36 @@ No forwarded events.
 
 ---
 
+## HeaderGlobalAction
+
+### Import path
+
+```js
+import { HeaderGlobalAction } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type                                                                | Default value |
+| :-------- | :------------------------------------------------------------------ | :------------ |
+| isActive  | <code>boolean</code>                                                | false         |
+| icon      | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | --            |
+| ref       | <code>null &#124; HTMLButtonElement</code>                          | null          |
+
+### Slots
+
+- `<slot>...</slot>`
+
+### Forwarded events
+
+- `on:click`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
 ## HeaderNav
 
 ### Import path
diff --git a/src/UIShell/HeaderGlobalAction.svelte b/src/UIShell/HeaderGlobalAction.svelte
new file mode 100644
index 00000000..de33515f
--- /dev/null
+++ b/src/UIShell/HeaderGlobalAction.svelte
@@ -0,0 +1,33 @@
+<script>
+  /**
+   * Set to `true` to use the active variant
+   * @type {boolean} [isActive=false]
+   */
+  export let isActive = false;
+
+  /**
+   * Specify the icon to render
+   * @type {typeof import("carbon-icons-svelte/lib/Add16").default} [icon]
+   */
+  export let icon = undefined;
+
+  /**
+   * Obtain a reference to the HTML button element
+   * @type {null | HTMLButtonElement} [ref=null]
+   */
+  export let ref = null;
+</script>
+
+<button
+  type="button"
+  ref="{ref}"
+  class:bx--header__action="{true}"
+  class:bx--header__action--active="{isActive}"
+  {...$$restProps}
+  on:click>
+  <slot>
+    {#if icon}
+      <svelte:component this="{icon}" />
+    {/if}
+  </slot>
+</button>
diff --git a/src/UIShell/UIShell.Story.svelte b/src/UIShell/UIShell.Story.svelte
index bd08b321..f5837b03 100644
--- a/src/UIShell/UIShell.Story.svelte
+++ b/src/UIShell/UIShell.Story.svelte
@@ -27,6 +27,7 @@
   import HeaderPanelLinks from "./GlobalHeader/HeaderPanelLinks.svelte";
   import Content from "./Content.svelte";
   import SkipToContent from "./SkipToContent.svelte";
+  import HeaderGlobalAction from "./HeaderGlobalAction.svelte";
 
   let isSideNavOpen = undefined;
 
@@ -188,6 +189,15 @@
       <HeaderActionLink type="Account" icon="{iAccount}" />
     </HeaderUtilities>
   </Header>
+{:else if story === 'header-global-action'}
+  <Header {...$$props}>
+    <HeaderUtilities>
+      <HeaderGlobalAction isActive>
+        <AppSwitcher20 />
+      </HeaderGlobalAction>
+      <HeaderGlobalAction icon="{AppSwitcher20}" />
+    </HeaderUtilities>
+  </Header>
 {:else if story === 'header-with-switcher'}
   <Header {...$$props}>
     <HeaderUtilities>
diff --git a/src/UIShell/UIShell.stories.js b/src/UIShell/UIShell.stories.js
index d0ccb366..68d34463 100644
--- a/src/UIShell/UIShell.stories.js
+++ b/src/UIShell/UIShell.stories.js
@@ -43,6 +43,16 @@ export const HeaderWithUtilities = () => ({
   },
 });
 
+export const HeaderGlobalAction = () => ({
+  Component,
+  props: {
+    story: "header-global-action",
+    href: text("The link href (href)", "#"),
+    company: text("Company name", "IBM"),
+    platformName: text("Platform name", "Platform Name"),
+  },
+});
+
 export const HeaderWithSwitcher = () => ({
   Component,
   props: {
diff --git a/src/UIShell/index.js b/src/UIShell/index.js
index 43757853..c4f78b8e 100644
--- a/src/UIShell/index.js
+++ b/src/UIShell/index.js
@@ -16,3 +16,4 @@ export { default as SideNavMenu } from "./SideNav/SideNavMenu.svelte";
 export { default as SideNavMenuItem } from "./SideNav/SideNavMenuItem.svelte";
 export { default as Content } from "./Content.svelte";
 export { default as SkipToContent } from "./SkipToContent.svelte";
+export { default as HeaderGlobalAction } from "./HeaderGlobalAction.svelte";
diff --git a/src/index.js b/src/index.js
index 6ccef095..3f28bb8c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -124,5 +124,6 @@ export {
   SideNavMenuItem,
   Content,
   SkipToContent,
+  HeaderGlobalAction,
 } from "./UIShell";
 export { UnorderedList } from "./UnorderedList";
diff --git a/types/index.d.ts b/types/index.d.ts
index 203e4bc5..0b612476 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1591,6 +1591,29 @@ export class HeaderActionSearch extends CarbonSvelteComponent {
   };
 }
 
+export class HeaderGlobalAction extends CarbonSvelteComponent {
+  $$prop_def: {
+    /**
+     * Set to `true` to use the active variant
+     * @default false
+     */
+    isActive?: boolean;
+
+    /**
+     * Specify the icon to render
+     */
+    icon?: typeof import("carbon-icons-svelte/lib/Add16").default;
+
+    /**
+     * Obtain a reference to the HTML button element
+     * @default null
+     */
+    ref?: null | HTMLButtonElement;
+  };
+
+  $$slot_def: { default: {} };
+}
+
 export class HeaderNav extends CarbonSvelteComponent {
   $$prop_def: {
     /**