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] 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