@spectrum-web-components/menu 1.0.2 → 1.0.3
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/LICENSE +201 -0
- package/package.json +12 -11
- package/stories/index.js +82 -0
- package/stories/index.js.map +7 -0
- package/stories/menu-divider.stories.js +32 -0
- package/stories/menu-divider.stories.js.map +7 -0
- package/stories/menu-group.stories.js +144 -0
- package/stories/menu-group.stories.js.map +7 -0
- package/stories/menu-item.disconnected.stories.js +176 -0
- package/stories/menu-item.disconnected.stories.js.map +7 -0
- package/stories/menu-item.stories.js +73 -0
- package/stories/menu-item.stories.js.map +7 -0
- package/stories/menu-sizes.stories.js +11 -0
- package/stories/menu-sizes.stories.js.map +7 -0
- package/stories/menu.stories.js +403 -0
- package/stories/menu.stories.js.map +7 -0
- package/stories/submenu.stories.js +346 -0
- package/stories/submenu.stories.js.map +7 -0
- package/test/benchmark/test-basic.js +24 -0
- package/test/benchmark/test-basic.js.map +7 -0
- package/test/menu-divider.test-vrt.js +5 -0
- package/test/menu-divider.test-vrt.js.map +7 -0
- package/test/menu-group.test-vrt.js +5 -0
- package/test/menu-group.test-vrt.js.map +7 -0
- package/test/menu-group.test.js +405 -0
- package/test/menu-group.test.js.map +7 -0
- package/test/menu-item.disconnected.test-vrt.js +5 -0
- package/test/menu-item.disconnected.test-vrt.js.map +7 -0
- package/test/menu-item.test-vrt.js +5 -0
- package/test/menu-item.test-vrt.js.map +7 -0
- package/test/menu-item.test.js +189 -0
- package/test/menu-item.test.js.map +7 -0
- package/test/menu-memory.test.js +5 -0
- package/test/menu-memory.test.js.map +7 -0
- package/test/menu-selects.test.js +530 -0
- package/test/menu-selects.test.js.map +7 -0
- package/test/menu-sizes.test-vrt.js +5 -0
- package/test/menu-sizes.test-vrt.js.map +7 -0
- package/test/menu.test-vrt.js +5 -0
- package/test/menu.test-vrt.js.map +7 -0
- package/test/menu.test.js +559 -0
- package/test/menu.test.js.map +7 -0
- package/test/submenu.test-vrt.js +5 -0
- package/test/submenu.test-vrt.js.map +7 -0
- package/test/submenu.test.js +970 -0
- package/test/submenu.test.js.map +7 -0
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
5
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
6
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
|
+
if (decorator = decorators[i])
|
|
8
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
+
if (kind && result) __defProp(target, key, result);
|
|
10
|
+
return result;
|
|
11
|
+
};
|
|
12
|
+
import { html, LitElement } from "lit";
|
|
13
|
+
import { property, state } from "lit/decorators.js";
|
|
14
|
+
import { repeat } from "lit/directives/repeat.js";
|
|
15
|
+
import { when } from "lit/directives/when.js";
|
|
16
|
+
import "@spectrum-web-components/picker/sp-picker.js";
|
|
17
|
+
import "@spectrum-web-components/button/sp-button.js";
|
|
18
|
+
import { SpectrumMixin } from "@spectrum-web-components/base";
|
|
19
|
+
var BlendModeValue = /* @__PURE__ */ ((BlendModeValue2) => {
|
|
20
|
+
BlendModeValue2[BlendModeValue2["normal"] = 2] = "normal";
|
|
21
|
+
BlendModeValue2[BlendModeValue2["multiply"] = 3] = "multiply";
|
|
22
|
+
BlendModeValue2[BlendModeValue2["screen"] = 7] = "screen";
|
|
23
|
+
return BlendModeValue2;
|
|
24
|
+
})(BlendModeValue || {});
|
|
25
|
+
const XElement = SpectrumMixin(LitElement);
|
|
26
|
+
class MyContainer extends XElement {
|
|
27
|
+
constructor() {
|
|
28
|
+
super(...arguments);
|
|
29
|
+
this._counter = 0;
|
|
30
|
+
}
|
|
31
|
+
_handleClick() {
|
|
32
|
+
this._counter += 1;
|
|
33
|
+
}
|
|
34
|
+
render() {
|
|
35
|
+
return html`
|
|
36
|
+
<div>
|
|
37
|
+
${when(
|
|
38
|
+
this._counter % 2 === 0,
|
|
39
|
+
() => html`
|
|
40
|
+
<my-view1></my-view1>
|
|
41
|
+
`,
|
|
42
|
+
() => html`
|
|
43
|
+
<my-view2></my-view2>
|
|
44
|
+
`
|
|
45
|
+
)}
|
|
46
|
+
<sp-button
|
|
47
|
+
variant="primary"
|
|
48
|
+
size="m"
|
|
49
|
+
@click=${this._handleClick}
|
|
50
|
+
>
|
|
51
|
+
Switch views
|
|
52
|
+
</sp-button>
|
|
53
|
+
</div>
|
|
54
|
+
`;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
__decorateClass([
|
|
58
|
+
state()
|
|
59
|
+
], MyContainer.prototype, "_counter", 2);
|
|
60
|
+
customElements.define("my-container", MyContainer);
|
|
61
|
+
class MyView1 extends XElement {
|
|
62
|
+
render() {
|
|
63
|
+
const blendModeOptions = [
|
|
64
|
+
{
|
|
65
|
+
value: 2 /* normal */,
|
|
66
|
+
title: "Normal 1",
|
|
67
|
+
subtitle: "No effect applied"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
value: 3 /* multiply */,
|
|
71
|
+
title: "Multiply",
|
|
72
|
+
subtitle: "Darken shadows with contrast and details"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
value: 7 /* screen */,
|
|
76
|
+
title: "Screen",
|
|
77
|
+
subtitle: "Brighten highlights with contrast and details"
|
|
78
|
+
}
|
|
79
|
+
];
|
|
80
|
+
return html`
|
|
81
|
+
View 1
|
|
82
|
+
<my-picker
|
|
83
|
+
.blendMode=${2 /* normal */}
|
|
84
|
+
.blendModeOptions=${blendModeOptions}
|
|
85
|
+
dir="ltr"
|
|
86
|
+
></my-picker>
|
|
87
|
+
`;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
customElements.define("my-view1", MyView1);
|
|
91
|
+
class MyView2 extends XElement {
|
|
92
|
+
render() {
|
|
93
|
+
const blendModeOptions = [
|
|
94
|
+
{
|
|
95
|
+
value: 2 /* normal */,
|
|
96
|
+
title: "Normal 2",
|
|
97
|
+
subtitle: "No effect applied"
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
value: 3 /* multiply */,
|
|
101
|
+
title: "Multiply",
|
|
102
|
+
subtitle: "Darken shadows with contrast and details"
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
value: 7 /* screen */,
|
|
106
|
+
title: "Screen",
|
|
107
|
+
subtitle: "Brighten highlights with contrast and details"
|
|
108
|
+
}
|
|
109
|
+
];
|
|
110
|
+
return html`
|
|
111
|
+
View 2
|
|
112
|
+
<my-picker
|
|
113
|
+
.blendMode=${2 /* normal */}
|
|
114
|
+
.blendModeOptions=${blendModeOptions}
|
|
115
|
+
></my-picker>
|
|
116
|
+
`;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
customElements.define("my-view2", MyView2);
|
|
120
|
+
class MyPicker extends XElement {
|
|
121
|
+
constructor() {
|
|
122
|
+
super(...arguments);
|
|
123
|
+
this.blendModeOptions = [];
|
|
124
|
+
this.blendMode = 2 /* normal */;
|
|
125
|
+
}
|
|
126
|
+
_renderBlendOptions() {
|
|
127
|
+
return html`
|
|
128
|
+
${repeat(
|
|
129
|
+
this.blendModeOptions,
|
|
130
|
+
// This is intentional so that repeat directive will add instead of
|
|
131
|
+
// update existing DOM which will then trigger error in
|
|
132
|
+
// MenuItem.childrenItem
|
|
133
|
+
// Using .value for the key will workaround the issue
|
|
134
|
+
(blendModeOption) => blendModeOption,
|
|
135
|
+
(blendModeOption) => html`
|
|
136
|
+
<sp-menu-item value=${blendModeOption.value}>
|
|
137
|
+
${blendModeOption.title}
|
|
138
|
+
<span slot="value">
|
|
139
|
+
${blendModeOption.subtitle}
|
|
140
|
+
</span>
|
|
141
|
+
</sp-menu-item>
|
|
142
|
+
`
|
|
143
|
+
)}
|
|
144
|
+
`;
|
|
145
|
+
}
|
|
146
|
+
render() {
|
|
147
|
+
return html`
|
|
148
|
+
<sp-picker
|
|
149
|
+
id="blendMode"
|
|
150
|
+
size="l"
|
|
151
|
+
label="Blend"
|
|
152
|
+
value=${this.blendMode}
|
|
153
|
+
>
|
|
154
|
+
${this._renderBlendOptions()}
|
|
155
|
+
</sp-picker>
|
|
156
|
+
`;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
__decorateClass([
|
|
160
|
+
property({ type: Array })
|
|
161
|
+
], MyPicker.prototype, "blendModeOptions", 2);
|
|
162
|
+
__decorateClass([
|
|
163
|
+
property()
|
|
164
|
+
], MyPicker.prototype, "blendMode", 2);
|
|
165
|
+
customElements.define("my-picker", MyPicker);
|
|
166
|
+
export default {
|
|
167
|
+
component: "sp-menu-item",
|
|
168
|
+
title: "Menu Item/Disconnected"
|
|
169
|
+
};
|
|
170
|
+
export const disconnectedChildItems = () => html`
|
|
171
|
+
<my-container></my-container>
|
|
172
|
+
`;
|
|
173
|
+
disconnectedChildItems.swc_vrt = {
|
|
174
|
+
skip: true
|
|
175
|
+
};
|
|
176
|
+
//# sourceMappingURL=menu-item.disconnected.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["menu-item.disconnected.stories.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 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, LitElement, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { when } from 'lit/directives/when.js';\n\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport { SpectrumMixin } from '@spectrum-web-components/base';\n\nenum BlendModeValue {\n normal = 2,\n multiply = 3,\n screen = 7,\n}\n\ninterface BlendModeOption {\n value: BlendModeValue;\n title: string;\n subtitle: string;\n thumbnail: string;\n}\n\nconst XElement = SpectrumMixin(LitElement);\n\nclass MyContainer extends XElement {\n @state()\n private _counter = 0;\n\n private _handleClick(): void {\n this._counter += 1;\n }\n\n protected override render(): TemplateResult {\n return html`\n <div>\n ${when(\n this._counter % 2 === 0,\n () => html`\n <my-view1></my-view1>\n `,\n () => html`\n <my-view2></my-view2>\n `\n )}\n <sp-button\n variant=\"primary\"\n size=\"m\"\n @click=${this._handleClick}\n >\n Switch views\n </sp-button>\n </div>\n `;\n }\n}\n\ncustomElements.define('my-container', MyContainer);\n\nclass MyView1 extends XElement {\n protected override render(): TemplateResult {\n const blendModeOptions = [\n {\n value: BlendModeValue.normal,\n title: 'Normal 1',\n subtitle: 'No effect applied',\n },\n {\n value: BlendModeValue.multiply,\n title: 'Multiply',\n subtitle: 'Darken shadows with contrast and details',\n },\n {\n value: BlendModeValue.screen,\n title: 'Screen',\n subtitle: 'Brighten highlights with contrast and details',\n },\n ];\n return html`\n View 1\n <my-picker\n .blendMode=${BlendModeValue.normal}\n .blendModeOptions=${blendModeOptions}\n dir=\"ltr\"\n ></my-picker>\n `;\n }\n}\n\ncustomElements.define('my-view1', MyView1);\n\nclass MyView2 extends XElement {\n protected override render(): TemplateResult {\n const blendModeOptions = [\n {\n value: BlendModeValue.normal,\n title: 'Normal 2',\n subtitle: 'No effect applied',\n },\n {\n value: BlendModeValue.multiply,\n title: 'Multiply',\n subtitle: 'Darken shadows with contrast and details',\n },\n {\n value: BlendModeValue.screen,\n title: 'Screen',\n subtitle: 'Brighten highlights with contrast and details',\n },\n ];\n return html`\n View 2\n <my-picker\n .blendMode=${BlendModeValue.normal}\n .blendModeOptions=${blendModeOptions}\n ></my-picker>\n `;\n }\n}\n\ncustomElements.define('my-view2', MyView2);\n\nclass MyPicker extends XElement {\n @property({ type: Array })\n public blendModeOptions: BlendModeOption[] = [];\n\n @property()\n public blendMode: number = BlendModeValue.normal;\n\n private _renderBlendOptions(): TemplateResult {\n return html`\n ${repeat(\n this.blendModeOptions,\n // This is intentional so that repeat directive will add instead of\n // update existing DOM which will then trigger error in\n // MenuItem.childrenItem\n // Using .value for the key will workaround the issue\n (blendModeOption) => blendModeOption,\n (blendModeOption: BlendModeOption) =>\n html`\n <sp-menu-item value=${blendModeOption.value}>\n ${blendModeOption.title}\n <span slot=\"value\">\n ${blendModeOption.subtitle}\n </span>\n </sp-menu-item>\n `\n )}\n `;\n }\n protected override render(): TemplateResult {\n return html`\n <sp-picker\n id=\"blendMode\"\n size=\"l\"\n label=\"Blend\"\n value=${this.blendMode}\n >\n ${this._renderBlendOptions()}\n </sp-picker>\n `;\n }\n}\n\ncustomElements.define('my-picker', MyPicker);\n\nexport default {\n component: 'sp-menu-item',\n title: 'Menu Item/Disconnected',\n};\n\nexport const disconnectedChildItems = (): TemplateResult => html`\n <my-container></my-container>\n`;\n\ndisconnectedChildItems.swc_vrt = {\n skip: true,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["BlendModeValue"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { html } from "@spectrum-web-components/base";
|
|
3
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
|
|
4
|
+
import "@spectrum-web-components/menu/sp-menu.js";
|
|
5
|
+
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
6
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
|
|
7
|
+
export default {
|
|
8
|
+
component: "sp-menu-item",
|
|
9
|
+
title: "Menu Item"
|
|
10
|
+
};
|
|
11
|
+
export const Default = () => {
|
|
12
|
+
return html`
|
|
13
|
+
<sp-menu>
|
|
14
|
+
<sp-menu-item>Menu Item</sp-menu-item>
|
|
15
|
+
</sp-menu>
|
|
16
|
+
`;
|
|
17
|
+
};
|
|
18
|
+
export const noWrap = () => {
|
|
19
|
+
return html`
|
|
20
|
+
<sp-menu style="width: 150px;">
|
|
21
|
+
<sp-menu-item no-wrap>
|
|
22
|
+
Select a Country with a very long label, too long, in fact
|
|
23
|
+
</sp-menu-item>
|
|
24
|
+
</sp-menu>
|
|
25
|
+
`;
|
|
26
|
+
};
|
|
27
|
+
export const descriptionSlot = () => {
|
|
28
|
+
return html`
|
|
29
|
+
<sp-menu>
|
|
30
|
+
<sp-menu-item>
|
|
31
|
+
Quick export
|
|
32
|
+
<span slot="description">Share a snapshot</span>
|
|
33
|
+
</sp-menu-item>
|
|
34
|
+
</sp-menu>
|
|
35
|
+
`;
|
|
36
|
+
};
|
|
37
|
+
export const valueSlot = () => {
|
|
38
|
+
return html`
|
|
39
|
+
<style>
|
|
40
|
+
kbd {
|
|
41
|
+
font-family: var(--spectrum-alias-body-text-font-family);
|
|
42
|
+
white-space: nowrap;
|
|
43
|
+
}
|
|
44
|
+
</style>
|
|
45
|
+
<sp-menu style="width: 150px;" selects="single">
|
|
46
|
+
<sp-menu-item>
|
|
47
|
+
Save
|
|
48
|
+
<kbd slot="value">⌘S</kbd>
|
|
49
|
+
</sp-menu-item>
|
|
50
|
+
<sp-menu-item selected>
|
|
51
|
+
Save As...
|
|
52
|
+
<kbd slot="value">⇧⌘S</kbd>
|
|
53
|
+
</sp-menu-item>
|
|
54
|
+
<sp-menu-item disabled>
|
|
55
|
+
Save All
|
|
56
|
+
<kbd slot="value">⌥⌘S</kbd>
|
|
57
|
+
</sp-menu-item>
|
|
58
|
+
</sp-menu>
|
|
59
|
+
`;
|
|
60
|
+
};
|
|
61
|
+
export const href = () => {
|
|
62
|
+
return html`
|
|
63
|
+
<sp-menu style="width: 150px;">
|
|
64
|
+
<sp-menu-item
|
|
65
|
+
href="https://opensource.adobe.com/spectrum-web-components"
|
|
66
|
+
>
|
|
67
|
+
<sp-icon-edit slot="icon"></sp-icon-edit>
|
|
68
|
+
Edit the Documentation Site
|
|
69
|
+
</sp-menu-item>
|
|
70
|
+
</sp-menu>
|
|
71
|
+
`;
|
|
72
|
+
};
|
|
73
|
+
//# sourceMappingURL=menu-item.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["menu-item.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*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\n\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\n\nexport default {\n component: 'sp-menu-item',\n title: 'Menu Item',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-menu>\n <sp-menu-item>Menu Item</sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const noWrap = (): TemplateResult => {\n return html`\n <sp-menu style=\"width: 150px;\">\n <sp-menu-item no-wrap>\n Select a Country with a very long label, too long, in fact\n </sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const descriptionSlot = (): TemplateResult => {\n return html`\n <sp-menu>\n <sp-menu-item>\n Quick export\n <span slot=\"description\">Share a snapshot</span>\n </sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const valueSlot = (): TemplateResult => {\n /**\n * This story featurs zero width spaces between the characters in the `<kbd>` element.\n * While their absence has not caused issues in the local Storybook, the visual regression\n * suite was causig the `\u2318\u200B` character to display different between the various Menu Items\n * without the intevening zero width space character. When reviewing in the future,\n * `font-variant-ligatures: none` was also not enough to address this situation.\n */\n //\n //\n return html`\n <style>\n kbd {\n font-family: var(--spectrum-alias-body-text-font-family);\n white-space: nowrap;\n }\n </style>\n <sp-menu style=\"width: 150px;\" selects=\"single\">\n <sp-menu-item>\n Save\n <kbd slot=\"value\">\u2318\u200BS</kbd>\n </sp-menu-item>\n <sp-menu-item selected>\n Save As...\n <kbd slot=\"value\">\u21E7\u200B\u2318\u200BS</kbd>\n </sp-menu-item>\n <sp-menu-item disabled>\n Save All\n <kbd slot=\"value\">\u2325\u200B\u2318\u200BS</kbd>\n </sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const href = (): TemplateResult => {\n return html`\n <sp-menu style=\"width: 150px;\">\n <sp-menu-item\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n >\n <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n Edit the Documentation Site\n </sp-menu-item>\n </sp-menu>\n `;\n};\n"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,YAA4B;AACrC,OAAO;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAKX;AAEO,aAAM,SAAS,MAAsB;AACxC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQX;AAEO,aAAM,YAAY,MAAsB;AAU3C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBX;AAEO,aAAM,OAAO,MAAsB;AACtC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUX;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { MenuMarkup } from "./";
|
|
3
|
+
export default {
|
|
4
|
+
component: "sp-menu",
|
|
5
|
+
title: "Menu/Sizes"
|
|
6
|
+
};
|
|
7
|
+
export const S = () => MenuMarkup({ size: "s" });
|
|
8
|
+
export const M = () => MenuMarkup({ size: "m" });
|
|
9
|
+
export const L = () => MenuMarkup({ size: "l" });
|
|
10
|
+
export const XL = () => MenuMarkup({ size: "xl" });
|
|
11
|
+
//# sourceMappingURL=menu-sizes.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["menu-sizes.stories.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 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 { TemplateResult } from '@spectrum-web-components/base';\nimport { MenuMarkup } from './';\n\nexport default {\n component: 'sp-menu',\n title: 'Menu/Sizes',\n};\n\nexport const S = (): TemplateResult => MenuMarkup({ size: 's' });\nexport const M = (): TemplateResult => MenuMarkup({ size: 'm' });\nexport const L = (): TemplateResult => MenuMarkup({ size: 'l' });\nexport const XL = (): TemplateResult => MenuMarkup({ size: 'xl' });\n"],
|
|
5
|
+
"mappings": ";AAaA,SAAS,kBAAkB;AAE3B,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,IAAI,MAAsB,WAAW,EAAE,MAAM,IAAI,CAAC;AACxD,aAAM,IAAI,MAAsB,WAAW,EAAE,MAAM,IAAI,CAAC;AACxD,aAAM,IAAI,MAAsB,WAAW,EAAE,MAAM,IAAI,CAAC;AACxD,aAAM,KAAK,MAAsB,WAAW,EAAE,MAAM,KAAK,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|