refactor(card): clarify component's slot API

packages/card/README.md

@@ -31,18 +31,14 @@ import { Card } from '@spectrum-web-components/card';
 
 ```html demo
 <sp-card heading="Card Heading" subheading="JPG Photo">
-    <img
-        slot="cover-photo"
-        src="https://picsum.photos/200/300"
-        alt="Demo Image"
-    />
+    <img slot="image" src="https://picsum.photos/200/300" alt="Demo Image" />
     <div slot="footer">Footer</div>
 </sp-card>
 ```
 
 ```html demo
 <sp-card heading="Card Title" subheading="JPG">
-    <img slot="preview" src="https://picsum.photos/200/300" alt="Demo Image" />
+    <img slot="image" src="https://picsum.photos/200/300" alt="Demo Image" />
     <div slot="footer">Footer</div>
 </sp-card>
 ```
@@ -57,7 +53,7 @@ By default, the heading for an `<sp-card>` is applied via the `heading` attribut
     style="--spectrum-card-body-header-height: auto;"
 >
     <h1 slot="heading">Card Heading</h1>
-    <img alt="" slot="cover-photo" src="https://picsum.photos/200/300" />
+    <img alt="" slot="image" src="https://picsum.photos/200/300" />
     <div slot="footer">Footer</div>
 </sp-card>
 ```
@@ -74,7 +70,7 @@ An `<sp-card>` can be provided with an `href` attribute in order for it to act a
     href="https://opensource.adobe.com/spectrum-web-components"
     target="_blank"
 >
-    <img slot="cover-photo" src="https://picsum.photos/200/300" alt="Demo Image" />
+    <img slot="image" src="https://picsum.photos/200/300" alt="Demo Image" />
 </sp-card>
 ```
 
@@ -89,7 +85,7 @@ Normal cards can contain a heading, a subheading, a cover photo, and a footer.
 
 ```html
 <sp-card heading="Card Heading">
-    <img alt="" slot="cover-photo" src="https://picsum.photos/200/300" />
+    <img alt="" slot="image" src="https://picsum.photos/200/300" />
     <span slot="subheading">JPG photo</span>
     <div slot="footer">Footer</div>
 </sp-card>
@@ -101,11 +97,7 @@ Cards can be supplied an `actions` via a names slot.
 
 ```html
 <sp-card heading="Card Heading" subheading="JPG Photo">
-    <img
-        slot="cover-photo"
-        src="https://picsum.photos/200/300"
-        alt="Demo Image"
-    />
+    <img slot="image" src="https://picsum.photos/200/300" alt="Demo Image" />
     <div slot="footer">Footer</div>
     <sp-action-menu
         label="More Actions"
@@ -141,7 +133,7 @@ Quiet cards can contain a heading, a subheading, a cover photo, a description, a
 ```html
 <div style="width: 208px; height: 264px">
     <sp-card variant="quiet" heading="Card Heading" subheading="JPG Photo">
-        <img alt="" slot="preview" src="https://picsum.photos/200/300" />
+        <img alt="" slot="image" src="https://picsum.photos/200/300" />
         <div slot="description">10/15/18</div>
         <div slot="footer">Footer</div>
     </sp-card>
@@ -158,7 +150,7 @@ When leveraging the `asset` attribute, a card can be declared as representing a
         subheading="JPG Photo"
         asset="file"
     >
-        <img alt="" slot="preview" src="https://picsum.photos/200/300" />
+        <img alt="" slot="image" src="https://picsum.photos/200/300" />
         <div slot="heading">File Name</div>
         <div slot="description">10/15/18</div>
         <div slot="footer">Footer</div>
@@ -171,7 +163,7 @@ Or a `folder`:
 ```html
 <div style="width: 208px; height: 264px">
     <sp-card variant="quiet" subheading="JPG Photo" asset="folder">
-        <img alt="" slot="preview" src="https://picsum.photos/200/300" />
+        <img alt="" slot="image" src="https://picsum.photos/200/300" />
         <div slot="heading">Folder Name</div>
         <div slot="description">10/15/18</div>
         <div slot="footer">Footer</div>
@@ -184,7 +176,7 @@ Quiet cards will also accept `actions` via a named slot.
 ```html
 <div style="width: 208px; height: 264px">
     <sp-card variant="quiet" heading="Card Heading" subheading="JPG Photo">
-        <img alt="" slot="preview" src="https://picsum.photos/200/300" />
+        <img alt="" slot="image" src="https://picsum.photos/200/300" />
         <div slot="description">10/15/18</div>
         <sp-action-menu
             label="More Actions"
@@ -211,7 +203,7 @@ Gallery cards can contain a heading, a subheading, an image preview, a descripti
 ```html
 <div style="width: 532px; max-width: 100%; height: 224px">
     <sp-card variant="gallery" heading="Card Heading" subheading="JPG Photo">
-        <img alt="" slot="preview" src="https://picsum.photos/532/192" />
+        <img alt="" slot="image" src="https://picsum.photos/532/192" />
         <div slot="description">10/15/18</div>
         <div slot="footer">Footer</div>
     </sp-card>
@@ -225,11 +217,7 @@ Gallery cards can contain a heading, a subheading, an image preview, a descripti
 ```html demo
 <div style="width: 208px; height: 264px">
     <sp-card size="s" heading="Card Heading" subheading="JPG Photo">
-        <img
-            slot="cover-photo"
-            alt="Demo Image"
-            src="https://picsum.photos/110"
-        />
+        <img slot="image" alt="Demo Image" src="https://picsum.photos/110" />
         <div slot="footer">Footer</div>
     </sp-card>
 </div>
@@ -240,7 +228,7 @@ A `horizontal` card:
 ```html demo
 <div style="color: var(--spectrum-neutral-content-color-default);">
     <sp-card size="s" horizontal heading="Card Heading" subheading="JPG Photo">
-        <sp-icon slot="preview" style="width: 36px; height: 36px;">
+        <sp-icon slot="image" style="width: 36px; height: 36px;">
             <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 36 36"
@@ -270,7 +258,7 @@ Or a `quiet` card:
         subheading="JPG Photo"
         variant="quiet"
     >
-        <img src="https://picsum.photos/110" alt="Demo Image" slot="preview" />
+        <img src="https://picsum.photos/110" alt="Demo Image" slot="image" />
         <div slot="footer">Footer</div>
         <sp-action-menu
             label="More Actions"

packages/card/src/Card.ts

@@ -10,6 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+import '@spectrum-web-components/asset/sp-asset.js';
 import {
     CSSResultArray,
     html,
@@ -19,46 +20,43 @@ import {
     SpectrumElement,
     TemplateResult,
 } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import {
     property,
     query,
 } from '@spectrum-web-components/base/src/decorators.js';
-import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
-import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
-import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
-import '@spectrum-web-components/asset/sp-asset.js';
-
-import { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox';
+import {
+    ifDefined,
+    when,
+} from '@spectrum-web-components/base/src/directives.js';
 import '@spectrum-web-components/checkbox/sp-checkbox.js';
-import '@spectrum-web-components/popover/sp-popover.js';
+import { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox';
 import '@spectrum-web-components/divider/sp-divider.js';
-import cardStyles from './card.css.js';
-import headingStyles from '@spectrum-web-components/styles/heading.js';
+import '@spectrum-web-components/popover/sp-popover.js';
+import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
+import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
+import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
 import detailStyles from '@spectrum-web-components/styles/detail.js';
+import headingStyles from '@spectrum-web-components/styles/heading.js';
+import cardStyles from './card.css.js';
 
 /**
  * @element sp-card
  *
  * @fires change - Announces a change in the `selected` property of a card
- * @slot preview - This is the preview image for Gallery Cards
- * @slot cover-photo - This is the cover photo for Default and Quiet Cards
+ * @slot image - This is the image of the card
  * @slot heading - HTML content to be listed as the heading
  * @slot subheading - HTML content to be listed as the subheading
  * @slot description - A description of the card
  * @slot actions - an `sp-action-menu` element outlining actions to take on the represened object
  * @slot footer - Footer text
  */
 export class Card extends LikeAnchor(
-    SizedMixin(
-        ObserveSlotPresence(FocusVisiblePolyfillMixin(SpectrumElement), [
-            '[slot="cover-photo"]',
-            '[slot="preview"]',
-        ]),
-        {
+    ObserveSlotPresence(
+        SizedMixin(FocusVisiblePolyfillMixin(SpectrumElement), {
             validSizes: ['s', 'm'],
             noDefaultSize: true,
-        }
+        }),
+        '[slot="image"]'
     )
 ) {
     public static override get styles(): CSSResultArray {
@@ -104,12 +102,8 @@ export class Card extends LikeAnchor(
     @property()
     public subheading = '';
 
-    protected get hasCoverPhoto(): boolean {
-        return this.getSlotContentPresence('[slot="cover-photo"]');
-    }
-
-    protected get hasPreview(): boolean {
-        return this.getSlotContentPresence('[slot="preview"]');
+    protected hasImage(): boolean {
+        return this.getSlotContentPresence('[slot="image"]');
     }
 
     public override click(): void {
@@ -207,7 +201,7 @@ export class Card extends LikeAnchor(
         this.addEventListener('pointercancel', handleEnd);
     }
 
-    protected get renderHeading(): TemplateResult {
+    protected renderHeading(): TemplateResult {
         return html`
             <div
                 class="title spectrum-Heading spectrum-Heading--sizeXS"
@@ -218,23 +212,18 @@ export class Card extends LikeAnchor(
         `;
     }
 
-    protected get renderPreviewImage(): TemplateResult {
-        return html`
-            <sp-asset id="preview" variant=${ifDefined(this.asset)}>
-                <slot name="preview"></slot>
-            </sp-asset>
-            ${this.variant !== 'quiet' && !this.horizontal
-                ? html`
-                      <sp-divider size="s"></sp-divider>
-                  `
-                : nothing}
-        `;
-    }
+    protected renderImage(): TemplateResult {
+        const hasPreview =
+            this.variant === 'gallery' ||
+            this.variant === 'quiet' ||
+            this.horizontal;
 
-    protected get renderCoverImage(): TemplateResult {
         return html`
-            <sp-asset id="cover-photo" variant=${ifDefined(this.asset)}>
-                <slot name="cover-photo"></slot>
+            <sp-asset
+                id=${hasPreview ? 'preview' : 'cover-photo'}
+                variant=${ifDefined(this.asset)}
+            >
+                <slot name="image"></slot>
             </sp-asset>
             ${this.variant !== 'quiet' && !this.horizontal
                 ? html`
@@ -244,24 +233,7 @@ export class Card extends LikeAnchor(
         `;
     }
 
-    protected get images(): TemplateResult[] {
-        const images: TemplateResult[] = [];
-        if (this.hasPreview) images.push(this.renderPreviewImage);
-        if (this.hasCoverPhoto) images.push(this.renderCoverImage);
-        return images;
-    }
-
-    private renderImage(): TemplateResult[] {
-        if (this.horizontal) {
-            return this.images;
-        }
-        if (this.variant !== 'standard') {
-            return [this.renderPreviewImage];
-        }
-        return this.images;
-    }
-
-    private get renderSubtitleAndDescription(): TemplateResult {
+    protected renderSubtitleAndDescription(): TemplateResult {
         return html`
             <div class="subtitle spectrum-Detail spectrum-Detail--sizeS">
                 <slot name="subheading">${this.subheading}</slot>
@@ -272,12 +244,16 @@ export class Card extends LikeAnchor(
 
     protected override render(): TemplateResult {
         return html`
-            ${this.renderImage()}
+            ${when(
+                this.hasImage(),
+                () => this.renderImage(),
+                () => nothing
+            )}
             <div class="body">
                 <div class="header">
-                    ${this.renderHeading}
+                    ${this.renderHeading()}
                     ${this.variant === 'gallery'
-                        ? this.renderSubtitleAndDescription
+                        ? this.renderSubtitleAndDescription()
                         : nothing}
                     ${this.variant !== 'quiet' || this.size !== 's'
                         ? html`
@@ -293,7 +269,7 @@ export class Card extends LikeAnchor(
                 ${this.variant !== 'gallery'
                     ? html`
                           <div class="content">
-                              ${this.renderSubtitleAndDescription}
+                              ${this.renderSubtitleAndDescription()}
                           </div>
                       `
                     : nothing}

packages/card/src/card.css

@@ -25,14 +25,7 @@ governing permissions and limitations under the License.
 
 .action-button {
     flex-grow: 0;
-}
-
-:host([dir='ltr']) .action-button {
-    margin-left: auto;
-}
-
-:host([dir='rtl']) .action-button {
-    margin-right: auto;
+    margin-inline-start: auto;
 }
 
 /* The description slot has a psuedo-element that also needs to receive the font styling. 
@@ -44,19 +37,15 @@ slot[name='description'] {
     );
 }
 
-#preview + #cover-photo {
-    display: none;
-}
-
 #cover-photo ::slotted(*),
-:host(:not([variant='quiet'])) #preview ::slotted(*) {
-    width: 100%;
+#preview ::slotted(*) {
+    inline-size: 100%;
     display: block;
 
     /* Since we're using <img> tags instead of background-image for the cover photo,
     we need an additional object-fit property to preserve the aspect ratio of the image
     In spectrum-css, background-size is used */
-    object-fit: cover;
+    object-fit: var(--mod-card-image-object-fit, cover);
 }
 
 :host(:not([variant='gallery'])) #preview ::slotted(*) {
@@ -88,11 +77,6 @@ sp-popover {
     width: var(--spectrum-card-title-width);
 }
 
-.subtitle {
-    /* Override until https://github.com/adobe/spectrum-css/issues/1054 is fixed */
-    text-transform: none;
-}
-
 :host:before,
 :host:after {
     pointer-events: none;