Skip to content

Commit c17f0f5

Browse files
cylewaitforitghostdevv
cylewaitforit
and
ghostdevv
authored
docs(ui): add ButtonGroup stories to storybook (#1964)
Co-authored-by: Willow (GHOST) <git@willow.sh>
1 parent a697f15 commit c17f0f5

5 files changed

Lines changed: 236 additions & 60 deletions

File tree

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

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎app/components/Button/Base.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
<script setup lang="ts">
22
import type { IconClass } from '~/types'
33
4+
/**
5+
* A base button component that supports multiple variants, sizes, and states as well as icons and keyboard shortcuts.
6+
*/
7+
defineOptions({
8+
name: 'ButtonBase',
9+
})
10+
411
const props = withDefaults(
512
defineProps<{
613
disabled?: boolean

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

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

‎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:x">Close</ButtonBase>
90+
<ButtonBase variant="secondary" classicon="i-lucide:search">Search</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:x">{{ $t('common.close') }}</ButtonBase>
102+
<ButtonBase variant="secondary" classicon="i-lucide:search">{{ $t('filters.search') }}</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)