feat: more storybook stories

components/button/Button.stories.js

@@ -1,7 +0,0 @@
-export default {
-  title: "Button",
-}
-
-export const PrimaryButton = () => `<ButtonPrimary label="Primary" />`
-
-export const SecondaryButton = () => `<ButtonSecondary label="Secondary" />`

components/button/Primary.stories.js

@@ -0,0 +1,17 @@
+import Primary from "./Primary.vue"
+
+export default {
+  component: Primary,
+  title: "Components/Button",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { Primary },
+  props: Object.keys(argTypes),
+  template: `<ButtonPrimary v-bind="$props" v-on="$props" />`,
+})
+
+export const ButtonPrimary = Template.bind({})
+ButtonPrimary.args = {
+  label: "Primary",
+}

components/button/Secondary.stories.js

@@ -0,0 +1,17 @@
+import Secondary from "./Secondary.vue"
+
+export default {
+  component: Secondary,
+  title: "Components/Button",
+}
+
+const Template = (_args, { argTypes }) => ({
+  components: { Secondary },
+  props: Object.keys(argTypes),
+  template: `<ButtonSecondary v-bind="$props" v-on="$props" />`,
+})
+
+export const ButtonSecondary = Template.bind({})
+ButtonSecondary.args = {
+  label: "Secondary",
+}