Merge pull request #201 from danielboven/add-text-to-header-action

Option to set text for HeaderAction component

src/components/UIShell/GlobalHeader/HeaderAction.svelte

@@ -2,6 +2,7 @@
   export let type = undefined;
   export let icon = undefined;
   export let isOpen = undefined;
+  export let text = undefined;
 
   let elRigthPanel = undefined;
 
@@ -18,17 +19,39 @@
   }
 </script>
 
+<style>
+    .action-text {
+        font-size: 16px;
+        line-height: 20px;
+        text-decoration: none;
+        color: #fff;
+        width: 100%;
+        padding: 0 1rem;
+    }
+
+    .action-text > span {
+        margin-left: 0.75rem;
+        vertical-align: top;
+    }
+</style>
+
 <svelte:window on:mouseup={mouseUp} />
 
 <div>
   <button
     aria-label={type}
     class={cx('--header__action', isOpen && '--header__action--active')}
+    class:action-text={text}
     type="button"
     on:click={() => {
       isOpen = true;
     }}>
     <Icon {...icon} />
+    <slot name="text">
+      {#if text}
+        <span>{text}</span>
+      {/if}
+    </slot>
   </button>
   {#if isOpen}
     <div
@@ -38,4 +61,4 @@
       <slot />
     </div>
   {/if}
-</div>
+</div>

src/components/UIShell/GlobalHeader/HeaderActionLink.svelte

@@ -29,4 +29,4 @@
   class:action-link={true}
   {href}>
   <Icon {...icon} />
-</a>
+</a>