Skip to content

Commit 45dfe3e

Browse files
leekelleherleekelleher
committed
Merge branch 'main' into alignFocus
2 parents f36aed8 + f0d5ac2 commit 45dfe3e

File tree

9 files changed

+211
-350
lines changed

9 files changed

+211
-350
lines changed

‎packages/uui-css/lib/custom-properties/palette.css‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -143,22 +143,22 @@
143143
$malibu saturation(- 60%) blackness(+ 26%)
144144
); */
145145

146-
$maroon-flush: #d42054;
146+
$maroon-flush: #c31d4c;
147147
--uui-palette-maroon-flush: $maroon-flush;
148148
--uui-palette-maroon-flush-light: rgb(
149-
226,
150-
60,
151-
107
149+
223,
150+
42,
151+
93
152152
); /* color($maroon-flush lightness(+ 8%)); */
153153
--uui-palette-maroon-flush-dark: rgb(
154-
191,
155-
33,
156-
78
154+
174,
155+
30,
156+
71
157157
); /* color($maroon-flush blackness(+ 8%)); */
158158
--uui-palette-maroon-flush-dimmed: rgb(
159-
133,
160-
107,
161-
114
159+
122,
160+
98,
161+
104
162162
); /* color(
163163
$maroon-flush saturation(- 62%) blackness(+ 2%)
164164
); */

‎packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts‎

Lines changed: 29 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,34 @@ import { html } from 'lit';
44
import type { Meta, StoryObj } from '@storybook/web-components-vite';
55
import { renderSlots, spread } from '../../../storyhelpers';
66

7-
const setFocus = () => {
8-
const refElement = document.querySelectorAll('#refNode');
9-
refElement[0].focus();
10-
};
11-
127
const meta: Meta = {
138
id: 'uui-ref-node-data-type',
149
component: 'uui-ref-node-data-type',
1510
title: 'Displays/References/Data Type',
16-
args: {
17-
name: 'TextField',
18-
alias: 'Umbraco.TextField',
19-
},
20-
render: args =>
21-
html`<uui-ref-node-data-type ${spread(args)}
22-
>${renderSlots(args)}</uui-ref-node-data-type
23-
>`,
11+
args: { name: 'TextField', alias: 'Umbraco.TextField' },
12+
render: args => html`
13+
<uui-ref-node-data-type ${spread(args)}>
14+
${renderSlots(args)}
15+
</uui-ref-node-data-type>
16+
`,
2417
decorators: [
2518
(Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
2619
],
27-
parameters: {
28-
readme: {
29-
markdown: readme,
30-
},
31-
},
20+
parameters: { readme: { markdown: readme } },
3221
};
3322

3423
export default meta;
3524
type Story = StoryObj;
3625

3726
export const Default: Story = {
3827
args: {
39-
'actions slot': html`<uui-action-bar slot="actions"
40-
><uui-button label="delete"
41-
><uui-icon name="delete"></uui-icon></uui-button
42-
></uui-action-bar>`,
28+
'actions slot': html`
29+
<uui-action-bar slot="actions">
30+
<uui-button label="delete">
31+
<uui-icon name="delete"></uui-icon>
32+
</uui-button>
33+
</uui-action-bar>
34+
`,
4335
},
4436
};
4537
export const CustomIcon: Story = {
@@ -48,34 +40,24 @@ export const CustomIcon: Story = {
4840
},
4941
};
5042

51-
export const Standalone: Story = {
52-
args: {
53-
standalone: true,
54-
},
55-
};
43+
export const Standalone: Story = { args: { standalone: true } };
5644

57-
export const Selectable: Story = {
58-
args: {
59-
selectable: true,
60-
},
61-
};
45+
export const Selectable: Story = { args: { selectable: true } };
6246

63-
export const Disabled: Story = {
64-
args: {
65-
disabled: true,
66-
},
67-
};
47+
export const Disabled: Story = { args: { disabled: true } };
6848

69-
export const Readonly: Story = {
70-
args: {
71-
readonly: true,
72-
},
73-
};
49+
export const Readonly: Story = { args: { readonly: true } };
7450

7551
export const Focus: Story = {
76-
render: args =>
77-
html`<uui-ref-node-document-type id="refNode" ${spread(args)}
78-
>${renderSlots(args)}</uui-ref-node-document-type
79-
>
80-
<button @click=${() => setFocus()}>Set focus</button> `,
52+
args: { id: 'refNode' },
53+
decorators: [
54+
(Story: any) => html`
55+
<div style="max-width: 420px;">
56+
${Story()}
57+
<button @click=${() => document.getElementById('refNode')?.focus()}>
58+
Set focus
59+
</button>
60+
</div>
61+
`,
62+
],
8163
};

‎packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts‎

Lines changed: 29 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -4,46 +4,35 @@ import { html } from 'lit';
44
import type { Meta, StoryObj } from '@storybook/web-components-vite';
55
import { renderSlots, spread } from '../../../storyhelpers';
66

7-
const setFocus = () => {
8-
const refElement = document.querySelectorAll('#refNode');
9-
refElement[0].focus();
10-
};
11-
127
const meta: Meta = {
138
id: 'uui-ref-node-document-type',
149
component: 'uui-ref-node-document-type',
1510
title: 'Displays/References/Document Type',
16-
args: {
17-
name: 'Product Page',
18-
alias: 'productPage',
19-
},
20-
render: args =>
21-
html`<uui-ref-node-document-type
22-
id="refNode"
23-
${spread(args)}
24-
@open=${() => onOpen()}
25-
>${renderSlots(args)}</uui-ref-node-document-type
26-
> `,
11+
args: { name: 'Product Page', alias: 'productPage' },
12+
render: args => html`
13+
<uui-ref-node-document-type id="refNode" ${spread(args)}>
14+
${renderSlots(args)}
15+
</uui-ref-node-document-type>
16+
`,
2717

2818
decorators: [
2919
(Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
3020
],
31-
parameters: {
32-
readme: {
33-
markdown: readme,
34-
},
35-
},
21+
parameters: { readme: { markdown: readme } },
3622
};
3723

3824
export default meta;
3925
type Story = StoryObj;
4026

4127
export const Default: Story = {
4228
args: {
43-
'actions slot': html`<uui-action-bar slot="actions"
44-
><uui-button label="delete"
45-
><uui-icon name="delete"></uui-icon></uui-button
46-
></uui-action-bar>`,
29+
'actions slot': html`
30+
<uui-action-bar slot="actions">
31+
<uui-button label="delete">
32+
<uui-icon name="delete"></uui-icon>
33+
</uui-button>
34+
</uui-action-bar>
35+
`,
4736
},
4837
};
4938
export const CustomIcon: Story = {
@@ -52,34 +41,24 @@ export const CustomIcon: Story = {
5241
},
5342
};
5443

55-
export const Standalone: Story = {
56-
args: {
57-
standalone: true,
58-
},
59-
};
44+
export const Standalone: Story = { args: { standalone: true } };
6045

61-
export const Selectable: Story = {
62-
args: {
63-
selectable: true,
64-
},
65-
};
46+
export const Selectable: Story = { args: { selectable: true } };
6647

67-
export const Disabled: Story = {
68-
args: {
69-
disabled: true,
70-
},
71-
};
48+
export const Disabled: Story = { args: { disabled: true } };
7249

73-
export const Readonly: Story = {
74-
args: {
75-
readonly: true,
76-
},
77-
};
50+
export const Readonly: Story = { args: { readonly: true } };
7851

7952
export const Focus: Story = {
80-
render: args =>
81-
html`<uui-ref-node-document-type id="refNode" ${spread(args)}
82-
>${renderSlots(args)}</uui-ref-node-document-type
83-
>
84-
<button @click=${() => setFocus()}>Set focus</button> `,
53+
args: { id: 'refNode' },
54+
decorators: [
55+
(Story: any) => html`
56+
<div style="max-width: 420px;">
57+
${Story()}
58+
<button @click=${() => document.getElementById('refNode')?.focus()}>
59+
Set focus
60+
</button>
61+
</div>
62+
`,
63+
],
8564
};

‎packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts‎

Lines changed: 27 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,6 @@ import { html } from 'lit';
44
import type { Meta, StoryObj } from '@storybook/web-components-vite';
55
import { renderSlots, spread } from '../../../storyhelpers';
66

7-
const setFocus = () => {
8-
const refElement = document.querySelectorAll('#refNode');
9-
refElement[0].focus();
10-
};
11-
127
const meta: Meta = {
138
id: 'uui-ref-node-form',
149
component: 'uui-ref-node-form',
@@ -17,29 +12,28 @@ const meta: Meta = {
1712
name: 'Newsletter Signup',
1813
detail: 'Accept and signup for newsletter',
1914
},
20-
render: args =>
21-
html`<uui-ref-node-form ${spread(args)}
22-
>${renderSlots(args)}</uui-ref-node-form
23-
>`,
15+
render: args => html`
16+
<uui-ref-node-form ${spread(args)}>
17+
${renderSlots(args)}
18+
</uui-ref-node-form>
19+
`,
2420
decorators: [
2521
(Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
2622
],
27-
parameters: {
28-
readme: {
29-
markdown: readme,
30-
},
31-
},
23+
parameters: { readme: { markdown: readme } },
3224
};
3325

3426
export default meta;
3527
type Story = StoryObj;
3628

3729
export const Default: Story = {
3830
args: {
39-
'actions slot': html`<uui-action-bar slot="actions"
40-
><uui-button label="delete"
41-
><uui-icon name="delete"></uui-icon></uui-button
42-
></uui-action-bar>`,
31+
'actions slot': html`
32+
<uui-action-bar slot="actions">
33+
<uui-button label="delete"
34+
><uui-icon name="delete"></uui-icon> </uui-button
35+
></uui-action-bar>
36+
`,
4337
},
4438
};
4539
export const CustomIcon: Story = {
@@ -48,34 +42,24 @@ export const CustomIcon: Story = {
4842
},
4943
};
5044

51-
export const Standalone: Story = {
52-
args: {
53-
standalone: true,
54-
},
55-
};
45+
export const Standalone: Story = { args: { standalone: true } };
5646

57-
export const Selectable: Story = {
58-
args: {
59-
selectable: true,
60-
},
61-
};
47+
export const Selectable: Story = { args: { selectable: true } };
6248

63-
export const Disabled: Story = {
64-
args: {
65-
disabled: true,
66-
},
67-
};
49+
export const Disabled: Story = { args: { disabled: true } };
6850

69-
export const Readonly: Story = {
70-
args: {
71-
readonly: true,
72-
},
73-
};
51+
export const Readonly: Story = { args: { readonly: true } };
7452

7553
export const Focus: Story = {
76-
render: args =>
77-
html`<uui-ref-node-document-type id="refNode" ${spread(args)}
78-
>${renderSlots(args)}</uui-ref-node-document-type
79-
>
80-
<button @click=${() => setFocus()}>Set focus</button> `,
54+
args: { id: 'refNode' },
55+
decorators: [
56+
(Story: any) => html`
57+
<div style="max-width: 420px;">
58+
${Story()}
59+
<button @click=${() => document.getElementById('refNode')?.focus()}>
60+
Set focus
61+
</button>
62+
</div>
63+
`,
64+
],
8165
};

0 commit comments

Comments
 (0)