feat(ui-shell): add HeaderGlobalAction component

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>

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>

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: {

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";

src/index.js

@@ -124,5 +124,6 @@ export {
   SideNavMenuItem,
   Content,
   SkipToContent,
+  HeaderGlobalAction,
 } from "./UIShell";
 export { UnorderedList } from "./UnorderedList";