feat: remove storybook
This commit is contained in:
Shivam Mishra
@@ -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({});
|
||||
Reference in New Issue
Block a user