feat: remove storybook
This commit is contained in:
Shivam Mishra
@@ -1,39 +0,0 @@
|
||||
@import 'shared/assets/fonts/inter';
|
||||
@import 'shared/assets/fonts/plus-jakarta';
|
||||
@import 'shared/assets/stylesheets/animations';
|
||||
@import 'shared/assets/stylesheets/colors';
|
||||
@import 'shared/assets/stylesheets/spacing';
|
||||
@import 'shared/assets/stylesheets/font-size';
|
||||
@import 'shared/assets/stylesheets/font-weights';
|
||||
@import 'shared/assets/stylesheets/shadows';
|
||||
@import 'shared/assets/stylesheets/border-radius';
|
||||
@import 'variables';
|
||||
|
||||
@import 'vue-multiselect/dist/vue-multiselect.min.css';
|
||||
@import '~shared/assets/stylesheets/ionicons';
|
||||
|
||||
@import 'mixins';
|
||||
@import 'helper-classes';
|
||||
|
||||
@import 'typography';
|
||||
@import 'layout';
|
||||
@import 'animations';
|
||||
|
||||
@import 'widgets/buttons';
|
||||
@import 'widgets/base';
|
||||
|
||||
@import 'plugins/multiselect';
|
||||
|
||||
@import 'widget/assets/scss/reset';
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
@import 'widget/assets/scss/utilities';
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: 'PlusJakarta', sans-serif;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import AccordionItemComponent from './AccordionItem';
|
||||
|
||||
export default {
|
||||
title: 'Components/Generic/Accordion',
|
||||
component: AccordionItemComponent,
|
||||
argTypes: {
|
||||
title: {
|
||||
control: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { AccordionItem: AccordionItemComponent },
|
||||
template: `
|
||||
<accordion-item v-bind="$props" @click="onClick">
|
||||
This is a sample content you can pass as a slot
|
||||
</accordion-item>
|
||||
`,
|
||||
});
|
||||
|
||||
export const AccordionItem = Template.bind({});
|
||||
AccordionItem.args = {
|
||||
onClick: action('Added'),
|
||||
title: 'Title of the accordion item',
|
||||
};
|
||||
@@ -1,46 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import WootAnnouncementPopup from '../AnnouncementPopup.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Popup/Announcement Popup',
|
||||
argTypes: {
|
||||
popupMessage: {
|
||||
defaultValue:
|
||||
'Now a new key shortcut (⌘ + ↵) is available to send messages. You can enable it in the',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
routeText: {
|
||||
defaultValue: 'profile settings',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
hasCloseButton: {
|
||||
defaultValue: true,
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
closeButtonText: {
|
||||
defaultValue: 'Got it',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { WootAnnouncementPopup },
|
||||
template:
|
||||
'<woot-announcement-popup v-bind="$props" @open="onClickOpenPath" @close="onClickClose"></woot-announcement-popup>',
|
||||
});
|
||||
|
||||
export const AnnouncementPopup = Template.bind({});
|
||||
AnnouncementPopup.args = {
|
||||
onClickOpenPath: action('opened path'),
|
||||
onClickClose: action('closed the popup'),
|
||||
};
|
||||
@@ -1,50 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import WootButton from '../WootButton.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
component: WootButton,
|
||||
argTypes: {
|
||||
colorScheme: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['primary', 'secondary', 'success', 'alert', 'warning'],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['tiny', 'small', 'medium', 'large', 'expanded'],
|
||||
},
|
||||
},
|
||||
variant: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['hollow', 'clear'],
|
||||
},
|
||||
},
|
||||
isLoading: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
isDisabled: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { WootButton },
|
||||
template:
|
||||
'<woot-button v-bind="$props" @click="onClick">{{label}}</woot-button>',
|
||||
});
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
Primary.args = {
|
||||
label: 'New message',
|
||||
onClick: action('Hello'),
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import WootDateRangePicker from '../DateRangePicker.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Date Picker/Date Range Picker',
|
||||
argTypes: {
|
||||
confirmText: {
|
||||
defaultValue: 'Apply',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
placeholder: {
|
||||
defaultValue: 'Select date range',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
value: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { WootDateRangePicker },
|
||||
template:
|
||||
'<woot-date-range-picker v-bind="$props" @change="onChange"></woot-date-range-picker>',
|
||||
});
|
||||
|
||||
export const DateRangePicker = Template.bind({});
|
||||
DateRangePicker.args = {
|
||||
onChange: action('applied'),
|
||||
value: new Date(),
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import WootDateTimePicker from '../DateTimePicker.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Date Picker/Date Time Picker',
|
||||
argTypes: {
|
||||
confirmText: {
|
||||
defaultValue: 'Apply',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
placeholder: {
|
||||
defaultValue: 'Select date time',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
value: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { WootDateTimePicker },
|
||||
template:
|
||||
'<woot-date-time-picker v-bind="$props" @change="onChange"></woot-date-time-picker>',
|
||||
});
|
||||
|
||||
export const DateTimePicker = Template.bind({});
|
||||
DateTimePicker.args = {
|
||||
onChange: action('applied'),
|
||||
value: new Date(),
|
||||
};
|
||||
@@ -1,64 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export default {
|
||||
title: 'Components/Label',
|
||||
argTypes: {
|
||||
title: {
|
||||
defaultValue: 'sales',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
colorScheme: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['primary', 'secondary', 'success', 'alert', 'warning'],
|
||||
},
|
||||
},
|
||||
description: {
|
||||
defaultValue: 'label',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
href: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
bgColor: {
|
||||
defaultValue: '#a83262',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
small: {
|
||||
defaultValue: false,
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
showClose: {
|
||||
defaultValue: false,
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
icon: {
|
||||
defaultValue: 'ion-close',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
template: '<woot-label v-bind="$props" @click="onClick"></woot-label>',
|
||||
});
|
||||
|
||||
export const DefaultLabel = Template.bind({});
|
||||
DefaultLabel.args = {
|
||||
onClick: action('clicked'),
|
||||
};
|
||||
@@ -1,30 +0,0 @@
|
||||
import TimeAgo from 'dashboard/components/ui/TimeAgo';
|
||||
|
||||
export default {
|
||||
title: 'Components/TimeAgo',
|
||||
component: TimeAgo,
|
||||
argTypes: {
|
||||
isAutoRefreshEnabled: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
timestamp: {
|
||||
control: {
|
||||
type: 'text, date, number',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { TimeAgo },
|
||||
template: '<time-ago v-bind="$props"></time-ago>',
|
||||
});
|
||||
|
||||
export const TimeAgoView = Template.bind({});
|
||||
TimeAgoView.args = {
|
||||
timestamp: 1549843200,
|
||||
isAutoRefreshEnabled: false,
|
||||
};
|
||||
@@ -1,37 +0,0 @@
|
||||
import InboxDropdownItem from './InboxDropdownItem';
|
||||
|
||||
export default {
|
||||
title: 'Components/DropDowns/InboxDropdownItem',
|
||||
component: InboxDropdownItem,
|
||||
argTypes: {
|
||||
name: {
|
||||
defaultValue: 'My new inbox',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
|
||||
inboxIdentifier: {
|
||||
defaultValue: 'nithin@mail.com',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
|
||||
channelType: {
|
||||
defaultValue: 'email',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { InboxDropdownItem },
|
||||
template: '<inbox-dropdown-item v-bind="$props" ></inbox-dropdown-item>',
|
||||
});
|
||||
|
||||
export const Banner = Template.bind({});
|
||||
Banner.args = {};
|
||||
@@ -1,67 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import LabelSelector from './LabelSelector';
|
||||
|
||||
export default {
|
||||
title: 'Components/Label/Contact Label',
|
||||
component: LabelSelector,
|
||||
argTypes: {
|
||||
contactId: {
|
||||
control: {
|
||||
type: 'text ,number',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { LabelSelector },
|
||||
template:
|
||||
'<label-selector v-bind="$props" @add="onAdd" @remove="onRemove"></label-selector>',
|
||||
});
|
||||
|
||||
export const ContactLabel = Template.bind({});
|
||||
ContactLabel.args = {
|
||||
onAdd: action('Added'),
|
||||
onRemove: action('Removed'),
|
||||
allLabels: [
|
||||
{
|
||||
id: '1',
|
||||
title: 'sales',
|
||||
description: '',
|
||||
color: '#0a5dd1',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'refund',
|
||||
description: '',
|
||||
color: '#8442f5',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'testing',
|
||||
description: '',
|
||||
color: '#f542f5',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: 'scheduled',
|
||||
description: '',
|
||||
color: '#42d1f5',
|
||||
},
|
||||
],
|
||||
savedLabels: [
|
||||
{
|
||||
id: '2',
|
||||
title: 'refund',
|
||||
description: '',
|
||||
color: '#8442f5',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: 'scheduled',
|
||||
description: '',
|
||||
color: '#42d1f5',
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -1,30 +0,0 @@
|
||||
import SettingIntroBanner from './SettingIntroBanner';
|
||||
|
||||
export default {
|
||||
title: 'Components/Settings/Banner',
|
||||
component: SettingIntroBanner,
|
||||
argTypes: {
|
||||
headerTitle: {
|
||||
defaultValue: 'Acme Support',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
headerContent: {
|
||||
defaultValue:
|
||||
'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { SettingIntroBanner },
|
||||
template: '<setting-intro-banner v-bind="$props" ></setting-intro-banner>',
|
||||
});
|
||||
|
||||
export const Banner = Template.bind({});
|
||||
Banner.args = {};
|
||||
@@ -1,61 +0,0 @@
|
||||
import Thumbnail from './Thumbnail.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Thumbnail',
|
||||
component: Thumbnail,
|
||||
argTypes: {
|
||||
src: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
size: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
badge: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['fb', 'whatsapp', 'sms', 'twitter-tweet', 'twitter-dm'],
|
||||
},
|
||||
},
|
||||
variant: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['circle', 'square'],
|
||||
},
|
||||
},
|
||||
username: {
|
||||
defaultValue: 'John Doe',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
status: {
|
||||
defaultValue: 'circle',
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['online', 'busy'],
|
||||
},
|
||||
},
|
||||
hasBorder: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
shouldShowStatusAlways: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { Thumbnail },
|
||||
template: '<thumbnail v-bind="$props" @click="onClick">{{label}}</thumbnail>',
|
||||
});
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
-28
@@ -1,28 +0,0 @@
|
||||
import ContactBubble from '../bubble/Contact.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Messaging/ContactBubble',
|
||||
component: ContactBubble,
|
||||
argTypes: {
|
||||
name: {
|
||||
defaultValue: 'Eden Hazard',
|
||||
control: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
phoneNumber: {
|
||||
defaultValue: '+517554433220',
|
||||
control: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ContactBubble },
|
||||
template: '<contact-bubble v-bind="$props" />',
|
||||
});
|
||||
|
||||
export const ContactBubbleView = Template.bind({});
|
||||
-34
@@ -1,34 +0,0 @@
|
||||
import LocationBubble from '../bubble/Location.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Help Center',
|
||||
component: LocationBubble,
|
||||
argTypes: {
|
||||
latitude: {
|
||||
defaultValue: 1,
|
||||
control: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
longitude: {
|
||||
defaultValue: 1,
|
||||
control: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
name: {
|
||||
defaultValue: '420, Dope street',
|
||||
control: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { LocationBubble },
|
||||
template: '<location-bubble v-bind="$props" />',
|
||||
});
|
||||
|
||||
export const LocationBubbleView = Template.bind({});
|
||||
-27
@@ -1,27 +0,0 @@
|
||||
import ReplyEmailHead from '../ReplyEmailHead';
|
||||
|
||||
export default {
|
||||
title: 'Components/ReplyBox/EmailHead',
|
||||
component: ReplyEmailHead,
|
||||
argTypes: {
|
||||
ccEmails: {
|
||||
control: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
bccEmails: {
|
||||
control: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ReplyEmailHead },
|
||||
template:
|
||||
'<reply-email-head v-bind="$props" @add="onAdd" @click="onClick"></reply-email-head>',
|
||||
});
|
||||
|
||||
export const Add = Template.bind({});
|
||||
@@ -1,17 +0,0 @@
|
||||
import WootKeyboardShortcutModal from './WootKeyShortcutModal.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Shortcuts/Keyboard Shortcut',
|
||||
component: WootKeyboardShortcutModal,
|
||||
argTypes: {},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { WootKeyboardShortcutModal },
|
||||
template:
|
||||
'<woot-keyboard-shortcut-modal v-bind="$props"></woot-keyboard-shortcut-modal>',
|
||||
});
|
||||
|
||||
export const KeyboardShortcut = Template.bind({});
|
||||
KeyboardShortcut.args = {};
|
||||
@@ -1,69 +0,0 @@
|
||||
import ThumbnailGroup from '../ThumbnailGroup.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/ThumbnailGroup',
|
||||
component: ThumbnailGroup,
|
||||
argTypes: {
|
||||
usersList: {
|
||||
defaultValue: [
|
||||
{
|
||||
name: 'John',
|
||||
id: 1,
|
||||
thumbnail: '',
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
id: 2,
|
||||
thumbnail: '',
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
id: 3,
|
||||
thumbnail: '',
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
id: 4,
|
||||
thumbnail: '',
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
id: 5,
|
||||
thumbnail: '',
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
id: 6,
|
||||
thumbnail: '',
|
||||
},
|
||||
],
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
size: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
moreThumbnailsText: {
|
||||
control: {
|
||||
type: 'text',
|
||||
default: '2 more',
|
||||
},
|
||||
},
|
||||
showMoreThumbnailsCount: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ThumbnailGroup },
|
||||
template: '<ThumbnailGroup v-bind="$props"/>',
|
||||
});
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
@@ -1,32 +0,0 @@
|
||||
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'),
|
||||
};
|
||||
@@ -1,43 +0,0 @@
|
||||
import ContactAttribute from '../components/ContactAttribute';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export default {
|
||||
title: 'Components/Contact/ContactAttribute',
|
||||
component: ContactAttribute,
|
||||
argTypes: {
|
||||
label: {
|
||||
defaultValue: 'Email',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
value: {
|
||||
defaultValue: 'dwight@schrute.farms',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
icon: {
|
||||
defaultValue: 'ion-email',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
showEdit: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ContactAttribute },
|
||||
template: '<contact-attribute v-bind="$props" @update="onEdit" />',
|
||||
});
|
||||
|
||||
export const DefaultAttribute = Template.bind({});
|
||||
DefaultAttribute.args = {
|
||||
onEdit: action('edit'),
|
||||
};
|
||||
@@ -1,43 +0,0 @@
|
||||
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:
|
||||
'<contact-fields v-bind="$props" :contact="contact" @update="onUpdate" @create-attribute="onCreate" />',
|
||||
});
|
||||
|
||||
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'),
|
||||
onCreate: action('create'),
|
||||
};
|
||||
@@ -1,43 +0,0 @@
|
||||
import ContactIntro from '../components/ContactIntro';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export default {
|
||||
title: 'Components/Contact/ContactIntro',
|
||||
component: ContactIntro,
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ContactIntro },
|
||||
template:
|
||||
'<contact-intro v-bind="$props" @edit="onEdit" @message="onNewMessage" />',
|
||||
});
|
||||
|
||||
export const DefaultContactIntro = Template.bind({});
|
||||
DefaultContactIntro.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',
|
||||
},
|
||||
},
|
||||
},
|
||||
onEdit: action('edit'),
|
||||
onNewMessage: action('new message 💬'),
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import MergeContact from 'dashboard/modules/contact/components/MergeContact';
|
||||
|
||||
export default {
|
||||
title: 'Components/Contact/MergeContacts',
|
||||
component: MergeContact,
|
||||
argTypes: {
|
||||
'primary-contact': {
|
||||
defaultValue: '{}',
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { MergeContact },
|
||||
template:
|
||||
'<merge-contact v-bind="$props" @submit="onSearch" @search="onSubmit"></merge-contact>',
|
||||
});
|
||||
|
||||
export const List = Template.bind({});
|
||||
List.args = {
|
||||
primaryContact: {
|
||||
id: 12,
|
||||
name: 'Mason Mount',
|
||||
},
|
||||
onSearch: action('Search'),
|
||||
onSubmit: action('Submit'),
|
||||
};
|
||||
@@ -1,19 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import AddNote from '../components/AddNote.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Notes/Add',
|
||||
component: AddNote,
|
||||
argTypes: {},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { AddNote },
|
||||
template: '<add-note v-bind="$props" @add="onAdd"></add-note>',
|
||||
});
|
||||
|
||||
export const Add = Template.bind({});
|
||||
Add.args = {
|
||||
onAdd: action('Added'),
|
||||
};
|
||||
@@ -1,52 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import ContactNote from '../components/ContactNote.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Notes/Note',
|
||||
component: ContactNote,
|
||||
argTypes: {
|
||||
id: {
|
||||
control: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
note: {
|
||||
defaultValue:
|
||||
'A copy and paste musical notes symbols & music symbols collection for easy access.',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
userName: {
|
||||
defaultValue: 'John Doe',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
timeStamp: {
|
||||
defaultValue: 1618046084,
|
||||
control: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
thumbnail: {
|
||||
defaultValue: 'https://randomuser.me/api/portraits/men/62.jpg',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ContactNote },
|
||||
template:
|
||||
'<contact-note v-bind="$props" @edit="onEdit" @delete="onDelete"></contact-note>',
|
||||
});
|
||||
|
||||
export const Note = Template.bind({});
|
||||
Note.args = {
|
||||
onEdit: action('Edit'),
|
||||
onDelete: action('Delete'),
|
||||
};
|
||||
@@ -1,45 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import NoteList from '../components/NoteList';
|
||||
|
||||
export default {
|
||||
title: 'Components/Notes/List',
|
||||
component: NoteList,
|
||||
argTypes: {},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { NoteList },
|
||||
template:
|
||||
'<note-list v-bind="$props" @addNote="onAddNote" @editNote="onEditNote" @deleteNote="onDeleteNote" @show="onClick"></note-list>',
|
||||
});
|
||||
|
||||
export const List = Template.bind({});
|
||||
List.args = {
|
||||
onClick: action('show'),
|
||||
onAddNote: action('added'),
|
||||
onEditNote: action('edit'),
|
||||
onDeleteNote: action('deleted'),
|
||||
notes: [
|
||||
{
|
||||
id: '12345',
|
||||
content:
|
||||
'It is a long established fact that a reader will be distracted.',
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
thumbnail: 'https://randomuser.me/api/portraits/men/69.jpg',
|
||||
},
|
||||
created_at: 1618046084,
|
||||
},
|
||||
{
|
||||
id: '12346',
|
||||
content:
|
||||
'It is simply dummy text of the printing and typesetting industry.',
|
||||
user: {
|
||||
name: 'Pearl Cruz',
|
||||
thumbnail: 'https://randomuser.me/api/portraits/women/29.jpg',
|
||||
},
|
||||
created_at: 1616046076,
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -1,4 +1,3 @@
|
||||
/* eslint-disable storybook/default-exports */
|
||||
import { frontendURL } from '../../helper/URLHelper';
|
||||
|
||||
const SearchView = () => import('./components/SearchView.vue');
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
import MessageContent from '../components/MessageContent.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Search/MessageContent',
|
||||
component: MessageContent,
|
||||
argTypes: {
|
||||
content: {
|
||||
defaultValue: '123',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
author: {
|
||||
defaultValue: 'John Doe',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { MessageContent },
|
||||
template: '<message-content v-bind="$props"></message-content>',
|
||||
});
|
||||
|
||||
export const MessageResultItem = Template.bind({});
|
||||
@@ -1,53 +0,0 @@
|
||||
import SearchResultContactItem from '../components/SearchResultContactItem.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Search/SearchResultContactItem',
|
||||
component: SearchResultContactItem,
|
||||
argTypes: {
|
||||
id: {
|
||||
defaultValue: '123',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
name: {
|
||||
defaultValue: 'John Doe',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
email: {
|
||||
defaultValue: 'johndoe@faster.com',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
phone: {
|
||||
defaultValue: '+1 123 456 7890',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
accountId: {
|
||||
defaultValue: '7890',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
thumbnail: {
|
||||
defaultValue: 'https://randomuser.me/api/portraits/men/62.jpg',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { SearchResultContactItem },
|
||||
template:
|
||||
'<search-result-contact-item v-bind="$props"></search-result-contact-item>',
|
||||
});
|
||||
|
||||
export const ResultContactItem = Template.bind({});
|
||||
-50
@@ -1,50 +0,0 @@
|
||||
import SearchResultConversationItem from '../components/SearchResultConversationItem.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Search/SearchResultConversationItem',
|
||||
component: SearchResultConversationItem,
|
||||
argTypes: {
|
||||
id: {
|
||||
defaultValue: '123',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
name: {
|
||||
defaultValue: 'John Doe',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
inbox: {
|
||||
defaultValue: {
|
||||
name: 'Livechat',
|
||||
channel_type: 'Channel::WebWidget',
|
||||
},
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
accountId: {
|
||||
defaultValue: '7890',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
createdAt: {
|
||||
defaultValue: '1677672962',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { SearchResultConversationItem },
|
||||
template:
|
||||
'<search-result-conversation-item v-bind="$props"></search-result-conversation-item>',
|
||||
});
|
||||
|
||||
export const ResultConversationItem = Template.bind({});
|
||||
@@ -1,29 +0,0 @@
|
||||
import Widget from '../components/Widget';
|
||||
|
||||
const ReplyTime = {
|
||||
'In a few minutes': 'in_a_few_minutes',
|
||||
'In a few hours': 'in_a_few_hours',
|
||||
'In a few day': 'in_a_day',
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'components/Widget',
|
||||
component: Widget,
|
||||
argTypes: {
|
||||
replyTime: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ReplyTime,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { Widget },
|
||||
template: '<Widget v-bind="$props" />',
|
||||
});
|
||||
|
||||
export const DefaultWidget = Template.bind({});
|
||||
DefaultWidget.args = {};
|
||||
@@ -1,41 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import AddReminder from './AddReminder';
|
||||
|
||||
export default {
|
||||
title: 'Components/Reminder/Add',
|
||||
component: AddReminder,
|
||||
argTypes: {
|
||||
options: {
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { AddReminder },
|
||||
template:
|
||||
'<add-reminder v-bind="$props" @add="onAdd" @click="onClick"></add-reminder>',
|
||||
});
|
||||
|
||||
export const Add = Template.bind({});
|
||||
Add.args = {
|
||||
onAdd: action('Added'),
|
||||
onClick: action('Label'),
|
||||
options: [
|
||||
{
|
||||
id: '12345',
|
||||
name: 'calls',
|
||||
},
|
||||
{
|
||||
id: '12346',
|
||||
name: 'meeting',
|
||||
},
|
||||
{
|
||||
id: '12347',
|
||||
name: 'review',
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -1,52 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import ReminderItem from './ReminderItem';
|
||||
|
||||
export default {
|
||||
title: 'Components/Reminder/Item',
|
||||
component: ReminderItem,
|
||||
argTypes: {
|
||||
id: {
|
||||
control: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
text: {
|
||||
defaultValue:
|
||||
'A copy and paste musical notes symbols & music symbols collection for easy access.',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
isCompleted: {
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
date: {
|
||||
defaultValue: '03/06/2020',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
defaultValue: 'Call',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ReminderItem },
|
||||
template:
|
||||
'<reminder-item v-bind="$props" @completed="onClick" @edit="onEdit" @delete="onDelete"></reminder-item>',
|
||||
});
|
||||
|
||||
export const Item = Template.bind({});
|
||||
Item.args = {
|
||||
onClick: action('Marked'),
|
||||
onEdit: action('Edit'),
|
||||
onDelete: action('Delete'),
|
||||
};
|
||||
-22
@@ -1,22 +0,0 @@
|
||||
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'),
|
||||
};
|
||||
@@ -1,45 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import TimelineCard from './TimelineCard';
|
||||
|
||||
export default {
|
||||
title: 'Components/Events/Timeline',
|
||||
component: TimelineCard,
|
||||
argTypes: {
|
||||
eventType: {
|
||||
defaultValue: 'Commented',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
eventPath: {
|
||||
defaultValue: 'chatwoot/chatwoot',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
eventBody: {
|
||||
defaultValue:
|
||||
'Commentedmany variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
timeStamp: {
|
||||
defaultValue: '1618046084',
|
||||
control: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { TimelineCard },
|
||||
template: '<timeline-card v-bind="$props" @more="onClick"></timeline-card>',
|
||||
});
|
||||
|
||||
export const Timeline = Template.bind({});
|
||||
Timeline.args = {
|
||||
onClick: action('more'),
|
||||
};
|
||||
-30
@@ -1,30 +0,0 @@
|
||||
import AddCategoryComponent from '../../pages/categories/AddCategory.vue';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export default {
|
||||
title: 'Components/Help Center',
|
||||
component: AddCategoryComponent,
|
||||
argTypes: {
|
||||
show: {
|
||||
defaultValue: true,
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { AddCategoryComponent },
|
||||
template:
|
||||
'<add-category-component v-bind="$props" @create="onCreate" @cancel="onClose" />',
|
||||
});
|
||||
|
||||
export const AddCategory = Template.bind({});
|
||||
AddCategory.args = {
|
||||
portalName: 'Chatwoot help center',
|
||||
locale: 'En-US',
|
||||
onCreate: action('create'),
|
||||
onClose: action('cancel'),
|
||||
};
|
||||
-34
@@ -1,34 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import ArticleEditor from '../../components/ArticleEditor.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Help Center',
|
||||
component: ArticleEditor,
|
||||
argTypes: {
|
||||
article: {
|
||||
defaultValue: {},
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ArticleEditor },
|
||||
template:
|
||||
'<article-editor v-bind="$props" @focus="onFocus" @blur="onBlur"></article-editor>',
|
||||
});
|
||||
|
||||
export const EditArticleView = Template.bind({});
|
||||
EditArticleView.args = {
|
||||
article: {
|
||||
id: '1',
|
||||
title: 'Lorem ipsum',
|
||||
content:
|
||||
'L**orem ipsum** dolor sit amet, consectetur adipiscing elit. Congue diam orci tellus *varius per cras turpis aliquet commodo dolor justo* rutrum lorem venenatis aliquet orci curae hac. Sagittis ultrices felis **`ante placerat condimentum parturient erat consequat`** sollicitudin *sagittis potenti sollicitudin* quis velit at placerat mi torquent. Dignissim luctus nulla suspendisse purus cras commodo ipsum orci tempus morbi metus conubia et hac potenti quam suspendisse feugiat. Turpis eros dictum tellus natoque laoreet lacus dolor cras interdum **vitae gravida tincidunt ultricies tempor convallis tortor rhoncus suspendisse.** Nisi lacinia etiam vivamus tellus sed taciti potenti quam praesent congue euismod mauris est eu risus convallis taciti etiam. Inceptos iaculis turpis leo porta pellentesque dictum `bibendum blandit parturient nulla leo pretium` rhoncus litora dapibus fringilla hac litora.',
|
||||
},
|
||||
onFocus: action('focus'),
|
||||
onBlur: action('blur'),
|
||||
};
|
||||
-44
@@ -1,44 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import ArticleHeader from '../Header/ArticleHeader';
|
||||
|
||||
export default {
|
||||
title: 'Components/Help Center/Header',
|
||||
component: ArticleHeader,
|
||||
argTypes: {
|
||||
headerTitle: {
|
||||
defaultValue: 'All articles',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
count: {
|
||||
defaultValue: 112,
|
||||
control: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
selectedValue: {
|
||||
defaultValue: 'Status',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ArticleHeader },
|
||||
template:
|
||||
'<article-header v-bind="$props" @openModal="openFilterModal" @open="openDropdown" @close="closeDropdown" ></article-header>',
|
||||
});
|
||||
|
||||
export const ArticleHeaderView = Template.bind({});
|
||||
ArticleHeaderView.args = {
|
||||
headerTitle: 'All articles',
|
||||
count: 112,
|
||||
selectedValue: 'Status',
|
||||
openFilterModal: action('openedFilterModal'),
|
||||
openDropdown: action('opened'),
|
||||
closeDropdown: action('closed'),
|
||||
};
|
||||
-63
@@ -1,63 +0,0 @@
|
||||
import ArticleItemComponent from '../ArticleItem.vue';
|
||||
const STATUS_LIST = {
|
||||
published: 'published',
|
||||
draft: 'draft',
|
||||
archived: 'archived',
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'Components/Help Center',
|
||||
component: ArticleItemComponent,
|
||||
argTypes: {
|
||||
title: {
|
||||
defaultValue: 'Setup your account',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
views: {
|
||||
defaultValue: 13,
|
||||
control: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
category: {
|
||||
defaultValue: 'Getting started',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
status: {
|
||||
defaultValue: 'Status',
|
||||
control: {
|
||||
type: 'select',
|
||||
options: STATUS_LIST,
|
||||
},
|
||||
},
|
||||
updatedAt: {
|
||||
defaultValue: '1657255863',
|
||||
control: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ArticleItemComponent },
|
||||
template:
|
||||
'<article-item-component v-bind="$props" ></article-item-component>',
|
||||
});
|
||||
|
||||
export const ArticleItem = Template.bind({});
|
||||
ArticleItem.args = {
|
||||
title: 'Setup your account',
|
||||
author: {
|
||||
name: 'John Doe',
|
||||
},
|
||||
category: 'Getting started',
|
||||
views: 12,
|
||||
status: 'published',
|
||||
updatedAt: 1657255863,
|
||||
};
|
||||
-33
@@ -1,33 +0,0 @@
|
||||
import ArticleSearchArticleView from '../ArticleSearch/ArticleView';
|
||||
|
||||
export default {
|
||||
title: 'Components/Help Center/ArticleSearch/ArticleView',
|
||||
component: ArticleSearchArticleView,
|
||||
argTypes: {
|
||||
title: {
|
||||
defaultValue: 'Insert article',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
selectedValue: {
|
||||
defaultValue: 'Status',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ArticleSearchArticleView },
|
||||
template:
|
||||
'<article-search-article-view v-bind="$props"></article-search-article-view>',
|
||||
});
|
||||
|
||||
export const ArticleHeaderView = Template.bind({});
|
||||
ArticleHeaderView.args = {
|
||||
title: 'Insert article',
|
||||
url: 'https://staging.chatwoot.com/hc/home-rental-app/articles/filter-your-housing-search-results-0',
|
||||
};
|
||||
-31
@@ -1,31 +0,0 @@
|
||||
import ArticleSearchHeader from '../ArticleSearch/Header';
|
||||
|
||||
export default {
|
||||
title: 'Components/Help Center/ArticleSearch/Header',
|
||||
component: ArticleSearchHeader,
|
||||
argTypes: {
|
||||
title: {
|
||||
defaultValue: 'Insert article',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
selectedValue: {
|
||||
defaultValue: 'Status',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ArticleSearchHeader },
|
||||
template: '<article-search-header v-bind="$props"></article-search-header>',
|
||||
});
|
||||
|
||||
export const ArticleHeaderView = Template.bind({});
|
||||
ArticleHeaderView.args = {
|
||||
title: 'Insert article',
|
||||
};
|
||||
-56
@@ -1,56 +0,0 @@
|
||||
import ArticleSearchResultItem from '../ArticleSearch/ArticleSearchResultItem.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Help Center/ArticleSearchResultItem',
|
||||
component: ArticleSearchResultItem,
|
||||
argTypes: {
|
||||
title: {
|
||||
defaultValue: 'Setup your account',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
body: {
|
||||
defaultValue:
|
||||
'You can integrate your Chatwoot account with multiple conversation channels like website live-chat, email, Facebook page, Twitter handle, WhatsApp, etc. You can view all of your conversations from different channels on one dashboard. This helps in reducing the time and friction involved with switching between multiple tools.',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
category: {
|
||||
defaultValue: 'Getting started',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
locale: {
|
||||
defaultValue: 'en-US',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
url: {
|
||||
defaultValue: '/app/accounts/1/conversations/23842',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ArticleSearchResultItem },
|
||||
template:
|
||||
'<ArticleSearchResultItem v-bind="$props" ></ArticleSearchResultItem>',
|
||||
});
|
||||
|
||||
export const ArticleSearchResultItemStory = Template.bind({});
|
||||
ArticleSearchResultItemStory.args = {
|
||||
title: 'Setup your account',
|
||||
body: `You can integrate your Chatwoot account with multiple conversation channels like website live-chat, email, Facebook page, Twitter handle, WhatsApp, etc. You can view all of your conversations from different channels on one dashboard. This helps in reducing the time and friction involved with switching between multiple tools.
|
||||
|
||||
You can manage your conversations and collaborate with your team on the go with Chatwoot mobile apps (available for Android and iOS).
|
||||
|
||||
In this user guide, we’ve explained the features, capabilities, modes of operation, and step-by-step procedures for easily using the Chatwoot platform.`,
|
||||
};
|
||||
-72
@@ -1,72 +0,0 @@
|
||||
import ArticleTableComponent from '../ArticleTable.vue';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
export default {
|
||||
title: 'Components/Help Center',
|
||||
component: ArticleTableComponent,
|
||||
argTypes: {
|
||||
articles: {
|
||||
defaultValue: [],
|
||||
control: {
|
||||
type: 'array',
|
||||
},
|
||||
},
|
||||
articleCount: {
|
||||
defaultValue: 10,
|
||||
control: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
currentPage: {
|
||||
defaultValue: 1,
|
||||
control: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ArticleTableComponent },
|
||||
template:
|
||||
'<article-table-component @onPageChange="onPageChange" v-bind="$props" ></article-table-component>',
|
||||
});
|
||||
|
||||
export const ArticleTable = Template.bind({});
|
||||
ArticleTable.args = {
|
||||
articles: [
|
||||
{
|
||||
title: 'Setup your account',
|
||||
author: {
|
||||
name: 'John Doe',
|
||||
},
|
||||
readCount: 13,
|
||||
category: 'Getting started',
|
||||
status: 'published',
|
||||
updatedAt: 1657255863,
|
||||
},
|
||||
{
|
||||
title: 'Docker Configuration',
|
||||
author: {
|
||||
name: 'Sam Manuel',
|
||||
},
|
||||
readCount: 13,
|
||||
category: 'Engineering',
|
||||
status: 'draft',
|
||||
updatedAt: 1656658046,
|
||||
},
|
||||
{
|
||||
title: 'Campaigns',
|
||||
author: {
|
||||
name: 'Sam Manuel',
|
||||
},
|
||||
readCount: 28,
|
||||
category: 'Engineering',
|
||||
status: 'archived',
|
||||
updatedAt: 1657590446,
|
||||
},
|
||||
],
|
||||
articleCount: 10,
|
||||
currentPage: 1,
|
||||
onPageChange: action('onPageChange'),
|
||||
};
|
||||
-39
@@ -1,39 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import EditArticleHeader from '../Header/EditArticleHeader';
|
||||
|
||||
export default {
|
||||
title: 'Components/Help Center/Header',
|
||||
component: EditArticleHeader,
|
||||
argTypes: {
|
||||
backButtonLabel: {
|
||||
defaultValue: 'Articles',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
draftState: {
|
||||
defaultValue: 'saving',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { EditArticleHeader },
|
||||
template:
|
||||
'<edit-article-header v-bind="$props" @back="onClickGoBack" @show="showPreview" @add="onClickAdd" @open="openSidebar" @close="closeSidebar" ></edit-article-header>',
|
||||
});
|
||||
|
||||
export const EditArticleHeaderView = Template.bind({});
|
||||
EditArticleHeaderView.args = {
|
||||
backButtonLabel: 'Articles',
|
||||
draftState: 'saving',
|
||||
onClickGoBack: action('goBack'),
|
||||
showPreview: action('previewOpened'),
|
||||
onClickAdd: action('added'),
|
||||
openSidebar: action('openedSidebar'),
|
||||
closeSidebar: action('closedSidebar'),
|
||||
};
|
||||
-145
@@ -1,145 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import PortalListItem from '../PortalListItem';
|
||||
|
||||
export default {
|
||||
title: 'Components/Help Center/Portal List',
|
||||
component: PortalListItem,
|
||||
argTypes: {
|
||||
portals: { control: 'array' },
|
||||
status: {
|
||||
control: {
|
||||
type: 'string',
|
||||
options: ['archived', 'draft', 'published'],
|
||||
},
|
||||
},
|
||||
selectedLocaleCode: { control: 'string' },
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { PortalListItem },
|
||||
template:
|
||||
'<portal-list-item v-bind="$props" @add="addLocale" @open-site="openSite" @open="openSettings" @swap="swapLocale" @delete="deleteLocale" ></portal-list-item>',
|
||||
});
|
||||
|
||||
export const PortalListItemView = Template.bind({});
|
||||
PortalListItemView.args = {
|
||||
addLocale: action('addLocale'),
|
||||
openSite: action('openSite'),
|
||||
openSettings: action('openSettings'),
|
||||
swapLocale: action('swapLocale'),
|
||||
deleteLocale: action('deleteLocale'),
|
||||
status: 'published',
|
||||
selectedLocaleCode: 'en-US',
|
||||
portals: [
|
||||
{
|
||||
name: 'Chatwoot Help Center',
|
||||
id: 1,
|
||||
color: 'red',
|
||||
custom_domain: 'help-center.chatwoot.com',
|
||||
articles_count: 123,
|
||||
header_text: 'Help center',
|
||||
homepage_link: null,
|
||||
page_title: 'English',
|
||||
slug: 'help-center',
|
||||
archived: false,
|
||||
config: {
|
||||
allowed_locales: [
|
||||
{
|
||||
code: 'en-US',
|
||||
name: 'English',
|
||||
articles_count: 123,
|
||||
categories_count: 42,
|
||||
},
|
||||
{
|
||||
code: 'fr-FR',
|
||||
name: 'Français',
|
||||
articles_count: 23,
|
||||
categories_count: 11,
|
||||
},
|
||||
{
|
||||
code: 'de-DE',
|
||||
name: 'Deutsch',
|
||||
articles_count: 32,
|
||||
categories_count: 12,
|
||||
},
|
||||
{
|
||||
code: 'es-ES',
|
||||
name: 'Español',
|
||||
articles_count: 12,
|
||||
categories_count: 4,
|
||||
},
|
||||
],
|
||||
},
|
||||
locales: [
|
||||
{
|
||||
code: 'en-US',
|
||||
name: 'English',
|
||||
articles_count: 123,
|
||||
categories_count: 42,
|
||||
},
|
||||
{
|
||||
code: 'fr-FR',
|
||||
name: 'Français',
|
||||
articles_count: 23,
|
||||
categories_count: 11,
|
||||
},
|
||||
{
|
||||
code: 'de-DE',
|
||||
name: 'Deutsch',
|
||||
articles_count: 32,
|
||||
categories_count: 12,
|
||||
},
|
||||
{
|
||||
code: 'es-ES',
|
||||
name: 'Español',
|
||||
articles_count: 12,
|
||||
categories_count: 4,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Chatwoot Docs',
|
||||
id: 2,
|
||||
color: 'green',
|
||||
custom_domain: 'doc-chatwoot.com',
|
||||
articles_count: 67,
|
||||
header_text: 'Docs',
|
||||
homepage_link: null,
|
||||
page_title: 'Portal',
|
||||
slug: 'second_portal',
|
||||
archived: false,
|
||||
config: {
|
||||
allowed_locales: [
|
||||
{
|
||||
name: 'English',
|
||||
code: 'en-EN',
|
||||
articles_count: 12,
|
||||
categories_count: 66,
|
||||
},
|
||||
{
|
||||
name: 'Mandarin',
|
||||
code: 'ch-CH',
|
||||
articles_count: 6,
|
||||
categories_count: 23,
|
||||
},
|
||||
],
|
||||
},
|
||||
locales: [
|
||||
{
|
||||
name: 'English',
|
||||
code: 'en-EN',
|
||||
articles_count: 12,
|
||||
categories_count: 66,
|
||||
},
|
||||
{
|
||||
name: 'Mandarin',
|
||||
code: 'ch-CH',
|
||||
articles_count: 6,
|
||||
categories_count: 23,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
-154
@@ -1,154 +0,0 @@
|
||||
import PortalPopover from '../PortalPopover.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Help Center/Portal Popover',
|
||||
component: PortalPopover,
|
||||
argTypes: {
|
||||
active: {
|
||||
defaultValue: false,
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { PortalPopover },
|
||||
template:
|
||||
'<PortalPopover v-bind="$props" @click="onClick">{{label}}</PortalPopover>',
|
||||
});
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
|
||||
Primary.args = {
|
||||
portals: [
|
||||
{
|
||||
name: 'Chatwoot Help Center',
|
||||
id: 1,
|
||||
color: null,
|
||||
custom_domain: 'doc',
|
||||
articles_count: 123,
|
||||
header_text: null,
|
||||
homepage_link: null,
|
||||
page_title: null,
|
||||
slug: 'first_portal',
|
||||
archived: false,
|
||||
config: {
|
||||
allowed_locales: [
|
||||
{
|
||||
code: 'en',
|
||||
name: 'English',
|
||||
articles_count: 123,
|
||||
},
|
||||
{
|
||||
code: 'fr',
|
||||
name: 'Français',
|
||||
articles_count: 123,
|
||||
},
|
||||
{
|
||||
code: 'de',
|
||||
name: 'Deutsch',
|
||||
articles_count: 32,
|
||||
},
|
||||
{
|
||||
code: 'es',
|
||||
name: 'Español',
|
||||
articles_count: 12,
|
||||
},
|
||||
{
|
||||
code: 'it',
|
||||
name: 'Italiano',
|
||||
articles_count: 8,
|
||||
},
|
||||
],
|
||||
},
|
||||
locales: [
|
||||
{
|
||||
name: 'English',
|
||||
code: 'en',
|
||||
articles_count: 12,
|
||||
},
|
||||
{
|
||||
name: 'Español',
|
||||
code: 'es',
|
||||
articles_count: 42,
|
||||
},
|
||||
{
|
||||
name: 'French',
|
||||
code: 'fr',
|
||||
articles_count: 29,
|
||||
},
|
||||
{
|
||||
name: 'Italian',
|
||||
code: 'it',
|
||||
articles_count: 4,
|
||||
},
|
||||
{
|
||||
name: 'German',
|
||||
code: 'de',
|
||||
articles_count: 66,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Chatwoot Docs',
|
||||
id: 2,
|
||||
color: null,
|
||||
custom_domain: 'doc',
|
||||
articles_count: 124,
|
||||
header_text: null,
|
||||
homepage_link: null,
|
||||
page_title: null,
|
||||
slug: 'second_portal',
|
||||
archived: false,
|
||||
config: {
|
||||
allowed_locales: [
|
||||
{
|
||||
code: 'en',
|
||||
name: 'English',
|
||||
articles_count: 123,
|
||||
},
|
||||
{
|
||||
code: 'fr',
|
||||
name: 'Français',
|
||||
articles_count: 123,
|
||||
},
|
||||
{
|
||||
code: 'de',
|
||||
name: 'Deutsch',
|
||||
articles_count: 32,
|
||||
},
|
||||
{
|
||||
code: 'es',
|
||||
name: 'Español',
|
||||
articles_count: 12,
|
||||
},
|
||||
{
|
||||
code: 'it',
|
||||
name: 'Italiano',
|
||||
articles_count: 8,
|
||||
},
|
||||
],
|
||||
},
|
||||
locales: [
|
||||
{
|
||||
name: 'English',
|
||||
code: 'en',
|
||||
articles_count: 12,
|
||||
},
|
||||
{
|
||||
name: 'Japanese',
|
||||
code: 'jp',
|
||||
articles_count: 4,
|
||||
},
|
||||
{
|
||||
name: 'Mandarin',
|
||||
code: 'CH',
|
||||
articles_count: 6,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
-58
@@ -1,58 +0,0 @@
|
||||
import PortalSwitch from '../PortalSwitch.vue';
|
||||
|
||||
export default {
|
||||
title: 'Components/Help Center/Portal Switch',
|
||||
component: PortalSwitch,
|
||||
argTypes: {
|
||||
active: {
|
||||
defaultValue: false,
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { PortalSwitch },
|
||||
template:
|
||||
'<PortalSwitch v-bind="$props" @click="onClick">{{label}}</PortalSwitch>',
|
||||
});
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
|
||||
Primary.args = {
|
||||
active: false,
|
||||
portal: {
|
||||
name: 'Chatwoot Help Center',
|
||||
articles_count: 124,
|
||||
locales: [
|
||||
{
|
||||
name: 'English',
|
||||
code: 'en',
|
||||
articles_count: 12,
|
||||
},
|
||||
{
|
||||
name: 'Español',
|
||||
code: 'es',
|
||||
articles_count: 42,
|
||||
},
|
||||
{
|
||||
name: 'French',
|
||||
code: 'fr',
|
||||
articles_count: 29,
|
||||
},
|
||||
{
|
||||
name: 'Italian',
|
||||
code: 'it',
|
||||
articles_count: 4,
|
||||
},
|
||||
{
|
||||
name: 'German',
|
||||
code: 'de',
|
||||
articles_count: 66,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
-134
@@ -1,134 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import Sidebar from '../Sidebar/Sidebar';
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail';
|
||||
|
||||
export default {
|
||||
title: 'Components/Help Center/Sidebar',
|
||||
component: { Sidebar, Thumbnail },
|
||||
argTypes: {
|
||||
thumbnailSrc: {
|
||||
defaultValue: '',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
headerTitle: {
|
||||
defaultValue: '',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
subTitle: {
|
||||
defaultValue: '',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
accessibleMenuItems: [],
|
||||
additionalSecondaryMenuItems: [],
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { Sidebar },
|
||||
template: '<sidebar v-bind="$props" @input="onSearch"></sidebar>',
|
||||
});
|
||||
|
||||
export const HelpCenterSidebarView = Template.bind({});
|
||||
HelpCenterSidebarView.args = {
|
||||
onSearch: action('search'),
|
||||
thumbnailSrc: '',
|
||||
headerTitle: 'Help Center',
|
||||
subTitle: 'English',
|
||||
accessibleMenuItems: [
|
||||
{
|
||||
icon: 'book',
|
||||
label: 'HELP_CENTER.ALL_ARTICLES',
|
||||
key: 'helpcenter_all',
|
||||
count: 199,
|
||||
toState: 'accounts/1/articles/all',
|
||||
toolTip: 'All Articles',
|
||||
toStateName: 'helpcenter_all',
|
||||
},
|
||||
{
|
||||
icon: 'pen',
|
||||
label: 'HELP_CENTER.MY_ARTICLES',
|
||||
key: 'helpcenter_mine',
|
||||
count: 112,
|
||||
toState: 'accounts/1/articles/mine',
|
||||
toolTip: 'My articles',
|
||||
toStateName: 'helpcenter_mine',
|
||||
},
|
||||
{
|
||||
icon: 'draft',
|
||||
label: 'HELP_CENTER.DRAFT',
|
||||
key: 'helpcenter_draft',
|
||||
count: 32,
|
||||
toState: 'accounts/1/articles/draft',
|
||||
toolTip: 'Draft',
|
||||
toStateName: 'helpcenter_draft',
|
||||
},
|
||||
{
|
||||
icon: 'archive',
|
||||
label: 'HELP_CENTER.ARCHIVED',
|
||||
key: 'helpcenter_archive',
|
||||
count: 10,
|
||||
toState: 'accounts/1/articles/archived',
|
||||
toolTip: 'Archived',
|
||||
toStateName: 'helpcenter_archive',
|
||||
},
|
||||
],
|
||||
additionalSecondaryMenuItems: [
|
||||
{
|
||||
icon: 'folder',
|
||||
label: 'HELP_CENTER.CATEGORY',
|
||||
hasSubMenu: true,
|
||||
key: 'category',
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
label: 'Getting started',
|
||||
count: 12,
|
||||
truncateLabel: true,
|
||||
toState: 'accounts/1/articles/categories/new',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'Channel',
|
||||
count: 19,
|
||||
truncateLabel: true,
|
||||
toState: 'accounts/1/articles/categories/channel',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: 'Feature',
|
||||
count: 24,
|
||||
truncateLabel: true,
|
||||
toState: 'accounts/1/articles/categories/feature',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: 'Advanced',
|
||||
count: 8,
|
||||
truncateLabel: true,
|
||||
toState: 'accounts/1/articles/categories/advanced',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: 'Mobile app',
|
||||
count: 3,
|
||||
truncateLabel: true,
|
||||
toState: 'accounts/1/articles/categories/mobile-app',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: 'Others',
|
||||
count: 39,
|
||||
truncateLabel: true,
|
||||
toState: 'accounts/1/articles/categories/others',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
-43
@@ -1,43 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import VTooltip from 'v-tooltip';
|
||||
import ReportMetricCard from './ReportMetricCard';
|
||||
|
||||
Vue.use(VTooltip, { defaultHtml: false });
|
||||
|
||||
export default {
|
||||
title: 'Components/CSAT/Metrics Card',
|
||||
component: ReportMetricCard,
|
||||
argTypes: {
|
||||
label: {
|
||||
defaultValue: '',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
value: {
|
||||
defaultValue: '',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
infoText: {
|
||||
defaultValue: '',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (_, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ReportMetricCard },
|
||||
template: '<report-metric-card v-bind="$props" />',
|
||||
});
|
||||
|
||||
export const ReportMetricCardTemplate = Template.bind({});
|
||||
ReportMetricCardTemplate.args = {
|
||||
infoText: 'No. of responses / No. of survey messages sent * 100',
|
||||
label: 'Satisfaction Score',
|
||||
value: '98.5',
|
||||
};
|
||||
@@ -1,19 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import CustomerSatisfaction from './CustomerSatisfaction';
|
||||
|
||||
export default {
|
||||
title: 'Components/CustomerSatisfaction',
|
||||
component: CustomerSatisfaction,
|
||||
argTypes: {},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { CustomerSatisfaction },
|
||||
template: '<customer-satisfaction />',
|
||||
});
|
||||
|
||||
export const Item = Template.bind({});
|
||||
Item.args = {
|
||||
onClick: action('Selected'),
|
||||
};
|
||||
@@ -1,65 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import Dropdown from './MultiselectDropdown';
|
||||
|
||||
export default {
|
||||
title: 'Components/Dropdown/Multiselect Dropdown',
|
||||
component: Dropdown,
|
||||
argTypes: {
|
||||
options: {
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
selectedItem: {
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
multiselectorTitle: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
multiselectorPlaceholder: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
noSearchResult: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
inputPlaceholder: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { Dropdown },
|
||||
template: '<dropdown v-bind="$props" @click="onClick"></dropdown>',
|
||||
});
|
||||
|
||||
export const MultiselectDropdown = Template.bind({});
|
||||
MultiselectDropdown.args = {
|
||||
onClick: action('Opened'),
|
||||
options: [
|
||||
{
|
||||
id: 1,
|
||||
availability_status: 'online',
|
||||
name: 'James Philip',
|
||||
thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
|
||||
},
|
||||
],
|
||||
|
||||
selectedItem: {
|
||||
id: 1,
|
||||
availability_status: 'online',
|
||||
name: 'James Philip',
|
||||
thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
|
||||
},
|
||||
};
|
||||
@@ -1,67 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import DropdownItems from './MultiselectDropdownItems';
|
||||
|
||||
export default {
|
||||
title: 'Components/Dropdown/Multiselect Dropdown Items',
|
||||
component: DropdownItems,
|
||||
argTypes: {
|
||||
options: {
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
selectedItems: {
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
inputPlaceholder: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
noSearchResult: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { DropdownItems },
|
||||
template:
|
||||
'<dropdown-items v-bind="$props" @click="onClick"></dropdown-items>',
|
||||
});
|
||||
|
||||
export const MultiselectDropdownItems = Template.bind({});
|
||||
MultiselectDropdownItems.args = {
|
||||
onClick: action('Added'),
|
||||
options: [
|
||||
{
|
||||
id: '0',
|
||||
name: 'None',
|
||||
thumbnail: '',
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
name: 'James Philip',
|
||||
availability_status: 'online',
|
||||
role: 'administrator',
|
||||
thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Support Team',
|
||||
thumbnail: '',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Agent',
|
||||
thumbnail: '',
|
||||
},
|
||||
],
|
||||
|
||||
selectedItems: [{ id: '1' }],
|
||||
};
|
||||
@@ -1,19 +0,0 @@
|
||||
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'),
|
||||
};
|
||||
@@ -1,58 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import LabelDropdown from './LabelDropdown';
|
||||
|
||||
export default {
|
||||
title: 'Components/Label/Dropdown',
|
||||
component: LabelDropdown,
|
||||
argTypes: {
|
||||
conversationId: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
accountLabels: {
|
||||
defaultValue: [
|
||||
{
|
||||
color: '#555',
|
||||
description: '',
|
||||
id: 1,
|
||||
title: 'sales',
|
||||
},
|
||||
{
|
||||
color: '#c242f5',
|
||||
description: '',
|
||||
id: 1,
|
||||
title: 'business',
|
||||
},
|
||||
{
|
||||
color: '#4287f5',
|
||||
description: '',
|
||||
id: 1,
|
||||
title: 'testing',
|
||||
},
|
||||
],
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
selectedLabels: {
|
||||
defaultValue: 'sales, testing',
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { LabelDropdown },
|
||||
template:
|
||||
'<label-dropdown v-bind="$props" @add="onAdd" @remove="onRemove"></label-dropdown>',
|
||||
});
|
||||
|
||||
export const Dropdown = Template.bind({});
|
||||
Dropdown.args = {
|
||||
onAdd: action('added'),
|
||||
onRemove: action('removed'),
|
||||
};
|
||||
@@ -1,39 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import LabelDropdownItem from './LabelDropdownItem';
|
||||
|
||||
export default {
|
||||
title: 'Components/Label/Item',
|
||||
component: LabelDropdownItem,
|
||||
argTypes: {
|
||||
title: {
|
||||
defaultValue: 'sales',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
color: {
|
||||
defaultValue: '#555',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
selected: {
|
||||
defaultValue: true,
|
||||
control: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { LabelDropdownItem },
|
||||
template:
|
||||
'<label-dropdown-item v-bind="$props" @click="onClick"></label-dropdown-item>',
|
||||
});
|
||||
|
||||
export const Item = Template.bind({});
|
||||
Item.args = {
|
||||
onClick: action('Selected'),
|
||||
};
|
||||
@@ -1,50 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import wootInput from './Input';
|
||||
|
||||
export default {
|
||||
title: 'Components/Form/Input',
|
||||
component: wootInput,
|
||||
argTypes: {
|
||||
label: {
|
||||
defaultValue: 'Email Address',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
type: {
|
||||
defaultValue: 'email',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
placeholder: {
|
||||
defaultValue: 'Please enter your email address',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
value: {
|
||||
defaultValue: 'John12@ync.in',
|
||||
control: {
|
||||
type: 'text ,number',
|
||||
},
|
||||
},
|
||||
error: {
|
||||
defaultValue: '',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { wootInput },
|
||||
template: '<woot-input v-bind="$props" @input="onClick"></woot-input>',
|
||||
});
|
||||
|
||||
export const Input = Template.bind({});
|
||||
Input.args = {
|
||||
onClick: action('Added'),
|
||||
};
|
||||
@@ -1,51 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import wootTextArea from './TextArea';
|
||||
|
||||
export default {
|
||||
title: 'Components/Form/Text Area',
|
||||
component: wootTextArea,
|
||||
argTypes: {
|
||||
label: {
|
||||
defaultValue: 'Message',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
type: {
|
||||
defaultValue: '',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
placeholder: {
|
||||
defaultValue: 'Please enter your message',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
value: {
|
||||
defaultValue: 'Lorem ipsum is a placeholder text commonly used',
|
||||
control: {
|
||||
type: 'text ,number',
|
||||
},
|
||||
},
|
||||
error: {
|
||||
defaultValue: '',
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { wootTextArea },
|
||||
template:
|
||||
'<woot-text-area v-bind="$props" @input="onClick"></woot-text-area>',
|
||||
});
|
||||
|
||||
export const TextArea = Template.bind({});
|
||||
TextArea.args = {
|
||||
onClick: action('Added'),
|
||||
};
|
||||
@@ -1,30 +0,0 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import ArticleHero from '../ArticleHero.vue'; // adjust this path to match your file's location
|
||||
|
||||
export default {
|
||||
title: 'Components/Widgets/ArticleHero',
|
||||
component: ArticleHero,
|
||||
argTypes: {
|
||||
articles: { control: 'array', description: 'Array of articles' },
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { ArticleHero },
|
||||
template:
|
||||
'<article-hero v-bind="$props" @view-all-articles="viewAllArticles" />',
|
||||
methods: {
|
||||
viewAllArticles: action('view-all-articles'),
|
||||
},
|
||||
});
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
articles: [
|
||||
{ title: 'Article 1', content: 'This is article 1.' },
|
||||
{ title: 'Article 2', content: 'This is article 2.' },
|
||||
{ title: 'Article 3', content: 'This is article 3.' },
|
||||
{ title: 'Article 4', content: 'This is article 4.' },
|
||||
],
|
||||
};
|
||||
Reference in New Issue
Block a user