Skip to content

Commit c4dd29e

Browse files
JesmoDevJesmoDev
committed
button group
1 parent 2a1db9c commit c4dd29e

File tree

1 file changed

+81
-48
lines changed

1 file changed

+81
-48
lines changed

‎packages/uui-button-group/lib/uui-button-group.story.ts

Lines changed: 81 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,125 @@
11
import '.';
22

33
import { Story } from '@storybook/web-components';
4-
import {
5-
InterfaceLookNames,
6-
InterfaceLookType,
7-
} from '@umbraco-ui/uui-base/lib/types';
84
import { html } from 'lit-html';
95

106
export default {
117
title: 'Buttons/Button Group',
128
component: 'uui-button-group',
139
id: 'uui-button-group',
1410
args: {
15-
look: '',
11+
look: 'primary',
12+
color: 'primary',
1613
},
1714
argTypes: {
1815
look: {
1916
control: {
2017
type: 'select',
2118
},
22-
options: InterfaceLookNames,
19+
options: ['default', 'primary', 'secondary', 'outline', 'placeholder'],
20+
},
21+
color: {
22+
control: {
23+
type: 'select',
24+
},
25+
options: ['primary', 'positive', 'warning', 'danger'],
2326
},
2427
},
2528
};
2629

30+
const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
31+
const colors = ['primary', 'positive', 'warning', 'danger'];
32+
2733
export const AAAOverview: Story = props => html`
2834
<uui-button-group>
29-
<uui-button look="${props.look}" label="Button 1"></uui-button>
30-
<uui-button look="${props.look}" label="Button 2"></uui-button>
31-
<uui-button look="${props.look}" label="Button 3"></uui-button>
32-
<uui-button look="${props.look}" label="Button 4"></uui-button>
35+
<uui-button
36+
look="${props.look}"
37+
color="${props.color}"
38+
label="Button 1"></uui-button>
39+
<uui-button
40+
look="${props.look}"
41+
color="${props.color}"
42+
label="Button 2"></uui-button>
43+
<uui-button
44+
look="${props.look}"
45+
color="${props.color}"
46+
label="Button 3"></uui-button>
47+
<uui-button
48+
look="${props.look}"
49+
color="${props.color}"
50+
label="Button 4"></uui-button>
3351
</uui-button-group>
3452
`;
3553

3654
AAAOverview.storyName = 'Overview';
3755

38-
export const Looks = () => html`
39-
${InterfaceLookNames.map(
40-
(lookName: InterfaceLookType) =>
41-
html` <div>${lookName}</div>
56+
export const MixedLooksAndColors = () => html`
57+
${colors.map(
58+
color => html`
59+
<div style="margin-bottom: 32px">
60+
<h4>${color}</h4>
4261
<uui-button-group>
43-
<uui-button .look=${lookName} label="Button 1"></uui-button>
44-
<uui-button .look=${lookName} label="Button 2"></uui-button>
45-
<uui-button .look=${lookName} label="Button 3"></uui-button>
46-
<uui-button
47-
.look=${lookName}
48-
label="Button 4"></uui-button> </uui-button-group
49-
><br /><br />`
62+
${looks.map(
63+
look => html`<uui-button color=${color} look=${look}>
64+
${look}
65+
</uui-button>`
66+
)}
67+
</uui-button-group>
68+
</div>
69+
`
5070
)}
5171
`;
5272

53-
Looks.parameters = {
73+
MixedLooksAndColors.parameters = {
5474
controls: { disable: true },
5575
docs: {
5676
source: {
5777
code: `
5878
<uui-button-group>
59-
<uui-button look="[look]">Button 1</uui-button>
60-
<uui-button look="[look]">Button 2</uui-button>
61-
<uui-button look="[look]">Button 3</uui-button>
62-
<uui-button look="[look]">Button 4</uui-button>
79+
<uui-button look="[look]" color="[color]>Button 1</uui-button>
80+
<uui-button look="[look]" color="[color]>Button 2</uui-button>
81+
<uui-button look="[look]" color="[color]>Button 3</uui-button>
82+
<uui-button look="[look]" color="[color]>Button 4</uui-button>
6383
</uui-button-group>`,
6484
},
6585
},
6686
};
6787

68-
export const MixedLooks = () =>
69-
html`<uui-button-group>
70-
<uui-button look="outline" label="Button 1"></uui-button>
71-
<uui-button look="outline" label="Button 2"></uui-button>
72-
<uui-button look="outline" label="Button 3"></uui-button>
73-
<uui-button look="danger" label="Button 4"></uui-button>
74-
</uui-button-group>`;
75-
76-
MixedLooks.parameters = {
77-
controls: { disable: true },
78-
docs: {
79-
source: {
80-
code: `
81-
<uui-button-group>
82-
<uui-button look="outline">Button 1</uui-button>
83-
<uui-button look="outline">Button 2</uui-button>
84-
<uui-button look="outline">Button 3</uui-button>
85-
<uui-button look="danger">Button 4</uui-button>
86-
</uui-button-group>`,
87-
},
88-
},
89-
};
88+
export const LooksAndColors = () => html`
89+
${colors.map(
90+
color => html`
91+
<div style="margin-bottom: 32px; display: block">
92+
<h4>${color}</h4>
93+
${looks.map(
94+
look => html`
95+
<uui-button-group style="margin-bottom: 16px; display: block">
96+
<uui-button
97+
look="outline"
98+
label="Button 1"
99+
color=${color}
100+
look=${look}></uui-button>
101+
<uui-button
102+
look="outline"
103+
label="Button 2"
104+
color=${color}
105+
look=${look}></uui-button>
106+
<uui-button
107+
look="outline"
108+
label="Button 3"
109+
color=${color}
110+
look=${look}></uui-button>
111+
<uui-button
112+
look="danger"
113+
label="Button 4"
114+
color=${color}
115+
look=${look}></uui-button>
116+
</uui-button-group>
117+
`
118+
)}
119+
</div>
120+
`
121+
)}
122+
`;
90123

91124
// export const Icon = () =>
92125
// html`<uui-button-group

0 commit comments

Comments
 (0)