From 44189c88196ed0abb25d29a9422c08432c9d5600 Mon Sep 17 00:00:00 2001
From: Marcus Feitoza <marcus.feitoza.filho@gmail.com>
Date: Thu, 16 Apr 2020 15:56:52 -0300
Subject: [PATCH] feat(uishell): add right panel links

---
 .../UIShell/GlobalHeader/HeaderAction.svelte  | 10 +--------
 .../GlobalHeader/HeaderPanelDivider.svelte    | 21 +++++++++++++++++++
 .../GlobalHeader/HeaderPanelLink.svelte       | 11 ++++++++++
 .../GlobalHeader/HeaderPanelLinks.svelte      |  7 +++++++
 src/components/UIShell/index.js               |  3 +++
 5 files changed, 43 insertions(+), 9 deletions(-)
 create mode 100644 src/components/UIShell/GlobalHeader/HeaderPanelDivider.svelte
 create mode 100644 src/components/UIShell/GlobalHeader/HeaderPanelLink.svelte
 create mode 100644 src/components/UIShell/GlobalHeader/HeaderPanelLinks.svelte

diff --git a/src/components/UIShell/GlobalHeader/HeaderAction.svelte b/src/components/UIShell/GlobalHeader/HeaderAction.svelte
index 84ae042e..737f0c08 100644
--- a/src/components/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/src/components/UIShell/GlobalHeader/HeaderAction.svelte
@@ -18,12 +18,6 @@
   }
 </script>
 
-<style>
-  .component-form {
-    margin: 1rem;
-  }
-</style>
-
 <svelte:window on:mouseup={mouseUp} />
 
 <div id="right-panel-action-component">
@@ -42,9 +36,7 @@
       id="right-panel-action-component-form"
       class={cx('--header-panel', '--header-panel--expanded')}
       transition:slide={{ duration: 200 }}>
-      <div class="component-form">
-        <slot />
-      </div>
+      <slot />
     </div>
   {/if}
 </div>
diff --git a/src/components/UIShell/GlobalHeader/HeaderPanelDivider.svelte b/src/components/UIShell/GlobalHeader/HeaderPanelDivider.svelte
new file mode 100644
index 00000000..52a550c1
--- /dev/null
+++ b/src/components/UIShell/GlobalHeader/HeaderPanelDivider.svelte
@@ -0,0 +1,21 @@
+<style>
+  .subject-divider {
+    color: #525252;
+    padding-bottom: 4px;
+    border-bottom: 1px solid #525252;
+    margin: 32px 1rem 8px;
+  }
+  .subject-divider span {
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1rem;
+    letter-spacing: 0.32px;
+    color: #c6c6c6;
+  }
+</style>
+
+<li class="subject-divider">
+  <span>
+    <slot />
+  </span>
+</li>
diff --git a/src/components/UIShell/GlobalHeader/HeaderPanelLink.svelte b/src/components/UIShell/GlobalHeader/HeaderPanelLink.svelte
new file mode 100644
index 00000000..5a13846b
--- /dev/null
+++ b/src/components/UIShell/GlobalHeader/HeaderPanelLink.svelte
@@ -0,0 +1,11 @@
+<script>
+  export let href;
+
+  import { cx } from '../../../lib';
+</script>
+
+<li class={cx('--switcher__item')}>
+  <a class={cx('--switcher__item-link')} {href}>
+    <slot />
+  </a>
+</li>
diff --git a/src/components/UIShell/GlobalHeader/HeaderPanelLinks.svelte b/src/components/UIShell/GlobalHeader/HeaderPanelLinks.svelte
new file mode 100644
index 00000000..1da043a0
--- /dev/null
+++ b/src/components/UIShell/GlobalHeader/HeaderPanelLinks.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { cx } from '../../../lib';
+</script>
+
+<ul class={cx('--switcher__item')}>
+  <slot />
+</ul>
diff --git a/src/components/UIShell/index.js b/src/components/UIShell/index.js
index 5764b907..4288779a 100644
--- a/src/components/UIShell/index.js
+++ b/src/components/UIShell/index.js
@@ -14,3 +14,6 @@ export { default as HeaderUtilities } from './GlobalHeader/HeaderUtilities.svelt
 export { default as HeaderAction } from './GlobalHeader/HeaderAction.svelte';
 export { default as HeaderActionLink } from './GlobalHeader/HeaderActionLink.svelte';
 export { default as HeaderActionSearch } from './GlobalHeader/HeaderActionSearch.svelte';
+export { default as HeaderPanelDivider } from './GlobalHeader/HeaderPanelDivider.svelte';
+export { default as HeaderPanelLink } from './GlobalHeader/HeaderPanelLink.svelte';
+export { default as HeaderPanelLinks } from './GlobalHeader/HeaderPanelLinks.svelte';