From 7f1a769889cf436be360ff5f4d411d2846bf327f Mon Sep 17 00:00:00 2001
From: Daniel Boven <daanboven@outlook.com>
Date: Thu, 16 Jul 2020 11:51:43 +0200
Subject: [PATCH 1/3] Added option to set text for HeaderAction(Link) component

---
 .../UIShell/GlobalHeader/HeaderAction.svelte       |  8 +++++---
 .../UIShell/GlobalHeader/HeaderActionLink.svelte   | 14 ++++----------
 src/lib/index.js                                   |  1 +
 src/lib/optional.js                                |  3 +++
 4 files changed, 13 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/optional.js

diff --git a/src/components/UIShell/GlobalHeader/HeaderAction.svelte b/src/components/UIShell/GlobalHeader/HeaderAction.svelte
index b20e513a..af1d313a 100644
--- a/src/components/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/src/components/UIShell/GlobalHeader/HeaderAction.svelte
@@ -2,10 +2,11 @@
   export let type = undefined;
   export let icon = undefined;
   export let isOpen = undefined;
+  export let text = undefined;
 
   let elRigthPanel = undefined;
 
-  import { cx } from '../../../lib';
+  import { cx, optional } from '../../../lib';
   import Icon from '../../Icon/Icon.svelte';
   import { slide } from 'svelte/transition';
 
@@ -23,12 +24,13 @@
 <div>
   <button
     aria-label={type}
-    class={cx('--header__action', isOpen && '--header__action--active')}
+    class={cx('--header__action', isOpen && '--header__action--active', text && '--header__action--text')}
     type="button"
     on:click={() => {
       isOpen = true;
     }}>
     <Icon {...icon} />
+    {optional(text)}
   </button>
   {#if isOpen}
     <div
@@ -38,4 +40,4 @@
       <slot />
     </div>
   {/if}
-</div>
+</div>
\ No newline at end of file
diff --git a/src/components/UIShell/GlobalHeader/HeaderActionLink.svelte b/src/components/UIShell/GlobalHeader/HeaderActionLink.svelte
index 230dee30..7cc90ca6 100644
--- a/src/components/UIShell/GlobalHeader/HeaderActionLink.svelte
+++ b/src/components/UIShell/GlobalHeader/HeaderActionLink.svelte
@@ -3,18 +3,12 @@
   export let type = undefined;
   export let icon = undefined;
   export let linkIsActive = undefined;
-  import { cx } from '../../../lib';
+  export let text = undefined;
+  import { cx, optional } from '../../../lib';
   import Icon from '../../Icon/Icon.svelte';
 </script>
 
 <style>
-  .action-link {
-    text-align: center;
-    align-items: center;
-    vertical-align: middle;
-    justify-content: center;
-    padding-top: 10px;
-  }
   .subject-divider {
     color: #525252;
     padding-bottom: 4px;
@@ -25,8 +19,8 @@
 
 <a
   aria-label={type}
-  class={cx('--header__action', linkIsActive && '--header__action--active')}
-  class:action-link={true}
+  class={cx('--header__action', linkIsActive && '--header__action--active', text && '--header__action--text')}
   {href}>
   <Icon {...icon} />
+  {optional(text)}
 </a>
diff --git a/src/lib/index.js b/src/lib/index.js
index ef3d0b74..b5036e45 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1,3 +1,4 @@
 export { cx } from './cx';
 export { css } from './css';
 export { fillArray } from './fill-array';
+export { optional } from './optional';
diff --git a/src/lib/optional.js b/src/lib/optional.js
new file mode 100644
index 00000000..e5eee638
--- /dev/null
+++ b/src/lib/optional.js
@@ -0,0 +1,3 @@
+const optional = x => x || '';
+
+export { optional };
\ No newline at end of file

From f7714c721be2a9c99a42878e5c04c2d144541c6d Mon Sep 17 00:00:00 2001
From: Daniel Boven <daanboven@outlook.com>
Date: Sat, 18 Jul 2020 13:54:58 +0200
Subject: [PATCH 2/3] Updated HeaderAction component with slot & scoped styling

---
 .../UIShell/GlobalHeader/HeaderAction.svelte  | 25 +++++++++++++++++--
 .../GlobalHeader/HeaderActionLink.svelte      | 16 ++++++++----
 src/lib/index.js                              |  1 -
 src/lib/optional.js                           |  3 ---
 4 files changed, 34 insertions(+), 11 deletions(-)
 delete mode 100644 src/lib/optional.js

diff --git a/src/components/UIShell/GlobalHeader/HeaderAction.svelte b/src/components/UIShell/GlobalHeader/HeaderAction.svelte
index af1d313a..30493bbd 100644
--- a/src/components/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/src/components/UIShell/GlobalHeader/HeaderAction.svelte
@@ -19,18 +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', text && '--header__action--text')}
+    class={cx('--header__action', isOpen && '--header__action--active')}
+    class:action-text={text}
     type="button"
     on:click={() => {
       isOpen = true;
     }}>
     <Icon {...icon} />
-    {optional(text)}
+    <slot name="custom-el">
+      {#if text}
+        <span>{text}</span>
+      {/if}
+    </slot>
   </button>
   {#if isOpen}
     <div
diff --git a/src/components/UIShell/GlobalHeader/HeaderActionLink.svelte b/src/components/UIShell/GlobalHeader/HeaderActionLink.svelte
index 7cc90ca6..40c4a473 100644
--- a/src/components/UIShell/GlobalHeader/HeaderActionLink.svelte
+++ b/src/components/UIShell/GlobalHeader/HeaderActionLink.svelte
@@ -3,12 +3,18 @@
   export let type = undefined;
   export let icon = undefined;
   export let linkIsActive = undefined;
-  export let text = undefined;
-  import { cx, optional } from '../../../lib';
+  import { cx } from '../../../lib';
   import Icon from '../../Icon/Icon.svelte';
 </script>
 
 <style>
+  .action-link {
+    text-align: center;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    padding-top: 10px;
+  }
   .subject-divider {
     color: #525252;
     padding-bottom: 4px;
@@ -19,8 +25,8 @@
 
 <a
   aria-label={type}
-  class={cx('--header__action', linkIsActive && '--header__action--active', text && '--header__action--text')}
+  class={cx('--header__action', linkIsActive && '--header__action--active')}
+  class:action-link={true}
   {href}>
   <Icon {...icon} />
-  {optional(text)}
-</a>
+</a>
\ No newline at end of file
diff --git a/src/lib/index.js b/src/lib/index.js
index b5036e45..ef3d0b74 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1,4 +1,3 @@
 export { cx } from './cx';
 export { css } from './css';
 export { fillArray } from './fill-array';
-export { optional } from './optional';
diff --git a/src/lib/optional.js b/src/lib/optional.js
deleted file mode 100644
index e5eee638..00000000
--- a/src/lib/optional.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const optional = x => x || '';
-
-export { optional };
\ No newline at end of file

From b1e0228421ddd732956e75ca0058f0d67f29c124 Mon Sep 17 00:00:00 2001
From: Daniel Boven <daanboven@outlook.com>
Date: Sun, 19 Jul 2020 10:46:23 +0200
Subject: [PATCH 3/3] Removed 'optional' import & changed slot name

---
 src/components/UIShell/GlobalHeader/HeaderAction.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/UIShell/GlobalHeader/HeaderAction.svelte b/src/components/UIShell/GlobalHeader/HeaderAction.svelte
index 30493bbd..5aa42515 100644
--- a/src/components/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/src/components/UIShell/GlobalHeader/HeaderAction.svelte
@@ -6,7 +6,7 @@
 
   let elRigthPanel = undefined;
 
-  import { cx, optional } from '../../../lib';
+  import { cx } from '../../../lib';
   import Icon from '../../Icon/Icon.svelte';
   import { slide } from 'svelte/transition';
 
@@ -47,7 +47,7 @@
       isOpen = true;
     }}>
     <Icon {...icon} />
-    <slot name="custom-el">
+    <slot name="text">
       {#if text}
         <span>{text}</span>
       {/if}