chore: lint
continuous-integration/drone/pr Build is passing
Details
continuous-integration/drone/pr Build is passing
Details
This commit is contained in:
parent
698247adeb
commit
fd308c25cf
|
@ -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',
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Reference in New Issue