@spectrum-web-components/card 1.3.0-testing.0 → 1.3.1-beta.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.
Files changed (2) hide show
  1. package/README.md +121 -165
  2. package/package.json +8 -8
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- ## Description
1
+ ## Overview
2
2
 
3
3
  An `<sp-card>` represents a rectangular card that contains
4
4
  a variety of text and image layouts. Cards are typically used
@@ -27,29 +27,40 @@ When looking to leverage the `Card` base class as a type and/or for extension pu
27
27
  import { Card } from '@spectrum-web-components/card';
28
28
  ```
29
29
 
30
- ## Example
30
+ ### Anatomy
31
+
32
+ Normal cards can contain a heading, a subheading, a cover photo, and a footer.
31
33
 
32
34
  ```html demo
33
- <sp-card heading="Card Heading" subheading="JPG Photo">
34
- <img
35
- slot="cover-photo"
36
- src="https://picsum.photos/200/300"
37
- alt="Demo Image"
38
- />
35
+ <sp-card heading="Card Heading">
36
+ <img alt="" slot="cover-photo" src="https://picsum.photos/250/300" />
37
+ <span slot="subheading">JPG photo</span>
39
38
  <div slot="footer">Footer</div>
40
39
  </sp-card>
41
40
  ```
42
41
 
42
+ #### Heading
43
+
44
+ By default, the heading for an `<sp-card>` is applied via the `heading` attribute, which is restricted to string content only. For HTML content, use the `heading` slot instead.
45
+
46
+ <sp-tabs selected="heading-attribute" auto label="Heading">
47
+ <sp-tab value="heading-attribute">attribute</sp-tab>
48
+ <sp-tab-panel value="heading-attribute">
49
+
43
50
  ```html demo
44
- <sp-card heading="Card Title" subheading="JPG">
45
- <img slot="preview" src="https://picsum.photos/200/300" alt="Demo Image" />
51
+ <sp-card
52
+ heading="Card Heading"
53
+ subheading="JPG Photo"
54
+ style="--spectrum-card-body-header-height: auto;"
55
+ >
56
+ <img alt="" slot="cover-photo" src="https://picsum.photos/250/300" />
46
57
  <div slot="footer">Footer</div>
47
58
  </sp-card>
48
59
  ```
49
60
 
50
- ## Heading
51
-
52
- By default, the heading for an `<sp-card>` is applied via the `heading` attribute, which is restricted to string content only. For HTML content, use the `heading` slot instead.
61
+ </sp-tab-panel>
62
+ <sp-tab value="heading-slot">slot</sp-tab>
63
+ <sp-tab-panel value="heading-slot">
53
64
 
54
65
  ```html demo
55
66
  <sp-card
@@ -57,45 +68,70 @@ By default, the heading for an `<sp-card>` is applied via the `heading` attribut
57
68
  style="--spectrum-card-body-header-height: auto;"
58
69
  >
59
70
  <h1 slot="heading">Card Heading</h1>
60
- <img alt="" slot="cover-photo" src="https://picsum.photos/200/300" />
71
+ <img alt="" slot="cover-photo" src="https://picsum.photos/250/300" />
61
72
  <div slot="footer">Footer</div>
62
73
  </sp-card>
63
74
  ```
64
75
 
65
- ## Linking
76
+ </sp-tab-panel>
77
+ </sp-tabs>
78
+
79
+ #### Linking
66
80
 
67
81
  An `<sp-card>` can be provided with an `href` attribute in order for it to act as one large anchor element. When leveraging the `href` attribute, the `download`, `target` and `rel` attributes customize the card's linking behavior. Use them as follows:
68
82
 
69
- <!-- prettier-ignore -->
70
- ```html
83
+ ```html demo
71
84
  <sp-card
72
85
  heading="Card Title"
73
86
  subheading="JPG"
74
87
  href="https://opensource.adobe.com/spectrum-web-components"
75
88
  target="_blank"
76
89
  >
77
- <img slot="cover-photo" src="https://picsum.photos/200/300" alt="Demo Image" />
90
+ <img
91
+ slot="cover-photo"
92
+ src="https://picsum.photos/200/300"
93
+ alt="Demo Image"
94
+ />
78
95
  </sp-card>
79
96
  ```
80
97
 
81
- ## Variants
98
+ #### Cover Photo
82
99
 
83
- There are multiple card variants to choose from in Spectrum. The `variant`
84
- attribute controls the main variant of the card.
100
+ Use `slot="cover-photo"` on an image to set it as the card's cover photo.
85
101
 
86
- ### Normal
102
+ ```html demo
103
+ <sp-card heading="Card Heading" subheading="JPG Photo">
104
+ <img
105
+ slot="cover-photo"
106
+ src="https://picsum.photos/200/300"
107
+ alt="Demo Image"
108
+ />
109
+ <div slot="footer">Footer</div>
110
+ </sp-card>
111
+ ```
87
112
 
88
- Normal cards can contain a heading, a subheading, a cover photo, and a footer.
113
+ #### Preview Image
89
114
 
90
- ```html
91
- <sp-card heading="Card Heading">
92
- <img alt="" slot="cover-photo" src="https://picsum.photos/200/300" />
93
- <span slot="subheading">JPG photo</span>
115
+ Use `slot="preview"` on an image to set it as the card's preview image.
116
+
117
+ ```html demo
118
+ <sp-card heading="Card Title" subheading="JPG">
119
+ <img slot="preview" src="https://picsum.photos/200/300" alt="Demo Image" />
94
120
  <div slot="footer">Footer</div>
95
121
  </sp-card>
96
122
  ```
97
123
 
98
- ### Actions
124
+ #### No Preview Image
125
+
126
+ Cards with no preview image can contain a heading, a subheading, and a footer.
127
+
128
+ ```html demo
129
+ <sp-card heading="Card Title" subheading="No Preview Image">
130
+ <div slot="footer">Footer</div>
131
+ </sp-card>
132
+ ```
133
+
134
+ #### Actions
99
135
 
100
136
  Cards can be supplied an `actions` via a names slot.
101
137
 
@@ -124,168 +160,88 @@ Cards can be supplied an `actions` via a names slot.
124
160
  </sp-card>
125
161
  ```
126
162
 
127
- ### No Preview Image
163
+ ### Options
128
164
 
129
- Cards with no preview image can contain a heading, a subheading, and a footer.
165
+ #### Horizontal
130
166
 
131
- ```html demo
132
- <sp-card heading="Card Title" subheading="No Preview Image">
133
- <div slot="footer">Footer</div>
167
+ Cards with a `horizontal` attribute can contain a heading, a subheading, a cover photo, and a description.
168
+
169
+ ```html
170
+ <sp-card horizontal heading="Card Heading" subheading="JPG Photo">
171
+ <img alt="" slot="cover-photo" src="https://picsum.photos/200/250" />
172
+ <div slot="description">10/15/18</div>
134
173
  </sp-card>
135
174
  ```
136
175
 
137
- ### Quiet
176
+ #### Variant
138
177
 
139
- Quiet cards can contain a heading, a subheading, a cover photo, a description, and a footer.
178
+ There are multiple card variants to choose from in Spectrum. The `variant`
179
+ attribute controls the main variant of the card.
140
180
 
141
- ```html
142
- <div style="width: 208px; height: 264px">
143
- <sp-card variant="quiet" heading="Card Heading" subheading="JPG Photo">
144
- <img alt="" slot="preview" src="https://picsum.photos/200/300" />
145
- <div slot="description">10/15/18</div>
146
- <div slot="footer">Footer</div>
147
- </sp-card>
148
- </div>
149
- ```
181
+ Cards with `variant="quiet"` can contain a heading, a subheading, a cover photo, a description, and a footer. Quiet cards will also accept `actions` via a named slot.
150
182
 
151
- When leveraging the `asset` attribute, a card can be declared as representing a `file`:
183
+ <!--
184
+ TODO: Address example below when https://github.com/adobe/spectrum-web-components/issues/4945 is addressed.
185
+ -->
152
186
 
153
187
  ```html
154
- <div style="width: 208px; height: 264px">
155
- <sp-card
156
- variant="quiet"
157
- heading="Card Heading"
158
- subheading="JPG Photo"
159
- asset="file"
188
+ <sp-card variant="quiet" heading="Card Heading" subheading="JPG Photo">
189
+ <img alt="" slot="preview" src="https://picsum.photos/200/350" />
190
+ <div slot="description">10/15/18</div>
191
+ <sp-action-menu
192
+ label="More Actions"
193
+ slot="actions"
194
+ placement="bottom-end"
195
+ quiet
160
196
  >
161
- <img alt="" slot="preview" src="https://picsum.photos/200/300" />
162
- <div slot="heading">File Name</div>
163
- <div slot="description">10/15/18</div>
164
- <div slot="footer">Footer</div>
165
- </sp-card>
166
- </div>
167
- ```
168
-
169
- Or a `folder`:
170
-
171
- ```html
172
- <div style="width: 208px; height: 264px">
173
- <sp-card variant="quiet" subheading="JPG Photo" asset="folder">
174
- <img alt="" slot="preview" src="https://picsum.photos/200/300" />
175
- <div slot="heading">Folder Name</div>
176
- <div slot="description">10/15/18</div>
177
- <div slot="footer">Footer</div>
178
- </sp-card>
179
- </div>
197
+ <sp-menu-item>Deselect</sp-menu-item>
198
+ <sp-menu-item>Select Inverse</sp-menu-item>
199
+ <sp-menu-item>Feather...</sp-menu-item>
200
+ <sp-menu-item>Select and Mask...</sp-menu-item>
201
+ <sp-menu-divider></sp-menu-divider>
202
+ <sp-menu-item>Save Selection</sp-menu-item>
203
+ <sp-menu-item disabled>Make Work Path</sp-menu-item>
204
+ </sp-action-menu>
205
+ </sp-card>
180
206
  ```
181
207
 
182
- Quiet cards will also accept `actions` via a named slot.
208
+ Cards with `variant="gallery"` can contain a heading, a subheading, an image preview, a description, and a footer.
183
209
 
184
210
  ```html
185
- <div style="width: 208px; height: 264px">
186
- <sp-card variant="quiet" heading="Card Heading" subheading="JPG Photo">
187
- <img alt="" slot="preview" src="https://picsum.photos/200/300" />
188
- <div slot="description">10/15/18</div>
189
- <sp-action-menu
190
- label="More Actions"
191
- slot="actions"
192
- placement="bottom-end"
193
- quiet
194
- >
195
- <sp-menu-item>Deselect</sp-menu-item>
196
- <sp-menu-item>Select Inverse</sp-menu-item>
197
- <sp-menu-item>Feather...</sp-menu-item>
198
- <sp-menu-item>Select and Mask...</sp-menu-item>
199
- <sp-menu-divider></sp-menu-divider>
200
- <sp-menu-item>Save Selection</sp-menu-item>
201
- <sp-menu-item disabled>Make Work Path</sp-menu-item>
202
- </sp-action-menu>
203
- </sp-card>
204
- </div>
211
+ <sp-card variant="gallery" heading="Card Heading" subheading="JPG Photo">
212
+ <img alt="" slot="preview" src="https://picsum.photos/532/192" />
213
+ <div slot="description">10/15/18</div>
214
+ <div slot="footer">Footer</div>
215
+ </sp-card>
205
216
  ```
206
217
 
207
- ### Gallery
218
+ #### Asset
208
219
 
209
- Gallery cards can contain a heading, a subheading, an image preview, a description, and a footer.
220
+ When leveraging the `asset` attribute, a card can be declared as representing a `file` or a `folder`:
210
221
 
211
222
  ```html
212
- <div style="width: 532px; max-width: 100%; height: 224px">
213
- <sp-card variant="gallery" heading="Card Heading" subheading="JPG Photo">
214
- <img alt="" slot="preview" src="https://picsum.photos/532/192" />
215
- <div slot="description">10/15/18</div>
216
- <div slot="footer">Footer</div>
217
- </sp-card>
218
- </div>
223
+ <sp-card heading="Card Heading" subheading="JPG Photo" asset="file">
224
+ <div slot="heading">File Name</div>
225
+ <div slot="description">10/15/18</div>
226
+ <div slot="footer">Footer</div>
227
+ </sp-card>
228
+ <sp-card subheading="JPG Photo" asset="folder">
229
+ <div slot="heading">Folder Name</div>
230
+ <div slot="description">10/15/18</div>
231
+ <div slot="footer">Footer</div>
232
+ </sp-card>
219
233
  ```
220
234
 
221
- ### Size
235
+ ### Accessibility
222
236
 
223
- `size="s"` will delivery the `<sp-card>` element at a "small" size. It can be leveraged with a standard card:
237
+ #### Be concise
224
238
 
225
- ```html demo
226
- <div style="width: 208px; height: 264px">
227
- <sp-card size="s" heading="Card Heading" subheading="JPG Photo">
228
- <img
229
- slot="cover-photo"
230
- alt="Demo Image"
231
- src="https://picsum.photos/110"
232
- />
233
- <div slot="footer">Footer</div>
234
- </sp-card>
235
- </div>
236
- ```
239
+ Heading text should be no more than 5-7 words. If the card has an `href`, the heading is used as a link and should ideally be no more than 3 words. For buttons, 1-2 words.
237
240
 
238
- A `horizontal` card:
241
+ #### Use descriptive heading, link, and button text
239
242
 
240
- ```html demo
241
- <div style="color: var(--spectrum-neutral-content-color-default);">
242
- <sp-card size="s" horizontal heading="Card Heading" subheading="JPG Photo">
243
- <sp-icon slot="preview" style="width: 36px; height: 36px;">
244
- <svg
245
- xmlns="http://www.w3.org/2000/svg"
246
- viewBox="0 0 36 36"
247
- aria-hidden="true"
248
- role="img"
249
- fill="currentColor"
250
- >
251
- <path d="M20 2v10h10L20 2z" />
252
- <path
253
- d="M19 14a1 1 0 01-1-1V2H7a1 1 0 00-1 1v30a1 1 0 001 1h22a1 1 0 001-1V14zm7 15.5a.5.5 0 01-.5.5h-15a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h15a.5.5 0 01.5.5zm0-4a.5.5 0 01-.5.5h-15a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h15a.5.5 0 01.5.5zm0-4a.5.5 0 01-.5.5h-15a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h15a.5.5 0 01.5.5z"
254
- />
255
- </svg>
256
- </sp-icon>
257
- </sp-card>
258
- </div>
259
- ```
243
+ Be descriptive. Set expectations on what someone will find and where they will go once they interact with a card. Avoid using the same text on more than one interactive element, unless both elements go to the same place.
260
244
 
261
- Or a `quiet` card:
245
+ #### Make the first word in a heading meaningful
262
246
 
263
- ```html demo
264
- <div
265
- style="color: var(--spectrum-neutral-content-color-default); width: 110px;"
266
- >
267
- <sp-card
268
- size="s"
269
- heading="Card Heading"
270
- subheading="JPG Photo"
271
- variant="quiet"
272
- >
273
- <img src="https://picsum.photos/110" alt="Demo Image" slot="preview" />
274
- <div slot="footer">Footer</div>
275
- <sp-action-menu
276
- label="More Actions"
277
- slot="actions"
278
- placement="bottom-end"
279
- quiet
280
- >
281
- <sp-menu-item>Deselect</sp-menu-item>
282
- <sp-menu-item>Select Inverse</sp-menu-item>
283
- <sp-menu-item>Feather...</sp-menu-item>
284
- <sp-menu-item>Select and Mask...</sp-menu-item>
285
- <sp-menu-divider></sp-menu-divider>
286
- <sp-menu-item>Save Selection</sp-menu-item>
287
- <sp-menu-item disabled>Make Work Path</sp-menu-item>
288
- </sp-action-menu>
289
- </sp-card>
290
- </div>
291
- ```
247
+ Consider making the first word of links, buttons and headings something an assistive technology user might search for when headings and links are listed alphabetically.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/card",
3
- "version": "1.3.0-testing.0",
3
+ "version": "1.3.1-beta.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -58,13 +58,13 @@
58
58
  "lit-html"
59
59
  ],
60
60
  "dependencies": {
61
- "@spectrum-web-components/asset": "^1.3.0-testing.0",
62
- "@spectrum-web-components/base": "^1.3.0-testing.0",
63
- "@spectrum-web-components/checkbox": "^1.3.0-testing.0",
64
- "@spectrum-web-components/divider": "^1.3.0-testing.0",
65
- "@spectrum-web-components/icons-workflow": "^1.3.0-testing.0",
66
- "@spectrum-web-components/shared": "^1.3.0-testing.0",
67
- "@spectrum-web-components/styles": "^1.3.0-testing.0"
61
+ "@spectrum-web-components/asset": "1.3.1-beta.0",
62
+ "@spectrum-web-components/base": "1.3.1-beta.0",
63
+ "@spectrum-web-components/checkbox": "1.3.1-beta.0",
64
+ "@spectrum-web-components/divider": "1.3.1-beta.0",
65
+ "@spectrum-web-components/icons-workflow": "1.3.1-beta.0",
66
+ "@spectrum-web-components/shared": "1.3.1-beta.0",
67
+ "@spectrum-web-components/styles": "1.3.1-beta.0"
68
68
  },
69
69
  "devDependencies": {
70
70
  "@spectrum-css/card": "10.0.0-s2-foundations.20"