From b43e0e654760ead809e06d2fe7cb3d86005b77f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 9 Apr 2021 13:38:48 +0200
Subject: [PATCH] adds an ActionButton component to bbui

---
 package.json                                  |  1 +
 packages/bbui/src/Button/ActionButton.svelte  | 67 +++++++++++++++++++
 packages/bbui/src/Button/Button.svelte        |  2 -
 .../bbui/src/DatePicker/DatePicker.svelte     |  2 +-
 packages/bbui/src/Drawer/Drawer.svelte        |  4 +-
 yarn.lock                                     |  5 ++
 6 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 packages/bbui/src/Button/ActionButton.svelte

diff --git a/package.json b/package.json
index 7429805b11..381f1c69bc 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "build:docker:staging": "cd hosting/scripts/linux/ && ./release-to-docker-hub.sh staging && cd -"
   },
   "dependencies": {
+    "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/toast": "^3.0.1"
   }
 }
diff --git a/packages/bbui/src/Button/ActionButton.svelte b/packages/bbui/src/Button/ActionButton.svelte
new file mode 100644
index 0000000000..b68d7f72bf
--- /dev/null
+++ b/packages/bbui/src/Button/ActionButton.svelte
@@ -0,0 +1,67 @@
+<script>
+    import "@spectrum-css/actionbutton/dist/index-vars.css"
+    import { createEventDispatcher } from "svelte"
+    const dispatch = createEventDispatcher()
+
+    export let disabled = false
+  
+    /** @type {('S', 'M', 'L', 'XL')} Size of button */
+    export let size = "M";
+    /** @type {('cta','primary','secondary','warning', 'overBackground')} Type of button */
+    export let type = "primary"
+  
+    export let quiet = false;
+
+    export let selected = false;
+
+    export let longPressable = false;
+    
+    export let icon = '';
+
+    function longPress(element) {
+        if (!longPressable) return
+        let timer
+
+        const listener = () => {
+            timer = setTimeout(() => {
+                dispatch('longpress')
+            }, 700)
+        }
+
+        element.addEventListener('pointerdown', listener)
+
+        return {
+            destroy() {
+                clearTimeout(timer)
+                element.removeEventListener('pointerdown', longPress)
+            }
+        }
+    }
+</script>
+  
+
+<button 
+    use:longPress
+    class="spectrum-ActionButton spectrum-ActionButton--size{size.toUpperCase()} spectrum-ActionButton--{type} {quiet && 'spectrum-ActionButton--quiet'}"
+    {disabled}
+    on:longPress
+    on:click|preventDefault>
+    {#if longPressable}
+        <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
+        </svg>
+    {/if}
+    {#if icon}
+        <svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
+            <use xlink:href="#spectrum-icon-18-{icon}" />
+        </svg>
+    {/if}
+    {#if $$slots} 
+        <span class="spectrum-ActionButton-label"><slot /></span>
+    {/if}
+</button>
+  
+  <style>
+  
+  </style>
+  
\ No newline at end of file
diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index 80cd5aff19..1d84bfc3e6 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -1,8 +1,6 @@
 <script>
   import "@spectrum-css/button/dist/index-vars.css"
 
-
-
   export let href = false
   export let disabled = false
 
diff --git a/packages/bbui/src/DatePicker/DatePicker.svelte b/packages/bbui/src/DatePicker/DatePicker.svelte
index 2f87a48a43..d6f6a00753 100644
--- a/packages/bbui/src/DatePicker/DatePicker.svelte
+++ b/packages/bbui/src/DatePicker/DatePicker.svelte
@@ -1,6 +1,6 @@
 <script>
   import Flatpickr from "svelte-flatpickr"
-  import { Label, Input } from "../"
+  import { Label } from "../"
   import "flatpickr/dist/flatpickr.css"
 
   const PICKER_OPTIONS = {
diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 2f0cc1b4f3..071509f555 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -1,7 +1,7 @@
 <script>
   import { slide } from "svelte/transition"
   import Portal from "svelte-portal"
-  import clickOutside from "../Actions/click_outside"
+  import ActionButton from '../Button/ActionButton.svelte'
 
   export let title
 
@@ -40,7 +40,7 @@
         </div>
         <div class="controls">
           <slot name="buttons" />
-          <i class="ri-close-fill close" on:click={hide} />
+          <ActionButton quiet icon="Close" on:click={hide} />
         </div>
       </header>
       <slot name="body" />
diff --git a/yarn.lock b/yarn.lock
index 5f0162a7e0..2965fa7ed3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -824,6 +824,11 @@
     estree-walker "^1.0.1"
     micromatch "^4.0.2"
 
+"@spectrum-css/actionbutton@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
+  integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw==
+
 "@spectrum-css/toast@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"