Skip to content

Commit 5148171

Browse files
julczkajulczka
authored
Merge pull request #500 from umbraco/v1/bugfix/storybook-color-props
docs: storybook color props
2 parents 25a396d + c6b6111 commit 5148171

File tree

7 files changed

+234
-203
lines changed

7 files changed

+234
-203
lines changed

‎packages/uui-color-area/lib/uui-color-area.story.ts

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import '.';
2-
3-
import { Meta, Story } from '@storybook/web-components';
4-
import { html } from 'lit-html';
5-
import { UUIColorAreaElement } from './uui-color-area.element';
1+
import type { Meta, StoryObj } from '@storybook/web-components';
2+
import type { UUIColorAreaElement } from './uui-color-area.element';
63
import readme from '../README.md?raw';
74

8-
export default {
5+
import './uui-color-area.element';
6+
7+
const meta: Meta<UUIColorAreaElement> = {
98
id: 'uui-color-area',
109
title: 'Inputs/Color/Color Area',
1110
component: 'uui-color-area',
@@ -25,11 +24,10 @@ export default {
2524
handles: ['change'],
2625
},
2726
},
28-
} as Meta<UUIColorAreaElement>;
27+
};
28+
29+
export default meta;
2930

30-
const Template: Story<UUIColorAreaElement> = props =>
31-
html`<uui-color-area
32-
.value=${props.value}
33-
.disabled=${props.disabled}></uui-color-area>`;
31+
type Story = StoryObj<UUIColorAreaElement>;
3432

35-
export const Overview = Template.bind({});
33+
export const Overview: Story = {};

‎packages/uui-color-picker/lib/uui-color-picker.story.ts

Lines changed: 50 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,11 @@ import '@umbraco-ui/uui-button-group/lib';
88
import '@umbraco-ui/uui-icon/lib';
99
import '@umbraco-ui/uui-popover/lib';
1010

11-
import '.';
12-
13-
import { Meta, StoryFn } from '@storybook/web-components';
14-
import { html } from 'lit-html';
15-
import { UUIColorPickerElement } from './uui-color-picker.element';
11+
import type { Meta, StoryObj } from '@storybook/web-components';
12+
import type { UUIColorPickerElement } from './uui-color-picker.element';
13+
import './uui-color-picker.element';
1614
import readme from '../README.md?raw';
15+
import { html } from 'lit';
1716

1817
const defaultSwatches = [
1918
'#d0021b',
@@ -34,7 +33,7 @@ const defaultSwatches = [
3433
'#fff',
3534
];
3635

37-
export default {
36+
const meta: Meta<UUIColorPickerElement> = {
3837
id: 'uui-color-picker',
3938
title: 'Inputs/Color/Color Picker',
4039
component: 'uui-color-picker',
@@ -51,69 +50,65 @@ export default {
5150
handles: ['change'],
5251
},
5352
},
54-
} as Meta<UUIColorPickerElement>;
53+
};
5554

56-
const Template: StoryFn<UUIColorPickerElement> = props => html`
57-
<uui-color-picker
58-
.inline=${props.inline}
59-
.value=${props.value}
60-
.format=${props.format}
61-
.disabled=${props.disabled}
62-
.swatches=${props.swatches}
63-
.size=${props.size}
64-
.opacity=${props.opacity}
65-
.uppercase=${props.uppercase}
66-
.name=${props.name}
67-
.noFormatToggle=${props.noFormatToggle}>
68-
</uui-color-picker>
69-
`;
55+
export default meta;
7056

71-
export const AAAOverview = Template.bind({});
72-
AAAOverview.storyName = 'Overview';
57+
type Story = StoryObj<UUIColorPickerElement>;
7358

74-
export const Inline = Template.bind({});
75-
Inline.args = {
76-
inline: true,
77-
};
78-
Inline.parameters = {
79-
docs: {
80-
source: {
81-
code: `<uui-color-picker inline="true"></uui-color-picker>`,
59+
export const Overview: Story = {};
60+
61+
export const Inline: Story = {
62+
args: {
63+
inline: true,
64+
},
65+
parameters: {
66+
docs: {
67+
source: {
68+
code: `<uui-color-picker inline="true"></uui-color-picker>`,
69+
},
8270
},
8371
},
8472
};
8573

86-
export const WithOpacity = Template.bind({});
87-
WithOpacity.args = {
88-
opacity: true,
89-
};
90-
WithOpacity.parameters = {
91-
docs: {
92-
source: {
93-
code: `<uui-color-picker opacity></uui-color-picker>`,
74+
export const WithOpacity: Story = {
75+
args: {
76+
opacity: true,
77+
},
78+
parameters: {
79+
docs: {
80+
source: {
81+
code: `<uui-color-picker opacity></uui-color-picker>`,
82+
},
9483
},
9584
},
9685
};
9786

9887
const formats = ['hex', 'rgb', 'hsl'];
9988

100-
export const Formats: StoryFn = () => html`
101-
<h4>Formats</h4>
102-
${formats.map(
103-
format =>
104-
html`
105-
<h5>${format}</h5>
106-
<uui-color-picker .format=${format as any} value="blue">
107-
</uui-color-picker>
108-
`
109-
)}
110-
`;
111-
Formats.args = { format: 'hex' };
112-
Formats.parameters = {
113-
docs: {
114-
source: {
115-
code: `
89+
export const Formats: Story = {
90+
args: {
91+
format: 'hex',
92+
value: 'blue',
93+
},
94+
decorators: [
95+
(story, props) => html`<div style="display: flex; flex-direction: column;">
96+
<h5>${props.args.format}</h5>
97+
${story()}
98+
</div> `,
99+
],
100+
argTypes: {
101+
format: {
102+
options: formats,
103+
control: { type: 'select' },
104+
},
105+
},
106+
parameters: {
107+
docs: {
108+
source: {
109+
code: `
116110
<uui-color-picker format="hex"></uui-color-picker>`,
111+
},
117112
},
118113
},
119114
};

‎packages/uui-color-slider/lib/uui-color-slider.story.ts

Lines changed: 35 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import '.';
2-
3-
import { Meta, Story } from '@storybook/web-components';
4-
import { html } from 'lit-html';
5-
import { UUIColorSliderElement } from './uui-color-slider.element';
1+
import type { Meta, StoryObj } from '@storybook/web-components';
2+
import type { UUIColorSliderElement } from './uui-color-slider.element';
63
import readme from '../README.md?raw';
74

8-
export default {
5+
import './uui-color-slider.element';
6+
7+
const meta: Meta<UUIColorSliderElement> = {
98
id: 'uui-color-slider',
109
title: 'Inputs/Color/Color Slider',
1110
component: 'uui-color-slider',
@@ -30,52 +29,45 @@ export default {
3029
},
3130
},
3231
},
33-
} as Meta<UUIColorSliderElement>;
32+
};
3433

35-
const Template: Story<UUIColorSliderElement> = props => html`
36-
<uui-color-slider
37-
.vertical=${props.vertical}
38-
.min=${props.min}
39-
.max=${props.max}
40-
.precision=${props.precision}
41-
.label=${props.label}
42-
.disabled=${props.disabled}
43-
.value=${props.value}
44-
.type=${props.type}
45-
.color=${props.color}>
46-
</uui-color-slider>
47-
`;
34+
export default meta;
4835

49-
export const AAAOverview = Template.bind({});
50-
AAAOverview.storyName = 'Overview';
36+
type Story = StoryObj<UUIColorSliderElement>;
5137

52-
export const Disabled = Template.bind({});
53-
Disabled.args = {
54-
disabled: true,
55-
value: 50,
56-
};
57-
Disabled.parameters = {
58-
docs: {
59-
source: {
60-
code: `<uui-color-slider label="Slider label" disabled="true"></uui-color-slider>`,
38+
export const Overview: Story = {};
39+
40+
export const Disabled: Story = {
41+
args: {
42+
disabled: true,
43+
value: 50,
44+
},
45+
parameters: {
46+
docs: {
47+
source: {
48+
code: `<uui-color-slider label="Slider label" disabled="true"></uui-color-slider>`,
49+
},
6150
},
6251
},
6352
};
6453

65-
export const Opacity = Template.bind({});
66-
Opacity.args = {
67-
type: 'opacity',
68-
color: '#417505',
54+
export const Opacity: Story = {
55+
args: {
56+
type: 'opacity',
57+
color: '#417505',
58+
},
6959
};
7060

71-
export const Vertical = Template.bind({});
72-
Vertical.args = {
73-
vertical: true,
61+
export const Vertical: Story = {
62+
args: {
63+
vertical: true,
64+
},
7465
};
7566

76-
export const VerticalOpacity = Template.bind({});
77-
VerticalOpacity.args = {
78-
type: 'opacity',
79-
vertical: true,
80-
color: '#417505',
67+
export const VerticalOpacity: Story = {
68+
args: {
69+
type: 'opacity',
70+
vertical: true,
71+
color: '#417505',
72+
},
8173
};

‎packages/uui-color-swatch/lib/uui-color-swatch.element.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -191,13 +191,13 @@ export class UUIColorSwatchElement extends LabelMixin(
191191
];
192192

193193
private _value: string | undefined = '';
194+
194195
/**
195196
* Value of the swatch. Should be a valid hex, hexa, rgb, rgba, hsl or hsla string. Should fulfill this [css spec](https://www.w3.org/TR/css-color-4/#color-type). If not provided element will look at its text content.
196-
* @type { string }
197+
*
197198
* @attr
198-
* @default ""
199199
*/
200-
@property({ type: String })
200+
@property()
201201
get value(): string {
202202
return this._value ? this._value : this.textContent?.trim() || '';
203203
}
@@ -210,24 +210,23 @@ export class UUIColorSwatchElement extends LabelMixin(
210210

211211
/**
212212
* Determines if the options is disabled. If true the option can't be selected
213-
* @type { boolean }
213+
*
214214
* @attr
215-
* @default false
216215
*/
217216
@property({ type: Boolean, reflect: true })
218217
disabled = false;
219218

220219
/**
221220
* When true shows element label below the color checkbox
222221
*
222+
* @attr
223223
* @memberof UUIColorSwatchElement
224224
*/
225225
@property({ type: Boolean, attribute: 'show-label' })
226226
showLabel = false;
227227
/**
228228
* Colord object instance based on the value provided to the element. If the value is not a valid color, it falls back to black (like Amy Winehouse). For more information about Colord, see [Colord](https://omgovich.github.io/colord/)
229229
*
230-
* @type {(Colord | null)}
231230
* @memberof UUIColorSwatchElement
232231
*/
233232
get color(): Colord | null {

0 commit comments

Comments
 (0)