From 85521ce1f9070ff1ad0c528c045aeb7422584a2b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 6 May 2022 17:31:39 +0200
Subject: [PATCH 1/3] feat: created dropTabs component

---
 src/lib/components/dropTabs.svelte     | 3 +++
 src/lib/components/dropTabsItem.svelte | 9 +++++++++
 src/lib/components/index.ts            | 2 ++
 3 files changed, 14 insertions(+)
 create mode 100644 src/lib/components/dropTabs.svelte
 create mode 100644 src/lib/components/dropTabsItem.svelte

diff --git a/src/lib/components/dropTabs.svelte b/src/lib/components/dropTabs.svelte
new file mode 100644
index 0000000000..d2a425ec52
--- /dev/null
+++ b/src/lib/components/dropTabs.svelte
@@ -0,0 +1,3 @@
+<ul class="drop-tabs">
+    <slot />
+</ul>
diff --git a/src/lib/components/dropTabsItem.svelte b/src/lib/components/dropTabsItem.svelte
new file mode 100644
index 0000000000..07de4f9f91
--- /dev/null
+++ b/src/lib/components/dropTabsItem.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    export let disabled: boolean = false;
+</script>
+
+<li class="drop-tabs-item">
+    <button class="drop-tabs-button" {disabled} on:click>
+        <span class="text"><slot /></span>
+    </button>
+</li>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index fd1b70c23b..fbb7efd6e9 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -13,3 +13,5 @@ export { default as DropList } from './dropList.svelte';
 export { default as DropListItem } from './dropListItem.svelte';
 export { default as DropListLink } from './dropListLink.svelte';
 export { default as Collapsible } from './collapsible.svelte';
+export { default as DropTabs } from './dropTabs.svelte';
+export { default as DropTabsItem } from './dropTabsItem.svelte';

From d04e7fdafacd7f8130c2b4addda9df1e9e1da14d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 6 May 2022 17:32:46 +0200
Subject: [PATCH 2/3] test: for dropTabsItem

---
 tests/unit/components/dropTabsItem.test.ts | 26 ++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 tests/unit/components/dropTabsItem.test.ts

diff --git a/tests/unit/components/dropTabsItem.test.ts b/tests/unit/components/dropTabsItem.test.ts
new file mode 100644
index 0000000000..680343abde
--- /dev/null
+++ b/tests/unit/components/dropTabsItem.test.ts
@@ -0,0 +1,26 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/svelte';
+
+import { DropTabsItem } from '../../../src/lib/components';
+
+test('shows button', () => {
+    const { getByRole } = render(DropTabsItem);
+
+    expect(getByRole('button')).toBeInTheDocument();
+});
+
+test('shows button - disabled', () => {
+    const { getByRole } = render(DropTabsItem, { disabled: true });
+
+    expect(getByRole('button')).toBeDisabled();
+});
+
+test('shows button - on:click', async () => {
+    const { getByRole, component } = render(DropTabsItem);
+    const button = getByRole('button');
+    const callback = jest.fn();
+    component.$on('click', callback);
+
+    await fireEvent.click(button);
+    expect(callback).toHaveBeenCalled();
+});

From f3b23069bd18e196bf5c894e7167f3041770e98d Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Sat, 14 May 2022 19:05:56 +0200
Subject: [PATCH 3/3] fix: lint error

---
 src/lib/components/dropTabsItem.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/dropTabsItem.svelte b/src/lib/components/dropTabsItem.svelte
index 07de4f9f91..b7ebac26fb 100644
--- a/src/lib/components/dropTabsItem.svelte
+++ b/src/lib/components/dropTabsItem.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    export let disabled: boolean = false;
+    export let disabled = false;
 </script>
 
 <li class="drop-tabs-item">