@spectrum-web-components/card 0.33.3-overlay.66 → 0.34.1-rc.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 +10 -10
- package/src/Card.d.ts +1 -0
- package/src/Card.dev.js +8 -1
- package/src/Card.dev.js.map +2 -2
- package/src/Card.js +9 -3
- package/src/Card.js.map +2 -2
- package/src/card.css.dev.js +214 -178
- package/src/card.css.dev.js.map +2 -2
- package/src/card.css.js +216 -180
- package/src/card.css.js.map +2 -2
- package/src/spectrum-card.css.dev.js +213 -177
- package/src/spectrum-card.css.dev.js.map +2 -2
- package/src/spectrum-card.css.js +215 -179
- package/src/spectrum-card.css.js.map +2 -2
- package/stories/card.stories.js +20 -57
- package/stories/card.stories.js.map +2 -2
- package/test/card.test.js +8 -20
- package/test/card.test.js.map +2 -2
package/stories/card.stories.js
CHANGED
|
@@ -13,7 +13,6 @@ export default {
|
|
|
13
13
|
component: "sp-card",
|
|
14
14
|
title: "Card",
|
|
15
15
|
args: {
|
|
16
|
-
size: "m",
|
|
17
16
|
horizontal: false
|
|
18
17
|
},
|
|
19
18
|
argTypes: {
|
|
@@ -27,15 +26,6 @@ export default {
|
|
|
27
26
|
control: {
|
|
28
27
|
type: "boolean"
|
|
29
28
|
}
|
|
30
|
-
},
|
|
31
|
-
size: {
|
|
32
|
-
name: "size",
|
|
33
|
-
type: { name: "string", required: false },
|
|
34
|
-
table: {
|
|
35
|
-
type: { summary: '"s" | "m"' },
|
|
36
|
-
defaultValue: { summary: "m" }
|
|
37
|
-
},
|
|
38
|
-
control: { type: "text" }
|
|
39
29
|
}
|
|
40
30
|
}
|
|
41
31
|
};
|
|
@@ -44,8 +34,8 @@ export const Default = (args) => {
|
|
|
44
34
|
<sp-card
|
|
45
35
|
heading="Card Heading"
|
|
46
36
|
subheading="JPG"
|
|
47
|
-
size=${args.size}
|
|
48
37
|
?horizontal=${args.horizontal}
|
|
38
|
+
style="width: 200px;"
|
|
49
39
|
>
|
|
50
40
|
<img slot="cover-photo" src=${portrait} alt="Demo Graphic" />
|
|
51
41
|
<div slot="footer">Footer</div>
|
|
@@ -59,9 +49,9 @@ export const href = (args) => {
|
|
|
59
49
|
<sp-card
|
|
60
50
|
heading="Card Heading"
|
|
61
51
|
subheading="JPG"
|
|
62
|
-
.size=${args.size}
|
|
63
52
|
toggles
|
|
64
53
|
?horizontal=${args.horizontal}
|
|
54
|
+
style="width: 200px;"
|
|
65
55
|
href="https://opensource.adobe.com/spectrum-web-components"
|
|
66
56
|
@click=${(event) => {
|
|
67
57
|
const composedTarget = event.composedPath()[0];
|
|
@@ -97,8 +87,8 @@ export const actions = (args) => {
|
|
|
97
87
|
<sp-card
|
|
98
88
|
heading="Card Heading"
|
|
99
89
|
subheading="JPG"
|
|
100
|
-
size=${args.size}
|
|
101
90
|
?horizontal=${args.horizontal}
|
|
91
|
+
style="width: 200px;"
|
|
102
92
|
>
|
|
103
93
|
<img slot="cover-photo" src=${portrait} alt="Demo Graphic" />
|
|
104
94
|
<div slot="footer">Footer</div>
|
|
@@ -120,7 +110,6 @@ export const Gallery = (args) => {
|
|
|
120
110
|
variant="gallery"
|
|
121
111
|
heading="Card Heading"
|
|
122
112
|
subheading="JPG"
|
|
123
|
-
size=${args.size}
|
|
124
113
|
?horizontal=${args.horizontal}
|
|
125
114
|
>
|
|
126
115
|
<img
|
|
@@ -138,8 +127,8 @@ export const noPreviewImage = (args) => {
|
|
|
138
127
|
<sp-card
|
|
139
128
|
heading="Card Heading"
|
|
140
129
|
subheading="No preview image"
|
|
141
|
-
size=${args.size}
|
|
142
130
|
?horizontal=${args.horizontal}
|
|
131
|
+
style="width: 200px;"
|
|
143
132
|
>
|
|
144
133
|
<div slot="footer">Footer</div>
|
|
145
134
|
</sp-card>
|
|
@@ -147,13 +136,13 @@ export const noPreviewImage = (args) => {
|
|
|
147
136
|
};
|
|
148
137
|
export const Quiet = (args) => {
|
|
149
138
|
return html`
|
|
150
|
-
<div
|
|
139
|
+
<div>
|
|
151
140
|
<sp-card
|
|
152
141
|
variant="quiet"
|
|
153
142
|
heading="Card Heading"
|
|
154
143
|
subheading="JPG"
|
|
155
|
-
size=${args.size}
|
|
156
144
|
?horizontal=${args.horizontal}
|
|
145
|
+
style="width: 208px; height: 264px"
|
|
157
146
|
>
|
|
158
147
|
<img src=${portrait} alt="Demo Graphic" slot="preview" />
|
|
159
148
|
<div slot="description">10/15/18</div>
|
|
@@ -163,13 +152,13 @@ export const Quiet = (args) => {
|
|
|
163
152
|
};
|
|
164
153
|
export const quietFile = (args) => {
|
|
165
154
|
return html`
|
|
166
|
-
<div
|
|
155
|
+
<div>
|
|
167
156
|
<sp-card
|
|
168
157
|
variant="quiet"
|
|
169
158
|
subheading="JPG"
|
|
170
159
|
asset="file"
|
|
171
|
-
size=${args.size}
|
|
172
160
|
?horizontal=${args.horizontal}
|
|
161
|
+
style="width: 208px; height: 264px"
|
|
173
162
|
>
|
|
174
163
|
<img src=${portrait} alt="Demo Graphic" slot="preview" />
|
|
175
164
|
<div slot="heading">File Name</div>
|
|
@@ -180,13 +169,13 @@ export const quietFile = (args) => {
|
|
|
180
169
|
};
|
|
181
170
|
export const quietFolder = (args) => {
|
|
182
171
|
return html`
|
|
183
|
-
<div
|
|
172
|
+
<div>
|
|
184
173
|
<sp-card
|
|
185
174
|
variant="quiet"
|
|
186
175
|
subheading="JPG"
|
|
187
176
|
asset="folder"
|
|
188
|
-
size=${args.size}
|
|
189
177
|
?horizontal=${args.horizontal}
|
|
178
|
+
style="width: 208px; height: 264px"
|
|
190
179
|
>
|
|
191
180
|
<img src=${portrait} alt="Demo Graphic" slot="preview" />
|
|
192
181
|
<div slot="heading">Folder Name</div>
|
|
@@ -197,13 +186,13 @@ export const quietFolder = (args) => {
|
|
|
197
186
|
};
|
|
198
187
|
export const quietActions = (args) => {
|
|
199
188
|
return html`
|
|
200
|
-
<div
|
|
189
|
+
<div>
|
|
201
190
|
<sp-card
|
|
202
191
|
variant="quiet"
|
|
203
192
|
heading="Card Heading"
|
|
204
193
|
subheading="JPG"
|
|
205
|
-
size=${args.size}
|
|
206
194
|
?horizontal=${args.horizontal}
|
|
195
|
+
style="width: 208px; height: 264px"
|
|
207
196
|
>
|
|
208
197
|
<img src=${portrait} alt="Demo Graphic" slot="preview" />
|
|
209
198
|
<div slot="description">10/15/18</div>
|
|
@@ -221,32 +210,9 @@ export const quietActions = (args) => {
|
|
|
221
210
|
`;
|
|
222
211
|
};
|
|
223
212
|
quietActions.storyName = "Quiet w/ Actions";
|
|
224
|
-
export const
|
|
213
|
+
export const Horizontal = (args) => {
|
|
225
214
|
return html`
|
|
226
215
|
<sp-card
|
|
227
|
-
style="--spectrum-card-title-padding-right: 0; --spectrum-card-title-padding-left: 0;"
|
|
228
|
-
size=${args.size}
|
|
229
|
-
?horizontal=${args.horizontal}
|
|
230
|
-
heading="Card Heading"
|
|
231
|
-
subheading="JPG"
|
|
232
|
-
>
|
|
233
|
-
<img
|
|
234
|
-
slot="cover-photo"
|
|
235
|
-
src=${portrait}
|
|
236
|
-
alt="Demo Graphic"
|
|
237
|
-
style="width: 140px"
|
|
238
|
-
/>
|
|
239
|
-
<div slot="footer">Footer</div>
|
|
240
|
-
</sp-card>
|
|
241
|
-
`;
|
|
242
|
-
};
|
|
243
|
-
small.args = {
|
|
244
|
-
size: "s"
|
|
245
|
-
};
|
|
246
|
-
export const smallHorizontal = (args) => {
|
|
247
|
-
return html`
|
|
248
|
-
<sp-card
|
|
249
|
-
size=${args.size}
|
|
250
216
|
?horizontal=${args.horizontal}
|
|
251
217
|
heading="Card Heading"
|
|
252
218
|
subheading="JPG"
|
|
@@ -258,14 +224,12 @@ export const smallHorizontal = (args) => {
|
|
|
258
224
|
</sp-card>
|
|
259
225
|
`;
|
|
260
226
|
};
|
|
261
|
-
|
|
262
|
-
horizontal: true
|
|
263
|
-
size: "s"
|
|
227
|
+
Horizontal.args = {
|
|
228
|
+
horizontal: true
|
|
264
229
|
};
|
|
265
|
-
export const
|
|
230
|
+
export const horizontalWithHREF = (args) => {
|
|
266
231
|
return html`
|
|
267
232
|
<sp-card
|
|
268
|
-
.size=${args.size}
|
|
269
233
|
?horizontal=${args.horizontal}
|
|
270
234
|
heading="Card Heading"
|
|
271
235
|
subheading="JPG"
|
|
@@ -279,19 +243,19 @@ export const smallHorizontalWithHREF = (args) => {
|
|
|
279
243
|
</sp-card>
|
|
280
244
|
`;
|
|
281
245
|
};
|
|
282
|
-
|
|
283
|
-
horizontal: true
|
|
284
|
-
size: "s"
|
|
246
|
+
horizontalWithHREF.args = {
|
|
247
|
+
horizontal: true
|
|
285
248
|
};
|
|
286
249
|
export const smallQuiet = (args) => {
|
|
287
250
|
return html`
|
|
288
|
-
<div
|
|
251
|
+
<div>
|
|
289
252
|
<sp-card
|
|
290
253
|
size=${args.size}
|
|
291
254
|
?horizontal=${args.horizontal}
|
|
292
255
|
heading="Card Heading"
|
|
293
256
|
subheading="JPG"
|
|
294
257
|
variant="quiet"
|
|
258
|
+
style="width: 115px"
|
|
295
259
|
>
|
|
296
260
|
<img src=${portrait} alt="Demo Graphic" slot="preview" />
|
|
297
261
|
<div slot="footer">Footer</div>
|
|
@@ -326,7 +290,6 @@ export const SlottedHeading = (args) => {
|
|
|
326
290
|
--spectrum-card-body-header-height: auto;
|
|
327
291
|
--spectrum-alias-single-line-width: 100%;
|
|
328
292
|
"
|
|
329
|
-
size=${args.size}
|
|
330
293
|
?horizontal=${args.horizontal}
|
|
331
294
|
>
|
|
332
295
|
<img slot="cover-photo" src=${portrait} alt="Demo Graphic" />
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["card.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';\n\nimport '@spectrum-web-components/card/sp-card.js';\nimport { landscape, portrait } from './images';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-file-txt.js';\nimport '@spectrum-web-components/textfield/sp-textfield.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/link/sp-link.js';\n\nexport default {\n component: 'sp-card',\n title: 'Card',\n args: {\n size: 'm',\n horizontal: false,\n },\n argTypes: {\n horizontal: {\n name: 'horizontal',\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 size: {\n name: 'size',\n type: { name: 'string', required: false },\n table: {\n type: { summary: '\"s\" | \"m\"' },\n defaultValue: { summary: 'm' },\n },\n control: { type: 'text' },\n },\n },\n};\n\nexport interface StoryArgs {\n horizontal?: boolean;\n size?: 's' | 'm';\n onClick?: ((event: Event) => void) | undefined;\n}\n\nexport const Default = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n heading=\"Card Heading\"\n subheading=\"JPG\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img slot=\"cover-photo\" src=${portrait} alt=\"Demo Graphic\" />\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `;\n};\nDefault.args = {};\n\nexport const href = (args: StoryArgs): TemplateResult => {\n const { onClick } = args;\n return html`\n <sp-card\n heading=\"Card Heading\"\n subheading=\"JPG\"\n .size=${args.size}\n toggles\n ?horizontal=${args.horizontal}\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n @click=${(event: Event) => {\n const composedTarget = event.composedPath()[0] as HTMLElement;\n if (composedTarget.id !== 'like-anchor') return;\n event.stopPropagation();\n event.preventDefault();\n onClick && onClick(event);\n }}\n >\n <div slot=\"footer\">\n Footer with a\n <sp-link href=\"https://google.com\">link to Google</sp-link>\n </div>\n <sp-action-menu slot=\"actions\" placement=\"bottom-end\" quiet>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n <img slot=\"cover-photo\" src=${portrait} alt=\"Demo Graphic\" />\n </sp-card>\n `;\n};\nhref.argTypes = {\n onClick: { action: 'link click' },\n};\n\nexport const actions = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n heading=\"Card Heading\"\n subheading=\"JPG\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img slot=\"cover-photo\" src=${portrait} alt=\"Demo Graphic\" />\n <div slot=\"footer\">Footer</div>\n <sp-action-menu slot=\"actions\" placement=\"bottom-end\" quiet>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n </sp-card>\n `;\n};\n\nexport const Gallery = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n variant=\"gallery\"\n heading=\"Card Heading\"\n subheading=\"JPG\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img\n slot=\"preview\"\n src=${landscape}\n style=\"object-fit: cover\"\n alt=\"Demo Graphic\"\n />\n <div slot=\"description\">10/15/18</div>\n </sp-card>\n `;\n};\n\nexport const noPreviewImage = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n heading=\"Card Heading\"\n subheading=\"No preview image\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `;\n};\n\nexport const Quiet = (args: StoryArgs): TemplateResult => {\n return html`\n <div style=\"width: 208px; height: 264px\">\n <sp-card\n variant=\"quiet\"\n heading=\"Card Heading\"\n subheading=\"JPG\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img src=${portrait} alt=\"Demo Graphic\" slot=\"preview\" />\n <div slot=\"description\">10/15/18</div>\n </sp-card>\n </div>\n `;\n};\n\nexport const quietFile = (args: StoryArgs): TemplateResult => {\n return html`\n <div style=\"width: 208px; height: 264px\">\n <sp-card\n variant=\"quiet\"\n subheading=\"JPG\"\n asset=\"file\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img src=${portrait} alt=\"Demo Graphic\" slot=\"preview\" />\n <div slot=\"heading\">File Name</div>\n <div slot=\"description\">10/15/18</div>\n </sp-card>\n </div>\n `;\n};\n\nexport const quietFolder = (args: StoryArgs): TemplateResult => {\n return html`\n <div style=\"width: 208px; height: 264px\">\n <sp-card\n variant=\"quiet\"\n subheading=\"JPG\"\n asset=\"folder\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img src=${portrait} alt=\"Demo Graphic\" slot=\"preview\" />\n <div slot=\"heading\">Folder Name</div>\n <div slot=\"description\">10/15/18</div>\n </sp-card>\n </div>\n `;\n};\n\nexport const quietActions = (args: StoryArgs): TemplateResult => {\n return html`\n <div style=\"width: 208px; height: 264px\">\n <sp-card\n variant=\"quiet\"\n heading=\"Card Heading\"\n subheading=\"JPG\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img src=${portrait} alt=\"Demo Graphic\" slot=\"preview\" />\n <div slot=\"description\">10/15/18</div>\n <sp-action-menu slot=\"actions\" placement=\"bottom-end\" quiet>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n </sp-card>\n </div>\n `;\n};\n\nquietActions.storyName = 'Quiet w/ Actions';\n\nexport const small = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n style=\"--spectrum-card-title-padding-right: 0; --spectrum-card-title-padding-left: 0;\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n heading=\"Card Heading\"\n subheading=\"JPG\"\n >\n <img\n slot=\"cover-photo\"\n src=${portrait}\n alt=\"Demo Graphic\"\n style=\"width: 140px\"\n />\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `;\n};\nsmall.args = {\n size: 's',\n};\n\nexport const smallHorizontal = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n size=${args.size}\n ?horizontal=${args.horizontal}\n heading=\"Card Heading\"\n subheading=\"JPG\"\n >\n <sp-icon-file-txt\n slot=\"preview\"\n style=\"width: 36px; height: 36px;\"\n ></sp-icon-file-txt>\n </sp-card>\n `;\n};\nsmallHorizontal.args = {\n horizontal: true,\n size: 's',\n};\n\nexport const smallHorizontalWithHREF = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n .size=${args.size}\n ?horizontal=${args.horizontal}\n heading=\"Card Heading\"\n subheading=\"JPG\"\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n target=\"_blank\"\n >\n <sp-icon-file-txt\n slot=\"preview\"\n style=\"width: 36px; height: 36px;\"\n ></sp-icon-file-txt>\n </sp-card>\n `;\n};\nsmallHorizontalWithHREF.args = {\n horizontal: true,\n size: 's',\n};\n\nexport const smallQuiet = (args: StoryArgs): TemplateResult => {\n return html`\n <div style=\"width: 115px\">\n <sp-card\n size=${args.size}\n ?horizontal=${args.horizontal}\n heading=\"Card Heading\"\n subheading=\"JPG\"\n variant=\"quiet\"\n >\n <img src=${portrait} alt=\"Demo Graphic\" slot=\"preview\" />\n <div slot=\"footer\">Footer</div>\n <sp-action-menu slot=\"actions\" placement=\"bottom-end\" quiet>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n </sp-card>\n </div>\n `;\n};\nsmallQuiet.args = {\n size: 's',\n};\n\nexport const SlottedHeading = (args: StoryArgs): TemplateResult => {\n return html`\n <style>\n .slotted-textfield-heading {\n width: 100%;\n }\n </style>\n <sp-card\n style=\"\n --spectrum-card-title-width: 100%;\n --spectrum-card-title-padding-right: 0;\n --spectrum-card-title-padding-left: 0;\n --spectrum-card-body-header-height: auto;\n --spectrum-alias-single-line-width: 100%;\n \"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img slot=\"cover-photo\" src=${portrait} alt=\"Demo Graphic\" />\n <sp-textfield\n class=\"slotted-textfield-heading\"\n slot=\"heading\"\n value=\"Apr 23 Project\"\n quiet\n ></sp-textfield>\n <div slot=\"subheading\">Last modified on 6/17/2020, 3:37 PM</div>\n <sp-action-menu slot=\"actions\" placement=\"bottom-end\" quiet>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n </sp-card>\n `;\n};\n"],
|
|
5
|
-
"mappings": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AACP,SAAS,WAAW,gBAAgB;AACpC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,IACF,
|
|
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';\n\nimport '@spectrum-web-components/card/sp-card.js';\nimport { landscape, portrait } from './images';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-file-txt.js';\nimport '@spectrum-web-components/textfield/sp-textfield.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/link/sp-link.js';\n\nexport default {\n component: 'sp-card',\n title: 'Card',\n args: {\n horizontal: false,\n },\n argTypes: {\n horizontal: {\n name: 'horizontal',\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\nexport interface StoryArgs {\n horizontal?: boolean;\n size?: 's' | 'm';\n onClick?: ((event: Event) => void) | undefined;\n}\n\nexport const Default = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n heading=\"Card Heading\"\n subheading=\"JPG\"\n ?horizontal=${args.horizontal}\n style=\"width: 200px;\"\n >\n <img slot=\"cover-photo\" src=${portrait} alt=\"Demo Graphic\" />\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `;\n};\nDefault.args = {};\n\nexport const href = (args: StoryArgs): TemplateResult => {\n const { onClick } = args;\n return html`\n <sp-card\n heading=\"Card Heading\"\n subheading=\"JPG\"\n toggles\n ?horizontal=${args.horizontal}\n style=\"width: 200px;\"\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n @click=${(event: Event) => {\n const composedTarget = event.composedPath()[0] as HTMLElement;\n if (composedTarget.id !== 'like-anchor') return;\n event.stopPropagation();\n event.preventDefault();\n onClick && onClick(event);\n }}\n >\n <div slot=\"footer\">\n Footer with a\n <sp-link href=\"https://google.com\">link to Google</sp-link>\n </div>\n <sp-action-menu slot=\"actions\" placement=\"bottom-end\" quiet>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n <img slot=\"cover-photo\" src=${portrait} alt=\"Demo Graphic\" />\n </sp-card>\n `;\n};\nhref.argTypes = {\n onClick: { action: 'link click' },\n};\n\nexport const actions = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n heading=\"Card Heading\"\n subheading=\"JPG\"\n ?horizontal=${args.horizontal}\n style=\"width: 200px;\"\n >\n <img slot=\"cover-photo\" src=${portrait} alt=\"Demo Graphic\" />\n <div slot=\"footer\">Footer</div>\n <sp-action-menu slot=\"actions\" placement=\"bottom-end\" quiet>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n </sp-card>\n `;\n};\n\nexport const Gallery = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n variant=\"gallery\"\n heading=\"Card Heading\"\n subheading=\"JPG\"\n ?horizontal=${args.horizontal}\n >\n <img\n slot=\"preview\"\n src=${landscape}\n style=\"object-fit: cover\"\n alt=\"Demo Graphic\"\n />\n <div slot=\"description\">10/15/18</div>\n </sp-card>\n `;\n};\n\nexport const noPreviewImage = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n heading=\"Card Heading\"\n subheading=\"No preview image\"\n ?horizontal=${args.horizontal}\n style=\"width: 200px;\"\n >\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `;\n};\n\nexport const Quiet = (args: StoryArgs): TemplateResult => {\n return html`\n <div>\n <sp-card\n variant=\"quiet\"\n heading=\"Card Heading\"\n subheading=\"JPG\"\n ?horizontal=${args.horizontal}\n style=\"width: 208px; height: 264px\"\n >\n <img src=${portrait} alt=\"Demo Graphic\" slot=\"preview\" />\n <div slot=\"description\">10/15/18</div>\n </sp-card>\n </div>\n `;\n};\n\nexport const quietFile = (args: StoryArgs): TemplateResult => {\n return html`\n <div>\n <sp-card\n variant=\"quiet\"\n subheading=\"JPG\"\n asset=\"file\"\n ?horizontal=${args.horizontal}\n style=\"width: 208px; height: 264px\"\n >\n <img src=${portrait} alt=\"Demo Graphic\" slot=\"preview\" />\n <div slot=\"heading\">File Name</div>\n <div slot=\"description\">10/15/18</div>\n </sp-card>\n </div>\n `;\n};\n\nexport const quietFolder = (args: StoryArgs): TemplateResult => {\n return html`\n <div>\n <sp-card\n variant=\"quiet\"\n subheading=\"JPG\"\n asset=\"folder\"\n ?horizontal=${args.horizontal}\n style=\"width: 208px; height: 264px\"\n >\n <img src=${portrait} alt=\"Demo Graphic\" slot=\"preview\" />\n <div slot=\"heading\">Folder Name</div>\n <div slot=\"description\">10/15/18</div>\n </sp-card>\n </div>\n `;\n};\n\nexport const quietActions = (args: StoryArgs): TemplateResult => {\n return html`\n <div>\n <sp-card\n variant=\"quiet\"\n heading=\"Card Heading\"\n subheading=\"JPG\"\n ?horizontal=${args.horizontal}\n style=\"width: 208px; height: 264px\"\n >\n <img src=${portrait} alt=\"Demo Graphic\" slot=\"preview\" />\n <div slot=\"description\">10/15/18</div>\n <sp-action-menu slot=\"actions\" placement=\"bottom-end\" quiet>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n </sp-card>\n </div>\n `;\n};\n\nquietActions.storyName = 'Quiet w/ Actions';\n\nexport const Horizontal = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n ?horizontal=${args.horizontal}\n heading=\"Card Heading\"\n subheading=\"JPG\"\n >\n <sp-icon-file-txt\n slot=\"preview\"\n style=\"width: 36px; height: 36px;\"\n ></sp-icon-file-txt>\n </sp-card>\n `;\n};\nHorizontal.args = {\n horizontal: true,\n};\n\nexport const horizontalWithHREF = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n ?horizontal=${args.horizontal}\n heading=\"Card Heading\"\n subheading=\"JPG\"\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n target=\"_blank\"\n >\n <sp-icon-file-txt\n slot=\"preview\"\n style=\"width: 36px; height: 36px;\"\n ></sp-icon-file-txt>\n </sp-card>\n `;\n};\nhorizontalWithHREF.args = {\n horizontal: true,\n};\n\nexport const smallQuiet = (args: StoryArgs): TemplateResult => {\n return html`\n <div>\n <sp-card\n size=${args.size}\n ?horizontal=${args.horizontal}\n heading=\"Card Heading\"\n subheading=\"JPG\"\n variant=\"quiet\"\n style=\"width: 115px\"\n >\n <img src=${portrait} alt=\"Demo Graphic\" slot=\"preview\" />\n <div slot=\"footer\">Footer</div>\n <sp-action-menu slot=\"actions\" placement=\"bottom-end\" quiet>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n </sp-card>\n </div>\n `;\n};\nsmallQuiet.args = {\n size: 's',\n};\n\nexport const SlottedHeading = (args: StoryArgs): TemplateResult => {\n return html`\n <style>\n .slotted-textfield-heading {\n width: 100%;\n }\n </style>\n <sp-card\n style=\"\n --spectrum-card-title-width: 100%;\n --spectrum-card-title-padding-right: 0;\n --spectrum-card-title-padding-left: 0;\n --spectrum-card-body-header-height: auto;\n --spectrum-alias-single-line-width: 100%;\n \"\n ?horizontal=${args.horizontal}\n >\n <img slot=\"cover-photo\" src=${portrait} alt=\"Demo Graphic\" />\n <sp-textfield\n class=\"slotted-textfield-heading\"\n slot=\"heading\"\n value=\"Apr 23 Project\"\n quiet\n ></sp-textfield>\n <div slot=\"subheading\">Last modified on 6/17/2020, 3:37 PM</div>\n <sp-action-menu slot=\"actions\" placement=\"bottom-end\" quiet>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n </sp-card>\n `;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/card.test.js
CHANGED
|
@@ -7,8 +7,8 @@ import "@spectrum-web-components/menu/sp-menu-divider.js";
|
|
|
7
7
|
import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
|
|
8
8
|
import {
|
|
9
9
|
Default,
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
Horizontal,
|
|
11
|
+
href
|
|
12
12
|
} from "../stories/card.stories.js";
|
|
13
13
|
import { spy } from "sinon";
|
|
14
14
|
import { spaceEvent } from "../../../test/testing-helpers.js";
|
|
@@ -127,7 +127,7 @@ describe("card", () => {
|
|
|
127
127
|
});
|
|
128
128
|
it("loads - [horizontal]", async () => {
|
|
129
129
|
const el = await fixture(
|
|
130
|
-
|
|
130
|
+
Horizontal(Horizontal.args)
|
|
131
131
|
);
|
|
132
132
|
await elementUpdated(el);
|
|
133
133
|
await expect(el).to.be.accessible();
|
|
@@ -175,8 +175,8 @@ describe("card", () => {
|
|
|
175
175
|
[
|
|
176
176
|
"width: 200px;",
|
|
177
177
|
"display: inline-flex;",
|
|
178
|
-
"--
|
|
179
|
-
"--
|
|
178
|
+
"--mod-card-preview-minimum-height: 136px;",
|
|
179
|
+
"--mod-actionbutton-height: 32px;",
|
|
180
180
|
"--spectrum-icon-tshirt-size-height: 18px;",
|
|
181
181
|
"--spectrum-icon-tshirt-size-width: 18px;"
|
|
182
182
|
].join("")
|
|
@@ -199,14 +199,8 @@ describe("card", () => {
|
|
|
199
199
|
await sendMouse({
|
|
200
200
|
steps: [
|
|
201
201
|
{
|
|
202
|
-
type: "
|
|
202
|
+
type: "click",
|
|
203
203
|
position: [boundingRect.x, boundingRect.y]
|
|
204
|
-
},
|
|
205
|
-
{
|
|
206
|
-
type: "down"
|
|
207
|
-
},
|
|
208
|
-
{
|
|
209
|
-
type: "up"
|
|
210
204
|
}
|
|
211
205
|
]
|
|
212
206
|
});
|
|
@@ -219,14 +213,8 @@ describe("card", () => {
|
|
|
219
213
|
await sendMouse({
|
|
220
214
|
steps: [
|
|
221
215
|
{
|
|
222
|
-
type: "
|
|
223
|
-
position: [boundingRect.x +
|
|
224
|
-
},
|
|
225
|
-
{
|
|
226
|
-
type: "down"
|
|
227
|
-
},
|
|
228
|
-
{
|
|
229
|
-
type: "up"
|
|
216
|
+
type: "click",
|
|
217
|
+
position: [boundingRect.x + 2, boundingRect.y + 2]
|
|
230
218
|
}
|
|
231
219
|
]
|
|
232
220
|
});
|
package/test/card.test.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["card.test.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 '@spectrum-web-components/card/sp-card.js';\nimport { Card } from '@spectrum-web-components/card';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\n\nimport {\n Default,\n href,\n smallHorizontal,\n StoryArgs,\n} from '../stories/card.stories.js';\nimport { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox';\nimport { spy } from 'sinon';\nimport { spaceEvent } from '../../../test/testing-helpers.js';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\ndescribe('card', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<Card>(\n html`\n <sp-card heading=\"Card Heading\" subheading=\"JPG\">\n <img\n slot=\"preview\"\n src=\"https://picsum.photos/532/192\"\n alt=\"Slotted Preview\"\n />\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `\n )\n );\n it('loads', async () => {\n const el = await fixture<Card>(\n html`\n <sp-card heading=\"Card Heading\" subheading=\"JPG\">\n <img\n slot=\"preview\"\n src=\"https://picsum.photos/532/192\"\n alt=\"Slotted Preview\"\n />\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads - [quiet]', async () => {\n const el = await fixture<Card>(\n html`\n <sp-card\n variant=\"quiet\"\n heading=\"Card Heading\"\n subheading=\"JPG\"\n >\n <img\n slot=\"preview\"\n src=\"https://picsum.photos/532/192\"\n alt=\"Slotted Preview\"\n />\n <div slot=\"description\">10/15/18</div>\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('loads - [quiet][small]', async () => {\n const el = await fixture<Card>(\n html`\n <sp-card\n size=\"s\"\n heading=\"Card Heading\"\n subheading=\"JPG\"\n variant=\"quiet\"\n style=\"width: 115px;\"\n >\n <img\n src=\"https://picsum.photos/300/400\"\n alt=\"Demo Graphic\"\n slot=\"preview\"\n />\n <div slot=\"footer\">Footer</div>\n <sp-action-menu\n slot=\"actions\"\n placement=\"bottom-end\"\n label=\"More Actions\"\n quiet\n >\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-action-menu>\n </sp-card>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads - [gallery]', async () => {\n const el = await fixture<Card>(\n html`\n <sp-card\n variant=\"gallery\"\n heading=\"Card Heading\"\n subheading=\"JPG\"\n >\n <img\n slot=\"preview\"\n src=\"https://picsum.photos/532/192\"\n alt=\"Slotted Preview\"\n />\n <div slot=\"description\">10/15/18</div>\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads - [horizontal]', async () => {\n const el = await fixture<Card>(\n smallHorizontal(smallHorizontal.args as StoryArgs)\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('[href] is clickable', async () => {\n const clickSpy = spy();\n const el = await fixture<Card>(href({}));\n\n await elementUpdated(el);\n\n el.addEventListener('click', (event: Event) => {\n const composedTarget = event.composedPath()[0] as HTMLElement;\n if (composedTarget.id !== 'like-anchor') return;\n clickSpy();\n });\n\n el.click();\n\n expect(clickSpy.callCount).to.equal(1);\n\n (el.shadowRoot.querySelector('#like-anchor') as HTMLElement).click();\n\n expect(clickSpy.callCount).to.equal(2);\n\n const img = el.querySelector('img') as HTMLImageElement;\n const boundingRect = img.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n boundingRect.x + boundingRect.width / 2,\n boundingRect.y + boundingRect.height / 2,\n ],\n },\n {\n type: 'down',\n },\n {\n type: 'up',\n },\n ],\n });\n\n expect(clickSpy.callCount).to.equal(3);\n });\n it('links in [href] do not pass their click', async () => {\n const clickSpy = spy();\n const el = await fixture<Card>(href({}));\n el.setAttribute(\n 'style',\n [\n 'width: 200px;',\n 'display: inline-flex;',\n '--spectrum-card-coverphoto-height: 136px;',\n '--spectrum-actionbutton-height: 32px;',\n '--spectrum-icon-tshirt-size-height: 18px;',\n '--spectrum-icon-tshirt-size-width: 18px;',\n ].join('')\n );\n\n await elementUpdated(el);\n el.addEventListener('click', (event: Event) => {\n event.preventDefault();\n const path = event.composedPath();\n const hasLikeAnchor = path.some(\n (el) => (el as HTMLElement).id === 'like-anchor'\n );\n if (!hasLikeAnchor) return;\n clickSpy();\n });\n\n el.click();\n\n expect(clickSpy.callCount).to.equal(1);\n\n const footer = el.querySelector('[slot=\"footer\"]') as HTMLElement;\n let boundingRect = footer.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [boundingRect.x, boundingRect.y],\n },\n {\n type: 'down',\n },\n {\n type: 'up',\n },\n ],\n });\n\n expect(clickSpy.callCount).to.equal(2);\n\n const link = el.querySelector(\n 'sp-link[href=\"https://google.com\"]'\n ) as HTMLElement;\n link.setAttribute('style', 'display: block');\n boundingRect = link.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [boundingRect.x + 1, boundingRect.y + 1],\n },\n {\n type: 'down',\n },\n {\n type: 'up',\n },\n ],\n });\n\n expect(clickSpy.callCount).to.equal(2);\n });\n it('converts `Space` to `click` event', async () => {\n const clickSpy = spy();\n const handleClick = (): void => clickSpy();\n const el = await fixture<Card>(Default(Default.args));\n el.addEventListener('click', handleClick);\n\n await elementUpdated(el);\n expect(el.focused, 'default focused').to.be.false;\n\n el.dispatchEvent(new Event('focusin'));\n await elementUpdated(el);\n expect(el.focused, 'first time focused').to.be.true;\n\n el.dispatchEvent(spaceEvent());\n await elementUpdated(el);\n expect(el.focused, 'still focused').to.be.true;\n expect(clickSpy.called).to.be.true;\n expect(clickSpy.calledOnce).to.be.true;\n });\n it('can be `[toggles]`', async () => {\n const el = await fixture<Card>(Default(Default.args));\n el.toggles = true;\n\n await elementUpdated(el);\n\n const checkbox = el.shadowRoot.querySelector('sp-checkbox') as Checkbox;\n expect(el.focused, 'default focused').to.be.false;\n expect(el.selected, 'default selected').to.be.false;\n\n el.dispatchEvent(new Event('focusin'));\n\n await elementUpdated(el);\n expect(el.focused, 'first time focused').to.be.true;\n expect(el.selected, 'still not selected').to.be.false;\n\n el.dispatchEvent(spaceEvent());\n\n await elementUpdated(el);\n expect(el.focused, 'still focused').to.be.true;\n expect(el.selected, 'first selected').to.be.true;\n\n el.addEventListener('change', (event: Event) => event.preventDefault());\n el.dispatchEvent(spaceEvent());\n\n await elementUpdated(el);\n expect(el.focused, 'still focused after default prevented').to.be.true;\n expect(el.selected, 'first selected after default prevented').to.be\n .true;\n\n checkbox.dispatchEvent(\n new Event('focusin', {\n composed: true,\n bubbles: true,\n })\n );\n checkbox.focus();\n\n await elementUpdated(el);\n expect(el.focused, 'still focused, again').to.be.true;\n expect(el.selected, 'still selected').to.be.true;\n\n el.dispatchEvent(new Event('focusin'));\n\n await elementUpdated(el);\n expect(el.focused, 'focused, again').to.be.true;\n expect(el.selected, 'still selected, again').to.be.true;\n\n el.dispatchEvent(new Event('focusout'));\n\n await elementUpdated(el);\n expect(el.focused, 'still not focused, again').to.be.false;\n expect(el.selected, 'still selected, again 2').to.be.true;\n\n el.dispatchEvent(new Event('focusout'));\n\n checkbox.click();\n\n await elementUpdated(el);\n expect(el.focused, 'still not focused, again 2').to.be.false;\n // change event is prevented\n expect(el.selected, 'still selected, again 3').to.be.true;\n });\n\n it('announces when `[toggles]`', async () => {\n const changeSpy = spy();\n const el = await fixture<Card>(Default(Default.args));\n el.toggles = true;\n el.addEventListener('change', changeSpy);\n\n await elementUpdated(el);\n\n const checkbox = el.shadowRoot.querySelector('sp-checkbox') as Checkbox;\n expect(el.selected, 'default to not selected').to.be.false;\n checkbox.click();\n await elementUpdated(el);\n\n expect(el.selected, 'selected').to.be.true;\n expect(changeSpy.callCount).to.equal(1);\n checkbox.click();\n await elementUpdated(el);\n\n expect(el.selected, 'no longer selected').to.be.false;\n expect(changeSpy.callCount).to.equal(2);\n });\n it('displays the `heading` attribute as `.title`', async () => {\n const testHeading = 'This is a test heading';\n const el = await fixture<Card>(\n html`\n <sp-card heading=${testHeading} subheading=\"JPG\">\n <img\n slot=\"preview\"\n src=\"https://picsum.photos/532/192\"\n alt=\"Slotted Preview\"\n />\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `\n );\n\n await elementUpdated(el);\n\n const root = el.shadowRoot ? el.shadowRoot : el;\n const headingEl = root.querySelector('.title');\n\n expect(headingEl, 'did not find title element').to.not.be.null;\n expect((headingEl as HTMLDivElement).textContent).to.contain(\n testHeading,\n 'the heading renders in the element'\n );\n });\n it('displays the slotted content as `.title`', async () => {\n const testHeading = 'This is a test heading';\n const el = await fixture<Card>(\n html`\n <sp-card subheading=\"JPG\">\n <h1 slot=\"heading\">${testHeading}</h1>\n <img\n slot=\"preview\"\n src=\"https://picsum.photos/532/192\"\n alt=\"Slotted Preview\"\n />\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `\n );\n\n await elementUpdated(el);\n\n const root = el.shadowRoot ? el.shadowRoot : el;\n const headingSlot = root.querySelector(\n '.title [name=\"heading\"]'\n ) as HTMLSlotElement;\n\n expect(headingSlot, 'did not find slot element').to.not.be.null;\n const nodes = headingSlot.assignedNodes();\n const h1Element = nodes.find(\n (node) => (node as HTMLElement).tagName === 'H1'\n );\n expect(h1Element, 'did not find H1 element').to.not.be.null;\n expect((h1Element as HTMLHeadingElement).textContent).to.contain(\n testHeading,\n 'the slotted content renders in the element'\n );\n });\n});\n"],
|
|
5
|
-
"mappings": ";AAYA,OAAO;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,gBAAgB,QAAQ,SAAS,YAAY;AAEtD;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OAEG;AAEP,SAAS,WAAW;AACpB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,6BAA6B;AAEtC,SAAS,QAAQ,MAAM;AACnB;AAAA,IACI,YACI,MAAM;AAAA,MACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUJ;AAAA,EACR;AACA,KAAG,SAAS,YAAY;AACpB,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUJ;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,mBAAmB,YAAY;AAC9B,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAeJ;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AAED,KAAG,0BAA0B,YAAY;AACrC,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgCJ;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,qBAAqB,YAAY;AAChC,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAeJ;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,wBAAwB,YAAY;AACnC,UAAM,KAAK,MAAM;AAAA,MACb,
|
|
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 '@spectrum-web-components/card/sp-card.js';\nimport { Card } from '@spectrum-web-components/card';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\n\nimport {\n Default,\n Horizontal,\n href,\n StoryArgs,\n} from '../stories/card.stories.js';\nimport { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox';\nimport { spy } from 'sinon';\nimport { spaceEvent } from '../../../test/testing-helpers.js';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\ndescribe('card', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<Card>(\n html`\n <sp-card heading=\"Card Heading\" subheading=\"JPG\">\n <img\n slot=\"preview\"\n src=\"https://picsum.photos/532/192\"\n alt=\"Slotted Preview\"\n />\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `\n )\n );\n it('loads', async () => {\n const el = await fixture<Card>(\n html`\n <sp-card heading=\"Card Heading\" subheading=\"JPG\">\n <img\n slot=\"preview\"\n src=\"https://picsum.photos/532/192\"\n alt=\"Slotted Preview\"\n />\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads - [quiet]', async () => {\n const el = await fixture<Card>(\n html`\n <sp-card\n variant=\"quiet\"\n heading=\"Card Heading\"\n subheading=\"JPG\"\n >\n <img\n slot=\"preview\"\n src=\"https://picsum.photos/532/192\"\n alt=\"Slotted Preview\"\n />\n <div slot=\"description\">10/15/18</div>\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('loads - [quiet][small]', async () => {\n const el = await fixture<Card>(\n html`\n <sp-card\n size=\"s\"\n heading=\"Card Heading\"\n subheading=\"JPG\"\n variant=\"quiet\"\n style=\"width: 115px;\"\n >\n <img\n src=\"https://picsum.photos/300/400\"\n alt=\"Demo Graphic\"\n slot=\"preview\"\n />\n <div slot=\"footer\">Footer</div>\n <sp-action-menu\n slot=\"actions\"\n placement=\"bottom-end\"\n label=\"More Actions\"\n quiet\n >\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-action-menu>\n </sp-card>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads - [gallery]', async () => {\n const el = await fixture<Card>(\n html`\n <sp-card\n variant=\"gallery\"\n heading=\"Card Heading\"\n subheading=\"JPG\"\n >\n <img\n slot=\"preview\"\n src=\"https://picsum.photos/532/192\"\n alt=\"Slotted Preview\"\n />\n <div slot=\"description\">10/15/18</div>\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads - [horizontal]', async () => {\n const el = await fixture<Card>(\n Horizontal(Horizontal.args as StoryArgs)\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('[href] is clickable', async () => {\n const clickSpy = spy();\n const el = await fixture<Card>(href({}));\n\n await elementUpdated(el);\n\n el.addEventListener('click', (event: Event) => {\n const composedTarget = event.composedPath()[0] as HTMLElement;\n if (composedTarget.id !== 'like-anchor') return;\n clickSpy();\n });\n\n el.click();\n\n expect(clickSpy.callCount).to.equal(1);\n\n (el.shadowRoot.querySelector('#like-anchor') as HTMLElement).click();\n\n expect(clickSpy.callCount).to.equal(2);\n\n const img = el.querySelector('img') as HTMLImageElement;\n const boundingRect = img.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n boundingRect.x + boundingRect.width / 2,\n boundingRect.y + boundingRect.height / 2,\n ],\n },\n {\n type: 'down',\n },\n {\n type: 'up',\n },\n ],\n });\n\n expect(clickSpy.callCount).to.equal(3);\n });\n it('links in [href] do not pass their click', async () => {\n const clickSpy = spy();\n const el = await fixture<Card>(href({}));\n el.setAttribute(\n 'style',\n [\n 'width: 200px;',\n 'display: inline-flex;',\n '--mod-card-preview-minimum-height: 136px;',\n '--mod-actionbutton-height: 32px;',\n '--spectrum-icon-tshirt-size-height: 18px;',\n '--spectrum-icon-tshirt-size-width: 18px;',\n ].join('')\n );\n\n await elementUpdated(el);\n el.addEventListener('click', (event: Event) => {\n event.preventDefault();\n const path = event.composedPath();\n const hasLikeAnchor = path.some(\n (el) => (el as HTMLElement).id === 'like-anchor'\n );\n if (!hasLikeAnchor) return;\n clickSpy();\n });\n\n el.click();\n\n expect(clickSpy.callCount).to.equal(1);\n\n const footer = el.querySelector('[slot=\"footer\"]') as HTMLElement;\n let boundingRect = footer.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [boundingRect.x, boundingRect.y],\n },\n ],\n });\n\n expect(clickSpy.callCount).to.equal(2);\n\n const link = el.querySelector(\n 'sp-link[href=\"https://google.com\"]'\n ) as HTMLElement;\n link.setAttribute('style', 'display: block');\n boundingRect = link.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [boundingRect.x + 2, boundingRect.y + 2],\n },\n ],\n });\n\n expect(clickSpy.callCount).to.equal(2);\n });\n it('converts `Space` to `click` event', async () => {\n const clickSpy = spy();\n const handleClick = (): void => clickSpy();\n const el = await fixture<Card>(Default(Default.args));\n el.addEventListener('click', handleClick);\n\n await elementUpdated(el);\n expect(el.focused, 'default focused').to.be.false;\n\n el.dispatchEvent(new Event('focusin'));\n await elementUpdated(el);\n expect(el.focused, 'first time focused').to.be.true;\n\n el.dispatchEvent(spaceEvent());\n await elementUpdated(el);\n expect(el.focused, 'still focused').to.be.true;\n expect(clickSpy.called).to.be.true;\n expect(clickSpy.calledOnce).to.be.true;\n });\n it('can be `[toggles]`', async () => {\n const el = await fixture<Card>(Default(Default.args));\n el.toggles = true;\n\n await elementUpdated(el);\n\n const checkbox = el.shadowRoot.querySelector('sp-checkbox') as Checkbox;\n expect(el.focused, 'default focused').to.be.false;\n expect(el.selected, 'default selected').to.be.false;\n\n el.dispatchEvent(new Event('focusin'));\n\n await elementUpdated(el);\n expect(el.focused, 'first time focused').to.be.true;\n expect(el.selected, 'still not selected').to.be.false;\n\n el.dispatchEvent(spaceEvent());\n\n await elementUpdated(el);\n expect(el.focused, 'still focused').to.be.true;\n expect(el.selected, 'first selected').to.be.true;\n\n el.addEventListener('change', (event: Event) => event.preventDefault());\n el.dispatchEvent(spaceEvent());\n\n await elementUpdated(el);\n expect(el.focused, 'still focused after default prevented').to.be.true;\n expect(el.selected, 'first selected after default prevented').to.be\n .true;\n\n checkbox.dispatchEvent(\n new Event('focusin', {\n composed: true,\n bubbles: true,\n })\n );\n checkbox.focus();\n\n await elementUpdated(el);\n expect(el.focused, 'still focused, again').to.be.true;\n expect(el.selected, 'still selected').to.be.true;\n\n el.dispatchEvent(new Event('focusin'));\n\n await elementUpdated(el);\n expect(el.focused, 'focused, again').to.be.true;\n expect(el.selected, 'still selected, again').to.be.true;\n\n el.dispatchEvent(new Event('focusout'));\n\n await elementUpdated(el);\n expect(el.focused, 'still not focused, again').to.be.false;\n expect(el.selected, 'still selected, again 2').to.be.true;\n\n el.dispatchEvent(new Event('focusout'));\n\n checkbox.click();\n\n await elementUpdated(el);\n expect(el.focused, 'still not focused, again 2').to.be.false;\n // change event is prevented\n expect(el.selected, 'still selected, again 3').to.be.true;\n });\n\n it('announces when `[toggles]`', async () => {\n const changeSpy = spy();\n const el = await fixture<Card>(Default(Default.args));\n el.toggles = true;\n el.addEventListener('change', changeSpy);\n\n await elementUpdated(el);\n\n const checkbox = el.shadowRoot.querySelector('sp-checkbox') as Checkbox;\n expect(el.selected, 'default to not selected').to.be.false;\n checkbox.click();\n await elementUpdated(el);\n\n expect(el.selected, 'selected').to.be.true;\n expect(changeSpy.callCount).to.equal(1);\n checkbox.click();\n await elementUpdated(el);\n\n expect(el.selected, 'no longer selected').to.be.false;\n expect(changeSpy.callCount).to.equal(2);\n });\n it('displays the `heading` attribute as `.title`', async () => {\n const testHeading = 'This is a test heading';\n const el = await fixture<Card>(\n html`\n <sp-card heading=${testHeading} subheading=\"JPG\">\n <img\n slot=\"preview\"\n src=\"https://picsum.photos/532/192\"\n alt=\"Slotted Preview\"\n />\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `\n );\n\n await elementUpdated(el);\n\n const root = el.shadowRoot ? el.shadowRoot : el;\n const headingEl = root.querySelector('.title');\n\n expect(headingEl, 'did not find title element').to.not.be.null;\n expect((headingEl as HTMLDivElement).textContent).to.contain(\n testHeading,\n 'the heading renders in the element'\n );\n });\n it('displays the slotted content as `.title`', async () => {\n const testHeading = 'This is a test heading';\n const el = await fixture<Card>(\n html`\n <sp-card subheading=\"JPG\">\n <h1 slot=\"heading\">${testHeading}</h1>\n <img\n slot=\"preview\"\n src=\"https://picsum.photos/532/192\"\n alt=\"Slotted Preview\"\n />\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `\n );\n\n await elementUpdated(el);\n\n const root = el.shadowRoot ? el.shadowRoot : el;\n const headingSlot = root.querySelector(\n '.title [name=\"heading\"]'\n ) as HTMLSlotElement;\n\n expect(headingSlot, 'did not find slot element').to.not.be.null;\n const nodes = headingSlot.assignedNodes();\n const h1Element = nodes.find(\n (node) => (node as HTMLElement).tagName === 'H1'\n );\n expect(h1Element, 'did not find H1 element').to.not.be.null;\n expect((h1Element as HTMLHeadingElement).textContent).to.contain(\n testHeading,\n 'the slotted content renders in the element'\n );\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["el"]
|
|
7
7
|
}
|