feat(ui-shell): add HeaderGlobalAction component

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

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

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