From a8f5d257eb7afa5aff3686336fad33c6080774be 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:48:55 +0200
Subject: [PATCH] adds ActionGroup component

---
 package.json                                |  1 +
 packages/bbui/src/Button/ActionGroup.svelte | 23 +++++++++++++++++++++
 yarn.lock                                   |  5 +++++
 3 files changed, 29 insertions(+)
 create mode 100644 packages/bbui/src/Button/ActionGroup.svelte

diff --git a/package.json b/package.json
index 381f1c69bc..6ce17d09a0 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@spectrum-css/actionbutton": "^1.0.1",
+    "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/toast": "^3.0.1"
   }
 }
diff --git a/packages/bbui/src/Button/ActionGroup.svelte b/packages/bbui/src/Button/ActionGroup.svelte
new file mode 100644
index 0000000000..62bbca7ab6
--- /dev/null
+++ b/packages/bbui/src/Button/ActionGroup.svelte
@@ -0,0 +1,23 @@
+<script>
+    import "@spectrum-css/actiongroup/dist/index-vars.css"
+    export let vertical;
+    export let justified;
+    export let quiet;
+    export let compact;
+
+    // Attaches a spectrum-ActionGroup-item class to buttons inside the div
+    function group(element) {
+        const buttons = Array.from(element.getElementsByTagName('button'))
+        buttons.forEach(button => {
+            button.classList.add('spectrum-ActionGroup-item')
+        })
+    }
+</script>
+
+<div use:group class="spectrum-ActionGroup 
+    {vertical && 'spectrum-ActionGroup--vertical'} 
+    {justified && 'spectrum-ActionGroup--justified'} 
+    {quiet && 'spectrum-ActionGroup--quiet'} 
+    {compact && 'spectrum-ActionGroup--compact'}">
+    <slot />
+</div>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 2965fa7ed3..07cfddf1f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -829,6 +829,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
   integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw==
 
+"@spectrum-css/actiongroup@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.1.tgz#b95b86e7af229e90fe1e70399d8d4b547b4bd31c"
+  integrity sha512-5Q6uMjzv5BFA2TwGASr/jAtJpTWl26fhWvgGY8kOA0RCSij35l+YJg/FPXf6Nnj2qCOl8DkNycjT9YXJ+bhyVA==
+
 "@spectrum-css/toast@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"