krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 22:57:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Inventory: fixes / layout (#11948)

Browse Source 
Co-authored-by: Sabe Jones <sabrecat@gmail.com>
This commit is contained in:
negue
2020-10-19 23:54:51 +02:00
committed by GitHub
parent d62930b9da
commit bad3f82dfb
48 changed files with 1612 additions and 431 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
website/client/src/components/ui/buttons.stories.js Normal file
View File

@@ -0,0 +1,129 @@
/* 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>
`,
}));