Remove Storybook files and packages (#15040)
This commit is contained in:
negue
@@ -1,43 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
|
||||
import bugReportModal from '@/components/bugReportModal';
|
||||
import bugReportSuccessModal from '@/components/bugReportSuccessModal';
|
||||
|
||||
const stories = storiesOf('Bug Report Modal', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories
|
||||
.add('bugReportModal', () => ({
|
||||
components: { bugReportModal },
|
||||
data () {
|
||||
return {
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<bug-report-modal></bug-report-modal>
|
||||
</div>
|
||||
`,
|
||||
mounted () {
|
||||
this.$root.$emit('bv::show::modal', 'bug-report-modal');
|
||||
},
|
||||
}))
|
||||
.add('bugReportSuccessModal', () => ({
|
||||
components: { bugReportSuccessModal },
|
||||
data () {
|
||||
return {
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<bug-report-success-modal></bug-report-success-modal>
|
||||
</div>
|
||||
`,
|
||||
mounted () {
|
||||
this.$root.$emit('bv::show::modal', 'bug-report-success-modal');
|
||||
},
|
||||
}));
|
||||
@@ -1,46 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
|
||||
import FaceAvatar from './faceAvatar.vue';
|
||||
import Avatar from './avatar.vue';
|
||||
import { userStyles } from '../../config/storybook/mock.data';
|
||||
import content from '../../../common/script/content/index';
|
||||
import getters from '@/store/getters';
|
||||
|
||||
storiesOf('Face Avatar', module)
|
||||
.add('simple', () => ({
|
||||
components: { FaceAvatar },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<face-avatar :member="user"></face-avatar>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
user: userStyles,
|
||||
};
|
||||
},
|
||||
}))
|
||||
.add('compare', () => ({
|
||||
components: { FaceAvatar, Avatar },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<face-avatar :member="user"></face-avatar>
|
||||
<avatar :member="user"></avatar>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
user: userStyles,
|
||||
};
|
||||
},
|
||||
state: {
|
||||
content,
|
||||
},
|
||||
store: {
|
||||
getters,
|
||||
state: {
|
||||
content,
|
||||
},
|
||||
},
|
||||
}));
|
||||
@@ -1,401 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import {
|
||||
collectionQuestLeaderParticipating,
|
||||
collectionQuestNotParticipating,
|
||||
createStory,
|
||||
groupBossQuestParticipating,
|
||||
groupBossQuestRage,
|
||||
groupCollectionQuest,
|
||||
groupCollectionQuestPending,
|
||||
} from './group.stories.utils';
|
||||
|
||||
storiesOf('Group Components|Party/Quest States', module)
|
||||
.add('Not a Member', () => createStory({
|
||||
template: `
|
||||
<div class="component-showcase">
|
||||
<right-sidebar :group="group" :is-party="true"
|
||||
:is-leader="false" :is-member="false"
|
||||
class="col-12"/>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
group: {
|
||||
leader: {
|
||||
|
||||
},
|
||||
quest: {
|
||||
},
|
||||
purchased: {
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
user: {
|
||||
data: {
|
||||
_id: 'some-user',
|
||||
party: {
|
||||
|
||||
},
|
||||
preferences: {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
challengeOptions: {},
|
||||
}))
|
||||
.add('Member/No Quest', () => createStory({
|
||||
template: `
|
||||
<div class="component-showcase">
|
||||
<right-sidebar :group="group" :is-party="true"
|
||||
:is-leader="false" :is-member="true"
|
||||
class="col-12"/>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
group: {
|
||||
leader: {
|
||||
|
||||
},
|
||||
quest: {
|
||||
},
|
||||
purchased: {
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
user: {
|
||||
data: {
|
||||
_id: 'some-user',
|
||||
party: {
|
||||
|
||||
},
|
||||
preferences: {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
challengeOptions: {},
|
||||
}))
|
||||
.add('Leader/No Quest', () => createStory({
|
||||
template: `
|
||||
<div class="component-showcase">
|
||||
<right-sidebar :group="group" :is-party="true"
|
||||
:is-leader="true" :is-member="true"
|
||||
class="col-12"/>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
group: {
|
||||
description: 'Some text',
|
||||
leader: {
|
||||
|
||||
},
|
||||
quest: {
|
||||
},
|
||||
purchased: {
|
||||
},
|
||||
privacy: 'private',
|
||||
},
|
||||
};
|
||||
},
|
||||
user: {
|
||||
data: {
|
||||
_id: 'some-user',
|
||||
party: {
|
||||
|
||||
},
|
||||
preferences: {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
challengeOptions: {},
|
||||
}))
|
||||
.add('Quest Owner/Quest Not Started', () => createStory({
|
||||
template: `
|
||||
<div class="component-showcase">
|
||||
<right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
group: groupCollectionQuest(false),
|
||||
};
|
||||
},
|
||||
user: {
|
||||
data: {
|
||||
_id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
|
||||
party: {
|
||||
|
||||
},
|
||||
preferences: {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
challengeOptions: {},
|
||||
}))
|
||||
.add('Member/Quest accepted/Quest Not Started', () => createStory({
|
||||
template: `
|
||||
<div class="component-showcase">
|
||||
<right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
group: groupCollectionQuest(false),
|
||||
};
|
||||
},
|
||||
user: {
|
||||
data: {
|
||||
_id: 'just-a-member',
|
||||
party: {
|
||||
|
||||
},
|
||||
preferences: {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
challengeOptions: {},
|
||||
}))
|
||||
.add('Member/Quest accepted/Started', () => createStory({
|
||||
template: `
|
||||
<div class="component-showcase">
|
||||
<right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
group: groupCollectionQuest(true),
|
||||
};
|
||||
},
|
||||
user: {
|
||||
data: {
|
||||
_id: 'just-a-member',
|
||||
party: {
|
||||
|
||||
},
|
||||
preferences: {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
challengeOptions: {},
|
||||
}))
|
||||
.add('Member/Quest Invite Pending', () => createStory({
|
||||
template: `
|
||||
<div class="component-showcase">
|
||||
<right-sidebar :group="group" :is-party="true"
|
||||
:is-member="true"
|
||||
class="col-12"/>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
group: groupCollectionQuestPending,
|
||||
};
|
||||
},
|
||||
user: {
|
||||
data: {
|
||||
_id: 'some-user',
|
||||
party: {
|
||||
quest: {
|
||||
RSVPNeeded: true,
|
||||
},
|
||||
},
|
||||
preferences: {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
challengeOptions: {},
|
||||
}))
|
||||
.add('Collection Quest/Quest Owner Participating', () => createStory({
|
||||
template: `
|
||||
<div class="component-showcase">
|
||||
<right-sidebar :group="group" :is-party="true" :is-member="true" :is-leader="true" class="col-12"/>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
group: collectionQuestLeaderParticipating,
|
||||
};
|
||||
},
|
||||
user: {
|
||||
data: {
|
||||
_id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
|
||||
party: {
|
||||
quest: {
|
||||
progress: {
|
||||
up: 0,
|
||||
down: 0,
|
||||
collectedItems: 2,
|
||||
collect: {},
|
||||
},
|
||||
},
|
||||
},
|
||||
preferences: {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
challengeOptions: {},
|
||||
}))
|
||||
.add('Collection Quest/Not Participating', () => createStory({
|
||||
template: `
|
||||
<div class="component-showcase">
|
||||
<right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
group: collectionQuestNotParticipating,
|
||||
};
|
||||
},
|
||||
user: {
|
||||
data: {
|
||||
_id: 'not-the-leader',
|
||||
party: {
|
||||
quest: {
|
||||
progress: {
|
||||
up: 0,
|
||||
down: 0,
|
||||
collectedItems: 2,
|
||||
collect: {},
|
||||
},
|
||||
},
|
||||
},
|
||||
preferences: {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
challengeOptions: {},
|
||||
}))
|
||||
.add('Boss Quest/Participating', () => createStory({
|
||||
template: `
|
||||
<div class="component-showcase">
|
||||
<right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
group: groupBossQuestParticipating,
|
||||
};
|
||||
},
|
||||
user: {
|
||||
data: {
|
||||
_id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
|
||||
party: {
|
||||
quest: {
|
||||
progress: {
|
||||
up: 20,
|
||||
down: 0,
|
||||
collectedItems: 2,
|
||||
collect: {},
|
||||
},
|
||||
},
|
||||
},
|
||||
preferences: {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
challengeOptions: {},
|
||||
}))
|
||||
.add('Boss Quest/Participating - No Pending', () => createStory({
|
||||
template: `
|
||||
<div class="component-showcase">
|
||||
<right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
group: groupBossQuestParticipating,
|
||||
};
|
||||
},
|
||||
user: {
|
||||
data: {
|
||||
_id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
|
||||
party: {
|
||||
quest: {
|
||||
progress: {
|
||||
up: 0,
|
||||
down: 0,
|
||||
collectedItems: 2,
|
||||
collect: {},
|
||||
},
|
||||
},
|
||||
},
|
||||
preferences: {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
challengeOptions: {},
|
||||
}))
|
||||
.add('Boss Quest/Rage Enabled', () => createStory({
|
||||
template: `
|
||||
<div class="component-showcase">
|
||||
<right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
group: groupBossQuestRage,
|
||||
};
|
||||
},
|
||||
user: {
|
||||
data: {
|
||||
_id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
|
||||
party: {
|
||||
quest: {
|
||||
progress: {
|
||||
up: 20,
|
||||
down: 0,
|
||||
collectedItems: 2,
|
||||
collect: {},
|
||||
},
|
||||
},
|
||||
},
|
||||
preferences: {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
challengeOptions: {},
|
||||
}))
|
||||
.add('Not a party', () => createStory({
|
||||
template: `
|
||||
<div class="component-showcase">
|
||||
<right-sidebar :group="group" :is-party="false" :is-member="true" class="col-12"/>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
group: {
|
||||
quest: {},
|
||||
leader: {
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
user: {
|
||||
data: {
|
||||
_id: 'some-user',
|
||||
party: {
|
||||
|
||||
},
|
||||
preferences: {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
challengeOptions: {},
|
||||
}));
|
||||
@@ -1,89 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import { quests } from '@/../../common/script/content/quests';
|
||||
import content from '@/../../common/script/content';
|
||||
import questDetailModal from './questDetailModal';
|
||||
import questCompleted from '../achievements/questCompleted';
|
||||
|
||||
const stories = storiesOf('Quests/Dialog', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories
|
||||
.add('selectQuestDialog', () => ({
|
||||
components: { questDetailModal },
|
||||
data () {
|
||||
return {
|
||||
quest: quests.goldenknight2,
|
||||
questWithDrop: quests.moon1,
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<quest-detail-modal :group="{}"></quest-detail-modal>
|
||||
</div>
|
||||
`,
|
||||
mounted () {
|
||||
this.$root.$emit('bv::show::modal', 'quest-detail-modal');
|
||||
},
|
||||
}))
|
||||
.add('questDetailModal', () => ({
|
||||
components: { questDetailModal },
|
||||
data () {
|
||||
return {
|
||||
quest: quests.goldenknight2,
|
||||
questWithDrop: quests.moon1,
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<quest-detail-modal :group="{}"></quest-detail-modal>
|
||||
</div>
|
||||
`,
|
||||
mounted () {
|
||||
this.$root.$emit('bv::show::modal', 'quest-detail-modal', {
|
||||
key: 'moon1',
|
||||
from: 'sidebar',
|
||||
});
|
||||
},
|
||||
}))
|
||||
.add('quest-completed', () => ({
|
||||
components: { questCompleted },
|
||||
data () {
|
||||
return {
|
||||
quest: quests.goldenknight2,
|
||||
questWithDrop: quests.moon1,
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<quest-completed></quest-completed>
|
||||
</div>
|
||||
`,
|
||||
mounted () {
|
||||
this.$root.$emit('bv::show::modal', 'quest-completed');
|
||||
},
|
||||
store: {
|
||||
state: {
|
||||
content,
|
||||
user: {
|
||||
data: {
|
||||
stats: {},
|
||||
tags: [],
|
||||
items: {
|
||||
quests: {
|
||||
moon1: 3,
|
||||
},
|
||||
},
|
||||
party: {
|
||||
quest: {
|
||||
completed: 'vice3',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}));
|
||||
@@ -1,34 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
|
||||
import MemberDetails from './memberDetails.vue';
|
||||
import MemberDetailsNew from './memberDetailsNew.vue';
|
||||
import { userStyles } from '../../config/storybook/mock.data';
|
||||
|
||||
storiesOf('Member Details', module)
|
||||
.add('party header (old)', () => ({
|
||||
components: { MemberDetails },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<member-details :member="user"></member-details>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
user: userStyles,
|
||||
};
|
||||
},
|
||||
}))
|
||||
.add('quest participants (new)', () => ({
|
||||
components: { MemberDetailsNew },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<member-details-new :member="user"></member-details-new>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
user: userStyles,
|
||||
};
|
||||
},
|
||||
}));
|
||||
@@ -1,49 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
|
||||
import PaymentsButtonsList from './list.vue';
|
||||
import getStore from '@/store';
|
||||
import { setup as setupPayments } from '@/libs/payments';
|
||||
|
||||
setupPayments();
|
||||
|
||||
storiesOf('Subscriptions/Payments Buttons', module)
|
||||
.add('simple', () => ({
|
||||
components: { PaymentsButtonsList },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<payments-buttons-list
|
||||
:amazon-data="{type: 'single'}"
|
||||
:stripe-fn="() => {}"
|
||||
:paypal-fn="() => {}"
|
||||
></payments-buttons-list>
|
||||
</div>
|
||||
`,
|
||||
store: getStore(),
|
||||
}))
|
||||
.add('disabled', () => ({
|
||||
components: { PaymentsButtonsList },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<payments-buttons-list
|
||||
:disabled="true"
|
||||
:amazon-data="{type: 'single'}"
|
||||
:stripe-fn="() => {}"
|
||||
:paypal-fn="() => {}"
|
||||
></payments-buttons-list>
|
||||
</div>
|
||||
`,
|
||||
store: getStore(),
|
||||
}))
|
||||
.add('only stripe and amazon (example)', () => ({
|
||||
components: { PaymentsButtonsList },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<payments-buttons-list
|
||||
:amazon-data="{type: 'single'}"
|
||||
:stripe-fn="() => {}"
|
||||
></payments-buttons-list>
|
||||
</div>
|
||||
`,
|
||||
store: getStore(),
|
||||
}));
|
||||
@@ -1,37 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
|
||||
import Subscription from './subscription.vue';
|
||||
import { mockStore } from '../../../config/storybook/mock.data';
|
||||
|
||||
storiesOf('Subscriptions/Detail Page', module)
|
||||
.add('subscribed', () => ({
|
||||
components: { Subscription },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<subscription ></subscription>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
};
|
||||
},
|
||||
store: mockStore({
|
||||
userData: {
|
||||
purchased: {
|
||||
plan: {
|
||||
customerId: 'customer-id',
|
||||
planId: 'plan-id',
|
||||
subscriptionId: 'sub-id',
|
||||
gemsBought: 22,
|
||||
dateUpdated: new Date(2021, 0, 15),
|
||||
consecutive: {
|
||||
count: 2,
|
||||
gemCapExtra: 4,
|
||||
offset: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
}));
|
||||
@@ -1,82 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import { quests } from '@/../../common/script/content/quests';
|
||||
import questRewards from './questRewards';
|
||||
import itemWithLabel from '../itemWithLabel';
|
||||
import questPopover from './questPopover';
|
||||
|
||||
const stories = storiesOf('Quests/Sub Components', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories
|
||||
.add('questRewads', () => ({
|
||||
components: { questRewards },
|
||||
data () {
|
||||
return {
|
||||
quest: quests.goldenknight2,
|
||||
questWithDrop: quests.stressbeast,
|
||||
questWithGear: quests.moon1,
|
||||
evilsanta: quests.evilsanta,
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<quest-rewards :quest="quest"></quest-rewards>
|
||||
<quest-rewards :quest="questWithDrop"></quest-rewards>
|
||||
<quest-rewards :quest="questWithGear"></quest-rewards>
|
||||
<quest-rewards :quest="evilsanta"></quest-rewards>
|
||||
</div>
|
||||
`,
|
||||
}))
|
||||
.add('itemWithLabel', () => ({
|
||||
components: { itemWithLabel },
|
||||
data () {
|
||||
return {
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<item-with-label :item="{}">
|
||||
<div slot="itemContent">
|
||||
|
||||
</div>
|
||||
<div slot="itemImage">
|
||||
Image
|
||||
</div>
|
||||
<div slot="label">
|
||||
Label
|
||||
</div>
|
||||
</item-with-label>
|
||||
|
||||
<item-with-label :item="{}" label-class="purple">
|
||||
<div slot="itemContent">
|
||||
|
||||
</div>
|
||||
<div slot="itemImage">
|
||||
Image
|
||||
</div>
|
||||
<div slot="label">
|
||||
Label
|
||||
</div>
|
||||
</item-with-label>
|
||||
</div>
|
||||
`,
|
||||
}))
|
||||
.add('questPopover', () => ({
|
||||
components: { questPopover },
|
||||
data () {
|
||||
return {
|
||||
quest: quests.goldenknight2,
|
||||
quest2: quests.moon1,
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<quest-popover :item="quest"></quest-popover>
|
||||
<quest-popover :item="quest2"></quest-popover>
|
||||
</div>
|
||||
`,
|
||||
}));
|
||||
@@ -1,215 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { boolean, withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Notification from './notification';
|
||||
import Notifications from './notifications';
|
||||
import notificationsMixin from '../../mixins/notifications';
|
||||
|
||||
const stories = storiesOf('Notifications', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories
|
||||
.add('notifications overview', () => ({
|
||||
components: {
|
||||
Notification,
|
||||
},
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: flex-start">
|
||||
<Notification v-for="notification of notifications"
|
||||
:notification="notification"
|
||||
:style="{outline: showBounds ? '1px solid green': ''}"
|
||||
style="margin-right: 1rem">
|
||||
|
||||
</Notification> <br/>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
data () {
|
||||
const notifications = [];
|
||||
|
||||
notifications.push({
|
||||
type: 'hp',
|
||||
sign: '+',
|
||||
text: '+2',
|
||||
});
|
||||
|
||||
notifications.push({
|
||||
type: 'hp',
|
||||
sign: '-',
|
||||
text: '-2',
|
||||
});
|
||||
|
||||
notifications.push({
|
||||
type: 'mp',
|
||||
sign: '+',
|
||||
text: '+2',
|
||||
});
|
||||
|
||||
notifications.push({
|
||||
type: 'mp',
|
||||
sign: '-',
|
||||
text: '-2',
|
||||
});
|
||||
|
||||
notifications.push({
|
||||
type: 'xp',
|
||||
sign: '+',
|
||||
text: '+12',
|
||||
});
|
||||
|
||||
notifications.push({
|
||||
type: 'xp',
|
||||
sign: '-',
|
||||
text: '-12',
|
||||
});
|
||||
|
||||
notifications.push({
|
||||
type: 'gp',
|
||||
sign: '+',
|
||||
text: '+12',
|
||||
});
|
||||
|
||||
notifications.push({
|
||||
type: 'gp',
|
||||
sign: '-',
|
||||
text: '-12',
|
||||
});
|
||||
|
||||
notifications.push({
|
||||
type: 'streak',
|
||||
text: '12',
|
||||
});
|
||||
|
||||
|
||||
notifications.push({
|
||||
type: 'damage',
|
||||
sign: '+',
|
||||
text: '12',
|
||||
});
|
||||
|
||||
notifications.push({
|
||||
type: 'drop',
|
||||
icon: 'shop_weapon_wizard_2',
|
||||
text: 'Dropped something with a longer text to try',
|
||||
});
|
||||
|
||||
notifications.push({
|
||||
type: 'drop',
|
||||
icon: 'Pet_Egg_FlyingPig',
|
||||
text: 'Dropped flying pig egg',
|
||||
});
|
||||
|
||||
notifications.push({
|
||||
type: 'drop',
|
||||
icon: 'Pet_Food_Strawberry',
|
||||
text: 'You’ve found a Strawberry!',
|
||||
});
|
||||
|
||||
notifications.push({
|
||||
type: 'info',
|
||||
text: 'Info',
|
||||
});
|
||||
|
||||
notifications.push({
|
||||
type: 'success',
|
||||
text: 'Success!',
|
||||
});
|
||||
notifications.push({
|
||||
type: 'crit',
|
||||
text: 'Crit!',
|
||||
});
|
||||
notifications.push({
|
||||
type: 'lvl',
|
||||
text: 'Lvl Up',
|
||||
});
|
||||
|
||||
notifications.push({
|
||||
type: 'error',
|
||||
text: 'This is an error message. If it is too long, we can wrap to show the rest of the message',
|
||||
});
|
||||
|
||||
return {
|
||||
notifications,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
showBounds: {
|
||||
default: boolean('show bounds', false),
|
||||
},
|
||||
},
|
||||
}))
|
||||
.add('trigger notifications', () => ({
|
||||
components: {
|
||||
Notifications,
|
||||
},
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<button @click="addNotification()">Add Notifications</button>
|
||||
|
||||
<button @click="crit(1337)">Crit</button>
|
||||
|
||||
<button @click="drop('Drop', {type:'weapon', key: 'wizard_2'})">Drop</button>
|
||||
|
||||
<button @click="quest('quest', 'val')">Quest</button>
|
||||
<button @click="damage(-13)">Damage</button>
|
||||
<button @click="exp(42)">Exp</button>
|
||||
<button @click="error('some error')">Error</button>
|
||||
|
||||
<br/>
|
||||
|
||||
<button @click="gp(23, 0)">Gold</button>
|
||||
|
||||
|
||||
<button @click="hp(23)">HP</button>
|
||||
<button @click="mp(23)">MP</button>
|
||||
|
||||
<button @click="lvl()">LVL</button>
|
||||
|
||||
<button @click="streak('Streak')">Streak</button>
|
||||
|
||||
<br/>
|
||||
<button @click="markdown('You cast a skill')">Markdown</button>
|
||||
|
||||
|
||||
<Notifications :prevent-queue="preventQueue"
|
||||
:debug-mode="debugMode"
|
||||
:style="{outline: showBounds ? '1px solid green': ''}">
|
||||
</Notifications>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
showBounds: {
|
||||
default: boolean('show bounds', false),
|
||||
},
|
||||
preventQueue: {
|
||||
default: boolean('prevent removing', false),
|
||||
},
|
||||
debugMode: {
|
||||
default: boolean('debug mode', true),
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {};
|
||||
},
|
||||
mixins: [notificationsMixin],
|
||||
methods: {
|
||||
addNotification () {
|
||||
this.text('notification!!');
|
||||
this.text('notification2!!');
|
||||
this.text('notification3!!');
|
||||
this.error('This should stay visible');
|
||||
this.text('notification4!!');
|
||||
this.exp(125);
|
||||
this.damage(-2);
|
||||
|
||||
this.error('This should stay visible too');
|
||||
this.text('notification5!!');
|
||||
this.exp(125);
|
||||
this.damage(-2);
|
||||
},
|
||||
},
|
||||
}));
|
||||
@@ -1,46 +0,0 @@
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import CheckList from './checklist.vue';
|
||||
|
||||
const stories = storiesOf('CheckList', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories
|
||||
.add('simple', () => ({
|
||||
components: { CheckList },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px; background: white">
|
||||
<check-list :items.sync="checklist">
|
||||
|
||||
</check-list>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
Data: <br/>
|
||||
{{ checklist }}
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
checklist: [
|
||||
{
|
||||
id: 'c0890cd2-3c69-4889-bf2c-b63ac0ee6628',
|
||||
text: 'first',
|
||||
completed: false,
|
||||
},
|
||||
{
|
||||
id: '5b913020-b340-4099-9a53-afcd27dc5637',
|
||||
text: 'second',
|
||||
completed: true,
|
||||
},
|
||||
{
|
||||
id: '77b52a8e-4a0e-4717-9650-55fb5462b42f',
|
||||
text: 'third',
|
||||
completed: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
}));
|
||||
@@ -1,124 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { withKnobs, number } from '@storybook/addon-knobs';
|
||||
|
||||
import MultiList from './multiList';
|
||||
import SelectMulti from './selectMulti';
|
||||
|
||||
const stories = storiesOf('Multiple Select List', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
const exampleTagList = [
|
||||
1, 2, 3,
|
||||
];
|
||||
|
||||
const allTags = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Small Tag',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'This is a long tag',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'This is a long tag',
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: 'This is a different tag',
|
||||
},
|
||||
{
|
||||
id: 9001,
|
||||
name: 'OVER 9000',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Four',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Five :tada:',
|
||||
challenge: true,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'Six',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: 'Seven **Markdown**',
|
||||
},
|
||||
];
|
||||
|
||||
stories
|
||||
.add('tag-list', () => ({
|
||||
components: { MultiList },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<MultiList :max-items="maxTags" :items="tagList"></MultiList>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
tagList: {
|
||||
default: allTags,
|
||||
},
|
||||
maxTags: {
|
||||
default: number('Max-Tags', 3),
|
||||
},
|
||||
},
|
||||
}))
|
||||
.add('select-tag', () => ({
|
||||
components: { SelectMulti },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<SelectMulti :selectedItems="tagList"
|
||||
:add-new="true"
|
||||
:all-items="allTags"
|
||||
style="width: 400px"
|
||||
@changed="tagList = $event"
|
||||
@addNew="added = $event">
|
||||
|
||||
</SelectMulti>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
Added event: {{ added }}
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
tagList: exampleTagList,
|
||||
added: '',
|
||||
};
|
||||
},
|
||||
props: {
|
||||
allTags: {
|
||||
default: allTags,
|
||||
},
|
||||
},
|
||||
}))
|
||||
.add('longer select-tag', () => ({
|
||||
components: { SelectMulti },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<SelectMulti :selectedItems="tagList"
|
||||
:all-items="allTags"
|
||||
style="width: 400px"
|
||||
@changed="tagList = $event"></SelectMulti>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
tagList: [],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
allTags: {
|
||||
default: allTags,
|
||||
},
|
||||
},
|
||||
}));
|
||||
@@ -1,129 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import positiveIcon from '@/assets/svg/positive.svg';
|
||||
|
||||
const stories = storiesOf('Buttons', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories
|
||||
.add('all', () => ({
|
||||
components: { },
|
||||
data () {
|
||||
return {
|
||||
icon: positiveIcon,
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px; display: flex; flex-direction: row;">
|
||||
<div class="mr-3">
|
||||
<h3>Button</h3>
|
||||
<button class="btn btn-primary">Button Primary</button>
|
||||
<br/><br/>
|
||||
<button class="btn btn-primary" disabled>Button Primary Disabled</button>
|
||||
<br/><br/>
|
||||
|
||||
<button class="btn btn-secondary">Button Secondary</button>
|
||||
<br/><br/>
|
||||
<button class="btn btn-secondary" disabled>Button Secondary Disabled</button>
|
||||
</div>
|
||||
<div class="">
|
||||
<h3>Button with Icon</h3>
|
||||
<button class="btn btn-primary with-icon">
|
||||
<span class="svg-icon color inline icon-12 mr-2"
|
||||
v-html="icon"
|
||||
>
|
||||
|
||||
</span>
|
||||
<span class="button-label">
|
||||
Button Primary
|
||||
</span>
|
||||
</button>
|
||||
<br/>
|
||||
<button class="btn btn-primary with-icon" disabled>
|
||||
<span class="svg-icon color inline icon-12 mr-2"
|
||||
v-html="icon"
|
||||
>
|
||||
|
||||
</span>
|
||||
<span class="button-label">
|
||||
Button Primary Disabled
|
||||
</span>
|
||||
</button>
|
||||
<br/>
|
||||
|
||||
<button class="btn btn-secondary with-icon">
|
||||
<span class="svg-icon color inline icon-12 mr-2"
|
||||
v-html="icon"
|
||||
>
|
||||
|
||||
</span>
|
||||
<span class="button-label">
|
||||
Button Secondary
|
||||
</span>
|
||||
</button>
|
||||
<br/>
|
||||
<button class="btn btn-secondary with-icon" disabled>
|
||||
<span class="svg-icon color inline icon-12 mr-2"
|
||||
v-html="icon"
|
||||
>
|
||||
|
||||
</span>
|
||||
<span class="button-label">
|
||||
Button Secondary Disabled
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
}))
|
||||
.add('dropdowns', () => ({
|
||||
components: { },
|
||||
data () {
|
||||
return {
|
||||
items: ['one', 'two', 'three'],
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px; display: flex; flex-direction: row;">
|
||||
<div class="mr-3">
|
||||
<h3>Dropdowns</h3>
|
||||
<b-dropdown
|
||||
text="Dropdown Primary"
|
||||
right="right"
|
||||
>
|
||||
<b-dropdown-item
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
>
|
||||
{{ item }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<br/><br/>
|
||||
<b-dropdown
|
||||
text="Dropdown Primary Disabled"
|
||||
right="right"
|
||||
disabled
|
||||
>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
<div class="">
|
||||
<h3>Button</h3>
|
||||
<button class="btn btn-secondary">
|
||||
<span class="button-label">
|
||||
Button Primary
|
||||
</span>
|
||||
</button>
|
||||
<br/>
|
||||
<br/>
|
||||
<button class="btn btn-secondary" disabled>
|
||||
<span class="button-label">
|
||||
Button Primary Disabled
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
}));
|
||||
@@ -1,70 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Checkbox from './checkbox';
|
||||
import ToggleCheckbox from './toggleCheckbox';
|
||||
|
||||
const stories = storiesOf('Checkbox', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories
|
||||
.add('checkbox', () => ({
|
||||
components: {
|
||||
Checkbox,
|
||||
},
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<Checkbox text="My Checkbox" id="someId"></Checkbox> <br/>
|
||||
<Checkbox text="My Checked Checkbox" id="someOtherId" :checked.sync="checked"></Checkbox>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
checked: true,
|
||||
};
|
||||
},
|
||||
}))
|
||||
.add('Toggle Checkbox Group', () => ({
|
||||
components: {
|
||||
ToggleCheckbox,
|
||||
},
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
{{ checked }}
|
||||
<div class="toggle-group" style="width: 300px">
|
||||
<ToggleCheckbox text="Su"></ToggleCheckbox>
|
||||
<ToggleCheckbox text="Mo"
|
||||
:checked.sync="checked"></ToggleCheckbox>
|
||||
<ToggleCheckbox text="Tu"></ToggleCheckbox>
|
||||
<ToggleCheckbox text="We"
|
||||
:checked.sync="checked"></ToggleCheckbox>
|
||||
<ToggleCheckbox text="Th"></ToggleCheckbox>
|
||||
<ToggleCheckbox text="Fr"
|
||||
:checked.sync="checked"></ToggleCheckbox>
|
||||
<ToggleCheckbox text="Sa"
|
||||
:checked.sync="checked"
|
||||
:disabled="true"></ToggleCheckbox>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
Disabled:
|
||||
<div class="toggle-group" style="width: 300px">
|
||||
<ToggleCheckbox text="Su" :disabled="true"></ToggleCheckbox>
|
||||
<ToggleCheckbox text="Mo" :disabled="true"></ToggleCheckbox>
|
||||
<ToggleCheckbox text="Tu" :disabled="true"></ToggleCheckbox>
|
||||
<ToggleCheckbox text="We" :disabled="true"></ToggleCheckbox>
|
||||
<ToggleCheckbox text="Th" :disabled="true"></ToggleCheckbox>
|
||||
<ToggleCheckbox text="Fr" :disabled="true"></ToggleCheckbox>
|
||||
<ToggleCheckbox text="Sa" :disabled="true"></ToggleCheckbox>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
checked: true,
|
||||
};
|
||||
},
|
||||
}));
|
||||
@@ -1,32 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { withKnobs, number } from '@storybook/addon-knobs';
|
||||
|
||||
import CountBadge from './countBadge.vue';
|
||||
|
||||
const stories = storiesOf('Count Badge', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories
|
||||
.add('simple', () => ({
|
||||
components: { CountBadge },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<count-badge :count="2" :show="true"></count-badge>
|
||||
</div>
|
||||
`,
|
||||
}))
|
||||
.add('bind count', () => ({
|
||||
components: { CountBadge },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<count-badge :count="count" :show="true"></count-badge>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
count: {
|
||||
default: number('Count', 3),
|
||||
},
|
||||
},
|
||||
}));
|
||||
@@ -1,19 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import datepicker from './datepicker.vue';
|
||||
|
||||
const stories = storiesOf('Date Picker', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories
|
||||
.add('simple', () => ({
|
||||
components: { datepicker },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<datepicker></datepicker>
|
||||
</div>
|
||||
`,
|
||||
}));
|
||||
@@ -1,71 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { number, text, withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import positiveIcon from '@/assets/svg/positive.svg';
|
||||
|
||||
const stories = storiesOf('Input-Group', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories
|
||||
.add('states', () => ({
|
||||
components: { },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend positive-addon input-group-icon">
|
||||
<div
|
||||
class="svg-icon"
|
||||
v-html="icon"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
v-model="number"
|
||||
class="form-control"
|
||||
type="number"
|
||||
min="0"
|
||||
required="required"
|
||||
ref="input"
|
||||
>
|
||||
</div>
|
||||
<br />
|
||||
<button class="btn btn-dark" @click="$refs.input.focus()">Focus ^</button>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<div class="input-group">
|
||||
|
||||
<input
|
||||
v-model="number"
|
||||
class="form-control"
|
||||
type="number"
|
||||
min="0"
|
||||
required="required"
|
||||
>
|
||||
<div class="input-group-append positive-addon input-group-icon">
|
||||
<div
|
||||
class="svg-icon"
|
||||
v-html="icon"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
icon: positiveIcon,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
text: {
|
||||
default: text('Input Text', 'example text'),
|
||||
},
|
||||
number: {
|
||||
default: number('Input Number', 0),
|
||||
},
|
||||
},
|
||||
}));
|
||||
@@ -1,45 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
|
||||
const stories = storiesOf('Margins', module);
|
||||
|
||||
const margins = [
|
||||
'mr-1 ml-1 my-1',
|
||||
'mx-2 ml-3 my-2',
|
||||
'mx-2 ml-1 my-1',
|
||||
'ml-1 mr-4',
|
||||
'ml-2 mr-2 my-1',
|
||||
'ml-75 my-3 mr-2',
|
||||
];
|
||||
|
||||
stories
|
||||
.add('overview', () => ({
|
||||
components: { },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<span class="background inline-block">
|
||||
<span class="content mx-1 my-1 inline-block">
|
||||
<span class="text mx-1 my-1 inline-block">
|
||||
The margin between gray and teal is the margin content.
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<span v-for="m in margins"
|
||||
class="background mx-1 my-1 inline-block">
|
||||
<span class="content inline-block" :class="m">
|
||||
<span class="mx-1 my-1 inline-block">{{m}}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`,
|
||||
|
||||
data () {
|
||||
return {
|
||||
margins,
|
||||
};
|
||||
},
|
||||
}));
|
||||
@@ -1,24 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { withKnobs, boolean } from '@storybook/addon-knobs';
|
||||
|
||||
import PinBadge from './pinBadge.vue';
|
||||
|
||||
const stories = storiesOf('Pin Badge', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories
|
||||
.add('states', () => ({
|
||||
components: { PinBadge },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<pin-badge :pinned="pinned"></pin-badge>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
pinned: {
|
||||
default: boolean('Pinned', false),
|
||||
},
|
||||
},
|
||||
}));
|
||||
@@ -1,110 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import SelectList from './selectList.vue';
|
||||
import SelectDifficulty from '../tasks/modal-controls/selectDifficulty';
|
||||
import SelectTranslatedArray from '../tasks/modal-controls/selectTranslatedArray';
|
||||
|
||||
const stories = storiesOf('Select List', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories
|
||||
.add('states', () => ({
|
||||
components: { SelectList },
|
||||
template: `
|
||||
<div class="m-xl">
|
||||
Hover / Click on:
|
||||
<select-list class="mb-4"
|
||||
:items="items"
|
||||
:key-prop="'key'"
|
||||
:value="selected"
|
||||
@select="selected = $event">
|
||||
<template v-slot:item="{ item }">
|
||||
<div v-if="item">
|
||||
Template: {{ item?.key }} - {{ item?.value.text }}
|
||||
</div>
|
||||
<div v-else>
|
||||
Nothing selected
|
||||
</div>
|
||||
</template>
|
||||
</select-list>
|
||||
|
||||
Disabled:
|
||||
<select-list :disabled="true"
|
||||
:value="selected"
|
||||
:items="items"
|
||||
:key-prop="'key'"
|
||||
class="mb-4">
|
||||
<template v-slot:item="{ item }">
|
||||
Template: {{ item?.key }} - {{ item?.value.text }}
|
||||
</template>
|
||||
</select-list>
|
||||
|
||||
<br/>
|
||||
Selected: {{ selected }} <br/>
|
||||
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
selected: null,
|
||||
items: [
|
||||
{
|
||||
key: 1,
|
||||
value: {
|
||||
text: 'First',
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
value: {
|
||||
text: 'Second',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
}))
|
||||
.add('difficulty', () => ({
|
||||
components: { SelectDifficulty },
|
||||
template: `
|
||||
<div class="m-xl">
|
||||
<select-difficulty
|
||||
:value="selected"
|
||||
@select="selected = $event"
|
||||
>
|
||||
|
||||
</select-difficulty>
|
||||
|
||||
Selected: {{ selected }}
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
selected: 2,
|
||||
};
|
||||
},
|
||||
}))
|
||||
.add('translated array', () => ({
|
||||
components: { SelectTranslatedArray },
|
||||
template: `
|
||||
<div class="m-xl">
|
||||
<select-translated-array
|
||||
:items="['daily', 'weekly', 'monthly']"
|
||||
:value="selected"
|
||||
@select="selected = $event"
|
||||
>
|
||||
|
||||
</select-translated-array>
|
||||
|
||||
Selected: {{ selected }}
|
||||
</div>
|
||||
`,
|
||||
data () {
|
||||
return {
|
||||
selected: 'weekly',
|
||||
};
|
||||
},
|
||||
}));
|
||||
@@ -1,32 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { text, withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
const stories = storiesOf('Textarea', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories
|
||||
.add('states', () => ({
|
||||
components: { },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<textarea autofocus ref="area">Normal {{text}}</textarea>
|
||||
<br />
|
||||
<button class="btn btn-dark" @click="$refs.area.focus()">Focus ^</button>
|
||||
<br />
|
||||
<textarea placeholder="placeholder"></textarea>
|
||||
<br />
|
||||
|
||||
<textarea disabled>Disabled {{text}}</textarea><br />
|
||||
|
||||
<textarea readonly>Readonly {{text}}</textarea> <br />
|
||||
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
text: {
|
||||
default: text('Area Message', 'example text'),
|
||||
},
|
||||
},
|
||||
}));
|
||||
@@ -1,39 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import { text, withKnobs } from '@storybook/addon-knobs';
|
||||
import toggleSwitch from './toggleSwitch';
|
||||
|
||||
const stories = storiesOf('Toggle Switch', module);
|
||||
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories
|
||||
.add('label only', () => ({
|
||||
components: { toggleSwitch },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<toggle-switch :label="label"></toggle-switch>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
label: {
|
||||
default: text('Label', 'example text'),
|
||||
},
|
||||
},
|
||||
}))
|
||||
.add('with description', () => ({
|
||||
components: { toggleSwitch },
|
||||
template: `
|
||||
<div style="position: absolute; margin: 20px">
|
||||
<toggle-switch :label="label" :hover-text="description"></toggle-switch>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
label: {
|
||||
default: text('Label', 'example text'),
|
||||
},
|
||||
description: {
|
||||
default: text('Description', 'description text'),
|
||||
},
|
||||
},
|
||||
}));
|
||||
Reference in New Issue
Block a user