first commit on the UIShell

src/components/UIShell/UIShellRightPanel/ActionComponent.svelte

@@ -0,0 +1,13 @@
+<script>
+  // export let action = undefined;
+  // export let type = undefined;
+  export let icon = undefined;
+  // export let content = undefined;
+
+  import { cx } from '../../../lib';
+  import Icon from '../../Icon/Icon.svelte';
+</script>
+
+<button aria-label="Notifications" class={cx('--header__action')} type="button">
+  <Icon {...icon} render={icon[0].render} />
+</button>

src/components/UIShell/UIShellRightPanel/ActionLink.svelte

@@ -0,0 +1,38 @@
+<script>
+  export let action = undefined;
+  // export let type = undefined;
+  // export let icon = undefined;
+  // export let content = undefined;
+
+  // import { onMount } from 'svelte';
+  import { cx } from '../../../lib';
+  import AppSwitcher20 from 'carbon-icons-svelte/lib/AppSwitcher20';
+  import Icon from '../../Icon/Icon.svelte';
+
+  console.log(action);
+
+  $: switcherIconProps =
+    action === 'switcher'
+      ? (switcherIconProps = [
+          {
+            class: undefined,
+            skeleton: false,
+            render: AppSwitcher20,
+            title: 'Switcher',
+            tabIndex: 0,
+            focusable: false,
+            style: undefined
+          }
+        ])
+      : (switcherIconProps = []);
+</script>
+
+{#if action === 'switcher'}
+  <button aria-label="Notifications" class={cx('--header__action')} type="button">
+    <Icon {...switcherIconProps} render={switcherIconProps[0].render} />
+  </button>
+{:else}
+  <!-- <button aria-label="Notifications" class={cx('--header__action')} type="button">
+    <Icon {...icon} render={icon[0].render} />
+  </button> -->
+{/if}

src/components/UIShell/UIShellRightPanel/ActionSearch.svelte

@@ -0,0 +1,36 @@
+<script>
+  export let action = undefined;
+  // export let type = undefined;
+  export let icon = undefined;
+  // export let content = undefined;
+
+  // import { onMount } from 'svelte';
+  import { cx } from '../../../lib';
+  import Search20 from 'carbon-icons-svelte/lib/Search20';
+  import Icon from '../../Icon/Icon.svelte';
+
+  $: searchIconProps =
+    action === 'search'
+      ? (searchIconProps = [
+          {
+            class: undefined,
+            skeleton: false,
+            render: Search20,
+            title: 'Search',
+            tabIndex: 0,
+            focusable: false,
+            style: undefined
+          }
+        ])
+      : (searchIconProps = []);
+</script>
+
+{#if action === 'search'}
+  <button aria-label="Notifications" class={cx('--header__action')} type="button">
+    <Icon {...searchIconProps} render={searchIconProps[0].render} />
+  </button>
+{:else}
+  <button aria-label="Notifications" class={cx('--header__action')} type="button">
+    <Icon {...icon} render={icon[0].render} />
+  </button>
+{/if}

src/components/UIShell/UIShellRightPanel/UIShellRightPanel.svelte

@@ -0,0 +1,51 @@
+<script>
+  export let rightPanel = undefined;
+
+  import { onMount } from 'svelte';
+  import { cx } from '../../../lib';
+  import ActionSearch from './ActionSearch.svelte';
+  import ActionComponent from './ActionComponent.svelte';
+  import ActionLink from './ActionLink.svelte';
+
+  // let switcherAtLast = [];
+  // let renderSwitcher = false;
+
+  $: switcherAtLast = rightPanel.map((item, index, array) => {
+    if (item.action === 'switcher') {
+      if (index !== rightPanel.length) {
+        const newItem = array[index];
+        return newItem;
+      }
+    } else {
+      return undefined;
+    }
+  });
+
+  $: renderSwitcher = switcherAtLast ? true : false;
+
+  onMount(()=>{
+    console.log(switcherAtLast);
+    console.log(renderSwitcher);
+  })
+</script>
+
+<div class={cx('--header__global')}>
+  {#each rightPanel as action, index}
+    {#if action.action === 'search'}
+      <ActionSearch {...action} />
+    {:else if action.action === 'switcher'}
+      {#if index === rightPanel.length}
+        <ActionLink {...action} />
+      {/if}
+    {:else if action.type === 'search'}
+      <ActionSearch {...action} />
+    {:else if action.type === 'component'}
+      <ActionComponent {...action} />
+    {:else if action.type === 'link'}
+      <ActionLink {...action} />
+    {/if}
+  {/each}
+  {#if renderSwitcher}
+    <ActionLink {...switcherAtLast} />
+  {/if}
+</div>