@spectrum-web-components/action-group 0.4.16 → 0.4.17-lit-next.0
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/action-group",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.17-lit-next.0+297042cb5",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"lit-html"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@spectrum-web-components/action-button": "^0.5.
|
|
48
|
-
"@spectrum-web-components/base": "^0.4.
|
|
47
|
+
"@spectrum-web-components/action-button": "^0.5.9-lit-next.0+297042cb5",
|
|
48
|
+
"@spectrum-web-components/base": "^0.4.6-lit-next.137+297042cb5",
|
|
49
49
|
"tslib": "^2.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"sideEffects": [
|
|
57
57
|
"./sp-*.js"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "297042cb5770314e9a5181c1fd97d722622f091c"
|
|
60
60
|
}
|
|
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
|
|
|
10
10
|
governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
import { html } from '@spectrum-web-components/base';
|
|
13
|
-
import { spreadProps } from '
|
|
13
|
+
import { spreadProps } from '../../../test/lit-helpers.js';
|
|
14
14
|
import '../sp-action-group.js';
|
|
15
15
|
import '@spectrum-web-components/action-button/sp-action-button.js';
|
|
16
16
|
import '@spectrum-web-components/overlay/overlay-trigger.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action-group-tooltip.stories.js","sourceRoot":"","sources":["action-group-tooltip.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"action-group-tooltip.stories.js","sourceRoot":"","sources":["action-group-tooltip.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/Tooltips',\n component: 'sp-action-group',\n args: {\n compact: false,\n emphasized: false,\n justified: false,\n quiet: false,\n vertical: false,\n selects: 'none',\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 selects: {\n name: 'selects',\n description:\n 'Whether the elements selects its children and how many it can select at a time.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['none', 'single', 'multiple'],\n },\n },\n },\n};\n\ninterface Properties {\n compact?: boolean;\n emphasized?: boolean;\n justified?: boolean;\n quiet?: boolean;\n vertical?: boolean;\n selects?: 'none' | 'single' | 'multiple';\n [prop: string]: any;\n}\n\nconst template = (args: Properties): TemplateResult => {\n return html`\n <sp-action-group\n label=\"Favorite Color\"\n ...=${spreadProps(args)}\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\" value=\"blue\" selected>\n Blue\n </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 ${args.selects == 'none'\n ? html``\n : html`\n <div>Selected:</div>\n `}\n `;\n};\n\nexport const selectsSingle = (args: Properties): TemplateResult =>\n template(args);\nselectsSingle.args = {\n compact: true,\n emphasized: true,\n selects: 'single',\n};\n\nexport const selectsMultiple = (args: Properties): TemplateResult =>\n template(args);\nselectsMultiple.args = {\n compact: true,\n emphasized: true,\n selects: 'multiple',\n};\n\nexport const justified = (args: Properties): TemplateResult => template(args);\njustified.args = {\n compact: true,\n emphasized: true,\n justified: true,\n};\n\nexport const vertical = (args: Properties): TemplateResult => template(args);\nvertical.args = {\n compact: true,\n emphasized: true,\n vertical: true,\n};\n"]}
|
|
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
|
|
|
10
10
|
governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
import { html } from '@spectrum-web-components/base';
|
|
13
|
-
import { spreadProps } from '
|
|
13
|
+
import { spreadProps } from '../../../test/lit-helpers.js';
|
|
14
14
|
import '../sp-action-group.js';
|
|
15
15
|
import '@spectrum-web-components/action-button/sp-action-button.js';
|
|
16
16
|
import '@spectrum-web-components/overlay/overlay-trigger.js';
|
|
@@ -91,7 +91,7 @@ export default {
|
|
|
91
91
|
};
|
|
92
92
|
function renderIconButtons(args) {
|
|
93
93
|
return html `
|
|
94
|
-
<sp-action-group
|
|
94
|
+
<sp-action-group ${spreadProps(args)}>
|
|
95
95
|
<sp-action-button label="Properties">
|
|
96
96
|
<sp-icon-properties slot="icon"></sp-icon-properties>
|
|
97
97
|
</sp-action-button>
|
|
@@ -106,7 +106,7 @@ function renderIconButtons(args) {
|
|
|
106
106
|
}
|
|
107
107
|
function renderButtons(args) {
|
|
108
108
|
return html `
|
|
109
|
-
<sp-action-group
|
|
109
|
+
<sp-action-group ${spreadProps(args)}>
|
|
110
110
|
<sp-action-button>Button 1</sp-action-button>
|
|
111
111
|
<sp-action-button>Longer Button 2</sp-action-button>
|
|
112
112
|
<sp-action-button>Short 3</sp-action-button>
|
|
@@ -140,7 +140,7 @@ export const selectsSingle = (args) => {
|
|
|
140
140
|
export const selectsMultiple = (args) => {
|
|
141
141
|
return html `
|
|
142
142
|
<sp-action-group
|
|
143
|
-
|
|
143
|
+
${spreadProps(args)}
|
|
144
144
|
label="Favorite Colors"
|
|
145
145
|
selects="multiple"
|
|
146
146
|
@change=${({ target }) => {
|
|
@@ -159,7 +159,7 @@ export const selectsMultiple = (args) => {
|
|
|
159
159
|
export const selectsMultipleWithTooltips = (args) => {
|
|
160
160
|
return html `
|
|
161
161
|
<sp-action-group
|
|
162
|
-
|
|
162
|
+
${spreadProps(args)}
|
|
163
163
|
label="Favorite Color"
|
|
164
164
|
selects="multiple"
|
|
165
165
|
@change=${({ target }) => {
|
|
@@ -1 +1 @@
|
|
|
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 '@open-wc/lit-helpers';\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}\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\nexport const Default = (args: Properties): TemplateResult =>\n renderButtons(args);\n\nexport const selectsSingle = (args: Properties): TemplateResult => {\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 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 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
|
+
{"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]: any;\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\nexport const Default = (args: Properties): TemplateResult =>\n renderButtons(args);\n\nexport const selectsSingle = (args: Properties): TemplateResult => {\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 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 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"]}
|