From d356f8d609b4d5406c78802c8d43d1c45f479f1c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 26 Oct 2020 11:00:34 +0000
Subject: [PATCH] Add new common components for dropdown styles

---
 .../common/Dropdowns/DropdownContainer.svelte | 13 +++++
 .../common/Dropdowns/DropdownItem.svelte      | 57 +++++++++++++++++++
 .../src/components/common/Dropdowns/index.js  |  2 +
 3 files changed, 72 insertions(+)
 create mode 100644 packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte
 create mode 100644 packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
 create mode 100644 packages/builder/src/components/common/Dropdowns/index.js

diff --git a/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte b/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte
new file mode 100644
index 0000000000..f3cea99d7b
--- /dev/null
+++ b/packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte
@@ -0,0 +1,13 @@
+<div class="dropdown-container">
+  <slot />
+</div>
+
+<style>
+  .dropdown-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: var(--spacing-s) 0;
+  }
+</style>
diff --git a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
new file mode 100644
index 0000000000..a94cc66e12
--- /dev/null
+++ b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
@@ -0,0 +1,57 @@
+<script>
+  export let icon
+  export let title
+  export let subtitle
+</script>
+
+<div class="dropdown-item" on:click>
+  {#if icon}<i class={icon} />{/if}
+  <div class="content">
+    <div class="title">{title}</div>
+    {#if subtitle}
+      <div class="subtitle">{subtitle}</div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .dropdown-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+    padding: var(--spacing-s) var(--spacing-l);
+  }
+  .dropdown-item:hover {
+    background-color: var(--grey-2);
+    cursor: pointer;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .title,
+  .subtitle {
+    font-size: var(--font-size-xs);
+  }
+
+  .title {
+    font-weight: 500;
+    color: var(--ink);
+  }
+
+  .subtitle {
+    color: var(--grey-7);
+    font-weight: 400;
+  }
+
+  i {
+    font-size: 16px;
+    color: var(--ink);
+  }
+</style>
diff --git a/packages/builder/src/components/common/Dropdowns/index.js b/packages/builder/src/components/common/Dropdowns/index.js
new file mode 100644
index 0000000000..a95e303ec7
--- /dev/null
+++ b/packages/builder/src/components/common/Dropdowns/index.js
@@ -0,0 +1,2 @@
+export { default as DropdownContainer } from "./DropdownContainer.svelte"
+export { default as DropdownItem } from "./DropdownItem.svelte"