Skip to content

Commit bda771a

Browse files
nielslyngsoenielslyngsoe
authored
Merge pull request #179 from umbraco/cleanup/stories-cleanup
2 parents b8c6a7c + af4342c commit bda771a

File tree

19 files changed

+472
-370
lines changed

19 files changed

+472
-370
lines changed

‎packages/uui-action-bar/lib/uui-action-bar.story.ts

Lines changed: 53 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import type { Story } from '@storybook/web-components';
12
import '@umbraco-ui/uui-action-bar/lib';
23
import '@umbraco-ui/uui-button/lib';
34
import '@umbraco-ui/uui-icon/lib';
@@ -14,51 +15,83 @@ export default {
1415
id: 'uui-action-bar',
1516
title: 'Buttons/Action Bar',
1617
component: 'uui-action-bar',
17-
parameters: {
18-
docs: {
19-
source: {
20-
code: `<uui-action-bar>...</uui-action-bar>`,
18+
args: {
19+
look: '',
20+
},
21+
argTypes: {
22+
look: {
23+
control: {
24+
type: 'select',
2125
},
26+
options: InterfaceLookNames,
2227
},
2328
},
2429
};
2530

2631
const buttons = ['copy', 'remove', 'delete'];
2732

28-
export const Basic = () =>
29-
html`
30-
<uui-icon-registry-essential>
31-
<uui-action-bar
32-
>${buttons.map(
33-
el =>
34-
html`<uui-button><uui-icon name="${el}"></uui-icon></uui-button>`
35-
)}
36-
</uui-action-bar>
37-
</uui-icon-registry-essential>
38-
`;
33+
export const AAAOverview: Story = props => html`
34+
<uui-icon-registry-essential>
35+
<uui-action-bar
36+
>${buttons.map(
37+
el => html` <uui-button label="${el}" look="${props.look}">
38+
<uui-icon name="${el}"></uui-icon>
39+
</uui-button>`
40+
)}
41+
</uui-action-bar>
42+
</uui-icon-registry-essential>
43+
`;
44+
45+
AAAOverview.storyName = 'Overview';
3946

4047
export const Single = () =>
4148
html`
4249
<uui-icon-registry-essential>
4350
<uui-action-bar>
44-
<uui-button look="outline"
51+
<uui-button label="Delete" look="outline"
4552
><uui-icon name="delete"></uui-icon
4653
></uui-button>
4754
</uui-action-bar>
4855
</uui-icon-registry-essential>
4956
`;
5057

51-
export const AllStyles = () => html`
58+
export const Looks = () => html`
5259
<uui-icon-registry-essential>
5360
${InterfaceLookNames.map(
5461
(lookName: InterfaceLookType) =>
55-
html` <uui-action-bar>
62+
html` <div>${lookName}</div>
63+
<uui-action-bar>
5664
${buttons.map(
57-
button => html`<uui-button .look=${lookName}>
65+
button => html`<uui-button label="${button}" .look=${lookName}>
5866
<uui-icon name="${button}"></uui-icon>
5967
</uui-button>`
6068
)} </uui-action-bar
61-
><br /><br /><br />`
69+
><br /><br />`
6270
)}
6371
</uui-icon-registry-essential>
6472
`;
73+
74+
Looks.parameters = {
75+
docs: {
76+
source: {
77+
code: `
78+
<uui-icon-registry-essential>
79+
<uui-action-bar>
80+
81+
<uui-button look="[look]" label="Copy">
82+
<uui-icon name="copy"></uui-icon>
83+
</uui-button>
84+
85+
<uui-button look="[look]" label="Remove">
86+
<uui-icon name="remove"></uui-icon>
87+
</uui-button>
88+
89+
<uui-button look="[look]" label="Delete">
90+
<uui-icon name="delete"></uui-icon>
91+
</uui-button>
92+
93+
</uui-action-bar>
94+
</uui-icon-registry-essential>`,
95+
},
96+
},
97+
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const AAAOverview: Story = props => html`
2626
`;
2727
AAAOverview.args = { fontSize: 2, '--uui-avatar-border-color': 'white' };
2828
AAAOverview.argTypes = {
29-
fontSize: { table: { category: 'inline styling' } },
29+
fontSize: { table: { category: 'Styles' } },
3030
'--uui-avatar-border-color': { control: { type: 'color' } },
3131
};
3232
AAAOverview.parameters = {};

‎packages/uui-avatar/lib/uui-avatar.story.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@ export const AAAOverview = Template.bind({});
4444
AAAOverview.storyName = 'Overview';
4545
AAAOverview.args = { color: '#1b264f', backgroundColor: '#f5c1bc' };
4646
AAAOverview.argTypes = {
47-
color: { table: { category: 'inline styling' } },
48-
backgroundColor: { table: { category: 'inline styling' } },
49-
fontSize: { table: { category: 'inline styling' } },
47+
color: { table: { category: 'Styles' } },
48+
backgroundColor: { table: { category: 'Styles' } },
49+
fontSize: { table: { category: 'Styles' } },
5050
};
5151
AAAOverview.parameters = {
5252
docs: {
@@ -69,7 +69,7 @@ Picture.parameters = {
6969

7070
export const Sizes = Template.bind({});
7171
Sizes.argTypes = {
72-
fontSize: { table: { category: 'inline styling' } },
72+
fontSize: { table: { category: 'Styles' } },
7373
};
7474
Sizes.parameters = {
7575
controls: { include: ['fontSize', 'name'] },
@@ -83,8 +83,8 @@ Sizes.parameters = {
8383
export const Colors = Template.bind({});
8484
Colors.args = { color: 'white', backgroundColor: 'blue' };
8585
Colors.argTypes = {
86-
color: { table: { category: 'inline styling' } },
87-
backgroundColor: { table: { category: 'inline styling' } },
86+
color: { table: { category: 'Styles' } },
87+
backgroundColor: { table: { category: 'Styles' } },
8888
};
8989
Colors.parameters = {
9090
controls: { include: ['backgroundColor', 'color', 'name'] },

‎packages/uui-breadcrumbs/lib/uui-breadcrumbs.story.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,12 @@ export const Overview: Story = () =>
2828
Overview.parameters = {
2929
docs: {
3030
source: {
31-
code: `<uui-breadcrumbs>
32-
<uui-breadcrumb-item href="https://...">Item 1</uui-breadcrumb-item>
33-
<uui-breadcrumb-item href="https://...">Item 2</uui-breadcrumb-item>
34-
<uui-breadcrumb-item href="https://...">Item 3</uui-breadcrumb-item>
35-
</uui-breadcrumbs>`,
31+
code: `
32+
<uui-breadcrumbs>
33+
<uui-breadcrumb-item href="https://...">Item 1</uui-breadcrumb-item>
34+
<uui-breadcrumb-item href="https://...">Item 2</uui-breadcrumb-item>
35+
<uui-breadcrumb-item href="https://...">Item 3</uui-breadcrumb-item>
36+
</uui-breadcrumbs>`,
3637
},
3738
},
3839
};

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

Lines changed: 58 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -11,65 +11,79 @@ export default {
1111
title: 'Buttons/Button Group',
1212
component: 'uui-button-group',
1313
id: 'uui-button-group',
14+
args: {
15+
look: '',
16+
},
17+
argTypes: {
18+
look: {
19+
control: {
20+
type: 'select',
21+
},
22+
options: InterfaceLookNames,
23+
},
24+
},
1425
};
1526

16-
const buttons = ['development', 'staging', 'live'];
27+
export const AAAOverview: Story = props => html`
28+
<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>
33+
</uui-button-group>
34+
`;
1735

18-
export const AAAOverview: Story = () =>
19-
html`<uui-button-group
20-
>${buttons.map(
21-
el => html`<uui-button look="secondary">${el}</uui-button>`
22-
)}</uui-button-group
23-
>`;
2436
AAAOverview.storyName = 'Overview';
25-
AAAOverview.parameters = {
26-
docs: {
27-
source: {
28-
code: html`<uui-button-group>
29-
<uui-button look="secondary">development</uui-button>
30-
<uui-button look="secondary">staging</uui-button>
31-
<uui-button look="secondary">live</uui-button>
32-
</uui-button-group>`.strings,
33-
},
34-
},
35-
};
3637

37-
function uppercaseFirstLetter(s: string) {
38-
return s.charAt(0).toUpperCase() + s.slice(1);
39-
}
40-
export const AllStyles = () => html`
38+
export const Looks = () => html`
4139
${InterfaceLookNames.map(
4240
(lookName: InterfaceLookType) =>
43-
html` <uui-button-group>
44-
<uui-button .look=${lookName}>
45-
${uppercaseFirstLetter(lookName)} look
46-
</uui-button>
47-
<uui-button .look=${lookName}> Second option </uui-button>
48-
<uui-button .look=${lookName}> Small </uui-button>
49-
<uui-button .look=${lookName}>
50-
Large other option
51-
</uui-button> </uui-button-group
52-
><br /><br /><br />`
41+
html` <div>${lookName}</div>
42+
<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 />`
5350
)}
5451
`;
5552

53+
Looks.parameters = {
54+
controls: { disable: true },
55+
docs: {
56+
source: {
57+
code: `
58+
<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>
63+
</uui-button-group>`,
64+
},
65+
},
66+
};
67+
5668
export const MixedLooks = () =>
5769
html`<uui-button-group>
58-
<uui-button look="primary">Hello</uui-button>
59-
${buttons.map(
60-
el => html`<uui-button look="secondary">${el}</uui-button>`
61-
)}<uui-button look="danger">World</uui-button></uui-button-group
62-
>`;
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+
6376
MixedLooks.parameters = {
77+
controls: { disable: true },
6478
docs: {
6579
source: {
66-
code: html`<uui-button-group>
67-
<uui-button look="primary">Hello</uui-button>
68-
<uui-button>development</uui-button>
69-
<uui-button>staging</uui-button>
70-
<uui-button>live</uui-button>
71-
<uui-button look="danger">World</uui-button>
72-
</uui-button-group>`.strings,
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>`,
7387
},
7488
},
7589
};

‎packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ export class UUIButtonInlineCreateElement extends LitElement {
174174
];
175175

176176
@state()
177-
position = 0;
177+
private _position = 0;
178178

179179
/**
180180
* Label to be used for aria-label and eventually as visual label
@@ -193,7 +193,7 @@ export class UUIButtonInlineCreateElement extends LitElement {
193193
vertical = false;
194194

195195
private _onMouseMove(e: MouseEvent) {
196-
this.position = this.vertical ? e.offsetY : e.offsetX;
196+
this._position = this.vertical ? e.offsetY : e.offsetX;
197197
}
198198

199199
private _handleClick(e: MouseEvent) {
@@ -215,8 +215,8 @@ export class UUIButtonInlineCreateElement extends LitElement {
215215
<div
216216
id="plus"
217217
style=${styleMap({
218-
left: this.vertical ? '' : this.position + 'px',
219-
top: this.vertical ? this.position + 'px' : '',
218+
left: this.vertical ? '' : this._position + 'px',
219+
top: this.vertical ? this._position + 'px' : '',
220220
})}>
221221
<svg
222222
id="plus-icon"

0 commit comments

Comments
 (0)