feat: Create custom attributes for a contact from CRM (#2299)

* feat: Creates cutom attributes for a contact from CRM

* Review fixes

* Change inline forms edit icon size

* Review fixes

* Fix validation labels color

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/modules/contact/stories/AddCustomAttribute.stories.js

@@ -0,0 +1,32 @@
+import AddCustomAttribute from '../components/AddCustomAttribute';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Components/Contact/AddCustomAttribute',
+  component: AddCustomAttribute,
+  argTypes: {
+    show: {
+      defaultValue: true,
+      control: {
+        type: 'boolean',
+      },
+    },
+    isCreating: {
+      defaultValue: false,
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { AddCustomAttribute },
+  template: '<add-custom-attribute v-bind="$props" @create="onCreate" />',
+});
+
+export const DefaultAttribute = Template.bind({});
+DefaultAttribute.args = {
+  onCreate: action('edit'),
+};

app/javascript/dashboard/modules/contact/stories/ContactFields.stories.js

@@ -10,7 +10,7 @@ const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { ContactFields },
   template:
-    '<contact-fields v-bind="$props" :contact="contact" @update="onUpdate" />',
+    '<contact-fields v-bind="$props" :contact="contact" @update="onUpdate" @create-attribute="onCreate" />',
 });
 
 export const DefaultContactFields = Template.bind({});
@@ -39,4 +39,5 @@ DefaultContactFields.args = {
     },
   },
   onUpdate: action('update'),
+  onCreate: action('create'),
 };