Remove Storybook files and packages (#15040)
This commit is contained in:
negue
@@ -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