diff --git a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
index 703b973ec64d..dd02ac338bda 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
@@ -28,8 +28,8 @@
class="value--view"
:class="{ 'is-editable': showEdit }"
>
-
- {{ value }}
+
+ {{ value || '---' }}
.contact-attribute {
- margin-bottom: var(--space-normal);
+ margin-bottom: var(--space-small);
}
.title-wrap {
display: flex;
@@ -116,6 +116,7 @@ export default {
}
.value {
display: inline-block;
+ min-width: var(--space-mega);
border-radius: var(--border-radius-small);
word-break: break-all;
margin: 0 var(--space-smaller) 0 var(--space-normal);
diff --git a/app/javascript/dashboard/modules/contact/components/ContactFields.vue b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
new file mode 100644
index 000000000000..0e1f6d30635a
--- /dev/null
+++ b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
@@ -0,0 +1,74 @@
+
+
+
+
+
+
diff --git a/app/javascript/dashboard/modules/contact/stories/ContactFields.stories.js b/app/javascript/dashboard/modules/contact/stories/ContactFields.stories.js
new file mode 100644
index 000000000000..01a99f25470d
--- /dev/null
+++ b/app/javascript/dashboard/modules/contact/stories/ContactFields.stories.js
@@ -0,0 +1,42 @@
+import ContactFields from '../components/ContactFields';
+import { action } from '@storybook/addon-actions';
+
+export default {
+ title: 'Components/Contact/ContactFields',
+ component: ContactFields,
+};
+
+const Template = (args, { argTypes }) => ({
+ props: Object.keys(argTypes),
+ components: { ContactFields },
+ template:
+ '',
+});
+
+export const DefaultContactFields = Template.bind({});
+DefaultContactFields.args = {
+ contact: {
+ id: 979442,
+ name: 'Eden Hazard',
+ title: 'Playmaker',
+ thumbnail: 'https://randomuser.me/api/portraits/men/19.jpg',
+ company: {
+ id: 10,
+ name: 'Chelsea',
+ },
+ email: 'hazard@chelsea.com',
+ availability_status: 'offline',
+ phone_number: '',
+ custom_attributes: {},
+ additional_attributes: {
+ description:
+ 'Known for his dribbling, he is considered to be one of the best players in the world.',
+ social_profiles: {
+ twitter: 'hazardeden10',
+ facebook: 'hazardeden10',
+ linkedin: 'hazardeden10',
+ },
+ },
+ },
+ onUpdate: action('update'),
+};