From cc75a668cb28ada94e3d1fab5370137245dc95a9 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 31 May 2021 10:07:07 +0530
Subject: [PATCH] feat: Create section header component (#2296)

---
 .../dashboard/i18n/locale/en/contact.json     | 10 +++
 .../components/SectionHeader.stories.js       | 22 ++++++
 .../contacts/components/SectionHeader.vue     | 71 +++++++++++++++++++
 3 files changed, 103 insertions(+)
 create mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.stories.js
 create mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue

diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 80a33f25a..544d54323 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -168,6 +168,16 @@
       "BUTTON": "View all notes"
     }
   },
+  "EVENTS": {
+    "HEADER": {
+      "TITLE": "Activities"
+    },
+    "BUTTON": {
+      "PILL_BUTTON_NOTES": "notes",
+      "PILL_BUTTON_EVENTS": "events",
+      "PILL_BUTTON_CONVO": "conversations"
+    }
+  },
   "CUSTOM_ATTRIBUTES": {
     "TITLE": "Custom Attributes",
     "BUTTON": "Add custom attribute",
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.stories.js b/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.stories.js
new file mode 100644
index 000000000..0ceaa64b4
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.stories.js
@@ -0,0 +1,22 @@
+import { action } from '@storybook/addon-actions';
+import SectionHeader from './SectionHeader';
+
+export default {
+  title: 'Components/Events/Section',
+  component: SectionHeader,
+  argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { SectionHeader },
+  template:
+    '<section-header v-bind="$props" @notes="onClickNotes" @events="onClickEvents" @conversation="onClickConversation"></section-header>',
+});
+
+export const Section = Template.bind({});
+Section.args = {
+  onClickNotes: action('notes'),
+  onClickEvents: action('events'),
+  onClickConversation: action('conversation'),
+};
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
new file mode 100644
index 000000000..be7778440
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      <h5 class="block-title">
+        {{ $t('EVENTS.HEADER.TITLE') }}
+      </h5>
+    </div>
+    <div class="button-wrap">
+      <woot-button
+        variant="hollow"
+        size="tiny"
+        color-scheme="secondary"
+        class-names="pill-button"
+        @click="onClickNotes"
+      >
+        {{ $t('EVENTS.BUTTON.PILL_BUTTON_NOTES') }}
+      </woot-button>
+      <woot-button
+        variant="hollow"
+        size="tiny"
+        color-scheme="secondary"
+        class-names="pill-button"
+        @click="onClickEvents"
+      >
+        {{ $t('EVENTS.BUTTON.PILL_BUTTON_EVENTS') }}
+      </woot-button>
+      <woot-button
+        variant="hollow"
+        size="tiny"
+        color-scheme="secondary"
+        class-names="pill-button"
+        @click="onClickConversation"
+      >
+        {{ $t('EVENTS.BUTTON.PILL_BUTTON_CONVO') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    onClickNotes() {
+      this.$emit('notes');
+    },
+
+    onClickEvents() {
+      this.$emit('events');
+    },
+
+    onClickConversation() {
+      this.$emit('conversation');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  width: 100%;
+  padding: var(--space-normal);
+
+  .button-wrap {
+    display: flex;
+
+    .pill-button {
+      margin-right: var(--space-small);
+    }
+  }
+}
+</style>