From 5c80d0ac423339f57ea849b7d70d9c74609b3421 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 6 May 2021 19:33:36 +0530
Subject: [PATCH] feat: Creates add button component for label (#2223)

---
 .../ui/dropdown/AddLabel.stories.js           | 19 ++++++++++++++
 .../components/ui/dropdown/AddLabel.vue       | 25 +++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 app/javascript/shared/components/ui/dropdown/AddLabel.stories.js
 create mode 100644 app/javascript/shared/components/ui/dropdown/AddLabel.vue

diff --git a/app/javascript/shared/components/ui/dropdown/AddLabel.stories.js b/app/javascript/shared/components/ui/dropdown/AddLabel.stories.js
new file mode 100644
index 000000000..fd1b52241
--- /dev/null
+++ b/app/javascript/shared/components/ui/dropdown/AddLabel.stories.js
@@ -0,0 +1,19 @@
+import { action } from '@storybook/addon-actions';
+import AddLabel from './AddLabel';
+
+export default {
+  title: 'Components/Label/Add Button',
+  component: AddLabel,
+  argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { AddLabel },
+  template: '<add-label v-bind="$props" @add="onClick"></add-label>',
+});
+
+export const AddButton = Template.bind({});
+AddButton.args = {
+  onClick: action('opened'),
+};
diff --git a/app/javascript/shared/components/ui/dropdown/AddLabel.vue b/app/javascript/shared/components/ui/dropdown/AddLabel.vue
new file mode 100644
index 000000000..24ac86440
--- /dev/null
+++ b/app/javascript/shared/components/ui/dropdown/AddLabel.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <woot-button
+      variant="hollow"
+      size="tiny"
+      icon="ion-plus-round"
+      color-scheme="secondary"
+      @click="toggleLabels"
+    >
+      {{ $t('CONTACT_PANEL.LABELS.MODAL.ADD_BUTTON') }}
+    </woot-button>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    toggleLabels() {
+      this.$emit('add');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>