Skip to content

Commit 9e9acdb

Browse files
cylewaitforitcylewaitforit
committed
fix: move ButtonGroup to own stories file
1 parent ca3ff3f commit 9e9acdb

3 files changed

Lines changed: 151 additions & 87 deletions

File tree

‎app/components/Button/Button.stories.ts‎

Lines changed: 38 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import type { Meta, StoryObj } from '@storybook-vue/nuxt'
22
import ButtonBase from './Base.vue'
3-
import ButtonGroup from './Group.vue'
43

54
const meta = {
65
component: ButtonBase,
7-
subcomponents: { ButtonGroup },
86
parameters: {
97
docs: {
108
source: {
@@ -14,43 +12,68 @@ const meta = {
1412
},
1513
},
1614
},
17-
render: args => ({
18-
components: { ButtonBase },
19-
setup() {
20-
return { args }
21-
},
22-
template: `<ButtonBase v-bind="args">{{ $t("nav.settings") }}</ButtonBase>`,
23-
}),
2415
tags: ['autodocs'],
2516
} satisfies Meta<typeof ButtonBase>
2617

2718
export default meta
2819
type Story = StoryObj<typeof meta>
2920

30-
export const Default: Story = {}
21+
export const Default: Story = {
22+
args: {
23+
default: 'Button Text',
24+
},
25+
}
3126

3227
export const Primary: Story = {
3328
args: {
3429
variant: 'primary',
3530
},
31+
render: args => ({
32+
components: { ButtonBase },
33+
setup() {
34+
return { args }
35+
},
36+
template: `<ButtonBase v-bind="args">{{ $t("nav.settings") }}</ButtonBase>`,
37+
}),
3638
}
3739

3840
export const Secondary: Story = {
3941
args: {
4042
variant: 'secondary',
4143
},
44+
render: args => ({
45+
components: { ButtonBase },
46+
setup() {
47+
return { args }
48+
},
49+
template: `<ButtonBase v-bind="args">{{ $t("nav.settings") }}</ButtonBase>`,
50+
}),
4251
}
4352

4453
export const Small: Story = {
4554
args: {
4655
size: 'small',
4756
},
57+
render: args => ({
58+
components: { ButtonBase },
59+
setup() {
60+
return { args }
61+
},
62+
template: `<ButtonBase v-bind="args">{{ $t("nav.settings") }}</ButtonBase>`,
63+
}),
4864
}
4965

5066
export const Disabled: Story = {
5167
args: {
5268
disabled: true,
5369
},
70+
render: args => ({
71+
components: { ButtonBase },
72+
setup() {
73+
return { args }
74+
},
75+
template: `<ButtonBase v-bind="args">{{ $t("nav.settings") }}</ButtonBase>`,
76+
}),
5477
}
5578

5679
export const WithIcon: Story = {
@@ -83,83 +106,11 @@ export const Block: Story = {
83106
args: {
84107
block: true,
85108
},
86-
}
87-
88-
export const GroupedButtons: Story = {
89-
parameters: {
90-
docs: {
91-
description: {
92-
story: 'Use `ButtonGroup` to group multiple buttons together with connected borders.',
93-
},
94-
source: {
95-
code: `<template>
96-
<ButtonGroup>
97-
<ButtonBase>Back</ButtonBase>
98-
<ButtonBase>Settings</ButtonBase>
99-
<ButtonBase>Compare</ButtonBase>
100-
</ButtonGroup>
101-
</template>`,
102-
},
103-
},
104-
},
105-
render: () => ({
106-
components: { ButtonBase, ButtonGroup },
107-
template: `
108-
<ButtonGroup>
109-
<ButtonBase>{{ $t('nav.back') }}</ButtonBase>
110-
<ButtonBase>{{ $t('nav.settings') }}</ButtonBase>
111-
<ButtonBase>{{ $t('nav.compare') }}</ButtonBase>
112-
</ButtonGroup>
113-
`,
114-
}),
115-
}
116-
117-
export const GroupedWithVariants: Story = {
118-
parameters: {
119-
docs: {
120-
source: {
121-
code: `<template>
122-
<ButtonGroup>
123-
<ButtonBase variant="primary">Back</ButtonBase>
124-
<ButtonBase variant="primary">Settings</ButtonBase>
125-
<ButtonBase variant="primary">Compare</ButtonBase>
126-
</ButtonGroup>
127-
</template>`,
128-
},
129-
},
130-
},
131-
render: () => ({
132-
components: { ButtonBase, ButtonGroup },
133-
template: `
134-
<ButtonGroup>
135-
<ButtonBase variant="primary">{{ $t('nav.back') }}</ButtonBase>
136-
<ButtonBase variant="primary">{{ $t('nav.settings') }}</ButtonBase>
137-
<ButtonBase variant="primary">{{ $t('nav.compare') }}</ButtonBase>
138-
</ButtonGroup>
139-
`,
140-
}),
141-
}
142-
143-
export const GroupedWithIcons: Story = {
144-
parameters: {
145-
docs: {
146-
source: {
147-
code: `<template>
148-
<ButtonGroup>
149-
<ButtonBase variant="secondary" classicon="i-lucide:search">Search</ButtonBase>
150-
<ButtonBase variant="secondary" classicon="i-lucide:x">Back</ButtonBase>
151-
</ButtonGroup>
152-
</template>`,
153-
},
109+
render: args => ({
110+
components: { ButtonBase },
111+
setup() {
112+
return { args }
154113
},
155-
},
156-
render: () => ({
157-
components: { ButtonBase, ButtonGroup },
158-
template: `
159-
<ButtonGroup>
160-
<ButtonBase variant="secondary" classicon="i-lucide:search">{{ $t('search.button') }}</ButtonBase>
161-
<ButtonBase variant="secondary" classicon="i-lucide:x">{{ $t('nav.back') }}</ButtonBase>
162-
</ButtonGroup>
163-
`,
114+
template: `<ButtonBase v-bind="args">{{ $t("nav.settings") }}</ButtonBase>`,
164115
}),
165116
}

‎app/components/Button/ButtonGroup.stories.ts‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import type { Meta, StoryObj } from '@storybook-vue/nuxt'
2+
import ButtonBase from './Base.vue'
3+
import ButtonGroup from './Group.vue'
4+
5+
const meta = {
6+
component: ButtonGroup,
7+
parameters: {
8+
docs: {
9+
source: {
10+
type: 'dynamic',
11+
transform: (code: string) =>
12+
code
13+
.replace(/<Base\b/g, '<ButtonBase')
14+
.replace(/<\/Base>/g, '</ButtonBase>')
15+
.replace(/<Group\b/g, '<ButtonGroup')
16+
.replace(/<\/Group>/g, '</ButtonGroup>'),
17+
},
18+
},
19+
},
20+
tags: ['autodocs'],
21+
} satisfies Meta<typeof ButtonGroup>
22+
23+
export default meta
24+
type Story = StoryObj<typeof meta>
25+
26+
export const Default: Story = {
27+
parameters: {
28+
docs: {
29+
source: {
30+
code: `
31+
<template>
32+
<ButtonGroup>
33+
<ButtonBase>Back</ButtonBase>
34+
<ButtonBase>Settings</ButtonBase>
35+
<ButtonBase>Compare</ButtonBase>
36+
</ButtonGroup>
37+
</template>
38+
`,
39+
},
40+
},
41+
},
42+
render: () => ({
43+
components: { ButtonBase, ButtonGroup },
44+
template: `
45+
<ButtonGroup>
46+
<ButtonBase>{{ $t('nav.back') }}</ButtonBase>
47+
<ButtonBase>{{ $t('nav.settings') }}</ButtonBase>
48+
<ButtonBase>{{ $t('nav.compare') }}</ButtonBase>
49+
</ButtonGroup>
50+
`,
51+
}),
52+
}
53+
54+
export const WithVariants: Story = {
55+
parameters: {
56+
docs: {
57+
source: {
58+
code: `
59+
<template>
60+
<ButtonGroup>
61+
<ButtonBase variant="primary">Back</ButtonBase>
62+
<ButtonBase variant="primary">Settings</ButtonBase>
63+
<ButtonBase variant="primary">Compare</ButtonBase>
64+
</ButtonGroup>
65+
</template>
66+
`,
67+
},
68+
},
69+
},
70+
render: () => ({
71+
components: { ButtonBase, ButtonGroup },
72+
template: `
73+
<ButtonGroup>
74+
<ButtonBase variant="primary">{{ $t('nav.back') }}</ButtonBase>
75+
<ButtonBase variant="primary">{{ $t('nav.settings') }}</ButtonBase>
76+
<ButtonBase variant="primary">{{ $t('nav.compare') }}</ButtonBase>
77+
</ButtonGroup>
78+
`,
79+
}),
80+
}
81+
82+
export const WithIcons: Story = {
83+
parameters: {
84+
docs: {
85+
source: {
86+
code: `
87+
<template>
88+
<ButtonGroup>
89+
<ButtonBase variant="secondary" classicon="i-lucide:search">Search</ButtonBase>
90+
<ButtonBase variant="secondary" classicon="i-lucide:x">Back</ButtonBase>
91+
</ButtonGroup>
92+
</template>
93+
`,
94+
},
95+
},
96+
},
97+
render: () => ({
98+
components: { ButtonBase, ButtonGroup },
99+
template: `
100+
<ButtonGroup>
101+
<ButtonBase variant="secondary" classicon="i-lucide:search">{{ $t('search.button') }}</ButtonBase>
102+
<ButtonBase variant="secondary" classicon="i-lucide:x">{{ $t('nav.back') }}</ButtonBase>
103+
</ButtonGroup>
104+
`,
105+
}),
106+
}

‎app/components/Button/Group.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
<script setup lang="ts">
2+
/**
3+
* Use `ButtonGroup` to group multiple buttons together with connected borders.
4+
*/
5+
defineOptions({
6+
name: 'ButtonGroup',
7+
})
8+
29
const props = defineProps<{
310
as?: string | Component
411
}>()

0 commit comments

Comments
 (0)