@spectrum-web-components/action-group 0.9.0 → 0.10.1-devmode.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +23 -10
- package/sp-action-group.dev.js +3 -0
- package/sp-action-group.dev.js.map +7 -0
- package/sp-action-group.js +3 -14
- package/sp-action-group.js.map +7 -1
- package/src/ActionGroup.dev.js +309 -0
- package/src/ActionGroup.dev.js.map +7 -0
- package/src/ActionGroup.js +291 -308
- package/src/ActionGroup.js.map +7 -1
- package/src/action-group.css.dev.js +149 -0
- package/src/action-group.css.dev.js.map +7 -0
- package/src/action-group.css.js +6 -33
- package/src/action-group.css.js.map +7 -1
- package/src/index.dev.js +2 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +2 -13
- package/src/index.js.map +7 -1
- package/src/spectrum-action-group.css.dev.js +143 -0
- package/src/spectrum-action-group.css.dev.js.map +7 -0
- package/src/spectrum-action-group.css.js +3 -14
- package/src/spectrum-action-group.css.js.map +7 -1
- package/stories/action-group-tooltip.stories.js +116 -129
- package/stories/action-group-tooltip.stories.js.map +7 -1
- package/stories/action-group.stories.js +124 -135
- package/stories/action-group.stories.js.map +7 -1
- package/test/action-group-tooltip.test-vrt.js +4 -15
- package/test/action-group-tooltip.test-vrt.js.map +7 -1
- package/test/action-group.test-vrt.js +4 -15
- package/test/action-group.test-vrt.js.map +7 -1
- package/test/action-group.test.js +454 -465
- package/test/action-group.test.js.map +7 -1
- package/test/benchmark/basic-test.js +6 -17
- package/test/benchmark/basic-test.js.map +7 -1
|
@@ -1,96 +1,85 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import { html } from '@spectrum-web-components/base';
|
|
13
|
-
import { spreadProps } from '../../../test/lit-helpers.js';
|
|
14
|
-
import '../sp-action-group.js';
|
|
15
|
-
import '@spectrum-web-components/action-button/sp-action-button.js';
|
|
16
|
-
import '@spectrum-web-components/overlay/overlay-trigger.js';
|
|
17
|
-
import '@spectrum-web-components/tooltip/sp-tooltip.js';
|
|
18
|
-
import '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';
|
|
19
|
-
import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
|
|
20
|
-
import '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';
|
|
1
|
+
import { html } from "@spectrum-web-components/base";
|
|
2
|
+
import { spreadProps } from "../../../test/lit-helpers.js";
|
|
3
|
+
import "@spectrum-web-components/action-group/sp-action-group.js";
|
|
4
|
+
import "@spectrum-web-components/action-button/sp-action-button.js";
|
|
5
|
+
import "@spectrum-web-components/overlay/overlay-trigger.js";
|
|
6
|
+
import "@spectrum-web-components/tooltip/sp-tooltip.js";
|
|
7
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js";
|
|
8
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js";
|
|
9
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js";
|
|
21
10
|
export default {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
11
|
+
title: "Action Group",
|
|
12
|
+
component: "sp-action-group",
|
|
13
|
+
args: {
|
|
14
|
+
compact: false,
|
|
15
|
+
emphasized: false,
|
|
16
|
+
justified: false,
|
|
17
|
+
quiet: false,
|
|
18
|
+
vertical: false
|
|
19
|
+
},
|
|
20
|
+
argTypes: {
|
|
21
|
+
compact: {
|
|
22
|
+
name: "compact",
|
|
23
|
+
description: "Visually joins the buttons together to clarify their relationship to one another.",
|
|
24
|
+
type: { name: "boolean", required: false },
|
|
25
|
+
table: {
|
|
26
|
+
type: { summary: "boolean" },
|
|
27
|
+
defaultValue: { summary: false }
|
|
28
|
+
},
|
|
29
|
+
control: {
|
|
30
|
+
type: "boolean"
|
|
31
|
+
}
|
|
30
32
|
},
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
type: 'boolean',
|
|
42
|
-
},
|
|
43
|
-
},
|
|
44
|
-
emphasized: {
|
|
45
|
-
name: 'emphasized',
|
|
46
|
-
type: { name: 'boolean', required: false },
|
|
47
|
-
table: {
|
|
48
|
-
type: { summary: 'boolean' },
|
|
49
|
-
defaultValue: { summary: false },
|
|
50
|
-
},
|
|
51
|
-
control: {
|
|
52
|
-
type: 'boolean',
|
|
53
|
-
},
|
|
54
|
-
},
|
|
55
|
-
justified: {
|
|
56
|
-
name: 'justified',
|
|
57
|
-
description: 'Aligns the action group items to use all the available space on that line.',
|
|
58
|
-
type: { name: 'boolean', required: false },
|
|
59
|
-
table: {
|
|
60
|
-
type: { summary: 'boolean' },
|
|
61
|
-
defaultValue: { summary: false },
|
|
62
|
-
},
|
|
63
|
-
control: {
|
|
64
|
-
type: 'boolean',
|
|
65
|
-
},
|
|
66
|
-
},
|
|
67
|
-
quiet: {
|
|
68
|
-
name: 'quiet',
|
|
69
|
-
type: { name: 'boolean', required: false },
|
|
70
|
-
table: {
|
|
71
|
-
type: { summary: 'boolean' },
|
|
72
|
-
defaultValue: { summary: false },
|
|
73
|
-
},
|
|
74
|
-
control: {
|
|
75
|
-
type: 'boolean',
|
|
76
|
-
},
|
|
77
|
-
},
|
|
78
|
-
vertical: {
|
|
79
|
-
name: 'vertical',
|
|
80
|
-
description: 'Changes the orientation of the action group.',
|
|
81
|
-
type: { name: 'boolean', required: false },
|
|
82
|
-
table: {
|
|
83
|
-
type: { summary: 'boolean' },
|
|
84
|
-
defaultValue: { summary: false },
|
|
85
|
-
},
|
|
86
|
-
control: {
|
|
87
|
-
type: 'boolean',
|
|
88
|
-
},
|
|
89
|
-
},
|
|
33
|
+
emphasized: {
|
|
34
|
+
name: "emphasized",
|
|
35
|
+
type: { name: "boolean", required: false },
|
|
36
|
+
table: {
|
|
37
|
+
type: { summary: "boolean" },
|
|
38
|
+
defaultValue: { summary: false }
|
|
39
|
+
},
|
|
40
|
+
control: {
|
|
41
|
+
type: "boolean"
|
|
42
|
+
}
|
|
90
43
|
},
|
|
44
|
+
justified: {
|
|
45
|
+
name: "justified",
|
|
46
|
+
description: "Aligns the action group items to use all the available space on that line.",
|
|
47
|
+
type: { name: "boolean", required: false },
|
|
48
|
+
table: {
|
|
49
|
+
type: { summary: "boolean" },
|
|
50
|
+
defaultValue: { summary: false }
|
|
51
|
+
},
|
|
52
|
+
control: {
|
|
53
|
+
type: "boolean"
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
quiet: {
|
|
57
|
+
name: "quiet",
|
|
58
|
+
type: { name: "boolean", required: false },
|
|
59
|
+
table: {
|
|
60
|
+
type: { summary: "boolean" },
|
|
61
|
+
defaultValue: { summary: false }
|
|
62
|
+
},
|
|
63
|
+
control: {
|
|
64
|
+
type: "boolean"
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
vertical: {
|
|
68
|
+
name: "vertical",
|
|
69
|
+
description: "Changes the orientation of the action group.",
|
|
70
|
+
type: { name: "boolean", required: false },
|
|
71
|
+
table: {
|
|
72
|
+
type: { summary: "boolean" },
|
|
73
|
+
defaultValue: { summary: false }
|
|
74
|
+
},
|
|
75
|
+
control: {
|
|
76
|
+
type: "boolean"
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
91
80
|
};
|
|
92
81
|
function renderIconButtons(args) {
|
|
93
|
-
|
|
82
|
+
return html`
|
|
94
83
|
<sp-action-group ${spreadProps(args)}>
|
|
95
84
|
<sp-action-button label="Properties">
|
|
96
85
|
<sp-icon-properties slot="icon"></sp-icon-properties>
|
|
@@ -105,7 +94,7 @@ function renderIconButtons(args) {
|
|
|
105
94
|
`;
|
|
106
95
|
}
|
|
107
96
|
function renderButtons(args) {
|
|
108
|
-
|
|
97
|
+
return html`
|
|
109
98
|
<sp-action-group ${spreadProps(args)}>
|
|
110
99
|
<sp-action-button>Button 1</sp-action-button>
|
|
111
100
|
<sp-action-button>Longer Button 2</sp-action-button>
|
|
@@ -114,16 +103,16 @@ function renderButtons(args) {
|
|
|
114
103
|
`;
|
|
115
104
|
}
|
|
116
105
|
function displaySelectionState() {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
106
|
+
const group = document.querySelector("sp-action-group");
|
|
107
|
+
const selectedDiv = group.nextElementSibling;
|
|
108
|
+
if (selectedDiv) {
|
|
109
|
+
selectedDiv.textContent = `Selected: ${JSON.stringify(group.selected)}`;
|
|
110
|
+
}
|
|
122
111
|
}
|
|
123
112
|
export const Default = (args) => renderButtons(args);
|
|
124
113
|
export const selectsSingle = (args) => {
|
|
125
|
-
|
|
126
|
-
|
|
114
|
+
requestAnimationFrame(displaySelectionState);
|
|
115
|
+
return html`
|
|
127
116
|
<sp-action-group
|
|
128
117
|
?compact=${args.compact}
|
|
129
118
|
?emphasized=${args.emphasized}
|
|
@@ -133,9 +122,9 @@ export const selectsSingle = (args) => {
|
|
|
133
122
|
label="Favorite Color"
|
|
134
123
|
selects="single"
|
|
135
124
|
@change=${({ target }) => {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
125
|
+
const next = target.nextElementSibling;
|
|
126
|
+
next.textContent = `Selected: ${JSON.stringify(target.selected)}`;
|
|
127
|
+
}}
|
|
139
128
|
>
|
|
140
129
|
<sp-action-button>Red</sp-action-button>
|
|
141
130
|
<sp-action-button>Green</sp-action-button>
|
|
@@ -146,16 +135,16 @@ export const selectsSingle = (args) => {
|
|
|
146
135
|
`;
|
|
147
136
|
};
|
|
148
137
|
export const selectsMultiple = (args) => {
|
|
149
|
-
|
|
150
|
-
|
|
138
|
+
requestAnimationFrame(displaySelectionState);
|
|
139
|
+
return html`
|
|
151
140
|
<sp-action-group
|
|
152
141
|
${spreadProps(args)}
|
|
153
142
|
label="Favorite Colors"
|
|
154
143
|
selects="multiple"
|
|
155
144
|
@change=${({ target }) => {
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
145
|
+
const next = target.nextElementSibling;
|
|
146
|
+
next.textContent = `Selected: ${JSON.stringify(target.selected)}`;
|
|
147
|
+
}}
|
|
159
148
|
>
|
|
160
149
|
<sp-action-button>Red</sp-action-button>
|
|
161
150
|
<sp-action-button selected>Green</sp-action-button>
|
|
@@ -166,15 +155,15 @@ export const selectsMultiple = (args) => {
|
|
|
166
155
|
`;
|
|
167
156
|
};
|
|
168
157
|
export const selectsMultipleWithTooltips = (args) => {
|
|
169
|
-
|
|
158
|
+
return html`
|
|
170
159
|
<sp-action-group
|
|
171
160
|
${spreadProps(args)}
|
|
172
161
|
label="Favorite Color"
|
|
173
162
|
selects="multiple"
|
|
174
163
|
@change=${({ target }) => {
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
164
|
+
const next = target.nextElementSibling;
|
|
165
|
+
next.textContent = `Selected: ${JSON.stringify(target.selected)}`;
|
|
166
|
+
}}
|
|
178
167
|
>
|
|
179
168
|
<overlay-trigger>
|
|
180
169
|
<sp-action-button slot="trigger">Red</sp-action-button>
|
|
@@ -201,17 +190,17 @@ export const selectsMultipleWithTooltips = (args) => {
|
|
|
201
190
|
`;
|
|
202
191
|
};
|
|
203
192
|
export const selectsMultipleControlled = (args) => {
|
|
204
|
-
|
|
205
|
-
|
|
193
|
+
requestAnimationFrame(displaySelectionState);
|
|
194
|
+
return html`
|
|
206
195
|
<sp-action-group
|
|
207
196
|
${spreadProps(args)}
|
|
208
197
|
selects="multiple"
|
|
209
|
-
.selected=${[
|
|
198
|
+
.selected=${["donuts", "crepecakes"]}
|
|
210
199
|
label="Favorite Dessert"
|
|
211
200
|
@change=${({ target }) => {
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
201
|
+
const next = target.nextElementSibling;
|
|
202
|
+
next.textContent = `Selected: ${JSON.stringify(target.selected)}`;
|
|
203
|
+
}}
|
|
215
204
|
>
|
|
216
205
|
<sp-action-button value="lavacakes">Lava Cakes</sp-action-button>
|
|
217
206
|
<sp-action-button value="donuts">Donuts</sp-action-button>
|
|
@@ -224,61 +213,61 @@ export const selectsMultipleControlled = (args) => {
|
|
|
224
213
|
export const iconsOnly = (args) => renderIconButtons(args);
|
|
225
214
|
export const quietIconsOnly = (args) => renderIconButtons(args);
|
|
226
215
|
quietIconsOnly.args = {
|
|
227
|
-
|
|
216
|
+
quiet: true
|
|
228
217
|
};
|
|
229
218
|
export const compact = (args) => renderButtons(args);
|
|
230
219
|
compact.args = {
|
|
231
|
-
|
|
220
|
+
compact: true
|
|
232
221
|
};
|
|
233
222
|
export const compactIconsOnly = (args) => renderIconButtons(args);
|
|
234
223
|
compactIconsOnly.args = {
|
|
235
|
-
|
|
224
|
+
compact: true
|
|
236
225
|
};
|
|
237
226
|
export const compactQuietIconsOnly = (args) => renderIconButtons(args);
|
|
238
227
|
compactQuietIconsOnly.args = {
|
|
239
|
-
|
|
240
|
-
|
|
228
|
+
compact: true,
|
|
229
|
+
quiet: true
|
|
241
230
|
};
|
|
242
231
|
export const vertical = (args) => renderButtons(args);
|
|
243
232
|
vertical.args = {
|
|
244
|
-
|
|
233
|
+
vertical: true
|
|
245
234
|
};
|
|
246
235
|
export const verticalIconsOnly = (args) => renderIconButtons(args);
|
|
247
236
|
verticalIconsOnly.args = {
|
|
248
|
-
|
|
237
|
+
vertical: true
|
|
249
238
|
};
|
|
250
239
|
export const verticalQuietIconsOnly = (args) => renderIconButtons(args);
|
|
251
240
|
verticalQuietIconsOnly.args = {
|
|
252
|
-
|
|
253
|
-
|
|
241
|
+
quiet: true,
|
|
242
|
+
vertical: true
|
|
254
243
|
};
|
|
255
244
|
export const compactVertical = (args) => renderButtons(args);
|
|
256
245
|
compactVertical.args = {
|
|
257
|
-
|
|
258
|
-
|
|
246
|
+
compact: true,
|
|
247
|
+
vertical: true
|
|
259
248
|
};
|
|
260
249
|
export const compactVerticalIconsOnly = (args) => renderIconButtons(args);
|
|
261
250
|
compactVerticalIconsOnly.args = {
|
|
262
|
-
|
|
263
|
-
|
|
251
|
+
compact: true,
|
|
252
|
+
vertical: true
|
|
264
253
|
};
|
|
265
254
|
export const compactQuietVerticalIconsOnly = (args) => renderIconButtons(args);
|
|
266
255
|
compactQuietVerticalIconsOnly.args = {
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
256
|
+
compact: true,
|
|
257
|
+
quiet: true,
|
|
258
|
+
vertical: true
|
|
270
259
|
};
|
|
271
260
|
export const justified = (args) => renderButtons(args);
|
|
272
261
|
justified.args = {
|
|
273
|
-
|
|
262
|
+
justified: true
|
|
274
263
|
};
|
|
275
264
|
export const justifiedIconsOnly = (args) => renderIconButtons(args);
|
|
276
265
|
justifiedIconsOnly.args = {
|
|
277
|
-
|
|
266
|
+
justified: true
|
|
278
267
|
};
|
|
279
268
|
export const compactJustifiedIconsOnly = (args) => renderIconButtons(args);
|
|
280
269
|
compactJustifiedIconsOnly.args = {
|
|
281
|
-
|
|
282
|
-
|
|
270
|
+
compact: true,
|
|
271
|
+
justified: true
|
|
283
272
|
};
|
|
284
|
-
//# sourceMappingURL=action-group.stories.js.map
|
|
273
|
+
//# sourceMappingURL=action-group.stories.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{"version":3,"file":"action-group.stories.js","sourceRoot":"","sources":["action-group.stories.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nimport '../sp-action-group.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';\nimport { ActionGroup } from '../src/ActionGroup.js';\n\nexport default {\n title: 'Action Group',\n component: 'sp-action-group',\n args: {\n compact: false,\n emphasized: false,\n justified: false,\n quiet: false,\n vertical: false,\n },\n argTypes: {\n compact: {\n name: 'compact',\n description:\n 'Visually joins the buttons together to clarify their relationship to one another.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n emphasized: {\n name: 'emphasized',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n justified: {\n name: 'justified',\n description:\n 'Aligns the action group items to use all the available space on that line.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n vertical: {\n name: 'vertical',\n description: 'Changes the orientation of the action group.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n};\n\ninterface Properties {\n compact?: boolean;\n emphasized?: boolean;\n justified?: boolean;\n quiet?: boolean;\n vertical?: boolean;\n [prop: string]: unknown;\n}\n\nfunction renderIconButtons(args: Properties): TemplateResult {\n return html`\n <sp-action-group ${spreadProps(args)}>\n <sp-action-button label=\"Properties\">\n <sp-icon-properties slot=\"icon\"></sp-icon-properties>\n </sp-action-button>\n <sp-action-button label=\"Info\">\n <sp-icon-info slot=\"icon\"></sp-icon-info>\n </sp-action-button>\n <sp-action-button label=\"View All Tags\">\n <sp-icon-view-all-tags slot=\"icon\"></sp-icon-view-all-tags>\n </sp-action-button>\n </sp-action-group>\n `;\n}\n\nfunction renderButtons(args: Properties): TemplateResult {\n return html`\n <sp-action-group ${spreadProps(args)}>\n <sp-action-button>Button 1</sp-action-button>\n <sp-action-button>Longer Button 2</sp-action-button>\n <sp-action-button>Short 3</sp-action-button>\n </sp-action-group>\n `;\n}\n\nfunction displaySelectionState() {\n const group = document.querySelector('sp-action-group') as ActionGroup;\n const selectedDiv = group.nextElementSibling;\n if (selectedDiv) {\n selectedDiv.textContent = `Selected: ${JSON.stringify(group.selected)}`;\n }\n}\nexport const Default = (args: Properties): TemplateResult =>\n renderButtons(args);\n\nexport const selectsSingle = (args: Properties): TemplateResult => {\n requestAnimationFrame(displaySelectionState);\n return html`\n <sp-action-group\n ?compact=${args.compact}\n ?emphasized=${args.emphasized}\n ?quiet=${args.quiet}\n ?justified=${args.justified}\n ?vertical=${args.vertical}\n label=\"Favorite Color\"\n selects=\"single\"\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <sp-action-button>Red</sp-action-button>\n <sp-action-button>Green</sp-action-button>\n <sp-action-button>Blue</sp-action-button>\n <sp-action-button selected>Yellow</sp-action-button>\n </sp-action-group>\n <div>Selected:</div>\n `;\n};\n\nexport const selectsMultiple = (args: Properties): TemplateResult => {\n requestAnimationFrame(displaySelectionState);\n return html`\n <sp-action-group\n ${spreadProps(args)}\n label=\"Favorite Colors\"\n selects=\"multiple\"\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <sp-action-button>Red</sp-action-button>\n <sp-action-button selected>Green</sp-action-button>\n <sp-action-button selected>Blue</sp-action-button>\n <sp-action-button>Yellow</sp-action-button>\n </sp-action-group>\n <div>Selected:</div>\n `;\n};\n\nexport const selectsMultipleWithTooltips = (\n args: Properties\n): TemplateResult => {\n return html`\n <sp-action-group\n ${spreadProps(args)}\n label=\"Favorite Color\"\n selects=\"multiple\"\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Red</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n This is a cool color.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Green</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n You wouldn't be wrong.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Blue</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sky in spring.</sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Yellow</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sun at noon.</sp-tooltip>\n </overlay-trigger>\n </sp-action-group>\n <div>Selected:</div>\n `;\n};\n\nexport const selectsMultipleControlled = (args: Properties): TemplateResult => {\n requestAnimationFrame(displaySelectionState);\n return html`\n <sp-action-group\n ${spreadProps(args)}\n selects=\"multiple\"\n .selected=${['donuts', 'crepecakes']}\n label=\"Favorite Dessert\"\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <sp-action-button value=\"lavacakes\">Lava Cakes</sp-action-button>\n <sp-action-button value=\"donuts\">Donuts</sp-action-button>\n <sp-action-button value=\"crepecakes\">Crepe Cake</sp-action-button>\n <sp-action-button value=\"fruittarts\">Fruit Tarts</sp-action-button>\n </sp-action-group>\n <div>Selected:</div>\n `;\n};\n\nexport const iconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\n\nexport const quietIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\nquietIconsOnly.args = {\n quiet: true,\n};\n\nexport const compact = (args: Properties): TemplateResult =>\n renderButtons(args);\ncompact.args = {\n compact: true,\n};\n\nexport const compactIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactIconsOnly.args = {\n compact: true,\n};\n\nexport const compactQuietIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactQuietIconsOnly.args = {\n compact: true,\n quiet: true,\n};\n\nexport const vertical = (args: Properties): TemplateResult =>\n renderButtons(args);\nvertical.args = {\n vertical: true,\n};\n\nexport const verticalIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\nverticalIconsOnly.args = {\n vertical: true,\n};\n\nexport const verticalQuietIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\nverticalQuietIconsOnly.args = {\n quiet: true,\n vertical: true,\n};\n\nexport const compactVertical = (args: Properties): TemplateResult =>\n renderButtons(args);\ncompactVertical.args = {\n compact: true,\n vertical: true,\n};\n\nexport const compactVerticalIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactVerticalIconsOnly.args = {\n compact: true,\n vertical: true,\n};\n\nexport const compactQuietVerticalIconsOnly = (\n args: Properties\n): TemplateResult => renderIconButtons(args);\ncompactQuietVerticalIconsOnly.args = {\n compact: true,\n quiet: true,\n vertical: true,\n};\n\nexport const justified = (args: Properties): TemplateResult =>\n renderButtons(args);\njustified.args = {\n justified: true,\n};\n\nexport const justifiedIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\njustifiedIconsOnly.args = {\n justified: true,\n};\n\nexport const compactJustifiedIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactJustifiedIconsOnly.args = {\n compact: true,\n justified: true,\n};\n"]}
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["action-group.stories.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';\nimport { ActionGroup } from '@spectrum-web-components/action-group/src/ActionGroup.js';\n\nexport default {\n title: 'Action Group',\n component: 'sp-action-group',\n args: {\n compact: false,\n emphasized: false,\n justified: false,\n quiet: false,\n vertical: false,\n },\n argTypes: {\n compact: {\n name: 'compact',\n description:\n 'Visually joins the buttons together to clarify their relationship to one another.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n emphasized: {\n name: 'emphasized',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n justified: {\n name: 'justified',\n description:\n 'Aligns the action group items to use all the available space on that line.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n vertical: {\n name: 'vertical',\n description: 'Changes the orientation of the action group.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n};\n\ninterface Properties {\n compact?: boolean;\n emphasized?: boolean;\n justified?: boolean;\n quiet?: boolean;\n vertical?: boolean;\n [prop: string]: unknown;\n}\n\nfunction renderIconButtons(args: Properties): TemplateResult {\n return html`\n <sp-action-group ${spreadProps(args)}>\n <sp-action-button label=\"Properties\">\n <sp-icon-properties slot=\"icon\"></sp-icon-properties>\n </sp-action-button>\n <sp-action-button label=\"Info\">\n <sp-icon-info slot=\"icon\"></sp-icon-info>\n </sp-action-button>\n <sp-action-button label=\"View All Tags\">\n <sp-icon-view-all-tags slot=\"icon\"></sp-icon-view-all-tags>\n </sp-action-button>\n </sp-action-group>\n `;\n}\n\nfunction renderButtons(args: Properties): TemplateResult {\n return html`\n <sp-action-group ${spreadProps(args)}>\n <sp-action-button>Button 1</sp-action-button>\n <sp-action-button>Longer Button 2</sp-action-button>\n <sp-action-button>Short 3</sp-action-button>\n </sp-action-group>\n `;\n}\n\nfunction displaySelectionState() {\n const group = document.querySelector('sp-action-group') as ActionGroup;\n const selectedDiv = group.nextElementSibling;\n if (selectedDiv) {\n selectedDiv.textContent = `Selected: ${JSON.stringify(group.selected)}`;\n }\n}\nexport const Default = (args: Properties): TemplateResult =>\n renderButtons(args);\n\nexport const selectsSingle = (args: Properties): TemplateResult => {\n requestAnimationFrame(displaySelectionState);\n return html`\n <sp-action-group\n ?compact=${args.compact}\n ?emphasized=${args.emphasized}\n ?quiet=${args.quiet}\n ?justified=${args.justified}\n ?vertical=${args.vertical}\n label=\"Favorite Color\"\n selects=\"single\"\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <sp-action-button>Red</sp-action-button>\n <sp-action-button>Green</sp-action-button>\n <sp-action-button>Blue</sp-action-button>\n <sp-action-button selected>Yellow</sp-action-button>\n </sp-action-group>\n <div>Selected:</div>\n `;\n};\n\nexport const selectsMultiple = (args: Properties): TemplateResult => {\n requestAnimationFrame(displaySelectionState);\n return html`\n <sp-action-group\n ${spreadProps(args)}\n label=\"Favorite Colors\"\n selects=\"multiple\"\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <sp-action-button>Red</sp-action-button>\n <sp-action-button selected>Green</sp-action-button>\n <sp-action-button selected>Blue</sp-action-button>\n <sp-action-button>Yellow</sp-action-button>\n </sp-action-group>\n <div>Selected:</div>\n `;\n};\n\nexport const selectsMultipleWithTooltips = (\n args: Properties\n): TemplateResult => {\n return html`\n <sp-action-group\n ${spreadProps(args)}\n label=\"Favorite Color\"\n selects=\"multiple\"\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Red</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n This is a cool color.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Green</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n You wouldn't be wrong.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Blue</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sky in spring.</sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Yellow</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sun at noon.</sp-tooltip>\n </overlay-trigger>\n </sp-action-group>\n <div>Selected:</div>\n `;\n};\n\nexport const selectsMultipleControlled = (args: Properties): TemplateResult => {\n requestAnimationFrame(displaySelectionState);\n return html`\n <sp-action-group\n ${spreadProps(args)}\n selects=\"multiple\"\n .selected=${['donuts', 'crepecakes']}\n label=\"Favorite Dessert\"\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <sp-action-button value=\"lavacakes\">Lava Cakes</sp-action-button>\n <sp-action-button value=\"donuts\">Donuts</sp-action-button>\n <sp-action-button value=\"crepecakes\">Crepe Cake</sp-action-button>\n <sp-action-button value=\"fruittarts\">Fruit Tarts</sp-action-button>\n </sp-action-group>\n <div>Selected:</div>\n `;\n};\n\nexport const iconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\n\nexport const quietIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\nquietIconsOnly.args = {\n quiet: true,\n};\n\nexport const compact = (args: Properties): TemplateResult =>\n renderButtons(args);\ncompact.args = {\n compact: true,\n};\n\nexport const compactIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactIconsOnly.args = {\n compact: true,\n};\n\nexport const compactQuietIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactQuietIconsOnly.args = {\n compact: true,\n quiet: true,\n};\n\nexport const vertical = (args: Properties): TemplateResult =>\n renderButtons(args);\nvertical.args = {\n vertical: true,\n};\n\nexport const verticalIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\nverticalIconsOnly.args = {\n vertical: true,\n};\n\nexport const verticalQuietIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\nverticalQuietIconsOnly.args = {\n quiet: true,\n vertical: true,\n};\n\nexport const compactVertical = (args: Properties): TemplateResult =>\n renderButtons(args);\ncompactVertical.args = {\n compact: true,\n vertical: true,\n};\n\nexport const compactVerticalIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactVerticalIconsOnly.args = {\n compact: true,\n vertical: true,\n};\n\nexport const compactQuietVerticalIconsOnly = (\n args: Properties\n): TemplateResult => renderIconButtons(args);\ncompactQuietVerticalIconsOnly.args = {\n compact: true,\n quiet: true,\n vertical: true,\n};\n\nexport const justified = (args: Properties): TemplateResult =>\n renderButtons(args);\njustified.args = {\n justified: true,\n};\n\nexport const justifiedIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\njustifiedIconsOnly.args = {\n justified: true,\n};\n\nexport const compactJustifiedIconsOnly = (args: Properties): TemplateResult =>\n renderIconButtons(args);\ncompactJustifiedIconsOnly.args = {\n compact: true,\n justified: true,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,15 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import * as stories from '../stories/action-group-tooltip.stories.js';
|
|
13
|
-
import { regressVisuals } from '../../../test/visual/test.js';
|
|
14
|
-
regressVisuals('ActionGroupTooltipStories', stories);
|
|
15
|
-
//# sourceMappingURL=action-group-tooltip.test-vrt.js.map
|
|
1
|
+
import * as stories from "../stories/action-group-tooltip.stories.js";
|
|
2
|
+
import { regressVisuals } from "../../../test/visual/test.js";
|
|
3
|
+
regressVisuals("ActionGroupTooltipStories", stories);
|
|
4
|
+
//# sourceMappingURL=action-group-tooltip.test-vrt.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["action-group-tooltip.test-vrt.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/action-group-tooltip.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('ActionGroupTooltipStories', stories);\n"],
|
|
5
|
+
"mappings": "AAYA;AACA;AAEA,eAAe,6BAA6B,OAAO;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,15 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import * as stories from '../stories/action-group.stories.js';
|
|
13
|
-
import { regressVisuals } from '../../../test/visual/test.js';
|
|
14
|
-
regressVisuals('ActionGroupStories', stories);
|
|
15
|
-
//# sourceMappingURL=action-group.test-vrt.js.map
|
|
1
|
+
import * as stories from "../stories/action-group.stories.js";
|
|
2
|
+
import { regressVisuals } from "../../../test/visual/test.js";
|
|
3
|
+
regressVisuals("ActionGroupStories", stories);
|
|
4
|
+
//# sourceMappingURL=action-group.test-vrt.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["action-group.test-vrt.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/action-group.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('ActionGroupStories', stories);\n"],
|
|
5
|
+
"mappings": "AAYA;AACA;AAEA,eAAe,sBAAsB,OAAO;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|