Updated HeaderAction component with slot & scoped styling

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

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 } from '../../../lib';
-  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;
@@ -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>

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

src/lib/optional.js

@@ -1,3 +0,0 @@
-const optional = x => x || '';
-
-export { optional };