chore: lint
continuous-integration/drone/pr Build is passing Details

This commit is contained in:
Dominik Pschenitschni 2022-04-09 19:15:46 +02:00
parent 698247adeb
commit fd308c25cf
Signed by: dpschen
GPG Key ID: B257AC0149F43A77
6 changed files with 42 additions and 42 deletions

View File

@ -1,4 +1,4 @@
import MyButton from './Button.vue';
import MyButton from './Button.vue'
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
export default {
@ -13,7 +13,7 @@ export default {
options: ['small', 'medium', 'large'],
},
},
};
}
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
const Template = (args) => ({
@ -21,32 +21,32 @@ const Template = (args) => ({
components: { MyButton },
// The story's `args` need to be mapped into the template through the `setup()` method
setup() {
return { args };
return { args }
},
// And then the `args` are bound to your component with `v-bind="args"`
template: '<my-button v-bind="args" />',
});
})
export const Primary = Template.bind({});
export const Primary = Template.bind({})
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
Primary.args = {
primary: true,
label: 'Button',
};
}
export const Secondary = Template.bind({});
export const Secondary = Template.bind({})
Secondary.args = {
label: 'Button',
};
}
export const Large = Template.bind({});
export const Large = Template.bind({})
Large.args = {
size: 'large',
label: 'Button',
};
}
export const Small = Template.bind({});
export const Small = Template.bind({})
Small.args = {
size: 'small',
label: 'Button',
};
}

View File

@ -3,8 +3,8 @@
</template>
<script>
import './button.css';
import { reactive, computed } from 'vue';
import './button.css'
import { reactive, computed } from 'vue'
export default {
name: 'my-button',
@ -21,7 +21,7 @@ export default {
size: {
type: String,
validator: function (value) {
return ['small', 'medium', 'large'].indexOf(value) !== -1;
return ['small', 'medium', 'large'].indexOf(value) !== -1
},
},
backgroundColor: {
@ -32,7 +32,7 @@ export default {
emits: ['click'],
setup(props, { emit }) {
props = reactive(props);
props = reactive(props)
return {
classes: computed(() => ({
'storybook-button': true,
@ -44,9 +44,9 @@ export default {
backgroundColor: props.backgroundColor,
})),
onClick() {
emit('click');
}
emit('click')
},
}
},
};
}
</script>

View File

@ -1,9 +1,9 @@
import MyHeader from './Header.vue';
import MyHeader from './Header.vue'
export default {
title: 'Example/Header',
component: MyHeader,
};
}
const Template = (args) => ({
// Components used in your story `template` are defined in the `components` object
@ -11,18 +11,18 @@ const Template = (args) => ({
// The story's `args` need to be mapped into the template through the `setup()` method
setup() {
// Story args can be spread into the returned object
return { ...args };
return { ...args }
},
// Then, the spread values can be accessed directly in the template
template: '<my-header :user="user" />',
});
})
export const LoggedIn = Template.bind({});
export const LoggedIn = Template.bind({})
LoggedIn.args = {
user: {},
};
}
export const LoggedOut = Template.bind({});
export const LoggedOut = Template.bind({})
LoggedOut.args = {
user: null,
};
}

View File

@ -30,8 +30,8 @@
</template>
<script>
import './header.css';
import MyButton from './Button.vue';
import './header.css'
import MyButton from './Button.vue'
export default {
name: 'my-header',
@ -45,5 +45,5 @@ export default {
},
emits: ['login', 'logout', 'createAccount'],
};
}
</script>

View File

@ -1,10 +1,10 @@
import MyPage from './Page.vue';
import * as HeaderStories from './Header.stories';
import MyPage from './Page.vue'
import * as HeaderStories from './Header.stories'
export default {
title: 'Example/Page',
component: MyPage,
};
}
const Template = (args) => ({
// Components used in your story `template` are defined in the `components` object
@ -12,19 +12,19 @@ const Template = (args) => ({
// The story's `args` need to be mapped into the template through the `setup()` method
setup() {
// Story args can be mapped to keys in the returned object
return { user: args.user };
return { user: args.user }
},
// Then, those values can be accessed directly in the template
template: '<my-page :user="user" />',
});
})
export const LoggedIn = Template.bind({});
export const LoggedIn = Template.bind({})
LoggedIn.args = {
// More on composing args: https://storybook.js.org/docs/vue/writing-stories/args#args-composition
...HeaderStories.LoggedIn.args,
};
}
export const LoggedOut = Template.bind({});
export const LoggedOut = Template.bind({})
LoggedOut.args = {
...HeaderStories.LoggedOut.args,
};
}

View File

@ -59,8 +59,8 @@
</template>
<script>
import './page.css';
import MyHeader from './Header.vue';
import './page.css'
import MyHeader from './Header.vue'
export default {
name: 'my-page',
@ -74,5 +74,5 @@ export default {
},
emits: ['login', 'logout', 'createAccount'],
};
}
</script>